Создание иконки: Создание – Бесплатные иконки: образование

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Понятность, удобочитаемость, выравнивание, краткость, последовательность, индивидуальность, простота использования

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

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

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

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять.

«Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

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

Вот несколько значков, которые кажутся наиболее знакомыми – символы любви, предупреждения, музыки и направления вверх / вперед:

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

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

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

В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

Приложение Transit имеет похожую проблему. Их значок папки с зажимом для бумаг похож на пятно, потому что пространство между папкой и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

При работе с несколькими фигурами оставляйте достаточно места между ними. Обилие тонких штрихов делает иконку перегруженной и трудной для чтения.

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

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

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

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

Так лучше.

Вывод: не доверяйте цифрам, используйте глаза, чтобы проверить свою работу.

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

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

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

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

Стремление к уменьшению и упрощению в интерфейсах подчеркивает смысл и освобождает место для контента. Иконки

Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

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

Иконки приложений Apple

Последовательность

Чтобы достичь гармонии в семействе иконок, соблюдайте одни и те же стилистические правила.

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

Любая иконка имеет визуальный вес, определяемый такими параметрами, как заливка, толщина обводки, размер и форма. Чтобы добиться согласованности и последовательности эти параметры должны быть одинаковыми для всего набора иконок.

Apple недавно выпустила введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

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

Набор иконок Phosphor, проектированный автором этой статьи и созданный ее супругом, содержит более 700 последовательных иконок. Хотя каждая из них имеет различную форму, они имеют одинаковый вес и хорошо смотрятся вместе:

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

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

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

Создание набора иконок не заканчивается, когда вы нарисуете иконки. Требуется их дальнейшее тестирование. Нужно, чтобы было легко создавать новые иконки, чтобы дизайнеры могли использовать их в своих проектах (для экрана, печати и т. д.), а разработчики – кодить их.

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

Организованный

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

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

• Понятность. В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
• Характер. Будьте причудливым.
  Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

• Используйте холст 48x48px
• Используйте centered stroke 1.5px
• Используйте закругленные концы
• Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
• Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
• При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
• Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0. 5px при необходимости
• Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
• Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

• Иконки Material System
• Иконки интерфейса,иконки приложений и руководство по иконкам от IBM
• Иконки Shopify Polaris
• Иконография Atlassian

Проверенный

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

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

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

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

Набор иконок – это живое существо. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок

• Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
• Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
• Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
• Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

• Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

• С помощью приложения Nucleo, вы можете импортировать наборы иконок, просматривать, экспортировать и перетаскивать их в нужные инструменты дизайна.

---

Перевод статьи medium.com

Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

35 584 просмотров

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. Оригинал тут.

Полное руководство по иконографии

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

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

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

Основные элементы значка

Размер

Согласованность является ключом к значкам, и все ваши значки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Оттуда ваш базовый размер значка должен напрямую относиться к этому. Итак, если у вас есть сетка, основанная на 8-ках, вы бы хотели строить на 16, 24 или 32.

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

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

Значок магазина с размерами 24 x 24, 40 x 40 и 80 x 80

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

Цвет

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

Слева: это точечный рисунок. Посередине: иконка с перспективой. Справа: плоский значок.

Сетки

Сетка пикселей — это основная сетка, использующая наименьшее приращение: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете создавать другие фигуры на пиксельной сетке (и если вы используете Figma, вы уже делаете это автоматически). Вы хотите строить вещи на пиксельной сетке не только потому, что это будет лучше отображать, но и потому, что это сделает вашу жизнь проще. Равномерное размещение элементов намного проще, когда вы используете сетку. Это поможет вам оставаться в соответствии с вашим размещением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, что находится «в пикселях» и выключено.

Слева: на пикселе. Справа: выключенный пиксель.

Мне нравится строить себе сетку перед тем, как начать. Вот мои настройки в Figma.

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

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

Визуально доминирующий объект должен быть центрирован как по вертикали, так и по горизонтали.

Доминирующий объект (прямоугольник) находится в центре

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

Обводки и заливки

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

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

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

Расстояние между штрихами должно по возможности отражать толщину штриха

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

Я не рекомендую делать значки с обводкой размером менее 10 пикселей (при толщине обводки 1-2 пикселя). Их будет очень трудно разобрать.

Выбор стиля

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

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

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

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

• Uber
• Google
• Apple
• Airbnb
• Square

Рисование иконок

Геометрические фигуры

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

Эта резиновая уточка состоит из кругов (и одного прямоугольника со скругленными углами).

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

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

Слева: повернутый прямоугольник (якоря не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает совпадение точек с сеткой).

Естественные формы

Рисовать более естественные формы в Figma очень просто. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо использовать превосходный инструмент Figma для закругления углов точки. Мне нравится рисовать все точки в виде прямых линий, а затем скруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma настраиваются автоматически, вы можете перемещаться по этим точкам, и углы будут подстраиваться под вас.

Углы/Соединения

Существует несколько вариантов углов: скошенные (квадратные), скошенные и закругленные. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.

Радиус угла

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

Большой образец концентрических радиусов в этом портфеле

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

Заглушки

