Posts Tagged ‘interface

18
Μάι.
08

Απλή διεπαφή με όψη μετάλλου

metal interface

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

ΒΗΜΑ ΠΡΩΤΟ
Δημιουργήστε ένα background δικής σας επιλογής η χρησιμοποιήστε το δικό μου

Ανοίξτε ένα νέο κενό Layer επιλέξτε το Rectangular Marquee Tool και δημιουργήστε ένα περίγραμμα όπως στην παρακάτω εικόνα

δεξί κλικ μέσα στην επιλογή σας επιλέξτε Stroke και ρυθμίστε

με το Dodge Tool και διάμετρο 45-50px φωτίζουμε/βάφουμε όπως παρακάτω

ΒΗΜΑ ΔΕΥΤΕΡΟ
Δημιουργήστε ένα νέο κενό Layer με όνομα frame
Με το Rectangular Marquee Tool δημιουργήστε ένα περίγραμμα/πλαίσιο κατά 2-3 px μικρότερο μέσα στο πλαίσιο που δημιουργήσατε παραπάνω και γεμίστε το με 494949 χρώμα

Δεν αποεπιλέγετε και Filter > Noise > Add Noise ρυθμίστε

Layer – Layer Style ρυθμίστε

και ολίγον από το παρακάτω

Αποεπιλέξτε
Δημιουργήστε ένα αντίγραφο του Layer frame
δεξί κλικ στο αντίγραφο Layer frame και Clear Layer Styles
με το Dodge Tool και διάμετρο 125-130px φωτίζουμε/βάφουμε όπως παρακάτω

αλλάξτε το Blending Options σε Overlay και μειώστε το Opacity σε 25%
θα έχετε περίπου αυτό το αποτέλεσμα

Τώρα μπορείτε να προσθέσετε κείμενο η όποιο σχήμα θέλετε ώστε να έχετε κάτι σχετικό με το παρακάτω αποτέλεσμα
Για την μεταλλική όψη του κειμένου εφάρμοσα τις παρακάτω ρυθμίσεις στο Bevel and Emboss

19
Ιαν.
07

Σχεδιασμός σκελετού διεπαφής


Design skeleton interface

ΒΗΜΑ ΠΡΩΤΟ:
Ανοίξτε ένα νέο έγγραφο σε κατάσταση RGB. Πατήστε Ρ για να επιλέξετε το εργαλείο Pen. Δημιουργήστε το εξωτερικό περίγραμμα της διεπαφής σας χρησιμοποιώντας ευθείες γραμμές υπό διάφορες γωνίες (χωρίς καμπύλες). Όταν επιστρέψετε στο αρχικό σημείο, κάντε κλικ επάνω του για να ολοκληρώσετε το μονοπάτι σας. Στο παράδειγμα μας, μετά τη δημιουργία του πρώτου μονοπατιού (στο επάνω μέρος), δημιούργησα κι ένα δεύτερο από κάτω του, αλλά κάτι τέτοιο δεν είναι αναγκαίο.

ΒΗΜΑ ΔΕΥΤΕΡΟ:
Πατήστε Command-Return (PC: Ctrl-Enter) για να μετατρέψετε το μονοπάτι σας σε επιλογή.

ΒΗΜΑ ΤΡΙΤΟ:
Μεταβείτε στο μενού Select και επιλέξτε Save Selection για να αποθηκεύσετε την επιλογή ως κανάλι. Όταν εμφανιστεί το πλαίσιο διαλόγου, κάντε κλικ στο οκ. Κατόπιν, πατήστε Command-D (PC: Ctrl-D) για να αποεπιλέξετε.

ΒΗΜΑ ΤΕΤΑΡΤΟ:
Πηγαίνετε στην παλέτα Channels και κάντε κλικ στο κανάλι Alpha 1 (το αποθηκευμένο κανάλι της διεπαφής). Το κανάλι άλφα θα εμφανιστεί στην οθόνη σας.

ΒΗΜΑ ΠΕΜΠΤΟ:
Για να στρογγυλέψετε τις γωνίες της διεπαφής σας, μεταβείτε στο μενού Filter, επιλέξτε Blur και κατόπιν Gaussian Blur. Εφαρμόστε ένα θάμπωμα 2 εικονοστοιχείων και κάντε κλικ στο οκ (όσο μεγαλύτερο το θάμπωμα, τόσο πιο στρογγυλεμένες θα γίνουν οι γωνίες). Σημείωση: Για εικόνες υψηλής ανάλυσης, π.χ. 300 ppi, εφαρμόστε θάμπωμα 5 εικονοστοιχείων ή περισσότερων. Για να αφαιρέσετε τη θαμπάδα και να κάνετε τις γωνίες σας ομαλές, πατήστε Command-L (PC: Ctrl-L) για να εμφανιστεί το πλαίσιο διαλόγου Levels.

