101 СПОСОБ  ЗАРАБОТАТЬ   НА ПЕЧАТИ

ConceptD для концептуального 3D-макета

  • Вячеслав Шмаков
  • 22 марта 2021 г.
  • 2981
Пошаговое руководство по созданию собственного мокапа цилиндрической упаковки без специализированных 3D-приложений — с помощью привычных Adobe Illustrator, Photoshop и мощного ноутбука-трансформера ConceptD 3 Ezel от Acer.

Пошаговое руководство по созданию собственного мокапа цилиндрической упаковки без специализированных 3D-приложений — с помощью привычных Adobe Illustrator, Photoshop и мощного ноутбука-трансформера ConceptD 3 Ezel от Acer.

Для хорошей презентации дизайна важен не только сам дизайн, но и его подача. И, несмотря на обилие бесплатных вариантов шаблонов и мокапов *, иногда требуется определённый, совершенно конкретный вид упаковки (или этикетка на нестандартной бутылке, или определённый ракурс упаковки), который позволит ярко продемонстрировать достоинства и обязательные элементы дизайна. Поиски подходящего бесплатного мокапа могут занять часы, а это время будет проведено непродуктивно. Покупка готового мокапа обойдется в 15-25 долларов. А создание уникального мокапа для презентации своего дизайна занимает не так много времени. При этом для качественных визуализаций не требуется специализированных знаний ЗD-программ — всё можно выполнить посредством стандартных средств только Adobe Illustrator и Photoshop. И, конечно, неплохо бы иметь в своём распоряжении мощный ноутбук-трансформер ConceptD 3 Ezel от Acer. При некотором старании, желании и качественной настройке визуализации созданные мокапы можно даже разместить для продажи на специализированных биржах и стоках. В этой статье рассмотрим создание мокапа цилиндрической упаковки (это один из самых сложных вариантов).

ConceptD для концептуального 3D-макета

Для примера возьмем вид спереди, как наиболее конструктивный в плане представления дизайна (шаги для создания других ракурсов точно такие же). Для этого необходимо знать размеры упаковки и её форму. Лучше всего иметь чертеж — тогда развёртка этикетки будет точно соответствовать модели созданной упаковки, но даже если чертежа нет под рукой — можно ориентироваться на приблизительное соотношение сторон.

Основы мокапа создаются в Illustrator.

Сперва необходимо выстроить векторный контур силуэта цилиндрической упаковки, а точнее его правую половину (от оси симметрии). Толщину контура оставляем стандартную в 1 pt, цвет контура — белый. Работаем в цветовом пространстве RGB.

ConceptD для концептуального 3D-макета

Для создания трёхмерной модели воспользуемся функцией Revolve.

Выделяем созданный контур и применяем модификатор Effect * 3D * Revolve:

ConceptD для концептуального 3D-макета

Для того, чтобы сразу контролировать процесс визуализации в окне модификатора включаем галочку Preview.

ConceptD для концептуального 3D-макета

При настройках по умолчанию данный вариант визуализации не требует больших ресурсов. Для качественного построения модели всё-таки необходим ресурс графической карты, и хорошо, если у вас он с запасом. Например, на ConceptD 3 Ezel установлена мощная видеокарта NVIDIA GeForce GTX 1650TI с 4 Gb GDDR5, что позволят настраивать визуализацию с максимальными настройками в режиме реального времени.

Рассмотрим подробнее настройки, которые находятся в окне 3D Revolve Options.

Во-первых, есть ряд готовых наборов настроек (presets — вариантов расположения 3D-модели), которые могут быть использованы для мокапа. Они находятся они в выпадающем списке Position.

ConceptD для концептуального 3D-макета

По умолчанию в списке Position выбран пункт Off-Axis Front. Этого уже достаточно для базовой визуализации. Также возможно вручную настроить необходимый ракурс визуализации, для этого можно зажав левую кнопку мыши «покрутить» условный куб в окне настроек.

ConceptD для концептуального 3D-макета

Значение перспективы по умолчанию равно нулю. Т.е. мы получаем сугубо геометрическое построение, без учёта восприятия человеком. Такая визуализация выглядит несколько «машинно», искусственно. Для придания большей реалистичности стоит указать значение перспективы в районе 50-65.

ConceptD для концептуального 3D-макета

Следующий блок настроек — Revolve, собственно вращение. По умолчанию уже заданы необходимые настройки — а именно — вращение на 360 градусов (если задать меньше — будет простроена всего лишь часть фигуры, что может быть тоже использовано в дизайне — можно показать содержимое упаковки); значение cup — это оставлять ли контур фигуры или простраивать только материал (хорошо видно, если значение угла менее 360 градусов). Значение offcet — это отступ от осевой линии, он должен равняться нулю (если будет больше — в центре построенного цилиндра появится отверстие, равное введеному вами значению). И последний параметр в этом блоке — Edge (край). Вращение относительно какого края производить. Т.к. изначально мы построили правую часть упаковки — необходимо вращение производить относительно левой стороны (стоит по умолчанию).

ConceptD для концептуального 3D-макета

В принципе, на данном этапе уже получается вполне осязаемый результат, который можно экспортировать в Adobe Photoshop и продолжить работу с настройкой мокапа. Но для достижения большей фотореалистичности стоит немного поработать со светом на модели упаковки. Для этого заходим в расширенные опции (More Options).

ConceptD для концептуального 3D-макета

В этой вкладке рассмотрим только Plastic Shading (объемная визуализация, т.к. визуализация линиями, без теней — для нас не представляют интереса, а diffuse shading — не предоставляет возможности редактировать блики).

По умолчанию используется один источник освещения.

ConceptD для концептуального 3D-макета

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

Для этого создадим новый источник, нажав на значок нового слоя. И сразу же переместим источник за объект — нажав на клавишу перемещения. Левой клавишей мыши перемещая точку источника относительно сферы — подбираем положение таким образом, чтобы на упаковке появился заметный рефлекс.

ConceptD для концептуального 3D-макета

Значение яркости выбранного источника света регулируется первым параметром — Light Intensity. Удалить источник света (если он оказался лишним) можно нажав на кнопку корзины, предварительно кликнув левой кнопкой мыши по необходимому источнику света на сфере.

ConceptD для концептуального 3D-макета

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

Ambient light (окружающий свет) — общая яркость картинки. Чем выше значение — тем светлее картинка. Highlight Intensity и Highlight size влияют на интенсивность и условный размер освещенных участков и бликов. Эти значения можно оставить по умолчанию.

ConceptD для концептуального 3D-макета

Параметр blend steps влияет на количество шагов (градаций) цвета. Чем выше параметр — тем более гладким и плавным будут переходы света и тени. Но, вместе с тем — чем выше параметр, тем больше ресурсов вашей видеокарты съест визуализация (никаких проблем не возникает с видеокартой NVIDIA GeForce GTX 1650TI на ноутбуке ConceptD 3 Ezel от Acer). Для плавных переходов теней и света достаточно значений 75-85.

ConceptD для концептуального 3D-макета

Параметр Shading Color оставляем без изменений — это цвет теней, для наших целей отлично подходит чёрный цвет.

Дальнейшие параметры оставляем отключенными — это Preserve Spot Colors (если при построении использовались смесевые «пантонные» цвета, они сохранятся, для нас это не имеет значения; второй параметр — Draw hidden faces (построить невидимые области) — тоже нам ни к чему — нам важны только видимые части изображения).

ConceptD для концептуального 3D-макета

Также не трогаем вкладку Map Art — посредством нее можно наложить изображение на отдельные элементы модели. Этим мы займемся в Adobe Photoshop.

После того как основная модель готова и полностью устраивает её внешний вид — можно подкорректировать необходимое положение модели, или создать несколько различных моделей для демонстрации упаковки с разных ракурсов. Жмем «Ok».

Применённый эффект можно изменить (ракурс, настройки перспективы и света) в любое время. Достаточно зайти снова в настройки визуализации. Это можно сделать через панель Appearance (Window * Appearance, или Shift+F6), просто нажав левой клавишей мыши на строке «3D Revolve».

ConceptD для концептуального 3D-макета

Модель с тенями готова. Теперь необходимо создать модель света и бликов. Для этого копируем созданную модель со всеми настройками и меняем цвет контура упаковки на серый (примерное значение — 85-85-85 по шкале RGB).

ConceptD для концептуального 3D-макета

В настройках света и его интенсивности подбираем значения так, чтобы упаковка выглядела максимально контрастной (при дальнейшем наложении слоев в Adobe Photoshop будут видны только серые и белые оттенки). Параметры вращения и перспективы оставляем неизменными. Примерный вид контрастной чёрной упаковки представлен ниже.

ConceptD для концептуального 3D-макета

 

Полезный совет