Заглушки могут быть круглыми или квадратными. Придерживайтесь одного варианта.

Объекты с заливкой

Если для ваших значков требуются объекты с заливкой внутри их основных форм (например, окно в доме), в идеале вам следует сохранить заштрихованные формы в заштрихованных значках. И залитые объекты залитыми значками. Когда у вас нет места для фигур с обводкой, вы хотите использовать фигуры с заливкой, которые пропорциональны вашим обводкам. Например, если у вас толщина обводки 2 пикселя, вам не нужны заполненные фигуры размером более 4×4 пикселя.

Метафора

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

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

Перспектива

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

Верхний ряд: плоский. Нижний ряд: перспектива.

Введите (избегайте!)

По возможности избегайте ввода значков. Иконки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его сами, а не используйте шрифт.

Подсказки

Логические операции

Логические операции объединяют любой набор слоев формы с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение. Этот инструмент живой и удивительный. Это отличный способ сделать ваши значки более редактируемыми. Вместо того, чтобы разрезать пути, вы можете использовать функцию объединения. Не хотите находить пересечение фигур вручную? Попробуйте вычесть.

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

• Union : Union объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из комбинации путей ее подслоев за вычетом любых перекрывающихся сегментов. Затем штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
• Вычитание : Вычитание противоположно объединению. Вычитание удаляет площадь фигуры или набора фигур из базовой фигуры. Сплошным является только нижний слой формы, остальные вычитаются из него.
• Пересечение : Пересечение создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.
• Исключить : Исключить — это противоположность пересечения. Exclude показывает только области своих подслоев, которые не перекрываются.

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

Векторная сеть

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

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

Организация

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

Для таких значков может потребоваться несколько слов, например, поварская шапка.

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

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

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

Различные размеры : Используйте разные страницы, поскольку вы редко будете переключаться напрямую с одного экземпляра на другой.

Заливка или обводка : Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать значки с заливкой или обводкой.

Слева: кофе/поглаживание. Справа: кофе/заполненный

Скорректированное изображение : Если у вас есть значок с визуальным вариантом (например, несколько вариантов валюты), вы также можете использовать название, чтобы различать его, используя тот же метод, что и для значков с заливкой и штрихами.

Первоначальный значок слева был бы «щитом». Затем слева направо: «щит/доллар», «щит/евро», «щит/фунт», «щит/иена», «щит/плюс» 9.0010 Управление вашими активами

После того, как вы закончите со своими значками, вы хотите, чтобы они были как можно более чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить себе работу (помните нашего друга Union?). Избегайте лишних линий или форм. Убедитесь, что все ваши линии попадают в кадр. Абсолютно стоит попросить другого человека просмотреть все ваши значки и дважды проверить их аккуратность.

Figma великолепна, потому что поощряет сотрудничество и прозрачность. Что касается значков, может возникнуть соблазн предоставить всем вашим дизайнерам доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять самостоятельно, когда они соответствуют стандарту. Предоставления вашим коллегам доступа к просмотру (и доступа к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, в разных цветах или с разными именами). Это часто происходит, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждой иконки в своей библиотеке. Используйте описание компонента для этих имен. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в главном. Поверьте мне, вам придется время от времени вносить изменения в эти значки, и вы не хотите делать это более чем в одном месте. Форматы файлов имеют ключевое значение, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам, не входящим в вашу команду дизайнеров или инженеров, вы, вероятно, предоставляете им файлы .png. Экспортируйте в 1-кратном, 2-кратном и 3-кратном увеличении для разных устройств. Для разработки и дизайна вы часто будете экспортировать файлы .svg, которые редактируются в программах для дизайна и рисуются в браузере с помощью кода при отображении онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится как можно более чистый код. Еще одна веская причина для выбора Figma — сверхминимальный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Прочтите эту статью, чтобы узнать больше.

Передача ваших значков в руки другим

Вы можете быть лучшим в мире дизайнером значков, но если вы не можете внедрить свои значки в свое приложение/веб-страницу/прямую почтовую программу, это не принесет никакой пользы. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственной за их внедрение в продукт. Они смогут предоставить вам информацию об инфраструктуре веб-сайта или приложения, которая будет определять некоторые из ваших вариантов, таких как вес штриха или размер. Спросите других дизайнеров, что было сделано в прошлом, чтобы убедиться, что вы не дублируете работу. Выясните у ваших PMM, какие дополнительные значки они хотели бы увидеть. Будьте дружелюбным коллегой, который просит у людей отзывов, советов и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вы не переделывали работу и не игнорировали ключевых арендаторов, уже выявленных другими людьми. А когда вы будете готовы к реализации вместе со своими разработчиками, попробуйте использовать API Figma для программного экспорта.

Другие ресурсы

• Не стесняйтесь обращаться к Бонни Кейт Вольф по адресу [email protected]
• так много способов нарисовать папку с файлами!)

Inkscape

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

Это руководство создано для Ubuntu, но работает с любой операционной системой, поддерживаемой Inkscape. В этом случае может отличаться только способ открытия Inkscape и общий внешний вид.

Создать новый файл значка 

Сначала откройте Inkscape и создайте новый файл. Нажмите на меню файлов F и выберите « N ew», а затем «icon_32x32».

Затем откроется новый пустой файл, в данном примере с сеткой:

Сетка представляет собой блочную сетку 32×32, такого же размера, как и многие значки, которые вы найдете на своем компьютере. Линии в этой сетке не отображаются при экспорте конечного изображения в файл другого типа, например JPEG или GIF. Сетка предназначена только для того, чтобы помочь вам создать квадратную иконку со стандартными размерами 32×32 пикселя. Можно добавить или удалить сетку, используя ‘V view> G rid’ меню.

Сохранить файл

Перед началом работы рекомендуется сначала сохранить файл. Несмотря на то, что содержимое файла пусто, рекомендуется всегда сохранять файл перед началом работы, чтобы вы могли легко сохранять изменения по ходу работы. Делая это, вы гарантируете себе, что ваша работа не будет потеряна, если ваш компьютер выйдет из строя или непреднамеренно выключится. Сохраните файл, нажав « F ile» и «Сохранить как…»:

Откроется диалоговое окно. Стиль вашего диалогового окна может отличаться от следующего:

 

Вы можете изменить имя файла на любое, чтобы облегчить его идентификацию (в приведенном выше примере это «drawing.svg»). Убедитесь, что при сохранении имя файла имеет в конце «.svg». Вы также можете щелкать папки на вашем компьютере, используя это диалоговое окно, пока не найдете папку, в которой вы хотите сохранить файл. Когда у вас есть правильное местоположение, нажмите «Сохранить».

Использование окна предварительного просмотра значков

Если вы собираетесь экспортировать изображение в растровую версию и использовать его по нескольким причинам, может быть важно знать, каким образом оно будет отображаться в виде значка в процессе создания. Поэтому Inkscape имеет дополнительную функцию предварительного просмотра растровых изображений. Это окно позволит вам увидеть, как будет выглядеть ваша иконка в стандартных размерах 16×16, 24×24, 32×32, 48×48 и 128×128. Находится в Меню через: View > Ico n Preview…

Начать работу

Теперь приступим к рисованию иконки. Вы можете выбрать любой из инструментов для создания форм и цветов. В настоящее время значки, которые выглядят трехмерными, очень популярны, но мы рассмотрим создание очень двухмерных значков. Итак, давайте сделаем простую иконку радио. Это будет выглядеть примерно так:

Начнем с создания фонового круга. Выберите инструмент «Круг» на панели инструментов слева от Inkscape:

. Выбрав этот инструмент, вам нужно щелкнуть в одном из углов сетки и перетащить его в диагонально противоположный угол. Может потребоваться немного практики, прежде чем вы получите это право. Конечный результат должен выглядеть примерно так:

У вас может быть темная линия вокруг внешней стороны круга. Если вы это сделаете, мы рассмотрим, как удалить это в ближайшее время. Сейчас мы изменим цвет круга на желаемый цвет. Я выберу цветовой код HTML «#ff7f00». Вы можете выбрать другой цвет. Чтобы изменить цвет круга, щелкните его правой кнопкой мыши и выберите «Заливка и обводка»:

Должно появиться следующее диалоговое окно:

Я знаю, что цветовой код HTML эквивалентен RGB. код + ‘ff’. Поэтому я добавлю «ff7f00ff» в поле RGBA внизу:

Если вы знаете код цвета HTML, добавьте его сюда. В противном случае вы можете использовать ползунки RGB для выбора цвета. Когда вы меняете значения, вы увидите, как одновременно меняется цвет круга. Если у вас была линия вокруг внешней стороны круга, когда вы его создавали, теперь вы можете удалить его, щелкнув вкладку «Stroke st y le» и установив поле «Ширина» (вверху вкладки) на 0. (ноль) пикселей. Когда вы довольны цветом круга, просто переместите диалоговое окно «Заливка и обводка» в сторону (если у вас достаточно места на экране) или закройте его. Мы будем использовать его снова чуть позже.

Мой цветной круг теперь выглядит так:

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

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

Теперь вернитесь в диалоговое окно «Заливка и обводка» и измените значение поля RGBA (на вкладке «Заливка») на «000000ff»:

Теперь квадрат должен стать черным:

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

Теперь мы хотим сделать красивые закругленные углы на черном ящике. Для этого наведите указатель мыши на маленький круглый кружок в правом верхнем углу черного ящика. Он должен стать «красным»:

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

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

Теперь нам нужна антенна в правом верхнем углу. Мы будем использовать инструмент карандаш, который вы также найдете на левой панели инструментов:

Чтобы нарисовать прямую линию, щелкните там, где вы хотите, чтобы линия начиналась, а затем щелкните еще раз, где вы хотите, чтобы она закончилась:

Сейчас мы хотим придать антенне красивый круглый наконечник, поэтому мы возвращаемся к диалоговому окну «Заливка и обводка» и смотрим на вкладку «Стиль обводки». Вы заметите здесь раздел «шапка»:

Нажмите на среднее поле в этом разделе, и ваша антенна будет мгновенно округлена:

 

Экспорт в PNG

Теперь мы экспортируем это в PNG.