Как создать металлическую кнопку в 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-код для установки:

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

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

плавный переход
В этом несложном уроке для начинающих я расскажу, как соединить две фотографии в одно изображение таким образом, чтобы между ними был плавный переход...
Из этого урока мы узнаем, как в Adobe Photoshop нарисовать с нуля иконку компаса, используя такие инструменты, как "Перо" (Pen Tool), "Прямоугольник...
Наложение автомобилей на другое изображение
Целью этого урока является демонстрация того, как сочетать и смешивать различные объекты и подбирать для них определённые фоны, чтобы в результате...
коллаж Тёмный жнец смерти
В этой статье я расскажу о создании немного необычного, мрачного коллажа, главной темой которого является символ смерти. При создании коллажа...