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

Дизайн простейшего слайдера в Фотошопе

В этом уроке мы покажем вам, как спроектировать простейший слайдер для вашего сайта. 

 

Подготовка: Найти изображение для примера

 

Прежде чем мы начнем, необходимо найти изображение для использования в качестве примера. Это изображение будет размещено в слайдере, чтобы показать нам, как он будет выглядеть. Мы будем использовать это изображение дерева, которое мы нашли в Google.

 

 

Шаг 1: Граница

 

Создайте новый документ размером 600 на 400 пикселей. Залейте фоновый слой темно-серым цветом (# 202020).

 

 

Откройте стили слоя и добавьте стиль слоя  Наложение градиента (Gradient Overlay) со следующими настройками.


 

 

Сделайте выделение документа целиком, и перейдите в меню Выделение > Модификация > Сжать (Select> Modify> Contract) и сожмите его на 15 пикселей. Удалите эту выделенную область, оставив только границу.

 

 

Шаг 2: Вставьте изображение

 

Хорошо, теперь вставьте изображение в слайдер. Убедитесь, что оно помещено под слоем 1.

 

 

Шаг 3: Панель описания

 

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

 

 


Понизьте непрозрачность до 75%. Добавьте описание для изображения на левой стороне. Используйте шрифт Arial и белый цвет.

 

 

Шаг 4: Кнопки

 

Теперь вы должны создать маленькие круглые кнопки, с помощью которых пользователь может перемещаться по изображениям. Создайте новый слой и возьмите инструмент Эллипс (Ellipse Tool). Измените цвет переднего плана на черный и создайте маленький круг (удерживайте клавишу Shift). Поместите его на правой стороне бара.

 

 

Откройте стили слоя и добавьте Наложение градиента (Gradient Overlay) и Обводка (Stroke).

 

 

 

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

 

 

Возьмите инструмент Заливка (Bucket Tool) и залейте один из кругов желтым цветом.  Вот и всё.

 

 

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

 

Источник



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


  • 14.07.2014
  •   Просмотров: 13184
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по 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
Партнерские ссылки