Иллюстрация из модели 3D: из Plasticity в Illustrator

Иллюстрация из модели 3D — это пайплайн, который позволяет использовать точную геометрию объекта как основу для стилизованной векторной графики. Вместо ручного построения перспективы художник сначала моделирует объект в Plasticity, выбирает подходящий ракурс, экспортирует видимые контуры в SVG, а затем выполняет раскраску и финальную обработку в Adobe Illustrator.

Такой подход особенно удобен для изометрических объектов, которые используются:

• в казуальных и мобильных играх;
• на картах игровых миров;
• в интерфейсах;
• в обучающих материалах;
• в инфографике;
• в технических схемах;
• на сайтах и в рекламных макетах.

Основой пайплайна становится команда Export Hidden Line в Plasticity. Она формирует проекцию трёхмерного объекта и преобразует видимые, скрытые и дополнительные конструктивные линии в векторный SVG-файл. В отличие от обычного Export SVG, который предназначен преимущественно для плоских эскизов, Export Hidden Line работает с отображением полноценной трёхмерной модели.

Что такое Export Hidden Line в Plasticity

Export Hidden Line — инструмент для подготовки технических чертежей, ортографических видов и стилизованных векторных проекций трёхмерных объектов.

Команда анализирует положение камеры и переводит геометрию модели в набор SVG-контуров. В экспорт могут входить:

• видимые границы поверхностей;
• внешний силуэт;
• гладкие переходы между поверхностями;
• скрытые рёбра;
• штриховка;
• цвет линий;
• затенённый фон.

Благодаря этому иллюстрация из модели 3D может быть получена не как обычный растровый рендер, а как редактируемая векторная конструкция. Отдельные линии можно перекрашивать, удалять, масштабировать и группировать без потери качества.

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

Чем Hidden Line отличается от обычного рендера

При обычном рендере программа создаёт готовое растровое изображение. После этого форму объекта сложно изменить: художник работает уже с пикселями.

Export Hidden Line создаёт SVG, состоящий из векторных кривых. Поэтому после загрузки в Illustrator можно:

• изменить толщину каждого типа линий;
• удалить лишние контуры;
• раскрасить отдельные части модели;
• добавить собственные заливки;
• заменить цвета всей иллюстрации;
• изменить масштаб без потери чёткости;
• подготовить изображение для печати;
• создать несколько стилистических вариантов на одной основе.

Таким образом, иллюстрация из модели 3D сочетает точность CAD-модели и свободу ручной векторной графики.

Итоговый пайплайн для создания иллюстрации из модели 3D

Весь процесс состоит из шести этапов:

1. Подготовить модель в Plasticity.
2. Выбрать ракурс.
3. Настроить Export Hidden Line.
4. Экспортировать изображение в SVG.
5. Открыть SVG в Adobe Illustrator.
6. Очистить контуры, создать цветовые заливки, свет и финальный фон.
7. Экспортировать изображение в растровом формате.
8. В любой графической нейросети сделать рендер этого изображения (добавить детали фактуру и стиль). Промт, использованный для визуализации этого проекта в ChatGPT (доработайте под свой проект, но оставьте уточнение, чтобы не отступал от цветов иллюстрации, если они получены в ТЗ от заказчика):

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

   Кондратики

Подготовка модели в Plasticity

• Разделите модель на крупные объекты

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

• Уберите невидимые детали:

  • внутренние поверхности;
  • детали, полностью закрытые другими объектами;
  • слишком мелкие фаски;
  • внутренние крепления;
  • элементы нижней части, которые не видны в выбранном ракурсе.
    Чем чище модель, тем меньше времени потребуется на очистку SVG в Illustrator.

• Используйте крупные фаски

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

• Подготовка композиции

  • Для выбранного моста лучше использовать верхний изометрический ракурс.

Рекомендуемая композиция (создаём мост через реку)

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

Как выбрать ракурс в Plasticity

Export Hidden Line предоставляет набор стандартных видов.

Официально перечислены следующие варианты, которые начинают отрабатывать, если раскрыт раздел Standard View (в противном случае, будет выводиться текущее состояние вьюпорта):

• Top Left;
• Top;
• Top Right;
• Left;
• Front;
• Right;
• Bottom Left;
• Bottom;
• Bottom Right.

Top Left и Top Right создают верхние изометрические проекции. Они одновременно показывают верхнюю, фронтальную и одну боковую сторону объекта. Прямые виды Top, Front, Left и Right предназначены преимущественно для технических чертежей.

Захват собственного ракурса

Команда позволяет использовать клавишу S — Capture Screen. Она захватывает текущий вид из окна Plasticity и обновляет предварительный просмотр. Захват работает в перспективном, ортографическом и изометрическом режимах.

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

Настройки Export Hidden Line для иллюстрации

Export Hidden Line содержит несколько групп параметров. Для технического чертежа и художественной иллюстрации применяются разные настройки.

• Standard Views (см. выше)
• Style. Раздел Style определяет, какие линии будут включены в SVG и какой толщины они будут. Толщина каждого типа линий регулируется в диапазоне от 0.00 до 10.00. Значение 0.00 скрывает соответствующий тип линий.
• Visible Stroke — показывает жёсткие границы, расположенные перед камерой. К ним относятся:
  • стыки поверхностей;
  • выпуклые переходы;
  • вогнутые переходы;
  • выраженные конструктивные рёбра.
    • Если иллюстрация будет очень небольшой, можно использовать более толстую линию. Если изображение предназначено для крупного плаката, линии лучше сделать тоньше.
• Silhouette — создаёт внешний контур объекта с точки зрения камеры. Он помогает отделить модель от фона и сделать форму более читаемой.
  • Разработчик предупреждает, что в некоторых случаях силуэт может получаться неидеально чистым, особенно при пересечении объектов или сложных формах.
  • Рекомендуемое значение: 1.2–1.8.
  • Внешний контур должен быть немного толще внутренних линий. При необходимости его можно дополнительно обработать в Illustrator.
• Smooth отображает переходы между гладко сопряжёнными поверхностями, а также некоторые линии, связанные с конструкцией поверхности и импринтами.
  • Рекомендуемое значение: 0.0–0.3.
  • Если поверхность модели состоит из нескольких плавно соединённых участков, включение Smooth может помочь показать форму. Но сначала попробуйте полностью отключить этот тип линий.
• Use Colors заменяет стандартный чёрный цвет линий на цвета материалов, назначенных объектам в Plasticity.
  • Для последующей обработки в Illustrator возможны два подхода:
    1. Отключить Use Colors и получить единый чёрный чертёж.
    2. Включить Use Colors, чтобы быстрее отличать мост, воду, землю и растения.
       1. Иногда удобнее включить Use Colors и заранее назначить объектам простые контрастные материалы. Однако итоговые цвета всё равно лучше настроить в Illustrator.
• Shaded Background добавляет затенённое отображение модели внутри векторных контуров. Параметр Pixel Scale определяет разрешение такого фонового изображения. Загружается как растровое (не векторное) изображение!
• Hidden Lines — отображает границы, закрытые поверхностями. Они могут экспортироваться как штриховые линии. Настройки включают:
  • Stroke Width;
  • Dash Length;
  • Dash Gap.
    • При Dash Length 0.0 скрытые линии превращаются в точки. При Dash Gap 0.0 они становятся непрерывными.
    • Для финальной игровой иллюстрации скрытые линии лучше отключить.
  • Рекомендуемые настройки:
    • Hidden Lines: Off;
    • Stroke Width: 0.0.
    • Скрытые контуры могут пригодиться только в технической схеме или инструкции по сборке.
• Planar Hatching создаёт параллельную штриховку на поверхностях при помощи плоской проекции. Параметр Spacing определяет расстояние между линиями, а Axis XYZ — ориентацию штриховки. Для казуальной цветной иллюстрации штриховку лучше отключить. Она может быть полезна в двух случаях:
  • для стилизации под чертёж;
  • для отдельного теневого слоя.
