Создаем в Фотошопе круглый переключатель

Автор этого урока, веб дизайнер , автор уроков на psd.tutsplus.com. В своей работе  специализируется на веб дизайне и создании красивых веб элементов. О чем собственно и этот простой урок. Перевод подготовлен специально для hronofag.ru. В конце урока можно будет скачать исходной PSD и подробнее рассмотреть все настройки. В этом простом уроке мы создадим круглый переключатель, который вы сможете применить в любом интерфеисе. Приступим.

Материалы для работы

Создаем задний фон

Создаем фаил. Размеры 1000 на 1000 пикселей при разрешении 72PPI.

Добавляем паттерн на задний фон

Создайте новую группу и назовите её Background. Скачайте паттерн по этой ссылке и загрузите его в Фотошоп. Воспользуйтесь инструментом Rectangle Tool (U) и нарисуйте квадратную фигуру, чуть больше чем рабочая область. А далее примените паттерн как стиль слоя.

Создаем кнопку

Создаем новую группу и называем её кнопкой Button. Инструментом Elipce Tool рисуем окружность, как в примере ниже. Цвет устанавливаем на #0e0f0f  и применяем стили слоя. Как только закончите, понизьте невидимость слоя на 20%

Теперь создайте новую окружность немного меньше. Цвет установите на #222429 и примените стили слоя.

Применяем текстуру

Отправляйтесь на Pixeden и скачайте там Гранжевую текстуру. Как только скачаете фаил, откройте его в Фотошопе и найдите слой, под названием Grunge Texture. Поставьте режим наложения Pin Light, а невидимость 10%. Сделайте этот слой обтравочной маской Clipping Mask

Инструментом Elipse Tool (U) нарисуйте новую окружность, ещё меньше прежней. Цвет #0d0d0e и примените стили слоя. Инструментом кисть Brush Tool (B) поставьте размер кисти 200 пикселей и твердость Hardness 0%. Цвет выбираем белый #ffffff. Режим наложения этого слоя на Soft Light а невидимость 80% Далее трансформируйте слой в Clipping Mask.

Создайте новый слой #000000 и закрасьте нижнюю часть окружности как на примере ниже. Слой конвертируйте так же в обтравочную маску.

Снова выберите инструмент Elipse Tool (U) чтобы нарисовать новую окружность на пару пикселей меньше прежней. Цвет #1a1a1b и инструментом Direct Selection Tool (A) сдвигаем нижнюю векторную точку вверх. Теперь добавьте стили слоя. Имортируйте гранжевую текстуру снова, выставьте режим наложения у текстуры Linear Dodge а невидимость 10%.

Создайте новый слой и кистью с теми же настройками кисти что и ранее, закрасьте нижнюю часть фигуры. Режим наложения для этого слоя на Soft Light и трансформируйте слой в Clipping Mask.

Инструментом Horizontal Type Tool (T) и шрифтом Myriad Pro настройками Bold и размером 48pt напишите букву “I”. Поставьте #969696 и добавьте стиль слоя. Напишите новую букву, на этот раз “О”, цвет #fefefe. Правый клик по этому слою и растеризуйте его. Теперь нажмите CTRL+T чтобы трансформировать буквы. Нажмите CTRL+SHIFT+ALT и потяните за нижний левый угол на пару пикселей. Добавьте стиль слоя и мы закончили.

Окончательная версия

Скачать PSD макет