The resource need make by a standard for work correctly on product designer app. So, this article help you know how to create products image, artworks, fonts… standard. Also, You can download resources standard from us for setup at here.
Product images #
You can download example images from here -> unzip and open by photoshop for check and following my note:
- Image type supported PNG (Because setup product need use transparent area)
- Need setup image is square with size 800x800px to 1200x1200px (If you setup smaller, your preview can be low resolution. But if you setup size bigger, Your site can be working slow)
- Create base layer with area design is white (or any color) and other area is transparent for setup background (Background will change color by area design of base layer)
- Create mask layer transparent with shadown and highlight of product for allow preview like real product image
- Sort layers correct when setup
- All layers need setup same size (Ex: 1000x1000px). So, when add new layer on editor. It will fit correct with position
- No limit layers. You can create many layers for one product like what do you want allow customer edit (Ex allow customer change color for each element)
- Create image fully for setup thumbnail (JPG)
If your image is standard. You can setup product design is beatifully and correct for Product Designer App work.
Artworks #
You can download artwork SVG standard by us from here. We supported basic image type for upload (SVG, PNG, JPG):
Bitmap image (PNG, JPG) #
Please following my note for bitmap image:
- Create image high resolution
- Crop all border, outside area and keep only image area for use
- Use PNG image for keep area transparent
- Make image size enought with design and not redundant to help high performance
Vector image (SVG) #
Please following my note for SVG image:
- Resize SVG to 800x800px (Recomment. Because some svg is very small and not enought resolution)
- Remove all hidden tag in SVG image (Because it can distort the image or may not be used as svg)
- Remove empty tag
- SVG standard is SVG export by illustrator, correl draw
- Keep all style by attributes for allow customer change colors (Product designer app allow change color of svg element by attribute tag inside SVG)
Fonts #
You can download fonts standard by us from here. Please following my note for fonts:
- Font type .ttf (TrueType font)
- Check font correct all charactors
- Font file size smaller than 3MB (Recomment)