Разбор кейса: создаем иконки в Figma
Аудио перевод статьи
Иконки — графические элементы, которые помогают нашим пользователям быстро ориентироваться в интерфейсе и воспринимать текстовый контент. Их можно рисовать в разных программах, в том числе в Figma.
Вдохновлено Material Grid and Keyline shapeИконки — графические представления функций, концепций, конкретных объектов и самого приложения в интерфейсах. Они служат визуальным ориентиром для пользователей и помогают им интуитивно перемещаться по страницам. Если иконки нарисованы надлежащим образом, они даже могут заменить отдельные фразы и слова (не забывайте, мы воспринимаем визуальные образы быстрее, чем текст). Узнаваемые понятные иконки — залог простого и удобного интерфейса.
Все это хорошо, но покажите мне, как это сделать
Неправильных ответов на этот вопрос не существует. Все зависит от процесса, которому вы следуете, и методов, которые вы используете. Существует множество различных способов создания иконок.
Я расскажу о том, как я создавала иконки для приложения, предназначенного для учета расходов.
Недавно мы изменили дизайн и интерфейс нашего мобильного приложения. Одним из этапов редизайна было создание новой библиотеки иконок. Мы решили создать ее в 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 (базовые формы) необходимы для поддержания единообразных визуальных пропорций во всех иконках.
Разница между сеткой и Keyline (Источник: Material Grid and Keyline shape)Квадраты, круги, прямоугольники и диагонали помогут нам создать более согласованные иконки за счет единообразного размещения этих форм внутри них.
Активная область (live area) — это пространство, в котором находятся основные части иконки. При необходимости элементы могут заходить в область обрезки (trim area), но не должны выходить за ее пределы.
Активная область и область обрезки (источник Material Grid and Keyline shape)Тип иконки
После создания сетки мы должны решить, какой тип иконки нам нужен.
Существуют различные типы иконок:
- Контурные (линейные) иконки — состоят исключительно из обводки.
- Иконки с заливкой — здесь есть как обводка, так и заливка.
- Двухцветные контурные иконки — состоят из обводки двух цветов.
- Сочетание контурных иконок и иконок с заливкой — эти типы иконок могут сосуществовать в рамках одного продукта.
Обычно они показывают состояние объекта — является он активным или нет.
Обычно они показывают состояние объекта — является он активным или нет.Поскольку наша цель состояла в том, чтобы создать четкие и понятные иконки, я решила нарисовать их в контурном стиле, а также добавить несколько значков с заливкой для отображения активного состояния.
Давайте создадим несколько иконок!
Вы можете рисовать иконки разными способами. Я расскажу вам о том, какие шаги позволили мне создать отличную библиотеку иконок, которой я горжусь 😎.
Создаем иконку в Figma
- Поместите сетку и ключевые формы внутрь фрейма — выберите инструмент Frame Tool / клавиша F и захватите нужную область экрана, в которой вы хотите создать иконку. Размер фрейма должен соответствовать размеру сетки.
- Создайте базовый контур иконки, ориентируясь на ключевые формы (keyline). Измените или скорректируйте форму внутри активной области. Я использую для контура обводку шириной 1,5 px (вы можете выбрать другое значение), потому что обводка шириной 1px была бы слишком тонкой, и внутри значка появилось бы много пустого пространства. Для иконок, где требуется определенный уровень детализации, ширина обводки в 2 px выглядит слишком толстой и перегруженной.
Измените или скорректируйте форму внутри активной области. Я использую для контура обводку шириной 1,5 px (вы можете выбрать другое значение), потому что обводка шириной 1px была бы слишком тонкой, и внутри значка появилось бы много пустого пространства. Для иконок, где требуется определенный уровень детализации, ширина обводки в 2 px выглядит слишком толстой и перегруженной.Обводка 1px — 1.5px — 2px
- Создайте нужную форму. Отрегулируйте размер иконки в соответствии с вашими требованиями.
- После того как иконка готова, выберите в панели слоев ее фрейм и кликните по нему правой кнопкой мыши. На экране появится выпадающее меню. В этом меню выберите Outline Stroke. Откройте его еще раз и выберите Flatten. Эти действия позволят превратить обводку в объекты и сделать из них единую форму.
- Измените размер и положение иконки в панели справа — округлите все дробные значения.
- Чтобы сделать иконку масштабируемой, выберите в панели Привязки (Constraints) параметр Scale как по горизонтали, так и по вертикали.
- Создайте компонент иконки и измените цвет в соответствии с вашими требованиями.
- Вуаля! Ваша иконка готова 😄
И последнее.
Вот туториал по созданию иконки шестеренки (Настройки), которая обычно вызывает у дизайнеров затруднения. Мне самой потребовалось некоторое время, чтобы разобраться, но теперь я могу создать такую иконку за пару минут.
Как сделать favicon-иконку для сайта
Вы здесь
Главная … Полезно для бизнеса … Как нарисовать иконку для сайта
Леонид Родинский
Копирайтер
7 January в 17:04
Категория значков для веб-ресурсов превращается в трендовое направление дизайнерской разработки. Страницы уже достаточно шаблонизированы и оставляют всё меньше места для внедрения уникальных авторских элементов.
Иконки – одно из них.
Решения для привлечения клиентов
Вам будет интересно
Наборы
В составе любого сайта существует определённое количество визуальных компонентов.
- Во-первых, фотографии – основной материал для построения картинки.
- Во-вторых, фирменная атрибутика – логотипы, эмблемы, шрифты и прочая корпоративная айдентика.
- В-третьих, анимация и видео – иллюстративные вставки в контентный ряд.
Плюсуем программные эффекты (скроллинг, модальные окна), добавляем цвет и получаем примерный перечень основных составляющих дизайна. Забыли всего один пункт – иконки.
Между прочим, на каждом сайте их по несколько десятков, обозначающих папки, телефоны, тематические разделы и коммерческие предложения. Художественное оформление маркированных списков и чек-листов – ещё одна позиция применения. В конце концов, традиционное обозначение присутствия в социальных сетях тоже не обходится без рассматриваемого элемента.
Разработка авторских коллекций таких иконок – дело непростое, затратное по времени и творческому потенциалу. Конечно, желающие могут самостоятельно экспериментировать с помощью какого-нибудь онлайн-конструктора (например, iconsflow.com) или приложения (AdobePhotoshop, Illustrator, CorelDraw). Но благоразумнее воспользоваться готовыми решениями, благо в сети они бесплатно представлены в достаточном количестве и любых изобразительных стилистиках. Другое дело – адаптировать коллекцию к нужному цветовому решению, создав структуру, гармонирующую с обликом сайта. Но эта задача решается довольно просто, при помощи коррекции оттенков, доступной новичкам в любом графическом редакторе.
Фавикон
В противовес предшествующему разделу, здесь рассматривается один-единственный элемент – небольшой значок, сопровождающий представление сайта в сниппете поисковой выдачи, на закладках браузера и в меню сохранённых страниц. Чаще всего такие иконки содержат графическую картинку или отдельную версию однобуквенного логотипа.
Процесс создания таких эмблем разбит на два сегмента.
- В первом обращаемся к бесплатным сервисам-конструкторам.
Все они несут почти одинаковую нагрузку и предлагают аналогичный функциональный набор. Различия таятся лишь в деталях – размере сохраняемого файла, встроенном графическом онлайн-редакторе, предлагаемым библиотекам изображений. Например, площадка favicon.by даёт возможность загрузить или нарисовать собственную иконку, а bestwebservice.ru ограничивается уже готовым изображением, но оперирует большим (даже слишком) перечнем размеров.
- Второй сценарий – воспользоваться приложением для создания (редактирования) графических файлов.
Существуют специализированные программы, заточенные только для фавиконов (например, FaviconCreate). Их достоинство состоит в простом интерфейсе и возможности проводить сохранение сразу в нужный формат ico. На этом привилегии заканчиваются.
Потому что потенциал разработки в AdobePhotoshopнесоизмеримо выше с единственной оговоркой – придётся установить отдельный плагин для добавления соответствующего расширения. Но учитывая возможности онлайн-конструкторов это и не требуется. Интернет-площадки легко конвертируют любой популярный jpeg илиpngв иконку.
Вообще вся тема фирменного стиля – к которому относятся и фавиконы, и наборы значков – приобрела важное звучание. Сайты и аккаунты в социальных сетях перестали заниматься простым наращиванием контентной массы, переключившись на качественные параметры. А здесь никак не обойтись без корпоративной атрибутики или знаков личного бренда. В следующей статье рассмотрим требования к логотипу на YouTube и приёмы, помогающие его создать.
Наши работы
Наша команда
Генеральный директор
Сделаем лучшее решение для привлечения клиентов из интернета, сделаем продажи!
Евгений Белоусов
Директор по продажам
Предложу варианты решения ваших проблем- вам останется лишь
выбрать!Павел Шульга
Старший специалист по контекстной рекламе
Грамотно используем Ваш рекламный бюджет. Выйдем на максимум заявок!
Евгения Лю-Ти-Фу
Руководитель PR направления
Ваш имидж в наших руках. Если вас нет в Интернете, то вас нет в бизнесе!
Диана Зайцева
UX/UI дизайнер.
«Протачиваем» Ваш ресурс для получения им продающих свойств. Захватываем клиентов для Вас!
Леонид Белкин
Менеджер проектов
Сделаем Ваш сайт продающим. Конверсия будет расти!
Дмитрий Трацевский
Руководитель разработки
Разработанные нами сайты работают как часы!
Татьяна Николаева
Менеджер проектов, переводчик
Пишем только уникальные и интересные тексты на русском и английском. Вам понравится!
Кирилл Миченус
Разработчик
Разработаем классный, продающий сайт. Внедрим интересные идеи!!
Виктор Токмачев
Менеджер по работе с иностранными клиентами
Наши идеи подходят всем — иностранные клиенты охвачены!
Татьяна Ромакина
Копирайтер
Создадим уникальные продающие статьи. Лучший контент для Вашего сайта!
Леонид Родинский
Копирайтер
Написать уникальные тексты и заголовки – этого мало.
Анастасия Бондарева
Копирайтер
Правильно написанный рекламный текст способен творить чудеса! Удивительно, но слова могут продавать! И мы Вам это докажем!
Стань одним Из нАс
Трудоустройство
Хочу работать!
org/Person»>Дмитрий Карпинский
Директор по пропаганде
Экспонента, бизнес должен и будет расти по экспоненте! Продавать, будете продавать!
org/Person»>Марина Петренко
Контент-менеджер
Раскрываем все положительные стороны Вашего бизнеса для
org/Person»>Вячеслав Киосе
Копирайтер
Текст – это не просто слова. Посетители Вашего сайта получат информацию с внятным и понятным смыслом.
Клиенты
Наши услуги
САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ
Создайте веб-значок
НАЧИНАЮЩИЙ · 5 МИН
Используйте инструменты формы в Adobe Illustrator, чтобы искусно комбинировать векторные фигуры и создавать запоминающиеся значки для вашего следующего цифрового проекта.
Для нашего примера проекта мы разрабатываем значок камеры, который будет использоваться в качестве изображения профиля в социальной сети, а также для кнопки со ссылкой на портфолио в цифровом резюме.
Настройте свой проект
Запустите Illustrator и нажмите кнопку «Создать» или нажмите «Control+N» (Windows) или «Command+N» (macOS).
Нажмите «Создать».
Рисование основных фигур
Сначала вы нарисуете корпус камеры.
Выберите инструмент «Прямоугольник» на панели «Инструменты». Нажмите и перетащите прямоугольник на монтажной области.
Нарисуйте второй, меньший прямоугольник, перекрывающий верхнюю часть большего прямоугольника, как показано на рисунке.
Вы будете использовать быстрые направляющие, чтобы расположить прямоугольники так, чтобы их центры были выровнены. Перетащите центральный виджет (круг в центре) меньшего прямоугольника на больший, пока не появится вертикальная пурпурная направляющая.
Узнайте больше об использовании быстрых направляющих в Illustrator.
Далее вы добавите вспышку.
Нажмите и удерживайте инструмент «Прямоугольник», чтобы получить доступ к другим фигурам, и выберите инструмент «Эллипс».
Нажмите и перетащите круг, пока не увидите направляющие перекрестия, указывающие на то, что вы рисуете идеально круглый круг. Отпустите курсор, когда он станет подходящего размера.
Совет : Чтобы пропорционально изменить размер круга, нажмите Shift и перетащите угловой виджет.
При необходимости перетащите центральный виджет, чтобы изменить положение круга внутри большего прямоугольника.
Теперь вы создадите форму линзы.
Выбрав инструмент «Эллипс», наведите указатель мыши на больший прямоугольник, пока не появится слово center . Нажмите Alt (Windows) или Option (macOS) и перетащите круг, нарисованный из центра. Найдите направляющие перекрестия и отпустите курсор, когда круг станет нужного размера.
Нарисуйте маленький круг сбоку. Щелкните в его центре и перетащите его на больший круг, пока не увидите слово , пересекающее или в центре 9.появляется 0048. Опустите меньший круг на место.
Комбинирование фигур
На этом этапе вы объедините прямоугольники.
Нажмите V для инструмента «Выделение». Щелкните большой прямоугольник; затем нажмите Shift и щелкните маленький прямоугольник, чтобы выбрать оба. Выберите инструмент «Создание фигур» и перетащите линию, соединяющую оба прямоугольника, как показано на рисунке.
Добавить цвет
Теперь вы примените к фигурам цвет заливки и различные атрибуты обводки.
Нажмите V, чтобы переключиться на инструмент «Выделение». Выбрав корпус камеры, щелкните образец цвета заливки в разделе «Внешний вид» на панели «Свойства». Выберите параметр «Образцы» справа и щелкните цвет на панели «Образцы». Затем щелкните образец «Обводка» и выберите «Нет», чтобы удалить обводку.
Повторите для мигающего круга: примените белую заливку и не используйте обводку.
Чтобы раскрасить линзу, сначала выберите внешний круг; затем нажмите Shift и щелкните второй круг, чтобы выбрать и его. Не применяйте заливку и белую обводку. Увеличьте Толщину обводки до 5 pt.
Завершающий штрих
Вы можете закруглить углы формы, чтобы создать другой вид.
Выберите корпус камеры. Нажмите A, чтобы переключиться на инструмент «Частичное выделение», и перетащите виджет с закругленными углами, чтобы скруглить все углы одновременно.
Сохранить для веб-вывода
Если вам нужно изменить размер значка относительно монтажной области, выберите «Выделение» > «Все», чтобы выбрать весь значок. Нажмите V, чтобы переключиться на инструмент «Выделение». Нажмите Alt+Shift (Windows) или Option+Shift (macOS) и перетащите угловой маркер, чтобы изменить его размер пропорционально от центра. Наконец, измените положение значка, перетащив его центр.
Выберите «Файл» > «Сохранить». Дайте вашему проекту уникальное имя и сохраните его в формате Adobe Illustrator (AI). Вы можете редактировать этот файл в Illustrator в любое время.
Чтобы сохранить окончательную версию, готовую к публикации в Интернете, выберите «Файл» > «Экспорт» > «Экспорт для экранов». Выберите место и выберите формат PNG.
Совет: Перед экспортом можно изменить размер монтажной области.
