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 mug, phone case, etc. In this case the solution is not so obvious as combining a simple product mockup with a design. Actually, there are several approaches to solving the problem that we are going to dwell on below.

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:

PSD template loaded to the web-to-print designer.

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

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

PSD template loaded to the web-to-print designer.

However, it is a problem to use such model dynamically in a 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 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 create 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 true 3D model but good enough to give a user an idea of how a personalized product will look like.

PSD template loaded to the web-to-print designer.

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

PSD template loaded to the web-to-print designer.

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

Create 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 Blank Mockup

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

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

PSD template loaded to the web-to-print designer.

Create Preview Mockup

To create a preview mockup, we apply a non-linear transformation to Smart Object.

The trick here is that the warp transformation and vector mask do not really change the image. Transformation settings and 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.

    PSD template loaded to the web-to-print designer.

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

    PSD template loaded to the web-to-print designer.

  3. The layer should be marked with a Smart Object icon:

    PSD template loaded to the web-to-print designer.

  4. Emulate the non-linear surface as follows:
  5. Switch the layer into a warp mode (Edit -> Transform -> Warp).
  6. Select the Custom warp type.
  7. Manually adjust surface control points.
  8. Confirm the warping when you are all set.
  9. PSD template loaded to the web-to-print designer.

  10. Cut the "invisible" part of a design with a vector mask:

    PSD template loaded to the web-to-print designer.

  11. Add the <DPH> marker to the design layer name.
  12. To generate image previews from different angles, as if a mug is observed from several points of view, we create three preview mockups using the algorithm described above.

Displaying 3D Preview

Now when we created the blank mockup and the preview mockups let us configure the mug product:

JavaScript
productDefinition = {
    surfaces: [
        {
            printAreas: [{ designFile: "mug_truck_design" }],
            mockup: {
                //down mockup is a mockup that lays under a design
                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:

PSD template loaded to the web-to-print designer.

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

PSD template loaded to the web-to-print designer.

The following code displays three proof images on a page:

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

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

JavaScript
var previewElements = $("#approvePage .previewImg").attr("src", "");
//total number of proof images
var imgNum = 0;
//approveData contains the data returned by the editor.getProofImages
//for each surface in the product
for (var i = 0; i < approveData.proofImageUrls.length && imgNum < previewElements.length; i++) {
    //for 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++;
    }
}

See Also

Manual