С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание красочного и оригинального слайдера в Фотошопе

Создание красочного и оригинального слайдера в Фотошопе

Слайдеры для показа серии изображений довольно популярны в мире веб-разработки. Это отличный способ продемонстрировать свои изображения, и это мгновенно привлекает внимание посетителей. Итак, сегодня мы расскажем вам процесс проектирования стильного веб слайдера в Photoshop. Давайте начнем!

 

Ресурсы

 

Still Life Painting
Androgyne Font

 

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

 

 

Слайдер  в масштабе 100%

 

 

Шаг 1


 

Создайте новый документ размером 1100 пикселей  шириной и 650 пикселей высотой в Photoshop.

 

 

Шаг 2

 

Прежде всего  сделаем рамку для слайдера. Установите цвет # 06d0fb в качестве цвета переднего плана и выберите инструмент Прямоугольник (Rectangle Tool), чтобы нарисовать прямоугольник с шириной 960 пикселей  и 300 пикселей высотой.

 

 

Шаг 3

 

Дважды щелкните на слое с прямоугольником, чтобы открыть окно Стили слоя (Layer Style). Примените следующие настройки стилей слоя.

 

 

 


 

 

Шаг 4

 

Создайте еще один прямоугольник с шириной 926 пикселей и 270 пикселей в высоту. Используйте цвет # 08a2c3 для этого прямоугольника.

 

 

Примените следующие настройки стилей слоя для этого прямоугольника.

 

 

 

 

 

Шаг 5

 

Создайте третий прямоугольник с шириной в 912 пикселей и 252 пикселя в высоту. Используйте цвет # 222222, чтобы заполнить прямоугольник.

 

 

Шаг 6

 

Откройте файл с изображением в Photoshop и перетащите его в документ со слайдером. Измените размер с помощью инструмента Свободная трансформация (Free Transform Tool) и расположите его выше всех слоев.

 

 

Дважды щелкните на слое с изображением и примените стиль слоя Обводка (Stroke).

 

 

 

Шаг 7

 

Добавьте текст. Мы использовали шрифт Androgyne Font.

 

 

Шаг 8

 

Далее  мы создадим кнопку. Чтобы сделать это, установите цвет # e32121 в качестве цвета переднего плана и нарисуйте прямоугольник с закругленными углами, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool).

 

 

Шаг 9

 

Примените следующие настройки для стиля слоя на слой, содержащий вашу красную кнопку.

 

 

 

 

 

Шаг 10

 

Теперь добавьте некоторый текст  на кнопку. Используйте следующие параметры для стиля слоя Тень (Drop Shadow).

 

 

Щелкните правой кнопкой мыши на этой текстовом слое на красной кнопке и в контекстном меню выберите команду Скопировать стиль слоя (Copy Layer Style). Затем щелкните правой кнопкой мыши на текстовом слое «Описание» и  в контекстном меню выберите команду Вставить стиль слоя (Paste Layer Style), чтобы применить те же настройки тени.

 

 

Шаг 11

 

Далее мы добавим переключатель. Для этого выберите инструмент Перо (Pen Tool) для рисования формы, показанной на изображении ниже. Убедитесь в том, чтобы выбрали опцию  с формой на панели управления выбранным инструментом. Используйте цвет # c1c1c1, чтобы нарисовать фигуру.

 

 

Теперь, скопируйте стили слоя красной кнопки и вставьте их в слой с формой, чтобы получить эффект, показанный на изображении ниже.

 

 

Теперь давайте сделаем заднюю часть этой новой формы. Нарисуйте два прямоугольника со скругленными углами, используя цвет # 2e2e2e, и перетащите их ниже остальных слоев. Расположите их под углом с помощью инструмента Свободная трансформация (Free Transform Tool), как показано на изображении ниже.

 

 

Шаг 12

 

 

Выберите инструмент Эллипс (Ellipse Tool) и нарисуйте круг, расположите его выше всех остальных слоёв. Используйте цвет # 313131 в качестве цвета заливки и  цвет # c1c1c1 для обводки толщиной в 2 пикселя.

 

 

Используйте следующие параметры для стиля слоя Тень (Drop Shadow).

 

 

 

Шаг 13

 

Теперь установите цвет # 57fff5 в качестве цвета переднего плана и нарисуйте стрелку с помощью инструмента Перо (Pen Tool).

 

 

Шаг 14

 

Объедините слои, образующие переключатель, в одну группу, и элементы задней части  в другую группу. Теперь  дублируйте обе эти группы и переверните их по горизонтали, перейдя в меню Редактирование> Трансформирование> Отразить по горизонтали (Edit> Transform> Flip Horizontal) и расположите их на правой стороне слайдера. Результат показан на изображении ниже.

 

 

Шаг 15

 

Далее сделаем навигацию слайдера, для этого сделайте форму, показанную ниже, с помощью инструмента Перо (Pen Tool). Используйте цвет # d1d1d1.

 

 

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

 

 

Шаг 16

 

Для завершения навигации, сделайте четыре круга одинакового размера и расположите их как показано на изображении ниже.

 

 

Добавьте стиль слоя Внутренняя тень (Inner Shadow) на эти четыре круга. Используйте следующие значения.

 

 

 

Шаг 17

 

Базовая часть нашего слайдера почти готова. Теперь мы добавим еще несколько деталей, чтобы сделать его более интересным. Нарисуйте треугольную форму, показанную ниже и вставьте на неё стиль слоя от красной кнопки.

 

 

Теперь нарисуйте два треугольника в черном, как смоль, (# 000000) цвете, чтобы завершить угловую крышку.

 

 

Шаг 18

 

Объедините слои угловые в группу и дублируйте её три раза. Поместите эти три группы в разных уголках, как показано на изображении ниже.

 

 

Шаг 19

 

Теперь давайте сделаем ленту для правого верхнего угла, как показано на изображении ниже.

 

 

Примените следующие стили слоя на этой новой слой с лентой.

 

 

 

 

Шаг 20

 

Добавить текст над лентой и вставьте тень из текстового слоя от красной кнопки.

 

 

Шаг 21

 

Теперь сделаем тень на весь слайдер. Создайте прямоугольник чёрного цвета (# 000000) чуть выше фонового слоя и перейдите в меню Редактирование> Трансформирование> Искажение (Edit> Transform> Distort). Сделайте форму прямоугольника, как показано на изображении ниже.

 

 

Шаг 22

 

Теперь щелкните правой кнопкой мыши на слое с тенью и в контекстном меню выберите команду Растрировать слой (Rasterize Layer),  затем перейдите в меню  Фильтр> Размытие> Размытие по Гауссу (Filter> “Blur> Gaussian Blur). Используйте следующее значения для размытия  и уменьшите непрозрачность этого слоя до 40%, чтобы получить желаемый эффект.

 

 

 

Вот и все. Мы надеемся, что вам понравился этот урок и вы узнали что-то полезное. Урок по теме – Псевдотрёхмерная форма входа для сайта в Фотошопе.

 

Источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 26.11.2013
  •   Просмотров: 5257
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
kewra (28.04.2014 | 10:29)
Прикольненько. попробуем))
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки