Τρίτη 17 Αυγούστου 2010

Δημιουργία shortcut icon (ή favicon) με το Photoshop

Έχετε δει τις μικρές χαρακτηριστικές εικόνες που συνήθως εμφανίζονται αριστερά της διεύθυνσης (url) μιας ιστοσελίδας στο mozilla firefox (αλλά και στον Internet Explorer κάποιες φορές); Θα θέλατε να μάθετε και εσείς πως θα δημιουργήσετε μια ανάλογη εικόνα για την δικιά σας ιστοσελίδα; Δεν είναι δύσκολο! Οι εικόνες αυτές ονομάζονται shortcut icons ή favicons και μπορείτε να μάθετε να τις δημιουργείτε αφού διαβασετε παρακάτω...
Η shortcut icon είναι μια μικρή εικόνα που εμφανίζετε αριστερά από τη διεύθυνση (URL) μιας ιστοσελίδας στον φυλλομετρητή σελίδων (web browser). Το μέγεθός της είναι 16x16 pixels, οπότε αποτελεί σχεδιαστική πρόκληση να καταφέρουμε να δημιουργήσουμε κάτι αισθητικά ενδιαφέρον.
Για να δημιουργήσουμε ένα τέτοιο αρχείο με το photoshop χρειάζεται να εγκαταστήσουμε ένα κατάλληλο plugin, το οποίο είναι δωρεάν και μπορούμε να το βρούμε στην ιστοσελίδα της Telegraphics. Με το plugin δίνουμε τη δυνατότητα στο photoshop να διαβάζει και να αποθηκεύει αρχεία ICO (με επέκταση ico και ανάλογο format).
Για να εγκαταστήσουμε το plugin αρκεί να τοποθετήσουμε το αρχείο "ICOFormat.8bi" που θα βρούμε στο zip πακέτο που θα κατεβάσουμε στον φάκελο με τα formats αρχείων του photoshop (συνήθως ο φάκελος αυτός είναι ο C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats) και να ξαναξεκινήσουμε το photoshop.
Επειδή είναι πολύ μικρό το μέγεθος 16x16 για να δημιουργήσουμε μια καλή εικόνα είναι προτιμότερο να δουλέψουμε σε μεγαλύτερο μέγεθος (π.χ. 64x64) και ύστερα να μικρύνουμε το αποτέλεσμα. Καλό είναι να έχουμε στο μυαλό μας να δημιουργήσουμε ένα σχετικά απλό σχέδιο γιατί σε άλλη περίπτωση όταν θα αλλάξουμε το μέγεθος σε 16x16 η εικόνα μας δεν θα είναι όπως την περιμέναμε.
Για να αλλάξουμε το μέγεθος της εικόνας πριν την αποθήκευση χρησιμοποιούμε την επιλογή (menu) του photoshop Image-->Image size. Δεν πρέπει να ξεχάσουμε κατά την αποθήκευση (File->Save as...) να επιλέξουμε τύπο αρχείο (format) ICO.
Το επόμενο βήμα είναι να συνδέσουμε την εικόνα που δημιουργήσαμε με μια ιστοσελίδα. Για να το επιτύχουμε αυτό αρκεί να τοποθετήσουμε την εντολή (εττικέτα?)<link rel="Shortcut Icon" href="favicon.ico">κάπου μέσα στο <head>...</head> της ιστοσελίδας μας και φυσικά να τοποθετήσουμε την εικόνα στον ανάλογο φάκελο στον web server (στο παράδειγμά μας την εικόνα την ονομάσαμε favicon.ico, στην περίπτωση που το όνομα της εικόνας μας είναι διαφορετικό αλλάζουμε το ανάλογο σημείο της εντολής).
Για να δοκιμάσουμε το αποτέλεσμα αρκεί να φορτώσουμε την ιστοσελίδα στην οποία συνδέσαμε την shortcut icon στον φυλλομετρητή. Σε περίπτωση που αυτή (η shortcut icon) δεν φαίνεται, ας δοκιμάσουμε να κάνουμε ανανέωση (refresh) πατώντας το πλήκτρο shift για να αγνοήσει ο φυλλομετρητής την μνήμη (cash) του. Αυτό μπορούμε να το πετύχουμε τοποθετώντας και ένα ? στο τέλος της διεύθυνσης.
Εάν δεν έχετε έμπνευση για να δημιουργήσετε τη δική σας shortcut icon, μπορείτε να ρίξετε μια ματιά στο internet για ιδέες. Ένα χαρακτηριστικό site με τέτοιες προτάσεις μπορείτε να βρείτε κάνοντας κλικ εδώ!

Δεν υπάρχουν σχόλια: