() translation by (you can also view the original English article)
Пасха - это прекрасный весенний праздник, который хорошо известен своей традицией раскрашивания яиц. Он обычно связан с нежными, яркими красками и весенним настроением. В этом уроке мы наглядно увидим процесс создания плоских Пасхальных иконок, используя основные формы, панель Pathfinder и некоторые новые инструменты Adobe Illustrator.
Помимо создания Пасхальных иконок, эти методы могут использоваться для создания любых плоских иконок, а также плоских баннеров. Вы можете найти множество примеров подобной графики в плоском стиле на Envato Market для большего вдохновения.
1. Иконка праздничного пасхального яйца
Шаг 1
Давайте начнем с создания основы для яйца. Возьмите Инструмент "Эллипс"/Ellipse Tool (L) и нарисуйте круг размером 70 x 70 px. Выберите боковые опорные точки с помощью Инструмента "Прямое выделение"/Direct Selection Tool (A) и перетащите их немного вниз, делая нижнюю часть формы выпуклой. Затем выберите верхнюю опорную точку и перетащите её вверх, делая верхнюю часть яйца заостренной.
Шаг 2
Мы будем использовать яркую весеннюю палитру с нежными цветами, которые вы можете взять ниже непосредственно из скриншота с помощью Инструмента «Пипетка»/Eyedropper Tool (I) удерживая клавишу Shift.
Залейте основу яйца желтым и поместите его копию на задний план (Control-C > Ctrl-B), так как он может понадобиться нам позже.
Теперь давайте изобразим декоративный орнамент поверх яйца. Возьмите Инструмент прямоугольник/Rectangle Tool (M) и создайте голубую форму размером 70 x 15 px.
Шаг 3
Возьмите Инструмент "Отрезок линии"/Line Segment Tool (\) и удерживая клавишу Shift, создайте горизонтальную форму с розовой обводкой и толщиной линии 3 пт.
Давайте выровняем все формы по яйцу. Выберите всё (Ctrl-A) и нажмите на яйцо, удерживая Alt, для того чтобы сделать его ключевым объектом (вы увидите толстое выделение вокруг него). Вернитесь к панели «Выравнивание» и нажмите кнопку Выровнять по центру по горизонтали.
Шаг 4
Теперь изменим розовую линию. Выберите её и примените Эффект/Effect > Исказить и трансформировать/Distort & Transform > Зигзаг/Zig Zag. Задайте размер 5 px, складки - 7 и выберите "гладкие" в строке "опорные точки".
Объект/Object >Разобрать/Expand фигуру, чтобы применить эффект.
Шаг 5
Добавьте ещё один прямоугольник в нижней части яйца и заполните его зеленым цветом. Теперь давайте удалим части прямоугольников, находящиеся вне яйца. Мы будем использовать один из новых инструментов Adobe Illustrator: Инструмент Shaper/Shaper Tool (Shift-N). Возьмите Инструмент Shaper/Shaper Tool (Shift-N) и нарисуйте произвольные линии (каракули) в области, которую требуется удалить. Повторите то же самое с другими нежелательными частями.
Если вы работаете с ранними версиями Adobe Illustrator, попробуйте использовать Инструмент "Создание фигур"/Shape Builder Tool (Shift-M). Он работает почти также — просто выберите всё и нажмите на нежелательные части, удерживая Alt.
Мы также попробуем еще один способ скрытия ненужных частей несколькими шагами позже, когда будем делать другое яйцо.
Шаг 6
Выберите изменённое яйцо и разберите его - Объект/Object > Разобрать/Expand. Затем выберите желтую середину яйца вместе с розовой зигзагообразной линией и разделите их на панели Pathfinder, деля форму на две равные половины.
Шаг 7
Залейте верхнюю часть разделенной формы приятным розовым цветом. Возьмите Инструмент Эллипс/Ellipse Tool (L) и создайте круг размером 5 x 5 px. Удерживайте Alt-Shift и перетащите круг направо, создавая копию.
Шаг 8
Теперь, когда основной вид яйца готов, давайте добавим тень в плоском стиле, покрывающую одну половину яйца. Сгруппируйте (Ctrl-G) все части яйца, скопируйте и вставьте на передний план (Ctrl-C > Control-F). Сохраняя копию выделенной, объедините/Unite её в панели Pathfinder, соединяя всё в один силуэт.
Нарисуйте вертикальную линию через яйцо, используя Инструмент "Отрезок линии"/Line Segment Tool (\). Выровняйте линию по силуэту яйца, делая яйцо ключевым объектом.
Сохраняя линию и силуэт яйца выбранными, разделите/Divide их в панели Pathfinder.
Удалите одну из частей и переключите оставшуюся половину в режим "Умножение", делая его полупрозрачным.
Шаг 9
Теперь давайте сделаем еще одно яйцо!
У нас уже есть основа, так как мы сделали её копию в самом первом шаге. Переместите её в сторону и залейте оранжевым цветом. Добавьте поверх декоративные элементы, и давайте посмотрим еще один способ, в котором мы можем скрыть ненужные части. Продублируйте основную форму еще раз (Ctrl-C > Control-F) и поместите её на самый верх (Shift - Control-]).
Выделите все элементы, щелкните правой кнопкой мыши и создайте обтравочную маску. Вы сделали это!
Шаг 10
Давайте добавим еще несколько декоративных элементов на яйцо. Создайте два круга размером 5 x 5 px над желтой полосой яйца, помещая их ближе к краям. Выберите оба круга и либо используйте Инструмент "Переход"/Blend Tool (W), либо перейдите Объект/Object > Переход/Blend > Создать/Make. Затем откройте окно "Параметры перехода" (Объект/Object > Переход/Blend > Параметры перехода/Blend Options) и установите интервалы: "заданное число шагов" со значением 3.
Примените Object > Expand к группе перехода и добавьте больше кругов в верхней части яйца, заливая их желтым цветом.
Шаг 11
Когда вы будете удовлетворены результатом, добавьте полупрозрачную плоскую тень к одной половине яйца.
Скомбинируйте яйца. Используйте Инструмент "Прямоугольник со скруглёнными углами"/Rounded Rectangle Tool, чтобы сделать светло-зелёный фон для нашей иконки.
Создайте квадрат, используя Инструмент "Прямоугольник"/Rectangle Tool (M), и поверните его на 45 градусов инструментом "Выделение"/Selection Tool (V), удерживая при этом клавишу Shift.
Залейте прямоугольник линейным градиентом от светло-зелёного цвета к белому и переключите на режим "Умножение", создавая полупрозрачную тень.
Шаг 12
Продублируйте светло-зелёный фон и поместите тень между копиями. Используйте обтравочную маску/Clipping Mask, чтобы скрыть ненужную часть длинной тени.
Отлично! Наша первая иконка готова! Давайте перейдем к следующей.
2. Иконка милого кролика
Шаг 1
Создайте серый круг размером 70 x 70 px для головы кролика. Переместите боковые опорные точки немного вниз, используя Инструмент "Прямое выделение"/Direct Selection Tool (A), чтобы сделать голову слегка сплющенной.
Теперь давайте создадим уши. Возьмите Инструмент Эллипс/Ellipse Tool (L) и создайте овал размером 15 x 50 px. Переместите его боковые опорные точки немного вверх, делая верхнюю часть уха шире. Сохраняя фигуру выделенной, перейдите Объект/Object > Контур/Path > Создать параллельный контур/Offset Path и установите смещение/Offset: -5 px, оставив остальные параметры по умолчанию. Таким образом мы создаем меньшую форму для внутренней части уха.
Шаг 2
Залейте внутреннюю часть уха розовым цветом, сгруппируйте обе части уха и поместите на задний план (Shift-Control-[). Дважды щёлкните Инструмент "Поворот"/Rotate Tool (R), чтобы открыть окно настроек и введите значение угла поворота -20 градусов.
Шаг 3
Используйте Инструмент "Зеркальное отражение"/Reflect Tool (O), чтобы отразить ухо по вертикальной оси и нажмите Копировать, чтобы создать второе ухо на противоположной стороне головы. Можно сгруппировать оба уха и выровнять их по голове, делая весь набор идеально центрированным.
Сплющите основу головы немного больше.
Шаг 4
Используйте Инструмент "Эллипс"/Ellipse Tool (L), чтобы сформировать пару тёмных блестящих глаз с белыми бликами и круг для носа. Возьмите Инструмент "Ножницы"/Scissors Tool (C) и нажмите обе боковые опорные точки носа для того, чтобы разделить форму на две половинки.
Шаг 5
Удалите верхнюю половину и поверните оставшуюся часть, превращая её в нос милого кролика. Нажмите X, чтобы поменять местами цвета заливки и обводки. Задайте ширину обводки в 2 px и измените профиль переменной ширины на верхней панели управления. Создайте две копии носа и сделайте их немного тоньше и легче, образуя рот, как показано на рисунке ниже.
Шаг 6
Давайте закончим с нашим кроликом, добавив крошечные усы на его голову. Создайте горизонтальный штрих размером 9 px и толщиной линии 1 pt, используя Инструмент "Отрезок линии"/Line Segment Tool (\). Немного поверните усы и добавьте их на обе стороны лица.
Шаг 7
Добавьте плоскую тень к одной половине головы кролика, как мы делали ранее. Сформируйте прямоугольник с закругленными углами для фона и создайте полупрозрачную тень, чтобы закончить с иконкой.
Если вы испытываете какие-либо сложности при добавлении длинной тени к сложному объекту, посмотрите уроки ниже с Части 7, Шаг 1, чтобы узнать, как придать нашей длинной тени желаемую форму.
Вы сделали это! Давайте перейдем к следующей иконке!
3. Иконка милого цыпленка
Шаг 1
На этот раз мы будем изображать смешного маленького цыплёнка, выглядывающего из яйца. Прежде всего создайте полосатое яйцо с несколькими полосками или другими декоративными элементами на ваш вкус, используя методы, которые мы узнали в предыдущих шагах.
Нам нужно удалить верхнюю часть яйца, создавая треснувшие края. Сохраните копию основы яйца где-нибудь внизу, потому что она нам понадобится позже, чтоб сформировать нашего цыплёнка.
Создайте горизонтальную линию через яйцо и примените Эффект/Effect > Исказить и трансформировать/Distort & Transform > Зигзаг/Zig Zag. Задайте размер 4 px, складки - 7 и укажите "угловые" в строке "опорные точки", чтобы сделать острые края треснутыми.
Шаг 2
Объект/Object > Разобрать/Expand зигзагообразную линию и поместите её на яйцо, в его центре. Скопируйте голубую основу яйца, Вставьте на передний план (Control-C > Control-F) и передвиньте (Shift - Control-]), поместив его поверх всех элементов.
Выберите зигзаг и основу яйца и разделите/Divide их на панели Pathfinder. Удалите верхнюю часть разделенной формы.
Наконец выберите всё, щелкните правой кнопкой мыши и создайте обтравочную маску. Прекрасно! Треснутая часть яйца готова. Давайте поместим в неё цыплёнка.
Шаг 3
Достаньте копию основы яйца, что мы создали ранее и залейте его нежным жёлтым цветом для тела цыплёнка. Сожмите форму до 60 x 75 px, что сделает её меньше. Выберите боковые опорные точки, используя Инструмент "Прямое выделение"/Direct Selection Tool (A), и перетащите их немного вверх, делая цыплёнка круглее.
Шаг 4
Возьмите Инструмент «Многоугольник» и щёлкните за пределами монтажной области, чтобы открыть всплывающее окно с параметрами. Создайте треугольник размером 15 x 10 px для клюва и залейте его оранжевым цветом.
Объедините два треугольника, чтобы образовать клюв и сплющите их, чтобы сформировать нужную форму. Не забудьте добавить пару блестящих глаз. Мы можем скопировать их из иконки нашего кролика.
Шаг 5
Добавьте пару овальных крыльев, используя Инструмент Эллипс/Ellipse Tool (L). Поместите копию тела цыпленка над крыльями и создайте обтравочную маску, чтобы скрыть ненужные элементы внутри маски.
Шаг 6
Закончите с иконкой, добавив все необходимые элементы, такие как тени и фон. Замечательно!
Давайте перейдем к нашей последней иконке и закончим наш Пасхальный набор!
4. Иконка подарочной коробки
Шаг 1
Давайте начнём формировать нашу коробку из зелёного прямоугольника размером 60 x 40 px. Создайте крышку коробки из оранжевого прямоугольника размером 65 x 15 px.
Шаг 2
Теперь давайте создадим ленту поперёк коробки. Выберите обе части коробки и запомните общую высоту фигур. Вы можете найти это на панели «Трансформирование». В нашем случае, это 55 px. Создайте голубую ленту размером 5 x 55 px, поместив её прямо в центре коробки. Добавьте кусок ленты поменьше, размером 5 x 15 px, в верхней части коробки, залив его более тёмным синим цветом.
Шаг 3
Используйте Инструмент Карандаш/Pencil Tool (N), чтобы нарисовать бантик с голубой обводкой и толщиной линии 2 pt.
Шаг 4
Давайте украсим нашу коробку каким-нибудь орнаментом или узором. Скопируйте основу коробки и вставьте её на передний план (Ctrl-C > Control-F).
Перейдите на панель «Образцы», откройте Меню библиотек образцов/Swatch Libraries menu > Узоры/Patterns > Базовая графика/Basic Graphics > Базовая графика_линии/Basic Graphics_Lines. Найдите образец 10 lpi 30% и нажмите, чтобы применить узор с горизонтальными линиями.
Шаг 5
Сохраняя текстурированную фигуру выделенной, дважды щёлкните Инструмент "Поворот"/Rotate Tool (R) и установите угол в 45 градусов. Снимите флажок с "Трансформировать объекты" и нажмите кнопку ОК, изменяя направления полос.
Шаг 6
Давайте изменим цвет полос, чтобы привести их в соответствии с нашей общей палитрой. Дважды щёлкните на применяемый узор в панели «Образцы», чтобы изолировать его в Режим узора. Примените светло-зелёный цвет к обводке на панели «Цвет» и нажмите кнопку Готово в верхней части рабочей области.
Шаг 7
Закончите с иконкой, добавив глубины с помощью теней и простой фон.
Наш набор иконок закончен! Счастливой Пасхи!
Поздравляю! Мы проделали большую работу, изучая как использовать инструмент Shaper, и как работать с основными формами и панелью Pathfinder. Мы можем использовать эти простые методы для расширения нашего набора и создания других праздничных пасхальных иконок в плоском стиле!
