Читать

Урок 49. Рисуем фильтр для интернет-магазина

01.08.2020 / Уроки

В этом уроке нарисуем такой важный элемент, без которого не обходится ни один крупный интернет-магазин. Загадки тут никакой нет, ведь в заголовке мы уже обозначили предмет данного урока. Это, разумеется, фильтр.

Для чего он нужен? Чтобы покупатели могли быстрее найти то, что им нужно, отсортировав товары и сразу исключив те, что им не подходят. Предположим, нам нужен фильтр для книжного интернет-магазина. Привычной формой и ориентацией его будет прямоугольная вертикальная. Будучи не привязанными к какому-то определённому стилю, нарисуем прямоугольник со скруглёнными углами белого цвета и добавим тень в «Стилях слоя»:


Урок фотошопа. Рисуем фильтр для интернет-магазина


У нас будет несколько категорий выбора, к примеру, цена, жанр и возрастной рейтинг. Начнём с цены. Изобразим её выбор элементом «ползунок», который позволит пользователю определить интервал. Не забыв разместить заголовок, рисуем той же фигурой «Прямоугольник со скруглёнными углами» толстую полосу едва заметного серого цвета:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Интервал выделим акцентным цветом. Просто нарисуем прямоугольник толщиной с серую основу:


Урок фотошопа. Рисуем фильтр для интернет-магазина


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


Урок фотошопа. Рисуем фильтр для интернет-магазина


Осталось добавить акцентные кругляши внутри кнопок, чтобы они были более заметны:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Собственно, сами значения должны отображаться в полях, в которые также можно будет ввести числовые значения вручную. Рисуем прямоугольники со слегка скруглёнными углами и добавляем поверх текст с числами:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Переходим ко второй категории. Здесь будут жанры; функционально это будут так называемые чек-боксы (от "checkbox"). Рисуем их также как поля, только меньшего размера. Они должны быть квадратными. Таким образом будет представлен весь список жанров, доступных для выбора. Выбранные жанры сразу окрашиваем в акцентный цвет:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Одного цвета будет недостаточно, поэтому добавим традиционную галочку. Нарисовать её можно инструментом «Линия», зажав Shift для примагничивания к сетке и добавления новых фигур в теле одного слоя:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Осталась третья категория. Возрастной рейтинг покажем в виде кнопок, похожих на теги. Используем те же поля, только однопиксельная обводка будет акцентного цвета. А выбранный возрастной рейтинг выделим таким образом, что подложка будет полностью закрашена цветом:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Осталось добавить две кнопки «Применить» и «Сбросить». По стилю они будут напоминать кнопки-теги возрастного рейтинга, только их размер будет чуть больше:


Урок фотошопа. Рисуем фильтр для интернет-магазина


Прилагаю исходник урока в формате psd — zip-архив (48 Кб)

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




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





Просмотров: 33 / Теги: фильтр, ui-kit, урок, фотошоп

Комментарии (0)

avatar


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

Внимание! Спойлеры!
Отзыв об экранизации книги Дж. Р. Р. Толкиена «Хоббит, или туда и обратно», предшествующая событиям, развернувшимся во «Властелине Колец».


18.03.2015 / Отзывы

В прошлом обзоре мы остановились на «Принце-полукровке». В этой части мы взглянем на «Дары смерти». Как я уже упоминал, создатели проекта проиллюстрировали малое число глав этой книги.


13.09.2015 / Любопытное

Внимание! Спойлеры!
Надежды пятиклассника Джесса Аарона стать самым быстрым бегуном в классе разбились после того, как новичок Лесли Берк одержала победу в соревнованиях.


05.02.2015 / Отзывы

Урок 20. Рисуем новогоднюю открытку

Предновогоднее настроение само навевает тему следующего урока. Неинтересно использовать готовые открытки из интернета, которыми пестрят ленты близких людей. Куда оригинальнее смотрятся открытки "сделанные своими руками"!


25.12.2016 / Уроки



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