Οι πιο σωστές οδηγίες. Πώς να δημιουργήσετε ένα εικονίδιο εφαρμογής σε στυλ σχεδίασης υλικού. Οι πιο σωστές οδηγίες Ας δούμε το παράδειγμα δημιουργίας τετράγωνου εικονιδίου

Είστε προγραμματιστής ή σχεδιαστής ιστοσελίδων και θέλετε να συμβαδίσετε με την εποχή; Επειτα δωρεάν εικονίδια σε στυλ σχεδιασμού υλικού- είναι απλά απαραίτητο!

Τι είναι το Material Design

Σχεδιασμός Υλικούείναι ένα σχέδιο λογισμικού από την Google, σχεδιασμένο να ενώνει όλα τα προϊόντα και τις υπηρεσίες της σε μια καθολική διεπαφή για να το κάνει πιο βολικό για τους χρήστες.

Η βασική ιδέα του Material Design είναι να δημιουργήσει μια διαισθητική αίσθηση στους χρήστες να εργάζονται με πραγματικά φυσικά αντικείμενα.

Εικονίδια σε στυλ σχεδιασμού υλικού

Σήμερα σας φέρνω πάνω από 900 δωρεάν εικονίδια Material Design που μπορείτε να χρησιμοποιήσετε ελεύθερα στους δικούς σας ιστότοπους.

Αυτά τα εικονίδια είναι απλά, φιλικά και μοντέρνα. Κάθε εικονίδιο δημιουργείται από σχεδιαστές που χρησιμοποιούν τις οδηγίες σχεδίασης της Google για να απεικονίζουν με απλές και ελάχιστες μορφές καθολικές έννοιες που χρησιμοποιούνται συνήθως σε όλες τις διεπαφές χρήστη.

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

Τα εικονίδια Free Material Design είναι διαθέσιμα σε μορφές SVG και PNG, καθώς και γραμματοσειρά web.

Ο ευκολότερος τρόπος χρήσης των εικονιδίων Material Design είναι με τη μορφή γραμματοσειράς που συνδέεται από τον ίδιο τον διακομιστή Google. Είναι πολύ εύκολο να το κάνετε αυτό:

Πώς να συνδέσετε εικονίδια σχεδίασης υλικού

Και στο αρχείο CSS θα προσθέσουμε το αντίστοιχο σύνολο κανόνων για το class.material-icons, με το οποίο θα χρησιμοποιήσουμε τα εικονίδια:

Υλικά-εικονίδια (
font-family: "Εικονίδια υλικού";
βάρος γραμματοσειράς: κανονικό;
στυλ γραμματοσειράς: κανονικό;
μέγεθος γραμματοσειράς: 24 px; /* Προτιμώμενο μέγεθος εικονιδίου */
οθόνη: inline-block;
Ύψος γραμμής: 1;
μετατροπή κειμένου: κανένας;
διάστιχο: κανονικό;
αναδίπλωση λέξης: κανονικό;
λευκό διάστημα: nowrap;
κατεύθυνση: ltr;
/* Υποστήριξη για όλα τα προγράμματα περιήγησης WebKit. */
-webkit-font-smoothing: antialiased;
/* Υποστήριξη για Safari και Chrome. */
απόδοση κειμένου: optimizeLegibility;
/* Υποστήριξη για Firefox. */
-moz-osx-font-smoothing: κλίμακα του γκρι.
/* Υποστήριξη για IE. */
font-feature-settings: "liga";
}

Πώς να χρησιμοποιήσετε τα εικονίδια σχεδίασης υλικού

Η χρήση των εικονιδίων είναι πολύ απλή. Στη σωστή θέση στη σελίδα επικολλήστε τον παρακάτω κώδικα:

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

Στο παραπάνω παράδειγμα, τα εικονίδια χρησιμοποιούν απλώς το όνομά τους. Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης την αυτόματη αντικατάσταση του ονόματος με το ίδιο το εικονίδιο. Εάν θέλετε τα παλαιότερα προγράμματα περιήγησης να εμφανίζουν επαρκώς εικονίδια, χρησιμοποιήστε το αριθμητικό τους ισοδύναμο. Θα το βρείτε επίσης στην παραπάνω σελίδα απλά κάνοντας κλικ σε οποιοδήποτε εικονίδιο και επιλέγοντας Icon Font.

Υλικό σχέδιο εικονίδιο στυλ

Για να αλλάξετε την εμφάνιση των εικονιδίων Material Design, μπορείτε να χρησιμοποιήσετε τους ακόλουθους κανόνες CSS:

/* Κανόνες για το μέγεθος του εικονιδίου. */
.material-icons.md-18 (μέγεθος γραμματοσειράς: 18 px; )
.material-icons.md-24 (μέγεθος γραμματοσειράς: 24 px; )
.material-icons.md-36 (μέγεθος γραμματοσειράς: 36 px; )
.material-icons.md-48 (μέγεθος γραμματοσειράς: 48 px; )
/* Κανόνες για τη χρήση εικονιδίων ως μαύρα σε ανοιχτό φόντο. */
.material-icons.md-dark ( χρώμα: rgba(0, 0, 0, 0.54); )

/* Κανόνες για τη χρήση εικονιδίων ως λευκά σε σκούρο φόντο. */

Παρόλο που όλα τα εικονίδια μπορούν να ρυθμιστούν σε οποιοδήποτε μέγεθος, εξακολουθεί να συνιστάται η τήρηση των αρχών σχεδίασης υλικού και η χρήση συνόλου μεγεθών 18, 24, 36 ή 48 εικονοστοιχείων. Από προεπιλογή, τα εικονίδια εμφανίζονται στα 24 εικονοστοιχεία.

Πώς να ορίσετε το δικό σας χρώμα για εικονίδια σε στιλ Material Design

Εάν ακολουθείτε τις οδηγίες σχεδιασμού υλικού, τότε θα πρέπει να χρησιμοποιείτε μόνο ασπρόμαυρα χρώματα για εικονίδια με αδιαφάνεια 54% και 100% αντίστοιχα. Για ανενεργά εικονίδια - 26% και 30%, αντίστοιχα.

Material-icons.md-dark ( χρώμα: rgba(0, 0, 0, 0.54); )
.material-icons.md-dark.md-inactive ( χρώμα: rgba(0, 0, 0, 0.26); )
.material-icons.md-light ( χρώμα: rgba(255, 255, 255, 1); )
.material-icons.md-light.md-inactive ( χρώμα: rgba(255, 255, 255, 0.3); )

Ωστόσο, τίποτα δεν θα σας εμποδίσει να εφαρμόσετε τα δικά σας χρώματα στα εικονίδια:

Κατεβάστε δωρεάν εικονίδια σε στυλ σχεδίασης υλικού

Μπορείτε επίσης να κατεβάσετε αυτό το σύνολο εικονιδίων για τον εαυτό σας και να το χρησιμοποιήσετε σε διατάξεις σχεδίασης ή κατά τη δημιουργία διαφόρων διεπαφών. Μπορείτε να κατεβάσετε δωρεάν εικονίδια σε στυλ Material Design (~60MB).

Πριν από λίγο καιρό, η Google παρουσίασε τη νέα της έννοια των διεπαφών χρήστη που ονομάζεται . Αυτή είναι μια τόσο μεγάλης κλίμακας ιδέα που είναι απλά αδύνατο να μιλήσουμε για αυτήν σε ένα άρθρο. Δεν θα προσπαθήσουμε να αγκαλιάσουμε την απεραντοσύνη, αλλά θα προσπαθήσουμε να την εξετάσουμε από τη σκοπιά του πολύ σημαντικού συστατικού της - γραφικών αντικειμένων, συχνά για συντομία και παραδοσιακά αποκαλούμενα εικονίδια.

Στην έννοια του Material Design της Google, αποτελούν αναπόσπαστο και πολύ σημαντικό μέρος της εμπειρίας χρήστη, είτε πρόκειται για μια ιστοσελίδα είτε για μια εφαρμογή επιτραπέζιου υπολογιστή. Σύμφωνα με αυτή την ιδέα, ο χρήστης θα πρέπει να έχει μια διαισθητική αίσθηση της εργασίας με πραγματικά φυσικά αντικείμενα μέσα σε ένα ψηφιακό περιβάλλον. Με σχετικά μικρά μεγέθη, πρέπει να είναι καθαρά και ευδιάκριτα, να έχουν αρμονικό χρωματικό συνδυασμό και να διατηρούν μια ορισμένη ισορροπία μεταξύ του ελεύθερου χώρου και των μικρών λεπτομερειών. Επιπλέον, είναι απαραίτητο να ληφθεί υπόψη ότι ο ιστός πρέπει να φαίνεται εξίσου ελκυστικός σε διαφορετικές συσκευές και λειτουργικά συστήματα.

