Делаем глянцевую кнопку для сайта

Шаг 1. 

Создайте новый документ 102*50 пикселей. Фон залейте цветом #838383. Выберите инструмент Rounded tool(Прямоугольник со скругленными краями). Установите следующие настройки:

Измените фоновый цвет на #111111. Начертите прямоугольник так, чтобы он вписался в размер холста. 

Шаг 2. 

Щелкните дважды на слое с прямоугольником и примените следующие стили слоя:

Drop shadow (Тень):

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

Bevel and Emboss (Тиснение/скос)

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

Stroke (Обводка)

Результат:

Шаг 3. 

Выберите инструмент Pencil (Карандаш) с размером 2 пикселя. Измените основной цвет на #eee1cd. Сделайте горизонтальную линию поперек вашего прямоугольника.

Примените следующие стили слоя:

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

Outer glow (Внешнее свечение)

Результат:

Шаг 4. 

Убедитесь, что слой с линией все еще активен. Выполните команду Layer - Layer Mask- Reveal All (Слои- Слой-маска - Показать все). Выберите инструмент Gradient(Градиент) и установите следующие настройки:

Примените градиент как показано на рисунке:

Ваш результат:

Шаг 5.

 Выберите инструмент Pen (Перо) и создайте форму, как показано на рисунке.

Выполните команду Filter- Blur -Gauassian blur (Фильтры - Размытие - Размытие по Гауссу) с радиусом 0.6 пикселя.

Шаг 6.

 Активируйте слой с прямоугольником.

Выделите содержимое этого слоя. Для чего зажмите CTRL и щелкните на символе маски.

Инвертируйте выделение (SHIFT + CTRL + I). Вернитесь на слой с фигурой, которую вы рисовали пером. Удалите выделение. Уберите выделение (CTRL + D).

Ваш результат:

Шаг 7.

 Дублируйте слой и расположите его симметрично.

Шаг 8.

Сделайте активным слой с прямоугольником и выделите его содержимое. Создайте новый слой над слоем с прямоугольником и выполните команду Edit - Stroke (Редактировать - Выполнить обводку). Настройки показаны на рисунке.

Уберите выделение. Выполните команду Layer- Layer Mask- Reveal All (Слои - Слой-маска -Показать все). Выберите инструмент Gradient(Градиент). Создайте градиент как показано на рисунке.

Ваш результат (после уменьшения непрозрачности (Opacity) до 75%):

Шаг 9. 

Теперь создайте текст. Определитесь, что вы хотите написать. Цвет текста - #e7e7e7. Слово site на рисунке залито белым цветом.

Примените к слою следующие стили:

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

Stroke (Обводка)

Результат:

Перевод: Гревцов Никита.