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


В этом уроке я покажу вам метод, который я использую, чтобы создать стильные, (чистые) блестящие кнопки для вашего сайта в 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 комментарий для “Дизайн кнопки для сайта

  1. KolambaWek
    18.04.2016 at 12:38 пп

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

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

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

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

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