Σήμερα θα εξετάσουμε μερικές επιτυχημένες, κατά τη γνώμη μας, απόπειρες να ακολουθήσουμε την έννοια του Material Design ακριβώς στον τομέα της δημιουργίας στοιχείων διεπαφής όπως .

Σχέδια εικονιδίων υλικού Ιστού

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

Εικονίδια υπηρεσίας στούντιο Ιστού με στυλ

Πολύ πρωτότυπα και φωτεινά εικονίδια. Οι προσεκτικά αποδομένες λεπτομέρειες σε συνδυασμό με εντυπωσιακά χρώματα και ασυνήθιστα σχήματα είναι βέβαιο ότι θα τραβήξουν την προσοχή.

Εικονίδια σχεδιασμού υλικού για πάροχο φιλοξενίας

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

Γωνιακό υλικό σχεδίασης εικονίδια

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

Ισομετρικά εικονίδια σε στυλ σχεδίασης υλικών

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

Αν αναρωτιέστε πώς να δημιουργήσετε ένα εικονίδιο εφαρμογής σε στυλ Υλικό, τότε ήρθατε στο σωστό μέρος!

Αυτή η οδηγία είναι ο πιο ακριβής οδηγός για τη δημιουργία ενός εικονιδίου εφαρμογής Android σε στυλ Υλικού Σχεδιασμού, που συλλέγεται από διάφορες πηγές που μπόρεσα να βρω στο Διαδίκτυο.

Το εικονίδιο της εφαρμογής δημιουργείται στο πρόγραμμα επεξεργασίας γραφικών Adobe Illustrator CC. Οι οδηγίες παρουσιάζονται αρκετά συνοπτικά. Εάν οι γνώσεις του συντάκτη δεν επαρκούν για επανάληψη, ανατρέξτε στο βίντεο από το υλικό που δίνεται παρακάτω (ρήτρα 3)

Τα παρακάτω υλικά χρησιμοποιήθηκαν για τη συγγραφή των οδηγιών

Οδηγίες Google Material Design: https://www.google.com/design/spec/style/icons.html
Τι έχασε η Google στις οδηγίες της για την εικονογραφία του Material Design: https://goo.gl/5SpsVn
Πώς να δημιουργήσετε ένα εικονίδιο σχεδιασμού υλικού στο Adobe Illustrator: https://youtu.be/GzXq6ouGTpE

Αρχεία πηγής

Πρέπει να κατεβάσετε πολλά αρχεία που θα βοηθήσουν στην ανάπτυξη

Παλέτα χρωμάτων Material Design: https://goo.gl/EVxUSx - αντιγράψτε το αρχείο Material Palette.ase από το αρχείο στον κατάλογο με παλέτες Adobe Illustrator (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\ δείγματα)
Γραμματοσειρές: https://goo.gl/GQbKob - εγκαταστήστε τις γραμματοσειρές στο σύστημα και αντιγράψτε επίσης τα αρχεία γραμματοσειρών στους φακέλους C:\Program Files\Common Files\Adobe\Fonts και C:\Program Files (x86)\ Common Files\ Adobe\Fonts
Πλέγμα για εύκολη εργασία με εικονίδια (Φύλλο αυτοκόλλητων εικονιδίων προϊόντος): https://goo.gl/CYE2jV - περιέχει 4 πρότυπα εικονιδίων εφαρμογών

Προετοιμασία για δράση

