Фотошоп для фотографа 2013

Создаем стильную кнопку «Buy now» используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания стильной кнопки - «Buy now».


Финальный результат

Создаем стильную кнопку «Buy now» используя Фотошоп

Приступаем к уроку Фотошопа


Шаг 1. Создание основы:


Создадим новый документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).


Создаем стильную кнопку «Buy now» используя Фотошоп

Выбираем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") с радиусом 15px и рисуем прямоугольник.


200 x 50 px. Заливаем его любым цветом.


Создаем стильную кнопку «Buy now» используя Фотошоп

Далее идем в Layer > Layer Style > Blending Options (Слой > Стиль слоя > Параметры наложения) и выставляем значения стилей слоя.


Настройки как на изображении ниже (Gradient Overlay (Наложение градиента)): ↓


Создаем стильную кнопку «Buy now» используя Фотошоп

Далее выбираем Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") и делаем выдиление как на картинке.


Создаем стильную кнопку «Buy now» используя Фотошоп

Потом зажимаем Shifi+Ctrl+Alt и кликаем на иконку слоя в панеле слоя.


Создаем стильную кнопку «Buy now» используя Фотошоп

Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и заливаем его белым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")),


Уменьшаем непрозрачность слоя до 20%.


Создаем стильную кнопку «Buy now» используя Фотошоп

И вот что должно у вас получится после выполнения всех действий первого Шага: ↓


Создаем стильную кнопку «Buy now» используя Фотошоп

Шаг 2. Создание дизайна кнопки:


Выбираем Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U"), выбираем шейп как на картинке: ↓


Создаем стильную кнопку «Buy now» используя Фотошоп

Далее расположите этот шейп как на картинке: ↓


Создаем стильную кнопку «Buy now» используя Фотошоп

И примините к ним стиль слоя (Blending Options (Параметры наложения)): ↓

Inner Glow (Внутреннее свечение), Gradient Overlay (Наложение градиента).


Создаем стильную кнопку «Buy now» используя Фотошоп

Создаем стильную кнопку «Buy now» используя Фотошоп

Далее добавте надпись "BUY NOW" шрифт - Snowcard Gothic размер - 6px, и примините к ней стиль слоя (Blending Options (Параметры наложения)): ↓

Inner Glow (Внутреннее свечение), Gradient Overlay (Наложение градиента).


Создаем стильную кнопку «Buy now» используя Фотошоп

Создаем стильную кнопку «Buy now» используя Фотошоп

И вот результат: ↓

Создаем стильную кнопку «Buy now» используя Фотошоп

Шаг 3. Создание анимации:


К первой стрелке приминяем такой стиль слоя (Blending Options (Параметры наложения)): ↓

Gradient Overlay (Наложение градиента)


Создаем стильную кнопку «Buy now» используя Фотошоп

Создаем стильную кнопку «Buy now» используя Фотошоп

Идем в Window > Animation (Окно > Анимация). Выставляем задержку на 0.15 sec.

Потом копируем фрейм 2 раза.

Во втором фрейме ко второй стрелке приминяем стиль слоя как и к первой, кроме того к первой стрелке приминяем стиль слоя как мы приминяли еще в начале рис. 10, 11.


Повторяем такое действие и с третьей стрелкой.

Bот и все, нажимаем play и наслаждаемся. Но если вы хотите использовать ее, то переходим в Image Ready и выбираем там File > Save Optimized As (Файл > Сохранить оптимизированный как...) и выбираем формат "filename.gif".


И вот результат: ↓


Финальный результат

Создаем стильную кнопку «Buy now» используя Фотошоп

Благадарю всех за внимание.


Урок подготовлен для Вас командой сайта PhotoshopPro.ru