Как сделать иконку в иллюстраторе
Как сделать свой первый набор векторных иконок
Шаг первый: Тема
Определиться с тематикой вашего будущего сэта иконок, например: новы год, какое-то массовое событие, иконки одежды для интернет- магазина или кухонные приборы.
Но можно и не выбирать общую тему и нарисовать самые распространенные иконки, вроде бургербаттона, иконки письма, и остальные…те образы, которые можно встретить почти на всех сайтах.
Шаг второй: Стиль
На dribbble я создал папку под названием “стили иконок” и собираю туда стили, в которых я хочу нарисовать следующий сэт. Так же я показываю ее клиентам которые не знают, какой стиль им нужен.
Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру ( outline icon), сложные или комплексные ( мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.
Шаг третий: Образы
Выбрав тему и стиль, приступаем к отрисовке скетчей; уровень детализации для новичков должен быть максимальным, потом вам будет проще отрисовать все в иллюстраторе.
Опытные чуваки могут вообще не рисовать скетчей, а сделать себе список образов и сразу работать с вариациями.
Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.
Шаг четвертый: Размер
Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.
Шаг пятый: Процес
Создайте документ со значениями
Где Spacing — расстояние между артбордами.
Width и Height — высота и ширина артборда.
Raster Effects — разрешение (ppi) для иконок подойдет 72
Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.
Где можно продавать:
graphicriver.net — свободная площадка для торговли любым цифровым контентом.
creativemarket.com — что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.
thenounproject.com — сайт наверно с самой большой базой иконок, они распространяются на выбор: или бесплатно или за единичный платеж, еще есть функция месячной подписки, но я бы не ставил на этот сервис если вы хотите заработать.
icons8.com — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.
Как создать 10 простых иконок и их вариации в Adobe Illustrator
Сегодня вы узнаете, как создать набор из десяти топовых UI-иконок при помощи базовых фигур и инструментов, которые предлагает Illustrator.
Если вы ищете больше иконок в разных стилях, переходите на GraphicRiver.
Сделайте глоток свежезаваренного кофе, и мы приступим.
1. Как настроить новый файл проекта
Откройте Illustrator и настройте Новый документ (Файл > Новый или Control-N), применив следующие параметры:
Во вкладке с Расширенными настройками:
2. Как настроить пользовательскую сетку
Хотя сегодня мы не будем работать с иконками, мы создадим иллюстрацию в точных пикселях, поэтому давайте настроим небольшую сетку, чтобы можно было полностью контролировать наши фигуры.
Шаг 1
Перейдите в Редактировать > Установки > Направляющие и сетка и задайте следующие параметры:
Подсказка: вы можете узнать больше о сетках, почитав это детальное руководство о том, как работает система сеток Illustrator.
Шаг 2
Когда настроите пользовательскую сетку, для чёткости фигур нужно активировать функция Привязки к сетке и Привязки к пикселям под меню Вид, которые трансформируются в Привязку к пикселям всякий раз при входе в Режим предпросмотра пикселей (если вы используете старую версию Illustrator).
Если вы не знакомы с работой с точными пикселями, я очень рекомендую почитать моё руководство по созданию рисунка с точными пикселями, которое быстро расширит ваши технические навыки.
3. Как настроить слои
В новом созданном документе нужно структурировать проект, создав несколько слоёв, чтобы отделить координатную сетку от самих иконок. Если вы знакомы с моими предыдущими руководствами, то заметите, что в этом мы применим немного другой подход, т.к. проект будет создан на Монтажных областях, а не Слоях из-за большого количества иконок.
Откройте панель Слоёв и создайте два слоя, которые назовём следующим образом:
4. Как создать координатные сетки
Координатные (или базовые) сетки – это набор точно ограниченных координатных поверхностей, которые позволяют нам создавать наши иконки, исходя из их размера и однородности.
Обычно размер сеток определяет размер самих иконок, и этот момент нужно учитывать в первую очередь в начале нового проекта, т.к. начинать всегда будем с самого маленького размера и далее.
В нашем случае мы собираемся создать набор иконок одного размера, а точнее 64 х 64 пикселей, что соответствует среднему размеру.
Шаг 1
Перейдите на нужный слой (первый) и Инструментом «Прямоугольник» (М) создайте оранжевый ( #F15A24 ) квадрат 64 х 64 пикселей, который выровняем по центру первой Монтажной области и используем для определения общего размера наших иконок.
Шаг 2
Добавьте маленький квадрат 56 х 56 пикселей ( #FFFFFF ), который поместим на предыдущую фигуру, т.к. она будет нашей активной областью рисования, создав круговую прослойку толщиной 4 пикселя.
Шаг 3
Выделите и сгруппируйте два квадрата при помощи комбинации клавиш Control-G, а затем создайте оставшиеся сетки из 19-ти копий (Control-C > Control-F), которые поместим на каждую пустую Монтажную область. Когда будет готово, заблокируйте текущий слой перед тем, как перейти к следующему разделу.
5. Как создать иконки навигации
Если вы успешно создали маленькие координатные сетки, перейдите на следующий слой (второй) и создайте первую группу иконок, которая поможет нам лучше ориентироваться.
Шаг 1
Создайте основную фигуру первой иконки из круга 48 х 48 пикселей, окрасьте его в цвет #DCEEFF и выровняйте по центру первой Монтажной области.
Шаг 2
Создайте контур при помощи метода Обводки, создав копию фигуры (Control-C), которую вставим на передний план (Control-F), изменим цвет на #629CF9 и поменяем Заливку с Обводкой(Shift-X). Установите Толщину получившегося контура на 8 пикселей, выделив и сгруппировав все составляющие фигуры текущей секции, нажав Control-G.
Шаг 3
Начните работать над маленькой стрелкой влево, создав её фигуру из линии Обводки шириной 24 пикселя и толщиной 8 пикселей (#629CF9 ) со Скруглёнными концами, а затем выровняйте её по центру большой монтажной области.
Шаг 4
Завершите создание иконки, нарисовав кончик стрелки из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами и Стыками. Когда будет готово, выделите и сгруппируйте две фигуры (Control-G), а затем сгруппируйте все составляющие фигуры иконки перед тем, как перейти к следующему шагу.
Шаг 5
Создайте переднюю иконку из копии (Control-C) предыдущей иконки, вставьте (Control-F) на вторую Монтажную область и отразите по вертикали (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По вертикали).
Шаг 6
Шаг 7
Добавьте иконку прокрутки вниз из копии (Control-C) только что созданной иконки, которую мы вставим (Control-F) на четвёртую монтажную область и отразим по горизонтали (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По горизонтали).
Шаг 8
Для кнопки обновления создайте круг 36 х 36 пикселей с Обводкой толщиной 8 пикселей ( #629CF9 ), который выровняем по центру нижнего края активной области рисования.
Шаг 9
Откройте круг, удалив его верхнюю левую четверть, установив Концы получившегося контура на Скруглённые на панели Обводки.
Шаг 10
Создайте кончик стрелки из прямоугольника 18 х 24 пикселей, окрасьте его в цвет #DCEEFF и расположите, как на картинке.
Шаг 11
Превратите прямоугольник в стрелку влево, добавив новую опорную точку в центре его левого края при помощи Инструмента «Добавить опорную точку» (+), а затем удалите внешние левые точки, нажав на них Инструментом «Удалить опорную точку» (-).
Шаг 12
Завершите создание стрелки и самой иконки, создав для получившейся фигуры контур толщиной 8 пикселей ( #629CF9 ) со Скруглённым стыком, выделив и сгруппировав (Control-G) обе фигуры, а после этого и всю иконку.
6. Как создать иконки поиска и увеличения
Если вы закончили работать с первой иконкой, перейдите к следующей Монтажной области и начните работать над следующей группой.
Шаг 1
Создайте область лупы иконки поиска из круга 40 х 40 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), сгруппируйте (Control-G) и выровняйте по верхнему левому углу активной области рисования.
Шаг 2
Нарисуйте область ручки из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, как на картинке.
Шаг 3
Укоротите длину ручки, выделив её верхнюю опорную точку Инструментом «Прямое выделение» (А) и затем перетащите её по диагонали вниз, удерживая Shift для создания прямой линии. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей иконке.
Шаг 4
Создайте иконку увеличения из копии (Control-C) только что созданной иконки, затем поместите её (Control-F) на следующую Монтажную область, добавив знак плюса в центре линзы из двух линий Обводки длиной 16 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующему шагу.
Шаг 5
Добавьте иконку уменьшения из копии (Control-C) только что созданной иконки, вставьте (Control-F) на следующей монтажной области и дважды кликните на знаке плюса, чтобы его изолировать. Затем разгруппируйте (щелчок правой кнопкой > Разгруппировать) и удалите вертикальную линию Обводки.
7. Как создать иконки видимости
Переходим к третьей группе иконок, поэтому перейдите на следующую Монтажную область (девятую), и мы начнём.
Шаг 1
Создайте эллипс 48 х 32 пикселей, окрасьте в цвет #DCEEFF и выровняйте по центру Монтажной области.
Шаг 2
Ухватите левую и правую опорные точки Инструментом «Опорная точка» (Shift-C) и превратите эллипс в фигуру, похожую на глаз.
Шаг 3
Создайте контур получившейся фигуры толщиной 8 пикселей ( #629CF9 ) со Скруглённым стыком, выделите и сгруппируйте две фигуры при помощи комбинации клавиш Control-G.
Шаг 4
Добавьте область зрачка из круга 16 х 16 пикселей, окрасьте в цвет #629CF9 и выровняйте по центру двух фигур, которые мы только что сгруппировали.
Шаг 5
Добавьте маленькой отражение из круга 8 х 8 пикселей, окрасьте в цвет #DCEEFF и выровняйте по верхнему правому углу зрачка, а после этого сгруппируйте (Control-G) обе фигуры. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей.
Шаг 6
Создайте копию (Control-C) только что созданной иконки, вставьте на десятую монтажную область и нарисуйте диагональную линию из Обводки толщиной 8 пикселей ( #629CF9 ), после чего выделите и сгруппируйте (Control-G) все фигуры.
8. Как создать иконку совместного доступа к файлам
Давайте честно, настоящий набор UI-иконок невозможно представить без иконок совместного доступа к файлам, поэтому давайте их добавим.
Шаг 1
Сначала создадим иконку загрузки, создав основные фигуры для коробки из прямоугольника 48 х 12 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), который сгруппируем (Control-G) и выровняем по центру нижнего края активной области рисования.
Шаг 2
Добавьте маленькие сегменты из линий Обводки высотой 8 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, которые разместим по бокам только что созданных фигур, выделив их и создав большую группу (Control-G).
Шаг 3
Добавьте стрелку вверх из копии (Control-C) только что созданной стрелки для иконки навигации, затем вставьте (Control-F) на текущую монтажную область и выровняйте по центру верхнего края активной области рисования. Когда стрелка будет на месте, выделите и сгруппируйте все составляющие фигуры иконки, нажав Control-G.
Шаг 4
Создайте иконку скачивания из копии (Control-C) иконки, которую мы только что создали, затем вставьте её на следующую монтажную область и зеркально отразите по горизонтали маленькую стрелку (щелчок правой кнопкой > Трансформировать > Зеркально отразить > По горизонтали).
9. Как создать кнопку информации
Возможно, вы, как и я, не любите следующий значок, т.к. интерфейсы достаточно просты в использовании, но глубоко внутри я понимаю, что иногда он нужен.
Шаг 1
Создайте основную фигуру иконки из круга 48 х 48 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), затем сгруппируйте (Control-G) и выровняйте по центру 13-й монтажной области.
Шаг 2
Создайте маленькую точку восклицательного знака из круга 8 х 8 пикселей с цветом #629CF9 и затем выровняйте по центру больших фигур, расположив на расстоянии 4 пикселя от нижнего края контура.
Шаг 3
Добавьте отрезок линии из Обводки высотой 12 пикселей и толщиной 8 пикселей ( #629CF9 ), а затем расположите над точкой на расстоянии 4 пикселя. Выделите и сгруппируйте (Control-G) две фигуры, а после этого сгруппируйте всю иконку перед тем, как перейти к следующей.
10. Как создать иконку общего доступа
Общий доступ – это то, что делает Интернет отличным местом, поэтому я собираюсь поделиться с вами простым способом создания такой иконки.
Шаг 1
Создайте основные части иконки из трёх кругов 16 х 16 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), а затем по отдельности сгруппируйте (Control-G) и расположите, как на картинке.
Шаг 2
Нарисуйте отрезок линии, соединяющий все три части при помощи контура толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами и Стыками. Когда будет готово, отправьте получившийся контур на задний план, щёлкнув правой кнопкой > Монтаж > Отправить на задний план, а после этого выделите и сгруппируйте все составляющие фигуры иконки, нажав Control-G.
11. Как создать иконки переключения
Нам нравится включать и выключать что-нибудь, поэтому сейчас мы узнаем, как создать свои переключатели.
Шаг 1
Начните создавать иконку с выключенным состоянием, создав основную фигуру из скруглённого прямоугольника 48 х 32 пикселей ( #DCEEFF ) с Угловым радиусом 16 пикселей и контуром толщиной 8 пикселей ( #629CF9 ), затем сгруппируйте (Control-G) и выровняйте по центру следующей монтажной области.
Шаг 2
Шаг 3
Создайте включённое состояние из копии (Control-C) только что созданной фигуры, которую вставим на следующую монтажную область (Control-F), а затем зеркально отразим по вертикали (щелчок правой кнопкой > Трансформировать > Зеркальное отражение > По вертикали).
12. Как создать иконку меню «гамбургер»
Следующий объект из нашего списка стал универсальным символом.
Шаг 1
Для центральной части меню создайте круг 8 х 8 пикселей, окрасьте его в цвет #629CF9 и выровняйте по центру левого края активной области рисования.
Шаг 2
Добавьте перекладину из линии Обводки шириной 36 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, затем выровняйте по центру правой стороны активной области рисования. Когда контур будет на месте, выделите его и круг и сгруппируйте их вместе, нажав Control-G.
Шаг 3
Добавьте верхнюю и нижнюю части из двух копий (Control-C > Control-F дважды) фигур, которые мы только что сгруппировали, затем расположите на расстоянии 8 пикселей от оригинала. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей иконке.
13. Как создать иконку настроек
Мы все можем согласиться, что иконка настроек с шестерёнками или ползунками – нужная вещь в любом UI-наборе, т.к. мы любим вносить изменения, если вы понимаете, о чём я.
Шаг 1
Создайте ползунки иконки из трёх линий Обводки шириной 48 пикселей и толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами, которые расположим по вертикали на расстоянии 16 пикселей друг от друга, выровняв их по центру пустой монтажной области.
Шаг 2
Добавьте ручки регулировки из трёх кругов 12 х 12 пикселей ( #DCEEFF ) с контуром толщиной 8 пикселей ( #629CF9 ), затем по отдельности сгруппируйте (Control-G) и расположите на ползунках, как показано на рисунке. Когда будет готово, не забудьте выделить и сгруппировать (Control-G) все составляющие фигуры иконки перед тем, как перейти к следующей.
14. Как создать иконки лайков
Мы переходим к последней, самой приятной группе иконок – к маленьким сердечкам.
Шаг 1
Начните работать над верхней областью кнопки лайка, создав круг 28 х 28 пикселей, затем окрасьте его в цвет #DCEEFF и расположите на расстоянии 8 пикселей от верхнего края активной области рисования и 4 пикселя – от левого края.
Шаг 2
Создайте ещё один круг 28 х 28 пикселей ( #DCEEFF ), затем расположите его на противоположной стороне активной области рисования, сохранив одинаковые промежутки. Когда обе фигуры будут на месте, выделите и объедините их в один большой объект при помощи Режима объединения фигур на панели Обработки контуров.
Шаг 3
Включите режим Предпросмотра пикселей (Alt-Shift-Y), выделите и удалите нижнюю половину получившейся фигуры, а затем привяжите верхнюю центральную опорную точку к Пиксельной сетке.
Шаг 4
Возьмите Инструмент «Перо» (Р) и нарисуйте нижнюю фигуру сердца, сгладив боковые опорные точки при помощи функции «Преобразовать выделенные опорные точки в плавную линию». Выделите и переместите некоторые точки указателей, как показано на картинке, отключив режим Предпросмотра пикселей (Alt-Control-Y) перед тем, как перейти к следующему шагу.
Шаг 5
Создайте контур получившейся фигуры толщиной 8 пикселей ( #629CF9 ) со Скруглёнными стыками, выделите и сгруппируйте (Control-G) две фигуры перед тем, как перейти к следующей.
Шаг 6
Создайте последнюю иконку из копии только что созданной фигуры, затем поместите на последней монтажной области и превратите в кнопку дизлайка, добавив диагональную перекладину из Обводки толщиной 8 пикселей ( #629CF9 ) со Скруглёнными концами. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как сохранить проект.
Отличная работа! Наш маленький набор UI-иконок готов!
Как обычно, надеюсь, что вам понравилось это пошаговое руководство, и вы узнали что-то новое и полезное!