Τεμαχισμός ιστοσελίδας σε Slices

[Anastasis 48]

Στο παρακάτω βοήθημα θα δούμε πως θα τεμαχίσουμε ένα template που έχουμε δημιουργήσει στο photoshop σε slices με την βοήθεια του Image Ready και έπειτα πως θα το χρησιμοποιήσουμε στο Dreamweaver.
Το template που θα χρησιμοποιήσουμε είναι κατασκευασμένο από τον EkLekTos.

To template που έχουμε είναι το παρακάτω:



Αφού το ανοίξουμε στο Photoshop το πρώτο πράγμα που θα κάνουμε είναι να τραβήξουμε οδηγούς στα σημεία που θέλουμε να γίνει η τομή.
Από το μενού View επιλέγουμε Rulers.
Οι οδηγοί αυτοί θα πρέπει να τραβηχτούν από τους χάρακες με πολύ προσοχή και πολύ υπομονή. Χρησιμοποιώντας το εργαλείο του zoom θα πρέπει οι οδηγοί να είναι πολύ ακριβείς τοποθετημένοι.
Οι οδηγοί που τράβηξα εγώ είναι οι παρακάτω:



Δεν υπάρχει λόγος πανικού με όλον αυτό τον χαμό. Θα τα φτιάξουμε σε λίγο.
Έπειτα πατάμε το κουμπάκι το οποίο είναι το τελευταίο στην εργαλειοθήκη για να μεταπηδήσουμε στο image ready.
Από το μενού Slices επιλέγουμε Create slices from guides και αυτομάτως όλα κόβονται σε κομμάτια.



Στην συγκεκριμένη περίπτωση έχουμε 224 slices που σημαίνει ότι αν κάνουμε τώρα export την σελίδα μας θα έχουμε 224 εικόνες.
Το επόμενο βήμα μας είναι να μειώσουμε τα slices σε όσο το δυνατόν λιγότερα.
Επιλέγουμε το εργαλείο Slice select tool



Τώρα θα ξεκινήσουμε την επίπονη διαδικασία.
Επιλέγουμε το slice No 1 και από τα κόμβους αλλαγής μεγέθους το φτάνουμε μέχρι να καλύψει το slice 17 και το slice 29.



Έπειτα επιλέγουμε με το ίδιο εργαλείοκαι με προσοχή όλα τα slices που βρίσκονται μέσα στην περιοχή αυτή και πατάμε το delete.
ΠΡΟΣΟΧΗ!!! Σε καμμία περίπτωση δεν σβήνουμε το slice 1.
Μόλις ολοκληρώσουμε τις διαγραφές θα έχουμε το slice 1 που θα πιάνει μία μεγάλη περιοχή και συνολικά 199 slices



Συνεχίζουμε με την ίδια λογική και στο τέλος θα δουμε πόσα slices μας μείνανε.
Σύμφωνα με την παρακάτω εικόνα και με το header ολοκληρωμένο έχουμε μόνο 7 slices και σε σύνολο 151.
Παρατηρήστε επίσης ότι έχουμε κόψει σε κομμάτι το λογότυπο καθώς και το slogan αριστερά.



Ολοκληρώνοντας την προσπάθεια καταφέραμε να έχουμε μόνο 34 slices από 224 που είχαμε αρχικά.
Και αν δεν μας ταλαιπωρούσε ο EkLekTos με τις σκιές του ίσως να είχαμε και λιγότερα.



Το επόμενο βήμα είναι να ονοματίσουμε τα slice μας με περιγραφικά ονόματα. Από το μενού window επιλέγουμε slice για να εμφανιστεί η αντίστοιχη παλέτα. Έπειτα επιλέγοντας κάθε slice με το ίδιο εργαλείο δίνουμε το όνομα στο πεδίο name. Αυτό θα είναι και το όνομα αποθήκευσής του.



Στο επόμενο βήμα θα δημιουργήσουμε τα rollover στο μενού μας. Έχουμε υπόψη μας ότι για κάθε λέξη έχουμε διαφορετικό layer καθως και για κάθε rollover κατάσταση.
Φροντίζουμε να βλέπουμε την παλέτα Web content και Layers.
Πατάμε στην παλέτα web content πάνω στο Home



Κατόπιν επιλέγουμε το κουμπάκι που λέει Create rollover state στο κάτω μέρος της παλέτας:



και θα έχουμε κάτι τέτοιο



Έπειτα έχοντας επιλεγμένη την περιοχή over πατάμε στην παλέτα των layers πάνω στο layer Home1 και κλείνουμε το ματάκι. Αυτομάτως θα εμφανιστεί το από κάτω layer που έχει άλλο χρώμα. Ακολουθούμε την ίδια λογική για όλα τα κουμπιά μας.

That's all

Εμφανίζουμε την παλέτα optimize και επιλέγουμε σε τι format θα αποθηκευτούν οι εικόνες μας. Έπειτα από το μενού File επιλέγουμε Save Optimize as... και δίνουμε το όνομα του αρχείου. Ελέγχουμε εάν από κάτω από το όνομα είναι επιλεγμένο το HTML and Images. Πατάμε αποθήκευση.

Καλή επιτυχία!!!