Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Пчелиный рой в Adobe Illustrator

8 июля 2013 | Опубликовано в Уроки | 5 Комментариев »

Постараемся немного поднять настроение.  Сегодня будем создавать  яркую летную иллюстрацию пчёлок. Урок отлично подойдет для новичков. В начале мы будем настраивать простую сетку, а далее, используя простые формы и настройки, создадим пчел.  Надеемся, выполнение урока подарит вам хорошие эмоции и новые знания. 

 

Конечный результат:

Детали:

  • Программа: Adobe Illustrator CS5
  • Время: 45 minutes
  • Сложность: Intermediate

Шаг 1

Создаем новый документ, нажав Ctrl + N. В поле ширины вводим 600, в  поле высоты — 300 и нажимаем кнопку «Дополнительно».

Выберите цветовой режим RGB, растровые эффекты: Screen (72ppi) и убедитесь, что в поле выравнивания объектов по сетке галочка не стоит. Теперь можно нажать ОК.

Включите отображение сетки ( View> Show Grid (Показать сетку) ) и выравнивание по сетке ( View>  Snap to Grid (Выравнивать по сетке). Для начала нужно установить сетку через 1px. Просто зайдите в Edit > Preferences (Установки)> Guides > Grid(Направляющие и сетка) и, введите 1 в поле Gridline every box (Линия через каждые)  и 1 в поле Subdivisions Внутреннее деление).

Также для предварительного просмотра информации о размерах и положении будущих форм открываем панель информации ( Window> Info ). Также давайте установим единицы измерения на пиксели. Для этого заходим в  Edit > Preferences > Units > General. Все эти настройки помогут нам в будущем значительно сэкономить время.

Шаг 2

Для цвета заливки устанавливаем: R = 50 G = 50 B = 50 и убираем цвет обводки.

Выбираем инструмент Ellipse Tool (L) и создаем форму размерами  60 на 34px. Переходим к Effect > Warp > Arch (Эффект/деформация/дуга). Введите значение, как на следующем рисунке и нажмите Ок.

Теперь переходим к Object> Expand Appearance (Разобрать оформление). Переходим в панель слоев ( ( Window> Layers ) и дважды щелкаем по слою с формой. Называем слой «тело».

Шаг 3

Снова выбираем инструмент Ellipse Tool (L) и создаем форму размерами 37 на 54px. Разместим ее, как показано на первом скриншоте.

Заливку удалите, и поставьте черную обводку размерами  в 1 pt.

Убедитесь, что выбрана новая форма и перейдите к Object> Path> Offset Path (Контур/создать параллельный контур) . Введите в поле Offset (Смещение) значение 8px и нажмите ОК.

Выбираем получившуюся форму и снова переходим к Object> Path> Offset Path. Вводим 8px в поле Offset и снова нажимаем Ок.

Аналогичные действия. Выбираем последнюю форму, переходи в Object> Path> Offset Path. В этот раз в поле  Offset  вводим 7px и Ок.

Еще раз.  Object> Path> Offset Path и в поле смещения вводим 7px.

Последний раз. Object> Path> Offset Path и в поле смещения вводим 7px.

В конце концов у нес должно получится шесть кругов.

Шаг 4

Теперь выбираем форму с телом и на переднем плане создаем копию  ( Ctrl + C> Ctrl + F ).

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

Выберите  формы дуг, а также форму тела и перейдите к панели обработки контуров ( Window> Pathfinder) и нажмите кнопку Разделить.

Шаг 5

Будем работать с объектами, созданными в предыдущем шаге. Выбираем фигуры, и заливаем градиентом, как показано ниже.

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

Шаг 6

Переходим на панель слоев и выбираем «тело» и переходим в Object> Path> Offset Path. Вводим смещение -10px .

Переместим полученную фигуру на передний план ( Shift + Ctrl +] ) и заливаем ее черным цветом.

Убедитесь, что новая остается выбранной и уменьшаем непрозрачность до 50%. Изменяем режим смешивания на Overlay (Перекрытие). Переходим в Effect> Blur> Gaussian Blur, введите радиус  5px и нажмите кнопку ОК.

Шаг 7

Отключите привязку к сетке ( View > Snap to Grid ) затем перейдите к Edit> Preferences> General и убедитесь, что в поле Keyboard Increment установлено значение  1px.

Переходим на панель слоев, выбираем форму тела и на переднем плане создаем две копии ( CTRL + C> Ctrl + F> Ctrl + F ).

Выделяем верхнюю копию и перемещаем ее вниз на  1px с помощью стрелки вниз на клавиатуре.

Выделяем две копии и в панели Pathfinder нажимаем кнопки Minus Front.

Переместим полученную фигуру на передний план ( Shift + Ctrl +] ). Теперь нужно залить ее белым цветом, изменить режим смешивания на Overlay и уменьшить непрозрачность до 30%.

Шаг 8

Снова переходи  на панель слоев выделяем форму  “тело” и создаем две ее копии  ( CTRL + C> Ctrl + F> Ctrl + F ).

Верхнюю копию перемещаем на 3px вниз с помощью соответствующей стрелки на клавиатуре.

Выделяем две копии и нажимаем Minus Front на панели Pathfinder.

Полученную фигуру размещаем на переднем плане  ( Shift + Ctrl +] ) и заливаем белым цветом. Изменяем режим смешивания на Overlay и непрозрачность до 50%.

Шаг 9

Снова создаем две копии формы тела ( CTRL + C> Ctrl + F> Ctrl + F ).

Верхнюю копию перемещаем на 1px вверх, используя стрелку вверх на клавиатуре.

Выделяем две копии и нажимаем Minus Front на панели Pathfinder.

Полученную фигуру размещаем на переднем плане  ( Shift + Ctrl +] ) и заливаем черным цветом. Изменяем режим смешивания на Soft Light (Рассеянный свет)  и непрозрачность до 30%.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 9

Шаг 10

Опять переходим на панель слоев и  создаем две копии формы тела ( CTRL + C> Ctrl + F> Ctrl + F ).

Верхнюю копию перемещаем на 3px вверх, используя стрелку вверх на клавиатуре.

Выделяем две копии и нажимаем Minus Front на панели Pathfinder.

Полученную фигуру размещаем на переднем плане  ( Shift + Ctrl +] ) и заливаем черным цветом. Изменяем режим смешивания на Soft Light (Рассеянный свет)  и непрозрачность до 30%.

