Создаём в Photoshop кнопку для сайта "Скачать"

Pando4ka

Модератор форума
Модератор
Регистрация
7 Янв 2020
Сообщения
75
Реакции
0
EasyGold (EG)
0
BumpCoin (BC)
0
PostCoin (PC)
0
30.jpg

Для создания этой кнопки нам понадобятся некоторые

Пожалуйста Авторизуйтесь или Зарегистрируйтесь чтоб увидеть скрытый текст.

.



Пожалуйста Авторизуйтесь или Зарегистрируйтесь чтоб увидеть скрытый текст.

для работы.

Создаём новый документ размерами 300 х 200 px.
Создаём новый слой и называем "основа"

Берём инструмент Прямоугольник со скруглёнными краями
round_rectangle.jpg
Rounded rectangle tool
и рисуем, что-то на подобие:

1.jpg

Теперь зажимаем клавишу Ctrl и кликнем по миниатюре слоя с чёрной кнопкой. Этим самым мы выполним выделение этой будущей кнопочки.

Теперь возьмем инструмент Овальное выделение
Elliptical-Marquee.jpg
Еelliptical marqueetoolзажмём
клавишу Alt и вот так проведём:

3.jpg

Вот что у нас получится, вот такое выделение должно быть:

4.jpg

У вас должен быть включён инструмент Овальное выделение
Elliptical-Marquee.jpg
Еlliptical marquee tool
вот им кликнем мышью правой (2) по выделению и выбираем пункт меню Инверсия выделенной области (Select inverse) вот:

5.jpg

Вот как должно выглядеть выделение теперь:

6.jpg

А теперь просто нажимаем Delete и вот что выйдет:

7.jpg

Нажимаем снова Ctrl и кликнем по миниатюре слоя для выделения кнопки. Будем применять градиент. Но для начала один момент, у нас выделится обе части кнопки. Нам нужна только одна правая большая. Поэтому когда вы выделили обе части, опять берём инструмент выделения (любой) зажимаем Alt и убираем маленькую часть кнопки. Вот так:

8.jpg

И в итоге останется только лишь правая часть кнопки. Теперь нужно выбрать градиент, который вы скачали. Я возьму свой и вот так залью:

9.jpg

Снимаю выделение, и снова выделяю. Зажимая Ctrl, кликаю на миниатюре, затем Alt и убираю большую часть кнопки. Оставляю только маленькую. и тоже заливаю градиентом. вот что у меня в итоге выходит:

10.jpg

Ну а теперь самое интересное, работаем с большой частью кнопки. Нам нужно отделить маленькую часть от большой. Для этого выделяем кнопочку уже известным нам способом. И так же известным способом снимаем выделение с большой части, а оставляем только маленькую.
Теперь нам нужно копировать маленькую часть на новый слой. Нажимаем Ctrl+С это мы скопировали в буфер обмена выделенную часть маленькой кнопочки. Теперь нажимаем Ctrl+V, автоматически вклеиваем на новый слой. Скрываем новый слой с маленькой частью.
Переходим на слой со всей кнопкой и снова выделяем слой основа, и опять снимаем выделение с большой части. И, когда у нас выделенная только маленькая часть, мы попросту нажимаем Delete. Открываем новый слой с маленькой частью и та же самая кнопочка.
Назовём этот слой "мал. часть"
идём в параметры наложения слоя "Основа" и выбираем вкладку Обводка - Stroke я выбрал такое:

11.jpg

Теперь настраиваем градиент:

12.jpg

Теперь в Глянец(Satin):

13.jpg

Теперь в Тиснение ( Bevel and emboss):

14.jpg

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

15.jpg

Тень - (Drop shadow)

16.jpg

Вот что у нас получилось:

17.jpg

Теперь делаем видимым слой "мал часть" и тоже идём в параметры наложения:
Обводка ( Stroke)

18.jpg

Градиент:

19.jpg

Глянец ( Satin):

20.jpg

Тиснение (Bevel and emboss):

21.jpg

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

22.jpg

Тень (Drop shadow):

23.jpg
Вот что выходит:

24.jpg

Вернёмся на задний план и создадим новый слой "Перекладина" он должен быть под всеми слоями, и рисуем вот такую перекладину инструментом Прямоугольное выделение
marque.png
Rectangular marquee tool
.

25.jpg

Идём в параметры наложения слоя с выделением и вот таким градиентом зальём:

26.jpg

Теперь выходим из параметров наложения и переходим на задний план. И заливаем его более тёмным градиентом:

27.jpg

Осталось лишь сделать надпись и значок стрелку. Переходим на самый верхний слой и берём инструмент Горизонтальный текст
T.jpg
и пишем значение кнопки. У меня будет кнопка Скачать. Трансформируем текст по размеру кнопки (я от себя пофантазировал и применил стили):
28.jpg

Выбираем инструмент Произвольная фигура
shape.png
и выбираем стрелочку, но для начала создаем новый слой:
29.jpg

И опять я пофантазировал и применил параметры наложения, эта часть работы на ваш вкус. Просто фантазируйте:
30.jpg

Желаю успехов !
 
Сверху