Αντιγράψτε το αρχείο επιλογής χρώματος στη βιβλιοθήκη του Adobe Illustrator και, στη συνέχεια, επιλέξτε την παλέτα που προκύπτει από τη λίστα Βιβλιοθήκες Swatch στον πίνακα Δείγματα. Εγκαταστήστε τις γραμματοσειρές και ελέγξτε τη διαθεσιμότητά τους στο Adobe Illustrator. Εάν η γραμματοσειρά Roboto Regular δεν είναι διαθέσιμη, αντιγράψτε τα αρχεία γραμματοσειράς στους καταλόγους που αναφέρονται παραπάνω στα αρχεία προέλευσης. Αποσυμπιέστε τα αρχεία πλέγματος και ανοίξτε τα στο Adobe Illustrator. Διάλεξε αυτό που σου ταιριάζει καλύτερα, κλείσε τα υπόλοιπα. Αυτά τα πρότυπα έχουν ήδη οργανωμένες τις σωστές σκιές και τονισμένα σημεία - οι τιμές τους μπορούν να χρησιμοποιηθούν ως βάση. Ας αρχίσουμε.

Δημιουργία εικονιδίου σε στυλ Υλικό

Σε αυτήν την οδηγία θα δημιουργήσουμε ένα απλό εικονίδιο ενός από τα γεωμετρικά σχήματα που περιγράφονται στο εγχειρίδιο. Το πρότυπο εικονιδίου έχει μέγεθος 192x192 pt, το οποίο είναι πολύ βολικό για τον χειρισμό τιμών μεγέθους. Οι γεωμετρικές διαστάσεις του ίδιου του εικονιδίου, ανάλογα με τον τύπο του, είναι οι εξής:

τετράγωνο εικονίδιο: 152×152 π
ορθογώνιο: 176×128 π
γύρος: ⌀ 176 πόντοι

Στρογγυλεμένες γωνίες τετράγωνων και ορθογώνιων εικονιδίων: 12 pt

Ας δούμε το παράδειγμα δημιουργίας τετράγωνου εικονιδίου

Μετά από όλους τους χειρισμούς που έγιναν, θα πρέπει να δείτε κάτι σαν το εξής:

Το επόμενο βήμα είναι να δημιουργήσετε μια περιοχή επισήμανσης και σκιάς για το φόντο

Αυτό ολοκληρώνει την εργασία παρασκηνίου.

Δημιουργήστε ένα σύμβολο εικονιδίου

Για να απλοποιήσουμε την περιγραφή της διαδικασίας, θα τοποθετήσουμε το σύμβολο του αλφαβήτου "B" στο φόντο.

Δημιουργία μιας μακριάς σκιάς για ένα σημάδι

