Главная » Adobe Photoshop, Веб-дизайн, Уроки » Векторные изображения в Photoshop — как рисовать

Векторные изображения в Photoshop — как рисовать

космические иконки в стиле FLAT -дизайна в Photoshop

Обновлено: 13.02.2022

Мы знаем Photoshop как мощный редактор растровой графики. Но он обладает достаточно широким ассортиментом инструментов для создания векторных изображений, которые так востребованы во flat-дизайне. Сегодня я хочу показать, как в Photoshop можно создать креативные космические иконки. На их примере вы познакомитесь с такими инструментами как Перо (Pen Tool) и Формы — фигуры (Shapes). И узнаете, как с их помощью создаются векторные изображения в Фотошопе. Отличная новость для тех, кто не хочет менять его на Illustrator или Figma.

Выбор цветовой гаммы для векторных изображений в стиле flat

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

stylish-flat-space-icons-in-adobe-photoshop-1

Как рисовать векторное изображение с ракетой

Шаг1. Нарисуйте на рабочей области эллипс размером 512х512 px. Цвет — #304c5a.

stylish-flat-space-icons-in-adobe-photoshop-2

Шаг2. Нарисуем ракету. Для этого в центре уже нарисованного эллипса поместим еще один белый эллипс.

stylish-flat-space-icons-in-adobe-photoshop-3

В группе инструментов «Перо» выберите инструмент «Угол», щелкните им по белому эллипсу, появятся направляющие точек. Щелкните инструментом «Угол» по верхней точке, чтобы образовать угол на вершине эллипса. И немного потяните направляющие, если захотите придать округленность вершине.

stylish-flat-space-icons-in-adobe-photoshop-4

Шаг 3. В группе инструментов фигур выберите прямоугольник. Убедитесь, чтобы на панели свойств фигуры был выбран режим «Пересечения». Постройте прямоугольник поверх нашего эллипса как на рисунке ниже. Нижняя часть эллипса обрежется.

stylish-flat-space-icons-in-adobe-photoshop-5

Шаг 4. Создайте новую фигуру прямоугольника поверх имеющейся. Цвет — #dedede. Откадрируйте ее по форме имеющейся фигуры, — для этого установите указатель мыши между слоями с прямоугольником и слоем основании ракеты так, что курсор изменился на значок с двумя пересеченными кружками и стрелочкой. И щелкните левой клавишей мыши. Получится следующее.

stylish-flat-space-icons-in-adobe-photoshop-6

Шаг 5. Нарисуйте под основанием ракеты еще одну ступень. С помощью инструмента «Прямоугольник с закругленными краями».

stylish-flat-space-icons-in-adobe-photoshop-7

Шаг 6. Создадим окно иллюминатора, размером 100х100px с помощью инструмента «Эллипс»

stylish-flat-space-icons-in-adobe-photoshop-8

Шаг 7. Используя инструменты и фигуры такие же, как в шаге 3 создадим огонь для нашей ракеты.

stylish-flat-space-icons-in-adobe-photoshop-9

Пристроим огонь к нашей ракете.

stylish-flat-space-icons-in-adobe-photoshop-10

stylish-flat-space-icons-in-adobe-photoshop-11

Шаг 8. Используя инструмент прямоугольника из набора фигур, на заднем плане ракеты создадим тень для нее. Цвет черный, прозрачность слоя 50%, угол наклона 45 градусов.

stylish-flat-space-icons-in-adobe-photoshop-12

Отредактируем прямоугольник, используя инструмент Стрелка (А).

stylish-flat-space-icons-in-adobe-photoshop-13

Шаг 9. Создадим для тени слой маску – Слои – Слой-Маска – Показать все. Зальем ее черно-белым градиентом. Режим наложения поменяем на умножение.

stylish-flat-space-icons-in-adobe-photoshop-14

Сведем изображение тени под изображение круга иконки.

stylish-flat-space-icons-in-adobe-photoshop-15

Шаг 10. Нарисуем красный нос ракеты.

stylish-flat-space-icons-in-adobe-photoshop-16

Шаг 11. Добавим с помощью эллипсов вспомогательные элементы на иллюминатор ракеты и нарисуем звезды.

stylish-flat-space-icons-in-adobe-photoshop-17

Как рисовать векторное изображение с планетой

Принцип действий остается прежним, поэтому буду краткой.

Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a. Поверх создайте эллипс планеты меньшего размера. Цвет — #ffd9a2. Поверх эллипса создайте несколько прямоугольников, подберите различные оттенки цвета планеты. Затем объедините прямоугольники в один слой и поверните на небольшой угол.

stylish-flat-space-icons-in-adobe-photoshop-18

Откадрируйте слой с прямоугольниками по кругу планеты.

stylish-flat-space-icons-in-adobe-photoshop-19

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

stylish-flat-space-icons-in-adobe-photoshop-20

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

stylish-flat-space-icons-in-adobe-photoshop-21

Шаг 4. Наклоните астероидный пояс и скройте ненужную часть за слой-маской.

stylish-flat-space-icons-in-adobe-photoshop-22

Шаг 5. Создайте тень с помощью прямоугольников в два этапа.

stylish-flat-space-icons-in-adobe-photoshop-23

Добавим звезды и фон.

stylish-flat-space-icons-in-adobe-photoshop-24

Как рисовать векторное изображение с телескопом

Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a.  Нарисуйте красный эллипс и обрежьте его с помощью слой-маски.

stylish-flat-space-icons-in-adobe-photoshop-25

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

stylish-flat-space-icons-in-adobe-photoshop-26

Шаг 2. С помощью инструмента «Многоугольник» из группы «Фигуры» нарисуйте треугольник. Трансформируйте его так, чтобы получилась антенна, и добавьте к ней эллипс.

stylish-flat-space-icons-in-adobe-photoshop-27

С помощью инструмента «Многоугольник» нарисуйте треугольное основание под эллипсом. Затем вырежьте в нем фигуру треугольника с помощью того же инструмента. Не забудьте, что нарисованную фигуру, даже ту, которую мы используем для вычитания элементов можно двигать с помощью инструмента «Выделение контура».

stylish-flat-space-icons-in-adobe-photoshop-28

Шаг 3. Добавьте тень и звезды.

stylish-flat-space-icons-in-adobe-photoshop-29

Вот так с помощью простых фигур в программе Photopshop можно сделать креативные элементы FLAT – дизайна. Урок составлен на основании статьи — How to Create Stylish Flat Space Icons in Adobe Photoshop

Заключение

Благодаря опубликованным в статье урокам, вы познакомились со всем арсеналом инструментов Photoshop для рисования векторных изображений. Вы можете использовать их для рисования логотипов и элементов фирменного стиля. Сохраняйте полученную графику в формат SVG и используйте во всех редакторах, поддерживающих векторную графику.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных уроков Photoshop!

2 комментарии на “Векторные изображения в Photoshop — как рисовать

  1. Интересный урок. Спасибо! Все как помешались на этом плоском дизайне. Сейчас он везде.

    1. Flat дизайн действительно очень популярен и в нем есть огромное количество плюсов. В последнее время наблюдается совмещение плоского дизайна с иллюзией объема. Подробнее можете посмотреть в статье «Тренды веб дизайна в 2020 году»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *