Preparing your images
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.
You will need high resolution photos of your product.
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.
You need one photo for each view you want to show. We recommend 1 to 5 views.
In Photoshop, load all of your images into the same workfile using the Load Files into Stack script.
File > Scripts > Load Files into Stack...
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
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.
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.
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
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
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