Переходим на панель слоев и выбираем все формы, созданные до это шага, ( за исключением формы «тело» и группируем их ( Ctrl + G ).

Create a Funny Bee Swarm Illustration in Adobe Illustrator 10

 

Шаг 11

Включаем привязку к сетке ( View> Snap to Grid). Выберите «тело» и  создайте на переднем плане копию ( Ctrl + C> Ctrl + F ).

Выберите Ellipse Tool (L) , создайте круг размером в 17px и разместите его, как показано на первом скриншоте. Заливка будет отсутствовать, а для обводки введите значение 2pt и цвет - R = 90 G = 90 B = 90.

Акцентируем внимание на созданной форме. Берем инструмент Direct Selection Tool (A), выбираем две опорные точки (указаны на первом скриншоте)  и нажмите на клавиатуре кнопку Удалить.

Убедитесь, что форма выбрана и перейдите на панель обводки ((Window> Stroke ). Проверьте, чтобы был установлен закругленный конец, а затем перейдите в Object> Path> Outline Stroke . Выделите полученную форму и копию формы «тело» (создавали в начале урока) и нажмите на кнопку Intersect (пересечение) в панели Pathfinder.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 11

 Шаг 12

Выбираем инструмент  Rectangle Tool (M), создайте квадрат размером стороны в 5 px. Заливка будет отсутствовать,   обводка черного цвета и размером в  1pt.

Переходим на новую форму, выбираем инструмент  Anchor Point Tool (-) и просто нажимаем на нижнюю правую опорную точку. Это превратит квадрат в треугольник.

Выбираем инструмент Direct Selection Tool (A), выбираем верхнюю левую точку и удаляем ее, нажав  Delete.

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

Как только мы получили форму, как на третьем скриншоте, переходим в  Effect > Warp > Arc. Вводим свойства, как на скриншоте ниже и нажимаем ОК. Переходим в Object> Path> Outline Stroke, заполняем форму линейным градиентом.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 12

  Шаг 13

Выберите инструмент  Ellipse Tool (L) ,  создайте эллипс в 3px, залейте цветом  R = 40 G = 40 B = 40 и разместите его, как показано на скриншоте ниже.

Убедитесь, что форма все еще выбрана и перейдите на панель Appearance (оформление)   (Window > Appearance). Добавляем вторую заливку, используя кнопку  Add New Fill (на нее указывает маленькая голубенькая стрелочка).

Для новой заливки устанавливаем цвет R = 100 G = 100 B = 100 и переходим в  Effect> Path> Offset Path. В поле смещения вводим значение -1px и переходим к ffect > Distort & Transform > Transform. Введите свойства, показанные на следующем скриншоте, и нажмите  ОК.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 13

 Шаг 14

Выберите Rectangle Tool (M) , создайте новый квадрат с размерами в 5px площади и  поместите его, как показано на первом скриншоте. Заливку удалите, а для обводки задайте черный цвет и значение в 1pt.

Выберите инструмент Delete Anchor Point  (-) и удалите верхнюю правую опорную точку.

Выбираем инструмент Direct Selection Tool (A), выбираем нижнюю левую точку и удаляем ее, нажав  Delete.

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

Как только мы получили форму, как на третьем скриншоте, переходим в  Effect > Warp > Arc. Вводим свойства, как на скриншоте ниже и нажимаем ОК. Переходим в Object> Path> Outline Stroke, заполняем форму линейным градиентом и отправляем на задний план  ( Shift + Ctrl + [ ).

Create a Funny Bee Swarm Illustration in Adobe Illustrator 14

 Шаг 15

Выберите инструмент Ellipse Tool (L) , создайте круг размерами в 2px. Залейте его R = 40 G = 40 B = 40 и разместите, как показано на следующем рисунке.

 

Create a Funny Bee Swarm Illustration in Adobe Illustrator 15

 

 

 

 

 Шаг 16

Выбираем инструмент  Ellipse Tool (L) и создаем круг размерами 11px. Заливаем круг радиальным градиентам (ниже показаны настройки).

Переходим к Effect> Stylize> Drop Shadow. Введите свойства, показанные  на первом изображении, и нажмите OK.

Продолжаем работу с Ellipse Tool (L). Создайте форму размерами 4 на 5px и залейте ее линейным градиентом, как показано ниже.

Снова переходим к Effect> Stylize> Drop Shadow. Введите свойства показано на втором изображении и нажмите кнопку ОК.

Убедитесь, что инструмент Эллипс (L) по-прежнему выбран. Создайте круг размерами в 1px. Залейте его белым цветом и поместите, как на третьем изображении.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 16

 

 Шаг 17

Выберите инструмент Rectangle Tool (M) , создайте  форму размерами 10 на 5px. Залейте ее цветом (R = 75 G = 75 B = 75)  и поместите, как показано на первом изображении.

Дублируйте этот прямоугольник (Ctrl + C> Ctrl + F), выберите эту копию и замените сплошной цвет градиентом, как на втором скриншоте.

Возьмите инструмент Direct Selection Tool (A) . Выберите нижнюю левую точку второго прямоугольника и переместите на 2px вверх, потом выберите верхнюю левую точку и переместите ее вниз на 3px и на 5px вправо

Продолжаем работу с  Direct Selection Tool (A). Выберите нижнюю левую точку серого прямоугольника и переместите ее на 2px вверх. Теперь выбираем инструмент Удалить опорную точку (-) и кликаем по верхней левой точке.

Выделите обе фигуры, что были сделаны в этом шаге, и отправьте их на задний план, нажав   Shift + Ctrl + [ .

Create a Funny Bee Swarm Illustration in Adobe Illustrator 17

Шаг 18

Рисуем крылышки. Выбираем  Rectangle Tool (M)  и создаем форму размерами 40 на 15px. Залейте ее белым цветом. Разместите, как на рисунке ниже.

С помощью инструмента Direct Selection Tool (A) перетаскиваем верхнюю правую опорную точку  на 10px вниз.

Убедитесь, что  белая форма еще выделена, и перейдите в Effect> Stylize>  Rounded Corners. Введите радиус  10px и нажмите   ОК.

Переходим к Effect > Warp > Arc Upper и вводим свойства, как на скриншоте ниже.

Переходим к Object> Expand Appearance .  На панели слоев назовем новую форму «крыло».

Create a Funny Bee Swarm Illustration in Adobe Illustrator 18

 Шаг 19

Отключаем привязку к сетке (View > Snap to Grid). Выбираем  “тело” и на переднем плане создаем копию  (Ctrl + C> Ctrl + F).

Выбираем форму крыла и создаем на переднем плане  две копии ( CTRL + C> Ctrl + F> Ctrl + F ).

Переходим на панель слоев. Выбираем нижнюю копию крыла и перемещаем ее вниз на 1px и влево на 2px.

Выбираем две копии крыла и нажимаем на кнопку Minus Front в панели Pathfinder.

Получившуюся форму заливаем черным.  Выбираем ее , также копию тела и нажимаем на кнопку пересечения Intersect на панели Pathfinder.

Снизьте непрозрачность новой формы до 20% и измените режим смешивания на Overlay.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 19

Шаг 20

Еще раз создаем на переднем плане копию тела (CTRL + C > CTRL + F)  и две копии крыла ( CTRL + C> CTRL + F> Ctrl + F ).

Переходим на панель слоев. Выбираем нижнюю копию крыла и перемещаем ее вниз на 2px и влево на 4px.

Выбираем две копии крыла и нажимаем на кнопку Minus Front в панели Pathfinder.

Получившуюся форму заливаем черным.  Выбираем ее вместе с копией тела и нажимаем на кнопку пересечения Intersect на панели Pathfinder.

Снизьте непрозрачность новой формы до 15% и измените режим смешивания на Overlay.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 20

 Шаг 21

Еще раз создаем на переднем плане копию тела (CTRL + C > CTRL + F)  и две копии крыла ( CTRL + C> CTRL + F> Ctrl + F ).

Переходим на панель слоев. Выбираем нижнюю копию крыла и перемещаем ее вниз на 5px и влево на 4px. Переходим в Object> Transform> Rotate и вводим угол — 13 градусов.

Выбираем две копии крыла и нажимаем на кнопку Minus Front в панели Pathfinder.

Получившуюся форму заливаем черным.  Выбираем ее вместе с копией тела и нажимаем на кнопку пересечения Intersect на панели Pathfinder.

Снизьте непрозрачность новой формы до 15% и измените режим смешивания на Overlay.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 21

Шаг 22

Выберите «крыло» и перейдите на панель Appearance, выберите белую заливку и снизьте непрозрачность до 30%.

Переходим в Object> Path> Offset Path. Введите в поле смещения значение -1px.

Дублируйте полученную фигуру ( CTRL + C> Ctrl + F ). Переместите копию на 1 пиксель вниз.

Выделите обе формы  и нажмите на кнопку Minus Front в панели Pathfinder.

Убедитесь, что форма, которая получилась в этом шаге выбрана, и перейдите на панель  Appearance. Повысьте непрозрачность да 50% и измените режим смешивания на Soft Light.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 22

Шаг 23

Выберите «крыло». Переходим в Object> Path> Offset Path. Введите в поле смещения значение -1px.

Дублируйте полученную фигуру ( CTRL + C> Ctrl + F ). Переместите копию на 3 пикселя вниз.

Выделите обе формы  и нажмите на кнопку Minus Front в панели Pathfinder.

Убедитесь, что форма, которая получилась в этом шаге выбрана, и перейдите на панель  Appearance. Повысьте непрозрачность да 50% и измените режим смешивания на Soft Light. Create a Funny Bee Swarm Illustration in Adobe Illustrator 23

 Шаг 24

Выберите «крыло», перейдите на панель  Appearance. Используя кнопку Add New Fill, добавьте новую заливку.

Выберите эту новую заливку и добавьте линейный градиент, как  показано ниже. Снизьте его непрозрачность до 50% и перейдите в Effect> Path> Offset Path . Введите -1px в поле смещения и нажмите кнопку ОК.  Желтый ноль  на скриншоте панели градиентов  оозначает процент непрозрачности.

Возвращаемся на панель Оформление и добавляем третью заливку. Для этой заливки вам понадобится стандартный шаблон. Для этого переходим на панель  Swatches. Открываем выпадающее меню и переходим к  Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures. Должно открыться окно с текстурами. Нужно убедиться, что форма крыла выбрана, и добавить к заливке шаблон “USGS 22 Gravel Beach”. Уменьшаем непрозрачность до 50% и переходим в  Effect> Path> Offset Path. В поле  Offset выбираем -1px и нажимаем Ок.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 24

Шаг 25

Группируем составные части крыла, нажав  ( Ctrl + G ). Создаем копию этой группы  ( CTRL + C> Ctrl + F ), отправляем ее на задний план  ( Shift + Ctrl + [ ), а затем перемещаем на 1 1px вверх и 8px вправо.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 25

Шаг 26

Выбираем инструмент Rectangle Tool (M), создаем форму размером вашей рабочей области и заливаем цветом  R = 246 G = 168 B = 20 . Отправляем прямоугольник на задний план, нажав  Shift + Ctrl + [

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

Добавляем третью заливку к прямоугольнику. Нам опять понадобиться текстура. Для этого переходим в панель Swatches(Образцы) и выбираем Open Swatch Library > Patterns > Decorative > Decorative_Geometric 1. Выбираем шаблон  "Соты Double", уменьшаем непрозрачность до 15% и изменяем режим смешивания на Screen.

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

 

Create a Funny Bee Swarm Illustration in Adobe Illustrator 26

Шаг 27

Выделяем все фигуры, с которых состоит наша пчелка. Группируем из, нажав ( Ctrl + G ).

Группу объектов разместим, как показано на первом скриншоте и переходим в Effect > Distort & Transform > Transform. Введите свойства, показанные ниже, и нажмите кнопку ОК.

Переходим к Effect> Stylize> Drop Shadow . Введите значения, как на левом нижнем скриншоте и нажмите кнопку ОК.

Возвращаемся в Effect> Stylize> Drop Shadow . Введите свойства как в среднем окне и нажмите кнопку ОК

Снова переходим в  Effect> Stylize> Drop Shadow  и вводим значения, как на правом скриншоте.

Create a Funny Bee Swarm Illustration in Adobe Illustrator 27

Шаг 28

Давайте убедимся, что пчелы выбраны и создаем их копию на заднем плане (CTRL + C > CTRL + B).

Переходим на панель слоев, выбираем копию группы и перемещаем ее немного вверх и вправо.

Создаем вторую копию и снова перемещаем немного вверх и вправо. Снижаем непрозрачность до 90% (как показано на втором изображении).

Создаем третью копию и перемещаем на несколько пикселей вверх и влево. Снижаем непрозрачность до 80% (третий скриншот).

Создаем еще одну копию и перемещаем ее на несколько пикселей вверх ив право. Снижаем непрозрачность до 70% (четвертый скриншот).

Create a Funny Bee Swarm Illustration in Adobe Illustrator 28

Вот и все!

Конечный результат

Create a Funny Bee Swarm Illustration in Adobe Illustrator

Автор —  Andrei Marius

Перевод — Дежурка




Комментарии

  1. лу
    Thumb up Thumb down +1

    Очень кропотливо и круто!

  2. Angel0s
    Thumb up Thumb down 0

    Все хорошо но это осы:)

    marina Ответ:

    Thumb up Thumb down +2

    я думаю, вы ошибаетесь =))

    Al Ответ:

    Thumb up Thumb down +1

    По окрасу — всё-таки оса. Да и жалко не ворсистое тоже говорит о том, что это оса))) Но вот «улыбка» 100% пчелиная, добрая)))

    marina Ответ:

    Thumb up Thumb down +1

    осы более длинные =) а эти толстенькие и кругленькие))) так что 100% пчелы))