Обновлено: 13.02.2022

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Похожие статьи

Как рисовать огонь в Photoshop Как разместить текст по кругу и кривой в Photoshop Рисуем оригами в Adobe Photoshop Рисуем креативный слайдер в Adobe Photoshop Новогодняя открытка в скандинавском стиле (урок Photoshop + исходник) Как убрать второй подбородок в Photoshop Цветокоррекция в Photoshop с помощью кривых Распределение объектов по кругу в Photoshop