Photoshop Δημιουργία κουμπιού Web 2.0
Κουμπιά Τα tutorials του Photoshop είναι μάλλον μια από τις πιο καυτές κατηγορίες σε οποιαδήποτε τοποθεσία του Photoshop tutorials και δεδομένου ότι το Web 2.0 είναι τόσο καυτά θέματα τώρα, αφήστε να κάνετε ένα απλό κουμπί κατάλληλο για οποιαδήποτε εφαρμογή Web 2.0 των ιστοτόπων. Εκμάθηση μετά από άλμα.
Δημιουργήστε έναν κενό καμβά σε περίπου 500px (πλάτος) x 400px (ύψος) για να ξεκινήσετε το σχεδιασμό των κουμπιών. Δημιουργήστε μια νέα κλήση στρώματος 'bg01'. Επίλεξε το Στρογγυλεμένο ορθογώνιο εργαλείο, κρατήστε το SHIFT και σχεδιάστε μια κεντρική πλατεία στο κέντρο. Οποιοδήποτε χρώμα είναι καλό στο τρέχον στάδιο.
Καλέστε το Blending Επιλογές του 'bg01'και προσαρμόστε τα παρακάτω στυλ:
Σκίαση
- Αδιαφάνεια: 40%
- Απόσταση: 0px
- Διάδοση: 0%
- Μέγεθος: 6px
Επικάλυψη διαβαθμίσεων
- Διακοπή χρώματος: 0%, # d00031
- Διακοπή χρώματος: 100%, # ff2b5d
Κρατήστε CTRL, κάντε αριστερό κλικ στο 'bg01'Thumbnail Layer για να επιλέξετε το σχήμα της. Πηγαίνω Επιλέγω -> Τροποποιώ -> Σύμβαση και εισάγετε την τιμή '2px'. Αυτό θα συρρικνώσει την επιλεγμένη περιοχή κατά 2 pixel.
Δημιουργήστε μια νέα κλήση στρώματος 'bg02'και συμπληρώσατε την επισημασμένη (μετά συρρίκνωση) περιοχή με οποιοδήποτε χρώμα. Χρησιμοποιώ εδώ # 000000 μαύρο. Κάντε διπλό κλικ στο 'bg02' για να ξεκινήσετε το Blending Option και τροποποιήστε το παρακάτω στυλ.
Επικάλυψη διαβαθμίσεων
- Διακοπή χρώματος: 0%, # c6002f
- Διακοπή χρώματος: 100%, # c6002f
Δημιουργήστε ένα νέο στρώμα για κείμενο,κείμενο'. Εισαγάγετε το κείμενο του κουμπιού σας. Θα χρησιμοποιήσω ένα αλφάβητο για να το εκπροσωπώ. Τα στυλ γραμματοσειράς που χρησιμοποιώ εδώ είναι τα εξής:
- Στρογγυλεμένο Arial Bold
- 150pt
Ίδιος, αφού αποφασίσετε το κείμενό σας, κάντε διπλό κλικ στο 'txt' για να ξεκινήσετε το Blending Επιλογές και τσίμπημα τα ακόλουθα στυλ.
Σκίαση
- Αδιαφάνεια: 25%
- Απόσταση: 0px
- Διαδώστε: 0px
- Μέγεθος: 5px
Εσωτερική σκιά
- Αδιαφάνεια: 10%
- Απόσταση: 0px
- Τσοκ: 0
- Μέγεθος: 10px
Bevel Emboss
- Βάθος: 1px
- Σκηνοθεσία: Κάτω
- Μέγεθος: 0px
- Softten: 0px
- Επιδείνωση αδιαφάνειας λειτουργίας: 32%
- Λειτουργία σκίασης Αδιαφάνεια: 32%
Επικάλυψη διαβαθμίσεων
- Διακοπή χρώματος: 0% # d2d2d2
- Διακοπή χρώματος: 100% # f0efef
Το κουμπί είναι σχεδόν τελειωμένο. Ας δώσουμε λίγο λάμψη στο πάνω μέρος. Κρατήστε CTRL, αριστερό κλικ 'bg02'Thumbnail Layer για να επισημάνετε το εξωτερικό σχήμα. επιλέγω Εργαλείο Eclipse Marquee. Τώρα κρατήστε πατημένο ALT, με το εργαλείο Eclipse Marquee Tool επιλεγμένο, το drag είναι απέναντι από το κάτω μισό της επισημασμένης περιοχής. Ανατρέξτε στην παραπάνω εικόνα.
Με το επιλεγμένο τμήμα κορυφής και το εργαλείο Eclipse Marquee ακόμα επιλεγμένο, κάντε δεξί κλικ και επιλέξτε Φτερό. εισαγω 15px για την ακτίνα.
Δημιουργήστε ένα νέο στρώμα,λάμψη'και συμπληρώστε το επισημασμένο τμήμα με λευκό [#ffffff]. Αυτό θα πρέπει να προσθέσει λάμψη στο επάνω μέρος του κουμπιού σας. Το τελικό προϊόν πρέπει να μοιάζει με την εικόνα που ακολουθεί.
Κάτι επιπλέον ...
Βελτιώστε τις επιλογές συγχώνευσης του 'bg01' και 'bg02'θα σας δώσει πιο ενδιαφέροντα κουμπιά. Εδώ είναι ένα άλλο εγχειρίδιο του Photoshop στο κουμπί που έχω κάνει προηγουμένως - Δημιουργία γυαλιστερού κουμπιού για το Web 2.0
Λήψη δείγματος