ΒΗΜΑ ΕΚΤΟ:
Όταν εμφανιστεί το πλαίσιο διαλόγου, σύρετε τον αριστερό και το δεξιό δείκτη του Input Levels προς το μέσο. Καθώς σέρνετε, θα παρατηρήσετε ότι το θάμπωμα εξαφανίζεται και οι γωνίες γίνονται ομαλές. Σύρετε τους δείκτες μέχρι να απέχουν μεταξύ τους 2 με 4 περίπου χιλιοστά.
Κάντε κλικ στο οκ και το εξωτερικό της διεπαφής σας θα γίνει στρογγυλεμένο.

ΒΗΜΑ ΕΒΔΟΜΟ:
Επιστρέψτε στην παλέτα Layers και κάντε κλικ στο στρώμα Background. Δημιουργήστε ένα νέο κενό στρώμα κάνοντας κλικ στο εικονίδιο New Layer στο κάτω μέρος της παλέτας και κατόπιν πατήστε Option-Command-4 (PC: Alt-Control-4) για να φορτώσετε το κανάλι Alpha ως επιλογή. Κάντε το χρώμα του πρώτου πλάνου γκρι ανοιχτό και κατόπιν γεμίστε την επιλογή πατώντας Option-Delete (PC: Alt-Backspace). Αποεπιλέξτε πατώντας Command-D (PC: Ctrl-D).

ΒΗΜΑ ΟΓΔΟΟ:
Πατήστε «d» και κατόπιν «x» για να κάνετε άσπρο το χρώμα του πρώτου πλάνου. Πατήστε «m» για να επιλέξετε το εργαλείο Rectangular Marquee και διαμορφώστε τις εσωτερικές επιφάνειες της διεπαφής σας. Πατήστε Delete (PC: Backspace) για να αφαιρέσετε τα σχήματα από τη βάση της διεπαφής σας. Αυτές είναι οι περιοχές που θα γεμίσουν με πλήκτρα, δείκτες, κείμενο κτλ.

ΒΗΜΑ ΕΝΑΤΟ:
Επιλέξτε Bevel and Emboss από το αναδυόμενο μενού Layer Style στο κάτω μέρος της παλέτας Layers. Όταν εμφανιστεί το πλαίσιο διαλόγου, χαμηλώστε το Size σε 2, αυξήστε το Depth σε 300% και κάντε κλικ στο οκ για να προσθέσετε ένα ανάγλυφο στη διεπαφή σας. Στο σημείο αυτό, η βάση της διεπαφής σας είναι έτοιμη.
Τα επόμενα δυο βήματα είναι προαιρετικά και προσθέτουν ένα μεταλλικό εφέ.


ΒΗΜΑ ΔΕΚΑΤΟ:
Προσθέστε ένα νέο κενό στρώμα και σύρετε το ακριβώς κάτω από το στρώμα της διεπαφής σας. Κατόπιν, κάντε κλικ ξανά στο στρώμα της διεπαφής και πατήστε Command-Ε (PC: Ctrl-Ε) για να το συγχωνεύσετε με το στρώμα που βρίσκεται από κάτω της. Πατήστε Command-M (PC: Ctrl-M) για να εμφανιστεί το πλαίσιο διαλόγου Curves. Δημιουργήστε μια καμπύλη κάνοντας κλικ κατά μήκος της για να προσθέσετε σημεία. Θα πρέπει να προσθέσετε πέντε σημεία για να δημιουργήσετε την καμπύλη που βλέπετε. Κάντε κλικ στο οκ στο πλαίσιο διαλόγου Curves για να εφαρμόσετε ένα μεταλλικό εφε στη διεπαφή σας.


ΒΗΜΑ ΕΝΔΕΚΑΤΟ:
Τέλος, επιλέξτε Drop Shadow από το αναδυόμενο μενού Layer Styles για να ολοκληρώσετε τη βάση της διεπαφής σας. Να θυμάστε ότι αυτή είναι απλά η βάση, η διεπαφή αναδεικνύεται προσθέτοντας κουμπιά, περιοχές και άλλα υψηλής αισθητικής τμήματα, τα οποία θα μάθετε σε επόμενα βοηθήματα.




Ψάξτε στο Blog

::

.....................................................

:: Links




.....................................................

εγγραφείτε στο group μας



.....................................................

Share this blog


Ιουνίου 2017
Δ Τ Τ Π Π Σ Κ
« Μαρ.    
 1234
567891011
12131415161718
19202122232425
2627282930  

:: αρχείο tutorials ::


visitor stats



.....................................................







Thessaloniki Blogs

Blog Stats

  • 237,163 hits