1. Design & Illustration
  2. Summer

Как создать пакет иконок на тему “Лето” в Adobe Illustrator

by
Read Time:23 minsLanguages:

Russian (Pусский) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

Вы всегда можете расширить набор, отправиться на Envato Market, где лишь при нажатии кнопки вы найдете множество красиво оформленных пакетов иконок .

Теперь, не теряя больше времени, давайте перейдем к нему.

1. Настройте новый документ

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

Для этого перейдите в меню File > New или воспользуйтесь сочетанием клавиш Control-N и отрегулируйте его, используя следующие настройки:

  • Количество монтажных панелей: 1
  • Ширина: 800 пикселей
  • Высота: 600 пикселей
  • Единицы измерения: пиксели

На вкладке Advanced:

  • Цветовой режим: RGB
  • Растровые эффекты: Экран (72 ppi)
  • Выровнять новые объекты используя пиксельную сетку: отметьте
setting up a new documentsetting up a new documentsetting up a new document

Маленький совет: большинство указанных настроек можно активировать, установив профиль документа в Интернет, только тот, в котором не будет автоматически задан Размер (Ширина x Высота), который вам нужно будет выбрать вручную.

2. Настройте пользовательскую сетку

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

Настройки, которые нас интересуют, можно найти в подменю Edit > Preferences > Guides & Grid и должны быть скорректированы следующим образом:

  • Каждый Gridline: 1 px
  • Subdivisions: 1
setting up a custom gridsetting up a custom gridsetting up a custom grid

Маленький совет: вы можете узнать больше о сетках, прочитав подробную статью о том, как работает Grid System в Illustrator.

После того, как мы настроили нашу пользовательскую сетку, все, что нам нужно сделать, чтобы убедиться, что наши фигуры выглядят четкими, - это опция Snap to Grid, ее можно найти в меню View, которое будет меняться на Snap to Pixel каждый раз, когда вы входите в режим Pixel Preview.

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

3. Настройте слои

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

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

  • слой 1> опорные сетки 
  • слой 2> мохито 
  • слой 3> мороженое
  • слой 4> доска для серфинга
  • слой 5> ведро для песка
setting up the layerssetting up the layerssetting up the layers

Маленький совет: способ, с помощью которого мы будем использовать эти слои, довольно прост.  Сначала, мы убедимся, что все слои, кроме того, над которым мы сейчас работаем, заблокированы щелчком на маленькой пустой ячейке (Toggles Lock), расположенной рядом с иконкой глаза.

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

4. Создайте Базовые сетки

Reference Grids (или Base Grids) представляют собой набор точно разделенных базовых поверхностей, которые позволяют нам создавать наши иконки, фокусируясь на размере и последовательности.

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

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

Шаг 1