• Section Hatching применяется только к поверхностям, разрезанным командой Section Analysis.При создании обычной иллюстрации этот режим не нужен.
• Radial Hatching — предназначена для сферических и цилиндрических элементов. Настройки Around, Along и About изменяют распределение линий вокруг формы. В моделях она может использоваться для круглых брёвен или декоративных столбов, но для простой казуальной стилистики её лучше отключить.
• Parametric Hatching создаёт линии, следующие U- и V-направлениям поверхности. Этот режим особенно полезен для сплайновых поверхностей с организованной структурой контрольных точек. Для финальной иллюстрации он обычно не требуется. Однако такой экспорт можно использовать как отдельный технический эффект:
  • поверх модели;
  • в учебной инфографике;
  • для демонстрации NURBS-структуры.
• Tolerance. Параметры Curve Chord Tolerance и Curve Chord Angle влияют на точность представления кривых. Слишком низкая точность создаёт угловатые дуги. Слишком высокая может увеличить количество точек и размер SVG. Для казуальной иллюстрации подойдёт средняя точность. Если кривые выглядят ломанными, вернитесь в Plasticity и увеличьте качество. Если в Illustrator появляется слишком много точек, немного уменьшите точность.

Загрузка модели в Adobe Illustrator

После экспорта SVG необходимо открыть его в Adobe Illustrator.

Способ 1. Открыть SVG как новый документ

1. Запустите Illustrator.
2. Выберите File → Open.
3. Укажите файл .svg.
4. Подтвердите открытие.
5. Сохраните рабочую копию в формате AI.

Этот вариант подходит, если размер SVG уже соответствует будущей композиции.

Способ 2. Поместить SVG в подготовленный документ

1. Создайте новый документ.
2. Задайте размер будущей иллюстрации.
3. Выберите File → Place.
4. Укажите экспортированный SVG.
5. Разместите его в центре монтажной области.

Для публикации в статье можно использовать:

• 1920 × 1080 px;
• 1600 × 900 px;
• 1200 × 675 px;
• 768 × 432 px.

Для игровой изометрической иллюстрации также подойдёт квадратный документ 2048 × 2048 px.

Сразу сохраните рабочий файл

После открытия SVG выберите:

File → Save As → Adobe Illustrator (.AI)

Не редактируйте единственный исходный SVG. Сохраните его как резервную экспортную версию.

Организация слоёв в Illustrator (для модели моста)

Панель Layers открывается через Window → Layers. Она позволяет находить, скрывать, блокировать и редактировать объекты и подслои.

Создайте следующую структуру, если планируете работать с подобными иллюстрациями в дальнейшем:

1. REFERENCE — Поместите сюда вариант с Shaded Background. Уменьшите прозрачность до 30–50% и заблокируйте слой.
2. OUTLINE — Здесь будут находиться экспортированные линии Plasticity.
3. SHADOW — Общая тень под мостом, контактные тени и затемнение внутри арки.
4. BRIDGE — Основные заливки:
   • каменные опоры;
   • дорожное полотно;
   • бортики;
   • внутренний пролёт.
5. WATER — Основная форма воды, светлые полосы и небольшие блики.
6. GROUND — Берега, почва и крупные островки травы.
7. STONES — камни по воде.
8. PLANTS — растения.
9. LIGHT — свет (освещение).
10. DETAILS — детали разного толка.

Очистка экспортированных линий

Если после открытия SVG линии будут сгруппированы (без доступа к отдельным из них), нужно их разгруппировать Object → Ungroup. После чего удаляем все лишние линии.

3 типа обводки

Для стилизованной сцены достаточно:

1. Внешний силуэт — самый толстый 4 px.
2. Основные внутренние границы — средние 2 px.
3. Мелкие детали — тонкие 1–1.5 px.

Точные значения зависят от размера монтажной области.

Создание цветовых заливок

Export Hidden Line создаёт преимущественно линии. Поэтому цветные поверхности удобнее собрать отдельно.

Метод 1. Live Paint

Для замкнутой системы линий можно применить Live Paint:

1. Создайте копию очищенной обводки.
2. Выделите линии.
3. Выберите Object → Live Paint → Make.
4. Используйте Live Paint Bucket для заполнения областей.
5. После завершения при необходимости выполните Expand.

Live Paint быстрее, но может создавать большое количество мелких областей. Для простой модели моста он подходит, если экспортированные контуры достаточно чистые.

