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

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

Αρχές Σχεδιασμού Υλικού Google

Πως λες Google 'Το υλικό είναι μια μεταφορά.' Δανειστείτε οπτικά στοιχεία από τον φυσικό κόσμο και δημιουργήστε μια νέα οπτική γλώσσα για να τυποποιήσετε όλες τις διεπαφές σας. Οι αρχές του Σχεδιασμού Υλικών είναι προσιτός και αυτό μπορεί να εφαρμοστεί γρήγορα για να βελτιώσει την οπτική γοητεία και την εμπειρία χρήστη διαφόρων διεπαφών.

1. Χρησιμοποιήστε απλά γεωμετρικά σχήματα και εντυπωσιακά χρώματα

Η 'επίπεδη' τάση σχεδίασης του Material Design, η οποία βασίζεται επίσης σε επίπεδα σχήματα, προσεκτικά επιλεγμένα ποιο σχήμα αντιπροσωπεύει καλύτερα το στοιχείο που αντιπροσωπεύει το εικονίδιο. Επιλέξτε προσεκτικά ποιο σχήμα αντιπροσωπεύει καλύτερα το στοιχείο που απεικονίζει το εικονίδιο.

2. Προσθέστε βάθος με λεπτές σκιές

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

Σημειώστε ότι το φυσικό φως προσομοιώνεται συχνά ότι προέρχεται από την επάνω αριστερή γωνία.

3. Χρησιμοποιήστε χρωματικές αποχρώσεις για να αντικαταστήσετε τις σκιές πτώσης

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

Πώς μπορείτε να το κάνετε: Επιδείξεις βήμα προς βήμα

Θα εφαρμόσουμε μια απλούστερη έκδοση του στυλ σχεδίασης υλικών, και για κάθε εικονίδιο, θα χρησιμοποιήσουμε μόνο τρεις αποχρώσεις του ίδιου χρώματος και θα διατηρήσουμε τις σκιές επίπεδες και κοντές, αντί για το κοινό εφέ 'long shadow'

Πόροι

• Κατεβάστε τα δέκα εικονίδια με τα οποία θα δουλέψουμε στη συνέχεια εδώ .
• Δείτε ολόκληρο το δωρεάν σύνολο εικονιδίων της Google εδώ .

Ας αρχίσουμε.

1. Εικονίδιο αστραπής

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

2. Εικονίδιο συνομιλίας

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

Στο παρακάτω σχήμα, επιλέξτε το σημείο στη δεξιά γωνία στο διάστημα και μετακινήστε το προς τα αριστερά μέχρι να σχηματίσετε μια σωστή γωνία στην επάνω αριστερή γωνία.

Αντιγράψτε το επάνω φούσκα και μετακινήστε το αντίγραφο προς τα κάτω και προς τα δεξιά. Επιλέξτε το αντίγραφο και το σχήμα φυσαλίδας από κάτω, χρησιμοποιήστε το Pathfinder για να δημιουργήσετε ένα κομμάτι και διατηρήστε μόνο μία διασταύρωση με το προηγούμενο αντίγραφο.

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

3. Επιλέξτε το εικονίδιο Mark

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

Αντιγράψτε την πτυχή στα αριστερά και μετακινήστε την πάνω δεξιά.

Διασταυρώστε τα δύο σχήματα για να δημιουργήσετε ένα εφέ σκιάς. Στη συνέχεια, εφαρμόστε τις τρεις αποχρώσεις του χρώματος αφήνοντας το πιο σκοτεινό για τη σκιά, το δεύτερο πιο σκοτεινό για το μακρύτερο κομμάτι και το ελαφρύτερο για την κορυφή. ### 4. Εικονίδιο

Ξεκινήστε με στρογγυλοποίηση των άκρων και, στη συνέχεια, αφαιρέστε τη βάση της σημαίας.

