В этом уроке я покажу вам метод, который я использую, чтобы создать стильные, (чистые) блестящие кнопки для вашего сайта в 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):
После применения стилей слоя у вас должен получиться примерно такой результат:
Чтобы сделать текст еще немного выделяющимся, просто продублируйте слой с текстом, и у вас получится очень стильная и блестящая кнопка:
Это все на сегодня! Надеюсь, вам понравился этот урок, если у вас возникли проблемы при выполнении, пишите о них в комментариях, я постараюсь помочь вам!
Всего доброго и до новых встреч!
Переводчик: Заставный Сергей