Читать


Главная » 2016 » Октябрь » 28 » Урок 19. Рисуем слайдер товаров
10:39
Урок 19. Рисуем слайдер товаров

В одном из прошлых уроков мы рисовали простенький слайдер изображений. Слайдеры сейчас особенно популярны в интернет-магазинах, где используются как витрины продвигаемых товаров. Нарисуем такой.

С учётом некоторых знаний маркетинга и современного веб-дизайна стоит сразу оговорить, что в слайдер (каким бы огромным он не был) не стоит помещать всю возможную информацию и делать его чересчур пёстрым. Главное - выгодно показать товар. Затем дать короткую информацию о нём и обязательно разместить кнопку, призывающую сделать покупку или узнать подробнее.

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

Для начала обрисуем форму слайдера.

Урок по фотошопу. Рисуем слайдер товаров


И сразу же переходим к самому главному - к товару. Если мы собираемся делать коллаж, то нам понадобится джойстик на прозрачном фоне. Для этого берём качественное фото и вырезаем джойстик с фона, на котором он изображён. Можно взять инструмент "Лассо", а ещё лучше "Перо" и выделить им контур джойстика. Ставя контрольные точки пером, можно зажав левую кнопку, создавать плавные линии - в этом состоит главный плюс такого выделения.

Урок по фотошопу. Рисуем слайдер товаров


Ещё один нюанс. У меня в настройках инструмента "Перо" выбран тип "Фигура", то есть создавая контур, автоматически создаётся векторная фигура. Если выбрать "Контур", то соответственно будет создан контур для выделения. Я предпочитаю "Фигуру", так как использую её в качестве маски. К тому же её всегда можно будет отредактировать, если понадобится.

Итак. Дублируем слой с джойстиком, помещаем его над полученной фигурой и жмём Ctrl+Alt+G

Урок по фотошопу. Рисуем слайдер товаров


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

Урок по фотошопу. Рисуем слайдер товаров


Теперь занимаемся подложкой. Она не должна отвлекать от самого товара, поэтому сделаем её не слишком яркой и однотонной. Позже, когда общая композиция будет готова, можно будет добавить затемнения или какие-то дополнительные графические украшательства. А чтобы джойстик не смотрелся плоским и непонятно как висящим в воздухе, добавим объёма с помощью тени. Для этого продублируем слой с фигурой, выберем нижний слой-оригинал и трансформацией немного исказим фигуру.

Урок по фотошопу. Рисуем слайдер товаров


Цвет фигуре выберем по фону - тёмный оттенок. На слое с тенью создадим маску. И градиентом с прозрачностью уберём лишнее.

Урок по фотошопу. Рисуем слайдер товаров


Создадим новый слой (Shift+Ctrl+N), выделим вместе с ним слой с тенью и сольём оба этих слоя. Теперь выберем Фильтр - Размытие - Размытие в движении. Чтобы тень была более естественной.

Урок по фотошопу. Рисуем слайдер товаров


Осталось довести изображение джойстика до совершенства. Для этого нужно приблизить зумом рабочую область (Ctrl+Пробел приближает, Alt+Пробел отдаляет), и посмотреть края изображения. Если остались напоминания о светлом фоне, то стоит их ликвидировать. Для этого создаём новый слой над джойстиком (придаём ему форму фигуры-основы, т.е. создаём обтравочную маску), и кисточкой проходимся по краю. Цвет берём с примыкающей к краю области (зажимая Alt) и двигаемся далее. Разница может и небольшая, но она имеет значение. Особенно этот нюанс будет заметен на более крупных изображениях.

Урок по фотошопу. Рисуем слайдер товаров


Есть! Теперь переходим к информационной части. Крупным шрифтом должно прописываться наименование товара, и уже поменьше - краткое описание. Затем цена и обязательно кнопка "Подробнее" (или "Купить").

Урок по фотошопу. Рисуем слайдер товаров


Чтобы вся информация не сливалась в единый невзрачный фрагмент слайда, стоит дать цветовой акцент на кнопку и выделить в тексте главное - наименование и цену. Краткое описание можно приглушить, выбрав для него менее насыщенный цвет.

Теперь если хочется, можно добавить немного графики на фон, но так чтобы она не привлекала к себе слишком много внимания.

Урок по фотошопу. Рисуем слайдер товаров


Как обычно, вы можете скачать исходник урока, запакован в архив - 0,5 МБ

Скачать архив


Категория: Уроки | Просмотров: 323 | Добавил: M-Wizard | Теги: Веб-дизайн, слайдер товаров, урок по фотошопу | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА