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 για να ολοκληρώσετε τη βάση της διεπαφής σας. Να θυμάστε ότι αυτή είναι απλά η βάση, η διεπαφή αναδεικνύεται προσθέτοντας κουμπιά, περιοχές και άλλα υψηλής αισθητικής τμήματα, τα οποία θα μάθετε σε επόμενα βοηθήματα.

Advertisements

0 Responses to “Σχεδιασμός σκελετού διεπαφής”



  1. Σχολιάστε

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s


Ψάξτε στο Blog

::

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

:: Links




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

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



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

Share this blog


Ιανουαρίου 2007
Δ Τ Τ Π Π Σ Κ
    Φεβ. »
1234567
891011121314
15161718192021
22232425262728
293031  

:: αρχείο tutorials ::


visitor stats



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







Thessaloniki Blogs

Blog Stats

  • 237,315 hits

Αρέσει σε %d bloggers: