Как сделать мокап коробки в фотошопе пошаговая инструкция

Создание 3D-мокапа для демонстрации дизайна упаковки — фантастический метод, который может дать любому дизайнеру конкурентное преимущество. При правильном использовании мокапы могут улучшить дизайн и показать клиентам, как будет выглядеть дизайн, если его воплотить в жизнь.

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

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

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

Как сделать свой собственный мокап коробки в Photoshop

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

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

Шаг 1: Откройте фотографию коробки в Photoshop. Вы можете легко найти изображение коробки на некоторых сайтах с бесплатными изображениями.

Шаг 2: Вы можете перетащить свой дизайн или шаблон в Photoshop или скопировать и вставить его напрямую. Когда вы нажимаете Command + V или Ctrl + V, чтобы вставить шаблон поверх фотографии коробки, пока он все еще находится на одном слое, он автоматически вставится на новый слой.

Шаг 3: Нажмите Command + A, чтобы выбрать шаблон. Нажмите Command + C или Ctrl + C, чтобы скопировать выделение после того, как бегущие муравьи окружат ваш узор. Нажав Command + D или Ctrl + D, вы можете удалить слой и выделение.

Шаг 4: Вернитесь к фоновому слою, который должен быть вашим шаблоном коробки. Идите вперед и вставьте свой шаблон. Как только вы это сделаете, нажмите Command + T для свободной трансформации.

Шаг 5: После того, как вы активировали Command + T для свободной трансформации, вы сможете трансформировать изображение любым удобным для вас способом.

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

Шаг 6: В верхней части меню вы увидите маленький значок, как показано ниже. Нажмите на этот значок.

Шаг 7: Теперь щелкните и перетащите один из ваших углов, вы увидите, что поле шаблона стало более гибким для размещения на вашем поле. Идите вперед и завершите одну сторону, и как только вы закончите, и шаблон будет в поле, нажмите Command + C, чтобы скопировать.

На этом этапе вы можете использовать инструмент «Выделение» или » Ластик «, чтобы убрать любые края, например, если линии вашей коробки были не совсем прямыми. Измените режим наложения, чтобы увидеть, будут ли разные цвета лучше сочетаться с исходным снимком коробки.

Совет: если инструмент „Свободное преобразование“ не дает результата, вы можете перейти в меню » Правка » > «Преобразование» и выбрать другой вариант преобразования.

Шаг 8: Теперь вы можете сохранить макет коробки. Я предпочитаю сохранять окончательный макет в формате PDF (300 пикселей на дюйм, максимальное разрешение, jpeg). Это можно сделать, выбрав » Файл» > » Экспорт » > » Экспортировать как PDF «.

Заключение

Несмотря на то, что существует множество различных способов создания 3D-мокапа, в том числе с использованием причудливых фонов и дополнительных эффектов, даже этот простой метод значительно улучшает представление.

Этап 1: Выбор дизайна и фона

Прежде всего необходимо определиться, мокап чего вы хотите сделать в Adobe Photoshop, и создать исходник – фотографию нужного предмета, в идеале имеющего матовую поверхность без каких-либо деталей, которых не должно быть на финальном изображении.

При подготовке используйте несколько источников освещения и делайте снимки сразу под несколькими углами, чтобы впоследствии иметь возможность работы и с другими вариантами. Также учтите, что некоторые разновидности мокапов могут создаваться и без исходников, в том числе при помощи 3D-инструментов, однако в таком случае требуются соответствующие навыки работы с Фотошопом.

Создать мокап можно и без использования столь сложного для многих графического редактора, как Adobe Photoshop. Если воспользоваться онлайн-платформой Canva, не потребуется в принципе устанавливать какое-либо программное обеспечение. В библиотеке этого сервиса есть множество различных шаблонов, в числе которых и качественные и, что не менее важно, редактируемые макеты различных устройств и предметов.

Этап 2: Работа с цветом

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

Подробнее: Замена цвета объектов и кожи в Adobe Photoshop

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

Этап 3: Подготовка объектов

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

1. Через главное меню «Файл» на верхней панели программы произведите открытие нужного изображения. Сложность и дальнейший порядок действий, как уже было сказано, зависит от выбранного объекта.



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

   Подробнее: Создание прямоугольников и фигур в Adobe Photoshop



3. Завершив подготовку формы, щелкните правой кнопкой мыши по файлу на панели слоев и через меню воспользуйтесь опцией «Преобразовать в смарт-объект». После обработки на миниатюре должен будет появиться значок смарт-объекта.



4. На верхней панели разверните список «Редактирование», перейдите в «Трансформирование» и выберите «Искажение». С помощью данного режима необходимо выровнять фигуру на оригинальном изображении.

   Подробнее: Трансформирование объектов в Adobe Photoshop

   

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

   

   Если объект имеет округлую форму, через то же самое «Трансформирование» необходимо включить режим «Деформация». Далее следует в точности повторить нужную форму, так как после применения внести какие-либо другие изменения будет весьма проблематично.



5. Завершив редактирование и убедившись в отсутствии нежелательных артефактов, выберите тот же файл из списка слоев и на нижней панели воспользуйтесь кнопкой «Добавить слой маску». В результате рядом с миниатюрой должен будет появиться новый пустой слой.

   Подробнее: Работа со слоями-масками в Adobe Photoshop



6. Выделите весь слой и поменяйте прозрачность таким образом, чтобы отчетливо были видны объекты на заднем фоне, находящиеся в пределах фигуры. Чтобы избавиться от такого рода неровностей, кликните по миниатюре слоя-маски, возьмите кисточку черного цвета и аккуратно закрасьте соответствующую область, придав изображению естественный вид.



7. Мокап нескольких размеров и форм на одном и том же изображении, особенно если добавляется рисунок без фиксированных пропорций, следует делать путем дублирования основного смарт-объекта и последующего редактирования. Это является отличным способом создания, к примеру, визиток, положение которых отличается, но дизайн должен оставаться прежним.
   

   Читайте также: Создание визитки в Adobe Photoshop

   Для указанной задачи нужно кликнуть правой кнопкой мыши по первоначальному слою и воспользоваться опцией «Создать дубликат слоя». Во всплывающем окне нажмите «ОК», не меняя каких-либо параметров, и можете смело редактировать формы и расположение новых объектов.

Конечный файл сохраните в формате PSD с любым названием и переходите к следующему этапу. В завершение также обратите внимание, если мокап создается для разового использования, лучше работать с маской, а не со смарт-объектом.

Этап 4: Добавление изображений

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

1. Находясь в ранее подготовленном файле, дважды кликните по миниатюре смарт-объекта на панели слоев. Также можете щелкнуть правой кнопкой мыши и выбрать «Редактировать содержимое».



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



3. Чтобы применить изменения, воспользуйтесь сочетанием клавиш «CTRL+S» или пунктом «Сохранить» в меню «Файл». При возращении к изначальному файлу можно сразу заметить результат проделанной работы, так как ранее пустая область изменится соответствующим образом.
   

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

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

Этап 5: Коррекция, освещение и тени

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

1. Щелкните ЛКМ по слою и на нижней панели в той же колонке воспользуйтесь кнопкой «Создать новый корректирующий слой или слой-заливку» и выберите пункт «Кривые».



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



3. На вкладке «Свойства» используйте график уровней, чтобы придать изображению приемлемый вид. К сожалению, более конкретные рекомендации дать невозможно, потому что каждый случай индивидуален.
   

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

Этап 6: Завершение работы

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

Подробнее: Сохранение изображений в Adobe Photoshop

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

Поделиться статьей:

Пример HTML-страницы

Шаг 1. Создание нового документа

Вначале создадим новый документ, с размерами 1588х1191px и зальем фон #d2d3d5 цветом.

Шаг 2. Создание нового документа

Для того чтобы все получилось аккуратно, лучше всего использовать Линейку и Сетку. Для того чтобы активировать Линейку зайдите в Просмотр > Линейка (Ctrl + R), а чтобы активировать сетку зайдите в Просмотр > Показать >  Сетка (Ctrl + ,).

Также вот мои настройки сетки.

Шаг 3. Создание правой стороны

