Δημιουργία rollover menu

[Anastasis 48]

Έστω ότι έχουμε σχεδιάσει το παρακάτω μενού στο Photoshop


To menu περιέχει 5 κουμπιά και τις 5 καταστάσεις τους rollover. Άρα έχουμε 10 διαφορετικά layers


Η επόμενη μας κίνηση είναι να τραβήξουμε οδηγούς από τους χάρακες στα σημεία που θέλουμε να κόψουμε τα κουμπιά.


Κλείνουμε τα ματάκια από τα layers που έχουν τα rollover state και πατάμε File-->Jump to-->ImageReady.

Μας ανοίγει το ίδιο αρχείο στο ImageReady με όλα τα layers και τους χάρακες.

Έπειτα επιλέγουμε από το μενου Slices-->Create Slices from Guides για να δημιουργήσει slices από τους οδηγούς.


Τώρα θα φτιάξουμε τα rollover states.

Στην παλέτα rollover βλέπουμε 5 layers που αντιστοιχούν στα 5 κουμπιά. Επιλέγουμε το πρώτο και πατάμε το κουμπί Create rollover state.


Η παλέτα μετατρέπεται όπως βλέπουμε παρακάτω:


Στην παλέτα των layers κλείνουμε το ματάκι του κανονικού κουμπιού και ανοίγουμε το ματάκι του rollover state.
Ακολουθούμε την ίδια διαδικασία για όλα τα κουμπιά.
Η παλέτα των rollover state πρέπει να μοιάζει με την παρακάτω:


Έπειτα επιλέγουμε File-->Save Optimized as και προσέχουμε να γράφει HTML and Images. Βάζουμε ένα όνομα για το html αρχείο μας και πατάμε αποθήκευση.
Στο σημείο που του είπαμε να αποθηκεύσει έχει δημιουργήσει πλέον ένα αρχείο html και ένα φάκελο με όνομα images που περιέχει τα 10 κουμπιά.