Τις προάλλες έκατσα και έφτιαξα το προσωπικό μου background στο Twitter, αλλά λόγω της αλλαγής του mail μου έπρεπε να το ξανασχεδιάσω. Επειδή δεν είχα αποθηκεύσει το .psd αρχείο με τα layers κλπ και είχα μόνο τα .jpeg και .png, έπρεπε να το ξανακάνω από την αρχή. Σκέφτηκα λοιπόν να γράψω τη διαδικασία αυτή στο Photoshop, σε ένα post.
(Συγχωρέστε με που στο site – στο feed είναι οκ απ’ όσο είδα ούτε εκεί είναι οκ, έχει μεγάλα gaps από βήμα σε βήμα – οι εικόνες εμφανίζονται στα δεξιά. Είναι ένα πρόβλημα – τουλάχιστον για μένα – του .css του theme. Σκοπεύω να το αλλάξω. Προς το παρών ελπίζω να μην σας την σπάει όσο εμένα.) Όλα οκ τώρα. Έφτιαξα το .css template!
Αυτό θα είναι το τελικό αποτέλεσμα μας:
Βήμα 1ο
Δημιουργήστε ένα καινούργιο αρχείο στο Photoshop File > New με διαστάσεις 1800*1000
Βήμα 2ο
Κάντε δεξί κλικ στο Rectangle Tool και επιλέξτε στη συνέχεια το Rounded Rectangle Tool. Σχεδιάστε ένα κάθετο (με αναλογία περίπου από όσο μου φάνηκε 2:1) στην πάνω αριστερά γωνία της εικόνας, όπου θα είναι και η βάση του κειμένου με τις πληροφορίες μας. Αυτόματα θα δημιουργηθεί και ένα καινούργιο layer, αυτό του σχήματος που μόλις φτιάξαμε. Ονόμαστε το εάν θέλετε Shape 1 ή text_box.
Βήμα 3ο
Πατήστε Ctrl+Shift+N για να δημιουργήσετε έναν καινούργιο layer, αυτόν του background όπου θα βάλουμε. Ονομάστε το layer όπως θέλετε. Εγώ το άφησα Layer 1 ώς έχει μιας και δεν μου αποτελεί πρόβλημα αφού τα υπόλοιπα layers είναι ονομασμένα. Τώρα προσθέστε το background σας. Εάν δεν καταλαμβάνει όλο το canvas του αρχείο μας, πατήστε Ctrl+T για να το κάνετε resize – προσέξτε!, όχι πολύ, μην χαλάσει η ανάλυση. Εάν και πάλι δεν καταλαμβάνει όλο τον διαθέσιμο χώρο, μην ανυσηχείτε.
Βήμα 4ο
Επιλέξτε τώρα το Text tool και γράψτε πάνω στο dummie box που φτιάξαμε πιο πριν τις πληροφορίες που θέλετε για εσάς. Εγώ τις δικές μου τις είχα έτοιμες σε ξεχωριστό .psd (μόνο αυτές τις είχα σε .psd) και μόνο άλλαξα την καινούργια διεύθηνση του gmail/gtalk μου. Τα εικονίδια είναι του καταπληκτικού Spoongraphics που χρησιμοποίησα, τα βρήκα από το Greektuts.net, ένα καινούργιο site με ελληνικά tutorials σχετικά με design – web design.
Θυμηθείτε το κάθε κειμενάκι και εικονίδιο να έιναι ξεχωριστό layer και στο τέλος βάλτε σε ένα folder τα layers με τα εικονίδια και τα αντίστοιχα κείμενα σας, ώστε να είναι πιο τακτοποιημένα.
Βήμα 5ο
Αφού λοιπόν, γράψατε το/τα κειμενά σας, ήρθε η ώρα για το visual edit του box. Πάτε στο Gradient tool κάντε δεξί κλικ και επιλέξτε το Paint Bucket tool. Διαλέξτε το επιθυμητό χρώμα και βάψτε το. Στη συνέχεια κάντε δεξί κλικ στο layer του dummie box και επιλέξτε Blending Options. Εδώ τώρα, τσεκάρετε το Outer glow και παίξτε με το χρώμα και τις τιμές για να πετύχετε ένα επιθυμητό απότελεσμα. Το δικό μου μπορείτε να το βρείτε στην παρακάτω εικόνα. (Σημείωση: στο τελικό αποτέλεσμα μου, που είναι ανεβασμένο και στο twitter account μου, έχω κάνει κάποιες αλλαγές σε σχέση με το τελικό του tutorial αυτού. Μην ανυσηχείτε – δεν έιναι τίποτα παραπάνω, απλά και μόνο ξανα-έπαιξα λίγο με τα Blending Options και το εσωτερικό χρώμα του box).
Επίσης αλλάξτε και το opacity αλλά και fill του dummie box ώστε να γίνει διαφανές και πιο stylized.
Βήμα 6ο
Τέλος! Αυτό ήταν. Δεν έχει 6ο βήμα, γιατί πολύ απλά πλέον το προσωπικό μας Twitter background είναι έτοιμο για upload στο profile μας. Ευχαριστώ που διαβάσατε το πρώτο μου Photoshop tutorial. Οποιεσδήποτε παρατηρήσεις, τυχόν απορίες και ερωτήσεις είναι ευπρόσδεκτες στα σχόλια!
Μπράβο ωραίο tut για τους tweet-maniax.
:)
Σε ευχαριστώ. Εσύ δεν έχεις γραφτεί στο twitter ακόμη;
Δεν θέλω να έχω καμία επαφή με αυτή την εφαρμογή. Την αποφεύγω όσο μπορώ…
και γιατί αυτό;
Ε παίζουν ρόλο αρκετοί παράγοντες που δεν ακολουθώ αυτό το web-trend.
Θα σου εξηγήσω αναλυτικά με κανένα mail :)
Τζάμπα κόπος. Δεν νομίζω κανένας να πηγαίνει στα profiles του καθενός ώστε να κοιτάει τα tweet του. Τα βλέπει στην κεντρική σελίδα του.
Όταν εσύ δίνεις το link στο Twitter, στην κεντρική σελίδα πάνε; Όταν κάποιος βλέπει ένα tweet σου και πατάει στο ονομά σου να δει το bio/site κλπ, στη κεντρική σελίδα πάει;
Δεν είναι τζάμπα κόπος – είναι ένα εργαλείο που βοηθάει να δείξεις ποιος είσαι αφού τα 160chars για το bio δεν φτάνουν, ή να δείξεις και άλλα links σε άλλα networks.
Σε καμία, μα καμία, περίπτωση δεν είναι τζάμπα κόπος.
http://twitter.com/aflets
Πώς σε φαίνεται? Bασίστηκα κάπως στο tut σου
Γαμάτο. Μόλις είδα το comment σου! :-) Γκουντ τζομπ!