Привет всем любителям дизайна и специалистам сайтостроения! Сегодня мы создадим красивую скользящую кнопку, средствами программы Фотошоп, которую потом вы сможете использовать в своих проектах.

Просмотр финального результата:

Шаг 1 - Создание фона

Давайте начнем с открытия программы Фотошоп и создания нового документа (Ctl+N) с размерами 500x500px и прозрачным фоном. Залейте фон серым цветом при помощи инструмента Заливка (G), я использовал цвет # D7D7D7.

Шаг 2 - Кнопка

Выберите инструмент Эллипс (Ellipse Tool) (U) и создайте идеальный круг (удерживая кнопку Shift при его создании) диаметром около 150px. Примените к нему следующие стили слоя:

Внутренняя Тень (Inner Shadow):

Наложение Градиента (Gradient Overlay) переход от цвета #d6d6d6 к белому #ffffff:

Тень (Drop Shadow):

Далее создайте маленький круг в середине большого круга, и примените к нему следующие стили слоя:

Наложение Градиента (Gradient Overlay) переход от цвета #d6d6d6 к белому #ffffff:

Шаг 3 – Slider (Скользящая область)

Выберите инструмент Эллипс (Ellipse Tool) (U) и нарисуйте два одинаковых круга, а затем соедините эти два круга Прямоугольником (Rectangle Tool) (U) и объедините эти три фигуры. Сделайте дубликат этого слоя и пока временно его скройте, мы используем его в дальнейшем. К оригиналу примените следующие стили слоя:

Внутренняя Тень (Inner Shadow):

Теперь выберите дубликат формы и с помощью Свободной трансформации (Free Transform Tool) (Ctrl+T) увеличьте её немного. Затем примените следующие стили слоя, показанные ниже на скриншотах, убедитесь, чтобы эти два слоя находятся ниже слоя с кнопками.

Параметры наложения (Blending Options):

Наложение Градиента (Gradient Overlay) от черного к белому цвету:

Шаг 4 - Текст

Теперь напишите текст в пустой области скольжения (я написал OFF) и добавьте стиль слоя Тень (Drop Shadow) к тексту. Поместите все слои, которые мы только что создали, кроме фонового слоя в новую группу назовите группу «OFF».

Шаг 5 - Кнопки

Сделайте дубликат только что созданной группы «OFF». Переименуйте дублированную группу в «ON». В этой группе выделите слои с кругами и сдвиньте их в правую сторону по слайдеру при помощи инструмента Перемещение (Move Tool) (V), а текст измените на «ON» и так же переместите его в противоположную сторону.

К скользящей области добавьте стили слоя:

Внутренняя Тень (Inner Shadow):

Наложение Градиента (Gradient Overlay):

Всё! Кнопки готовы. Я надеюсь, сегодня вы узнали новые приемы и наслаждались процессом создания этих двух простых скользящих кнопок. Вы всегда можете
пользовать при создании кнопок другие размеры и цвет для украшения своих интернет проектов.