Adobe illustrator рисование иконок

Как сделать свой первый набор векторных иконок

Шаг первый: Тема

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

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

Шаг второй: Стиль

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

Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру ( outline icon), сложные или комплексные ( мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.

Шаг третий: Образы

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

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

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

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями

Где Spacing — расстояние между артбордами.

Width и Height — высота и ширина артборда.

Raster Effects — разрешение (ppi) для иконок подойдет 72

Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о 5-ти простых правилах создания красивых иконок.
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать:

graphicriver.net — свободная площадка для торговли любым цифровым контентом.

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

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

icons8.com — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.

Источник

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

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

Создаем новый документ

Запустите Illustrator и выберите «Файл» > «Создать», чтобы открыть пустой документ. Введите имя для своего файла, настройте размеры, а затем выберите Пикселы в качестве единиц и RGB в качестве цветового режима .

Затем перейдите в меню Редактировать > Установки > Основные и установите Перемещение курсора на 1 пиксель , затем перейдите к Единицам измерения , чтобы убедиться , что они установлены как на скриншоте ниже. Я обычно работаю с этими настройками, и они помогут вам на протяжении всего процесса рисования.

Создаем изометрическую сетку

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

Возьмите инструмент Отрезок лини (\) и щелкните в любом месте на вашей монтажной области, чтобы открыть окно настроек. Введите 400 пикселей в поле Длина и 30 градусов в поле Угол, потому что в изометрических чертежах все должно быть нарисовано под этим углом. Поместите линию где-нибудь на левой стороне вашего артборда размером 200 x 200 пикселей и нарисуйте 1 штрих .

С выделенной линией перейдите в Эффект > Исказить и трансформировать > Трансформировать . Введите 18 px в поле Перемещение > По горизонтали и укажите 30 копий, чтобы размножить линию. У вас должно быть достаточно линий, чтобы покрыть артборд.

С выделенной линией перейдите в Объект > Разобрать оформление, чтобы разобрать эффект Трансформация, примененный на предыдущем шаге. Оставьте получившуюся группу выбранной и нажмите «Горизонтальное выравнивание по центру», а затем «Вертикальное выравнивание по центру» на панели «Выравнивание» , убедившись, что установлен флажок «Выровнять по монтажной области» (1).

С выбранной группой линий, перейдите в Объект > Трансформировать > Зеркальное отражение . Установите Вертикальное и нажмите Копировать, чтобы получить отражение этих линий над монтажной областью (2).

Я не считаю необходимым добавлять вертикальные линии в сетку, поэтому выберите две группы линий и перейдите в меню «Просмотр» > «Направляющие» > «Создать направляющие» . Это оно! Изометрическая сетка готова. Держите ее на отдельном слое, назвав его «сетка », и создайте новый слой над ним для первой иконки еды.

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

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

Как создать изометрическую иконку сэндвича

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

Возьмите Перо (P) и нарисуйте первый путь, длина которого составляет 7 квадратов сетки. Отсчитайте еще 7 квадратов сетки для других сторон и закройте фигуру, чтобы получить изометрический квадрат. Придайте ему бежевый цвет заливки и темно-коричневую обводку размером 2 pt . На панели «Обводка» нажмите параметры «Круглые концы» и «Круглые углы» . Я назову эту форму «нижний хлеб ».

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

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

Нарисуйте правую сторону хлеба таким же образом.

Теперь рассмотрим как сделать изометрические круги в Иллюстраторе. Сначала скопируйте и вставьте (Shift-Control-V) «нижний хлеб», чтобы получить копию (1). Перейдите в Эффект > Стилизация > Скругленные углы и примените очень высокое значение Радиуса, например 100 px или настолько высокое, насколько это возможно. Выберите Разобрать оформление в меню Объект. Вы только что получили изометрический круг (2). Легко, правда?

Пока круг остается выделенным, выберите «Объект»> «Контур» > «Добавить опорные точки», чтобы добавить дополнительные точки слева, справа, сверху и снизу. Эти точки полезны при выравнивании круга с сеткой или другими фигурами в вашем дизайне (3).

Уменьшите круг, полученный на предыдущем шаге, удерживая клавишу Shift, чтобы сохранить пропорции. Затем переместите его рядом с нижним правым краем хлеба. Залейте его указанным цветом и примените ту же обводку (1).

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

Сделайте копию «ломтика салями» и расположите его рядом с нижним левым краем хлеба (3).

Скопируйте и вставьте (Shift-Control-V) «нижний хлеб», чтобы сделать его копию на переднем плане. Используйте технику Круглых углов , чтобы получить новый изометрический круг, как показано ранее (1).

Пока круг остается выделенным, перейдите к «Эффекту»> «Исказить и трансформировать» > «Зигзаг» и примените показанные настройки, чтобы получить волнистые края. Не забудьте разобрать этот эффект, перейдя в Объект > Разобрать оформление, и вы получите форму салата. Залейте его светло-зеленым и примените те же настройки обводки (2).

Снова выберите «нижний хлеб» и перейдите в Объект > Трансформировать > Масштабирование . Введите 90% в поле Равномерно и нажмите Копировать, чтобы получить уменьшенную копию изометрического квадрата. Поместите его поверх всех фигур, перейдя в Объект > Монтаж > На передний план (Shift-Control-]) . Это будет «кусочек сыра» в бутерброде, и вы можете покрасить его в желтый цвет. Переместите его немного вверх, пару раз нажав клавишу со стрелкой вверх на клавиатуре.

