Завершальна частина рекомендацій щодо того, як правильно створювати дизайн іконок.
Pixel Perfection
Використання цілих чисел для ваших фігур повинно допомогти зберегти ваші іконки в рамках пікселів. Проте завжди перевіряйте свої іконки в режимі попереднього перегляду пікселів. Важливо також окреслити всі стики і об’єднати всі фігури у кожній іконці, щоб вони були однією формою, після чого ви зможете краще зрозуміти всю форму на пікселях.
Однак! Перш ніж комбінувати свою іконку в одну форму, скопіюйте архітектуру і збережіть, можливо, вам доведеться згодом внести зміни. Набагато легше змінити будівельний блок замість остаточної структури.
Коли ви переглядаєте пікселі, переконайтеся, що ваша шкала у цілих числах і немає жодних розмитих країв. Тримайте у голові, як криві будуть виглядати піксельованими. Ви особливо нічого не покращите, просто зосередьтеся на вертикальній та горизонтальній лініях.
Масштабування
Під час збільшення значків повторно створюйте їх у великих розмірах, не масштабуйте їх. Це означає, що ви, як правило, отримаєте кращий результат і збережете пікселі.
Коли ви масштабуєте, обов’язково збільшіть або зменшіть вагу значка, відповідно, щоб він відповідав стилю. При роботі з невеликими розмірами важко домогтися досконалості пікселів, але до тих пір, поки ви будете дотримуватися цілих чисел, ви отримаєте гарний результат. Використання штрихи з найменшим розміром 2px, це дозволить зберегти пікселі цілими.
Експорт
SVG найкращий спосіб, він зберігає векторність, і в цілому набагато простіше втілюється у коді. Однак це залежить від складності, якщо іконка дуже детальна – вона може стати надто великою, що позначиться на швидкодійності. SVG також надає можливість анімувати та налаштовувати іконки. Якщо ви збираєтеся використовувати старий браузер або систему, вони, на жаль, не працюватимуть.
PNG в основному використовуються як резервні копії, оскільки вони не є векторами і можуть бути досить великими за розмірами. Ви можете змінити колір, але ви не можете анімувати їх, як SVG.
TTF – шрифти для іконок, в результаті вони можуть розглядатися як шрифт і відповідно масштабуватися, змінювати колір і т. д. Однак це зазвичай хак для Інтернету. Вони не добре дотримуються пікселів, якщо текст перемикається на дислексічний шрифт, вони взагалі втрачаються.
Тому використовуйте SVG, коли це можливо, забезпечуйте більшу гнучкість, оптимізує рендеринг і можете бути застосований на різних платформах.
Резюме
Підсумком основних ключових моментів є:
- Налаштуйте свої сітки, артбори та правила
- Подумайте про відповідний стиль, який ви хочете використовувати, і дотримуйтеся його в усьому
- Почніть створювати іконки з форм і штрихів
- Подумайте про семіотику ваших іконок, переконайтеся, що вони мають сенс
- Переконайтеся, що ваші іконки ідеальні щодо пікселів
- Нарешті експортуйте їх у будь-який формат, що найкраще підходить для вашої платформи
ДУЖЕ РАДИМО ПОЧИТАТИ:
10 БЛИСКУЧИХ принципів гарного дизайну від Дітера Рамса: перші 2
Як змінюється айдентика в епоху Zero UI?
Яким має бути ХОРОШЕ портфоліо дизайнера: роздуми засновника Behance