Πώς να δημιουργήσετε τρισδιάστατα κουμπιά χρησιμοποιώντας το Adobe Photoshop

Υπάρχουν πολλά εκπληκτικά πράγματα που μπορείτε να δημιουργήσετε Adobe Photoshop που είναι χρήσιμα στο διαδίκτυο, που κυμαίνονται από απλά πλαίσια εικόνων έως πολύπλοκα UI. Ένα από τα πιο χρήσιμα πράγματα που μπορείτε να δημιουργήσετε στο Photoshop είναι τα κουμπιά 3D, τα οποία θα σας φανούν χρήσιμα εάν εκτελείτε ένα ιστολόγιο ή έναν ιστότοπο με προσαρμοσμένη διεπαφή.

Σε αυτό το άρθρο θα σας δείξουμε πώς να δημιουργείτε κουμπιά 3D χρησιμοποιώντας το Photoshop, μαζί με οπτικές καταστάσεις «πάνω» και «κάτω», ώστε να μπορείτε να τα ζωντανεύετε. (Δεν θα καλύψουμε το ίδιο το animation σε αυτό το άρθρο.)

Βήμα 1: Προετοιμάστε το έγγραφό σας

Ενώ τα κουμπιά 3D εμφανίζονται συχνότερα σε ιστότοπους, είναι σημαντικό να σημειωθεί ότι υπάρχουν άλλες εφαρμογές για αυτά, όπως κινούμενα GIF, οθόνες προϊόντων μακέτας και παιχνίδια για κινητά. Ανάλογα με το για ποιο λόγο δημιουργείτε αυτό το κουμπί, η τελική μορφή αρχείου και οι διαστάσεις του ενδέχεται να διαφέρουν.

Για να δημιουργήσετε ένα κουμπί 3D στο Photoshop, θα πρέπει να δημιουργήσετε ένα προσαρμοσμένο έγγραφο για αυτό. Για να το κάνετε αυτό, ανοίξτε το Photoshop και κάντε κλικ στο Δημιουργία νέου> Προσαρμοσμένο Το Ξεκινήστε να πληκτρολογείτε τις τιμές σας.

Για να δημιουργήσετε ένα κουμπί 3D, θα θέλετε ένα οριζόντιο έγγραφο. Για το δικό μας, χρησιμοποιήσαμε:

Xψος 900 x 300 pixel
300 εικονοστοιχεία/ίντσα
Λειτουργία χρώματος RGB

Παρόλο που αυτές οι προδιαγραφές σίγουρα δεν είναι ένας σκληρός και γρήγορος κανόνας, αυτό θα διασφαλίσει ότι έχετε περισσότερο από αρκετό χώρο για να εργαστείτε και τη δυνατότητα να κλιμακώσετε το μέγεθος του κουμπιού σας πάνω και κάτω όπως απαιτείται.

Βήμα 2: Ρυθμίστε το ορθογώνιο για το τρισδιάστατο κουμπί σας

Αφού ρυθμίσετε τις προδιαγραφές για το αρχείο σας, θα μεταφερθείτε στον χώρο εργασίας σας. Θα έχετε έναν οριζόντιο λευκό καμβά σε ένα στρώμα και εδώ θα ξεκινήσετε να δημιουργείτε το κουμπί σας.

Για να δημιουργήσετε το κουμπί 3D, κάντε κλικ στο Εργαλείο στρογγυλεμένου ορθογωνίου στην αριστερή πλευρά της οθόνης σας, εμφανίζεται εδώ με κόκκινο χρώμα. Μπορείτε επίσης να χρησιμοποιήσετε τη συντόμευση U για πρόσβαση σε αυτό.

Κάντε κλικ μία φορά στο λευκό σας στρώμα: αυτό θα εμφανίσει αυτόματα το δικό σας Δημιουργήστε στρογγυλεμένο ορθογώνιο κουτί. Θα χρησιμοποιήσετε αυτό το πλαίσιο για να καθορίσετε τις διαστάσεις του ορθογωνίου σας.

Για το κουμπί μας, πήγαμε με:

300 εικονοστοιχεία πλάτος
75ψος 75 pixel

