Как создать металлическую кнопку в 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 | 22,39 Мб

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

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

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

ретушь растрёпанных волос
В этом материале речь пойдет об улучшении фотографий, сделанных на природе, а точнее, об исправлении развевающихся на ветру волос. На фоне природы...
коллаж
В этой статье я расскажу, каким способом я создал стоящее в море странное каменное строение сюрреалистического вида, используя слои и наложение...
добавление предметов на фотографию для получения фантастического пейзажа
В двух предыдущих уроках мы создали фон для 3D текста, сам текст, сделали текстуру букв в виде кирпичной стены и начали добавлять к буквам различные...
Предыдущая страница Шаг 4: Создание моря На этом этапе мы будем добавлять к коллажу море. Для начала, давайте откроем файл "Sea.jpg" из набора,...