Δημιουργία μενού πλοήγησης με το Adobe Photoshop

Post Pic
στις 05.03.10. Kατηγορίες Adobe, Photoshop με 8 Σχόλια

Στο πρώτο του άρθρο για το GreekTuts ο Στράτος θα μας δείξει με απλά και κατανοητά βήματα πως μπορούμε να σχεδιάσουμε και να δημιουργήσουμε ένα menu για την ιστοσελίδα μας, χρησιμοποιόντας το Adobe Photoshop.

Παρακάτω θα δούμε πως μπορούν να δημιουργήσουμε ένα μενού πλοήγησης με το Adobe Photoshop. Είναι σχετικά εύκολο και γρήγορο.

Τελικό Αποτέλεσμα

menu_final

Βήμα 1: Δημιουργία νέας εικόνας

Αρχικά δημιουργήστε μια νέα εικόνα με πλάτος 920 και μήκος 170 pixels.

menu_final

Βήμα 2: Μενού πλοήγησης

Φτιάξτε έναν καινούργιο layer Layer > New > Layer … και ονομάστε τον “Menu“. Ορίστε ως foreground color το χρώμα #1Ε1Ε1Ε και πάρτε το Rounded Rectangle Tool, μετά ορίστε το radius σε 6 px και ζωγραφίστε το μενού όπως το παράδειγμα παρακάτω.

draw_menu

Βήμα 3: Δώστε στυλ στο μενού πλοήγησης

Ξεκινήστε από το Layer > Layer Style > Blending Options… και επιλέξτε τοOuter Glow. Ακολουθήστε τις παρακάτω ρυθμίσεις.

outer_glow

Μετά επιλέξτε Gradient Overlay και ακολουθήστε τις παρακάτω ρυθμίσεις.

gradient_overlay

Βήμα 4: Προσθήκη κειμένου

Αρχικά ορίστε το foreground color σε #FFFFFF (άσπρο). Επιλέξτε το Horizontal Type Tool, ως γραμματοσειρά την Myriad Pro (Regular) ή την Arial και 14 pt μέγεθος.

Γράψτε κάποιες λέξεις όπως “Home“, “About“, “Blog” κ.α. και ανοίξτε τα blending options Layer -> Layer Style -> Blending Options…. Ακολουθήστε τις παρακάτω ρυθμίσεις.

drop_shadow

Τώρα το μενού σας πρέπει να είναι κάπως έτσι:

example

Βήμα 5: Προσθήκη ενός σχεδίου

Με ένα σχέδιο το μενού μας θα φαίνεται καλύτερο. Κατεβάστε την παρακάτω εικόνα: Paint canvas texture και ανοίξτε την. Επιλέξτε την (Ctrl + A) και αντιγράψτε την (Ctrl + C).  ΠΡΟΣΟΧΗ: τo παρακάτω μέρος είναι λίγο δυσνόητο και αν δεν έχετε το επιθυμητό αποτέλεσμα με την πρώτη προσπάθεια, παρακαλώ διαβάστε το ξανά και ξανά. Φτιάξτε έναν καινούργιο layer Layer > New > Layer… και κάντε επικόληση (Ctrl + V). Μετά κρατήστε πατημένο το Ctrl και κάνε ένα κλικ στον layer “Menu” για να επιλέξετε το σχήμα του. Ενώ έχετε επιλεγμένο το σχήμα του layer “Menu”, κάντε κλικ στον layer με το σχέδιο και αντιγράψτε τον (Ctrl + C). Μετά κρύψτε αυτόν τον layer (με το σχέδιο) και κάντε επικόλληση (Ctrl + V). Το αποτέλεσμα:

example2

Μετά απλά ακολουθήστε τις παρακάτω ρυθμίσεις.

blending

Αποτέλεσμα:

example3

Tags: , , , , , , , ,

Στράτος Ιορδανίδης { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
Ο Στράτος Ιορδανίδης ασχολείται με το Web Design περισσότερο από 1 χρόνο. Είναι ο δημιουργός του Marked Lines, ένα blog σχετικά με το (Web) Design Inspiration. Ακολουθήσετε τον στο twitter ή στο forrst!

8 Σχόλια στο άρθρο Δημιουργία μενού πλοήγησης με το Adobe Photoshop

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>