The Dynamic Image Application
- Overview of the Dynamic Image API
- Quick start
- Application Settings
- Creating mockups
- Imposition Tutorial
API Overview
API Reference
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
-
Create a new PSD file.
-
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
, andResolution
only determine whether the physical size of the mockup matches the design, and these values may differ depending on the product. - If your design is in the
-
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:
- Place the design on the mockup as you want it to appear in the editor.
- Set units to
Points
: Edit > Preferences > Units & Rulers > Type. - Enable the transform mode for the design layer: Edit > Free Transform (
Ctrl
+T
). - Click Window > Info (
F8
) and write down theX
andY
coordinates to add them to the product configuration later.
-
Delete the design layer and save the mockup in the format corresponding to the
Up
orDown
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. ForDown
mockups, use JPG for raster images and SVG for vector images.
Dynamic Mockups
-
Create a mockup using the same method as a
Static Mockup
by following steps 1-3. -
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. -
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).
-
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.
-
If you use a real product image, you can make the color layer realistic as well. There are two ways to achieve this:
-
Apply the Blending Mode to the vector layer: either
Multiply
orLinear Burn
. -
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
orLinear 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 aDown
mockup as a Preview Mockup. -
-
Delete the design layer and save the mockup in the PSD format.