Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

Inset

Recommended Posts

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


Inset

Βήμα 1

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

image01.gif


Βήμα 2

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

image02.gif


Βήμα 3

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

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

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


image03.gif


Βήμα 4

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

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

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

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

Και τέλος Stroke
style4.gif

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

image04.gif


Βήμα 5

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

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

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

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

image05.gif


Βήμα 6

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

image06.gif

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×