Если цвет упаковки и крышки различны — можно создать маску в Adobe Photoshop и, используя форму крышки в виде маски, залить её любым цветом. Можно это сделать и в Adobe Illustrator, но для этого эффект Revolve нужно применять к группе из двух контуров — собственно упаковки и крышки, на иллюстрации показаны разным цветом.

 

ConceptD для концептуального 3D-макета

Размер этикетки, которая будет ложиться на данный мокап, равняется ½ длины окружности всей упаковки. В данном примере диаметр упаковки равен 60 мм, высота части под этикетку — 58 мм. Таким образом размер макета, который будет использоваться в мокапе — π*60/2 = 94 мм по длине и 58 мм по высоте.

Данный прямоугольник необходимо расчертить условной «миллиметровкой» — вертикальными и горизонтальными линиями на произвольном расстоянии, чтобы лучше контролировать искажение пропорций при будущей трансформации. Центральную вертикальную и горизонтальную линии для большей наглядности нужно выделить другим цветом.

ConceptD для концептуального 3D-макета

Перемещаемся в Adobe Photoshop. Создаем холст размером 3000*3000 пикселов с разрешением 300 точек (в дальнейшем этого хватит для печати качественного изображения формата А4 с разрешением 300 dpi — достаточно для большинства задач).

ConceptD для концептуального 3D-макета

И посредством копирования из иллюстратора (Ctrl+C) вставляем на холст (Ctrl+V) оба изображения — белое и чёрное. Вставлять можно сразу как «Pixels».

ConceptD для концептуального 3D-макета

Вставленное изображение будет меньше, чем необходимо. Увеличить вставляемое изображение лучше сразу при импорте, указав конкретное значение в процентах (тогда оба вставленных изображения будут полностью соответствовать друг другу).

ConceptD для концептуального 3D-макета

Далее — слою с белым изображением модели в панели слоев (переименуем его в shadows) назначаем режим наложения Multiply (серый цвет будет накладываться на изображение и создавать тени), а слою с чёрной моделью (переименуем в highlights) — назначаем режим наложения Screen (белые элементы слоя станут бликами и светом на этикетке).

ConceptD для концептуального 3D-макета

ConceptD для концептуального 3D-макета

Таким же способом импортируем созданный макет с сеткой, при этом не увеличивая его (оставляем значение 100%). Переименуем слой в «label».

Из импортированного слоя создаем смарт-объект (при увеличении или при уменьшении он будет сохранять свое исходное качество без потерь). Правой клавишей мыши в панели слоев щёлкаем по слою «label» и выбираем функцию «Convert to Smart object».

ConceptD для концептуального 3D-макета

Но поскольку импортированный объект значительно меньше по размеру визуализации упаковки, его необходимо откорректировать. Для этого в панели слоев дважды левой клавишей мыши щёлкаем по слою. Он откроется как новый файл. Затем меняем его разрешение (Image * Image Size или сочетание клавиш Alt+Ctrl+I) — с 300 точек на 750-900. При этом обязательно должна быть установлена галочка «resample». Это действие необходимо для того, чтобы макет, который будет вставлен впоследствии из Illustrator был приемлемого качества — по ширине примерно соответствовал ширине холста (в нашем случае мы увеличиваем его до примерно 3000 пикселов по ширине). Таким образом будет достигнуто хорошее качество визуализации самого дизайна на упаковке. Сохраняем и закрываем файл со слоем смарт-объекта.

ConceptD для концептуального 3D-макета

Дублируем слой со смарт-объектом, перемещаем дубль поверх всех слоев и отключаем видимость. При необходимости в дальнейшем поменять содержимое (собственно, дизайн) — просто дважды кликнем на верхнем отключенном слое, заменим его содержимое, сохраним) — и второй слой со смарт-объектом также будет изменен.

ConceptD для концептуального 3D-макета

Видимый слой со смарт-объектом перемещаем под два слоя с макетом, и все эти три слоя объединяем в одну группу (Ctrl+G). Создаём контур выделения: зажав Ctrl, левой клавишей мыши в панели слоёв кликаем на одном из двух слоёв с моделью упаковки (всё равно каком — выделение будет идентичным).

ConceptD для концептуального 3D-макета

И из этого выделения создаем маску для всей группы (для маскирования выступающих элементов этикетки). Для этого в панели слоев нажимаем кнопку «Add layer mask».

ConceptD для концептуального 3D-макета

