Главная » Adobe Photoshop, Веб-дизайн » Космические иконки в стиле FLAT дизайна в Adobe Photoshop

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

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

В статье «Особенности FLAT – дизайна» я сделала небольшой экскурс в историю появления достаточного нового направления в дизайне. Сегодня я хочу показать, как с помощью простых фигур в Photoshop можно создать элементы 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

(Visited 1 720 times, 1 visits today)

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

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