Βεβαιωθήκαμε επίσης ότι οι γωνίες ήταν στρογγυλεμένες κατά 10 εικονοστοιχεία. Ούτε πολύ ψηλά, ούτε πολύ χαμηλά. Στη συνέχεια πιέσαμε Εντάξει Το

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

Όταν πατάτε Εντάξει , Το Photoshop θα δημιουργήσει ένα στρογγυλεμένο ορθογώνιο με αυτές τις διαστάσεις μέσα στο στρώμα σας. Μπορείτε να το αλλάξετε Γέμισμα και Εγκεφαλικό χρώματα χρησιμοποιώντας τα αναπτυσσόμενα μενού στην επάνω αριστερή γωνία της οθόνης σας.

Για τους σκοπούς αυτού του σεμιναρίου --- και για να δείξουμε πώς μπορεί να μοιάζει ένα κουμπί 'πάνω' και 'κάτω'-θα κάνουμε το κουμπί 'κάτω' μας κόκκινο.

Βήμα 3: Κάντε το κουμπί σας τρισδιάστατο

Αφού δημιουργήσετε το βασικό κουμπί σας και επιλέξετε το χρώμα του, θα θέλετε να το προσαρμόσετε στο Στυλ στρώματος κουτί διαλόγου. Αυτό γίνεται για να φαίνεται πιο τρισδιάστατο.

Για πρόσβαση στο δικό σας Στυλ στρώματος παράθυρο διαλόγου, μπορείτε να πάτε Layer> Layer Style από το επάνω μενού. Μπορείτε επίσης να κάνετε διπλό κλικ στο επίπεδο που περιέχει το κουμπί σας, για να εμφανιστεί αυτόματα. Αυτός ο τρόπος είναι πολύ πιο γρήγορος και προσωπικά τον προτιμούμε.

Μόλις ανοίξει το πλαίσιο στυλ επιπέδου, μεταβείτε στην επιλογή Bevel & Emboss Το Ενεργοποιήστε την.

Αυτός είναι ένας γρήγορος και εύκολος τρόπος για να δώσετε στα άκρα του κουμπιού σας μια πιο ανασηκωμένη, «τρισδιάστατη» εμφάνιση. Για αυτό το σεμινάριο, αυτές είναι οι ρυθμίσεις που χρησιμοποιήσαμε:

Δομή

Στυλ: Inner Bevel
Τεχνική: Σμίλη μαλακή
Βάθος: 605
Κατεύθυνση: Πάνω
Μέγεθος: 5
Μαλακώνω: 1

Σκίαση

Γωνία: 90
Υψόμετρο: 37
Λειτουργία επισήμανσης: Color Dodge, 55% Αδιαφάνεια
Λειτουργία σκιάς: Πολλαπλή, αδιαφάνεια 25%

Το κόλπο είναι να κάνετε τις ρυθμίσεις αρκετά υψηλές ώστε να μπορείτε να δείτε κάποια διαφορά, αλλά όχι τόσο ισχυρές ώστε να είναι συντριπτικές.

Αφού τελειώσαμε με το Bevel & Emboss, πήγαμε στο Περίγραμμα και το ενεργοποίησε κι αυτό. Το Contour κάνει τον ορισμό του Bevel & Emboss λίγο πιο δυνατό και για αυτό το σεμινάριο επιλέξαμε τη ρύθμιση Κώνος - Αντιστροφή Το

Στη συνέχεια, ενεργοποιήστε Επικάλυψη κλίσης Το Αυτό είναι που δίνει ένα κουμπί με στρογγυλεμένη, ελαφρώς «γυαλιστερή» εμφάνιση. Οι ρυθμίσεις έχουν ως εξής:

Λειτουργία ανάμειξης: Επικάλυμμα
Αδιαφάνεια: 90
Στυλ: Γραμμικός
Γωνία: 90
Κλίμακα: 100

Τελικά, ενεργοποιήσαμε Σκίαση , για να φαίνεται το κουμπί λίγο «ανεβασμένο» από το λευκό φόντο ενός ιστότοπου ή ιστολογίου. Και πάλι, εδώ είναι οι ρυθμίσεις:

πώς να αδειάσετε τον κάδο απορριμμάτων σε mac που δεν θα διαγραφεί

Δομή