Δημιουργήστε ένα εφέ διπλώματος, σχεδιάστε δύο διασταυρούμενες γραμμές διαγώνια. Χρησιμοποιήστε το 'Pathfinder', διαιρέστε το σχήμα της σημαίας με τις γραμμές και εφαρμόστε τρεις αποχρώσεις του πράσινου στη σημαία αφήνοντας τη βάση γκρι.

5. Εικονίδιο καρδιάς

Αντιγράψτε το εικονίδιο καρδιάς.

ανατρέξτε στα στοιχεία. η ελαστικότητα της ζήτησης ως προς την τιμή είναι σχετικά ελαστική:

Απομονώστε το αριστερό μισό του σχήματος.

Σχεδιάστε μια διαγώνια γραμμή προς τα κάτω από το πάνω δεξί σημείο.

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

6. Εικονίδιο βουνών

Ο κενός χώρος μέσα στο αρχικό εικονίδιο δείχνει πού μπορούμε να βάλουμε μια σκιά.

Δημιουργήστε δύο σχήματα τριγώνων από κάθε κορυφή.

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

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

7. Εικονίδιο ανθρώπων

Επιλέξτε και αντιγράψτε το κάτω μέρος του ατόμου στα αριστερά. Ευθυγραμμίστε αυτό το αντίγραφο με το άτομο στα δεξιά. Τώρα, επιλέξτε τα τρία επικαλυπτόμενα σχήματα και εφαρμόστε το εργαλείο 'Διαίρεση' από τον πίνακα 'Pathfinder'. Τώρα, εφαρμόστε τα χρώματα για να τελειώσετε.

8. Πλατεία εικονίδιο

Επιλέξτε το κάτω σχήμα και, στη συνέχεια, μετακινήστε την άκρη του επάνω μέσου προς τα πάνω μέχρι να μοιάζει με διαμάντι.

Αντιγράψτε το πάνω σχήμα του διαμαντιού και μετακινήστε το αντίγραφο προς τα κάτω 10 ή 20 εικονοστοιχεία.

Επιλέξτε τα δύο κάτω σχήματα και εφαρμόστε το εργαλείο 'Διαίρεση' από τον πίνακα 'Pathfinder'.

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

Ολοκληρώστε εφαρμόζοντας τρεις αποχρώσεις του κόκκινου ενώ ορίζετε το πιο σκοτεινό στη μέση.

9. Εικονίδιο γράμμα

Με το εργαλείο 'Άμεση επιλογή' (A), επιλέξτε το δεύτερο υψηλότερο σημείο του σχήματος του γράμματος.

Προσθέστε ένα σημείο στο τμήμα στα δεξιά του χρησιμοποιώντας το εργαλείο 'Στυλό'.

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

Επιλέξτε τα πάντα και εφαρμόστε ένα σχήμα διαχωριστικού από τον πίνακα 'Pathfinder'. Διαχωρίστε το πάνω σχήμα χαρτιού από το φάκελο και, στη συνέχεια, αντιγράψτε το πάνω μέρος του φακέλου πάνω από το χαρτί για να κόψετε το σχήμα σκιάς πριν εφαρμόσετε τρεις αποχρώσεις του μπλε.

10. Εικονίδιο κέικ

η διαφορά μεταξύ s corp και c corp

Απομονώστε μια διπλή έκδοση του κάτω μέρους του κέικ.

Μειώνει το πλάτος του μετακινώντας το αριστερό και το δεξί άκρο προς τα μέσα.

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

Δημιουργήστε μια διαίρεση όλων των επικαλυπτόμενων σχημάτων με το 'Pathfinder' και αφαιρέστε τις επιπλέον κουκκίδες δίπλα στη στενή βάση του κέικ που δημιουργήσατε νωρίτερα.

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

Βελτιώστε την εμφάνιση του εικονιδίου σας

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

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

Θα ήθελα πολύ να δω τι δημιουργείτε. Μη διστάσετε να μοιραστείτε τα σχόλιά σας και τα προσαρμοσμένα εικονίδια.