Product Image Standards #

Product images are the visual foundation of every customizable product in Product Designer App. Preparing images correctly helps the product load faster, display clearly, support color customization, and produce a more realistic preview in the Design Studio.

This guide explains the recommended image size, supported formats, layer structure, transparency requirements, and best practices for preparing product images.

You can download sample product images from our resource library, unzip them, and open the files in Photoshop to follow the structure and layer setup.

Recommended Image Size #

For most products, use square images with a width/height of approximately: 1000–1200 pixels

This size provides a good balance between image quality and performance.

Images in this range are usually:

• Clear enough for product previews
• Lightweight enough to load quickly
• Suitable for desktop and mobile devices
• Easier to manage than very large source images

Avoid uploading unnecessarily large images such as 3000–5000 pixels unless the product requires a highly detailed preview. Large files can increase loading time, browser memory usage, and overall Design Studio performance.

All images used for the same product view should have identical dimensions and alignment.

For example:

Front background: 1200 × 1200 px
Front mask & highlight:  1200 × 1200 px

Using the same canvas size ensures that all layers remain correctly aligned.

Supported Image Formats #

Product Designer App commonly uses PNG and JPG images for product setup.

The correct format depends on how product colors and image layers should work.

PNG Images #

PNG is the recommended format when transparency or dynamic color (and fixed color) customization is required.

Use PNG for:

• Transparent product backgrounds
• Dynamically colorable product shapes
• Design-area masks
• Highlights
• Shadows
• Texture overlays
• Transparent decorative elements

Transparent Colorable Background #

A transparent PNG can be used as the main product background when customers need to change the product color dynamically.

The visible product shape should normally use a solid neutral color, typically white.

For example:

• The shirt, mug, label, or product body is white.
• The surrounding area is transparent.
• The application replaces or blends the white product area with the selected color.
• Transparent pixels remain unchanged.

The colorable area can have any shape. It does not need to be rectangular.

The application determines the visible color area from the non-transparent part of the image. Therefore, only the intended product shape should contain visible pixels.

Important Transparency Rule #

Transparent areas do not change color.

For example, if a shirt image contains:

• A visible white shirt shape
• A transparent area around the shirt
• Transparent holes between the sleeves and body

Only the visible shirt shape is affected by the selected product color. The transparent background and transparent gaps remain unchanged.

Use clean edges and remove unwanted semi-transparent pixels around the product whenever possible.

JPG Images #

JPG can be used when each product color has its own complete product image.

This setup is suitable when:

• Product colors have different textures or details
• Dynamic recoloring does not produce realistic results
• Each color requires a separate photograph
• The background does not need transparency

With this method, each product color is connected to a corresponding JPG image.

For example:

White product  → product-white.jpg
Black product  → product-black.jpg
Red product    → product-red.jpg
Blue product   → product-blue.jpg

When the customer selects a color, Product Designer App displays the matching product image.

This method often provides the most realistic result because every color is prepared directly in the source image. However, it requires one image for every available product color.

Use consistent positioning, dimensions, lighting, and camera angle across all JPG images.

Background Layer #

The background layer is the main product image and must always remain at the bottom of the layer structure.

It may be:

• A transparent PNG used for dynamic color changes
• A JPG assigned to a specific product color
• A full product photograph
• A product base image with a predefined texture

The background layer defines the main appearance, position, and dimensions of the product.

When preparing the background:

• Center the product consistently
• Leave enough space around the product
• Avoid unnecessary empty canvas areas
• Keep the same dimensions for every product color
• Ensure all product views use a consistent visual scale

Design Area Mask #

A separate mask layer can be used when the customer’s design must only appear inside a specific part of the product.

Examples include:

• The printable front area of a T-shirt
• The label area of a bottle
• The printable surface of a mug
• A phone case panel
• A sign or frame insert
• A specific section of packaging

The mask should normally be prepared as a transparent PNG.

The visible part of the mask defines the area in which the customer’s design can appear. Transparent areas hide or exclude the design.

The mask image must:

• Have the same dimensions as the background image
• Use the same product position
• Align precisely with the printable area
• Contain transparency outside the intended region
• Have clean and accurate edges

A mask is especially useful when the design must appear behind product edges, seams, frames, folds, handles, or other foreground elements.

Highlight and Shadow Layers #

Highlight and shadow layers improve the realism of the product preview.

These layers can reproduce:

• Fabric folds
• Wrinkles
• Reflections
• Gloss
• Light gradients
• Surface texture
• Product edges
• Natural shadows
• Depth and volume

Highlight and shadow images should normally use PNG format with transparency.

Only the visible lighting, texture, or shadow details should remain in the image. All unused areas should be transparent.

A well-prepared highlight layer allows the customer’s design and selected product color to remain visible while preserving realistic lighting and surface details.

For example, a T-shirt highlight layer may contain:

• Soft shadows around folds
• Bright areas on raised fabric
• Wrinkle details
• Collar and sleeve shading

The product color and customer design remain underneath these details, producing a more realistic final preview.

Recommended Layer Order #

The image layers must be arranged in the correct order.

A typical product view should use the following structure:

Top
│
├── Highlight and shadow layer (Options - This layer makes the preview more realistic)
├── Design-area mask or clipping layer (Options - This layer will hide certain elements you want)
├── Customer design (text, image upload, artwork...) - This layer is design areas
└── Product background layer
│
Bottom

