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

Post Pic
στις 20.05.09. Kατηγορίες Photoshop με Ένα Σχόλιο

Σε αυτό το βοήθημα ο Απόστολος θα μας δείξει πώς μπορούμε να φτιάξουμε το προσωπικό μας background για την σελίδα μας στο twitter χρησιμοποιόντας το Photoshop.

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

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 και γράψτε πάνω στο dummy 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 του dummy box και επιλέξτε Blending Options. Εδώ τώρα, τσεκάρετε το Outer glow και παίξτε με το χρώμα και τις τιμές για να πετύχετε ένα επιθυμητό απότελεσμα. Το δικό μου μπορείτε να το βρείτε στην παρακάτω εικόνα. (Σημείωση: στο τελικό αποτέλεσμα μου, που είναι ανεβασμένο και στο twitter account μου, έχω κάνει κάποιες αλλαγές σε σχέση με το τελικό του tutorial αυτού. Μην ανυσηχείτε – δεν έιναι τίποτα παραπάνω, απλά και μόνο ξανα-έπαιξα λίγο με τα Blending Options και το εσωτερικό χρώμα του box).

text_box_blending_options

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

change_box_fill

Βήμα 6ο

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

Το άρθρο αυτό δημοσιεύτηκε πρώτα στο http://apas.gr

Tags:

Apas { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
Ο Απόστολος Παπαδόπουλος διατηρεί εδώ και καιρό ένα πολύ καλό blog για την τεχνολογία και το web 2.0. Συμφώνησε να βοηθήσει στην επέκταση του περιεχομένου της ιστοσελίδας μας, δανείζοντας μας άρθρα και βοηθήματα, και τον ευχαριστούμε πολύ γι’αυτό.

Ένα Σχόλιο στο άρθρο Δημιουργήστε το προσωπικό σας background στο Twitter

  • Apostolos says:

    Ευχαριστώ που δέχθηκες να δημοσιεύσεις το άρθρο μου! Αν θες σε παρακαλώ στο box που έχεις με τις πληροφορίες σχετικά με εμένα βάλε και το link προς το twitter account μου. :-) Ευχαριστώ!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>