3D Preview Mockups

Make It Flat

The first and simplest approach is to draw a product as a two-dimensional image. For example, it may look like this:

However, such a preview does not give a real feel of the product. To address this issue, we need to create 3D images.

Build a 3D Model

The first thing which comes to mind when creating a 3D image is to take some 3D graphics software and build a model there.

However, it is a problem to use such a model dynamically in server scripts (not to mention that 3D modeling requires specific knowledge from designers).

For a decent developer, it is possible to program models in source code without 3D modeling software. It may be a reasonable solution if only one model is needed. However, if you sell photo products on your site, you have to create hundreds of 3D models. Taking into consideration the cost of software engineers having knowledge in math and skilled enough for solving such problems, the models are going to cost far too much.

So, there is a need for an approach to creating 3D models in a more efficient way.

Emulate 3D Preview With 2D Software

What if we 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.

Also, with simple image transformations, we can emulate a warp effect.

The question is, how can we create such images? Here is the good part: the best tool to build pseudo 3D preview models is Adobe Photoshop.

Create a Product Mockup in Photoshop

A pseudo 3D preview in Customer's Canvas includes at least two mockups: a blank mockup and a preview mockup. Both mockups are necessary for creating a 3D preview.

Create a Blank Mockup

The blank mockup is really simple - it could be a product photo, product sketch, or just a shape of the print area.

For the mug, we will choose the latter variant. So, our blank mockup is a transparent rectangle.

Create a Preview Mockup

To create a preview mockup, we apply 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.

The process looks like this:

1. Open a product photo you would like to put a design on.

   

2. Add a placeholder for the design as a separate layer and adjust its size.

   

3. The layer should be marked with the Smart object icon.

   

4. Emulate the non-linear surface as follows:
   1. Switch the 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.

   

6. Add the <DPH> marker to the design layer name.

To generate image previews from different angles, as if the mug is observed from several points of view, we can create three preview mockups using the described algorithm.

If you face a loss of the image quality, use the same DPI and size for rendered images and smart objects in your mockups.

Displaying 3D Preview

Now, when we have created the blank mockup and the preview mockups, let us configure the mug product.

productDefinition = {
    surfaces: [
        {
            printAreas: [{ designFile: "mug_truck_design" }],
            mockup: {
                // The down mockup is a mockup that lays under the design.
                // Note, this 3D preview does not support foreground mockups yet.
                down: {
                    mockupFile: "mug_blank", 
                    previewMockupFiles: ["mug_right", "mug_front", "mug_left"]
                }
            }
        }]
};

After the product is loaded into the editor, an image is added to the product and adjusted to the size of the print area.

When the customization of the product is finished, the preview will look as follows:

The following code displays three proof images on a page.

<img class="previewImg" id="preview" />
<img class="previewImg" id="previewPage2" />
<img class="previewImg" id="previewPage3" />

The following snippet handles the data returned by Customer's Canvas and sets sources for proof images.

var previewElements = $("#approvePage .previewImg").attr("src", "");
// The total number of proof images.
var imgNum = 0;
// approveData contains the data returned by the editor.getProofImages.
// Cycle through each surface in the product.
for (var i = 0; i < approveData.proofImageUrls.length && imgNum < previewElements.length; i++) {
    // Cycle through each proof image in the surface.
    for (var j = 0; j < approveData.proofImageUrls[i].length && imgNum < previewElements.length; j++) {
        previewElements[imgNum].setAttribute("src", approveData.proofImageUrls[i][j]);
        imgNum++;
    }
}

For more details about mockups, you can refer to the Mockups topic.

See Also

Manual

• Mockups

Downloads

• Design template
• 3D preview mockup