Ui Design

Супер простото ръководство за иконография

Средно колко време ви отнема да проектирате персонализирана икона?

Няколко минути? Десет минути? Повече време? Ами ако ви покажем как да направите 10 страхотни икони за по-малко от 10 минути?

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

Затова се заех да създам супер просто ръководство, което да ви помогне да научите основите на иконографията за по-малко от 10 минути (имам предвид това).

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

калкулатор на лихвен процент на пълен работен ден до договор

Първоначално бях вдъхновен да създам това ръководство от този GIF от Morgan Allan Knutson, показващ как да създадете икона за услуги за местоположение за няколко секунди. Намерих го за освежаващ, умен и бърз. Той демистифицира процеса на създаване на персонализирани икони и показва колко лесно може да бъде. Иконата всъщност е геометрична форма, която може да е резултат от комбинация или деформация на основни фигури, като квадрати, триъгълници или кръгове. Основно правило в дизайна на лого или икона е да улесните нещата.

Целта на тази статия е да създаде 10 икони в рамките на 10 секунди всяка, като се използват само прости форми.

Важна забележка: В тази публикация ще използваме Adobe Illustrator, но можете да получите същите резултати с помощта на Sketch или дори Figma. Всеки път, когато трябва да добавим или премахнем точка върху фигура, ще използваме „Инструмент за писалка (P)“. Избирането и преместването на точките ще се извършва с „Инструмент за директен избор (A)“.

Икона на очите

икона на окото

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

Бакшиш: Вместо да използвате бял кръг, просто извадете (с помощта на панела Pathfinder) двата кръга от кръга под всеки от тях. Той създава по-чист резултат на фона.

Икона със стрелка

икона на стрелка

Всичко зависи от това къде добавяте тези допълнителни точки по краищата на началния квадрат. Бакшиш: Като алтернатива можете просто да нарисувате тънка линия, оформена като стрелка.

Икона на батерията

икона на батерията

Използване на един квадрат с щрих и два с запълване. Просто играйте с пропорции, като същевременно включвате един запълнен квадрат във формата на хода и държите втория навън, за да оформите върха на батерията.

единство в принципите на дизайна

Бакшиш: Играйте с дебелина на хода и подложка, за да поддържате добър визуален баланс.

Икона на списък с куршуми

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

Бакшиш: Заменете квадрата с кръгове, за да създадете по-мек външен вид.

Облачна икона

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

какво прави финансовият директор

Бакшиш: Използвайте различни размери на кръговете, за да получите по-органично изглеждащ облак.

Икона за възпроизвеждане напред

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

Бакшиш: За да направите това още по-бързо, просто започнете с триъгълник вместо квадрат.

Икона на фунията

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

Бакшиш: Поставете два квадрата от край до край и просто разтегнете най-горния край хоризонтално.

Икона за възпроизвеждане / пауза

Започнете с три дълги правоъгълника паралелно. Преоформете най-широкия правоъгълник в триъгълник.

Бакшиш: Като алтернатива, просто нарисувайте един триъгълник, последван от два паралелни правоъгълника.

Икона на стрелката за позиция

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

Бакшиш: В Illustrator натискането на клавиша Shift, докато плъзгате точката, помага да запазите симетрията, като същевременно държите диагоналния ъгъл прав.

Икона за позициониране на ПИН

Избийте кръг в по-голям (с помощта на панела Pathfinder). Плъзнете най-ниската точка право надолу и изострете образувания ъгъл - превключете на „Pen Tool (P)“, след което, докато държите клавиша „Shift“, щракнете върху точката.

Бакшиш: Използвайте заоблен ъгъл на тази точка на преобръщане, за да смекчите външния вид - коригирайте стойността на „радиус на ъгъла“ в панела с опции „Трансформиране“, докато точката е избрана.

foreach _post като ключова стойност

Икона на звука

Точно като иконата на фунията, но с въртене на 90 градуса.

Бакшиш: Просто копирайте и поставете иконата на фунията и я завъртете по посока на часовниковата стрелка.

Икона на вълната

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

Бакшиш: Завършете съветите за линията за още по-плавен външен вид.

Android работи на фонова нишка

Икона ApeeScape

Това е иконата за бонус.

Начертайте квадрат с достатъчно дебел ход. С помощта на ножицата изрежете горната дясна и долната лява точка. Това ще раздели формата на две. Преместете долната половина нагоре и завъртете цялото нещо на 45 градуса обратно на часовниковата стрелка.

Бакшиш: Обърнете внимание на дебелината на линиите и бялото пространство, образувано вътре в логото.

Една икона струва 1000 думи.

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

В обобщение, 10-те основни правила на иконографията са:

Направете го символично и смислено.
Чували сте го: Нека бъде просто. Стилът не трябва да компрометира четливостта.
Бъдете умишлени и внимателни. Помислете, преди да създадете.
Уверете се, че работи в различни размери.
Имайте предвид еднообразието.
Само вектори, моля!
Използвайте цветове само когато е необходимо, и то внимателно.
Помага да се знае основната геометрия.
Помислете за „достъпност“, за да сте сигурни, че проектираната икона ще помогне на цялостния дизайн.
Иконографията е език, който трябва да бъде универсален.
Бонус: Азбуката е само набор от 26 икони.