Создадим новую Группу и назовем ее Right Side. Затем создаем новый слой и также назовем его Right Side. Используя инструмент Прямоугольное выделение, выделим прямоугольник размером 795х1078px.  Этот прямоугольник можно залить любым цветом, я для примера залил белым (#FFFFFF).

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

Шаг 4. Создание левой стороны

Теперь я создаю по примеру правой стороны, такую же группу но называю ее Left Side. А затем создаю в ней новый слой и тоже называю его Left Side. Точно также как и с правой стороной я делаю выделение размером 483х1078px и заливаю ее любым цветом. После этого преобразую этот слой в Смарт-объект.

Шаг 5. Трансформация

После этого я начинаю преобразовывать свои слои по форме приблизительно в 3д форму коробки. Для начала беру Right Side, затем выбираю Свободную трансформацию (Ctrl + T) и уменьшаю одну сторону примерно на 75% по высоте. Меньшая сторона у меня приблизительно получилась 815px по высоте.

Шаг 6. Трансформация

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

Шаг 7. Наложение дизайна

Теперь перейдем к наложению дизайна на упаковку. Именно для этого мы использовали смарт-объекты. Выберем любую сторону и нажмем в панели слоев на выбранном смарт-объекте правой кнопкой и выберем Редактировать Содержимое. Откроется исходное состояние прямоугольника, на которое мы накладываем наш дизайн. После этого закрываем этот документ с сохранением и автоматически грань должна обновиться.

Вот пример моего дизайна.

Шаг 8. Промежуточный результат

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

Шаг 9. Добавление теней

В принципе уже выглядит неплохо. Добавим тени чтобы добавить реалистичности.

Создадим новую группу которую назовем Shadows. И в ней создадим новый слой который назовем Back. Далее сделаем выделение по форме упаковки, проще всего это сделать нажав по слоям левой и правой стороны зажав одновременно Ctrl и Shift. У вас должно получиться выделение по форме коробки. Затем залейте это выделение черным цветом. А после этого трансформируйте и сожмите по вертикали и верх тени сдвиньте влево. Как показано на рисунке. И после этого используйте на этом слое Размытие по Гауссу и уменьшите прозрачность этого слоя.

Шаг 10. Добавление теней

Теперь создадим новый слой и назовем его Bottom. После этого выберем инструмент Кисть (B) и выберем настройки примерно как у меня.

Теперь нарисуем с помощью этой кисти нарисуем еще одну тень, в месте соприкосновения коробки с поверхностью.

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

Шаг 11. Добавление теней

Теперь перейдем к группе Right Side создадим в ней новый слой и назовем его Shadows. К этому слою нужно обязательно добавить маску по размеру правой стороны либо сгруппировать со слоем на котором у нас дизайн. После этого этот слой переводим в Режим наложения Мягкий свет. И выбираем инструмент Кисть (B) делаем у нее мягкие края и аккуратно рисуем нижний полукруг по форме английской буквы U.

Должно получиться нечто подобное.

Шаг 12. Добавление теней

Тоже самое повторяем и для левой стороны коробки.

Шаг 13. Добавление клапана

Теперь добавим для реализма клапан сбоку.

Создаем новую группу назовем ее Details. Создадим новый слой назовем его Left Flap. Используем инструмент Перо (P) и нарисуем сплюснутый треугольник как на рисунке, затем зальем его #767676 цветом. 

Шаг 14. Добавление теней

Теперь создадим тень на сгибе левой и правой грани. Возьмем инструмент Кисть (размер 4-6px) и сделаем черную вертикальную линию между левой и правой частью. Затем немного размоем ее и поменяем Режим наложения на Мягкий свет.

Шаг 15. Добавление блика

Повторим предыдущий шаг и нарисуем аналогичную линию но зальем ее предварительно цветом #ffffff и немного сдвинем влево. 

Шаг 16. Финальное изображение

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

Ссылка на источник

Пример HTML-страницы

Creating your own box packaging mockups from scratch is so much better than using premade mockups. Here’s how to do it in Photoshop.

Photoshop is the perfect tool for creating mockups, and while you can use premade PSD mockup files, it’s much more fun and rewarding to create a mockup from scratch.

By following this tutorial, you will learn how to create a box packaging mockup from scratch, so you can show off your pattern designs on its intended future packaging.

Why Mock Up a Box Packaging Design?

When designing product packaging, it’s integral to see the final design on its intended product shape. While you could send a prototype to print, that’s costly and time-consuming, and you might not get the results you wanted. Using a mockup design allows you to see the design on its intended product without any extra cost, and it doesn’t take that long.

There are many ways to create mockups, but a box packaging mockup is simple and effective for a lot of products you might be designing.

Why Not Just Use a Premade Mockup?

If you’ve been designing for a while, you’ve probably come across the plethora of premade mockup designs available online. There are plenty of suitable designs made by others that you can download for free or for premium prices.

The main problem with using these premade mockups is that everyone else is using them too. How is your design going to look unique when you’ve used the same box packaging mockup as every other designer?

There are two ways around this problem: use stock photos and turn them into a mockup yourself or take your own photos to turn into a mockup. With plenty of stock imagery sites, you can easily find unique photos that feature what you’re looking for; all you have to do is create a mockup from that photo. But for truly unique designs for your mockups, it’s best to use your own photos.

Using your own photos allows you total executive direction, and you can ensure the model, styling, and any other attributes match your design’s look before you turn the photo into a mockup.

How to Make a Box Packaging Mockup in Photoshop

Before diving in, here’s what you will need for this tutorial if you want to follow along:

• Adobe Photoshop.
• A photo of a box.
• A pattern or design.

What Type of Photo Should You Use?

Picking the right photo is essential. Use a photo of a box or packaging, or take it yourself, so that you can use that as the base for your mockup. The box should have no obstructions, such as hands holding it.

Of course, the most important thing is finding a box that already suits the size and shape of your intended design. If you can’t find a stock image of something suitable, this is when it’s best to take your own photo, so you have more control.

We suggest using a photo with a white or light-colored box to ensure your design colors stand out; however, you can use a colored box too if you really want to. Avoid photos of boxes with logos or words on them, or simply edit that out with the Patch Tool or Clone Stamp before creating your mockup.

What Type of Pattern Should You Use?

For this mockup, it’s best to use a repetitive pattern or something with plain colors, but you can add more design details to it later on. You can learn how to make a pattern in Adobe Illustrator or download a pre-existing pattern from a royalty-free website.

Whether you want to use a design or simply change the color of the box is up to you. We’ll be using a simple illustrated design we made in Adobe Illustrator.

How to Make the Box Packaging Mockup

Now, we’re going to create the mockup. Follow the steps below:

1. Open your box photo in Photoshop. You can download the image we used from Unsplash.
2. Open your pattern image in Photoshop and select all by pressing [Cmd + A] on Mac or [Ctrl + A] on Windows. Copy the selection by pressing [Cmd + C] or [Ctrl + C].
3. With your box photo on one layer, paste your pattern on top by pressing [Cmd + V] or [Ctrl + V], and it will automatically paste onto a new layer.
   
4. On the layer with the pattern, right-click the layer preview in the Layers Panel and click Select Pixels. Once the running ants are around your pattern, copy the selection by pressing [Cmd + C] or [Ctrl + C]. Delete the layer and remove the selection with [Cmd + D] or [Ctrl + D].
5. Open a new layer on the Layers Panel by clicking the New Layer button. With this empty layer selected, go to Filter > Vanishing Point on the top toolbar.
   
6. You’ll see the image of the box in the popup window. Use the Create Plane Tool [C] to identify the four corners on one face of the box. Then hold Cmd or Ctrl and drag the perspective grid to a second face. Repeat this step until all the faces of the box show the perspective grid.
7. To change the perspective to fit your box photo, use the Angle box at the top to align the angle of the grid to the correct angles of the plane. Once the perspective grid fits your box, click off of the box.
   
8. Paste your pattern in the popup by clicking [Cmd + V] or [Ctrl + V]. At first, the pattern will paste onto the frame and not the box. If you drag the pattern around, it will move onto the box; however, it may not cover all sides evenly at first.
   
9. Pull the design on each separate side to make the entire design fit. Then move your design around until it suits you. Once you’re happy with how it looks, click OK.
   
10. Back on the layer of the pattern, change the blending mode to Multiply. This is where the original color of your box matters­; if it’s white, the results will be optimal, but if it’s brown or another color, then that will show through your new design.
    

And you’re done.

At this point, if you need to clean up any edges—for example, if your box’s lines weren’t entirely straight—you can use the selection tool or eraser to clean it up. You can also change blending modes to see if the different colors suit your original box photo better.

Create Awesome Box Packaging Mockups in Photoshop

Creating a box packaging mockup from scratch will save you from using repeated free mockup designs found online and give your designs a unique look. It also gives you a way to quickly see how your design works on packaging, saving both money and time compared to printing a prototype.

There are many ways to experiment using this method, such as using different color boxes and seeing how the colors blend with the blending tool, or even using different box shapes to see how the perspective grid works in other ways.

Making a 3D mockup to display a packaging design is a great technique that can give any designer an extra edge on their competition. Done right, mockups can enhance a design and help show clients what the design would look like if it was implemented in the real world.

In this step-by-step tutorial, we’re going to show you how to make a simple 3D mockup of a box in Photoshop.

1. Place your files
_

To prepare for the mockup, we created the foldout in Illustrator and made each side of the box into a jpg file.

We start by placing 3 files into our Photoshop document. The 3 files are jpg of the top, front and right side of our box. Let’s place them into the document by clicking File > Place, and selecting each jpg file. As each placed files appears in your document, hit Enter.

2. Rasterize your files
_

After we’ve got all 3 files in Photoshop, we’re going to rasterize them so that they can be edited later. Do this by selecting those three layers, click on the tab called Layers > Rasterize > Layers.

3. Use the free transform tool
_

In this step, let’s start manipulating each of the 3 sides to make our box look 3D.

Start by selecting the front side of the box by clicking Edit > Free Transform. A selection box will appear. Now hold down the command key for Macs or the control key for PCs, click on the middle dot on the side of the box you want to manipulate, and drag it up a bit. Now it looks like the front side is at an angle.

Let’s do the same to the top and right side of the box by clicking Edit > Free Transform > Hold down the Command/Control Key > Drag. With each side, we’re going to drag around the images’ edges until the corners match up.

4. Trim off the back corner
_

Now that you have your basic box shape, let’s add a couple of effects to polish it up.

We’re going to trim off the back corner to make it look a little more realistic. Let’s do that with the Rectangular Lasso tool. Select a small segment of the top’s back and left side with the rectangular lasso tool, and hit Delete. Next, click the “Select” tab, and select “Deselect.”

5. Add a drop shadow
_

Now let’s make a drop shadow under the box. We’re going to make a black square with the rectangle tool and distort it using the Command/Control keys again.

Then, we’ll move the new layer underneath the layers for the box itself. Then when it’s under the box we’re going to click Layer > Layer Styles > Drop Shadow > Adjust the drop shadow settings > OK.

6. Add a reflection
_

For this, we’re going to duplicate the front and right side layers by clicking Layer > Duplicate Layer.

Now that we have copies of the front and rights sides of the box we’re going to rotate them so that they’re sitting upside down under their copy. Do this by clicking Edit > Free transform > Rotate. Now that these duplicated layers are sitting directly under their originals we’re going to make them faded at one end so that it gives the appearance of a reflection.

I’m going to select the layer for each of the reflections in turn, click the “Layer Masks” button, click the “Gradients” button and do a simple click and drag over the edge of our reflection layer. This will give you a reflection.

7. Finish up with the brush tool
_

Lets add one last shadow in the back, using the Brush Tool. We’re going to click the Brush Tool button and using a soft and feathery dark gray brush, we’re going to apply it behind all these layers. Now we’ve got a slight shadow in the back.

We’re going to do the same routine with the back side of the box, and then we’ll all have a complete mockup!

There’s a lot of different ways to do a 3D mockup, such as using fancier backgrounds and added effects, but even this simple one makes a huge difference in terms of presentation.

Got any of your own tips on making 3D mockups?