Иконка дизайн: Иконки графический дизайн — 49,050 бесплатных иконок

иконки — Дизайн на vc.ru

Подготовка иконок к работе в дизайн-системе.

18 960 просмотров

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб-дизайнером.

Мне интересна разработка сервисного дизайна, проектирование дизайн-систем и автоматизация дизайн- и бизнес-процессов.

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

Помещайте иконки во фреймы

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

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

Оставлять иконки без фрейма нельзя!

Всегда помещайте иконки во фрейм

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

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

Иконка выровнена по геометрическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.

Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.

Компонент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).

Замена иконок с помощью функции «Instance»

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

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

Заодно и новые слова на английском выучите, если у вас с ним беда, как и у меня. 😄

Хранение иконок

Статья 224, лишение свобод…… .. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде «Icons 24». Остальные иконки размер которых больше или меньше 24px храним в «Other Icons». Обычно их не очень много.

Артборд «Trash Icons» нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд «Icons 24», а другие два варианта иконки перемещаете в артборд «Trash Icons». На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.

Фон и цвет

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

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

Удаление фона и применение стиля цвета

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

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

Констрейнтс

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

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

Массовые действия с иконками

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

Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.

Мусор в иконках

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

Например, Material Design иконки имеют белый фоновый слой.

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

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

После того, как вы объединили слои, не забывайте применять «Outline Storke» к объединенной фигуре.

Объединение иконки в один слой

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

Так выглядит SVG-код иконки, когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров «Fill» для разных элементов иконки. Так делать нельзя.

Размер файла иконки 1318 байт

А так выглядит SVG-код иконки, когда все слои объединены.

Код гораздо меньше и имеет всего 2 параметра «Fill». Один для фона контейнера, другой для цвета иконки. Так делать можно.

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 508 байт

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск.

Material Design на русском. Часть 23 — Системные Иконки | by Ruslan Sharipov | Дизайн-кабак

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Контекст

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

Формы иконок насыщенные и геометрические. Они симметричны, консистенты, читабельны и четкие даже при маленьких размерах.

Правильно: графично и насыщенноНеправильно: не используй декоративные элементы для украшательства и тонкие обводкиПравильно: простая геометрия и консистентная формаНеправильно: органические формы

Шаблон

Шаблон для Adobe Illustrator, который поможет спроектировать системные иконки по 24dp сетке.

Размер иконок

Системные иконки имеют размер 24 x 24 dp. Проектируй иконки в 100% масштабе, то есть 1:1, чтобы всё было пиксель-пёрфект.

100% масштаб 1:11000% масштаб 1000:1

Плотность макета

На десктопе, когда мышь и клавиатура являются основными методами ввода, размеры иконок могут быть уменьшены до 20dp.

100% масштаб 1:11000% масштаб 1000:1

Содержимое иконок должно оставаться внутри рабочей области.

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

Рабочая область, в которой надо нарисовать иконку ограничена размером 20x20dp внутри контейнера 24x24dpВнутренний отступ (padding) — от границ контейнера отступи 2dpКомпактная рабочая область может быть меньше. Например, если иконка 20x20dp, то рабочая область будет 16x16dp с внутренним отступом 2dpВнутренний отступ для компактного вида = 2dp

Сетка иконки и контуры

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

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

Базовые формы

Контуры превращаются в стандартные формы: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эти формы нужны для унификации иконок в системе Google и для поддержания согласованности в сетке.

СеткаКонтурыКвадрат размером 18x18dp по высоте и ширинеКруг размером 20x20dp по высоте и ширинеВертикальный прямоугольник размером 16dp по ширине и высоте 20dpГоризонтальный прямоугольник 20dp на ширине и 16dp на высоте

Геометрия

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

Иконка «копировать»Иконка «камера»

Чёткость и пиксель-пёрфект

Чтобы избежать искажения иконки, расположи элементы “пиксель в пиксель”, указав координаты X и Y с помощью целых чисел, без десятичных знаков.

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

Адаптация под другие платформы

Android. Кнопка назад имеет тонкую по обводке стрелку.iOS. На iOS стрелка толще и не имеет окончания.iOS. В iOS стрелка назад также может содержать надпись, которая соответствует пункту назначения.Android. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три вертикальные точки.iOS. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три горизонтальные точки.

Анатомия

1 — Штрих. 2 — Угол. 3 — Контрформа (внутреннее пространство). 4 — Обводка. 5 — Внутренний угол. 6 — Контейнер иконки

Углы

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

Наружные углы со скруглением 2dpВнутренние углы без скругления

Обводка

Системные иконки имеют обводку размером 2dp, везде.

2dpКонсистентность вездеКонечные штрихиВнутреннее пространствоПравильно: используй одинаковые размеры в обводках и прочих элементах иконокНеправильно: использовать разные формы и толщины у элементов.

Сложные по форме иконки

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

Сложные формы. У иконки «скрепка» исползуется 1.5dp ширина обводки, чтобы кривые формы читались лучше.Малый масштаб. Иконка выше также использует обводку размером 1.5dp для отображения дыма у сигареты.Правильно: рисуй иконки фронтальноНеправильно: не поворачивай, не наклоняй и не изменяй форму объектовПравильно: упрощай иконки для лучшей ясности и читабельности. Неправильно: не перегружай иконку. Избегай сложных форм.

Пространство

Размер кликабельной области равен 48dp. В эту кликабельную зону ты помещаешь иконку 24dp. Это нужно, чтобы дать достаточное пространство, чтобы поддержать читабельность и чтобы было удобно нажимать на иконку.

1 — Кликабельная зона. 2 — Размещение.

Плотность (на Desktop)

Когда мышь и клавиатура являются основными методами ввода, размер контейнера иконки можно поджать. Иконки 20dp можно уместить в кликабельную зону размером 40dp.

1 — Кликабельная зона. 2 — Размещение

Иконки на светлом фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 87% (#000000). Прозрачность иконки вне фокуса равна 54%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 38% (#000000).

Иконки на тёмном фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 100% (#FFFFFF). Прозрачность иконки вне фокуса равна 70%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 58% (#FFFFFF).

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

Следующие 4 примера иконок получились путем работы с этими атрибутами.

Линейные иконки

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

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

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

Без заливкиС заливкойЧтобы иконка была читаемой, рекомендуемая толщина обводки 2dp2dp обводка это стандарт также и для линейных иконок во всех приложениях и размерах.

Про выравнивание обводки

Положение обводки влияет на внешний вид иконки. Чаще всего иконки рисуются с обводкой внутрь.

1 — Material иконка по умолчанию. 2 — Обводка внутрь. 3 — Обводкапо центру. 4 — Обводка наружу.Выравнивание обводки по внутренней части фигуры лучший вариант для создания иконок и передачи читаемости.Для читаемости и распознаваемости в некоторых случаях стоит придерживаться стиля иконок Material по умолчаниюОсторожно: хотя в большинстве случаев нужно выравнивать обводку внутри, иногда все же нужно делать это по центру или использовать внешнее выравнивание для лучшей читаемостиПравильно: если тебе кажется, что иконку стоит скорректировать, то сделай это используя настройки обводкиТонкая обводка у иконок подчёркивают бренд1 — Логотип. 2 — Линейные иконки в приложении. 3 — Сет иконок.

Острые или заострённые углы

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

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

Радиус скругления
Радиус угла у иконки может быть больше или меньше — все зависит от тебя.

Рекомендуемое значение скругления от 0 до 4dp.Если обводка равна 2dp или меньше, то радиус угла должен быть равен 1dpМеняй внутренние углы и размер в соответствии с радиусом углаПравильно: меняй радиус, чтобы иконка оставалась разборчивой и передавала стиль брендаОсторожно: не скгруляй внутренние углы если это понижает читаемость иконкиЗначение 0dp у иконок для скругления поддерживается прямоугольными элементами дизайна этого приложения1 — Логотип. 2 — Иконки острые. 3 — Сет иконок.у этого приложения закругленные кнопки и линейный иконка-логотип.1 — Логотип. 2 — Сет скругленных иконок. 3 — Использование сета иконок в приложении.

Двухцветные иконки

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

1 — Обводка (рекомендация по размеру: 2dp). 2 — Заливка с прозрачностьюПрозрачность применяется только к какой-то области заливки.

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

Обводка иконок должна быть со значением прозрачности равной 87% на светлом фоне и 100% на темном. Цвет заливки может варьироваться в зависимости от тона фона.

В этом интерфейсе используется двухцветные иконки. В данном примере это лого.1 — Лого. 2 — Сет иконок. 3 — Использование иконок в приложении.

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new

дизайнов иконок, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Посмотреть YKTFV

2. Просмотреть NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография

   NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография

3. Просмотр значков Videoleap

   Иконки Videoleap

4. Посмотреть логотипы

5. Посмотреть линейную иконку

   Линейный значок

6. Посмотреть руководство по иконографии Assetly

   Руководство по иконографии Assetly Брендинг

7. Иконография: брендинг иконок, набор иконок, визуальная идентификация, приложение

8. View Oppo Icon Branding Design: набор иконок с плоским вектором

   Фирменный дизайн Oppo Icon: набор иконок в плоском векторе

9. Посмотреть иконографию Twitter

   Иконография Twitter

10. Посмотреть 🍀

11. Посмотреть набор иконок

    Набор иконок

12. Посмотреть 🕊

13. Просмотр LifeTree

    Дерево Жизни

14. Просмотр DesignMate — набор иконок

    DesignMate — набор иконок

15. Посмотреть ⟁

16. Посмотреть коллекцию иконок

    Коллекция иконок

17. Посмотреть ☕️

18. Посмотреть MetaSpark Logomark Брендинг, дизайн логотипа, визуальная идентификация

    Логотип MetaSpark Брендинг, дизайн логотипа, визуальная идентификация

19. Посмотреть HeatWatch

    Тепловые часы

20. View Knicknack — набор иконок

    Безделушка — набор иконок

21. Посмотреть HeatWatch

    Тепловые часы

22. Посмотреть изометрические значки

    Изометрические иконки

23. Посмотреть иконографию UOW

    Иконография UOW

24. Посмотреть значки достижений

    Значки достижений

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

Вот как создать иконку с нуля [шаг за шагом]

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

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

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

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

1. Семь золотых правил создания иконки
2. Как создать иконку с нуля (шаг за шагом)

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

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

1. Помните о сетке

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

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

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

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

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

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

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

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

3. Не сходите с ума по деталям

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

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

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

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

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

5. Следите за зазором

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

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

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

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

7. Сборка из простых форм

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

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

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

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

Шаг 1. Ознакомьтесь с объектом съемки

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

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

1. Большой объектив в центре корпуса
2. Вспышка
3. Кнопка, позволяющая сделать снимок

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

Шаг 2: Разбейте

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

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

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

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

Шаг 3: Начни строить!

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

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

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

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

Шаг 4: Проверка!

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

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

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