Σχεδιασμός διεπαφής Web 2.0 στο Photoshop
Η κατανόηση του σεμιναρίου παρακάτω είναι η κατανόηση της τεχνικής του, με αυτό μπορείτε να σχεδιάσετε κάποια γραφική διεπαφή χρήστη για έναν ιστότοπο. Πλευρική πλοήγηση, κουμπιά, κεφαλίδες, για παράδειγμα. Όλα τα στυλ Web 2.0.
Ξεκινήστε μια νέα καμβά? οποιοδήποτε μέγεθος. Κάτι μεγαλύτερο από 450x300px θα ήταν καλό. Επίλεξε το Στρογγυλεμένο ορθογώνιο εργαλείο και να σχεδιάσετε ένα ορθογώνιο τόσο μεγάλο όσο φαίνεται στην παραπάνω εικόνα.
Κάντε διπλό κλικ στο στρώμα του στρογγυλεμένου ορθογωνίου για να ξεκινήσετε Blending Επιλογές. Αλλάξτε τις ρυθμίσεις για τα παρακάτω στυλ.
Σκίαση
Αδιαφάνεια: 31% Απόσταση: 1px Διάδοση: 0% Μέγεθος: 5px
Bevel και ανάγλυφο
Βάθος: 100% Μέγεθος: 0px Μαλακτικό: 0px
Επικάλυψη διαβαθμίσεων
Κάντε διπλό κλικ στο Gradiant και ορίστε τα ακόλουθα σημεία στάσης. Τοποθεσία: 0%, # 1378cd Τοποθεσία: 100% # 4da5f0
Κτύπημα
Μέγεθος: 5px Θέση: Εσωτερικό Χρώμα: # 54abf6
Ας εισαγάγουμε κάποιο κείμενο, μια ετικέτα, μια διεύθυνση URL ή κάτι τέτοιο. Έχετε το μεσαίο και ευθυγραμμιστεί δεξιά έτσι το λογότυπο μπορεί να διαμένει στην αριστερή πλευρά αργότερα. Ας στυλίσουμε το κείμενο. Χρησιμοποιώ Lucida Sans Unicode. 55pt; λείος; -120 για την παρακολούθηση χαρακτήρων (απόσταση γραμμάτων). Κάντε διπλό κλικ στο στρώμα κειμένου και ορίστε τα εξής Blending Επιλογές.
Επικάλυψη διαβαθμίσεων
Κάντε διπλό κλικ στο Gradiant και ορίστε τα ακόλουθα σημεία στάσης. Τοποθεσία: 0%, # 9ec7eb Τοποθεσία: 100% ecf6ff
Στη συνέχεια θα χρειαστεί να τοποθετήσετε το λογότυπο στην αριστερή πλευρά του κειμένου. Θα χρησιμοποιήσω ένα στρογγυλεμένο ορθογώνιο με ακτίνα 5px για την απεικόνιση του λογότυπου. Εδώ είναι το Blending Option ρυθμίσεις για το στρογγυλεμένο ορθογώνιο.
Εσωτερική σκιά
Αδιαφάνεια: 45% Απόσταση: 0px Μέγεθος: 43px;
Bevel και ανάγλυφο
Βάθος: 100% Μέγεθος: 0px Μαλακτικό: 0px Χαρακτηριστικό Λειτουργία Αδιαφάνεια: 50% ShadowMode Αδιαφάνεια: 100%
Επικάλυψη διαβαθμίσεων
Κάντε διπλό κλικ στο Gradiant και ορίστε τα ακόλουθα σημεία στάσης. Τοποθεσία: 0% # 0e2f4a Τοποθεσία: 47% # 001a31 Τοποθεσία: 48% # 002545 Τοποθεσία: 100% # 0f4b7f
Κτύπημα
Μέγεθος: 5px Κάντε διπλό κλικ στο Gradiant και ορίστε τα ακόλουθα σημεία στάσης. Τοποθεσία: 0% # 1468af Τοποθεσία: 100% # 50abf8
Ας δώσουμε λίγο γυαλιστερό αποτέλεσμα. Κρατήστε CTRL και αριστερό κλικ σε στρογγυλεμένο ορθογώνιο Μικρογραφία στρώματος. Όταν επιλέξετε ολόκληρο το στρογγυλεμένο ορθογώνιο, αλλάξτε το Εργαλείο ορθογώνιας σήμανσης, Κρατήστε ALT και εξάγει το δεύτερο μισό της επιλεγμένης περιοχής. όπως ακριβώς και στην παραπάνω εικόνα.
Δημιουργήστε ένα νέο επίπεδο. Τραβήξτε το έτσι ώστε να κάθεται πάνω από όλα τα στρώματα. συμπληρώστε το επιλεγμένο τμήμα με λευκό [#ffffff]; αλλάξτε την αδιαφάνεια έως 15%.
Το σεμινάριο θα λήξει εδώ. Πώς θα χρησιμοποιήσετε αυτό το σχέδιο εξαρτάται αποκλειστικά από εσάς. Αλλάζοντας ελαφρώς το μέγεθος και τα χρώματα του, μπορεί να χρησιμοποιηθεί ως κεφαλίδα ή κουμπιά ιστού. Ακολουθεί κάποιο παράδειγμα.
Επικεφαλίδα ιστοτόπου
Ιστοσελίδα Κουμπιά
