Σχεδιασμός γυαλιστερού Button Web 2.0 στο Photoshop

Κοιτάζοντας να σχεδιάσετε κάποιο γυαλιστερό κουμπί Web 2.0? Εδώ είναι ένα απλό φροντιστήριο του Photoshop που σας δίνει βήμα προς βήμα πώς να πάρετε ένα ωραίο κόκκινο γυαλιστερό κουμπί.

Βήμα 1 - Δημιουργία βάσης

Ενεργοποιήστε έναν νέο καμβά και προσαρμόστε τις παρακάτω ρυθμίσεις (σημειώνονται με κίτρινο χρώμα) σύμφωνα με την παρακάτω εικόνα. Τα υπόλοιπα θα πρέπει να είναι προεπιλεγμένα. Ίσως θελήσετε να κάνετε διπλό έλεγχο και με τις προεπιλογές.

Δημιουργήστε μια νέα κλήση στρώματος 'Button'

Στο στοιχείο 'Κουμπί', επιλέξτε το εργαλείο Στρογγυλεμένο ορθογώνιο

Δώστε του μια ακτίνα 7px

Σχεδιάστε ένα ορθογώνιο παρόμοιο με την παρακάτω εικόνα.

Βήμα 2 - Κόκκινο κουμπί

Κάντε δεξί κλικ στην επιλογή Blending Options for 'Button' layer

Ρυθμίστε τις ακόλουθες ρυθμίσεις για

Σκίαση

Εσωτερική σκιά

Bevel και ανάγλυφο

Επικάλυψη διαβαθμίσεων

Το κουμπί σας θα πρέπει να φαίνεται κάτι τέτοιο

Βήμα 3 - Δημιουργήστε γυαλιστερό αποτέλεσμα

Δημιουργήστε μια νέα κλήση στρώματος 'Glass'

Επιλέξτε το εργαλείο Retangular marquee, βεβαιωθείτε ότι επιλέγετε το στρώμα 'Button'. ΚΡΑΤΗΣΤΕ το πλήκτρο ctrl και κάντε κλικ στο κουμπί 'Κουμπιά'”s μικρογραφία στρώματος. Το κουμπί θα πρέπει τώρα να επισημανθεί.

Επιλέξτε τώρα το κουμπί 'Γυαλί', κρατήστε πατημένο το πλήκτρο Alt με το επιλεγμένο εργαλείο Retangular marquee. Σχεδιάστε (κόψτε) στο κάτω μισό του κουμπιού όπως στην παρακάτω εικόνα.

Συμπληρώστε την επιλεγμένη περιοχή με άσπρο χρώμα #ffffff χρησιμοποιώντας το εργαλείο Paint Bucket Tool

Ρυθμίστε την αδιαφάνεια έως 18%

Θα πρέπει να έχετε γυαλιστερό κουμπί που μοιάζει με αυτό.

Βήμα 4 - Επικάλυψη μοτίβου

Ας δώσουμε στο κουμπί λίγο ελαφρά επικάλυψη. Θα χρησιμοποιήσω το custom stripe5px που δημιουργήθηκε νωρίτερα. Δημιουργήστε μια νέα κλήση layer 'Pattern' μεταξύ 'Button' και 'Glass' και προχωρήστε με τις επιλογές Blending.

Επιλέξτε Pattern Overlay, επιλέξτε Stripe5px (ή οποιοδήποτε μοτίβο που έχετε δημιουργήσει) και κάντε κλικ στο OK και κλείστε το διάλογο.

Βεβαιωθείτε ότι είστε ακόμα στο εργαλείο ορθογώνιας γραμμής, κρατήστε πατημένο και κάντε κλικ στη μικρογραφία στρώματος του κουμπιού για να διαμορφώσετε τα κουμπιά. Συμπληρώστε την επιλεγμένη περιοχή στο στρώμα 'Pattern' με το εργαλείο Paint Bucket και ρυθμίστε την αδιαφάνεια του στρώματος στο 5%

Βήμα 5 - Εισαγωγή κειμένου

Ρίξτε ένα τυχαίο κείμενο σε λευκό #ffffff χρώμα με τις ακόλουθες ρυθμίσεις

Χρησιμοποιήστε τα ακόλουθα αποτελέσματα ανάμειξης στο στρώμα του κειμένου μου.

Σκίαση

Βήμα 6 - Τελική έξοδος

Θα πρέπει να πάρετε μια εικόνα όπως αυτή.