Иконки являются важной частью любой системы дизайна или истории продукта. Иконки помогают нам быстро ориентироваться. Они независимы от языка. И самое приятное: они очень маленькие, поэтому они не занимают много места. Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов.
Они являются основным блоком иллюстративного контента, также являются высокотехнологичными. Существует не так много людей, которые любят создавать иконки, и еще меньше тех, у кого это получается. Я написал это руководство, чтобы помочь вам стать одним из тех людей. Независимо от того, являетесь ли вы экспертом по системам проектирования, иллюстратором или дизайнером продукта, это руководство поможет вам узнать, как создавать иконки, связывать их с вашим брендом и как внедрить их в вашу систему дизайна. Давайте начнем с основ.
Основные элементы значков
Размер
Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями.
Figma. Как рисовать иконки. Гайдлайны, теория и практика.
Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32. Выберите общий размер для создания всех ваших иконок, а затем предоставьте им возможность масштабироваться до других размеров, которые могут понадобиться другим дизайнерам. Вы же не хотите создавать одну и ту же иконку снова и снова, только в разных размерах.
Когда вам понадобится комплексность глифа, именно тогда вы захотите добавлять другие размеры. У вас может быть значок базового продукта в 24px, а у маркетинговых значков — 80px из-за огромной разницы в использовании. Вы захотите добавить больше деталей для больших размеров.
Значок магазина в размерах 24×24, 40×40 и 80×80 Когда создается одна и та же иконка разных размеров, я предпочитаю начинать с самого большого размера и идти на уменьшение. Мне гораздо проще удалять детали и упрощать, чем добавлять по мере роста. Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.
Цвет
Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.
Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.
Сетки
Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически).
Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь. Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше.
Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне. Слева: объекты на пиксельной сетке Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma. Прекрасно! Теперь, когда вы освоили пиксельную сетку, вы захотите узнать об оптической сетке.
Оптическая сетка помогает нам определить, где находится центр масс значка, а также насколько он воспринимается человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте они были одинакового размера.
При построении моей оптической сетки, я предпочитаю делать отступы по краю, которые равны ширине моего штриха, или, возможно, в два раза шире, если я использую штрих в 1px. В приведенных ниже примерах вы можете видеть, как разные формы подходят к разным краям сетки. Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально. Доминирующий объект (прямоугольник) находится в центре Если вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди.
Штрихи и заливки
Помните, когда я сказал, что последовательность является ключевым моментом? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, где одна закрашена, а у другой выполнен только контур. Очень важно убедиться, что все ваши иконки оформлены одинаково.
Например, у вас могут быть варианты применения заливки, чтобы показать, что что-то выделено, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант. Как правило, заполненные значки имеют более высокий уровень узнаваемости. Значки выполненные лишь с помощью контура дают вам прекрасную возможность создавать крошечные детали.
При выборе того, какой стиль является более подходящим, вы также должны учитывать общий вид своего бренда. Если вы собираетесь создавать штриховые иконки, все штрихи должны быть одинаковой ширины. Я также рекомендую, чтобы расстояние между штрихами не было меньше, чем ширина вашего штриха.
Расстояние между штрихами должно по возможности быть равным ширине штриха Возможно, у вас есть набор иконок, который соответствует одному стилю, но не другому. При создании закрашенных версий контурных значков вы захотите посмотреть, как можно упростить линейную работу. В идеале закрашенные значки напоминают тени, а не перевернутые линии.
Создание контурных версий закрашенных значков включает в себя определение того, какую ширину контура вы можете использовать в этом пространстве и какие детали вы можете добавить, сохраняя при этом четкость. Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.
Выбор стиля
- Uber
- Apple
- Airbnb
- Square
Рисование значков
Геометрические фигуры
Если только я не создаю очень естественный, органичный стиль значков, то мне нравится начинать с основных форм, для создания формы моих иконок. Прямоугольники, квадраты и круги — отличные стартовые точки для создания более изящных значков.
Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).
При рисовании геометрических форм, если вам нужно создать сложные многоугольники, вы можете начать с квадрата или прямоугольника или использовать инструмент «Перо» для перехода от точки к пикселю. При этом очень важно иметь четкую сетку, чтобы вы могли видеть, куда направляются эти точки.
Когда вам нужно нарисовать угловые геометрические фигуры, я не рекомендую просто использовать прямоугольник и вращать его. Вместо этого используйте пиксельную сетку, чтобы нарисовать ваши прямоугольники под углом
Слева: повернутый прямоугольник (точки не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает направление ваших точек к сетке).
Естественные формы
Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса. Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.
Углы
Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.
Угловой радиус
При использовании этого для округления квадратов и прямоугольников, вы хотите убедиться, что все ваши углы имеют одинаковый радиус. При создании концентрических фигур вам необходимо отрегулировать радиусы углов, чтобы создать идеальные концентрические формы. Внутренние формы будут иметь меньший радиус, чем внешние формы.
Отличный образец концентрических радиусов в этом портфеле
Любая промежуточная точка на пути может быть сглажена, с помощью свойства Угловой радиус в Инспекторе. Если вы выбираете весь путь, то он округляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.
Закрашенные объекты
Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.
Метафора
Метафоры важны в значках-мы используем их постоянно, даже не задумываясь. Значок дома обозначает домашнюю страницу. Насекомое означает ошибку. При масштабировании значков для создания уменьшенных версий, я предпочитаю помнить про метафору(смысл), которую я использую для передачи смысла значка.
Используйте общую метафору(смысл заложенный в вашем изображении), чтобы продолжить в меньшем размере, а не просто сделать точную иконку в меньшем масштабе.
Когда общий контент выглядит не так как нужно, определите, какие детали наиболее важны, а затем удалите лишние.
Если вы ограничены пространством, вы можете упростить важные детали, а не удалять их.
Перспектива
Использование перспективы в иконках не всегда просто — их размер усложняет задачу, поскольку рисование в перспективе занимает дополнительное пространство. Если вы хотите использовать перспективу, либо используйте ее масштабно и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, в случае, когда это помогает повысить четкость и ясность.
Верхний ряд: плоский. Нижний ряд: в перспективе.
Шрифт (избегайте!)
По возможности избегайте использование надписей для значков. Значки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его самостоятельно, а не используйте гарнитуру шрифта.
Подсказки
Операции Boolean
Логические операции объединяют любой набор слоев фигур с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение. Этот инструмент актуален и потрясающий. Это отличный способ сделать ваши иконки более изменяемыми. Вместо того, чтобы обрезать контуры, вы можете использовать функцию объединения. Не хотите искать пересечение фигур вручную?
Попробуйте вычесть.
Группы Boolean обрабатываются как единый слой формы и имеют общие свойства заливки и обводки и могут комбинироваться с другими булевыми группами посредством последующих логических операций.
Объединение: объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из совокупности путей ее подслоев минус любые сегменты, которые перекрываются. Затем этот штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
Вычитание: противоположно объединению. Вычитание удаляет область фигуры или набора фигур из базовой фигуры. Только нижний слой формы является сплошным, остальные вычитаются из него.
Пересечение: создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
Исключение: является противоположностью пересечения. Исключение показывает только те области его подслоев, которые не перекрываются.
Когда я закончу со значками, мне бы хотелось создавать для них стили, так что, когда будущие дизайнеры корректируют цвет, легко вместо этого просто изменить одно свойство (заливку), вместо заливок и штрихов.
Сеть вектор
Векторные сети являются одной из самых уникальных функций в Figma. Большинство инструментов пера рисуют контуры в петле с определенным направлением, всегда желая восстановить соединение с их исходной точкой. Векторные сети не имеют направления и могут распадаться в разных направлениях, не требуя создания отдельного объекта пути. Сложные объекты могут быть созданы внутри одного и того же объекта и с теми же свойствами гораздо быстрее, чем они могут быть нарисованы с использованием традиционных векторных инструментов контура. Подробнее об этом можно прочитать в этой статье.
Как использовать иконки в системе дизайна
Обеспечение доступности набора значков для остальной части вашей команды — это вопрос организации, управления активами и осведомленности.
Организация
Давайте начнем с наименования файлов. Ваши иконки должны быть названы на основе того, что они показывают, а не того, что они представляют. Например, значок секундомера должен называться секундомер, а не скорость. Лампочку следует называть лампочкой, а не идеей.
Вы хотите, чтобы люди сразу поняли, что такое значок, а не то, что он передает на более концептуальном уровне. Желательны короткие названия. Когда вам нужно несколько слов, используйте тире, чтобы отделить их.
Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.
Со временем вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как и фреймы, с небольшой уловкой, которая дублирует компонент, создавая новые экземпляры, а не копии. Это означает, что вы можете иметь гигантскую библиотеку со всеми вашими значками, а когда вам понадобится ее использовать, вы создаете экземпляр из библиотеки.
Если кто-то внесет изменения в оригинал, ваши значки будут обновлены. Вам может понадобится искать эти активы, поэтому вы можете добавить информацию для поиска. Но вместо того, чтобы поместить это в имя файла, есть альтернатива. Figma имеет окно описания компонента, которое позволяет добавлять теги и ключевые слова.
Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, не делая сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!
Когда есть один и тот же значок в разных вариациях, вот как мне нравится обрабатывать их.
Различные размеры: Используйте разные страницы, так как вы редко будете переключаться напрямую с одного экземпляра на другой.
Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.
Слева: кофе / контурный. Справа: кофе / закрашенный
Скорректированные изображения: если у вас есть значок с визуальным вариантом (например, с несколькими вариантами валюты), вы также можете использовать наименование, чтобы помочь дифференцировать, используя тот же метод, что и закрашенные и контурные значки.
Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»
Управление вашими активами
Когда вы закончили работу над своими знчками, вы хотите, чтобы они были максимально чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить вашу работу (помните, наш друг Объединение?). Избегайте лишних линий или форм. Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы другой человек посмотрел на все ваши значки и дважды проверил чистоту.
Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту.
Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями).
Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере.
Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте. Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств.
Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.
Передача ваших значков в другие руки
Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт.
Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть.
Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.
Другие источники
Источник: ux.pub
Суперполезный гайд по созданию иконок для интерфейсов
Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.
37 380 просмотров
1. Используйте оптическую сетку
Значок интерфейса может быть близок к одному из основных форм: прямоугольник, ромб, круг, треугольник, квадрат. Размытие показывает, что они имеют равный визуальный вес, потому что они превращаются в более или менее одинаковые капли.
В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.
Чем компактнее значок, тем меньше места ему нужно. Чем более острые края или мелкие детали имеют значок, тем больше занимает пространство для художественной области.
Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.
2. Учтите пиксельную сетку
Чтобы сделать иконки острыми на экранах с сеткой, придерживайтесь пикселей и отдавайте предпочтение двухпиксельным границам для значков строк. Центрированные двухпиксельные границы обеспечивают достаточную толщину и чёткие силуэты.
Если вы выбираете однопиксельные границы для значков, они должны быть либо внешними, либо внутренними, но не центрированными.
Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.
Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.
3. Сохраняйте определённый уровень детализации
Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.
Когда значки имеют разные уровни детализации, более резкие привлекают больше внимания пользователя и кажутся визуально более тяжёлыми.
4. Контролируйте минимальный размер зазора
Пространство между соседними элементами значка не должно быть слишком маленьким или непоследовательным во всем наборе. Определите минимальный зазор и держите его повсюду, чтобы избежать «прилипания» контура.
Для значков линий лучше сделать минимальное пространство, равное толщине линии. Линии должны быть либо чётко раздельными либо точно связанными.
5. Удалите повторяющиеся части
В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.
Это правило также относится к различным дополнениям — рамкам, фону — вокруг иконки. Если они не помогают читать значок, уберите их.
6. Выберите определённый стиль и следуйте ему
Не смешивайте отображаемый объём с фронтальным изображением в пределах одного набора иконок. Гармония стилей поможет пользователям распознавать значки и понимать, что они имеют одинаковое значение.
Этот же принцип работает с иконками строк и заполненными значками. Если вы их смешиваете, люди могут подумать, что они имеют разное значение или статус. Конечно, если вы этого не хотите. Например, заполненный значок предназначен для команды ключа, а значки строк — для других команд.
Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.
7. Используйте двухмерную систему калибровки
Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.
8. Следите, чтобы силуэты были чистыми и точными
Перфекционизм — не панацея. Никому не нужны пиксельные совершенные линии ради идеальных линий. Но это важно для правильного, а не искажённого отображения значков в конечном продукте. Имейте в виду минимальное необходимое количество анкеров и отсутствие зазоров между соседними элементами.
Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.
9. Очистка SVG от мусора
Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.
Смотрите, в Sketch всё выглядит хорошо.
Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.
Вы можете удалить этот мусор и пересохранить иконку.
Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.
Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.
Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.
Маскоты и иллюстрации. Если в вашем интерфейсе есть талисман или иллюстрация, этот тип графики должен быть эмоциональным. В таком случае сложно представить, как дизайнер может изображать персонажа ограниченным выбором форм и придерживаться сетки.
Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.
Источник: vc.ru
Разбор кейса: создаем иконки в Figma
Иконки — графические элементы, которые помогают нашим пользователям быстро ориентироваться в интерфейсе и воспринимать текстовый контент. Их можно рисовать в разных программах, в том числе в Figma.
Иконки — графические представления функций, концепций, конкретных объектов и самого приложения в интерфейсах. Они служат визуальным ориентиром для пользователей и помогают им интуитивно перемещаться по страницам. Если иконки нарисованы надлежащим образом, они даже могут заменить отдельные фразы и слова (не забывайте, мы воспринимаем визуальные образы быстрее, чем текст). Узнаваемые понятные иконки — залог простого и удобного интерфейса.
Все это хорошо, но покажите мне, как это сделать
Неправильных ответов на этот вопрос не существует. Все зависит от процесса, которому вы следуете, и методов, которые вы используете. Существует множество различных способов создания иконок. Я расскажу о том, как я создавала иконки для приложения, предназначенного для учета расходов.
Недавно мы изменили дизайн и интерфейс нашего мобильного приложения. Одним из этапов редизайна было создание новой библиотеки иконок. Мы решили создать ее в Figma, чтобы использовать при проектировании мобильных и веб-приложений в дальнейшем.
Размер
Первый шаг — определение размеров иконки в пикселях. Мы можем создавать иконки в разных размерах:
- Маленькие — 12×12 px, 16×16 px, 24×24 px, 32×32 px, 48×48 px
- Средние — 64×64 px, 96×96 px, 128 x 128 px, 256 x 256 px
Все зависит от платформы, для которой разрабатывается иконка.
Сетки
Начните с выбора сетки. Это поможет установить четкие правила для последовательного, но гибкого позиционирования графических элементов.
KeyLine shapes (базовые формы) необходимы для поддержания единообразных визуальных пропорций во всех иконках.
Квадраты, круги, прямоугольники и диагонали помогут нам создать более согласованные иконки за счет единообразного размещения этих форм внутри них.
Активная область (live area) — это пространство, в котором находятся основные части иконки. При необходимости элементы могут заходить в область обрезки (trim area), но не должны выходить за ее пределы.
Тип иконки
После создания сетки мы должны решить, какой тип иконки нам нужен.
Существуют различные типы иконок:
- Контурные (линейные) иконки — состоят исключительно из обводки.
- Иконки с заливкой — здесь есть как обводка, так и заливка.
- Двухцветные контурные иконки — состоят из обводки двух цветов.
- Сочетание контурных иконок и иконок с заливкой — эти типы иконок могут сосуществовать в рамках одного продукта. Обычно они показывают состояние объекта — является он активным или нет.
Поскольку наша цель состояла в том, чтобы создать четкие и понятные иконки, я решила нарисовать их в контурном стиле, а также добавить несколько значков с заливкой для отображения активного состояния.
Давайте создадим несколько иконок!
Вы можете рисовать иконки разными способами. Я расскажу вам о том, какие шаги позволили мне создать отличную библиотеку иконок, которой я горжусь .
Обводка 1px — 1.5px — 2px
- Создайте нужную форму. Отрегулируйте размер иконки в соответствии с вашими требованиями.
- После того как иконка готова, выберите в панели слоев ее фрейм и кликните по нему правой кнопкой мыши. На экране появится выпадающее меню. В этом меню выберите Outline Stroke. Откройте его еще раз и выберите Flatten. Эти действия позволят превратить обводку в объекты и сделать из них единую форму.
- Измените размер и положение иконки в панели справа — округлите все дробные значения.
- Чтобы сделать иконку масштабируемой, выберите в панели Привязки (Constraints) параметр Scale как по горизонтали, так и по вертикали.
- Создайте компонент иконки и измените цвет в соответствии с вашими требованиями.
- Вуаля! Ваша иконка готова
Вот туториал по созданию иконки шестеренки (Настройки), которая обычно вызывает у дизайнеров затруднения. Мне самой потребовалось некоторое время, чтобы разобраться, но теперь я могу создать такую иконку за пару минут.
Источник: www.uprock.ru