---
title: "3D Preview Mockups"
canonical: https://customerscanvas.com/docs/cc6/3d-preview.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# 3D Preview Mockups

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
The task of creating preview images for personalized products is very popular. Sometimes it becomes a real challenge when a product has a complex shape like mugs, phone cases, etc. In the Design Editor, you can just take a product photo and put a design as an overlay on top. It may look not as realistic as a true 3D model, but good enough to give a user an idea of how a personalized product will look.
 
![An overlay on a product photo.](https://customerscanvas.com/docs/cc6/images/MugFront3DPlain.png)
 
For 3D previews, you can apply simple image transformations to emulate a warp effect.
 
![Emulation of a warp effect in 2D software.](https://customerscanvas.com/docs/cc6/images/MugFront3D3D.png)
 
This topic describes how you can design a 3D preview mockup in Adobe Photoshop and render this preview through the Dynamic Image API.
 
## Creating a Product Mockup in Photoshop
  
Customer's Canvas allows you to implement a *pseudo-3D preview* when applying a non-linear transformation to a smart object.
 
The trick here is that the warp transformation and vector mask do not really change the image. Transformation settings and the mask are saved, and when you replace the placeholder image with a design, it will be warped and masked in the same way.
 
Let's look at how you can create preview mockups for a mug:
 
1. Open a mug photo you would like to put a design on.
2. Add a placeholder for the design as a separate layer and adjust its size so that it has the same aspect ratio. As an alternative, you can drag your product design to the mug photo. 
    ![Preparing a PSD template.](https://customerscanvas.com/docs/cc6/images/MugFrontStep1.png)
3. Check that this layer is marked with the **Smart object** icon. If not, right-click the design layer and click **Convert to smart object**. 
    ![The smart object icon.](https://customerscanvas.com/docs/cc6/images/MugFrontStep4.png)
 
**Note** 
Pay attention to the smart object name and the names of its inner layers. You will use these names when rendering the preview through the Dynamic Image API.
4. Emulate the non-linear surface as follows:
    1. Switch the design layer into the warp mode (**Edit** > **Transform** > **Warp**).
    2. Select the **Custom** warp type.
    3. Manually adjust the surface control points.
    4. Confirm the warping when you are all set.

    ![The Custom warp transform.](https://customerscanvas.com/docs/cc6/images/MugFrontStep3.png)
5. Cut the *invisible* part of the design with a vector mask: draw a work path with the Pen tool or one of the shape tools, and then click **Layer** > **Vector mask** > **Current path**.
6. Apply the **Multiply** blend mode to this layer. 
    ![Preparing a PSD template.](https://customerscanvas.com/docs/cc6/images/MugSide2.png)
7. Save this mockup.

To generate image previews from different angles, as if the mug is observed from several points of view, create more preview mockups using the described algorithm.
 
Note, if you face a loss of the image quality, use the same DPI and size for rendered images and smart objects in your mockups.
 
## Rendering 3D Previews
  
Now that we have created the mockups, let's look at how you can render 3D previews by using the [Dynamic Image API](https://customerscanvas.com/docs/cc6/dynamic-image-api.htm.md). This REST API allows you to generate images dynamically from PSD files, where you can replace and modify some layers based on HTTP requests.
 
Let's assume that we have created two preview mockups `mug-left.psd` and `mug-right.psd` and the following design.
 
![PSD template of a mug.](https://customerscanvas.com/docs/cc6/images/MugDesign.png)
 
To render this design on two mockups, you can send a request to the endpoint `POST ~/api/rendering/multipage/preview`. For example:
 
```
const response = await fetch("http://localhost:84/api/rendering/multipage/preview", {
    method: "POST",
    headers: { "Content-Type": "application/json; charset=utf-8" },
    body: JSON.stringify(data)
});
```
 
In the request payload, pass an array of two elements that define the preview parameters - the mockup name and personalization data, for example:
 
```
const data = {
    pages: [
        {   // The first point of view.
            template: "mug-left.psd",
            data: cfg
        },
        {   // The second point of view.
            template: "mug-right.psd",
            data: cfg
        }
    ]
};
```
 
The personalization data represents key-value pairs, where keys are the layer names and values are objects defining how the corresponding layer should be changed, for example:
 
```
const cfg = {
    // Changing the smart object "mug_design".
    "mug_design": {
        "type": "psd",
        // Replacing the content with the design.
        "content": "mug_christmas_design.psd",
        "data": {
            // Changing the "Text 1" element.
            "Text 1": {
                "type": "text",
                "text": "Happy\nNew Year"
            }
        }
    }
};
```
 
Here, **mug\_design** is the smart object name in both our mockups. The **content** property indicates that the `mug_christmas_design.psd` will be inserted into this layer. Additionally, we changed the content of a text element in the **data** property.
 
In the request response, you will get a JSON with an array of links to the rendered previews. For example:
 
```
{
   "results": [
       {
           "url": "http://localhost:84/api/results/download/?file=AA4A29399EC558951129141239092E11.png"
       },
       {
           "url": "http://localhost:84/api/results/download/?file=C711433961251525457F1020170EB2AA.png"
       }
   ]
}
```
 
Now, you can download these images and display them in the browser. The result may look as follows:
 
![3D preview.](https://customerscanvas.com/docs/cc6/images/MugInPreview.png)
 
For more details about the Dynamic Image API and the personalization parameters, you can refer to the [overview↗](https://customerscanvas.com/support/dynamic-image) and find [more tutorials↗](https://customerscanvas.com/support/dynamic-image/creating-mockups.md) about creating PSD mockups.
 
For reference, you can download a [complete code sample](https://customerscanvas.com/docs/cc6/samples/3dPreview.zip).
 
## See Also
  
### Manual
 
- [Dynamic Image API](https://customerscanvas.com/docs/cc6/dynamic-image-api.htm.md)
- [Creating PSD mockups↗](https://customerscanvas.com/support/dynamic-image/creating-mockups.md)

### Downloads
 
- [3D preview code sample](https://customerscanvas.com/docs/cc6/samples/3dPreview.zip)