Иконе су саставни део нашег дизајна. Они су визуелни трагови који указују на различите акције и могу дати јединствени идентитет производу. Али много пута одаберемо да прославимо његову важност преузимањем истих скупова икона и чинећи сваку икону за сваку веб локацију истом као и она пре ње. Какав начин лечења нечег таквог значаја!

Да бих решио овај проблем, створио сам водич који ће дизајнерима помоћи да додају визуелну дубину својим иконама и учине их јединственим за производ који представљају. Овај водич је углавном инспирисан водичем Гоогле-овог дизајна материјала.

Гоогле принципи дизајна материјала

Како се каже Гоогле , „Материјал је метафора“. Позајмите визуелне знаке из физичког света и створите нови визуелни језик који ће стандардизовати све ваше интерфејсе. Принципи дизајна материјала су приступачан а то се може брзо применити за побољшање визуелне привлачности и корисничког искуства различитих интерфејса.

1. Користите једноставне геометријске облике и упечатљиве боје

Тренд „равног“ дизајна Материјалног дизајна, који се такође заснива на равним облицима, пажљиво је одабран који облик најбоље представља елемент који икона представља. Пажљиво одаберите који облик најбоље представља елемент који икона приказује.

2. Додајте дубину суптилним сенкама

Сенка је добар начин да заварате око и дате дизајну осећај дубине, јер симулира ефекат светлости на објекат.

Имајте на уму да се природно светло често симулира као да долази из горњег левог угла.

3. Користите сенке у боји да бисте заменили падајуће сенке

Свака боја се користи у више нијанси за симулацију визуелне дубине. На пример, на икони Гмаил можете видети различите нијансе црвене које се користе за М облик, а тамнија нијанса сиве испод поклопца коверте.

Како то можете: демонстрације корак по корак

Применићемо једноставнију верзију стила Материјалног дизајна, а за сваку икону користићемо само три нијансе исте боје и одржавати сенке равне и кратке, уместо уобичајеног ефекта „дуге сенке“.

Ресурси

• Преузмите десет икона са којима ћемо даље радити овде .
• Погледајте читав Гоогле-ов бесплатни сет икона овде .

Хајде да почнемо.

1. Икона муње

Поделите икону на два дела и учините да врх изгледа повишен. То можете постићи стварањем ефекта сенке на пресеку оба облика. Користите три нијансе жуте - најсветлију на врху, тамнију на дну и задржите ону која је још тамнија за сенку.

2. Икона ћаскања

У оригиналној икони имамо мало ефекта сенке у простору између два мехурића и ту ћете створити сенку.

У доњем облику одаберите тачку под правим углом у простору и померите је нагоре док не формирате прави угао у горњем левом углу.

Дупликат горњег облачића и померите копију надоле и удесно. Изаберите копију и облик облачића испод, помоћу Патхфиндер-а направите пресек и задржите само један пресек са претходном копијом.

Сада можете да примените три нијансе плаве и на врх ставите најсветлију, једну тамнију у средину, а другу најтамнију доле.

3. Икона ознаке

Створићемо ефекат пресавијеног папира. Дуплирајте икону и уклоните два додатна савета у горњем десном углу, а затим леву страну на другој страни да бисте уклонили још два дела.

Дуплирајте преклоп на левој страни и померите га преко десне стране.

Пресеците два облика да бисте створили ефекат сенке. Затим нанесите три нијансе боје, док најтамнију остављате за сенку, другу најтамнију за најдужи комад и најсветлију за врх. ### 4. Икона заставе

Започните заокруживањем ивица, а затим уклоните подножје заставе.

Створите ефекат преклопа, нацртајте две линије које се пресецају дијагонално. Користите „Патхфиндер“, поделите облик заставе линијама и примените три нијансе зелене на заставу док основну сиву остављате.

5. Икона срца

Дупликат иконе срца.

Изолујте леву половину облика.

Нацртајте дијагоналну линију надоле од горње десне тачке.

Прекријте резултујући облик срцем, а затим га померите удесно да бисте одузели облик од сенке. Нанесите своје три нијансе ружичасте боје.

6. Икона планине

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

Направите два облика троугла од сваког врха.

Померите копију мањег удесно и извуците резултирајуће пресециште у облику сенке.

Нанесите три нијансе браон боје тако што ћете имати најсветлију леву страну, другу најсветлију за највећи троугао, а најтамнију за сенку у средини. Нанесите мали радијус на угао да бисте изравнали резултат.

7. Икона људи

Изаберите и дуплирајте доњи део особе са леве стране. Поравнајте ту копију са особом с десне стране. Сада изаберите три преклапајућа облика и примените алатку „Подели“ на табли „Патхфиндер“. Сада примените боје до краја.

8. Квадратна плутајућа икона

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

Дуплирајте горњи облик дијаманта и померите копију за 10 или 20 пиксела.

Изаберите два доња облика и на панелу „Патхфиндер“ примените алатку „Подели“.

Од резултирајућих облика, само задржите доња два дела и избришите све додатне тачке.

Завршите тако што ћете нанети три нијансе црвене док доделите најтамнију у средини.

9. Икона слова

Помоћу алата „Директни одабир“ (А) одаберите другу највишу тачку облика слова.

Додајте тачку на сегмент с десне стране помоћу алата „Оловка“.

Сада када имате додатну тачку, можете да преобликујете тај негативни простор да би изгледао попут папира тако што ћете подићи две горње тачке и померити их удесно и улево, као што је приказано.

Изаберите све и примените облик преграде на табли „Патхфиндер“. Одвојите горњи облик папира од коверте, а затим дуплирајте врх коверте на врху папира да бисте исекли облик сенке пре наношења три нијансе плаве боје.

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

Изолирајте дуплирану верзију дна торте.

Смањује ширину померањем леве и десне ивице према унутра.

Померите резултујући облик на врх оригиналне иконе и проширите највише тачке да бисте преклапали облик мраза.

Направите поделу свих преклапајућих облика помоћу „Проналазача путева“ и уклоните додатне тачке поред уске основе торте коју сте раније креирали.

Завршите своју торту наношењем светло наранџасте боје на мраз и свећу, тамније нијансе у основи, па чак и тамније наранџасте за облик пламена и сенку ивице.

Побољшајте изглед вашег скупа икона

Стварање икона у стилу Материјал може се постићи једноставношћу. Потребна вам је само добра комбинација промишљених геометријских облика, богатих тонова боја и ефеката сенки.

Добра вест је да не морате да креирате све иконе испочетка, као што смо то урадили у овом упутству. Можете почети од бесплатних, постојећих равних икона и применити једноставне технике које сте управо научили.

Волео бих да видим шта ви стварате. Слободно делите своје коментаре и прилагођене иконе.