Выделите весь хлеб в нижней части бутерброда, а затем скопируйте и вставьте его (Shift-Control-V), чтобы сделать его копию. Сгруппируйте (Control-G) три фигуры и переместите их вверх на три квадрата сетки (1).

Чтобы создать текстуру на верхнем хлебе, случайным образом расположите несколько маленьких изометрических кругов, как вы делали для салями. Окрасьте их с бежевым и уменьшить непрозрачность до 35% (2).

На этом этапе квадратный значок сэндвича готов, и вот как выглядит значок без сетки

Как создать изометрическую прямоугольную сэндвич-иконку

Давайте создадим новый артборд внутри документа для второй иконки. Возьмите инструмент Прямоугольник (M) и нарисуйте новый квадрат 200 x 200 px ; затем перейдите в Обект> Монтажые области > Преобразовать в монтажные области.

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

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

Мы будем использовать ту же технику для создания изометрического круга, начиная с изометрического квадрата, поэтому возьмите инструмент Перо (P) и нарисуйте квадрат, отсчитывая по 4 квадрата сетки с каждой стороны. Сделайте копию и поместите ее в верхнюю правую часть монтажной области (1).

Выбрв оба квадрата, перейдите в Эффект > Стилизация > Скругленные углы и примените радиус в 100 пикселей или выше. Выберите Разобрать оформление в меню Объект, чтобы разобрать примененный эффект, и вы получите два круга (2).

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

Продолжая использовать инструмент прямого выбора (A) , выберите две соответствующие конечные точки и нажмите Control-J, чтобы соединить их (2). Повторите то же самое с двумя другими конечными точками вверху, и вы получите практически изометрический прямоугольник с закругленными углами. Покрасьте хлеб светло-бежевым и добавьте такую же темную обводку в 2 пт (3).

Скопируйте и вставьте обратно (Control-B) форму хлеба и используйте инструмент прямого выбора (A), чтобы выбрать только указанные точки (1). Слегка сдвиньте их вниз, нажав клавишу со стрелкой вниз на клавиатуре несколько раз. Я назову получившуюся форму «нижней булочкой». Измените цвет заливки на чуть более темный оттенок бежевого (2).

Теперь, когда вы освоили рисование изометрических кругов, создайте и расположите три из них на хлебе в виде помидоров. Цвет их красный (1).

Сделайте меньшие копии трех кругов и замените красную заливку белым. Это будет моцарелла в бутерброде (2).

Выберите форму хлеба, а затем скопируйте ее (Shift-Control-V), чтобы сделать копию поверх остальных. Перейдите в Объект > Трансформировать > Перемещение и введите -18 px в поле По вертикали и 90 градусов в поле Угол. Вы получите верхнюю булочку. Замените цвет заливки на более темный оттенок бежевого.

Давайте добавим последние штрихи. Возьмите инструмент Отрезок линии (\) и используйте его, чтобы нарисовать линию длиной 40 пикселей под углом 120 градусов . Сделайте три копии и разместите их на верхней булочке, как показано (1).

Дайте им обводку 8 пт и выберите «Профиль» на панели «Обводка» . Выберите «Разобрать оформление» в меню «Объект» , чтобы превратить обводки в заполненные фигуры, а затем перейдите в «Объект» > «Составной контур» > «Создать» (Control-8) (2).

