Иконите са неразделна част от нашия дизайн. Те са визуални улики, които показват различни действия и могат да придадат на продукта уникална идентичност. Но много пъти избираме да отпразнуваме важността му, като изтегляме едни и същи набори от икони и правим всяка икона за всеки уебсайт същата като тази преди. Какъв начин да се отнасяме към нещо толкова важно!

За да разреша този проблем, създадох ръководство, което да помогне на дизайнерите да добавят визуална дълбочина към своите икони и да ги направят уникални за продукта, който представляват. Този урок е до голяма степен вдъхновен от ръководството на Google за материален дизайн.

Принципите на материалния дизайн на Google

Как казваш Google , 'Материалът е метафора.' Той заема визуални сигнали от физическия свят и създава нов визуален език, който да стандартизира всички негови интерфейси. Принципите на Материалния дизайн са достъпни и това може бързо да се приложи за подобряване на визуалната привлекателност и потребителското изживяване на различни интерфейси.

1. Използвайте прости геометрични фигури и поразителни цветове

Тенденцията на „плоския“ дизайн на Material Design, която също се основава на плоски форми, е подбрана внимателно коя форма най-добре представя елемента, който иконата представлява. Внимателно изберете коя форма най-добре представя елемента, който иконата изобразява.

2. Добавете дълбочина с фини сенки

Падащата сянка е добър начин да заблудите окото и да придадете на вашия дизайн усещане за дълбочина, защото симулира ефекта на светлината върху обект.

Имайте предвид, че естествената светлина често се симулира като идваща от горния ляв ъгъл.

3. Използвайте цветни нюанси, за да замените падащите сенки

Всеки цвят се използва в множество нюанси за симулиране на визуална дълбочина. Например в иконата на Gmail можете да видите различни червени нюанси, които се използват за формата М, а по-тъмен нюанс за сиво се използва отдолу за капака на плика.

Как можете да го направите: Демонстрации стъпка по стъпка

Ще приложим по-опростена версия на стила на Материалния дизайн и за всяка икона ще използваме само три нюанса от един и същи цвят и ще запазим сенките плоски и къси, вместо общия ефект 'дълга сянка'.

Ресурси

• Изтеглете десетте икони, с които ще работим по-нататък тук .
• Вижте целия безплатен набор от икони на Google тук .

Да започваме.

1. Икона на мълния

Разделете иконата на две и направете горната част да изглежда издигната. Можете да постигнете това, като създадете ефект на сянка в пресечната точка на двете форми. Използвайте три нюанса на жълтото - най-светлия отгоре, един по-тъмен отдолу и запазете този, който е още по-тъмен за сянката.

2. Икона за чат

В оригиналната икона имаме малко ефект на сянката в пространството между двата балона и там ще създадете сянка.

Във фигурата по-долу изберете точката под прав ъгъл в пространството и я преместете нагоре наляво, докато не оформите прав ъгъл в горния ляв ъгъл.

Дублирайте балона отгоре и преместете копието надолу и надясно. Изберете копието и формата на балончетата под него, използвайте Pathfinder, за да създадете парче и запазете само едно пресичане с предишното копие.

Сега можете да приложите трите нюанса на синьото и да поставите най-светлия отгоре, един по-тъмен в средата и втория най-тъмен отдолу.

3. Икона на отметка

Ще създадем ефект на сгъната хартия. Дублирайте иконата и премахнете двата допълнителни съвета горе вдясно, след това лявата страна от другата страна, за да премахнете още две парчета.

Дублирайте гънката отляво и я преместете отдясно.

Пресечете двете фигури, за да създадете ефект на сянка. След това нанесете трите нюанса на цвета, като оставите най-тъмния за сянката, втория най-тъмен за най-дългото парче и най-светлия за върха. ### 4. Икона на знамето

Започнете със закръгляване на ръбовете, след което премахнете основата на флага.

Създайте ефект на сгъване, нарисувайте диагонално две пресичащи се линии. Използвайте “Pathfinder”, разделете формата на флага с линиите и нанесете три нюанса на зелено върху флага, като същевременно оставите основното сиво.

5. Сърдечна икона

Дублирайте иконата на сърце.

разлика между node js и javascript

Изолирайте лявата половина на фигурата.

Начертайте диагонална линия надолу от горната дясна точка.

Покрийте получената фигура със сърцето, след това я преместете надясно, за да извадите фигурата от сянката. Нанесете трите си нюанса на розово.

какво е конвертируема банкнота

6. Икона Планини

Празното място в оригиналната икона показва къде можем да поставим сянка.

Създайте две триъгълни фигури от всеки връх.

Преместете копие на по-малкото вдясно и извлечете полученото пресичане като форма на сянка.

Нанесете три нюанса на кафявото, като най-светлият е отляво, вторият най-светъл за най-големия триъгълник и най-тъмният за сянката в средата. Нанесете малко радиус на ъгъла, за да изгладите резултата.

7. Икона на хората

Изберете и дублирайте долната част на човека отляво. Подравнете това копие с човека отдясно. Сега изберете трите припокриващи се фигури и приложете инструмента 'Разделяне' от панела 'Pathfinder'. Сега внедрете цветовете, за да завършите.

8. Квадратна плаваща икона

Изберете долната форма и след това преместете върха на горната средна нагоре, докато изглежда като диамант.

Дублирайте горната форма на диаманта и преместете копието надолу с 10 или 20 px.

Изберете двете долни фигури и приложете инструмента 'Разделяне' от панела 'Намиране на път'.

От получените пресичащи се фигури просто запазете долните две парчета и изтрийте всички допълнителни точки.

Завършете, като нанесете три нюанса на червено, като в средата зададете най-тъмния.

9. Икона на писмо

С инструмента „Direct Selection (A)“ изберете втората най-висока точка на формата на буквата.

Добавете точка от сегмента отдясно с помощта на инструмента 'Pen'.

Сега, когато имате допълнителна точка, можете да прекроите това отрицателно пространство, за да изглежда като хартия, като повдигнете горните две точки и ги преместите надясно и наляво, както е показано.

Изберете всички и приложете разделителна форма от панела 'Pathfinder'. Отделете горната форма на хартията от плика, след това дублирайте горната част на плика отгоре на хартията, за да изрежете формата на сянката, преди да приложите три нюанса на синьото.

10. Икона за торта

Изолирайте дублирана версия на дъното на тортата.

Намалява ширината си, като премества левия и десния ръб навътре.

Преместете получената фигура в горната част на оригиналната икона и удължете най-високите точки, за да припокриете формата на замръзване.

Създайте разделение на всички припокриващи се форми с „Намиране на път“ и премахнете допълнителните точки до тясната основа на тортата, която сте създали по-рано.

Завършете вашата торта, като нанесете светъл оранжев цвят върху глазурата и свещта, по-тъмен нюанс в основата и дори по-тъмен оранжев за формата на пламъка и сенките на ръба.

Подобрете външния вид на вашия набор от икони

Създаването на икони със стила на материала може да се постигне с простота. Просто се нуждаете от добра комбинация от добре обмислени геометрични фигури, наситени цветови тонове и ефекти на сенките.

Добрата новина е, че не е нужно да създавате всички икони от нулата, както направихме в този урок. Можете да започнете от съществуващите, безплатни плоски икони и да приложите простите техники, които току-що научихте.

Наистина бих искал да видя какво създавате. Чувствайте се свободни да споделяте вашите коментари и персонализирани икони.