Λειτουργία ανάμειξης: Πολλαπλούς
Αδιαφάνεια: 35
Γωνία: 90
Απόσταση: 2
Εξάπλωση: 6
Μέγεθος: 8

Ποιότητα

Περίγραμμα: Γραμμικός
Θόρυβος: 0
Layer Knocks Out Drop Shadow: Επί

Τώρα ήρθε η ώρα να αποθηκεύσετε αυτές τις προδιαγραφές ως στυλ επιπέδου.

Βήμα 4: Αποθήκευση ως στυλ επιπέδου

Μόλις τελειώσετε με τις ρυθμίσεις του κουμπιού σας, θα αρχίσει να φαίνεται 3D. Επειδή είναι μεγάλες οι πιθανότητες να δημιουργήσετε περισσότερα από ένα κουμπιά 3D, πρέπει να βρούμε έναν γρήγορο και εύκολο τρόπο για να το κάνουμε αυτό.

Ιδού πώς.

Πριν κάνετε κλικ Εντάξει στο Στυλ στρώματος παράθυρο διαλόγου, κάντε κλικ στο Νέο στυλ Το Όταν το κάνετε, το Photoshop θα αποθηκεύσει αυτό το στυλ επιπέδου που έχετε δημιουργήσει για το κουμπί σας.

Εάν χρησιμοποιείτε Photoshop CC, αυτό το νέο στυλ θα αποθηκευτεί στο δικό σας Βιβλιοθήκες ενότητα, όπως μπορείτε να δείτε παραπάνω. Είναι πολύ γρήγορη και εύκολη η πρόσβαση.

Βήμα 5: Πώς να χρησιμοποιήσετε ένα στυλ αποθηκευμένου επιπέδου

Τώρα που σχεδιάσατε το κουμπί σας και το αποθηκεύσατε ως στυλ επιπέδου, ας το δούμε εν ενεργεία για την 'επάνω' κατάσταση. Καμία λέξη ψέματος, αυτό θα μειώσει το χρόνο εργασίας σας στο μισό.

Αρχικά, ας δημιουργήσουμε ένα άλλο κουμπί ακριβώς πάνω από το στρώμα κόκκινου κουμπιού, όπως συμβαίνει. Ας το κάνουμε πράσινο, για έμφαση.

Επόμενο --- αντί να κάνετε διπλό κλικ στο ίδιο το επίπεδο για να εμφανιστεί το Στυλ στρώματος παράθυρο διαλόγου --- κάντε διπλό κλικ στο στυλ επιπέδου στο δικό σας Βιβλιοθήκες πίνακας.

Όταν το κάνετε, το Photoshop θα εφαρμόσει αυτόματα το αποθηκευμένο στυλ σας στο νέο στρώμα κουμπιών σας, διατηρώντας παράλληλα το νέο χρώμα και σχήμα του. Έχετε τώρα δύο κουμπιά --- ένα σε επάνω κατάσταση και ένα κάτω --- και είναι τόσο απλό να το κάνετε. Λατρεύω αυτήν τη συντόμευση.

Βήμα 6: Προσθέστε κείμενο στο κουμπί σας

Στη συνέχεια, θα προσθέσουμε κείμενο στο κουμπί.

Για να προσθέσετε κείμενο, δημιουργήστε ένα νέο επίπεδο πάνω από τα δύο επίπεδα κουμπιών. Κάντε κλικ στο Εργαλείο πληκτρολόγησης να αρχίσει να πληκτρολογεί.

Για αυτό το σεμινάριο, θα γράψουμε τη λέξη 'εγγραφή' επειδή είναι κάτι που βλέπετε αρκετά συχνά σε ιστότοπους και πλατφόρμες κοινωνικών μέσων.

Θα χρησιμοποιήσουμε επίσης μια γραμματοσειρά san serif που είναι ασφαλής στον ιστό. Η τελική επιλογή ποια θα χρησιμοποιήσετε για το δικό σας κουμπί εξαρτάται από εσάς. Τα Montserrat, Proxima Nova, Arial και Verdana είναι όλες ευρέως χρησιμοποιούμενες εναλλακτικές λύσεις και ασφαλείς για τον ιστό.

