The Dynamic Image Application

• Overview of the Dynamic Image API
• Quick start
• Application Settings
• Creating mockups
  • Canvas mockups
  • Preview mockups

API Overview

• Rendering of PSD templates
• Personalization
• Image library manipulations
• Font manipulations

API Reference

• Dynamic Image API

1. Support
2. The Dynamic Image API

Canvas Mockups

You can create the Up and Down canvas mockups in the same way. The Dynamic Image API allows you to use them as static or dynamically changed images:

• Static Mockups can be used as is and can only be changed by replacing one file with another.
• Dynamic Mockups allow you to change their layers through the API.

For example, if your product allows the option to choose a color, you can create one Dynamic mockup with a special layer and change the layer color according to the selected color instead of creating many mockups with different colors.

Now, let's look at how you can create mockups in Adobe Photoshop.

Static Mockups

1. Create a new PSD file.

2. Adjust the physical size of the mockup to the size of the design, so that these images look the same in the editor as the product will look in reality.

   To define the mockup size, you can use the size of the real product plus a margin. In Photoshop, navigate to Image > Image Size and change the Resolution or Width & Height with the Resample option disabled.

   After that, you can verify whether the mockup size matches the size of the design:

   • If your design is in the PSD format, just drag this PSD file into the PSD file with the mockup.
   • If your design is in the IDML format, export it to PDF with the bleed zones saved, if any. You can perform this in Adobe InDesign through File > Adobe PDF Presets > High Quality Print > Save > Marks and Bleeds > Use Document Bleed Settings > Export. Then, you can drag this PDF file into the PSD file with the mockup.

   The result should look as follows:

   

   NOTE: Only the size in pixels affects the quality of the mockup image on the screen. Width, Height, and Resolution only determine whether the physical size of the mockup matches the design, and these values may differ depending on the product.

3. Get the coordinates of the design location on the mockup. These coordinates are required for configuring the product in configuration files. To get the coordinates:

   1. Place the design on the mockup as you want it to appear in the editor.
   2. Set units to Points: Edit > Preferences > Units & Rulers > Type.
   3. Enable the transform mode for the design layer: Edit > Free Transform (Ctrl + T).
   4. Click Window > Info (F8) and write down the X and Y coordinates to add them to the product configuration later.

   

4. Delete the design layer and save the mockup in the format corresponding to the Up or Down mockup type.

   NOTE: After selecting the file format, you can optimize the file size of the mockup. For Up mockups, it's recommended to use PNG for raster images and SVG for vector images. For Down mockups, use JPG for raster images and SVG for vector images.

Dynamic Mockups

1. Create a mockup using the same method as a Static Mockup by following steps 1-3.

2. Add a vector layer by using the Pen Tool. You must outline the part of the product that needs to be recolored.

   IMPORTANT: Before creating a vector layer, make sure that the Pen Tool is in the Shape mode.

   

3. Define a unique name for the layer. This name will be used in the product configuration for dynamically recoloring the layer.

   NOTE: If the product has two or more colors, then you need to create a separate vector layer for each color and define different names for these layers (for example, Color-1, Color-2, and so on).

4. Set the white color to the vector layer or leave it as is if it's already white. This layer color will not play any role in Customer's Canvas because the editor will automatically change it to the predefined color from the product option. However, white will make the file size smaller.

5. If you use a real product image, you can make the color layer realistic as well. There are two ways to achieve this:

   1. Apply the Blending Mode to the vector layer: either Multiply or Linear Burn.

   2. Apply the Blending Mode to the product layer:

      • When you need to change the color of the entire product, you can duplicate the layer with the product image (without its background and shadow, if any), place it above the vector layer, and apply the Blending Mode to the duplicated layer: either Multiply or Linear Burn.

      • When you need to change the color of a product part, you can select the outline of the vector layer (Hold down Ctrl while clicking the right mouse button on the layer in the layer list. As an alternative, you can select the Direct Selection Tool, click the vector layer in the layer list, open the Path tab, and click Load path as a selection):

        

        Next, select the layer with the product image, click the selected area on the product image, and select Layer Via Copy:

        

   NOTE: The second approach is more preferable since you can create Preview Mockups in the same way. You can also use the PSD file with a Down mockup as a Preview Mockup.

6. Delete the design layer and save the mockup in the PSD format.