Метод 2. Shape Builder и Pathfinder

Pathfinder позволяет объединять, вычитать и разделять перекрывающиеся векторные формы.

Для моста Pathfinder удобно использовать, чтобы:

• вырезать арочный проём;
• объединить береговые пятна;
• создать форму воды под мостом;
• отделить теневую сторону;
• объединить несколько камней в одну декоративную массу.

Простая палитра для моста

Чтобы уменьшить объём ручной работы, используйте ограниченную палитру из 7–9 цветов.

Основные цвета (как вариант, но можно использовать и другие)

Камень моста:

• светлый тёплый серый — #B7AA91;
• средний серо-коричневый — #817461;
• тёмный серо-коричневый — #51483E.

Дорожное полотно:

• приглушённый терракотовый — #A46745;
• тёмная сторона — #704833.

Вода:

• основной сине-зелёный — #5E9FA5;
• тёмный — #39747C;
• блик — #A8D7D3.

Земля и трава:

• земля — #9A7752;
• трава — #70865A;
• тёмная трава — #4E6545.

Для совсем простой иллюстрации можно сократить палитру до шести цветов.

Финальная обработка контуров

Чёрный контур может выглядеть слишком жёстко. Замените его на тёмный цвет, связанный с палитрой. Например:

• тёмный серо-синий — #263A3D;
• тёмный коричневый — #3C332C.

Внешний контур можно оставить более тёмным, а внутренние линии сделать светлее и тоньше.

Выбор объектов и работа со сложными вложенными элементами выполняются через панель Layers, где можно раскрывать группы и выделять нужные элементы непосредственно в иерархии.

Быстрое изменение палитры

Когда иллюстрация готова, выделите основные цветные объекты и используйте:

Edit → Edit Colors → Recolor Artwork

Recolor Artwork позволяет заменить цветовую схему, использовать библиотеки образцов и перераспределить цвета между выбранными объектами.

Для моста можно быстро создать несколько вариантов:

• летний зелёный;
• осенний оранжевый;
• зимний сине-серый;
• ночной фиолетовый;
• сказочный бирюзово-золотой.

При необходимости количество цветов можно уменьшить через расширенные параметры Recolor Artwork.

ЧАВО?

Можно ли получить цветную иллюстрацию непосредственно из Plasticity?

Plasticity может добавить затенённый фон и использовать цвета материалов при экспорте линий. Однако для полноценной стилизованной раскраски удобнее экспортировать SVG и закончить работу в Illustrator.

В каком формате загружать модель в Illustrator?

Для данного пайплайна используется SVG, полученный через Export Hidden Line. SVG сохраняет линии в векторном виде и позволяет редактировать их в Illustrator.

Обязательно ли включать скрытые линии?

Нет. Для художественной иллюстрации скрытые линии обычно отключаются. Они больше подходят для технической документации и чертежей.

Какой ракурс лучше для модели моста?

Для выбранного стилизованного моста лучше использовать Top Right, Top Left или собственный верхний изометрический ракурс.

Нужно ли включать Shaded Background?

Для чистовой векторной основы — нет. Но полезно сделать отдельный экспорт с затенением и использовать его как референс для освещения.

Можно ли изменить всю палитру после завершения работы?

Да. В Illustrator можно выделить иллюстрацию и использовать Recolor Artwork для замены и согласования цветов.

Подходит ли этот способ для игровых объектов?

Да. Он особенно удобен для статичных изометрических объектов, иконок, построек, транспорта, декоративных элементов и небольших игровых локаций.

Скачать программу Plasticity можно с официального сайта разработчика — здесь

Заключение

Иллюстрация из модели 3D — это эффективный способ соединить точное моделирование в Plasticity с художественной обработкой в Adobe Illustrator. Команда Export Hidden Line переносит ракурс и геометрию модели в SVG, после чего художник может самостоятельно определить толщину линий, цвета, тени и уровень стилизации.

Для выбранного моста через речку оптимальным будет простой изометрический ракурс, чистый внешний силуэт и ограниченная палитра. Основную форму следует построить в Plasticity, а воду, растения, мелкие камни и декоративные акценты — упростить или добавить уже в Illustrator.

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