How to Create a Batch of Product Templates for Onboarding

The purpose of this document is to outline the process to create a template that can be integrated with the MyStyle application so users may customize their own custom product design visually.  All three layers are used to create a customizable product that looks great; and, most importantly, realistic to the user.

General Guidelines:

  • All folder names and filenames should be lowercase, alpha-numeric (no special characters like @ or !, preferred no dash – or underscore _)
  • Each product’s images should be together in individual folders with unique folder names, but the same filenames inside the folder.  Ex:  product1/foreground.png, product1/background.png, product1/clipping.png. All need to be lowercase
  • All images for each product should be the same size and at print size.  So, if the print image is 3000px x 2000px, the background product image, the design area mask, and the optional foreground layers should all be 3000px x 2000px
  • All images for each product should line up perfectly.  So, if you were to put the design mask image on top of the background image, the white and black areas of mask would line up on top of the product image in the right position.
  • The print-size images should accommodate anywhere from 150dpi to 300dpi for good quality
  • The images that you or the manufacturer receive for each purchased product will come out at the max DPI possible, up to the full size of the print images provided.  So, if your product image is 3000px x 2000px, the output image for the order will also come out at exactly 3000px x 2000px.
  • JPGs can be used in SOME cases but PNG is always preferred.  Please contact us if PNG is not possible and otherwise provide all assets as PNG image format.
  • Print images for each order will be provided in the full rectangle size as the user’s design without the mask shape, foreground layer, or product image visible.
  • To check if your 2 or 3 main assets line up properly, drop them all into one photoshop or illustrator document as layers all aligned flush to the top left corner.  Adjust the transparency of the mask layer to see if it lines up with the product image perfectly. Every image should fit the overall size the same way flush to all edges.  1 or 2 pixels error is OK in most cases, but accuracy is always good for best results.

Step 1: Product Image / Background

The background image is the main image of the product the user will see when customizing.  Photo-real aesthetic quality is an important factor in how nice the product looks during the design process.  In other words, the closer this image looks like the actual product, the more realistic the product will look to the user (and the more likely they are to buy).

Info Example
  • Image Name: Background
  • Filename:  background.png (lowercase)
  • File Type: PNG
  • Size: At print size (ex: 3000px x 1400px)
  • Usage: Main image of the product the user sees live while customizing

Step 2: Design Area Mask

The foreground image, also referred to as the clipping mask, lets the MyStyle application know the actual customizable area of the product for the user to see and design within, and shows the user precisely where their design will be printed visually without showing more area than is printable.  The design / printable area should be solid white and all other areas outside of the customizable design area should black.  Edges may be anti-aliased around curves for a smoother look (where some pixels in the curve are partially grey instead of just solid or black) but otherwise all areas should be either solid white or solid black.  If you are using Photoshop or Illustrator anti-aliasing is automatic for paths and curves.

Info Example
  • Image Name: Clipping
  • File Name:  clipping.png (lowercase)
  • File Type: PNG
  • Size: Same exact size as Background image (at print size). All images should be same size.
  • Usage: Lets the MyStyle application know what area of the product is customizable
  • Instruction:  All customizable areas should be white.  All other areas outside of the design area should be black
  • Specifications: This needs to be the same exact size as the background image.  It will be placed on top of it to show the customizable area of the background image.

Step 3: Foreground / Shines & Shadows

The foreground image is most often used for shines & shadows on the product.  This layer is what can make the product look more realistic and 3D.  This can include any reflections, drop shadows, etching, logo, etc.  The foreground layer floats in front of the user’s design so that as they choose colors or add images the effect is still visible.

Typically this layer is only used for areas within the design area, as shadows and shines outside of the design area are usually already visible in the background image, but in some cases the shadows and shines are more conveniently made for the whole product image, depending on the product and your approach to the graphical assets.  Do whatever is easier for you here.

This layer won’t be included in the print ready output image, but will be visible to the user while customizing for additional realism.  This layer is optional and not necessary for very simple products with perfectly flat fronts.

Info Example
  • Image Name: Shines & Shadows
  • File Type: PNG
  • File Name: foreground.png (lowercase)
  • Size: Same size as background & foreground image
  • Usage: adds shines and shadows to the image in the customizer
  • Specifications: This needs to be the same exact size as the background & foreground image.  It will be placed on top of it.
  • Example (right) is a transparent foreground shines and shadows layer that shows the edges around the logo and camera holes, and also shows the relief of the otterbox logo which is on this particular product.
  • This is shown on a green background for example purposes only to make this image more visible.

Product Personalization and Customization Solutions