Создаем стильную техно кнопку для сайта используя Фотошоп

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

Создаем стильную техно кнопку для сайта используя Фотошоп


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

Создаем стильную техно кнопку для сайта используя Фотошоп

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


Материалы использованные в уроке:

Шрифт: DC Stamper;


Шаг 1.


Создаем новый документ 400х100 px. И заливаем, к примеру, белым (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


Шаг 2.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), берем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и рисуем такую вещь: ↓


Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 3.

Жмем Ctrl+Enter (это преобразуем контур в выделение) и заливаем выделение вот таким градиентом используя инструмент Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"): ↓


Настройки градиента: ↓

Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 4.


Дублируем слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), убираем видимость с дубликата, активируем первый слой (с которого мы делали дубликат), берем Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"), создаем прямоугольное выделение, жмем Selection > Transform Selection (Выделение > Трансформировать выделение), немного поворачиваем и начинаем удалять части с боков (прим. не забывайте, что по середине будет надпись): ↓


Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 5.


Возвращаем видимость дубликата (если конечно вы ее убирали) и активируем его, загружаем выделение этого слоя (Ctrl+click по иконке слоя), идем Select > Modify > Contract (Выделение > Модификация > Сжать) со значением 3, жмем Delete. Сводим эти два слоя. Должно получиться: ↓


Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 6.


Применяем к получившемуся слою стиль → Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 7.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), берем Magic Wand Tool Инструмент - Волшебная палочка (Инструмент "Волшебная палочка" / Клавиша "W") и с зажатой клавишей Shift выделяем все прорезы, а потом заливаем их (#f1d036): ↓


Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 7.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), заливаем черным и применяем Filter > Noise > Add noise (Фильтры > Шум > Добавить шум).


Создаем стильную техно кнопку для сайта используя Фотошоп

Шаг 8.


Дублируем получившийся слой и к одному из них применяем Filter > Blur > Motion blur (Фильтр > Размытие > Размытие в движении) с параметрами Angle (Угол) – 0 °, Distance (Смещение) – 40, а к другому Angle (Угол) – 45 °, Distance (Смещение) – 40.


Blending mode (Режим наложения) верхнего слоя меняем на Screen (Осветление). Сводим эти два слоя (Layer > Merge down (Слой > Объединить слои)), жмем Ctrl+Alt+G (прим. под этим слоем должны находится желтые линии), режим смешивания меняем на Vivid Light (Яркий свет), а Opacity (Непрозрачность) на 75. Должно получится: ↓


Создаем стильную техно кнопку для сайта используя Фотошоп

Ну вот и все. Так же можно добавить стиль слоя Drop Shadow (Тень) и конечно же текст - Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T").

(прим. т.к. некоторые части кнопки получились полупрозрачными, советую сводить слои вместе с белым, а потом лишние части удалить)


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

Создаем стильную техно кнопку для сайта используя Фотошоп

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