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

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



 

Шаг 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):







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