Выберите верхнюю булочку, а затем скопируйте (Shift-Control-V), чтобы сделать ее копию поверх остальных фигур. Перейти к Объект > Контур > Создать параллельный контур и применять смещение -1 px, чтобы получить немного меньшую форму (1).

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

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

Как создать иконку изометрического супа

Создайте в документе третий артборд размером 200 x 200 пикселей и выровняйте по нему изометрическую сетку, как вы делали раньше. Кроме того, создайте новый слой на панели «Слои» под названием «суп».

Нарисуйте изометрический круг, начиная с квадрата 10 х 10, как вы узнали ранее (1). С выделенным кругом перейдите в Объект > Трансформировать > Масштабирование и введите 89 % в поле Равномерно . Нажмите «Копировать», чтобы получить меньший круг внутри (2).

Сделайте копию большего черного круга и измените значение высоты на 130 пикселей на панели «Трансформирование» . Вы получите красную овальную форму (1).

Затем выберите красную форму вместе с копией черного круга и нажмите Разделить в панели Обработка контуров, затем Разгруппировать (Shift-Control-G) . В результате вы получите три отдельные фигуры, окрашенные в пурпурный, розовый и зеленый цвета на изображении ниже (2).

Удалите верхнюю фиолетовую фигуру, потому что она нам не нужна, и теперь у нас есть суповая тарелка (3).

Раскрасьте розовые и зеленые фигуры светло-серым и примените все туже коричневую обводку, чтобы сохранить общий стиль (1). Затем выберите оригинальные черные и оранжевые круги и перейдите в Объект > Составной контур > Создать (Control-8) . Переместите получившийся составной путь перед остальными, перейдя в Объект > Монтаж > На передний план (Shift-Control-]) , и это будет внешний край чаши. Покрасьте его белым и примените те же настройки обводки (2).

Выберите круг, который раньше был розовым; перейдите в Объект > Трансформировать > Масштабирование и введите 40%в поле Равномерно. Нажмите Копировать, и вы получите меньший круг. Переместите его на дно чаши (3).

Выберите белый край чаши, а затем скопируйте и вставьте (Control-F) . Затем перейдите в Объект > Составной контур > Отменить, чтобы получить отдельные круги. Возьмите меньшую из двух фигур, потому что она нужна нам для создания супа (1).

Сделайте еще одну копию оранжевого круга и переместите его немного вниз (красный круг). Выбрав два оранжевых и красных кружка, нажмите «Пересечение » на панели «Обработка контуров» (2). Заполните полученную форму супа светло-желтым и добавьте ту же обводку (3).

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

Выберите нижний сегмент и добавьте ему красную обводку в 2 пт, чтобы создать декоративную линию на чаше (3). Выберите Объект > Разобрать, чтобы превратить обводку в заполненную форму.

Выберите основную форму чаши, а затем скопируйте и вставьте ее (Shift-Control-V), чтобы сделать копию поверх остальных. Перейти к Объект > Контур > Создать параллельный контур и применить Смещение от — 1 , чтобы получить немного меньшую форму. Уберите у этой фигуры обводку и залвку, хотя по визуальным причинам я покрасил ее в зеленый (1).

Выберите эту меньшую форму чаши вместе с красной полосой и нажмите Пересечение на панели Обработка контуров (2).

Давайте добавим немного лапши в суп. Возьмите инструмент Отрезок линии (\) и используйте его, чтобы нарисовать линию длиной 111 px под углом 30 градусов, потому что даже лапша должна быть изометрической при создании изометрического рисунка. Сделайте две копии этой линии и расположите их в верхней левой части супа (1).

Задайте им все ту же обводку; затем перейдите в Эффект > Исказить и трансформировать > Зигзаг и примените показанные настройки. Вы получите волнистый вид лапши (2).

Выберите форму супа, а затем скопируйте и вставьте (Shift-Control-V), чтобы сделать копию поверх остальных форм. Затем перейдите в Объект > Контур > Создать параллельный контур и применять смещение в -1 px, чтобы получить немного меньшую форму. берите у копии обводку и заливку, хотя по визуальным причинам я выделил ее синим цветом (1).

Теперь выберите лапшу вместе с меньшей формой супа и перейдите в Объект > Обтравочная маска > Сделать (Control-7) (2).

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

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

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

Источник