Inset

[Anastasis 48]

Σ' αυτό το βοήθημα εξοικειωνόμαστε με την
λειτουργία του Inset. Η χρησιμότητα του inset
είναι πολύ μεγάλη για τους gui designers γι' αυ-
τον τον λόγο, φρόντισα αυτό το βοήθημα να
είναι αρκετά πλήρες.
To εφέ του inset είναι ένα πάρα πολύ χρήσιμο
γι' αυτούς που σχεδιάζουν κουμπιά ή οθόνες
πάνω σε μία επιφάνεια γιατί δίνει την αίσθηση
του βάθους και του οτι το κουμπί υπάρχει.
Δείτε το εξής παράδειγμα:



Inset

Βήμα 1

Δεδομένου του ότι έχετε κάνει ενα panel για το interface σας ήδη, κάντε ένα νέο layer .
(για το panel δείτε το βοήθημα Μεταλλική επιφάνεια)
Το επόμενο βήμα είναι η δημιουργία ενός μικρού μεταλλικού κουμπιού.




Βήμα 2

Πατήστε Ctrl+R ή View -> Rulers ούτως ώστε να εμφανιστούν οι χάρακες.
Τώρα με την βοήθεια των χαράκων θα ορίσουμε δύο ευθείες οι οποιες θα τέμνονται εκεί που θέλουμε να βρίσκεται το κουμπί. Έτσι κάνοντας click πάνω σε έναν από τους χάρακες και κρατώντας το κουμπί πατημένο μπορείτε να ορίσετε μία από τις δύο γραμμές. Ομοιοτρόπως, θα κάνετε και τη δεύτερη.
Εάν γίνει κάποιο λάθος και θέλετε να τις μετακινήσετε, θα χρειαστεί πρώτα να επιλέξετε το Move Tool .
Εάν πάλι κάνετε περισσότερες γραμμές-οδηγούς απ' όσες χρειάζεστε πάλι με το Move Tool σύρτε τες πάνω στου χάρακες.




Βήμα 3

Πληκτρολογήστε D και Χ για να έχετε και ορίστε foreground χρώμα το #C1C2C4.
Αφού βρείτε το σημείο σας και το ορίσετε με την βοήθεια των ευθειών επιλέξτε το Ellipse tool και εισάγετε αυτές τις ρυθμίσεις:


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

Ίσως πολλοί να μου εκφράσετε την εξής απορία τώρα:
- Ρε 'συ φίλε τι γίνεται αν εγώ δεν θέλω στρογγυλό κουμπί; Είναι υποχρεωτικό να κάνω το κουμπί σου;
- Όχι, βέβαια... Κατ' αρχάς, η ιδέα του κουμπιού είναι πρόσθετη σ' αυτό το tutorial. Κανονικά το tutorial είναι μόνο για το εφέ του inset αλλά είπα να προσθέσω και αυτό το εύκολο κουμπάκι για πειραματισμό. Εάν τώρα εσείς θέλετε ελλειπτικό κουμπί αντί για Circle επιλέγετε Proportional και εισάγετε μία αναλογία ύψους και πλάτους που σας βολεύει. Εάν τώρα θέλετε τετράγωνο ή κάποιο άλλο σχήμα τώρα επιλέξτε ανάλογα αλλα φροντίστε προτίστως να έχετε επιλέξει το From Center.




Βήμα 4

Πατήστε Ctrl+H ή View -> Extras ούτως ώστε να εξαφανιστούν προσωρινά οι γραμμές.
Για ακόμα μια φορά θα χρησιμοποιήσουμε layer styles.
Κάνουμε διπλό click στο layer με το κουμπί και ανοίγει το παράθυρο Layer Styles.

Αρχίζουμε με Inner Shadow.


Συνεχίζουμε με Inner Glow:


Ενεργοποιούμε και το Gradient Overlay με τις ρυθμίσεις:


Και τέλος Stroke


Kαι τώρα στο κυρίως πιάτο!




Βήμα 5

Επανεμφανίστε τις γραμμές πατώντας Ctrl+H ή View -> Extras.
(Εάν η επιφάνεια στην οποία εφαρμόζετε το inset δεν είναι μεταλλική τώρα είναι η κατάλληλη στιγμή για να αλλάξετε foreground χρώμα επιλέγοντας ένα χρώμα ελαφρώς πιο σκούρο από αυτό της επιφάνειας.)

Δημιουργήστε ένα ακόμη layer και μεταφέρετέ το κάτω από το layer του κουμπιού, σέρνωντάς το.

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

Πατήστε για τελευταία φορά Ctrl+H ή View -> Extras ώστε να εξαφανιστούν οι γραμμές και κάντε διπλό click στο layer του μεγαλύτερου κύκλου.




Βήμα 6

Πατήστε για τελευταία φορά Ctrl+H ή View -> Extras ώστε να εξαφανιστούν οι γραμμές και κάντε διπλό click στο layer του μεγαλύτερου κύκλου.
Ενεργοποιήστε το Gradient Overlay και αφού εισάγετε αυτές τις ρυθμίσεις

πατήστε ΟΚ.



Αυτό ήταν! Δεν ήταν και τόσο δύσκολο... έτσι;