Σε επίπεδα, επιλέξτε το σχήμα με το σύμβολο (διακόπτης στα δεξιά) και εκτελέστε μια λειτουργία αντιγραφής (Ctrl+C) και επικολλήστε δύο φορές προς τα εμπρός (Ctrl+F). Ως αποτέλεσμα, θα πρέπει να λάβετε τρεις πανομοιότυπες φιγούρες "Σύμβολο". Θα συνεχίσουμε να εργαζόμαστε με τις δύο νέες φιγούρες
Μεταβείτε στο επάνω σχήμα "Σύμβολο" και ενώ κρατάτε πατημένο το πλήκτρο Shift, μετακινήστε το σχήμα έξω από τον καμβά κατά 45° προς τα δεξιά και προς τα κάτω - αυτό είναι ένα πρότυπο για το σχηματισμό μιας μεγάλης σκιάς
Ως αποτέλεσμα, το μεσαίο και το κάτω σχήμα στη λίστα των στρώσεων θα πρέπει να βρίσκονται στο κέντρο του φόντου και το επάνω πρέπει να βρίσκεται έξω από τον καμβά κάτω δεξιά. Δεν αγγίζουμε ακόμα το κάτω σχήμα
Τώρα χρησιμοποιήστε τον δεξιό διακόπτη για να επιλέξετε δύο σχήματα "Σύμβολο" - το επάνω και το μεσαίο, μεταβείτε στο μενού Επιλογές Αντικειμένου - Μείγματος - Μείγματος, ενεργοποιήστε τη λειτουργία Καθορισμένα Βήματα, καθορίστε 200 βήματα και κάντε κλικ στο OK και, στη συνέχεια, εκτελέστε το Αντικείμενο - Μείγμα - Εντολή δημιουργίας μενού. Με βάση δύο σχήματα, το ένα θα δημιουργηθεί με τη μορφή ροής ανάμεσα στα δύο παλιά
Χωρίς να αφαιρέσετε την επιλογή από το σχήμα που προκύπτει, εκτελέστε την ενέργεια στο μενού Object - Expand... και κάντε κλικ στο OK - η ροή θα χωριστεί σε ξεχωριστά πολύγωνα
Εκτελέστε μια ένωση πολυγώνου (Unite)
Μετονομάστε το σχήμα που προκύπτει Με τη μελλοντική σκιά στο "Long Shadow"
Τώρα ας δημιουργήσουμε μια μάσκα. Αντιγράψτε το σχήμα φόντου "Φόντο" (Ctrl+C) και επικόλληση στη θέση του (Shift+Ctrl+V). Ως αποτέλεσμα, το σχήμα με το φόντο θα εισαχθεί πάνω από όλα τα σχήματα στο στρώμα
Επιλέξτε με το δεξί διακόπτη το νέο "Background", το οποίο βρίσκεται στην κορυφή, και το σχήμα "Long Shadow" και εκτελέστε μια περικοπή. Ως αποτέλεσμα, παίρνουμε μια ομάδα φιγούρων που περιέχει πολλά σχήματα
Αφαιρέστε όλα τα σχήματα Εκτός από την ίδια τη σκιά - είναι εντελώς λευκό και, πιθανότατα, βρίσκεται πάνω από τα υπόλοιπα Το στιγμιότυπο οθόνης δείχνει το σχήμα που πρέπει να αφαιρεθεί από την ομάδα
Μετονομάζω στο "Long Shadow" και τοποθετήστε το κάτω από το σχήμα "Symbol".
Μεταβείτε στο σχήμα Long Shadow και, στη συνέχεια, στον πίνακα Gradient επιλέξτε τον Γραμμικό τύπο, γωνία -45°, τα χρώματα έναρξης και λήξης είναι τα ίδια με αυτά που επιλέχθηκαν για τη σκιά φόντου - στην περίπτωσή μας είναι Indigo 900(Επιλέξτε το χρώμα σας από τον πίνακα "Τιμές απόχρωσης, σκιάς και σκιάς" στον σύνδεσμο: https://goo.gl/8Vkg33), αριστερή αδιαφάνεια 20%, αριστερή δεξιά αδιαφάνεια 0% και θέση μεσαίου σημείου 33%
Τώρα πρέπει να καθαρίσετε τη φιγούρα της σκιάς από τα "βήματα" που σχηματίστηκαν κατά τη διάρκεια του Blanding (σχήματα που ρέουν). Κάντε ενεργό το σχήμα Long Shadow και μεγεθύνετε αρκετά για να εκτιμήσετε την άκρη του σχήματος
Επιλέξτε το Lasso Tool και επιλέξτε τα σημεία για να μην αγγίξετε τα εξωτερικά, όπως φαίνεται παρακάτω
Αφαιρέστε τα περιττά σημεία χρησιμοποιώντας το εργαλείο Αφαίρεση επιλεγμένων σημείων αγκύρωσης

Δημιουργία της περιοχής τονισμού και της σκιάς μιας πινακίδας

Δημιουργία επισήμανσης για ολόκληρο το εικονίδιο

Αντιγράψτε το σχήμα φόντου, δημιουργήστε ένα νέο στρώμα και επικολλήστε το σχήμα φόντου σε αυτό. Απενεργοποιήστε το γέμισμα σχήματος. Μετονομάστε το επίπεδο "Lighting"
Δημιουργήστε ένα γέμισμα διαβάθμισης για το σχήμα σε ένα νέο επίπεδο με τις ακόλουθες παραμέτρους: τύπος Radial, χρώμα αρχής και τέλους της διαβάθμισης - λευκό, αδιαφάνεια της αρχής της διαβάθμισης 10%, τέλος της διαβάθμισης 0%, θέση το μέσο 33%
Χρησιμοποιώντας το εργαλείο κλίσης (G), δημιουργήστε μια διαβάθμιση από την επάνω αριστερή γωνία του φόντου στην κάτω δεξιά γωνία και, στη συνέχεια, αλλάξτε τη γωνία κλίσης στις ρυθμίσεις σε -45°

Δημιουργία γενικής σκιάς για ολόκληρο το εικονίδιο