Elements that are released at MiriCanvas should be created with these guidelines.
Illustration format setting condition
| SVG | PNG |
| Vector sources(EPS, AI) less than 150KB shall be saved in SVG format. | Vector sources larger than 100KB or Bitmap (JPG/PNG/PSD) shall be saved in PNG. |
How to make an SVG element
SVG is a vector element and can be made by Adobe Illustrator.
Line elements must be changed to 'plane,' and entire elements shall consist of the only plane.
1) Create the new document in Adobe Illustrator.
2500 x 2500px / RGB / 72dpi
2) Create the vector element in Artboard.
3) Resize Artboards to fit the source in [object > Artboard > Fit to Artwork Bounds] of
Illustrator Menu.
4) Apply Grouping after choosing entire elements in the layer.
* Warning
All similar colors within the SVG element must be uniform in one color.
5) Select CSS properties as presentation properties and click OK.
* Tip for Adjusting Colors
When registering SVG elements in MiriCanvas, you must set the color to allow the user to
customize them.
The above operations are called color adjustment.
1) Set the condition of black(#000000) in Shadow area, white(#FFFFFF) in Highlight area
and adjust the Opacity.
2) Apply Grouping after choosing entire elements in the layer.
Cautions when you make SVG element
1) Character SVG elements should allow for changing skin color.
2) The light and shade(#000000) and brightness(#FFFFFF) parts that have previously
been set must be color locked so that the color cannot be changed.
3) SVG elements are recommended to use up to 5 colors.
4) Please refrain from using white (#FFFFFF) and #353840 colors.
#FFFFFF color, #353840, is the same as the background color of the MiriCanvas editor
, so the shape in the element list is not be seen.
* Tip for removing crack of SVG element
When creating SVG elements, solid lines (=cracks) may be visible at the border of the colors.
example)
1) Select an entire object and copy it to another layer.
2) Make one object by compiling Pathfinder.
3) Put plane elements under the visible cracked part.
4) Check the remaining cracks on the MiriCanvas editor after setting Background > black.How to make PNG element
PNG is a bitmap element and can be made by Adobe Photoshop.
1) Create new documents in Adobe Photoshop.
Set 9800 x 9800px / RGB / 120dpi / Transparent
2) Create an element on the new document, or copy and paste an element that you create
in Adobe Illustrator.
Paste option: select Smart Object
3) Use the Crop tool to Adjust the artboard size with an element.
4) Select File > Save As > PNG format, and Save.
Select the Smallest / Slow & None option.
Precautions for creating PNG element
1) Please refrain from using white (#FFFFFF) and #353840 colors.
#FFFFFF color, #353840, is the same as the background color of the MiriCanvas editor
, so the shape in the element list is not be seen.
2) Set Lightness between -5 and -3