в , ,

Рисуем кнопку PLAY для сайта в Фотошопе

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

Шаг 1. Рисование подсвеченного шара

Создайте новый документ в Фотошопе.

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

2 (38)
Кнопка PLAY для сайта

Начнем рисовать шар. Создайте новый слой и нарисуйте на нем желтый круг. Цвет я использовал — FFB911.

3 (41)
Кнопка PLAY для сайта

Чтобы шар был объемным необходимо добавить свет и тень на него.

Создайте выделение этого круга, нажав на слой с кругом с зажатой клавишей CTRL на клавиатуре.

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

4 (37)
Кнопка PLAY для сайта

Тоже самое повторите с тенью. Создайте новый слой и нарисуйте на краю шара (снизу справа) темное пятно.

5 (40)
Кнопка PLAY для сайта

Теперь необходимо нарисовать тень под самим шаром. Для этого создайте новый слой который будет ниже всех остальных (кроме фона с синим пятном). Нарисуйте на нем черной кистью большое пятно. Нажмите CTRL+T чтобы трансформировать его и сожмите его по вертикале.

6 (37)
Кнопка PLAY для сайта

На данный момент наша картинка выглядит так:

7 (37)
Кнопка PLAY для сайта

Шаг 2. Треугольник PLAY (символ)

Создайте новый слой. Возьмите инструмент Многоугольник (Polygonal Tool) на панели инструментов.

8 (34)
Кнопка PLAY для сайта

Теперь настройки этого инструмента. Темно коричные цвет и 3 стороны угольника.

065de1555aad4fededabd
Кнопка PLAY для сайта

Рисуйте треугольник по центру шара.

10 (31)
Кнопка PLAY для сайта

А теперь примените к треугольнику следующие стили:

Внутренняя тень (Inner Shadow):

11 (28)
Кнопка PLAY для сайта

Перекрытие градиентом (Gradient Overlay):

12 (31)
Кнопка PLAY для сайта

После эффектов кнопка будет выглядеть так:

13 (25)
Кнопка PLAY для сайта

Треугольник будет светиться. Для этого создайте новый слой под слоем с треугольником. На нем используя белую мягкую кисть нарисуйте под треугольником пятно.

14 (23)
Кнопка PLAY для сайта

Продублируйте слой со свечением (CTRL+J). Трансформируйте его так, чтобы он сжался в полоску, разверните его и поместите относительно одной из сторон треугольника.

15 (22)
Кнопка PLAY для сайта

Повторите это еще два раза, относительно остальных двух сторон треугольника.

16 (21)
Кнопка PLAY для сайта

После этого шага картинка выглядит так:

17 (20)
Кнопка PLAY для сайта

Шаг 3. Провод к шарику

С помощью инструмента Перо (Pen Tool) нарисуйте шнур. Обводку выберите желтого цвета, а размер в 5 пикселей. Опция Имитировать нажатие (Simulate Pressure) должна быть включена.

18 (19)
Кнопка PLAY для сайта

В месте пристыковки шнура к шарику нарисуйте прямоугольник. Трансформируйте его в перспективе (Perspective).

19 (17)
Кнопка PLAY для сайта
20 (14)
Кнопка PLAY для сайта

К шнуру надо добавить реалистичности. Для этого примените следующие стили к нему:

Внутреннее свечение (Inner Glow):

21 (16)
Кнопка PLAY для сайта

Фаска и Тиснение (Bevel and Emboss):

22 (14)
Кнопка PLAY для сайта

Перекрытие градиентом (Gradient Overlay):

23 (13)
Кнопка PLAY для сайта

Перекрытие узором (Pattern overlay):

24 (13)
Кнопка PLAY для сайта

После этого будет так:

25 (9)
Кнопка PLAY для сайта

Шаг 4. Свечение

Как я и обещал кнопка будет светиться. Поэтому мы сейчас и добавим это самое свечение.

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

26 (9)
Кнопка PLAY для сайта

Отменяем выделение (CTRL+D). Пододвигаем слой с белым пятном немного вправо и вниз. Это можно сделать тянув слой по диагонали с зажатым SHIFT. Тогда получиться ровно.

27 (9)
Кнопка PLAY для сайта

Делаем копию слоя и отражаем его по горизонтали. Перемещаем в верхний левый угол.

28 (9)
Кнопка PLAY для сайта

Результат махинаций такой:

29 (9)
Кнопка PLAY для сайта

Но это еще не все. Будет красивее если мы добавим светящихся точек вокруг шарика.

Для этого возьмите белую мягкую кисть и примените к ней следующие настройки кисти:

Динамика формы (Shape Dynamics):

30 (8)
Кнопка PLAY для сайта

Рассеивание (Scattering):

31 (7)
Кнопка PLAY для сайта

Другая динамика (Other Dynamics):

32 (5)
Кнопка PLAY для сайта

Функция Сглаживания (Smoothing) пусть будет включена.

Кисть готова и можно её нарисовать вокруг шарика точки.

33 (5)
Кнопка PLAY для сайта

Шаг 5. Еще цветового свечения

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

34 (4)
Кнопка PLAY для сайта

Добавьте корректирующий слой Цветовой баланс (Color Balance).

35 (4)
Кнопка PLAY для сайта
36 (4)
Кнопка PLAY для сайта

Кнопка PLAY готова!

37
Кнопка PLAY для сайта

На этом у меня все. До скорого!

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

Проголосуйте:

Аватар
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
photo 2020 05 19 00 56 43

Скрипт – Object Grouper by Yemz

logo 12

Делаем glitch-переход