Как создать металлическую кнопку в Photoshop

Прежде всего хочу сказать, что подобную работу рентабельнее выполнять в векторном редакторе, наподобие Adobe Illustrator или CorelDraw, чем в растровом редакторе Photoshop.

Но что делать, если под рукой нет векторного редактора, а работу надо выполнить прямо сейчас? Другого выхода, кроме как применить старый добрый Photoshop, нет. Но и в Photoshop нарисовать кнопку, имеющую эффект металлической поверхности, вовсе не трудно.

Вот что получилось у меня за пять минут работы:

как создать металлическую кнопку в Photoshop

Нарисовать металлическую кнопку с эффектом нажатия мне понадобилось для создания интерфейса бесплатного андроид-приложения "Фонарик", установить которое вы можете по этой ссылке, заодно и посмотреть, как на практике можно применить созданное в Photoshop изображение. Описание приложения здесь.

Давайте приступим.

Открываем Photoshop, создаём новый документ размером 500 на 500 пикселей или какой вам больше нравится. Размеры документа в последствии можно будет изменить без потери качества, т.к. для создания мы будем использовать векторные инструменты и стили слоя.

Ставим две направляющие точно по центру документа. Берём инструмент "Эллипс", задаём режим "Фигура" (Snape), цвет заливки серый #8f8f8f. Наводим курсор точно в перекрестье направляющих, зажимаем левую клавишу мыши и начинаем тащить курсор в любом направлении от центра. После того, как вы начали протаскивать курсор, зажмите клавиши Alt и Shift, центр построения эллипса переместится в перекрестье курсора, а сам эллипс станет геометрически правильным кругом. Таким образом постройте фигуру в форме круга. Когда закончите, сначала отпустите левую клавишу мыши, и только потом клавиши Alt и Shift. Таким образом, у нас должно получиться что-то вроде этого:


фигура
Построение фигуры эллипса.

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


параметры градиента
Обращаю внимание, что стиль градиента - "Угловой" (Angle). Цвета чередуются - чисто белые с серыми разных оттенков.

Результат:


кнопка металл градиент
Металлический градиент на кнопке.

Дублируйте слой с эллипсом и переместите полученный дубликат под исходный слой (у меня дубликат назван Эллипс 1 копия). Примените к дубликату команду "Свободное трансформирование" (Ctrl+T), зажмите клавиши Alt+Shift и несколько увеличьте диаметр фигуры, потянув за любой из углов рамки:


kak
Создание основы кнопки.

Примените к нему также стиль слоя стиль слоя "Наложение градиента", но настройки в этот раз будут другими, стиль градиента - зеркальный, чередуются чёрный и белые цвета:


металл
Добавление зеркального градиента к основе кнопки.

Результат должен быль следующим:


kak-
Две слой-фигуры с градиентами.

Дублируйте слой Эллипс 1 копия, у меня он назван Эллипс 1 копия 2 и переместите его под Эллипс 1 копия. Увеличьте его диаметр "Свободным трансформированием", чтобы документ выглядел примерно так:


kak
Дублирование слой-фигуры.

К этой слой-фигуре мы добавим два стиля слоя - "Тиснение" и "Обводка" со следующими настройками:

kak    kak

Результат:

kak

В следующем уроке мы нарисуем значок включения/выключения и зададим кнопке текстуру.

Скачать материалы к уроку:

1 PSD, 1 PNG | 1,54 Мб

Теги:

Помощь сайту

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

Райфайзен банк прямой перевод на карту

QIWI кошелёк: ссылка для пополнения на никнейм NOSTROM

Сбербанк, номер карты для прямого перевода: 4274 3200 5092 4219

PayPal ссылка для перевода

WebMoney, рублёвый кошелёк R250684729036, долларовый кошелёк: Z170567175694

Яндекс.Деньги, форма для пополнения:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Предыдущая страница Теперь приступим к вставке частей двигателя и механических передач, из которых будет состоять механические фрагменты тела девушки...
эффект стеклянной 3D мозаики в Photoshop
В этом уроке я расскажу, как создать интересный эффект стеклянной светящейся 3D мозаичной стены с помощью собственных средств Photoshop. Урок...
Как сделать татуировку в Photoshop
В этом несложном уроке я расскажу, как создать эффект тату на коже человека, используя любой текст, фигуры или векторную графику. Всё, что нам нужно...
Наложение автомобилей на другое изображение
Целью этого урока является демонстрация того, как сочетать и смешивать различные объекты и подбирать для них определённые фоны, чтобы в результате...