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.
- 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).
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.
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.