Πώς να δημιουργήσετε ανατροπές στο Photoshop CS3

Πριν από το Photoshop CS3 , σχεδιαστές ιστοσελίδων που δημιουργήθηκε κουμπιά ανατροπής με τη χρήση του Photoshop και Image Ready , τα οποία είχαν προηγουμένως συσκευασμένα μαζί . Adobe διακοπεί χρήση του Image Ready , όταν αγόρασε το Dreamweaver της Macromedia , υποθέτοντας ότι οι σχεδιαστές ιστοσελίδων θα μπορούσε να χρησιμοποιήσει αυτό το εξειδικευμένο πρόγραμμα με το Photoshop για να δημιουργήσετε ανατροπές τους . Μπορείτε να δημιουργήσετε τις κουμπιά ανατροπής στο Photoshop με τον ίδιο τρόπο . Στη συνέχεια , μπορείτε να χρησιμοποιήσετε το Dreamweaver , άλλοι συντάκτες του Διαδικτύου ή ένα πρόγραμμα επεξεργασίας κειμένου για να δημιουργήσετε τον κωδικό ανατροπής . Μάθετε πώς μπορείτε να δημιουργήσετε κουμπιά ανατροπής στο Photoshop CS3 . Τα πράγματα που θα χρειαστείτε
editor Web
Η Εμφάνιση Περισσότερες οδηγίες
Η

1 Ανοίξτε ένα νέο έγγραφο που είναι το μέγεθος κατάλληλο για τα κουμπιά σας . Αυτό μπορεί να είναι το μέγεθος της ιστοσελίδας ή το μέγεθος του banner κουμπιού . Κάντε κλικ στο " Αρχείο> Νέο " και εισάγετε το μέγεθος στα αντίστοιχα πλαίσια . 2

Δημιουργήστε το πρώτο κουμπί που θα εμφανίζεται όταν δεν είναι επιλεγμένο . Επιλέξτε το σωστό εργαλείο σχήμα από το " Tools Palette " και σχεδιάστε το κουμπί . Στη συνέχεια , επιλέξτε το "Τύπος " εργαλείο και πληκτρολογήστε το κείμενο στο εσωτερικό του κουμπιού.
Εικόνων 3

Εφαρμόστε τα επιθυμητά αποτελέσματα στο κουμπί ή κείμενο . Adobe έχει προσφέρει διάφορους τρόπους για να μπορείτε να εφαρμόσετε εφέ . Για να εφαρμόσετε το δικό σας προσαρμοσμένο εφέ , επιλέξτε το στρώμα από το " Layer" παλέτα . Στη συνέχεια , επιλέξτε το επιθυμητό αποτέλεσμα από το "FX " drop- down box που βρίσκεται στο κάτω μέρος του " Layer" palette.Photoshop CS3 παρέχει προκαθορισμένα στυλ web έχουν σχεδιαστεί ειδικά για τα κουμπιά web . Αν το " στυλ " παλέτα δεν είναι ορατή , επιλέξτε " των Windows > Στυλ . " Από το " στυλ " drop-down μενού , επιλέξτε " Στυλ Web . " Βεβαιωθείτε ότι είναι επιλεγμένο το στρώμα κουμπί και να επιλέξετε την επιθυμητή στρώμα από το " στυλ " παλέτα .
Η 4

Δημιουργήστε τα υπόλοιπα κουμπιά . Κρατήστε πατημένο το πλήκτρο " Έλεγχος " για να επιλέξετε το κείμενο και το κουμπί . Κάντε δεξί κλικ μέσα στο " Layer" παλέτα και επιλέξτε " Διπλασιασμός επιπέδου ". Μετακινήστε τα αντιγραμμένα στρώματα στη θέση του στο επόμενο κουμπί . Αλλάξτε το κείμενο στο όνομα του νέου κουμπιού . Επαναλάβετε αυτό το βήμα για να δημιουργήσετε όλα τα κουμπιά .
5

φέτα τα κουμπιά . Επιλέξτε το " Φέτα " εργαλείο και να σχεδιάσετε ένα πλαίσιο γύρω από κάθε κουμπί . Κάντε διπλό κλικ σε κάθε κουμπί για να προσθέσετε επιλογές φέτα . Βεβαιωθείτε ότι το " Image " είναι επιλεγμένο στο "Slice Type" drop-down box . Πληκτρολογήστε ένα όνομα που περιγράφει το κουμπί απενεργοποιείται , όπως " [ πλήκτρο ] _off . " Εισάγετε οποιαδήποτε πληροφορία σχετικά με το δικτυακό τόπο στα υπόλοιπα πλαίσια .
Η 6

Επιλέξτε " Αρχείο> Αποθήκευση για web ... " Πατήστε το κουμπί "Αποθήκευση" . Στο "Αποθήκευση Optimized As" παράθυρο διαλόγου , επιλέξτε τη θέση για τις εικόνες σας . Δημιουργήστε ένα νέο φάκελο που ονομάζεται "Off". Αν έχετε εισάγει πληροφορίες για την ιστοσελίδα , να αλλάξετε το " Format " στο " HTML και εικόνες . " Κάντε κλικ στο " OK".
Η 7

Επιλέξτε " των Windows > Layer Comp . " Δημιουργήστε ένα νέο δείγμα στρώμα επιλέγοντας το κουμπί "Δημιουργία νέου Layer Comp " . Ονομάστε κάτι που περιγράφει το τρέχον σύνολο των κουμπιών , όπως "Off".
8

Επεξεργαστείτε τα κουμπιά για να εφαρμόζουν την κρατική ανατροπής . Εφαρμόστε το στυλ , τα χρώματα ή τα αποτελέσματα με τις τρέχουσες κουμπιά . Δημιουργήστε ένα άλλο δείγμα στρώμα και ονομάστε το "On". Επαναλάβετε το βήμα 7 για να σώσει τα κουμπιά σε ένα νέο φάκελο που ονομάζεται "On". Ανοίξτε το φάκελο που περιέχει αυτά τα κουμπιά και να μετονομάσετε τους να αντικατοπτρίζουν την κατάσταση «on» .
Η 9

Δημιουργήστε το κωδικό ανατροπής σε ένα πρόγραμμα επεξεργασίας ιστοσελίδων . Χρησιμοποιήστε το Dreamweaver , ένα άλλο πρόγραμμα επεξεργασίας ιστοσελίδων ή ένα πρόγραμμα επεξεργασίας κειμένου για να δημιουργήσετε τον κωδικό ανατροπής . Εδώ είναι ο κώδικας JavaScript για το κουμπί στο σπίτι σε αυτό το σεμινάριο :
Η
εικόνων