На главную страницу сайта Уроки | Лента событий | Галерея | Лента активности | Форум
Я забыл пароль | Регистрация
Анимация | Базовые | Дизайн | Работа с фото | Текстовые эффекты | Эффекты
Добавить виджет на гравную страницу Яндекса
 
Просмотров: 2955
Легкий урок Размещено: 21.10.2012 г.

Создание Slider (скользящей) кнопки для сайта в Фотошоп


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

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



Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Шаг 2 - Кнопка


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Тень (Drop Shadow):


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Шаг 4 - Текст


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Шаг 5 - Кнопки


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


Создание Slider (скользящей) кнопки для сайта в Фотошоп


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


Обсудить урок на форуме




Категория: Уроки Фотошопа
Автор (переводчик): Adrien de Broglio
Источник: Ссылка на источник скачиваний/переходов: 14




Рейтинг популярности: 2.7/5 (Всего оценок: 27)

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



В галерею
08.02.2013 08.02.2013  darinochka

спасибо! очень понравился урок)


В галерею
25.11.2012 25.11.2012  мандаринка

Очень понравился урок! Большое спасибо)))


В галерею
24.11.2012 24.11.2012  cobrastar

Спасибо за урок!



Рекомендуем обратиться в web-студию для разработки сайта sozdanie-saita.by