Customer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

3D Preview Mockups

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.

For 3D previews, you can apply simple image transformations to emulate a warp effect.

Emulation of a warp effect in 2D software.

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.

  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.

    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.

  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.

  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.

PSD template of a mug.

To render this design on two mockups, you can send a request to the endpoint POST ~/api/rendering/multipage/preview. For example:

JavaScript
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:

JavaScript
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:

JavaScript
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:

json
{
   "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.

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

Downloads