Create Icons

Вот как создать иконку с нуля: пошаговое руководство

Значки: крошечные маленькие символы, которые говорят так много. В наши дни они повсюду и играют огромную роль в успехе пользовательских интерфейсов (UI). Независимо от того, являетесь ли вы начинающим дизайнером пользовательского интерфейса или UX-дизайнером, который хочет освежить некоторые навыки визуального дизайна, процесс разработки значков имеет решающее значение для вашего инструментария.

Когда дело доходит до создания нового набора иконок с нуля для нового проекта, очень важно выделить этому процессу достаточно времени. Также следует помнить о некоторых рекомендациях, которые помогут сделать ваши иконки узнаваемыми и удобными для пользователя.

В этом руководстве мы рассмотрим процесс создания значков шаг за шагом. Во-первых, я покажу вам семь ключевых соображений, которые следует учитывать при разработке иконок с нуля. Затем мы применим нашу теорию на практике, разработав значок камеры от начала до конца.

Этот пост разделен на два раздела:

1. Семь золотых правил для процесса создания иконки

2. Как создать иконку с нуля (шаг за шагом)

Готовы? Давайте погрузимся!

1. Процесс создания иконки: 7 золотых правил

В этом разделе мы рассмотрим семь ключевых соображений, которые следует учитывать при разработке иконок.

1. Обратите внимание на сетку

Многие вещи в цифровом дизайне регулируются сеткой. Иконки ничем не отличаются. При разработке иконок вам нужно обратить пристальное внимание на сетку пикселей и то, как ваша иконка вписывается в нее.Самый простой способ убедиться, что ваши иконки плотно вписываются в пиксельную сетку, - придерживаться целых чисел. Избегайте десятичных знаков любой ценой — эти ребята дают размытые края. Давайте посмотрим, как это выглядит на практике.При разработке иконок вам нужно обратить пристальное внимание на сетку пикселей и то, как ваша иконка вписывается в нее.

Самый простой способ убедиться, что ваши значки плотно вписываются в пиксельную сетку, - это придерживаться целых чисел. Избегайте десятичных знаков любой ценой — эти ребята дают размытые края. Давайте посмотрим, как это выглядит на практике.

Ниже я нарисовал простой значок дома и оставил пиксельную сетку включенной. Слева вы увидите иконку, состоящую из штрихов, которые идеально вписываются в пиксельную сетку. Справа обводка немного отклоняется. Вы можете определить это, посмотрев на линии, составляющие пиксельную сетку, — они проходят прямо через обводку.

Два значка дома, нарисованные на сетке

Теперь давайте на секунду взглянем на диагонали, образующие крышу. Они не идеально вписываются в сетку. Мы не смогли бы подогнать их, потому что сетка состоит из вертикальных и горизонтальных линий, никаких диагоналей. В этих случаях мы следим за тем, чтобы начальная и конечная точки, составляющие диагональ, располагались на сетке.

2. Сначала осмотритесь

Заманчиво захотеть создать совершенно новую, оригинальную иконку или набор. В конце концов, мы креативщики! Однако у нас есть стандарты, которых мы хотим придерживаться. Мы познакомились со специальными значками, обозначающими стандартную функциональность.

Рассмотрим маленькое увеличительное стекло, которое мы видим повсюду, с надписью “поиск”. Увеличительные стекла - не единственный предмет, на котором может быть написано “поиск”. Однако мы использовали их так часто, что теперь они стали стандартным значком поиска. Использование другой иконки требует от пользователя изучения чего-то нового, что в результате замедляет его работу. Это не очень способствует плавному взаимодействию с пользователем!

Прежде чем создавать свою иконку, оглянитесь вокруг, чтобы определить любые стандарты, которые вам, возможно, потребуется учитывать при работе. Означает ли это, что нет места для творческой свободы? К счастью, это не так! Если иконка не соответствует функциональности, регулируемой стандартами, мы можем дать волю нашему творчеству. Если это так, мы все равно можем придать ей творческий оттенок. Пока иконка и ее функция по-прежнему узнаваемы, можно добавить свой собственный дизайнерский стиль!

3. Не увлекайтесь деталями

Мы часто размещаем иконки в крошечных местах, например, на панели вкладок на iPhone. По мере того как вещи становятся маленькими, слишком много деталей начинает теряться.

Когда вы разрабатываете дизайн, стратегически подходите к тому, какие детали вы хотите включить. Не обращайте внимания на мелкие детали и убедитесь, что ваши значки читаются четко даже при небольших размерах.

4. Будьте последовательны

Когда мы создаем набор иконок, они должны чувствовать себя как семья. Не все они будут выглядеть одинаково, но будут иметь схожие визуальные атрибуты, благодаря чему они будут чувствовать себя связанными.