Αφού γίνει αυτό, ωστόσο, υπάρχουν ακόμα μερικές πιο λεπτές αλλαγές που πρέπει να κάνετε για να 'σκάσει' αυτό το κείμενο.

Αρχικά, κάντε διπλό κλικ στο επίπεδο που περιέχει το κείμενό σας, ώστε να μπορείτε να το εμφανίσετε στο δικό σας Στυλ στρώματος κουτί διαλόγου.

Στη συνέχεια, κάντε κλικ στο Εσωτερική σκιά , για να προσθέσετε λίγη κατάθλιψη (ή βυθισμένη περιοχή) στο κείμενό σας. Αυτό δείχνει ότι τα γράμματα είναι χαραγμένα στο κουμπί. Οι ακριβείς ρυθμίσεις που χρησιμοποιήσαμε για αυτό το σεμινάριο είναι παρακάτω.

Δομή

Λειτουργία ανάμειξης: Πολλαπλασιάζω
Αδιαφάνεια: 35
Γωνία: 90
Απόσταση: 2
Πνιγομαι: 4
Μέγεθος: 1

Ποιότητα

Περίγραμμα: Γραμμικός
Θόρυβος: 0

Στη συνέχεια, εφαρμόστε ένα Επικάλυψη κλίσης με αυτά τα γράμματα, για να αναμειχθούν πιο εύκολα στο κουμπί χωρίς να φαίνονται επίπεδα. Και πάλι, οι ρυθμίσεις για τη δική μας είναι:

Λειτουργία ανάμειξης: Color Burn
Αδιαφάνεια: 90
Στυλ: Γραμμικός
Γωνία: 90
Κλίμακα: 100

Βήμα 7: Ολοκλήρωση

Αφού δημιουργήσετε αυτό το στυλ κειμένου --- ειδικά αν θέλετε να το χρησιμοποιήσετε ξανά --- μεταβείτε στο Νέο στυλ και αποθηκεύστε το πριν κάνετε κλικ Εντάξει Το

Με αυτό το τέλος, μπορείτε να μεταβείτε γρήγορα εμπρός και πίσω στην ορατότητα μεταξύ των δύο επιπέδων κουμπιών σας, για να δείτε πώς μοιάζουν οι καταστάσεις 'πάνω' και 'κάτω'.

Αρκετά δροσερό, ε; Για να αποθηκεύσετε το αρχείο σας, μεταβείτε Αρχείο> Αποθήκευση ως , και αποθηκεύστε το ως τη σωστή μορφή αρχείου για οποιοδήποτε έργο μπορεί να εργάζεστε.

Προσαρμόστε το ιστολόγιό σας με τρισδιάστατα κουμπιά και γραφικά στοιχεία

Τώρα που ξέρετε πώς να δημιουργείτε κουμπιά 3D στο Photoshop, μπορείτε να γίνετε δημιουργικοί με αυτό, σχεδιάζοντας τα δικά σας κουμπιά 3D που ταιριάζουν στις ανάγκες σας. Και με αυτές τις δεξιότητες στο οπλοστάσιό σας μπορείτε να φτιάξετε ένα προϊόν που δεν είναι μόνο επαγγελματικό, αλλά και προσωπικό.

Θέλετε να μάθετε για άλλα πράγματα που μπορείτε να κάνετε με αυτό το πρόγραμμα; Εδώ είναι πώς να αφαιρέσετε ένα φόντο στο Photoshop Το

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να αποκτήσετε πρόσβαση στο ενσωματωμένο επίπεδο φυσαλίδων της Google στο Android

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

Διαβάστε Επόμενο Σχετικά θέματα

Δημιουργικός
Adobe Photoshop
Συμβουλές επεξεργασίας εικόνας
Εκπαιδευτικό πρόγραμμα Photoshop

Σχετικά με τον Συγγραφέα Shianne Edelmayer(Δημοσιεύθηκαν 136 άρθρα)

Η Shianne έχει πτυχίο στη σχεδίαση και υπόβαθρο στο podcasting. Τώρα, εργάζεται ως Senior Writer και 2D Illustrator. Καλύπτει δημιουργική τεχνολογία, ψυχαγωγία και παραγωγικότητα για το MakeUseOf.

Περισσότερα από τη Shianne Edelmayer

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή