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

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

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

В данном уроке Фотошопа мы рассмотрим процесс создания металлической кнопки для сайта.


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

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

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


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

Цвет фона - #303030.


С помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") рисуем фигурку. Радиус 15 pixels.


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

Растеризируем слой. Layer > Rasterize > Shape (Слой > Растрировать > Фигура), Обзываем его Shape 1.


Применяем к нему следующие Blending Options (Параметры наложения): ↓


Bevel and Emboss (Тиснение и рельеф): ↓

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

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

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

Параметры градиента: ↓

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

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

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

Текущий результат: ↓

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

Выбираем Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M"), устанавливаем ее параметры: ↓


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

Делаем выделение на кнопочке и жамкаем delete.


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

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

Передвигаем выделение влево.


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

Меняем тут способ выделения: ↓


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

Делаем еще кружок рядом с предыдущим.


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

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

Снова Delete. Перемещаем наше выделение влево и Select > Modify > Contract (Выделение > Модификация > Сжать) на 1 pixel. Delete.


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

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

Выбираем Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") с настройками: ↓


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

И извращаемся над кнопочкой: ↓


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

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

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


И рисуем новую фигурку: ↓


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

Layer > Rasterize > Shape (Слой > Растрировать > Фигура), обзываем Shape 2. Идем Select > Load Selection (Выделение > Загрузить выделенную область), переключаемся на Shape 1 и нажимаем delete. Shape 2 отключаем (видимость слоя).


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

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

Создаем новый слой между бекграундом и Shape 1 (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")).


Выбираем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и рисуем овальчик. Layer > Rasterize > Shape (Слой > Растрировать > Фигура).


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

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


Outer Glow (Внешнее свечение): ↓

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

Bevel and Emboss (Тиснение и рельеф): ↓

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

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

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

Параметры градиента: ↓

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

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

Добавляем надпись и применяем к ней те же свойства слоя.


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

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

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