В процессе проектирования выбирайте последовательный стиль. Если, например, вы использовали закругленные углы и концы в одном значке, убедитесь, что вы сделали это для всех остальных. Стиль, размеры и уровень детализации должны быть одинаковыми. Это способствует созданию целостного визуального языка — важнейшей части брендинга!

5. Обратите внимание на пробел

Будьте осторожны с мелкими деталями или элементами, которые расположены слишком близко друг к другу. При небольшом размере элементы, которые не расположены должным образом, могут быть трудными для чтения и начнут терять смысл.

6. Протестируйте свою работу

Лучший способ убедиться, что ваши иконки четко и быстро взаимодействуют с пользователями, - это протестировать их. После того, как вы закончили создавать свои иконки, рекомендуется выполнить быстрый тест.

Покажите свои иконки другу или кому-то еще из вашей команды. Попросите их рассказать вам первое, что приходит на ум, когда они их видят. Если она соответствует тому, что вы намеревались сообщить, вы в хорошей форме!

7. Создавайте с помощью простых форм

Все можно разбить на основные формы. Помните нашу домашнюю иконку выше? Мы разработали с двумя прямоугольниками и треугольником.

После того как вы определили, каким будет ваш значок, попробуйте разбить его на простые формы. Это лучший способ начать создавать и упрощать свои иконки.

2. Как создать иконку с нуля: шаг за шагом

Мы рассмотрели, что следует учитывать при разработке иконки. А теперь давайте применим это на практике. Для этого мы пройдем через процесс создания простого значка камеры.

Я буду использовать Sketch. Однако вы можете повторить следующие шаги в другом программном обеспечении для проектирования, например Figma. Если вы не можете определиться с инструментом, ознакомьтесь с этим сравнением Figma и Sketch.

Шаг 1: Познакомьтесь с вашим предметом

Для начала давайте познакомимся с тем, как выглядят камеры. Самый простой способ сделать это - погуглить, что вы собираетесь разрабатывать. Я погуглил “камера” и получил следующие результаты:

Результаты поиска изображений Google по поисковому запросу "камера"

Мои результаты показывают множество камер, все разных форм и размеров. Однако у них есть несколько общих определяющих характеристик:

1. Большая линза в середине корпуса

2. Вспышка

3. Кнопка, чтобы позволить мне сделать снимок

Мы постараемся включить эти три характеристики в наш дизайн, поскольку они сделают значок нашей камеры легко узнаваемым для широкой аудитории.

Шаг 2: Разбейте его на части

Далее мы начнем искать основные формы. Есть ли какие-нибудь круги, квадраты или прямоугольники, которые мы могли бы использовать для построения? Просмотрите несколько эскизов и итераций, чтобы помочь вам определить их.

Я нашел следующее:

1. Корпус камеры может быть выполнен в виде закругленного прямоугольника.

2. Объектив и вспышку можно воссоздать с помощью кругов.

3. Кнопка может быть прямоугольником.

Это будут наши строительные блоки.

Шаг 3: Начните создавать!

Со всей этой информацией мы готовы перейти к компьютеру. Начните с создания монтажной области размером 24x24 пикселей, назовите ее “Значок камеры” и включите пиксельную сетку. Ваше рабочее пространство должно выглядеть примерно так:

Пустая монтажная панель с линиями сетки в Sketch

Начните рисовать на ней основные формы, которые составляют три определяющие характеристики, которые мы определили ранее. Убедитесь, что все фигуры плотно прилегают к пиксельной сетке, как мы делали в примере ниже.

Базовый значок камеры, созданный с помощью Sketch

Если ваши пиксели не привязаны к сетке, взгляните на настройки границ. Убедитесь, что ваши границы установлены снаружи или внутри фигуры, а не по центру. Если вы установите границу в центр, вы рискуете получить элементы за пределами пиксельной сетки.

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

Шаг 4: Протестируйте!

Чтобы убедиться, что наша работа читается четко, мы захотим ее протестировать. Поделитесь своей работой с коллегой или другом. Спросите их, что они видят. Они сразу распознали ваш значок как камеру, или вы не совсем там?

Шаг 5: Приведение в порядок

Прежде чем завершить создание иконки, дважды проверьте наличие десятичных знаков. Посмотрите на цифры в инспекторе и убедитесь, что все они целые.

Шаг 6: Экспорт

Сохраните свою работу и экспортируйте ее, чтобы поделиться ею со всем миром!

Мы разработали довольно простую иконку камеры с минимальными деталями и штрихами. Вы всегда можете усложнить свой дизайн и стиль. Однако процесс и ключевые моменты, о которых следует помнить, всегда должны быть одинаковыми.

Удачного проектирования!