Ещё раз создаём такой же контур выделения. Создаём новый слой и помещаем его в группу ниже всех остальных слоёв. И заливаем выделенный контур белым цветом (Ctrl+Del) или цветом будущей упаковки (в дальнейшем, при изменении цвета фона упаковка останется заданного цвета). Снимаем выделение (Ctrl+D).

ConceptD для концептуального 3D-макета

Теперь приступим к размещению самой этикетки. Выбираем смарт-слой с этикеткой и применяем к нему свободную трансформацию Edit * Free Transform (Ctrl+T). Зажав клавишу Alt (при этом сохраняется выравнивание относительно центра) и Shift (сохраняются пропорции слоя) — левой клавишей мыши тянем и увеличиваем изображение этикетки до размера упаковки.

ConceptD для концептуального 3D-макета

Смещаем (зажав Shift для ровного позиционирования) этикетку к нижнему краю упаковки и переходим в трансформацию по угловым направляющим (Warp mode).

ConceptD для концептуального 3D-макета

При этом у каждого угла появляются направляющие, и сам угол изображения можно передвинуть в любом направлении левой клавишей мыши.

Выстраиваем углы и направляющие так, как показано ниже (изгибаем по дуге). При этом ранее созданная разметка (горизонтальные и вертикальные линии) — позволяют легко контролировать степень искажения на разных участках изображения. Корректировать искажение изображения в любой его части можно непосредственно потянув левой клавишей мыши за ту или иную часть. Созданная ранее маска закрывает лишние контуры этикетки.

ConceptD для концептуального 3D-макета

По сути — основная работа закончена. Можно менять содержимое смарт-объекта, и уже получить качественную визуализацию цилиндрической упаковки.

ConceptD для концептуального 3D-макета

При необходимости — можно несколько откорректировать свет и тень на упаковке. Это легко сделать инструментами Dodge tool («высветление») и Burn tool («затемнение»). В таком случае очень удобно использовать стилус и чувствительный экран современного ноутбука Acer ConceptD 3 Ezel — работа приобретёт живые блики (для более значительных изменений можно использовать корректирующие слои — Levels).

ConceptD для концептуального 3D-макета

Также с помощью кисти (Brush tool) и стилуса можно добавить тень под упаковкой, это добавит объёма всему изображению. Тень рисуем на отдельном слое чёрным цветом, затем всему слою задаем необходимую прозрачность (при изменении цвета фона тень будет выглядеть насыщенно и ярко).

ConceptD для концептуального 3D-макета

Таким же образом можно создать мокап с любым другим ракурсом упаковки. Также можно создать не только цилиндрическую, но и конусовидную упаковку — к примеру, бумажный или пластиковый стаканчик.

Создание собственного мокапа занимает некоторое время, но результат стоит того. При этом можно показать значимые элементы своего дизайна в наиболее выгодном ракурсе. Результат работы вы сможете легко продемонстрировать заказчику или целому коллективу во время презентации, развернув экран ноутбука-трансформера ConceptD 3 Ezel от Acer в режим презентации. И не удивляйтесь, если они хором скажут «Вау!»

Об авторе: Вячеслав Шмаков — дизайнер студии infograph.pro

Промокод PUBLISH даёт 10% скидку на покупку любого устройства линейки ConceptD в официальном интернет-магазине Acer ru-store.acer.com до 15 апреля.

 

* Мокап (или mock-up на английском) —специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах.

 

 

ПОХОЖИЕ СТАТЬИ
«Гиперболоид» инженеров из themediahouse

«Разработана типографией для типографий» — таков лозунг, под которым продвигается система цифровой лазерной резки motioncutter. И это, как бывает далеко не всегда с рекламными лозунгами, истинная правда!

«Латекс» с запасом

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

Большая фототройка

Выбираем принтеры для высококачественной фотопечати формата А3 и более для полиграфистов, рекламщиков и фотографов.

Большая «цифра» для большого офсета

Интересно познакомиться с ситуацией в крупных офсетных типографиях, ставших первопроходцами в сфере «большой» цифровой печати и первыми в России установивших у себя цифровые печатные машины формата B2.


Новый номер

Тема номера – «drupa, которую мы потеряли». В рубрике «Например» – практический опыт «Ситипринт», Must Have, «Фотолэнд», «Рекламные Решения», «СПАРК-М» и «МаркМаркетс». Обзор Ricoh Pro L5160e. Широкоформатные фотопринтеры. Тайный Покупатель буклетов. 


Голосование
Что не так с системами для прямой цифровой печати гофроупаковки?
    Проголосовало: 34