Дизайн кнопки для сайта

В этом уроке я покажу вам метод, который я использую, чтобы создать стильные, (чистые) блестящие кнопки для вашего сайта в Photoshop. Этот метод очень прост, не более чем на пять шагов, но очень эффективен, поскольку вы можете использовать эти кнопки для широкого круга сайтов.

В течение данного урока мы будем использовать такие инструменты: Фигуры, Режимы наложения, Кисть и Ластик. Этот урок предназначен для начинающих, т.к. проходить его довольно легко, на мой взгляд. Что касается опытных пользователей Фотошопа, я хотел бы услышать от Вас методы, которые вы используете для достижения такого эффекта, просто напишите их мне в комментариях ниже.

Если при работе возникли какие-то проблемы, дайте мне знать, я буду стараться изо всех сил, чтобы помочь вам!
Вот результат, который Вы получите после выполнения данного урока:

Кнопка для сайта

Итак, давайте начнем!

Шаг 1. Давайте создадим новый документ размером 640 х 480 пикселей и зальем фон черным цветом.

В данном уроке я решил не создавать документ с такими же размерами, как и кнопка, которую мы создаем, потому что в конечном итоге мы будем помещать на эту кнопку, где-то на веб-странице. Поэтому, я думаю, было бы лучше, если мы будем работать на большом холсте, так у нас будет более полное представление о дизайне кнопки.

Теперь создаем новый слой поверх фонового слоя и называем его «подсветка», берем большую, мягкую круглую кисть с темно-серый цветом и щелкаем левой кнопкой мыши в месте, показанное ниже:

дизайн кнопки для сайта

Шаг 2.Берем инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle Tool) (U) и применяем такие настройки к нему:

Дизайн кнопки для сайта

Далее рисуем прямоугольную область в центре холста и применяем к ней такие стили слоя:

Тень(Drop Shadow):

Создание кнопки для сайта

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

Создание дизайна кнопки для сайта

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

Создание кнопки для сайта

И таким образом мы получаем следующий эффект:

Создание дизайна кнопки для сайта

Шаг 3. Теперь загружаем выделение слоя фигуры, удерживая клавишу Ctrl, щелкаем левой кнопкой мыши на иконке слоя с фигурой на палитре слоев.

Создаем новый слой под названием «Освещение», на этом слое, с помощью круглой мягкой кисти белого цвета ставим отпечаток одним щелчком мыши в позиции, как показано ниже:

Дизайн кнопки для сайта

И таким образом мы получаем следующий эффект:

Создание дизайна кнопки для сайта

К данному слою, применяем следующие настройки стилей слоя:

Тень(Drop Shadow):

Дизайн кнопки для сайта

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

Создание кнопки для сайта

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

Создание дизайна кнопки для сайта

У Вас должен получиться примерно такой результат:

Дизайн кнопки для сайта

По желанию, вы можете несколько раз продублировать слой «освещение» для создания большего эффекта освещения. Как Вы, наверное, уже заметили, на вершине кнопки мы создали яркую линию на краю, которая добавит некоторую изюминку к дизайну нашей кнопки:

Создание дизайна кнопки для сайта

Шаг 4.Дублируем слой «освещение» еще раз и помещаем этот слой поверх всех остальных слоев. Далее переходим в меню Слои> Смарт-объект>Преобразовать в смарт-объект или нажимаем правой кнопкой мыши на данном слое и выбираем Преобразовать в смарт-объект. После того как мы это сделали(-ем) переходим в меню Редактирование> Трансформирование>Отразить по вертикали.

Ниже вы видите, что сейчас мы добавили блестящую линию в нижнюю часть нашей кнопки, при этом закрыв ту, что была сверху:

Дизайн кнопки для сайта

И сейчас наша задача восстановить ее. А делать это мы будем с помощью инструмента «Ластик». Итак, давайте приступим, берем простой ластик с мягкой круглой кистью и делаем несколько щелчков по верхнему краю кнопки.

У вас должен получиться примерно такой результат:

Создание дизайна кнопки для сайта

Шаг 5. Теперь нам осталось только добавить текст на кнопку. Выбор шрифта является очень важным пунктом, т. к. мы хотим, чтобы наша кнопка выглядела стильно и интересно. Я считаю, что нам прекрасно подойдут шрифты типа Bold(жирные), например Verdana. После того как с выбором шрифта вы определились, пришло время набрать текст на кнопке. Напечатайте текст, подходящий под ваш вариант работы, я же буду использовать текст «My button».

Далее применяем к тексту такие стили слоя:

Тень(Drop Shadow):

Дизайн кнопки для сайта

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

Создание дизайна кнопки для сайта

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

Дизайн кнопки для сайта

После применения стилей слоя у вас должен получиться примерно такой результат:

Создание дизайна кнопки для сайта

Чтобы сделать текст еще немного выделяющимся, просто продублируйте слой с текстом, и у вас получится очень стильная и блестящая кнопка:

Дизайн кнопки для сайта

Это все на сегодня! Надеюсь, вам понравился этот урок, если у вас возникли проблемы при выполнении, пишите о них в комментариях, я постараюсь помочь вам!

Всего доброго и до новых встреч!

Переводчик: Заставный Сергей

  1 comment for “Дизайн кнопки для сайта

  1. KolambaWek
    18.04.2016 at 12:38 пп

    спасибо. очень хороший

    и полезный сайт.

    удачи и успеха вам.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *