Μια φιλική προς το χρήστη διεπαφή, καλά σχεδιασμένα γραφικά, η σωστή διάταξη των στοιχείων στη σελίδα - το ήμισυ της επιτυχίας του ιστότοπου με τον επισκέπτη. Η σχεδίαση κουμπιών για έναν ιστότοπο είναι ένα μικρό αλλά σημαντικό μέρος της εργασίας σε ένα διαδικτυακό έργο.
Οδηγίες
Βήμα 1
Δοκιμάστε να σχεδιάσετε ένα στρογγυλό κουμπί. Η παρακάτω μέθοδος είναι επίσης καθολική για τη δημιουργία λογότυπων και ειδώλων. Το σχέδιο δεν είναι δύσκολο, παρά τον αριθμό των ενεργειών που πρέπει να εκτελέσετε.
Βήμα 2
Ανοίξτε το Adobe Photoshop. Δημιουργήστε ένα νέο έγγραφο πατώντας το συνδυασμό "Ctrl + N". Παράμετροι εικόνας 300 * 300, ανάλυση 72 ppi. Η προεπιλεγμένη λειτουργία φόντου και χρώματος είναι λευκή και RGB, αντίστοιχα.
Βήμα 3
Είναι καλύτερο να σχεδιάσετε με διανύσματα, έτσι ώστε όταν το κουμπί μειωθεί, η ποιότητά του δεν μειώνεται. Επιλέξτε το εργαλείο Oval, κρατήστε πατημένο το Shift και σχεδιάστε έναν κύκλο από το κέντρο.
Βήμα 4
Τώρα εφαρμόστε μερικά εφέ στον κύκλο που προκύπτει. Μεταβείτε στο μενού "Layers" - "Layer Style" - "Blending Options". Εδώ θα πρέπει να εφαρμόσετε μια κλίση.
Βήμα 5
Στη συνέχεια, εδώ, επιλέξτε το πλαίσιο δίπλα στο "Embossing" για να δώσετε στο κουμπί την απαραίτητη διόγκωση και ορίστε τις ακόλουθες παραμέτρους: στυλ - ανάγλυφο διάρθρωσης, μέθοδος - μαλακή κοπή, βάθος - 220%, μέγεθος - 1 pixel, μαλακό - 5 pixel, γωνία - 135 ° χωρίς παγκόσμιο φωτισμό, ύψος - 32, λειτουργία επισήμανσης - κανονική με αδιαφάνεια 30%, λειτουργία σκιάς - πολλαπλασιασμός με αδιαφάνεια 25%
Βήμα 6
Για να δώσετε ακόμη περισσότερη ένταση, εδώ στις παραμέτρους ανάμειξης, επιλέξτε το πλαίσιο "Σκιά" και ορίστε τις ακόλουθες παραμέτρους: λειτουργία ανάμειξης - πολλαπλασιασμός, διαφάνεια - 40%, γωνία - 125o με χρήση καθολικού φωτισμού, μετατόπιση - 5 εικονοστοιχεία, μέγεθος - 20 εικονοστοιχεία.
Βήμα 7
Το αποτέλεσμα των ενεργειών που θα εκτελεστούν θα είναι μια τέτοια εικόνα όπως φαίνεται στο σχήμα.
Βήμα 8
Τώρα δημιουργήστε ένα νέο επίπεδο, επιλέξτε ξανά "Οβάλ" και σχεδιάστε έναν κύκλο με μικρότερη ακτίνα από το πρώτο σχήμα. Ανοίξτε τις "Επιλογές ανάμειξης", επιλέξτε το πλαίσιο δίπλα στην "Εσωτερική σκιά" και ορίστε τις παραμέτρους: Λειτουργία ανάμειξης - Μαλακό φως, Γωνία - 125ο, Όφσετ - 0px, Συρρίκνωση - 45%, Μέγεθος - 21 εικονοστοιχεία.
Βήμα 9
Στη συνέχεια, εδώ στις επιλογές ανάμειξης, επιλέξτε "Gradient overlay" και δημιουργήστε μια κλίση με τις παραμέτρους όπως στην εικόνα. Κάντε κλικ στο OK
Βήμα 10
Στη συνέχεια ορίστε το Blending Style σε Radial, κλίμακα στο 124%
Βήμα 11
Τώρα επιλέξτε το πλαίσιο "Εγκεφαλικό επεισόδιο" και ορίστε τις ακόλουθες παραμέτρους: μέγεθος - 5 εικονοστοιχεία, θέση - έξω, λειτουργία ανάμειξης - κανονική, αδιαφάνεια - 100%, τύπος διαδρομής - διαβάθμιση.
Βήμα 12
Ως αποτέλεσμα αυτών των ενεργειών, θα πρέπει να έχετε κάτι που μοιάζει περισσότερο με κουμπί. Μπορείτε να ανοίξετε ξανά τις επιλογές ανάμειξης και να πειραματιστείτε με αυτές.
Βήμα 13
Τώρα πρέπει να προσθέσουμε τα κουμπιά επισημάνσεων έτσι ώστε το κουμπί να έχει υφή γυαλιού. Για να το κάνετε αυτό, δημιουργήστε ξανά ένα νέο επίπεδο, επιλέξτε το εργαλείο επιλογής Oval, δημιουργήστε ένα οβάλ πάνω από το κουμπί και γεμίστε το με λευκό χρησιμοποιώντας το εργαλείο Fill. Κρατήστε πατημένο το Ctrl, κάντε κλικ στο στρώμα με τον χρωματιστό κύκλο, αντιστρέψτε την επιλογή ("Επιλογή" - "Αντιστροφή"). Τώρα πατήστε Διαγραφή. Το οβάλ πρέπει να κοπεί γύρω από την περίμετρο του κύκλου.
Βήμα 14
Στον πίνακα "Επίπεδα", αλλάξτε την επιλογή Normal σε Soft Light και, στη συνέχεια, κάντε κλικ στο εικονίδιο μάσκας διανύσματος και επιλέξτε το Fill Tool - Gradient. Γεμίστε την επισήμανση από κάτω προς τα πάνω. Το κουμπί είναι σχεδόν έτοιμο.
Βήμα 15
Μπορείτε να προσθέσετε μια επιγραφή στο κουμπί. Μπορείτε επίσης να εφαρμόσετε εφέ ανάμειξης σε αυτό, όπως εσωτερική, εξωτερική λάμψη, κλίση και ούτω καθεξής. Μην φοβάστε να πειραματιστείτε, όσο περισσότερη φαντασία χρησιμοποιείτε στην εργασία σας, τόσο γρηγορότερα θα αποκτήσετε γνώση τόσο του ίδιου του επεξεργαστή όσο και του σχεδιασμού ιστοσελίδων.