Предположим, что вы заблокировали все остальные слои, за исключением опорных сеток, возьмите инструмент Rectangle (M) и создайте красный квадрат 128 x 128 px (# FF6B57), который поможет определить общий размер наших иконок.

creating the main shape for the reference gridscreating the main shape for the reference gridscreating the main shape for the reference grids

Шаг 2

Затем добавьте еще один размер 116 x 116 px (# F2F2F2), который будет выступать в качестве активной области рисования, тем самым предоставляя нам полноэкранное дополнение в 6 пикселей.

creating the main shape for the active drawing areacreating the main shape for the active drawing areacreating the main shape for the active drawing area

Шаг 3

Сгруппируйте два квадрата вместе с помощью сочетания клавиш Control-G, а затем создайте три копии, расположенные на расстоянии 40 px друг от друга, и выровняйте их по центру в Artboard.

creating and positioning all four reference gridscreating and positioning all four reference gridscreating and positioning all four reference grids

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

5. Создайте “Пустую” иконку по умолчанию

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

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

Шаг 1

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

Затем, используя Ellipse Tool (L), создайте круг 88 х 88 пикселей, который мы будем раскрашивать, используя # 34D5EA, а затем поместим его в нижнюю часть центра активной области рисования, оставив 4 пикселя для контура. 

creating the main shape for the default backgroundcreating the main shape for the default backgroundcreating the main shape for the default background

Маленький совет: на этом этапе я рекомендую вам начать использовать режим Pixel Preview (View> Pixel Preview или Alt-Control-Y), чтобы вы могли легче размещать свои фигуры по отношению к основной сетке пикселей. 

example of using the pixel preview modeexample of using the pixel preview modeexample of using the pixel preview mode

Шаг 2

Придайте фигуре контур, выбрав ее, а затем перейдите в подменю Object > Path > Offset Path и введите 4 px в поле Offset во всплывающем окне, чтобы изменить его цвет на более темный (# 493E3E). 

creating the outline for the default backgrounds main shapecreating the outline for the default backgrounds main shapecreating the outline for the default backgrounds main shape

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

Шаг 3

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

Для этого просто выберите синий круг и создайте его копию (Control-C> Control-F), которую мы затем выберем, применим смещение -4 px.  Затем, как к выбранной копии, так и к смещению, мы применим режим Minus Front от Pathfinder для создания выреза. 

creating the default backgrounds ring highlightcreating the default backgrounds ring highlightcreating the default backgrounds ring highlight

Шаг 4

Новую фигуру нам нужно будет отрегулировать, изменив ее цвет на белый (#FFFFFF) и установив ее Blending Mode на Soft Light, понижая ее Opacity до 80%

adjusting the blending mode for the default backgrounds highlightadjusting the blending mode for the default backgrounds highlightadjusting the blending mode for the default backgrounds highlight

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

Шаг 5

Возьмите Pen Tool (P) и нарисуйте вверху прямоугольник аккуратной изогнутой линией, используя золотой желтый цвет (#EDBC32) в качестве основного цвета, убедитесь, что вы поместили фигуру в нижнюю часть синего круга. 

creating the main shape for the beach sandcreating the main shape for the beach sandcreating the main shape for the beach sand

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

Шаг 6

В месте для песка нам нужно создать аккуратную границу толщиной 4 px, используя метод Offset Path, убедитесь, что его цвет изменится на более темный (# 493E3E).

adding an outline to the beach sand shapeadding an outline to the beach sand shapeadding an outline to the beach sand shape

Шаг 7

Придайте песку некоторую текстуру, добавив пару кругов 2 x 2 px (#D19A20) с каждой стороны, убедитесь, что они сгруппированы с помощью сочетания клавиш Control-G. 

adding some texture to the beach sandadding some texture to the beach sandadding some texture to the beach sand

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

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

Шаг 8

В этом случае нам нужно начать маскировку пляжного песка, и мы сделаем это, сначала выбрав и сгруппировав (Control -G) все его фигуры (форма заливки, контур и текстура песка) вместе. 

Затем мы будем использовать копию синей фигуры, которую мы будем размещать над ними и использовать как Clipping Mask, щелкнув правой кнопкой мыши и выбрав Make Clipping Mask.

using a clipping mask to hide the outer sections of the beach sandusing a clipping mask to hide the outer sections of the beach sandusing a clipping mask to hide the outer sections of the beach sand

Маленький совет: если вы никогда не использовали Clipping Masks раньше, прочитайте этот урок, он объясняет все преимущества использования Clipping Mask перед формой режимов Pathfinder. 

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

beach sand masked using clipping maskbeach sand masked using clipping maskbeach sand masked using clipping mask

Шаг 9

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

adding the ring highlight to the beach sand sectionadding the ring highlight to the beach sand sectionadding the ring highlight to the beach sand section

Маленький совет: вы можете легко войти в Isolation Mode, чтобы отредактировать Clipping Mask или набор сгруппированных объектов, дважды щелкнув по ним.  Затем, когда вам нужно выйти, просто нажмите Escape.

Шаг 10

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

adding a highlight to the upper section of the beach sandadding a highlight to the upper section of the beach sandadding a highlight to the upper section of the beach sand

Шаг 11

Начните работать в первом наборе облаков, создав прямоугольник с закругленными углами 16 x 8 пикселей с Corner Radius 4 px, который мы будем окрашивать белым (#FFFFFF) (1). Затем создайте элемент соединения, нарисовав прямоугольник размером 6 x 2 px (2), к которому мы добавим 2 x 2 px (3), по одному с каждой стороны, которые мы будем использовать для создания вырезов (4). 

Завершите этот первый набор облаков, добавив закругленный прямоугольник размером 12 x 4 px с Corner Radius 2 px в нижней части соединительной детали (5). 

creating the first set of cloudscreating the first set of cloudscreating the first set of clouds

Шаг 12

Сгруппируйте все элементы облаков с помощью ярлыка Control-G, а затем поместите их в направлении левого верхнего угла иконки, чтобы настроить их, установив Blending Mode на Lighten и уменьшив их Opacity до 50%

positioning the first set of clouds onto the backgroundpositioning the first set of clouds onto the backgroundpositioning the first set of clouds onto the background

Шаг 13

Создайте несколько облаков в правой части синего круга, а затем обязательно сгруппируйте (Control-G) и поместите их все в Clipping Mask пляжного песка. 

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

finishing off the default backgroundfinishing off the default backgroundfinishing off the default background

Шаг 14

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

positioning the blank icon copies onto the remaining reference gridspositioning the blank icon copies onto the remaining reference gridspositioning the blank icon copies onto the remaining reference grids

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

6. Создайте иконку Мохито.

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

Шаг 1

Используя инструмент Rectangle (M), создайте фигуру 48 x 50 px, которую мы будем окрашивать с использованием цвета  #9FBA7D, а затем поместите ее в нижнюю часть пляжного песка, убедитесь, что горизонтальный центр выровнен с помощью панели Align

creating the main lower shape for the mojito jarcreating the main lower shape for the mojito jarcreating the main lower shape for the mojito jar

Шаг 2

Далее, добавьте меньший прямоугольник 28 x 4 px (# 9FBA7D) в верхнюю часть созданной нами фигуры на расстоянии 16 пикселей

adding the upper section of the mojito jaradding the upper section of the mojito jaradding the upper section of the mojito jar

Шаг 3

Используя Pen Tool (P), соедините две созданные нами фигуры, нарисуйте горлышко банки с помощью двух изогнутых линий, следя за тем, чтобы перетащить и пересечь каждый из двух боковых изгибов на 8 px от начальной точки.

creating the neck section of the mojito jarcreating the neck section of the mojito jarcreating the neck section of the mojito jar

Шаг 4

Выберите все три фигуры, составляющие банку мохито, и объедините их в один объект, используя Unite Shape Mode от Pathfinder.

combining the mojito jars main shapes using pathfinders unite shape modecombining the mojito jars main shapes using pathfinders unite shape modecombining the mojito jars main shapes using pathfinders unite shape mode

Шаг 5

Когда у нас будет основная фигура для нашей банки, мы можем придать ей контур 4 px (#493E3E) с использованием метода Offset Path (выберите Object> Path> Offset Path> и введите 4 px в поле величины Offset). 

adding the outline to the mojito jaradding the outline to the mojito jaradding the outline to the mojito jar

Шаг 6

Далее добавьте первую кромку горлышка, создав закругленный прямоугольник 36 x 2 px с Corner Radius 1 px, который мы будем окрашивать, используя #CCC8BE. Придайте ему границу в 4 px (#493E3E), а затем поместите ее в верхнюю часть нашей банки, чтобы их контуры пересекались. 

adding the first ridge segment to the jars neckadding the first ridge segment to the jars neckadding the first ridge segment to the jars neck

Шаг 7

Добавьте еще одну кромку над той, которую мы только что создали, выбрав две фигуры и перетащив их вверх, удерживая Alt (чтобы создать копию) и Shift (для перетаскивания по прямой линии). 

adding the second ridge segment to the jaradding the second ridge segment to the jaradding the second ridge segment to the jar

Шаг 8

Начните добавлять детали банке, создавая боковые блики, используя смещение -2 px, которое мы будем регулировать, удаляя верхнюю и нижнюю средние секции.  Закрасьте полученные фигуры белым цветом (#FFFFFF), а затем отрегулируйте их Transparency, установив Blending Mode на Soft Light, и уменьшив их Opacity до 80%

adding the side highlights to the mojito jaradding the side highlights to the mojito jaradding the side highlights to the mojito jar

Шаг 9

Используя инструмент Rectangle (M), создайте фигуру 2 x 70 px, а затем добавьте еще одну более широкую 4 x 70 px, которую мы будем размещать на 2 px с правой стороны, сгруппируйте (Control-G), а затем откорректируйте их прозрачность, используя те же значения, которые мы применили к боковым бликам. 

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

adding the two vertical highlights to the mojito jaradding the two vertical highlights to the mojito jaradding the two vertical highlights to the mojito jar

Шаг 10

Добавьте прямоугольник размером 28 x 4 пикселя (# 000000) под контуром первой кромки, и превратите его в тень, понизив уровень Opacity до 40%

adding a subtle shadow to the jars neck sectionadding a subtle shadow to the jars neck sectionadding a subtle shadow to the jars neck section

Шаг 11

Далее с помощью Ellipse Tool (L) нарисуйте два ряда кругов 2 x 2 px  (#493E3E), расположенных на 2 px друг от друга, а затем сгруппируйте (Control-G) и расположите их по центру, около 20 пикселей от его первой кромки. 

adding the decorative circles to the mojito jaradding the decorative circles to the mojito jaradding the decorative circles to the mojito jar

Шаг 12

Возьмите Rounded Rectangle Tool и создайте фигуру 24 x 42 px с  Corner Radius в 12 px, который мы будем раскрашивать, используя #EDDAC0, придайте контур 4 px (#493E3E), а затем поместите его в центр банки на расстоянии 8 px от углублений для захвата, которые мы создали минуту назад. 

adding the main shapes for the jars labeladding the main shapes for the jars labeladding the main shapes for the jars label

Шаг 13

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

adding highlights to the jars labeladding highlights to the jars labeladding highlights to the jars label

Шаг 14

Добавьте несколько детальных элементов на бирку, используя некоторые простые фигуры, такие как круги, прямоугольники и закругленный прямоугольник.  Когда вы закончите, выберите все его составляющие фигуры и сгруппируйте их вместе с помощью сочетания клавиш Control-G.

adding details to the jars labeladding details to the jars labeladding details to the jars label

Шаг 15

Далее, перейдите к верхней части банки и добавьте пару бликов к двум ее кромкам, используя белый цвет (#FFFFFF) в качестве основного цвета, Soft Light для Blending Mode и 80% для Opacity

Когда вы закончите, сгруппируйте элементы каждой кромки вместе с помощью сочетания клавиш Control-G.

adding highlights to the jars two ridge sectionsadding highlights to the jars two ridge sectionsadding highlights to the jars two ridge sections

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

Шаг 16

Начните работу над соломкой, создайте прямоугольник размером 4 x 22 px, который мы будем окрашивать используя #EDDAC0, придайте контур 4 px (#493E3E), а затем поместите его с правой стороны верхней части банки. 

creating and positioning the main shapes for the jars strawcreating and positioning the main shapes for the jars strawcreating and positioning the main shapes for the jars straw

Шаг 17

Добавьте прямоугольник размером 4 x 2 px (#FFFFFF) в верхнюю часть соломки, который мы превратим в блик, установите его Blending Mode на Soft Light и уменьшите его Opacity до 90%

Затем добавьте черный квадрат размером 4 x 4 px (# 000000) в нижнюю часть и превратите его в тень, понизьте его Opacity до 40%

Шаг 18

Завершите соломку, добавив две диагональные линии с помощью Pen Tool (P), которые мы будет окрашивать, используя цвет #493E3E. После того, как вы закончите, выберите все составляющие элементы соломки и сгруппируйте их с помощью сочетания клавиш Control-G. 

adding finishing touches to the jars strawadding finishing touches to the jars strawadding finishing touches to the jars straw

Шаг 19

Начните работу над листочком мяты, создайте круг размером 14 x 14 px (#809B54) (1), который мы отрегулируем, выбирая его верхнюю опорную точку и подтягивая ее вверх на 8 px (2).  Затем придайте фигуре контур 4 px (#493E3E) (3), выделите кольцо (цвет: белый, Blending Mode: Soft Light; Opacity: 80%) (4) и, наконец, поверните весь лист на 45 градусов (5), чтобы добавить тень (цвет: черный, Opacity: 40%) в нижнюю часть (6). 

creating the mint leaf for the mojito jarcreating the mint leaf for the mojito jarcreating the mint leaf for the mojito jar

Шаг 20

Сгруппируйте все элементы вместе, используя сочетания клавиш Control-G, а затем поместите листок влево от соломки. 

adding the mint leaf to the mojito jaradding the mint leaf to the mojito jaradding the mint leaf to the mojito jar

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

Шаг 21

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

Для этого просто создайте копию синего круга (Control-C) и вставьте его поверх банки (Control-F). 

creating a copy of the blue circle to use as a clipping maskcreating a copy of the blue circle to use as a clipping maskcreating a copy of the blue circle to use as a clipping mask

Шаг 22

Поскольку мы хотим, чтобы верхняя часть нашей банки выходила за пределы поверхности фона, нам нужно будет отрегулировать круг, удалив верхнюю опорную точку, а затем нарисовать новый путь с помощью Pen Tool (M), убедитесь что он полностью зашел в верхнюю часть активной области рисования. 

adjusting the shape of the blue circle before using it as a clipping maskadjusting the shape of the blue circle before using it as a clipping maskadjusting the shape of the blue circle before using it as a clipping mask

Шаг 23

Просто выберите отрегулированный круг и банку Мохито, а затем щелкните правой кнопкой мыши и нажмите Make Clipping Mask. Затем сгруппируйте замаскированную банку с ее фоном, выберете оба и нажмите Control-G.

mojito jar icon finishedmojito jar icon finishedmojito jar icon finished

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

7. Создание иконки Мороженое

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

Шаг 1

Возьмите Rounded Rectangle Tool, и создайте фигуру 48 х 92 px (#E25439) с Corner Radius 6 рх, которую мы отрегулируем, изменив округлость ее верхних углов до 24 px с помощью панели Transform. Придайте ей обычный контур 4 px (#493E3E), а затем поместите две фигуры в верхнюю часть активной области рисования. 

creating the main shapes for the ice creams upper sectioncreating the main shapes for the ice creams upper sectioncreating the main shapes for the ice creams upper section

Шаг 2

Придайте  верхней части иконки блеск, добавив немного бликов, используя белый (#FFFFFF) как основной цвет заливки, Soft Light для Blending Mode и 80% Opacity.

adding highlights to the upper section of the ice creamadding highlights to the upper section of the ice creamadding highlights to the upper section of the ice cream

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

Шаг 3

Начните работать над деревянной палочкой мороженого, нарисуйте квадрат 12 x 12 пикселей, который мы закрасим с помощью цвета  #D3B276, а затем придайте контур в 4 px (#493E3E), убедитесь, что расположили вторую прямо под большей частью, которую мы создали несколько шагов назад.

creating the main shapes for the ice creams stickcreating the main shapes for the ice creams stickcreating the main shapes for the ice creams stick

Шаг 4

Используя Rectangle Tool (M), создайте две фигуры 2 x 12 px (#FFFFFF) и разместите по одной на каждой стороне палочки мороженного, убедитесь в том, что вы подогнали их, установив Blending Mode на Soft Light, а затем уменьшив их Opacity до 80%.

adding two side highlights to the ice creams stickadding two side highlights to the ice creams stickadding two side highlights to the ice creams stick

Шаг 5

Придайте некоторую текстуру палочке, нарисовав несколько округлых прямоугольников размером 2 px, используя #B2915D в качестве основного цвета.

adding a subtle line texture to the ice creams stickadding a subtle line texture to the ice creams stickadding a subtle line texture to the ice creams stick

Шаг 6

Создайте другой черный (#000000) прямоугольник размером 12 x 4 px, который мы разместим в верхней части палочки, и затем превратим его в тень, понижая уровень Opacity до 40%.

adding a subtle shadow to the ice creams stickadding a subtle shadow to the ice creams stickadding a subtle shadow to the ice creams stick

После того как вы добавили тень, выберите все элементы палочки и сгруппируйте их (Control-G), чтобы они не были случайно потеряны.

Шаг 7

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

ice cream icon finishedice cream icon finishedice cream icon finished

Так как на данный момент мы закончили создание второй иконки, теперь мы можем зафиксировать ее слой и перейти к третьей.

8. Создание иконки Доска для серфинга

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

Шаг 1

Используя Ellipse Tool (L), создайте фигуру размером 48 x 164 px, которую мы раскрасим с помощью #D3B276. Затем придайте ему обычный контур 4 px (#493E3E), убедитесь,что вы расположили обе фигуры на третьем фоне, выравняйте их в верхней части активной области рисования.

creating the main shapes for the surfboard iconcreating the main shapes for the surfboard iconcreating the main shapes for the surfboard icon

Шаг 2

Придайте доске кольцевую подсветку используя белый цвет (#FFFFFF) как основной цвет заливки, Soft Light для Blending Mode и 80% для уровня Opacity.

adding a ring highlight to the surfboards main bodyadding a ring highlight to the surfboards main bodyadding a ring highlight to the surfboards main body

Шаг 3

Придайте доске некоторую текстуру, создав сцепленные округлые прямоугольники размером 2 px (#B2915D), разместите их на разном расстоянии друг от друга, замаскируйте их так, чтобы они не выходили за его основную поверхность.

adding the subtle line texture to the surfboards main bodyadding the subtle line texture to the surfboards main bodyadding the subtle line texture to the surfboards main body

Шаг 4

Добавьте еще два вертикальных блика (цвет: белый; Blending Mode: Soft Light; Opacity: 80%) и расположите их в направлении правой части доски так, чтобы они не перекрывали большое кольцо подсветки.

adding the two vertical highlights to the surfboard iconadding the two vertical highlights to the surfboard iconadding the two vertical highlights to the surfboard icon

Шаг 5

Продолжайте добавлять детали на доску путем создания эллипса размером 18 x 32 пикселей, который мы закрасим, используя цвет #EDDAC0. Придайте ему контур размером 4 px (#493E3E), затем расположите его по направлению к центру, около 82 px от верхней стороны его большего контура.

creating and positioning the center piece for the surfboard iconcreating and positioning the center piece for the surfboard iconcreating and positioning the center piece for the surfboard icon

Шаг 6

Добавьте обычные блики круглой формы, которые мы только что создали, а затем закончите доску, добавив прямоугольник размером 2 x 84 px (#493E3E) в ее центр, который проходит от эллипса до конца доски.

adding finishing touches to the surfboardadding finishing touches to the surfboardadding finishing touches to the surfboard

Шаг 7

Выберите все составляющих элементы доски для серфинга, сгруппируйте их вместе с помощью Control-G, так чтобы вы потом смогли замаскировать их на заднем плане как мы сделали с всеми другими иконками.

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

surfboard icon finishedsurfboard icon finishedsurfboard icon finished

9. Создание иконки Ведерка для песка 

Мы уже почти у цели! Все, что нам нужно сделать, это создать четвертую и последнюю иконку из группы.

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

Шаг 1

Используя Rectangle Tool (M), создайте фигуру 40 x 28 px, которую мы раскрасим используя темно-серый цвет (#AAA79F), а затем разместим в центре активной области рисования, в его нижней части песчаного пляжа.

creating the main shape for the sand buckets lower sectioncreating the main shape for the sand buckets lower sectioncreating the main shape for the sand buckets lower section

Шаг 2

Скорректируйте фигуру, выбрав ее нижние опорные точки одновременно с помощью Direct Selection Tool (A), задвиньте их внутрь на 2 px, придав полученной форме контур размером 4 px (#493E3E) с помощью метода Offset Path.

adjusting the main shape of the sand buckets lower sectionadjusting the main shape of the sand buckets lower sectionadjusting the main shape of the sand buckets lower section

Шаг 3

Добавьте обычные блики и тени, чтобы придать объекту немного визуальности. Используйте белый (#FFFFFF) в сочетании с Soft Light и 80% Opacity для бликов, и черный (#000000) с 40% Opacity для тени.

adding highlights and shadows to the lower section of the sand bucketadding highlights and shadows to the lower section of the sand bucketadding highlights and shadows to the lower section of the sand bucket

Шаг 4

Добавьте метку с помощью округлого прямоугольника размером 16 x 20 px и Corner Radius 8 px, который мы закрасим, используя цвет #EDDAC0. Придайте ему контур размером 4 px (#493E3E), а затем осторожно поместите обе фигуры в центр лопатки, оставляя зазор 10 px в его верхней части.

creating the main shapes for the sand buckets labelcreating the main shapes for the sand buckets labelcreating the main shapes for the sand buckets label

Шаг 5

На месте метки  сделайте несколько бликов и добавьте два маленьких прямоугольника (#493E3E) как ненастоящий текст, чтобы сделать ее более визуально привлекательной.

adding details to the sand buckets labeladding details to the sand buckets labeladding details to the sand buckets label

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

Шаг 6

Используя Rectangle Tool (M), создайте фигуру размером 48 x 10 px, которую мы раскрасим, используя цвет #CCC8BE. Придайте ей контур размером 4 px (#493E3E), а затем расположите ее в верхней части ведра, которое мы только что создали, убедитесь, что их контуры перекрываются.

creating the upper section of the sand bucketcreating the upper section of the sand bucketcreating the upper section of the sand bucket

Шаг 7

Придайте новой фигуре несколько бликов, используя белый (#FFFFFF) для основного цвета, отрегулируйте Transparency, установите Blending Mode на Soft Light  и понизьте уровень Opacity до 80%.

adding highlights to the upper section of the sand bucketadding highlights to the upper section of the sand bucketadding highlights to the upper section of the sand bucket

Шаг 8

Затем добавьте два набора из трех  кругов размером 2 x 2 px (#493E3E), расположите их на 2 px по вертикали и горизонтали  друг от друга и расположите по одному с каждой стороны верхней части лопатки.

adding the two circle segments to the upper section of the sand bucketadding the two circle segments to the upper section of the sand bucketadding the two circle segments to the upper section of the sand bucket

Шаг 9

Завершите верхнюю часть ведра, добавив округлый прямоугольник размером 22 x 2 px  (#493E3E) с Corner Radius 1 px  в центр. Затем выберите все его составляющие элементы и сгруппируйте их вместе с помощью сочетания клавиш Control-G.

adding the last detail to the upper section of the sand bucketadding the last detail to the upper section of the sand bucketadding the last detail to the upper section of the sand bucket

Шаг 10

Начните работу над маленькой лопаткой, создав прямоугольник размером 8 x 46 px, который мы раскрасим используя #E25439. Придайте ему обычный контур размером 4 px (#493E3E), а затем поместите обе фигуры над ведром для песка, убедитесь, что их контуры перекрываются.

creating the main shapes for the shovels lower sectioncreating the main shapes for the shovels lower sectioncreating the main shapes for the shovels lower section

Шаг 11

Добавьте два прямоугольника размером 2 x 44 px (#FFFFFF) для каждой из его сторон, и превратите их в блики, установите Blending Mode на Soft Light и понизьте их Opacity до 80%.

adding two vertical highlights to the shovels main bodyadding two vertical highlights to the shovels main bodyadding two vertical highlights to the shovels main body

Шаг 12

Используя  Rectangle Tool (M), создайте меньшую фигуру размером 8 x 4 px, которую мы раскрасим, используя черный (#000000), а затем превратим в тень, понизив ее Opacity до 40%, убедитесь, что расположили ее в нижней части корпуса лопатки.

adding the bottom shadow to the shovels main bodyadding the bottom shadow to the shovels main bodyadding the bottom shadow to the shovels main body

Шаг 13

Далее добавьте некоторые детальные линии на данном участке лопатки, создайте прямоугольник размером 2 x 14 px, следующий за еще меньшим прямоугольником  размером 2 x 2 px расположенным на расстоянии 2 px от него. Раскрасьте обе фигуры используя  #493E3E и подведите их к центру красной фигуры на несколько пикселей выше тени, что мы только что создали.

adding detail lines to the main body of the shoveladding detail lines to the main body of the shoveladding detail lines to the main body of the shovel

Шаг 14

Создайте ручку лопатки, нарисовав округлый прямоугольник размером 28 x 20 px с Corner Radius (1) 4 px, из которого мы вырежем прямоугольник размером 20 x 12 px (2) с помощью режима фигуры Minus Front от Pathfinder. Придайте полученной фигуре контур размером 4 px (#493E3E) (3), убедитесь, что отправили ее назад (right click > Arrange > Send to Back) (4). Затем добавьте два округлых прямоугольника размером 6 x 4 px (#493E3E) с Corner Radius 2 px  в нижней части контура (5) и закончите ручку, добавив несколько бликов (6).

creating the shovels handlecreating the shovels handlecreating the shovels handle

Шаг 15

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

sand bucket icon finishedsand bucket icon finishedsand bucket icon finished

Вот и все!

Теперь они у вас есть: четыре "сладких" иконки придающие атмосферу лета. Я надеюсь, что вы следовали каждому шагу урока и как всегда узнали что-то новое и полезное.

all icons finishedall icons finishedall icons finished
One subscription.
Unlimited Downloads.
Get unlimited downloads