Во время работы над дизайном мероприятия потребовалось сделать визуализацию стендов и площадок участников. Она помогает увидеть масштаб, рассчитать материалы и избежать ошибок при монтаже.
Обычно решений этой задачи есть несколько:
Нарисовать от руки
Старая школа дизайнеров-интерьерщиков и архитектурщиков. Если умеете — прекрасно. Минус — быстро правки вносить не получится, а обычно дизайн стендов сопровождается постоянными правками «на лету» вроде перемещения объектов, замены одного на другое. Часто заказчик сам имеет смутное представление о том, как всё должно смотреться.
Смоделировать в 3D
Плюсов много: мы получаем красивый превиз, который можно покрутить со всех сторон, заанимировать, показать крупным планом определённые детали. Хотя в большинстве случаев это не требуется, достаточно просто показать клиенту, как всё будет примерно выглядеть, а потом передать подрядчику с техническими деталями. И чем быстрее, тем лучше.
А вот минусов здесь больше. Во-первых, дизайнер должен уметь работать в трёхмерном софте. Причём не просто работать, а работать быстро, не отвлекаясь на технические детали вроде «а как теперь выровнять объекты» или «а как свет поставить». В идеале нужна ещё и база объектов (столы, стулья, телевизоры и подобное), которыми можно быстро наполнить макет.
Во-вторых, подхватить у тебя задачу не смогут коллеги — даже если один дизайнер умеет в трёхмерку, остальные не факт, что могут. Поэтому ты становишься заложником собственных навыков: тебе уже не могут помочь, даже если хотят.
В-третьих, довольно сложно быстро вносить правки. Приходится делать повторный рендер всей сцены.
В целом это рабочий вариант, если процесс очень налажен и поставлен на поток. В случае с разовой или эпизодической задачей больше времени уходит на поиск ассетов и решение технических проблем.
Нарисовать в 2D
Поэтому остаётся компромиссный вариант в обычных графических программах: Photoshop, Illustrator, Figma. Photoshop отметаем сразу — в нём нет нужного функционала, о котором пойдёт речь дальше.
Виды визуализации
Хорошо, с софтом определились. Теперь важно понять, как делать непосредственно визуализацию. В первую очередь макетирование реальных объектов — это точное соблюдение масштаба и размеров. «На глазок» здесь не годится — нам нужно точно понимать, сколько стульев встанет, уместится ли шкаф, хватит ли места для телевизора на стене, сколько плитки купить, сколько рулонов обоев / вагонки заказать.
Если грамотно и правильно подойти к процессу, вы всегда легко сможете ответить на любой этот вопрос клиента. Мы можем подготовить макет двумя способами: фронтально или в изометрии.
Чисто фронтальная проекция
Зависит от задачи и вполне имеет место быть, если стенд несложный, буквально одна задняя стена, а перед ней пара стульев. Здесь больше акцент на непосредственно визуал фоновой стены.
Фронтальная визуализация с перспективой
Смотрим фронтально, но с глубиной. В качестве эксперимента я пробовал собирать визуализации и так.
Смотрится неплохо, да. Однако здесь очень быстро понимаешь, что крайне сложно соблюдать масштаб и размеры объектов. Поясню: задняя стена у нас нужного размера (в данном случае, например, 600×300 см) и мы можем точно понять масштабы объектов, которые находятся возле неё. Но проблемы начинаются, как только отодвигаешь объекты от стены. Пол уведён вперёд из перспективы на глазок, а значит понять, как масштабировать предметы, двигая их по поверхности, непонятно. Разумеется, всё можно просчитать, но это довольно сложно и утомительно.
Кроме того, сами объекты тоже нужно рисовать в перспективе, а это очень муторно (посмотрите, как коряво выглядят вешалки с фотографиями и шкаф позади тоже совсем не соблюдает перспективное искажение. Задача приблизительно решается, но чувства удовлетворения от исполнения нет).
Из плюсов такой визуализации могу отметить, что здесь очень наглядно совмещается визуал фронтальных объектов. Например, задняя стена — на ней будет ясно видны размещённые логотипы или изображения. Но больше я визуализации так не делаю.
Изометрия
Наконец, мы подходим к максимально удобному и быстрому способу — работа в изометрии. Это оказался лучший способ, давший возможность совместить наглядность и точность. На изометрии мы перестаём зависеть от перспективных искажений, можем точно поставить в пространстве предметы, посчитать расстояния и размеры, быстро вносить правки в короткие сроки.
Примеры:
Процесс работы
Для того, чтобы собирать такие макеты, нужны инструменты. Как я уже сказал, максимально подходят для таких целей Adobe Illustrator и Figma.
Adobe Illustrator
Покажу сначала на примере Иллюстратора. Объекты можно перевести в изометрию штатными способами Effect — 3D and Materials — Extrude & Bevel (можно пойти в ещё в 3D (Classic), это legacy-версия модификатора, тянущаяся ещё со старых версий Иллюстратора). С этим фильтром есть проблема — он некорректно работает с группами объектов и с растровыми изображениями. То есть перевести в изометрию, например, стену, на которой висят объекты-фотографии, или уже заготовленное изображение рисунка стены, не получится. В случае с группами придётся применить эффект на каждый объект по отдельности, что делать с изображениями — я так и не придумал.
Второй вариант — использование платного плагина Axotools. Это потрясающий плагин, который позволяет процедурно переводить любой объект в изометрию, экструдировать и делать ещё массу вещей. Он отлично работает с группами объектов, растровыми изображениями. Отличная вещь за исключением того, что нужно платить.
Проблемы Иллюстратора
Я в принципе ярый ненавистник Иллюстратора, мне в нём не нравится всё, начиная от странной философии слоёв и артбордов и заканчивая упоротым интерфейсом и дикой неоптимизированностью. В данном случае, если по существу, проблемы будут такие:
- Как только вы начнёте подгружать фото объектов, даже если они будут залинкованные, вес файла будет расти в геометрической прогрессии. Получить гигабайтный файл с несложным макетом проще простого. Это связано с желанием Иллюстратора сохранять обратную совместимость с PDF. Если при сохранении отключить Create PDF Compatible File, это мгновенно «обезжирит» файл, но есть риск потерять всё, если файл повредится на диске.
- Даже если хочется работать на реальных размерах, делать этого категорически нельзя. Любые растровые эффекты (наложение шума, тени, сделанные размытием) а также эффекты (трёхмерные выдавливания и даже изометрия) очень болезненно реагируют на большие размеры увеличением размера файла и безобразно долгим перерендерингом и сохранением. Поэтому работать приходится в масштабе миллиметров, а не сантиметров и тем более метров. Повторюсь, это проблема не оборудования, а абсолютного отсутствия оптимизации Иллюстратора — он до сих пор использует только одно ядро процессора и выжирает всю оперативную память, что ему дают, тормозить будет на любой машине. С учётом все этих особенностей уже через полчаса на хорошем компьютере мой макет каждый раз сохранялся минут по десять, не давая работать.
- Добавьте сюда сложность быстрого подхватывания макетов коллегами для внесения правок. Я стал искать дальше, потому что устал бороться с инструментом, а не творить.
Figma
Переходим к моему фавориту. Какие преимущества:
- Бесплатность
- Работа из любого браузера
- БЫСТРАЯ работа из любого браузера — Фигма переваривает огромное количество объектов, слоёв, артбордов и изображений, ты вообще не отвлекаешься на то, что что-то подвисает, перерендеривается, сохраняется. Ты творишь.
- Отличный UX. Кто работал в Иллюстраторе и в Фигме, поймёт. Выбор объектов, модифицирование, копирование, переименование, поиск объектов, замена цвета и текста, параметров, размеров — всё это делается так быстро и бесшовно, что после Фигмы в Иллюстраторе ты физически страдаешь.
- Большое количество скриптов, которые можно писать самому или найти бесплатные в сообществе (справедливости ради скажу, что в Иллюстраторе тоже есть скрипты и платные плагины — без них он в принципе нежизнеспособен). Как раз одним из таких плагинов мы будем сейчас пользоваться.
- Совместная работа. Огромным плюсом оказалось то, что можно быстро и одновременно работать нескольким дизайнерам. Так мы с коллегой быстро собирали макет в сжатые сроки. Дополнительные копии не занимают место и не вешают компьютеры.
Приступаем к работе.
Выбираем масштаб
Что важно: мы обязательно работаем с точными размерами. Если стена 600×300 см, мы столько и закладываем. Можно решить для себя изменение размерностей для удобства. Например, в Иллюстраторе это может быть 600×300 мм, чтобы уменьшить размер макета, в Фигме работаем в пикселях — 6000×3000 px,, главное — продолжать работать в этом масштабе и сохранять соотношение сторон.
Собираем основу
Для перевода объектов в изометрию используем плагин Fast Isometric. Это самый функциональный из всех, что я протестировал. Прекрасно работает и с группами объектов, и с изображениям. умеет экструдировать, скашивать и даже делать обратную операцию по восстановления объекта из изометрии обратно в плоскость. Обратите внимание, что даже масштабирование происходит без деформации, а в рамках изометрической плоскости. Это невероятно удобно.
Готовим объекты
Хорошо, мы собрали болванку. Возникает вопрос: как сделать объекты в изометрии. Клиент даёт вот такие фотографии:
Работать с этим сложно. Раньше мы бы обтравили предметы в Фотошопе, грубо подогнали в подобие изометрии с помощью Distort и Warp и поставили, как есть. На каждый объект уходило бы минимум минут по 10-15. Объектов много, работы много, время идёт. Сейчас на помощь приходят нейросети. Я протестировал несколько, лучше всего на момент написания статьи справилась Nano Banana от Google. Она бесплатная, но доступна только через VPN и то не каждый. Мне удалось через Ирландию.
Итак, закидываем фото в нейросеть, пишем очень простой промт «сделай стул/стол/цветок в изометрии на белом фоне». Получаем вот такие чудесные картинки:
После этого нужно выделить из фона: можно попросить любой сервис в сети, попросить ChatGPT или закинуть в Фотошоп — как вам удобно. Я использую Remove Background непосредственно в Фигме — это нативный AI-инструмент, добавленный в Фигму в 2025 году, под капотом — алгоритмы OpenAI. Работает отлично, обтравливает очень хорошо и быстро. Но доступен не каждому. Я не совсем понял, по какому принципу. Скорее всего, ИИ функционал доступен только платным аккаунтам в Фигме.
Готово. Этот способ позволяет за считанные минуты получить большое количество реалистичных объектов в нужном ракурсе. Для того, чтобы подогнать размер объекта под нужный, я просто создаю кубическую болванку с нужными параметрами, а потом масштабирую объект.
Далее расставляем объекты. Так как ты не отвлекаешься на проблемы софта и рутинную работу подготовки ассетов, процесс дизайна превращается в удовольствие. Эдакая игра в кукольный домик. При этом ты можешь очень оперативно внести любые правки, а подхватить могут твои коллеги.
При макетировании не забываем ставить человека рядом. Это важно, так как помогает быстро понять размеры объектов.
Размерная сетка
Даже если мы просто всё красиво нарисовали и расставили, у подрядчика при воплощении вашей идеи в жизнь появятся вопросы: а как высоко повесить телевизор? а как далеко друг от друга расставить стулья? Размерная сетка позволяет быстро сориентироваться без вашего участия. Например, на данном скриншоте один квадрат соответствует 50х50 см.
Наносим размеры
В Adobe Illustrator сейчас уже есть встроенный инструмент Dimesions (в старых версиях использовали плагины и скрипты),
В Фигме даже без сторонних скриптов решается легко: рисуем линию и размер, у линии ставим края-стрелки, оборачиваем это всё в autolayout, для объектов ставим Fill по ширине. Теперь достаточно перевести в изометрию, получаем размерный блок.
Экспортируем
После этого просто отдаём макет с размерами и комментариями по цвету. Фигма не предназначена для подготовки под печать, всё идёт в RGB. Поэтому, возможно, после утверждения визуала придётся финально подготовить какие-то ассеты уже в Фотошопе или Иллюстраторе, приложив к превью.
Готово, вы — молодцы!
Суммирую
- Наиболее удобный для визуализации в большинстве случае;
- Работаем в Figma — она лишена недостатков Адоба, быстрая и удобная;
- Определяемся с масштабом. Обычно 1 пх = 1 мм;
- Собираем основу стенда. Объекты переводим в изометрию с помощью плагина Fast Isometric;
- С помощью Nano Banana от Google переводим объекты с фотографии в изометрию. Расставляем на сцене;
- Наносим размерную сетку для удобства восприятия размеров и расстояний;
- Наносим техническую информацию на макет (размеры, цвета);