Изометрическая сетка для минималистичных пиктограмм
Для профессионалов давно не секрет, что многие компании используют в своей работе сторонние ресурсы - изображения с фотостоков, векторные пиктограммы из клипартов, библиотеки программных решений и т.п. Но довольно часто требуется создание совершенно нового контента, как это потребовалось для одного из наших клиентов. И сегодня мы готовы рассказать вам о решении этой задачи.
Задача
Шоу-рум нашего замечательного клиента, официального дилера кухонь Nobilia, оборудован специальным конфигуратором, в котором посетитель мог выбрать тип фасадов и посмотреть изображение кухни. Нас попросили модифицировать конфигуратор таким образом, чтобы можно было также выбирать кухонный ансамбль - угловой, прямой или с островом.
Вид конфигуратора до изменений:
Первый подход
Предлагаем клиенту сделать селектор под заголовком в виде упрощенного изображения кухни сверху:
Клиент возражает, что такие пиктограммы не дают понимания пространственной ориентации кухни и предлагает использовать трехмерные иконки.
Подготовка
Решаем рисовать пиктограммы вручную. Для ускорения процесса и сохранения стилистики уже существующих пиктограмм (lined) выбираем минимализм и изометрическую сетку. Мы использовали программу Adobe Illustrator:
Создадим новый документ и выберем Rectangular Grid Tool:
Указываем нужные нам параметры сетки:
Получаем вот такую сетку:
Дальше нам нужно деформировать сетку. Сжимаем ее по вертикали (Object > Transform > Scale):
и наклоняем на 30 градусов (Object > Transform > Shear):
Осталось повернуть сетку на -30 градусов (Object > Transform > Rotate):
Готово!
Вместо дорогостоящего Illustrator можно обойтись любым бесплатным векторным редактором
Отрисовка
Итак, сетка готова, для удобства покрасим подложку в синий цвет (чтобы как у взрослых), а сами линии - в светло-синий. Для удобства можно сконвертировать сетку в направляющие (View > Guides > Make Guides):
Используя инструмент Line, начинаем создавать контуры объектов:
Линии сетки с включенным режимом Snap помогают нам попадать точно в перекрестия линий:
Шаг за шагом, создается необходимый материал:
Белый на синем выбран исключительно для внутреннего созерцания. Вы можете использовать любые цвета.
Набираем необходимое количество элементов, презентуем заказчику. Последнему все нравится, он дает указания, какие именно контуры пойдут в продакшн:
Собираем пиктограммы вместе, показываем заказчику:
Нас просят добавить маркетинговые инструменты - описание, CTA-кнопки, стоимость. Монтируем всё на полупрозрачную плашку внизу изображения:
Оформляем работу, сдаем Заказчику:
