Поетапне керівництво по створенню іконок

image

Стаття була опублікована на smashingmagazine автор статті Scott Lewis.

Знайти недорогі якісно зроблені іконки і векторні зображення не становить праці – саме для цього є такі веб-сайти, як Iconfinder (де працює автор цієї статті). У розпорядженні дизайнерів тисячі наборів іконок преміум класу, і сотні наборів доступні для безкоштовного скачування.

У даній статті наводиться керівництво по дизайну векторних іконок, яке включає в себе шість етапів. Ми розглянемо ці етапи після того, як розберемо основні принципи успішного дизайну іконок. Ці принципи добре відомі і докладно розглянуто в таких роботах, як Керівництво по дизайну іконок Джона Хікса, а також у керівництві від Google Матеріальний дизайн в розробці системних іконок. Шість етапів, які ми будемо розглядати в цій статті, повинні сприйматися, як рекомендації, а не як догми. Здатність відчувати, де потрібно слідувати правилам, а коли їх краще порушити – це важлива якість, яка повинна розвинути в собі кожен хороший дизайнер, і ми наочно продемонструємо це.



Всі етапи будуть розібрані на прикладі виправлення іконки із зображенням собаки (познайомтеся, це Коргі). Іконка була непогана, але не дотягував до наших високих стандартів. Наші фахівці дали авторові кілька простих порад, і після доопрацювання зображення було схвалено. Внизу представлені зображення Коргі до і після виправлень. Далі в статті ми детально розберемо, як відбувалася ця трансформація.

image

Зображення зліва – це оригінальний варіант. Зображення праворуч – іконка після внесення виправлень відповідно до принципів, описаних в статті.

Варто відзначити, що, не дивлячись на те, що ми говоримо про іконках для мережі інтернет, дані рекомендації застосовуються до іконок для друку. Стандартне дозвіл, який використовується для друку, становить 300 dpi, тому якщо ви дизайнер друкованих матеріалів, вам варто опустити ті розділи, де ми будемо говорити про роботу з пікселями.

Три складові ефективного дизайну іконок



Все якісно зроблені іконки об'єднує єдність трьох складових ефективного дизайну: форма, естетична цілісність і впізнаваність. Коли ви приступаєте до дизайну нового набору іконок, необхідно розглядати всі три складові, йдучи від загального (форма) до приватного (впізнавання). Навіть якщо ви розробляєте всього одну іконку, ці три неодмінних атрибута раніше застосовні.

Безумовно, ефективний дизайн не обмежується цими трьома поняттями, однак вони ідеально підходять для того, щоб почати, і виписуються в рамки однієї статті.

Форма



Форма – це структура, на основі якої виконаний дизайн іконки. Якщо ви опустіть деталі і обведе основні фігури, складові іконку, що це буде: квадрат, коло, прямокутник, трикутник, або більш плавні обриси? Основні геометричні фігури, такі як коло, квадрат і трикутник є стійкою візуально врівноваженою базою для дизайну іконок. У нашому прикладі, голова собаки складається з двох трикутників і двох еліпсів. Тут можна провести аналогію з кресленням – так само, як при виконанні креслення, дизайнер починає з великих основних форм, і потім опрацьовує деталі, додаючи рівно стільки, скільки необхідно й достатньо для передачі своєї ідеї.

image

Червоними лініями окреслено основні геометричні фігури, які утворюють форму іконки

Естетична цілісність



Під естетичною цілісністю розуміється набір елементів, які повторюються серед іконок з одного набору. Це можуть бути округлені або квадратні кути, а також їх розміри (наприклад, 2 пікселя, 4 пікселя і т. д.); товщина лінії; (наприклад, 2 пікселя, 4 пікселя і т. д.); стиль (плоскі, контурні, залиті кольором, гліф); колірна палітра і так далі. Естетична цілісність набору іконок – це добре простежується послідовність різних елементів і дизайнерських прийомів, які дозволяють сприймати всі іконки, як єдине ціле. У нашому прикладі з собакою Коргі серед таких елементів можна назвати однаковий радіус скруглення, очі однакового розміру і форми, а також ніс у формі сердечка.

image

Ці три іконки можна назвати естетично цілісними, тому що в них використані одні й ті ж елементи і прийоми.

Впізнаваність



Впізнаваність – це похідна від сенсу іконки, тобто того, що робить її унікальною. Виконує іконка своє призначення, залежить від того, наскільки добре зрозуміло користувачеві, який об'єкт, ідею або дія ця іконка означає. Впізнаваність може досягатися відображенням деяких якостей, характерних для позначуваного предмета, або використанням будь-якого унікального елемента, наприклад, як ніс Коргі. Пам'ятайте, впізнаваність відноситься не тільки до розуміння того, який предмет, ідея або дію представляється вашій іконкою; це властивість, що виділяє ваш набір іконок. У цьому сенсі поняття впізнаваності та естетичної цілісності перетинаються. На картинках, наведених нижче, завдяки відмінних рис породи ми дізнаємося в собаках Коргі і Хаскі, і ще ми бачимо, що вони є частиною одного набору іконок – завдяки схожості дизайну і використовуваних елементів.

image

Індивідуальні якості кожної собаки роблять кожну з них впізнаваною, тоді як схожий дизайн і використовувані елементи говорять про те, що вони є частиною одного набору.

Ітака, ми розібрали три основних складових ефективного дизайну іконок. Тепер докладно розглянемо, як за шість етапів втілити ці три складові в життя.

Шість етапів



Завжди починайте з сітки



Переваги сіток різного розміру – це предмет окремої розмови; ми будемо використовувати сітку 32х32 пікселя. На нашій сітці також розташовуються допоміжні лінії, які допоможуть нам створювати основну форму кожної іконки.

image

Отже, у нас є 32-піксельна сітка з кордонами шириною в 2 пікселя, які ми залишимо незаповненими. Це простір ми називаємо вільною зоною, і вона служить для додання іконці деякого простору. Не слід розташовувати елементи в межах цієї зони, якщо тільки це не є абсолютно неминучим.

Форма іконки починається з основної фігури й орієнтації. Якщо ви накресліть лінію по зовнішнім кордонам іконки, як рамку, вона буде мати форму квадрата, кола, трикутника або прямокутника.

Іконки круглої форми розташовуються по центру сітки і, як правило, стосуються всіх чотирьох країв, не заходячи у вільну зону. Найпоширенішою причиною для порушення недоторканності вільної зони є необхідність розміщення за межами кола якогось елемента, який необхідний для підтримки цілісності дизайну, як це показано на зображенні нижче.

image

Вирівнювання круглої іконки щодо сітки та основних ліній

Квадратні іконки також вирівнюються по центру сітки, але, як правило, не доходять до меж робочої зони. Для підтримання одноманітності з круглими і трикутними іконками, більшість прямокутних і квадратних іконок вирівнюються по основній лінії в середині (помаранчева область на малюнку нижче). Рішення, за якою основної лінії слід вирівнювати іконку, приймається виходячи з її зовнішнього вигляду, а почуття, який вибрати розмір в кожному окремому випадку, розвивається практикою. Три концентричних квадрата, про яких йшла мова вище, позначені на малюнку жовтим, оранжевим і світло-зеленим кольором.

image

Вирівнювання і вибір розміру круглої і квадратної іконки щодо сітки

На наступних малюнках всередині сітки 32х32 пікселя ви помітите прямокутники розміром 20х28 пікселів, які зорієнтовані горизонтально або вертикально – залежно від дизайну іконки.

image

Вирівнювання і вибір розміру вертикально і горизонтально орієнтованих іконок

Діагонально орієнтовані іконки вирівнюються по колу, вписаної в робочу область. Зверніть увагу, що крайні точки пили тільки приблизно припадають на точки по колу; більша точність тут не потрібно.

image

Вирівнювання і вибір розміру діагонально орієнтованих іконок

Пам'ятайте, що ви не зобов'язані точно дотримуватися описуване розташування іконки щодо сітки і допоміжних ліній. Сітка – це лише допоміжний інструмент; якщо перед вами стоїть вибір, зробити щось по-справжньому оригінальне, чи залишитися в рамках правил, правил можна знехтувати. Однак це має бути обдуманий крок. Як сказав Хеммо де Йонг, відомий під псевдонімом Dutch Icon:

«Індивідуальність іконки переважує необхідність дотримуватися одноманітності набору іконок».

Почніть з простих геометричних форм



Почніть дизайн своєї іконки з грубого начерку основних форм, використовуючи круги, трикутники і прямокутники. Навіть якщо ви плануєте створити іконку з плавними природними формами, почніть з інструменту «Фігура» в Adobe Illustrator. Коли справа доходить до дизайну іконок, особливо це стосується малювання на екрані іконок невеликого розміру, малювання вручну неминуче спричиняє появу невеликих диспропорцій по краях, і від цього зовнішній вигляд іконки сильно програє. Якщо почати з простих геометричних форм, це допоможе отримати чіткі однакові крайки (особливо в місцях закруглення), а також спростить вибір розміру різних елементів і їх орієнтування відносно сітки та основних форм.

image

