Ποικίλη Ύλη: Δημιουργώντας ένα Favicon στο Photoshop

Τα Favicon (favourite icon) είναι επεξεργάσιμα εικονίδια διαστάσεων 16x16px 256 xρωμάτων τα οποία φέρουν την επέκταση Windows Icon (.ico). Όταν κάποιος τα ανεβάσει στον root φάκελο ενός ιστότοπου, αυτό το εικονίδιο εμφανίζεται στο παράθυρο του φυλλομετρητή (browser) αριστερά της ηλεκτρονικής διεύθυνσης της συγκεκριμένης ιστοσελίδας (URL), δίπλα στο όνομα της σελίδας στην καρτέλα της και στα αγαπημένα για κάποιους φυλλομετρητές. Για παράδειγμα το favicon της Google είναι ένα λευκό g σε μπλε υπόβαθρο. Ευτυχώς η δημιουργία ενός favicon και η προσθήκη του σε έναν ιστότοπο είναι πολύ εύκολη διαδικασία, ειδικά με τη χρήση του Windows Icon plug-in για το Photoshop από την Telegraphics και την προσθήκη μερικών σειρών HTML κώδικα στο <head> των ιστοσελίδων μας. Για να σχεδιάσουμε, δημιουργήσουμε και να τοποθετήσουμε ένα favicon στον ιστότοπό μας ή τον ιστότοπο ενός πελάτη μας ακολουθούμε αυτή τη διαδικασία:

Ξεκινάμε κατεβάζοντας το δωρεάν (αν και οι δωρεές προς τους δημιουργούς είναι επιθυμητές) Windows Icon Photoshop plug-in από τον ιστότοπο της Τelegraphics. Αφού το κατεβάσουμε, το εγκαθιστούμε και επανεκκινούμε το Photoshop.
Μέσα στο Photoshop, επιλέγουμε File --> New για να ανοίξουμε ένα νέο αρχείο. Στο μενού Preset επιλέγουμε Web, και επειδή ένα 16x16 μπορεί να είναι πολύ μικρό για να δουλέψουμε με άνεση, επιλέγουμε 64x64 και πατάμε ΟΚ.
Αν έχουμε ήδη ένα logo ή κάποια άλλη εικόνα που θέλουμε να χρησιμοποιήσουμε ως favicon, τότε κάνουμε επικόλληση αυτού του logo ή εικόνας στο έγγραφό μας και ρυθμίζουμε το μέγεθός του ώστε να χωράει σωστά στον καμβά μας. Μετά επιλέγουμε από το κεντρικό μενού Image --> Image Size για να ανοίξουμε το παράθυρο διαλόγου Image Size, θέτουμε το πλάτος και το ύψος σε 16px, και πατάμε ΟΚ. Αν η εικόνα δείχνει καλή και στα 16x16 προχωράμε στο βήμα 4. Αλλιώς αν η εικόνα είναι πολύ θολή ή “πιξελιασμένη”, κάνουμε undo το resize, διορθώνουμε την εικόνα όπου χρειάζεται και ξανακάνουμε κατόπιν resize. Μπορεί να χρειαστεί να απλοποιήσουμε την εικόνα μας, να βάλουμε κάποιο φίλτρο όξυνσης (sharpening) να αυξήσουμε την αντίθεση και ή να προσθέσουμε περισσότερο κόρο στα χρώματά μας (saturation) για να την κάνουμε να φαίνεται ωραία σε μικρότερο μέγεθος.
Για να σώσουμε την εικόνα μας ως 16×16px favicon, επιλέγουμε File --> Save As για να ανοίξουμε το παράθυρο διαλόγου Save As . Επιλέγουμε την τοποθεσία που θέλουμε να σώσουμε, ονοματίζουμε το favicon, επιλέγουμε ICO (Windows Icon) (*.ico) από το μενού Format, και πατάμε Save. Διαφορετικά, μπορούμε να μετατρέψουμε ένα GIF, JPG, ή PNG αρχείο σε favicon.ico αρχείο χωρίς το Photoshop ICO plug-in, με τη βοήθεια του free online Favicon Generator tool στη σελίδα http://www.graphicsguru.com/favicon.php .
Στη συνέχεια τοποθετούμε μία αναφορά στο favicon σε κάθε σελίδα του ιστότοπου όπου θέλουμε να εμφανίζεται. Ανοίγουμε τις ιστοσελίδες μας μία - μία στον Web editor της επιλογής μας (πχ. Notepad++) και τοποθετούμε τον εξής κώδικα στο <head>:

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

Αυτός ο κώδικας μας εξασφαλίζει πως ο φυλλομετρητής (browser) που θα χρησιμοποιηθεί για να δούμε την ιστοσελίδα μπορεί να εντοπίσει και να απεικονίσει το επιλεγμένο favicon. Εάν θέλουμε μπορούμε να τοποθετήσουμε το favicon και σε άλλο σημείο του φακέλου μας, αρκεί να ορίσουμε σωστά τον σύνδεσμο στην αναφορά. Για παράδειγμα, εάν το βάλουμε στον φάκελο με τις υπόλοιπες εικόνες, images, τότε θα πρέπει να γράψουμε αυτόν τον κώδικα:

<link rel=”shortcut icon” type=”image/x-icon” href=”/images/favicon.ico” />

Δυστυχώς δεν μπορούν όλοι οι φυλλομετρητές να καταλάβουν αυτή τη σειρά κώδικα και να την απεικονίσουν σωστά. Για να βεβαιωθούμε πως όλοι οι ευρέως χρησιμοποιούμενοι φυλλομετρητές μπορούν να διαβάσουν το favicon μας, προσθέτουμε και αυτή τη γραμμή κώδικα στο <head/>:

Πολλοί φυλλομετρητές, όπως ο Firefox και ο Opera, δεν απαιτούν πλέον τη χρήση .ico αρχείων. Αντ' αυτών χρησιμοποιούν PNG αρχεία (τα οποία υποστηρίζουν διαφάνεια) ή GIF αρχεία (συμπεριλαμβανομένων και animated GIF), αρκεί να γράψουμε τον κατάλληλο κώδικα για να αντανακλά το είδος αρχείου που χρησιμοποιούμε. πχ:

Χρησιμοποιώντας το FTP πρόγραμμα της αρεσκείας μας (όπως τα WS-FTP, FileZilla, Fetch, ή CuteFTP) ή την ενσωματωμένη δυνατότητα FTP του HTML ή Web editor μας, ανεβάζουμε το νέο favicon και τις ανανεωμένες, με τον κώδικά του στο <head/>, σελίδες μας στο επίπεδο root (ή όπου αλλού προτιμάμε) του host του ιστότοπου μας.

Αυτό ήταν!

Για περεταίρω ιδέες σχετικές με τα favicon, μπορείτε να επισκεφθείτε την σελίδα:

smashingmagazine.com

Πηγή:

Sue Jenkins, 100 Smashing Photoshop Techniques

smashingmagazine.com