Дизайн иконок в Figma | Дизайн в жизни
Обновлено: 23.03.2021
Иконки, значки, пиктограммы – неотъемлемая часть дизайна сайтов и мобильных приложений. Они быстро объясняют пользователю смысл каждого блока. Мы часто даже не читаем надписи под иконками, потому что их визуальная часть нам и так понятна. Существуют целые направления дизайна, где занимаются именно иконками. Сегодня мы поговорим о том, откуда брать иконки для своих проектов в Figma и продолжим создавать дизайн приложения Proper Nutrition.
Получить иконки для своего дизайна можно несколькими способами. Обо всех мы поговорим в статье.
Содержание
1. Использование готовых библиотек компонентов с иконкамиСамый простой и быстрый способ – использовать то, что создали другие дизайнеры.
Если вы загляните в раздел Community, то найдете огромную библиотеку готовых решений от профессионального сообщества дизайнеров Figma. Вы так же можете стать его частью и внести свой вклад.
Здесь вы найдете не только документы с наборами иконок в едином стиле и для разных устройств, но и готовые проекты с дизайном сайтов и мобильных приложений, которые вы можете взять за основу собственного дизайна.
А также UI Kit – библиотеки готовых наборов компонентов для интерфейса, выполненных в едином стиле. Они могут включать уже разработанный дизайн кнопок, выпадающих списков, иконок, стилей заголовков и так далее. Это существенно экономит время дизайнеров.
Вы можете разработать свою библиотеку готовых компонентов, ну а пока ее нет, пользуйтесь результатами труда других авторов, которые, к слову сказать, есть как платные, так и бесплатные.
Щелкните на название понравившегося набора и напротив его названия вы найдете кнопку Duplicate. После ее нажатия, файл скопируется в ваш раздел Drafts.
Теперь откройте скопированный документ (у меня это бесплатный coolicon), и посмотрите, как организовано его содержимое.
На вкладке Layer вы увидите список фреймов, с входящими в него иконками. Каждая иконка – это компонент.
Если вы еще не узнали, что такое компонент из видео урока, который я рекомендовала посмотреть в статье «Первое знакомство с Figma», то напомню.
Компонент в Figma – это элемент дизайна, который можно использовать многократно. Например, меню приложения. Достаточно нарисовать его один раз, объединить все слои в компонент и использовать его копии для всех экранов. В случае если нужно будет внести какие-то изменения, это нужно будет сделать только с самым первым экземпляром, который будет считаться родительским. Остальные же (дочерние) изменятся автоматически.
Для того, чтобы компоненты (в данном случае иконки) можно было использовать в разных файлах, их нужно сделать публичными или, как говорят, сквозными.
Для этого в левом меню на вкладке Assets со списком всех компонентов нажмите на кнопку TeamLibrary (библиотека команды).
После этого откроется окно с названием нашего файла с иконками-компонентами, которые мы можем опубликовать, нажав на кнопку Publish и списком всех уже опубликованных (сквозных) элементов.
Но, радоваться рано. Если вы нажмете на кнопку Publish, появится сообщение о том, что нужно создать команду, чтобы опубликовать компоненты. Когда вы создадите команду и снова вернетесь к библиотеке документа, то увидите, что ничего не изменилось. А все, потому что функция публикации компонентов доступна только в платных тарифах Figma.
Совет! Есть только один способ использовать иконки и другие компоненты сторонних дизайнеров в бесплатной версии Figma. Найдите проект, который максимально подходит по набору компонентов для вас. Дублируйте его в свои черновики и работайте прямо в нем. Создайте страницу (Page) со своим проектом, тогда все объекты из других страниц будут так же доступны для вас.
2. Использование плагинов с иконками в Figma
Второй способ — плагины, так же экономит время дизайнеров.
Плагины в Figma — это специальные расширения программы, разрабатываемые участниками профессионального сообщества дизайнеров и программистов. Они призваны увеличить возможности Figma, чтобы сделать ее еще более удобной и популярной. Их функционал разнообразен – от визуализации графиков и создания анимации до библиотеки готовых иконок.
Для того, чтобы установить плагин выполните следующие действия:
- Вернитесь на главный экран Figma (Menu – Back to files)
- Перейдите в раздел Community, где хранится список всех плагинов и UI Kits от пользователей.
- Перейдите в раздел Plugin и найдите подходящий вариант, например, Icons8 Free Icons. Напротив его названия в найденном списке или на странице плагина нажмите клавишу Install.
Сразу произойдет установка плагина. Напротив названия появится кнопка Uninstall с помощью которой можно будет его удалить.
Теперь вернитесь к вашему документу и в пункте меню Menu — Plugins вы найдете только что установленный Icon8.
Щелкните по названию и откроется диалоговое окно плагина с библиотекой иконок.
Ищите необходимые варианты и вставляйте их в свой дизайн. Лучше использовать SVG формат, но в данном плагине он доступен в платной версии. Подробнее о преимуществах SVG читайте в статье «Экспорт из Photoshop в SVG».
В других вариантах плагинов иконки в SVG формате могут быть бесплатны, так что ищите подходящий вариант.
3. Использование иконочных шрифтов в FigmaВ Figma нет готового набора иконок, но можно использовать иконочные шрифты, например, FontAwesome.
С помощью инструмента Text создайте текстовый блок во фрейме и на панели свойств в разделе Text выберите шрифт Font Awesome
Перейдите на официальный сайт шрифта Font Awesome. Выберите подходящую иконку, щелкните по ней левой клавишей мыши и скопируйте в буфер.
Затем вернитесь к вашему текстовому блоку и вставьте туда иконку. Размер иконки, ее цвет, регулируются так же на панели свойств Text.
Самый трудоемкий способ – это рисовать иконки самостоятельно с помощью фигур, шейпов. На нескольких примерах разберем, как создаются простые иконки в Figma.
Если вы хотите создавать оригинальный дизайн иконок, советую вам ознакомиться со статьей, описывающей 7 принципов дизайна иконок.
Давайте нарисуем иконку сети wifi в Figma и заодно познакомимся с особенностями работы с фигурой Ellipse
Нарисуйте эллипс размером 40х40 px, зажав клавишу shift, чтобы сохранить пропорции. Наведите на него указатель мыши, и вы увидите круглую точку arc, потянув за которую вы измените свойство sweep (развертка) и получится пайчарт.
На нем вы увидите уже две точки sweep (развертка) и start (начало угла разворота). Подберите их значения так, чтобы получился вот такой значок. Причем это сделать можно как вручную, так и на панели свойств. Потяните центральную точку вверх и получится дуга.
При этом на панели свойств изменится свойство Ratio.
Теперь ниже нарисуйте еще один эллипс, так, чтобы его окружность точно входила в пространство под нашей первой дугой. У меня получился размер 32х32 px. Используя те же самые свойства получите вторую дугу.
Повторите все тоже самое с 3-м эллипсом (у меня получился 20х20 px), но не создавайте дугу, а оставьте треугольный сегмент (Piechart).
Затем выделите все эллипсы и установите закругление краев на 1 в панели свойств.
Для того, чтобы размер иконки ограничивался его видимой частью, а не размером первоначального эллипса (40х40 px), примените к трем выделенным элементам булеву операцию Union (объединение). Более подробно о ней я писала в статье «Рисуем дизайн первой страницы приложения в Figma». В результате данной операции на панели Layer появится новый слой Union. Переименуйте его в wifi.
Для того, чтобы можно было использовать нарисованную иконку wifi во всех фреймах нашего проекта в Figma, преобразуйте его в компонент.
Кратко о том, что такое компонент я писала выше и еще более подробно мы будем рассматривать это в следующих статьях.
Для этого нажмите на кнопку с ромбом на верхней панели инструментов или в контекстном меню нашей иконки выберите пункт Create Component.
Панель слоев будет выглядеть следующим образом.
Иконка готова и это будет родительский компонент, изменение которого приведет к таким же изменениям его копий.
5. Дизайн иконок для Status Bar приложения Proper NutritionТеперь вернемся к приложению Proper Nutrition и создадим иконки для Status Bar. Это будет примерный дизайн, так как у каждого девайса он свой. Нам главное, показать какое место в дизайне экранов он будет занимать.
В документе Proper Nutrition создадим новый фрейм для Iphone 8 и назовем его MainScreen. Это будет главный экран нашего простого приложения. Описание всех экранов смотри в статье «Рисуем дизайн первой страницы приложения в Figma»
Для данного фрейма зададим сетку Grid с ячейкой 8px
С помощью инструмента Shape Tool – Rectangle (R) нарисуйте белый прямоугольник по всей ширине экрана, высотой 44 px (обычная высота для status bar).
Размеры фигуры можно задать вручную на панели Design или растягивать ее, ориентируясь на цифры внизу прямоугольника.
Назовите слой status bar
Для нарисованного прямоугольника задайте ограничители Left and Right — Top.
Теперь займемся иконками. Будем использовать иконочный шрифт. В нашем случае это самый простой способ. Надпись со временем сделайте с помощью обычного текстового блока. У меня это шрифт Roboto в 13px. Для данных иконок выставите ограничители:
- Иконка батареи – Right – Top and Bottom
- Иконка wifi — Right – Top and Bottom
- Время — Left – Top and Bottom
Выровняйте иконки по центру прямоугольника status bar с помощью соответствующих кнопок на панели Design.
Выделите прямоугольник Status Bar со всеми иконками и преобразуйте их в компонент, который назовите так же Status bar.
6.
Дизайн иконок для меню tab bar в приложении Proper NutritionТеперь, используя те же самые шаги создадим дизайн иконок для нижнего меню приложения. Там будут следующие кнопки с иконками (слева направо):
- Возврат к главной странице.
- Открытие списка избранного.
- Добавление в избранное
- Поиск по рецептам
- Оставить заметку (комментарий)
Нарисуйте прямоугольник высотой 60 px, шириной во весь экран.
Над ним нарисуйте линию (Line) с цветом (stroke) — # 949494
С помощью иконочного шрифта создайте иконки «Возврат к главной странице», «Открытие списка избранного», «Поиск по рецептам», «Оставить заметку». Размер – 24px.
Для созданий кнопки «Добавление в избранное» выполите следующий порядок действий:
Нарисуйте прямоугольник ширина (W) – 48, высота (H) – 30, закругление краев — 3
Залейте его градиентом (Fill – Linear) из красного (#DA0100) в оранжевый (#DA6900), прозрачность 100% в обоих случаях.
С помощью инструмента Text напечатайте «+» по середине прямоугольника, шрифт Comfortaa, размер 24. Установите у него следующие параметры – Fixed Size и Align Centr, чтобы символ всегда оставался в центре кнопки и фиксированного размера при любом изменении ее ширины.
Выделите прямоугольник и знак «+», преобразуйте их в компонент и назовите его Button/add favoriets.
Теперь выделите все иконки и кнопку и выберите для них стиль выравнивания Tidy up, чтобы расстояние между ними стало равным.
Выделите все нарисованные иконки и элементы для status bar и преобразуйте их в компонент с названием status bar.
В этой статье мы рассмотрели 3 способа создания иконок в проектах Figma. Выбирайте тот, что является самым удобным для вас.
Следующая статья из цикла по разработке приложения Proper Nutrition — это «Дизайн приложения в Figma — стили и маски«.
В ней вы узнаете еще один способ поместить растровое изображение в Figma, а так же как работать с масками и стилями.
Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна |
Подробный урок по созданию IOS иконки в Sketch 3
Цветной выключатель
Спустя чуть более, чем месяц использования Sketch, я уже чувствую себя достаточно уверенно, чтобы поделиться частью своей работы в виде урока. Я покажу, как нарисовать бесплатную цветную иконку-выключатель, которую создал сам, и в которой используется множество интересных возможностей Sketch. К тому же, эта работа не слишком долгая и рутинная.
Я хочу сделать самое простое, но самое подробное описание. Этот урок разработан для новичков, так что, возможно, многие вещи, описанные здесь, будут вам уже знакомы.
Вот результат IOS иконки в Sketch 3, который мы получим:
Примечание: Я не всезнайка, и уж точно не являюсь уникальным владельцем единственно правильного способа создания тех или иных вещей, поэтому если у вас есть комментарии или дополнения, не стесняйтесь оставлять их под этим постом. Мне всегда интересно учиться, и такие обсуждения будут полезны каждому читателю.
Если вдруг вы заблудились в шагах, или вам что-то непонятно, есть наполовину готовый файл .sketch, который можно скачать, а также есть конечный файл-источник. Ну все, давайте приступим.
Установка Sketch
Это непростой шаг☺. Если у вас еще нет лицензии, вы можете скачать бесплатную триал-версию или купить лицензионную версию на App Store. Установите и запустите приложение.
Когда увидите окно приглашения, не открывайте никакой шаблон, а просто нажмите “ok”, чтобы создать новый документ. Вы увидите следующее:
Создание артборда
Артборды — это “рабочие области”, они могут быть и маленькие, как иконки, и такие большие, как вам нравится.
Если вы раньше пользовались Illustrator, принцип артбордов такой же.
Нажмите “A” на клавиатуре или нажмите кнопку “Insert” вверху слева и выберите artboard(1). Как вы видите, в правой колонке доступно множество удобных размеров. Мы не будем их использовать. Просто нарисуйте артборд любого размера на холсте. Затем в панели справа в разделе “size”, введите 400×300 (2).
В панели артборда/слоя (слева) дважды щелкните мышкой на “Artboard 1” и переименуйте его, как вам хочется. Поколебавшись между разными вариантами, я решил назвать свой слой “Colorful switch” (цветной выключатель) (3).
Создание цветного фона
Артборд готов, настало время придать ему нужный тон. Вы всегда можете сделать это потом, но выбранный цвет фона будет влиять на отражение цвета на иконке и общую цветовую гамму.
Я потратил много времени, тестируя разные варианты, давайте сократим этот этап в уроке, и я просто выдам вам результат своих мучений.
Нажмите клавишу “R” на клавиатуре, чтобы выбрать кнопку “прямоугольник” (или выберите меню (insert>shape>rectangle ® в интерфейсе Sketch))(4).
Нарисуйте прямоугольник так, чтобы он полностью заполнил артборд. Это должно быть легко, так как прямоугольник автоматически “прилипнет” к границам артборда (5).
После этого вы увидите, как ваша панель эффектов (справа) автоматически заполнится серой заливкой и более серыми “границами” (цвет Borders) (6).
Снимите галочку с цвета Borders, а затем кликните на цвет заливки (Fill). В значении Hex введите #A846FF(7). Теперь у вас есть базовый цвет. В верхнем правом углу панели Fills кликните на иконку “+”.
Как видите, добавился новый слой Fills поверх другого.
Если еще не выбрана панель градиента, кликните на нее и нарисуйте градиент с верхнего левого угла до нижнего правого угла артборда(8).
Два квадратика прямо под выбором типа заливки — это цвета вашего градиента. Нажмите на один из них, и он станет редактируем.
Убедитесь, что верхний левый цвет имеет значение #ffffff (белый), а нижний правый — #000000 (черный). Нажмите на черный цвет в выборе цвета градиента или прямо в артборде и установите непрозрачность 0.
Непрозрачность цвета градиента может быть настроена бегунком, расположенным сразу под селектором цвета или в блоке “А” справа от RGB-параметров. Затем выберите белый цвет, и установите параметр непрозрачности 60. Смотрите изображение 9.
Установите параметр Fill на значение Overlay (10) и нажмите + еще раз. В этот раз выберите третью вкладку, чтобы получить радиальный градиент. Нарисуйте этот градиент с верхнего левого угла до нижнего правого (11).
Убедитесь, что верхний левый цвет — белый, а нижний правый — черный. Установите для обоих цветов непрозрачность 50, а также сделайте слой с этой заливкой верхним. У вас получится, как на изображении 12. Супер яркий, неоново-пурпурный градиент от светлого к темному : )
В завершении, давайте сгруппируем наш слой. Выберите его в панели слева, нажмите cmd+G, чтобы сгруппировать его, кликните дважды на группе и назовите ее Background (фон). Можно позволить себе и больше вольностей в названии слоя. Смотрите изображение 13.
Основа иконки с использованием встроенного шаблона иконки iOS 7
А теперь давайте рисовать иконку.
Мы будем использовать встроенный шаблон иконки iOS, так чтобы нам не пришлось самостоятельно воссоздавать эти довольно сложные закругленные углы.
Выберите “File>New From Template> iOS App Icon”(14). Откроется новый файл. Для наших целей мы не будем создавать полный набор иконок, это для того, чтобы вы просто освоили полезную опцию шаблонов.
В панели слоев (слева) кликните на замочек слоя “Icon Shape” (форма иконки) в артборде “Icon-76@2x” (15). Когда вы выделили и разблокировали этот слой, скопируйте его (cmd+c) и вставьте в ваш оригинальный файл (16). Теперь можете закрыть окно с файлом шаблоном без сохранения изменений.Выберите слой Icon Shape (форма иконки), который вы только что импортировали вместе со слоем, созданным ранее (у меня он называется crazy colors). Для множественного выделения используйте сочетание click+cmd(17).
Используя инструмент выравнивания, расположенный вверху правой колонки, мы будем выравнивать иконку на фоне по центру. Нажмите сначала кнопку “align horizontally” (выровнять по горизонтали), а затем кнопку “align vertically” (выровнять по вертикали), это 4-ая и 7-ая кнопки соответственно(18). В итоге у вас получится, как на изображении 19.
Давайте приведем в порядок слои, чтобы не пришлось останавливаться на этом в дальнейшем.
Нажмите “cmd+G” на слое с формой Icon, чтобы создать группу. Подтяните группу наверх и переименуйте ее в “Icon”. Снова нажмите Cmd + G внутри группы, чтобы поместить слой на один уровень ниже в дереве групп. Переименуйте ее в “Icon Base” (20).
Базовые формы
Выберите ваш слой “Base” и измените цвет заливки на #ffffff. Добавьте вторую однотонную заливку для этого слоя, используя кнопку “+” и укажите для нее оттенок #FAC3FF.
Настройте непрозрачность для этой заливки 10%. У вас получатся параметры, показанные на изображении 21.
Теперь нажмите “O” на клавиатуре, чтобы выбрать инструмент “Овал”. Нарисуйте круг размером 124*124 по центру слоя “Base”. Вы можете использовать правую колонку, чтобы точно указать размер. Не забудьте воспользоваться инструментами выравнивания, чтобы расположить круг идеально по центру. Удалите границы и вы получите следующее (22).
В слое “Oval 1″, выберите заливку “Linear Gradient” (линейный градиент) и задайте направление градиента по диагонали. Укажите верхний левый цвет #E500E7, а нижний правый — #00D7FF. Не изменяйте режимы Alpha и перехода.(23)
Назовите этот слой “Super colorful base” (супер-разноцветная база) и включите его в группу “Color Base”. (24)
Очень полезная подсказка: Чтобы убедиться, что слой выровнен, удерживайте клавишу “Alt”, пока наводите на него мышкой, отобразятся смартгайды. Вы можете затем наводить мышкой на элементы, чтобы измерить расстояние между ними.
Снова используя инструмент овал, мы нарисуем основу для круглой ручки переключателя.
Добавьте вертикальный линейный градиент на новый слой, указав верхний цвет #FFDBFF и нижний #FCF2FC (25)
Сгруппируйте этот слой (cmd+G) и назовите группу “Knob base” (основание ручки переключателя). (26)
Как видите, мы просто создаем базовые фигуры и зоны иконки. В основе у нас стандартная фигура iOS7, цветной круг и круглый переключатель вверху. Осталось добавить некоторые эффекты на эту плоскую фигуру.
На данном этапе у вас должно получиться именно то, что вы видите на картинке вверху. Я сделал промежуточный файл sketch, который вы можете взять здесь.
Создание фаски
Теперь мы задержимся немного на группе объектов “Color base”.
Мы сделаем “кольцевое” обрамление большого цветного круга.
Используя инструмент Овал (О), создайте круг 128*128, выровненный по центру базы. Не забудьте, вы можете воспользоваться инструментами выравнивания и проверить, положение объекта с помощью смартгайдов, используя клавишу “Alt”. У вас получится нечто вроде изображения 27.
И снова возьмите инструмент Овал, нам нужно сделать немного меньший круг, идеально отцентрированный на предыдущем. Удерживайте кнопку “shift” при рисовании и задайте размер 116*116 (28).
Убедитесь, что последний нарисованный вами слой расположен поверх остальных, выделите оба круга и на главной панели инструментов нажмите “substract” (29). У вас получится, как на изображении 30.
Вы увидите, что Oval 3 теперь в “shape group”. Если вы откроете ее, вы сможете изменять нарисованные фигуры. Переименуйте слой на “Surrounding” (окружение).
Давайте добавим линейный градиент, чтобы создать некую перспективу.
Задайте направление градиента по диагонали слева направо. Укажите верхний цвет #F698FF и нижний цвет #FFF3FF, чтобы выглядело так (31).
Теперь мы добавим дополнительны цвет в этот градиент для стимуляции отражения цвета. Когда вы наводите мышкой на линию-вектор градиента, вы увидите, что обозначение курсора меняется на “+”.
Если кликнуть мышкой, в градиент добавится еще один цвет. Задайте дополнительный цвет примерно на ⅓ длины вектора от верхней точки и назначьте оттенок #BDB6FF (32).
Затем нужно усилить фаску. Она выделит центральный элемент, создаст красивый 3D-эффект. В Sketch нет инструмента тиснения слоя, как в Photoshop, поэтому мы создадим подобный эффект простым градиентом.
Нарисуйте еще один круг (клавиша “О”) размером 144*144 в слое “Super colorful base” и также идеально отцентрируйте его на базе. Удалите слой границ и добавьте вертикальный линейный градиент с верхним цветом #ffffff и нижним #DF80FF (33).
Далее нужно добавить размытость, чтобы создать нужный сглаживающий эффект. Видите, в правой колонке есть строка “Gaussian Blur” (гауссово размытие). Кликните на этот чекбокс и установите параметр amount равный 3px (34). И, наконец, задайте для всего слоя непрозрачность 44%(35).
Добавление глубины
Теперь переключатель выделен некой глубиной, настало время продублировать подобный эффект на цветной круг.
Выберите слой “Super colorful base” и добавьте внутреннюю тень Inner shadow, кликнув на “+” в строке “Inner Shadows”.
Оставьте цвет #000000 , но укажите параметр альфа 64. Укажите значения параметров X и Y на 0, а blur 10.
Параметр spread должен быть 0 (36).
Добавьте еще одну такую же тень, нажав “+”.
В этот раз непрозрачность должна быть 56, X:0, Y:7 а blur равна 9 (37).
Скашивание кромок
У нас есть отличная фаска на центральном элементе. Настало время добавить такой же эффект на базовый элемент, чтобы они лучше сочетались между собой.
В папке “icon base” выберите слой “base”. Нам нужно следовать такому же направлению цвета — светлее вверху, темнее внизу, т.е. белый вверху, розовый внизу.
Начните с добавления первой тени Inner shadow с цветом #E187FF с 90% alpha, X:0, Y:-5, Blur 6 и нулевым значением spread.
Добавьте вторую такую же тень, на этот раз чисто белую (#ffffff) со 100% непрозрачностью, но вместо того, чтобы задать направление вверх, задайте направление вниз со значением Y:5 (38).
Теперь сделаем то же самое для маленькой головки переключателя. Выберите группу “knob base” на слое “oval 2″. Первую внутреннюю тень задайте с цветом #8D1799 с 48% alpha, X:0 Y:-1 и blur:3.
Сделайте вторую тень #ffffff со 100% alpha и параметрами X:0, Y:2 и Blur:3, это придаст красивое сияние головке переключателя(39).
Далее необходимо слегка выточить переключатель. чтобы он выглядел более “осязаемым”, придать ему глубину. Инструментом Овал нарисуйте круг посередине переключателя размером 48*48 (40). Удалите границы и залейте черно-белым градиентом (черный вверху, белый внизу). Белому цвету задайте 0% alpha(41).
Вместо выбора цвета для этой выточки мы воспользуемся режимом наложения. Установите параметр Blending на “overlay”для всего слоя (42).
Переключатель будто перешел в другое измерение.
Затемнение
Моя любимая часть. В Sketch 3 меня удивляет, как легко он справляется с тенями. Есть несколько способов создать тень: используя инструмент Тени в панели слоя, простыми градиентами или размытыми слоями.
Мы будем использовать и инструмент тени, и размытые слои.
Начните с выбора слоя “Icon base > Base”. Мы добавим в сумме три тени, от резкой, ближе к базе, до мягкой подальше от нее. Добавьте тени с такими параметрами:
- #000000 Aльфа 42% X:0 Y:10 Blur:16 Spread:0
- #000000 Aльфа 34% X:0 Y:4 Blur:14 Spread:0
- #000000 Aльфа 24% X:0 Y:2 Blur:2 Spread:0
В итоге у у вас получится, как на изображении 43.
Последнее, что мы сделаем с базой — добавим резкую падающую тень (drop shadow).
Для этого скопируйте слой “base”. Вы можете просто кликнуть правой кнопкой мышки на слое и выбрать в меню опцию “duplicate” (дублировать). Также вы можете скопипастить слой или нажать на него и перетянуть, удерживая клавишу “alt”.
Заметьте, в скопированном слое все эффекты также дублируются.
Удалите все эффекты. Просто снимите галочки с эффектов и кликните на иконку корзины справа от названия группы эффектов (рядом со значком “+”).
Нажатие на эту иконку автоматически удалит все эффекты, с которых сняты галочки (44). Установите цвет заливки #000000, и у вас получится изображение 45.
В панели слоев, переименуйте этот слой на “Big drop shadow” (большая падающая тень) и передвиньте его под слой “base”(46).
Теперь мы сместим слой на 30 пикселей вниз. Выделите слой, удерживайте shift и трижды нажмите клавишу “стрелка вниз”. “Shift + стрелка вниз” передвигает выделенный слой 10-пиксельными шагами (47).
Последний шаг для тени — установить непрозрачность для слоя 20% и гауссово размытие на 7 пикселей (48). Теперь ваша база красиво оттеняется.
Настало время добавить такие же тени на переключатель.
В группе “Knob base” выберите слой “oval 2″. Скопируйте этот слой, уберите его из группы, укажите для него отдельную группу под названием “Knob shadow” (тень переключателя) и переместите эту группу под “knob base” (49).
Удалите все эффекты с этого слоя, задайте цвет заливки #000000 и передвиньте вниз на 10 пикселей (50).
Затем задайте непрозрачность 10% и гауссово размытие на 4 пикселя, результат будет малозаметен (51).
Давайте сделаем тени выразительнее. Скопируйте этот слой и снова приподнимите его на 10 пикселей, чтобы выровнять его с самим переключателем. Мы изменим форму этого круга. Выделив новый слой, нажмите “enter(return)”, и вы увидите изображение 52. Теперь вы редактируете линии. Заметьте изменения в правой панели.
Если еще не выделена, выделите нижнюю опорную точку (как на изображении 52). Передвиньте ее на 10 пикселей вниз (53). Затем нажмите “finish editing” (завершить редактирование) вверху панели редактирования векторов, чтобы вернуться в обычный вид изображения.
Установите непрозрачность для слоя 20% и гауссово размытие 8 пикселей (54).
Для последней тени, скопируйте слой, над которым мы только что работали и укажите непрозрачность для нового слоя 40%. В панели справа, в разделе “size” (размер), задайте ширину слоя 68 и длину 80, отцентрируйте слой на переключателе, чтобы верхние точки совпадали (55).
Наконец, в режиме наложения ( blending mode) выберите вариант Overlay (поверх всех), чтобы получить красивую, темно-синюю тень(56).
Далее мы будем добавлять различные эффекты к теням.
Выделите базовый слой переключателя “Knob base>Oval 2″. Добавьте три тени:
- #000000 60% alpha X:0, Y:1, Blur:2, spread 0. Установите blending mode на “Overlay”.
- #000000 14% alpha X:0, Y:3, Blur:4, spread 0.
- #000000 50% alpha X:0, Y:2, Blur:4, spread 0.
Получится следующее (57).
Все, с тенями покончено.
Последние штрихи
Мы добавим крошечную деталь “вкл/выкл”. В группе Knob base создайте прямоугольник с закругленными углами, используя клавишу “U” на клавиатуре или “Insert>Shape>Rounded” (58) размером 8*2 с радиусом 3 или более.
Поместите его поверх слоев переключателя и назовите “pointer thingy” (указательная штуковина), лучшего названия я не придумал.
Выровняйте его по вертикали, отступив 8 пикселей от правого края базы переключателя (59).
Удалите границы и залейте сплошным цветом #CA2DEA с непрозрачностью 40%.
Чтобы придать штуковине глубину, добавьте тень с параметрами #FFFFFF 46% alpha X:0, Y:1, Blur:0, а затем добавьте внутреннюю тень (Inner shadow) с параметрами #000000 40% alpha X:0, Y:1, Blur:0.
Эта тень должна быть в режиме “overlay” параметра blend mode, в итоге получится изображение 60.
В вашем “color base” нарисуйте круг 8*8 пикселей, поместите его на левую сторону переключателя, отцентрируйте по ширине цветной части регулятора. Назовите этот объект “OFF”(61). Удалите границу, залейте цветом #ffffff и также установите параметр blending mode на overlay (62).
Чтобы этот кружок действительно выглядел как “OFF”, нужно прорезать его середину. Создайте еще один кружок поверх слоя “OFF” На этот раз нужен размер 6*6. Удалите границу и отцентрируйте в круге “OFF” (63).
выберите оба слоя “oval 11” и “OFF”. Объедините эти слои, используя функцию “substract” (вычесть)на панели инструментов (64).
У вас получится изображение 65.
Чтобы создать кружочек “ON”, просто скопируйте ваш слой “OFF”. Переименуйте его и отодвиньте на другую сторону переключателя, на ту же дистанцию (66).
Нажмите на треугольник слева на слое, чтобы развернуть векторную группу, выделите “oval 11″ (67) и удалите его (68).
Поздравляю, вы закончили!
Экспорт
Последнее, что я хотел показать в этом уроке, — способ экспортирования артборда в несколько DPI сразу. Я считаю эту опцию невероятно полезной.
Допустим, вы хотите экспортировать то, что мы сделали как в 1x (текущий размер), так и в @2x.
Выделите ваш артборд “colorful switch”.
Внизу правой колонки вы увидите кнопку “Make Exportable” (сделать экспортируемым). Нажмите на нее, у вас получится, как на изображении 69.
1x означает исходный размер, тот, в котором вы изначально выполнили дизайн. Кликните на + справа от “Export”, чтобы добавить новый коэффициент для экспорта. Выберите значение @2x.
Вы также можете изменить суффикс и формат. (70)
При нажатии на “Export colorful switch” (экспортировать разноцветный выключатель), программа сгенерирует вариант 1x, затем автоматически увеличит артборд до @2x и сгенерирует увеличенную копию в выбранный формат!
И напоследок
Правка (11/25/14) Если вам хочется узнать больше о Sketch, настоятельно рекомендую вам посетить этот мастер-класс, созданный Жан-Марком Дэнисом (@jm_denis) на Sketchdesign.io
Надеюсь, этот урок был вам полезен.
Вы можете скачать готовый исходник напрямую, если столкнулись с трудностями на каких-то шагах.
Правка (11/08/14)@jocelyncaronfr создал крутое видео-таймлапс этого урока, действительно здорово сделано.
Я всегда рад вашим комментариям и отзывам, так что если у вас есть мысли, или я что-то забыл, пишите:
Twitter, Google+ илиFacebook.
Ждем ваших выполненных работ в комментариях! Удачи
Перевод статьи Sebastien Gabriel
дизайнов, тем, шаблонов и загружаемых графических элементов Draw Icons на Dribbble
Просмотр значков Crypto
Иконки шифрования
Значок просмотра
Просмотр эскизов нового набора
Новый набор эскизов
Посмотреть иллюстрированные рисованные иконки для приложения
Нарисованные от руки иконки для приложения
Просмотр набора значков инструментов рисования
Набор значков инструментов рисования
Просмотр классных значков приложений
Классные значки приложений
Посмотреть вазу
Посмотреть новый набор иконок для частного клиента
Новый набор иконок для частного клиента
Меню просмотра значков
Меню значков
Посмотреть основы дизайна иконок
Основы дизайна иконок
Посмотреть векторный характер плоского дизайна, простой 2D-аватар
Векторная иллюстрация плоского дизайна, простой 2D-аватар
Посмотреть 3 значка
3 иконки
Просмотр Vertbase — Иконки
Vertbase — Иконки
Просмотр новых эскизов в стиле рисования пером
Новые эскизы в стиле рисования пером
Посмотреть как значки Doodle
Значки Like a Doodle
Просмотр значков рисования вручную для приборной панели
Значки для рисования от руки для приборной панели
Посмотреть обратно в школу — набор иконок
Снова в школу — набор иконок
Просмотр иконок Super Naive Drawings
Иконки Super Naive Drawings
Посмотреть дудлы
Каракули
Посмотреть векторный вызов Хэллоуина
Векторный вызов Хэллоуина
Посмотреть альфа-иконки / дизайн персонажей
Альфа-иконки / дизайн персонажей
Посмотреть концепцию иконы потомства
Иконка потомства Концепция
Посмотреть Нравятся мои иконки? Подписывайтесь на мой инстаграм!
Нравятся мои иконки? Подписывайтесь на мой инстаграм!
Посмотреть антииконки
Антииконы
Зарегистрируйтесь, чтобы продолжить или войдите
Загружается еще…
Руководство для начинающих по рисованию иконок | Medium
С момента зарождения операционных систем значки были неотъемлемой частью путешествия пользователей, помогая им ориентироваться в глубинах сложных систем, которые их окружают.
Если бы вы спросили меня пять лет назад, умею ли я нарисовать хотя бы самую простую иконку, ответ, вероятно, был бы НЕТ . Не то чтобы я не мог, я просто боялся попробовать. Дизайнеры склонны думать, что создание иконки требует больших усилий, опыта и знаний, но сделать это намного проще, чем они думают.
Если вы спрашиваете себя, почему вы должны тратить на это свое время, короткий ответ будет , потому что вы можете, , а длинный ответ заключается в том, что значки оказывают большое влияние, даже если они маленькие. Иконки не только преодолевают языковой барьер, но и могут при необходимости привлечь внимание пользователей, помочь пользователям ориентироваться в вашем продукте и принимать более взвешенные решения. Они также вносят свой вклад в общий внешний вид. Вы бы не хотели, чтобы другие дизайнеры задавали тон вашим проектам, так зачем позволять кому-то еще задавать тон вашим иконкам?
Кроме того, в настоящее время дизайнеры продуктов должны постоянно расширять свой набор инструментов, и рисование иконок, безусловно, является отличным инструментом.
Это руководство познакомит вас с основами рисования значков и научит рисовать собственные значки всего за пять шагов. Вы можете следовать шаг за шагом и создать свой собственный значок к концу этой статьи. (Да 🎉 )
Итак, что именно я имею в виду, когда говорю иконки ? Значок — это графический символ в цифровом мире, представляющий объект или функцию.
Когда люди ссылаются на значки, они могут иметь в виду любой из множества типов значков; В этой статье я сосредоточусь на системных значках, хотя многое из того, что я здесь объясняю, верно и для разных типов значков.
А почему для нас так важны системные значки?
Значки придают изделию характер и стиль и облегчают пользователям навигацию и выполнение задач. Иногда платформы могут быть загромождены текстом, действиями, изображениями и т. д. Эта визуальная перегрузка имеет тенденцию сбивать пользователей с толку, и замена некоторых слов значками может значительно уменьшить эту проблему.
При этом рекомендуется использовать значки с меткой рядом с ними или при взаимодействии с ними (например, всплывающую подсказку), чтобы избежать путаницы, особенно если вы не уверены, насколько ясно назначение вашего значка.
Теперь, когда мы находимся на одной странице, я думаю, пришло время перейти к разделу «С чего, черт возьми, мне начать?»
Шаг 1: Знакомство со стилями значковПервый шаг в создании значков это понимание основных стилей иконок, которые используются сегодня. Системные значки обычно просты и минимальны, поскольку они должны быть видны в небольших размерах и на экранах, полных деталей.
Существует множество способов рисования значков, но я сосредоточусь на трех наиболее распространенных стилях:
Контурные значки
Также известные как линейные значки, они простые, чистые и современные, и часто сочетаются с плавные толстые линии. Этот стиль тесно связан с Apple OS.
Значки с глифами
Монохромные значки состоят из простых форм и легко узнаваемы.
Google использует стиль значков глифов в качестве основного стиля значков в Material Design.
Цветной значок
Также известен как заполненный значок; в основном, это выделенная иконка с небольшим количеством цвета внутри.
Разобравшись с основными стилями, используемыми сегодня в цифровых продуктах, и выбрав подходящий для нас стиль, мы можем перейти к настройке сетки иконок.
Шаг 2: выберите размер значка
Когда дело доходит до выбора размера по умолчанию для вашего пакета значков, не так много правильных и неправильных способов сделать это; это в основном зависит от общего стиля вашего продукта и размера ключевых компонентов в вашей системе (кнопки, входы и т. д.). Иконки обычно должны быть выровнены с другими компонентами или быть их частью, например, внутри кнопки. , поэтому размер значка должен совпадать.
Самый распространенный размер значка — 24px , это почти значение по умолчанию во всех крупных дизайн-системах, и этот размер отлично работает независимо от того, разрабатываете ли вы дизайн для веб-сайта или для мобильных устройств.
Обычно это мой размер. Чтобы помочь вам принять правильное решение, я создал эту памятку, которая должна дать вам представление об идеальном размере значка на основе компонентов, которые вы уже установили.
Тот факт, что вы устанавливаете размер по умолчанию, не означает, что вам придется использовать этот размер исключительно для всего вашего продукта; очень часто для вашего пакета значков создается более одного размера. Я рекомендую начать с размера по умолчанию, и при необходимости вы можете добавить один меньший размер и один больший размер.
Шаг 3. Настройка сеткиЧтобы значки выглядели четкими, выровненными и цельными, рекомендуется использовать сетку значков. Есть несколько типов сеток, и моя основана на Google Material Design.
Я мог бы написать целую статью только об этой сетке, но я не буду углубляться в нее, я просто хочу выделить ее основные элементы и способы их эффективного использования, поскольку они помогают нам удостовериться, что мы создаем идеальную по пикселям икона.
- Пиксельная сетка — отраслевым стандартом обычно является 1 пиксель. Это помогает идеально выровнять фигуры по одному пикселю и правильно измерить расстояние между линиями и фигурами. Делая это, мы гарантируем, что значок не будет пиксельным и идеально выровнен.
- Область обрезки — Область обрезки — это область, в которую не следует помещать какой-либо контент; пространство, оставшееся внутри, называется безопасной зоной.
- Keyline Shapes — Чертежи трех основных фигур: прямоугольника, квадрата и круга. Это основные геометрические фигуры, которые мы будем использовать для создания значков, и эти чертежи помогут нам выровнять все значки в одинаковое положение и размер в сетке.
- Ортогональный — Ортогональные линии — еще один инструмент, который помогает нам выравнивать значки под разными углами, например, на 45* или 90*.
Использовать сетку довольно просто: загрузите созданный мной шаблон и используйте его в качестве основы для монтажной области каждый раз, когда рисуете новую иконку.
Выполните следующие шаги, чтобы увидеть, как я выравниваю различные значки на сетке для создания визуальной гармонии.
Иконки — отличный инструмент для улучшения вашего дизайна, но они также могут навредить удобству использования при неправильном использовании. Чтобы понять, что влияет на удобство использования значка, нам необходимо ознакомиться с двумя основными категориями, из которых можно черпать вдохновение для значка:
- Значки сходства — когда вы копируете форму значка из реального объекта, например. , корзина для удаления.
- Справочные значки — эти значки вдохновлены ссылками или аналогиями с физическими предметами или процессами, например, значок подарка для кода купона.
Можно с уверенностью сказать, что значки сходства более удобны в использовании, поскольку они черпают вдохновение из знакомого объекта, с которым пользователь, вероятно, знаком.
Тем не менее, очевидно, что это не всегда возможно, особенно при разработке продуктов, которые не являются физическими.
Нет необходимости каждый раз изобретать себя заново; с иконками на самом деле желательно следовать знакомому и очевидному, а не двусмысленному. Пусть пользователи увидят то, с чем они знакомы.
Скорее задайте свой тон и уникальность стилем и деталями, чем общими формами. Например, ниже вы можете увидеть, как нарисовать значок корзины в восьми разных стилях. Значение и метафора одинаковы; единственное, что изменилось, это детали.
Так как же все-таки найти вдохновение?
Сначала подумайте о значении, которое вы хотите передать, а затем найдите предмет, на который вы пытаетесь походить. Сохраните несколько изображений, которые соответствуют вашей идее, и мы вскоре их используем.
Затем подумайте о сообщении, которое вы хотите передать с помощью своих значков. Они округлые и уютные? Они острые и резкие? Попытайтесь понять, какие символы должны символизировать ваши иконки.
Рекомендуется выбирать стиль на основе общего внешнего вида вашего продукта.
Все мы знаем, что все, что нас окружает, можно упростить до геометрических фигур, и именно это мы и собираемся сделать. Пожалуйста, найдите секунду, чтобы осмотреться вокруг, посмотрите на предметы, которыми вы пользуетесь ежедневно, сосредоточьтесь на одном предмете и опишите его различные части в виде геометрических фигур. Это быстрое упражнение поможет вам упростить объекты, которые вы хотите рисовать дальше.
При создании значков основными формами, с которыми мы работаем, являются квадраты, прямоугольники, треугольники, овалы и линии. Теперь я проведу вас через процесс создания значка, и вы можете следовать инструкциям вместе со мной.
Нарисуем дискету вместе!
Следуя нашим предыдущим шагам, на данный момент я уже выбрал стиль для своих иконок (контур), я определил базовый размер (24px, как обычно 🤷♀️), моя сетка готов, и я погуглил и сохранил несколько изображений для подобия , теперь я готов начать рисовать.
- Упрощение — Я проделываю в уме упражнение по упрощению, о котором упоминал ранее — я вижу, что после упрощения дискета состоит из одного большого квадрата и двух прямоугольников.
- Эксперимент — Затем я свободно рисую нужные мне фигуры; Я не сосредотачиваюсь на деталях, потому что сначала хочу получить общее представление о вещах и быстро поэкспериментировать с различными структурами и идеями.
- Выравнивание — После того, как я примирился с тем, что у меня есть, я выравниваю значок по сетке и убеждаюсь, что он точно соответствует пикселям с ключевыми формами; если нет, я корректирую соответственно.
- Тонкая настройка — Добавление мелких деталей для придания большей выразительности, сглаживание при необходимости и проверка моего результата без сетки и в небольшом масштабе, чтобы убедиться, что он работает в нормальном размере.
Во-хо! Если вы дошли до этого места и следовали всем инструкциям, я, вероятно, могу поздравить вас с рисованием вашей первой иконки! 👏👏👏
Итак, давайте посмотрим, как просто рисовать иконки:
- Во-первых, найдите свой голос иконки и стиль , подумайте, какую историю вы хотите, чтобы ваши иконки рассказывали.