Основа іконки Коргі – це прості геометричні фігури: два трикутники і два еліпса

Все полагоджено цифр: кромки, лінії, кути і криві



При виконанні кромок, заокруглень та кутів необхідно прагнути до математичної точності, але не до такої міри, щоб дизайн виглядав нудним і надмірно «механічним». Іншими словами, не варто сподіватися на око; витримуйте точні розміри, тому що не однакове виконання даних елементів негативно позначається на якості іконки.

Кути



У більшості випадків можна порадити використовувати кути 45°, або кратні числу. Згладжування нерівностей при даному значенні кута проводиться рівномірно (активні пікселі добре прилягають один до одного), і результат виходить чітким і лаконічним. Крім цього, 45 градусів – це ідеальна діагональ, приємна оку. Послідовне використання такої звичної конфігурації дозволяє отримати цілісну картину, як кожної окремої іконки, так і всього набору. Якщо обраний вами дизайн вимагає порушення даного правила, краще ділити на два (22,5°; 11,25° і т. д.), або використовувати кути кратні 15°. Кожна ситуація індивідуальна і вимагає такого ж індивідуального підходу. Перевага використання кутів кратних 45° полягає в тому, що при таких значеннях виходить найкраще згладжування нерівностей при переходах.

image

Крупний план згладжування контурів під кутом 45°

Криві



Одні з найбільш кидаються в очі елементів, які можуть значно знизити якість іконки, наочно показують різницю між професіоналом і аматором – це криві. Тоді як людське око чітко вловлює найменшу невідповідність форми, наша координація не дозволяє нам досягати такої ж точності при малюванні від руки. Тому при створенні кривих рекомендується користуватися лінійкою та інструментами форми у програмі, замість того, щоб покладатися на свою руку. Коли від креслення від руки не піти, користуйтеся клавішею модифікатора обмежень (наприклад, Shift і Adobe Illustrator), або, ще краще – використовувати VectorScribe і InkScribe від Astute Graphics – дані інструменти дозволяють отримати найкращий результат при створенні кривих.

image

Лінії, намальовані від руки, виходять низької якості

У первісному варіанті Коргі добре помітні нерівності ліній, виконаних вручну; це відразу негативно позначається на всьому дизайні.

image

Ці ідеальні криві створені в Adobe Illustrator за допомогою інструменту для побудови кривих Безьє.

Кути



Найпоширенішим розміром для заокруглення кутів є 2 пікселя. Для іконки розміром 32х32 пікселя таке значення радіуса дає добре видиме скруглення, і при цьому не занадто «пом'якшує» кути (що призводить до «розмитому» увазі). Розмір радіусу закруглення залежить від характеру, який ви хочете надати своєму дизайну. Рішення про те, чи закруглені кути, ґрунтується на аналізі естетичної привабливості всього набору.

image

Точно закруглені кути

Повертаючись до нашого Когри: почавши з геометрично складно окреслених форм, ми перейшли до скруглению кутів за допомогою інструменту форми, використавши значення радіуса закруглення 2 пікселя. Зовнішній вигляд став краще.

image

Перший етап переробки Коргі

Вже проглядається основна ідея нового дизайну: округлені кути і плавні криві.

Оптимізація пікселів



Ідеальне вирівнювання по пікселях особливо важливо при роботі з іконками маленького розміру. Згладжування країв на іконках маленького розміру може призвести до появи смазанности. Місце між лініями, яке не вирівняно по сітці, згладжується і буде виглядати розмито. Вирівнювання іконки по сітці дасть чітко окреслені крайки на прямих лініях, а також додасть чіткості на кутах і кривих.

Як вже згадувалося, ідеальним є кут 45° (безумовно, після прямих ліній), тому що пікселі розташовуються відносно один одного строго по діагоналі. Те ж саме можна сказати про кути і кривих: чим математично більш точно вони виконані, тим кращий результат ви отримаєте при згладжуванні. Тут варто відзначити, що оптимізація пікселів не дає відчутного результату для великих розмірів і для дисплеїв високої роздільної здатності, таких як Retina.

Товщина ліній



Якщо говорити про товщину ліній, ідеальним значенням є 2 пікселя, але іноді краще 3 пікселя. Тут метою є забезпечити необхідну співпідпорядкованість і різноманітність, але при цьому не захопитися, щоб не порушити цілісності набору іконок. Товщина ліній понад 3 пікселів призвести до того, що набір втратить цілісність. Перевага використання ліній товщиною 2 і 4 пікселя полягає в тому, що вони легко масштабуються переходять з однієї в іншу. В більшості випадків слід уникати використання дуже тонких ліній, особливо для іконок в стилі гліф і плоскому стилі. Взагалі, якщо у ваші наміри не входить створення іконки в контурному стилі, для позначення форми слід покладатися на світло і тінь, а не на лінії.

