Металлическая кнопка в Photoshop, добавление значка ON/OFF

Данная кнопка будет использоваться в андроид-приложении для включения/выключения светодиода,поэтому она должна иметь два состояния - ON и OFF.

В предыдущем уроке мы нарисовали основу кнопки, а точнее поверхность и корпус. Сейчас давайте создадим значок подсветки, обозначающий состояние кнопки.

Вот какое изображение должно получиться у нас в результате урока:

металлическая кнопка в Photoshop, добавление значка ON/OFF

Вот как выглядит заготовка кнопки на данный момент по результатам предыдущего урока, для наглядности я поместил кнопку на чёрный фон:

кнопка металл заготовка

Значок мы сделаем стандартный, примерно такого типа:


значок on/off
Мы будем создавать значок примерно такой формы.

А так как для андроид-приложения требуется несколько одинаковых картинок, но разных размеров (это потому что экраны андроид-гаджетов имеют разные разрешения и пропорции), мне придётся работать с векторными формами, чтобы размер исходника можно изменять без потери качества.

Начнём.

Создадим новый документ размером 500 на 500 пикселей. Поставьте направляющие по центру документа. Возьмите инструмент "Эллипс", выберите режим "Фигура" (Snape),
убедитесь, что убедитесь, что операции с контуром в положении"Новый слой" (подробнее здесь) и постройте геометрически правильный круг от центра, как в начале прошлого урока, после слов "давайте приступим". Цвет заливки не важен. Результат:


kak
Фигура "Эллипс" для заготовки значка.

Теперь нам надо построить ещё один круг, но так, чтобы содержимое этого круга вычиталось из содержимого первого круга. Для этого в панели параметров выбираем операцию "Вычесть переднюю фигуру" (Subtract from Shape Area):


вычесть фигуру
Выбор операции Вычесть переднюю фигуру (Subtract from Shape Area).

И строим ещё один правильный круг от центра, размер нового круга делаем меньше первого. Т.к. вторая фигура была построена в режиме вычитания, пиксели первой фигуры будут вычтены из второй:


kak
Содержимое второго круга вычтено из первого круга.

Примечание: При работе с векторными фигурами в некоторых версиях Photoshop я сталкиваюсь с некорректной работой программы при переключении режимов операций с контурами, это происходит и в данный момент в версии Photoshop CC 2017. Поэтому после переключения режимов я просто нажимаю отмену предыдущего шага Crtl+Alt+Z, потом строю вторую фигуру. Подробнее в видео.

В результате у нас получилась окружность, залитая пикселями. Но для нашей задачи необходима не целая окружность, а полуокружность, вернее, "две-трети-окружность )))". Из полученной окружности следует вычесть сегмент. Чтобы сегмент получился геометрически правильным, поставим горизонтальную направляющую на высоте трёх четвертей круга:


направляющая
Горизонтальная направляющая для построения вырезки части окружности.

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


контуры кнопки металл
При помощи треугольника, построенного инструментом "Перо" мы удалили часть окружности. Обратите внимание, все контуры находятся на одном слое.

Теперь надо подрисовать вертикальную палочку, на этот раз понадобится режим "Объединить фигуры" (Add to Shape Area):


режим объединить фигуры
Выбор режима "Объединить фигуры".

При переключении на этот режим (а он должен действовать на следующую добавленную фигуру) в моём Photoshop`е снова происходит глюк, треугольник, нарисованный пером, сливается с окружностью, поэтому я нажимаю отмену Crtl+Alt+Z, ошибка удаляется, а режим "Объединить фигуры" остаётся.

Берем инструмент "Прямоугольник" и строим вертикальный прямоугольник, завершающий значок ON/OFF:


значок
Значок ON/OFF построен. Но, как видите, толщина линий не соответствует друг другу. Это легко исправить.

Итак, в общем, значок готов. Если кого-то смущает отображение контуров фигур в документе, не беспокойтесь. При сохранении документа в любом стандартном графическом формате контуры видны не будут. Их можно скрыть даже в документе Photoshop, для этого надо всего-лишь выбрать любой другой инструмент, кроме векторных, например, "Перемещение" (Move Tool).

Но нам может не понравиться ширина линии полукруга или прямоугольника, диаметр и размер, их соотношение и т.п. Я не зря использовал для построения именно векторные фигуры, т.к в любой момент, даже после сохранения документа. мы можем изменить их масштаб без потери качества и с соблюдением относительной геометрии. Например, после построения прямоугольника мне кажется, что ширина полуокружности слишком мала по сравнению с прямоугольником. Я легко могу это исправить методом уменьшения диаметра внутреннего круга.
Берём инструмент "Выделение узла" (Direct Selection Tool), зажимаем клавишу Ctrl и поочерёдно кликаем по всем опорным точкам контура круга. Затем применяем команду "Свободное трансформирование", зажимаем клавиши Shift+Alt и, потянув внутрь за любой угол рамки трансформирования, уменьшаем диаметр внутреннего круга, чтобы увеличить ширину полосы полуокружности. Таким образом мы можем изменить размер и положение любых элементов значка:


кнопка металл градиент
Четыре опорных точки выделены, при трансформировании будет затронут только внутренний круг.

Но самое главное в том, что мы можем точно таким же образом изменять геометрию значка, уже наложив его на целевой документ.

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


кнопка металл градиент
Вид документа с добавленным векторным значком.

На данный момент значок расположен по центру кнопки, но смотрится как-то не так. Дело в том, что окружность значка находится ниже центра, но, если поднять фигуру, то прямоугольник будет слишком высоко. Следовательно, сначала необходимо опустить контур прямоугольника относительно значка, а затем переместить вверх весь значок. Контур легко можно опустить инструментом "Выделение контура":


кнопка металл градиент
Перемещаем прямоугольник немного вниз.

С помощью выделения опорных точек контуров и инструмента "Свободное трансформирование" мы можем изменить размер значка.

Кроме того, выделив нужные опорные точки инструментом "Выделение узла" (Direct Selection Tool) мы можем не только трансформировать размер, но и перемещать точки для изменения формы значка. Здесь я подгоню размер значка (выделены все опорные точки) под размер кнопки:


кнопка металл градиент
С помощью "Свободного трансформирования" подгоняем размер векторной фигуры.

Переименуем слой со значком в on.

Сначала сделаем вид значка в состоянии ON. В данном случае, ограничимся добавлением стилей слоя "Внешнее свечение" и "Наложение цвета" со следующими параметрами:

kak    kak

Результат:


кнопка металл градиент
Вид кнопки в состоянии "включено".

Теперь сделаем состояние OFF. Дублируем слой on, переименуем в off и добавим стиль слоя "Внутренняя тень" и "Наложение цвета" со следующими параметрами:

kak    kak

Результат:


кнопка металл градиент
Вид кнопки в состоянии "выключено".

Для придания кнопке эффекта блестящего металла на корпусе следует поставить блик. Создайте новый слой поверх всех остальных слоёв. Возьмите инструмент "Кисть", жёсткость сделайте равную нулю, цвет белый, размер чуть поболее полоски корпуса. Кликните кистью сверху слева. Должно получиться что-то вроде этого:


кнопка металл градиент
Готовый рисунок, для наглядности я добавил чёрный фон.

И последнее. Иногда, для придания техно-стиля, поверхность кнопок имеет текстуру из концентрических окружностей, для этого на слой с поверхностью необходимо наложить примерно такое изображение:


концентрические окружности
Моё изображение с концентрическими окружностями на прозрачном фоне.

Подобное изображение элементарно создаётся в любом векторном графическом редакторе, например, CorelDRAW, а вот в Photoshop стандартными средствами, даже с использованием экшенов, сделать его не представляется возможным. Только вручную, методом создания контура в виде окружности с последующей обводкой толщиной 1 пиксель, потом создания следующей окружности большего диаметра и т.д., в общем, это долго и скучно. Но т.к. я не ищу лёгких путей, чисто из принципа я накодил JS-скрипт для Photoshop для получения концентрических кругов с равным отступом друг от друга, описывать здесь не буду, эта узкая тема и интересна только людям, работающим в CAD программах. Рисунок кругов я предлагаю скачать вместе с готовым PSD по ссылкам внизу страницы.

Помещаем рисунок с окружностями над слой-фигурой с основой кнопки, изменяем режим наложения, режим лучше всего подобрать самостоятельно методом тыка, здесь у меня использован режим "Перекрытие".

Если окружности выделяются слишком явно, уменьшите непрозрачность слоя, кроме того, я добавил слой-маску и кое-где закрасил окружности полупрозрачной чёрной кистью.

Готовый результат:


металлическая кнопка в Photoshop, добавление значка ON/OFF

Скачать материалы к уроку (PSD, 1 PNG, 22,39 Мб)

Теги:

Помощь сайту

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

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

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

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

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

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

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

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

волосы фотошоп CS6
В программе Photoshop CS3 компания Adobe представила новый инструмент - Уточнить край (Refine Edge), облегчающий выбор мелких деталей в изображении,...
Восемь шаблонов круглых кнопок для темы сайта. Каждая кнопка в отдельной группе. В группе отдельные слои с основными рисунками, масками и эффектами...
Образцы
В данном материале Вы можете бесплатно скачать PSD файл с шестью кнопками для сайта. Кнопки имеют полностью завершённый для размещения на страничке...
В этом уроке я расскажу, как последовательно, шаг за шагом в программе Photoshop, создать плакат на старинную тематику, "главным действующим лицом" в...