Preparing your images

Create the product images you will need to generate your customizer.

Requirements

You will need Adobe Photoshop or another photo editing software such as Gimp to create your product assets. This guide is based on Photoshop CC.

Product photos

Resolution

You will need high resolution photos of your product.

Color

If you are planning to apply colors dynamically over your product. A lightly colored product usually works better. Avoid black or dark colors if possible.

Views

You need one photo for each view you want to show. We recommend 1 to 5 views.

3 views of a high-heeled shoe

Preparing your workfile

Loading your images

In Photoshop, load all of your images into the same workfile using the Load Files into Stack script.

File > Scripts > Load Files into Stack...

Resizing your images

From one view to the other, your images need to have the same size relative to each other. If a view is larger than the others, make sure to resize it using the Scale tool.

Edit > Transform > Scale

Aligning your images

To avoid a β€œshifting” effect when switching between views, you need to make sure all of your images are aligned vertically and horizontally. To do so, select the Move tool, select all of your layers, then click on Align horizontal centers and Align vertical centers.

Editing your canvas size

Once all of your images are properly sized and aligned, use the Crop tool to trim the edges of your image. Make sure to leave an even border of about 20 to 40 pixels all around your product.

Cutting out your product in multiple parts

A quick reminder on Photoshop masks: black hides, white shows, 50% grey = 50% opacity.

  • Use pen tool to create paths. Start by tracing the outside shape of the product, then proceed to cut out your product, part by part.

  • Use as few points as possible to facilitate modification of your path if needed.

  • Save and name your paths.

  • Make sure your paths are precisely at the intersection of two colors or zones.

  • Adjust points positions if needed.

  • Convert path to selection (anti-aliased).

  • Create a mask using your selection. Fill the mask with white or black depending on what needs to be hidden or shown.

Screen recording : Removing the background​

Screen recording : Cutting out parts of the product

Making your parts white

If you plan to apply colors dynamically on your product, you will need to make your product parts look white.

  • Select the layer containing the part you want to make white.

  • Desaturate it.

Image > Adjustments > Desaturate
  • Use the levels to adjust brightness, contrast, and tonal range of your part.

Image > Adjustments > Levels

Screen recording : Making your parts look white​

Saving your images

You are done! Time to save your images.

Your images must be saved in transparent png format (PNG-24). They must be optimized for the web (72 dpi). All your images must have the same size. The recommended image size is 1200 x 1200 px.

Saving larger image could affect the performance of your customizer, especially on mobile devices. To speed up your customizer even more, consider compressing your png files with TinyPNG.

Make sure to name your files clearly, this will help you later when you create your product in MyCustomizer. For example : productname_view1_partname.png

Example