Как создать бледно-золотые кнопки-переключатели

 Как создать бледно-золотые кнопки-переключатели

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

Предварительный просмотр результата

Как всегда показываем, что именно мы будем создавать:

Как создать бледно-золотые кнопки-переключатели

Шаг 1

Открываем Photoshop и нажимаем Control + N, чтобы создать новый документ. Вводим все данные, показанные на следующем изображении, и нажимаем ОК.
Включаем сетку (View > Show > Grid) и привязку к сетке (View > Snap To > Grid). Для начала нам нужна сетка через каждые 5рх. Переходим в Edit > Preferences > Guides, Grid & Slices и фокусируемся на секции Grid. Вводим значение 5 в окно Gridline Every и 1 – в окно Subdivision. Также устанавливаем цвет сетки #a7a7a7. После того, как установили все настройки, нажимаем ОК.
Не пугайтесь этой сетки, она нам поможет в будущем.
Вам также нужно открыть панель Info (Window > Info) для просмотра размеров и расположения фигур в реальном времени.

Шаг 2

Устанавливаем цветом переднего плана цвет #e8d8a7, выбираем инструмент Rounded Rectangle Tool и фокусируемся на верхней панели. Устанавливаем радиус 30рх, создаем векторную фигуру 190 на 60px и убеждаемся, что она остается выделенной.
Продолжаем работать с инструментом Rounded Rectangle Tool, фокусируемся на верхней панели и отмечаем кнопку Add. Добавляем векторную фигуру 20 на 10px и располагаем её так, как показано на втором изображении. Привязка к сетке должна облегчить эту задачу.
Убедитесь, что векторная фигура все ещё выделена, и продолжаем работать с инструментом Rounded Rectangle Tool, добавляем вторую векторную фигуру 20 на 10px и располагаем её, как показано на третьем изображении.

Как создать бледно-золотые кнопки-переключатели

Шаг 3

Фокусируемся на панели слоев (Window > Layers) и нажимаем дважды на векторной фигуре, созданной в предыдущем шаге, чтобы открыть окно стилей слоя. Активируем Drop Shadow, Inner Shadow, Outer Glow, Bevel and Emboss и Gradient Overlay, затем вводим настройки, показанные на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 4

Устанавливаем цветом переднего плана цвет #a29261 и берем инструмент Rounded Rectangle Tool. Создаем векторную фигуру 180 на 50px, располагаем её так, как показано на первом изображении и убеждаемся, что она все ещё выделена. Продолжаем работать с инструментом Rounded Rectangle Tool, фокусируемся на верхней панели и отмечаем кнопку Subtract. Создаем векторную фигуру 170 на 40px и располагаем её так, как показано на втором изображении. Открываем окно стилей слоя для новой векторной фигуры и вводим настройки, показанные на следующих изображениях:

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 5

Устанавливаем цветом переднего плана цвет #d4c493 и берем инструмент Rounded Rectangle Tool. Создаем векторную фигуру 170 на 40px, располагаем её так, как показано на первом изображении. Открываем окно стилей слоя для новой векторной фигуры и вводим настройки, показанные на следующих изображениях:
Возвращаемся на панель слоев, нажимаем дважды на округлый прямоугольник и просто называем его «interior».

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 6

Для следующих шагов нам необходима сетка через каждые 1рх. Переходим в Edit > Preferences > Guides, Grid & Slices и вводим значение 1 в окно Gridline Every. Устанавливаем цветом переднего плана цвет #ac9c6b, берем инструмент Ellipse Tool, создаем круг 4рх и располагаем его так, как показано на первом изображении.
Открываем окно стилей слоя для новой векторной фигуры и вводим настройки, как показано на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 7

Дублируем векторную фигуру, созданную в предыдущем шаге (CTRL + J). Выделяем копию, перетаскиваем её вправо и располагаем так, как показано на втором изображении. Привязка к сетке снова должна облегчить эту работу.

Как создать бледно-золотые кнопки-переключатели

Шаг 8