image

Ця іконка iPhone показує приклад зваженого використання товщини ліній

Послідовно використовувати різні елементи і не зміщайте акценти в межах однієї серії іконок



Про цьому аспекті дизайну іконок Хеммо де Йонг (Dutch Icon) виголосив цілу промову на конференції Icon Salon 2015. Хеммо зі своїм партнером вже два роки займаються розробкою значків для данського уряду, і їх фірмовим стилем стало використання мітки у вигляді прорізу. Проріз присутня не на всіх іконках, але на більшості з них. Подібний акцент, застосований до всієї серії, пов'язує іконки разом і сприяє їх впізнаваності серед тисяч інших.

image

Використання загальних елементів дизайну

У нашому прикладі з собаками ми використовували один стилістичний елемент у вигляді носа у формі сердечка. Цей елемент не тільки пов'язує всі кахлі один з одним, але робить їх особливими, викликаючи до цим милим створінням додаткову симпатію.

image

Загальні елементи, використані для дизайну іконок з собаками

У багатьох випадках, навіть якщо іконки в межах серії сильно відрізняються один від одного зовнішнім виглядом, подібні елементи дозволяють зберегти естетичну цілісність. Це добре помітно на картинці нижче: ми створили ті ж іконки собак в стилі гліф, але вони як і раніше виглядають цілісно і взаємопов'язано.

image

Використання однакових елементів в іншому стилі

Помірне використання деталей і декоративних



Іконка повинна чітко передавати зміст об'єкта, ідеї чи дії. Надмірна кількість дрібних деталей роблять іконку не такий інформативною, особливо коли вона невеликого розміру. Кількість дрібних деталей в кожній окремій іконі також сильно впливає на естетичну цілісність і впізнаваність всієї серії. Негласне правило для визначення кількості деталей і елементів у іконі – це використання необхідного мінімуму для передачі сенсу.

image

Мінімальна кількість деталей ефективно передає зміст

У версії на малюнку вище ми вже близькі до остаточного варіанту. Чорні лінії навколо вух перетворилися на шерсть, а лінії окружності мордочки Коргі пішли, хоч і залишився натяк на них у вигляді 2-піксельної лінії над білою плямою. Ви, безсумнівно, звернули увагу, що у нас як і раніше залишилися деякі старі елементи, такі як гладкий ніс. Поговоримо про це на наступному етапі.

Зробіть іконку унікальною



Схоже, що кількість талановитих дизайнерів, які створюють високоякісні набори іконок (причому багато з них безкоштовно) постійно зростає. На жаль, багато з них надмірно покладаються на авторитет вже існуючих тенденцій, сформованих популярними дизайнерами. Як професіонали з творчим підходом, у пошуках нових ідей ми повинні звертатися до джерел за межами комп'ютерного дизайну – до архітектури, друкарні, промислового дизайну, природі й іншим областям. Багато набори іконок схожі один на одного, тому зробити свій дизайн унікальним надзвичайно важливо.

image

Унікальність дизайну Коргі складається у формі його носа

В якості останнього штриха, який надав Коргі особливий шарм, новизну і легкість, ми використовували форму носа у вигляді сердечка.

Описані етапи повинні розглядатися як рекомендації, а не обов'язкові вимоги. Не існує єдиного правильного способу створення дизайну іконок. В даній статті автори описали свій підхід і технічні прийоми, однак інші дизайнери, безсумнівно, можуть мати альтернативні варіанти. Кращий спосіб підвищити свою кваліфікацію – це ознайомитися з якомога більшою кількістю довідкових матеріалів, постійно робити замальовки (носите з собою блокнот, куди б ви не пішли), і практикуйтеся, практикуйтеся і ще раз практикуйтеся.

image

Зображення зліва – це оригінальний варіант. Зображення праворуч – іконка після внесення виправлень у відповідності з принципами, викладеними в статті.

Висновок



Ми описали фундаментальні принципи щодо створення іконок високої якості. Ці принципи є не що інше, як навички, тобто ними може опанувати кожен, якщо буде практикуватися. Пам'ятайте, що краще всього почати з загального (форма) і рухатися до приватного (впізнавання). Не забувайте про те, що необхідно дотримуватися цілісність і однаковість, як в межах однієї іконки, так і для всієї серії. Після освоєння технічних засад ви зможете направити всю свою енергію та здібності на розвиток творчого підходу і пошук унікальних рішень.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.