3D Preview Mockups

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.

   

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.

   

   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.

   

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.

   

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. 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.

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:

For more details about the Dynamic Image API and the personalization parameters, you can refer to the overview↗ and find more tutorials↗ about creating PSD mockups.

For reference, you can download a complete code sample.

See Also

Manual

• Dynamic Image API
• Creating PSD mockups↗

Downloads

• 3D preview code sample