Устанавливаем цветом переднего плана цвет #a29261 и берем инструмент Rounded Rectangle Tool. Создаем векторную фигуру 100 на 44px, располагаем её так, как показано на первом изображении.
Открываем окно стилей слоя для новой векторной фигуры и вводим настройки, как показано на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 9

Дублируем векторную фигуру, созданную в предыдущем шаге (CTRL + J). Фокусируемся на панели слоев, нажимаем правой кнопкой на этой копии и переходим в пункт Clear Layer Style. Выделяем копию, снижаем заливку до 0%, затем открываем окно стилей слоя и вводим настройки, показанные на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 10

Дублируем векторную фигуру, созданную в предыдущем шаге (CTRL + J). Фокусируемся на панели слоев, выделяем копию и стираем текущие атрибуты стилей слоя. Выделяем копию, снижаем заливку до 0%, затем открываем окно стилей слоя и вводим настройки, показанные на следующих изображениях. Продолжаем фокусироваться на панели слоев, зажимаем кнопку CTRL и нажимаем на «interior». Это действие должно загрузить выделение вокруг векторной фигуры. Убедитесь, что она остается активной, выделите копию, созданную в предыдущем шаге, и нажмите кнопку «Add layer mask». В результате ваша векторная фигура должна выглядеть так, как показано на третьем изображении. Нажмите Control + D, чтобы снять выделение.

Как создать бледно-золотые кнопки-переключатели

Шаг 11

Снова выделяем векторную фигуру с маской, сделанную в предыдущем шаге, снижаем её заливку до 0%, а затем открываем окно стиле слоя. Отмечаем «Layer Mask Hides Effects», затем активируем Drop Shadow и вводим настройки, показанные на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 12

Устанавливаем цветом переднего плана цвет #85bc46 и берем инструмент Rounded Rectangle Tool, создаем векторную фигуру 5 на 14px и убеждаемся в том, что она остается активной. Продолжаем работать с инструментом Rounded Rectangle Tool, отмечаем Add на верхней панели, а затем добавляем две векторные фигуры 5 на 14px, как показано на втором изображении.

Как создать бледно-золотые кнопки-переключатели

Шаг 13

Выделяем векторную фигуру, созданную в предыдущем шаге, и располагаем её так, как показано ниже. Открываем окно стилей слоя для этой зеленой фигуры и вводим настройки, показанные на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 14

Берем инструмент Type Tool (T) и добавляем слово «ON», как показано на первом изображении. Вы можете использовать шрифт Latha, установить полужирный стиль и размер 15pt, цвет #b6a675. Открываем окно стилей слоя для этой маленькой части текста и вводим настройки, показанные на следующих изображениях.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 15

Фокусируемся на панели слоев, выделяем часть текста вдоль всех векторных фигур, созданных недавно, нажимаем правой кнопкой на одной из этих частей и переходим в Duplicate Layers. Выделяем все копии и перетаскиваем их на несколько пикселей ниже, как показано на первом изображении. Возвращаемся на панель слоев и фокусируемся на копиях. Выделяем четыре векторных фигуры, которые образуют скругленную кнопку, зажимаем кнопку Shift и перетаскиваем их на 74рх вправо. В результате все должно выглядеть как на втором изображении.

Как создать бледно-золотые кнопки-переключатели

Шаг 16

Выделяем часть текста, заменяем «ON» на «OFF» и располагаем её как показано на первом изображении. Выделяем векторную фигуру с маской, переходим в меню Edit > Transform > Flip Horizontal, затем открываем окно стилей слоя и просто инвертируем угол, который используется для Drop Shadow.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Шаг 17

И наконец, фокусируемся на зеленой векторной фигуре и заменяем существующие атрибуты стиля слоя теми, что показаны на изображениях ниже.

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Как создать бледно-золотые кнопки-переключатели

Результат

Вот как должен выглядеть наш результат.

Как создать бледно-золотые кнопки-переключатели

 

 

http://www.photoshopstar.com
Перевод: http://www.4webmaster.ru/

Рекомендуем почитать:
Как создать реалистичные слезы в Photoshop
Как создать пули в Photoshop
Как создать эффект карамели для текста в Photoshop


Оставить комментарий: