- Απαιτήσεις: Adobe Photoshop, πρόσβαση στο Internet, προσωπικό ιστολόγιο (αγγλικά blog) µε δυνατότητα αλλαγής και επέµβασης στο theme του, βασικές γνώσεις HTML
- Κόστος: Δωρεάν
- Ολοκλήρωση διαδικασίας: 30 Λεπτά
- Επίπεδο δυσκολίας: 5/10
Δηµιουργήστε και ενσωµατώστε στο ιστολόγιο σας διαφορετικές εκδοχές του ίδιου πλήκτρου, ώστε να απεικονίζει πότε είναι επιλεγµένο, δηλαδή όταν ο δείκτης του ποντικιού είναι επάνω του, και πότε το έχει επισκεφθεί ο χρήστης.
Τα πλήκτρα στα sites είναι, ουσιαστικά, links, σύνδεσµοι προς άλλες σελίδες και λειτουργίες, που, αντί για εµφάνιση τυπικού κειµένου, παρουσιάζονται µε κάποιο γραφικό. Όπως ίσως έχετε προσέξει, τα τυπικά links, µε τη µορφή κειµένου, στα περισσότερα sites αλλάζουν χρώµα όταν ο χρήστης τα σηµαδεύει µε το ποντίκι, αλλά και όταν τα έχει επισκεφθεί. Το ίδιο µπορεί να συµβαίνει µε τα “γραφικά” links: να αλλάζουν εµφάνιση όταν ο χρήστης τα σηµαδεύει, κάνοντας άµεσα ορατή την πιθανή επιλογή του, αλλά και όταν τα έχει ήδη επισκεφθεί/κάνει κλικ.
Η δηµιουργία τέτοιων links χωρίζεται σε δύο στάδια: το πρώτο είναι η δηµιουργία διαφορετικών γραφικών για κάθε κατάσταση του πλήκτρου και το δεύτερο η ενσωµάτωσή του σε µία ιστοσελίδα. Σε αυτές τις σελίδες θα εστιάσουµε περισσότερο στο πρώτο, αλλά θα παράσχουµε και κάποιες πρόσθετες λεπτοµέρειες (διαβάστε το πλαίσιο “Βλέπω κώδικα!”), ώστε, ακόµη και αν δεν γνωρίζετε τι είναι HTML και CSS, να µπορέσετε να ενσωµατώσετε παραπλήσια πλήκτρα στο site/blog σας.
Βήμα 1
Τρέξτε το Photoshop και δημιουργήστε ένα νέο έγγραφο (Ctrl+N) με πλάτος τριπλάσιο από αυτό που θέλετε να έχει το πλήκτρο σας. Εμείς θα δημιουργήσουμε ένα πλήκτρο 50 pixels x 50 pixels, οπότε χρησιμοποιήσαμε αναλογίες Width: 150 pixels και Height: 50 pixels.
Βήμα 2
Διαλέξτε το εργαλείο επιλογής (M) και αλλάξτε τον τύπο λειτουργίας του σε Fixed Size (από τη σχετική επιλογή του μενού Style, που βρίσκεται στην μπάρα επιλογών ακριβώς κάτω από το βασικό μενού της εφαρμογής). Ορίστε ως Width και Height του (στα πεδία ακριβώς δίπλα από το μενού Style) την τιμή 50 px.
Βήμα 3
Δημιουργήστε ένα νέο layer (Ctrl+Shift+N). Επιλέξτε το εργαλείο “επίπεδου” γεμίσματος με χρώμα (G ή Shift+G, αν είναι επιλεγμένο το εργαλείο gradient) και “γεμίστε” την επιλεγμένη περιοχή με ένα χρώμα της επιλογής σας.
Βήμα 4
Ας προσθέσουμε ένα gradient για να εμπλουτίσουμε το πλήκτρο. Διαλέξτε το εργαλείο επιλογής (M) και επιλέξτε όλο το πλήκτρο σας πλην περιφέρειας ενός pixel. Διαλέξτε το εργαλείο gradient (Shift+G) και αλλάξτε το πίσω χρώμα σε μαύρο. Εφαρμόστε μέσα στο μικρότερο παραλληλόγραμμο το gradient.
Βήμα 5
Για τις ανάγκες αυτού του In Axion θα δημιουργήσουμε ένα πλήκτρο επικοινωνίας μέσω e-mail, προσθέτοντας απλά το χαρακτήρα “@” στο πλήκτρο – εσείς μπορείτε, για παράδειγμα, να χρησιμοποιήσετε το σηματάκι των RSS streams. Για τη δική μας λύση απλά γράψτε ένα “@” με το εργαλείο κειμένου (T) στο πλήκτρο σας. Μετά, με Ctrl+T, αλλάξτε το μέγεθός του από τα χειριστήρια που θα εμφανιστούν στο περίγραμμά του (κρατώντας το Shift πατημένο καθώς το κάνετε, “κλειδώνουν” οι αναλογίες για να μην αλλοιωθεί το γράμμα σας), ώστε να βρίσκεται “μέσα” στο πλήκτρο. Μειώστε το Opacity του layer του στο 70%.
Βήμα 6
Επιλέξτε τα layers του πλήκτρου σας από το παράθυρο των layers (όχι και το background) και πατήστε Ctrl+G για να τα ενώσετε σε μια “ομάδα” layers. Έτοιμη η πρώτη εκδοχή του πλήκτρου σας. Κάντε δεξί κλικ στο φάκελο της “ομάδας” layer και, από το μενού που εμφανίζεται, επιλέξτε Duplicate για να δημιουργήσετε μία δεύτερη εκδοχή της. Διαλέξτε το εργαλείο μετακίνησης και, με Shift πατημένο και τη δεύτερη ομάδα layer επιλεγμένη, “φέρτε” την ακριβώς δίπλα από την πρώτη. Κάντε duplicate το layer του “@” της δεύτερης ομάδας (ώστε σε αυτήν να το έχετε δύο φορές). Επεξεργαστείτε το και αλλάξτε το χρώμα του δεύτερου “@” σε μαύρο.
Βήμα 7
Πατήστε Ctrl+T για να μπείτε σε mode αλλοίωσης. Με πατημένο το Ctrl, κάντε αριστερό κλικ στο πάνω μεσαίο χειριστήριο του πλαισίου του “μαύρου @” σας και “τραβήξτε” το λίγο προς τα κάτω και δεξιά – θέλουμε να δημιουργήσουμε μια σκιά με προοπτική, που θα βρίσκεται πίσω από το “@” μας.
Βήμα 8
Με επιλεγμένο το layer του “μαύρου @”, δημιουργήστε ένα νέο layer mask (3ο εικονίδιο στο κάτω τμήμα του παραθύρου των layers). Διαλέξτε τα default χρώματα μαύρο/άσπρο (D), το εργαλείο gradient (Shift+G) και εφαρμόστε το από το ανώτερο ως το κατώτερο τμήμα του “μαύρου @” σας. Τέλος, μετακινήστε το layer του κάτω από αυτό του “λευκού @”.
Βήμα 9
Αυξήστε το Opacity του layer του “λευκού @” στο 100% (θα έχει “μείνει” στο 70%, όπου το είχαμε ορίσει πριν κλωνοποιήσουμε το πρώτο πλήκτρο). Διαλέξτε το εργαλείο μετακίνησης (V) και με τα cursor keys από το πληκτρολόγιο μετακινήστε το “δύο φορές” προς πάνω και αριστερά. Για να είναι ορατή η απόσταση στην εικόνα/η διαφορά με το πρώτο πλήκτρο στην εικόνα μας, προσθέσαμε δύο guidelines όπου φαίνεται η διαφορά στο ύψος. (Φυσικά, εσείς δεν είναι ανάγκη να κάνετε κάτι τέτοιο!)
Βήμα 10
Και φτάνουμε στο τελευταίο πλήκτρο: κλωνοποιήστε πάλι την ομάδα layers του πρώτου πλήκτρου και μετακινήστε το δίπλα στο δεύτερο – έτσι θα καλυφθεί όλη η επιφάνεια του “καμβά” σας. Κλωνοποιήστε και εδώ το “λευκό @” και αλλάξτε το χρώμα του σε μαύρο. Μετακινήστε το ένα pixel προς τα πάνω και αριστερά. Κάντε δεξί κλικ στο όνομά του, στο παράθυρο των layers, και επιλέξτε Rasterize. Μετά, κάντε Ctrl+αριστερό κλικ στο “λευκό @”, για να επιλεγεί το περίγραμμά, του και με Ctrl+X “κόψτε” το από το “μαύρο @”.
Βήμα 11
Διαλέξτε το εργαλείο Slice (Shift+C) και τραβήξτε ένα παραλληλόγραμμο που να καλύπτει μόνο την πρώτη εκδοχή του πλήκτρου σας. Μετά, επαναλάβετε για το δεύτερο και το τρίτο. Θα δείτε ότι γύρω από το καθένα θα εμφανιστεί ένα αριθμημένο περίγραμμα. (Για να είναι πιο ορατό στην εικόνα μας, μειώσαμε το Opacity των layers – εσείς δεν χρειάζεται να κάνετε κάτι τέτοιο και θα βλέπετε τα πλήκτρα σας κανονικά και όχι “αχνά” όπως στην εικόνα μας).
Βήμα 12
Έτοιμοι! Μεταβείτε στο πλαίσιο Save for Web (Ctrl+Alt+Shift+S) και θα δείτε μια προεπισκόπηση των πλήκτρων σας. Προσέξτε, τώρα, ότι εδώ το καθένα είναι επιλέξιμο και οι επιλογές του παραθύρου μπορούν να αφορούν ειδικά αυτό. Επιλέξτε με αριστερό κλικ κάθε slice και ορίστε τις τιμές αποθήκευσης όπως προτιμάτε. Τέλος, αποθηκεύστε το σε ένα φάκελο του δίσκου σας. (Αν επιλέξετε το διαδεδομένο JPEG, προσέξτε ώστε η συμπίεση -“Quality”- και στις τρεις εκδοχές του πλήκτρου να είναι αρκετά χαμηλή, ώστε να έχουν μικρό μέγεθος, χωρίς, όμως, να αλλοιώνεται πολύ η ποιότητά τους. Συνήθως τα αποτελέσματα είναι καλά σε τιμές από 70% έως 90%).
Βήμα 13
Αν επισκεφθείτε το φάκελο όπου αποθηκεύσατε το αρχείο του πλήκτρου σας, θα δείτε ότι δεν είναι ένα αλλά τρία! Η χρήση των slices “είπε” στο Photoshop ότι κάθε τμήμα της εικόνας σας -κάθε slice που ορίσατε- θα πρέπει να αποθηκευτεί ως ανεξάρτητη εικόνα. Και έτσι έγινε! Τώρα, φυσικά, για να μπορείτε να τα χρησιμοποιήσετε στο site σας, θα πρέπει να τα “ανεβάσετε” σε αυτό. Καθώς υπάρχουν πολλοί τρόποι για να γίνει αυτό (συνήθως μέσω ενός προγράμματος FTP), θα προσπεράσουμε τη διαδικασία για περισσότερες πληροφορίες θα πρέπει να απευθυνθείτε στον host των σελίδων του blog σας.
Βήμα 14
Αφού έχετε ανεβάσει τα αρχεία, έρχεται η ώρα της ενσωμάτωσής τους στο site σας. Για αυτό, αρκεί να βρείτε στο αρχείο CSS του blog/site σας την παράμετρο που καθορίζει την εμφάνιση του link σας. Δώστε τιμές Width και Height 50px και ορίστε ως background την πρώτη από τις εικόνες του πλήκτρου. Αντιγράψτε τον κανόνα CSS δύο φορές και δώστε στη μία την παράμετρο “:visited” και στην άλλη την παράμετρο “:hover”. Δώσε στην “visited” ως background τη δεύτερη εικόνα σας και στην “hover” την τρίτη. Για περισσότερες πληροφορίες ανατρέξτε στο πλαίσιο με τίτλο “Βλέπω κώδικα!”.
Διάβασε επίσης:
