How Tο: Δημιουργήστε το προσωπικό σας background στο Twitter με το Photoshop

Τις προάλλες έκατσα και έφτιαξα το προσωπικό μου background στο Twitter, αλλά λόγω της αλλαγής του mail μου έπρεπε να το ξανασχεδιάσω. Επειδή δεν είχα αποθηκεύσει το .psd αρχείο με τα layers κλπ και είχα μόνο τα .jpeg και .png, έπρεπε να το ξανακάνω από την αρχή. Σκέφτηκα λοιπόν να γράψω τη διαδικασία αυτή στο Photoshop, σε ένα post. 

(Συγχωρέστε με που στο site – στο feed είναι οκ απ’ όσο είδα ούτε εκεί είναι οκ, έχει μεγάλα gaps από βήμα σε βήμα – οι εικόνες εμφανίζονται στα δεξιά. Είναι ένα πρόβλημα – τουλάχιστον για μένα – του .css του theme. Σκοπεύω να το αλλάξω. Προς το παρών ελπίζω να μην σας την σπάει όσο εμένα.) Όλα οκ τώρα. Έφτιαξα το .css template!

Αυτό θα είναι το τελικό αποτέλεσμα μας:

final

Βήμα 1ο

Δημιουργήστε ένα καινούργιο αρχείο στο Photoshop File > New με διαστάσεις 1800*1000

new_file

Βήμα 2ο

Κάντε δεξί κλικ στο Rectangle Tool και επιλέξτε στη συνέχεια το Rounded Rectangle Tool. Σχεδιάστε ένα κάθετο (με αναλογία περίπου από όσο μου φάνηκε 2:1) στην πάνω αριστερά γωνία της εικόνας, όπου θα είναι και η βάση του κειμένου με τις πληροφορίες μας. Αυτόματα θα δημιουργηθεί και ένα καινούργιο layer, αυτό του σχήματος που μόλις φτιάξαμε. Ονόμαστε το εάν θέλετε Shape 1 ή text_box.

text_area

Βήμα 3ο

Πατήστε Ctrl+Shift+N για να δημιουργήσετε έναν καινούργιο layer, αυτόν του background όπου θα βάλουμε. Ονομάστε το layer όπως θέλετε. Εγώ το άφησα Layer 1 ώς έχει μιας και δεν μου αποτελεί πρόβλημα αφού τα υπόλοιπα layers είναι ονομασμένα. Τώρα προσθέστε το background σας. Εάν δεν καταλαμβάνει όλο το canvas του αρχείο μας, πατήστε Ctrl+T για να το κάνετε resize – προσέξτε!, όχι πολύ, μην χαλάσει η ανάλυση. Εάν και πάλι δεν καταλαμβάνει όλο τον διαθέσιμο χώρο, μην ανυσηχείτε.

text_and_background

Βήμα 4ο

Επιλέξτε τώρα το Text tool και γράψτε πάνω στο dummie box που φτιάξαμε πιο πριν τις πληροφορίες που θέλετε για εσάς. Εγώ τις δικές μου τις είχα έτοιμες σε ξεχωριστό .psd (μόνο αυτές τις είχα σε .psd) και μόνο άλλαξα την καινούργια διεύθηνση του gmail/gtalk μου. Τα εικονίδια είναι του καταπληκτικού Spoongraphics που χρησιμοποίησα, τα βρήκα από το Greektuts.net, ένα καινούργιο site με ελληνικά tutorials σχετικά με design – web design

editing_text

Θυμηθείτε το κάθε κειμενάκι και εικονίδιο να έιναι ξεχωριστό layer και στο τέλος βάλτε σε ένα folder τα layers με τα εικονίδια και τα αντίστοιχα κείμενα σας, ώστε να είναι πιο τακτοποιημένα.

text_layers

 Βήμα 5ο

Αφού λοιπόν, γράψατε το/τα κειμενά σας, ήρθε η ώρα για το visual edit του box. Πάτε στο Gradient tool κάντε δεξί κλικ και επιλέξτε το Paint Bucket tool. Διαλέξτε το επιθυμητό χρώμα και βάψτε το. Στη συνέχεια κάντε δεξί κλικ στο layer του dummie box και επιλέξτε Blending Options. Εδώ τώρα, τσεκάρετε το Outer glow και παίξτε με το χρώμα και τις τιμές για να πετύχετε ένα επιθυμητό απότελεσμα. Το δικό μου μπορείτε να το βρείτε στην παρακάτω εικόνα. (Σημείωση: στο τελικό αποτέλεσμα μου, που είναι ανεβασμένο και στο twitter account μου, έχω κάνει κάποιες αλλαγές σε σχέση με το τελικό του tutorial αυτού. Μην ανυσηχείτε – δεν έιναι τίποτα παραπάνω, απλά και μόνο ξανα-έπαιξα λίγο με τα Blending Options και το εσωτερικό χρώμα του box).

text_box_blending_options

Επίσης αλλάξτε και το opacity αλλά και fill του dummie box ώστε να γίνει διαφανές και πιο stylized.

change_box_fill

Βήμα 6ο

Τέλος! Αυτό ήταν. Δεν έχει 6ο βήμα, γιατί πολύ απλά πλέον το προσωπικό μας Twitter background είναι έτοιμο για upload στο profile μας. Ευχαριστώ που διαβάσατε το πρώτο μου Photoshop tutorial. Οποιεσδήποτε παρατηρήσεις, τυχόν απορίες και ερωτήσεις είναι ευπρόσδεκτες στα σχόλια!

posted: May 19, 2009
under: How To's, Micro-blogging, Web

10 Responses

  1. Aflets says:

    Μπράβο ωραίο tut για τους tweet-maniax.

    :)

  2. Σε ευχαριστώ. Εσύ δεν έχεις γραφτεί στο twitter ακόμη;

  3. Aflets says:

    Δεν θέλω να έχω καμία επαφή με αυτή την εφαρμογή. Την αποφεύγω όσο μπορώ…

  4. και γιατί αυτό;

  5. Aflets says:

    Ε παίζουν ρόλο αρκετοί παράγοντες που δεν ακολουθώ αυτό το web-trend.

    Θα σου εξηγήσω αναλυτικά με κανένα mail :)

  6. Τζάμπα κόπος. Δεν νομίζω κανένας να πηγαίνει στα profiles του καθενός ώστε να κοιτάει τα tweet του. Τα βλέπει στην κεντρική σελίδα του.

  7. Apostolos says:

    Όταν εσύ δίνεις το link στο Twitter, στην κεντρική σελίδα πάνε; Όταν κάποιος βλέπει ένα tweet σου και πατάει στο ονομά σου να δει το bio/site κλπ, στη κεντρική σελίδα πάει;

    Δεν είναι τζάμπα κόπος – είναι ένα εργαλείο που βοηθάει να δείξεις ποιος είσαι αφού τα 160chars για το bio δεν φτάνουν, ή να δείξεις και άλλα links σε άλλα networks.

    Σε καμία, μα καμία, περίπτωση δεν είναι τζάμπα κόπος.

  8. Aflets says:

    http://twitter.com/aflets

    Πώς σε φαίνεται? Bασίστηκα κάπως στο tut σου

  9. Apostolos says:

    Γαμάτο. Μόλις είδα το comment σου! :-) Γκουντ τζομπ!

  10. […] background. Έτσι έκανα και εγώ, και με λίγη βοήθεια από το καταπληκτικό tut του apa (website / twitter) κατάφερα να προσαρμόσω το twitter στα […]