The exact structure may vary depending on the product, but the following rules should normally be maintained:

• The product background must remain at the bottom.
• The customer’s design must appear above the background.
• Mask and foreground layers must control how the design is displayed.
• Highlight and shadow layers must remain above the customer’s design.
• The highlight layer should normally be the highest visual layer.

Incorrect layer ordering can cause problems such as:

• The customer’s design appearing behind the product
• Highlights being hidden
• Product colors covering the design
• Masks not clipping the intended area
• Shadows appearing below the background
• Product edges looking unrealistic

Example Layer Structure #

A basic customizable shirt may use three images:

shirt-background.png
shirt-mask.png
shirt-highlight.png

Their purposes are:

shirt-background.png

The main product shape. It may contain a white colorable shirt with a transparent surrounding area.

shirt-mask.png

Defines the printable area and prevents the customer’s design from appearing outside the allowed section.

shirt-highlight.png

Contains transparent shadows, wrinkles, and lighting details. It remains above the customer’s design.

The final preview is rendered in this order:

shirt-highlight.png
shirt-mask.png
customer design
shirt-background.png

Depending on the mask configuration, the mask may be used as a clipping definition rather than displayed as a visible image.

Multiple Product Views #

Products may contain multiple views or sides, such as:

• Front
• Back
• Left
• Right
• Inside
• Outside

Each view should have its own complete set of required images.

For example:

front-background.png
front-mask.png
front-highlight.png

back-background.png
back-mask.png
back-highlight.png

All layers belonging to one view must have identical dimensions and alignment.

Different views may use different dimensions, but using a consistent canvas size across all views generally makes product setup easier.

Image Alignment #

Accurate alignment is essential.

Do not crop the background, mask, and highlight layers independently after exporting them. Even a small difference can cause the design, mask, or lighting layer to shift.

A recommended workflow is:

1. Create all layers in one Photoshop, Photopea, Affinity Photo, or similar source document.
2. Keep every layer on the same canvas.
3. Export each layer separately without changing the canvas dimensions.
4. Confirm that every exported image has the same width and height.
5. Upload the images and verify their alignment in Product Designer App.
6. Adjust the layer position only when necessary.

Image Optimization #

Before uploading product images:

• Remove unnecessary metadata
• Compress PNG and JPG files
• Avoid excessive image dimensions
• Use optimized PNG files for transparent layers

For JPG images, a quality setting of approximately 80–90% is usually sufficient for web previews.

For PNG files, use lossless optimization tools where possible.

Do not reduce quality so aggressively that product edges, textures, shadows, or transparent gradients become visibly damaged.

Common Problems #

Product image loads slowly #

Possible causes:

• Image dimensions are too large
• File size is too high
• Too many layers are loaded at once
• Images are not compressed
• CDN or server response is slow

Use optimized images around 1000–1200 pixels for normal product previews.

Product color does not change #

Possible causes:

• The image is a JPG instead of a colorable PNG
• The product area is transparent
• The visible product shape does not use the expected base color
• The color layer is placed below an opaque image
• The selected image-color relationship is not configured correctly

Verify that the product shape contains visible pixels, commonly white, and that only the surrounding area is transparent.

Transparent areas change incorrectly #

This may happen when semi-transparent pixels exist around the product edges.

Inspect the source image and remove unwanted pixels, color residue, or soft backgrounds.

Mask is misaligned #

Possible causes:

• The mask and background have different dimensions
• One image was cropped independently
• The mask was exported from a different canvas position
• Layer coordinates were changed during setup

Re-export all layers using the same source canvas.

Highlight covers the design #

Possible causes:

• The highlight image contains an opaque background
• The PNG was exported without transparency
• The highlight layer contains too much solid color
• The layer blend or opacity is incorrect

The highlight image should contain only lighting, texture, or shadow details with transparency elsewhere.

Product looks flat #

Add a transparent highlight and shadow layer containing realistic surface details such as folds, reflections, and shading.

Recommended Preparation Checklist #

Before creating the product, verify the following:

• Images are approximately 1000–1200 pixels
• All layers for the same view have identical dimensions
• PNG is used when transparency is required
• The colorable product area contains visible pixels
• Areas that should not change color are transparent
• JPG color images are prepared separately for every product color
• Design masks are transparent PNG files
• Highlight and shadow layers use transparency
• The background layer is placed at the bottom
• Highlight and shadow layers are placed at the top
• Product layers are accurately aligned
• Files are compressed and optimized
• Every product side has the required image set

Best Practices #

For most configurable products, the recommended setup is:

Background:
Transparent PNG with a white colorable product shape

Design area:
Configured using a separate transparent PNG mask

Customer design:
Displayed inside the design area

Highlight:
Transparent PNG containing shadows, wrinkles, or reflections

For products where each color has a unique texture or photograph, use:

One JPG image for each product color

Always test the completed product in the Design Studio by:

• Switching between all product colors
• Adding text and artwork
• Moving the design near the design-area edges
• Checking mask behavior
• Zooming in and out
• Reviewing all product views
• Testing on both desktop and mobile devices

Correctly prepared images create a faster, clearer, and more realistic customization experience while reducing setup and alignment problems.