Chattini Studio

Creating Chattini

For each element you can select on of the presets from the dropdown menu. Or select "Custom" to enable the text field and enter your own SVG path. 'S' selects the color for the stroke and 'F' selects the color for the fill. 'X' and 'Y' allow the position to be adjusted (positive-x is right, positive-y is down). For elements that appear on both sides of the face, check 'L/R' to use the same on each side.

Special cases: The 'Mir' checkbox for the 'Tail' switches it from left to right. The 'X','Y' adjustments for the spots move are relative to the center of the face.

Additional detail can be added by drawing over the rendered image. Select a tool and color from the toolbox at the right. Adjust the width using the slider or input box below.

Palette left or right click a color swatch on the palette to select it. Click the buttons above to the palette to change the color.

Pencil (shortcut 'b') hold left or right button to draw with the selected color.

Erase (shortcut 'e') erase any drawing (leaving the original Chattino behind).

Line (shortcut 'l') hold left or right button to draw a straight line with the selected color. Hold control to force the line to a vertical, horizontal or 45-degree angle.

Freehand Shape (shortcut 'd') hold left or right button to draw the outline of a shape. When the button is released, it will be filled with the background color. If left button was pressed, it will also be outlined with the foreground color. Hold control to connect the start and end points of the line.

Rectangle/Ellipse (shortcut 'u'/'U') draw the outline of a rectangle or ellipse. Left or right button selects the color to be used. Hold control to force a square or circle.

Solid Rectangle/Ellipse (shortcut 'u'/'U') draw a filled rectangle or ellipse. Left or right button selects if the outline should also be drawn. Hold control to force a square or circle.

Eyedropper (shortcut 'i') press left or right button to select a color from the image. This will replace the selected color in the palette.

Width select the width of the pencil, eraser, and lines drawn. Widths larger than the slider specifies can be entered manually.

Layer determine where to draw. Background will draw behind the Chattino. Overlay will draw over the Chattino, but not disturb the outline. Foreground will draw on top of everything.

Clip clip drawing to the canvas over specific parts of the Chattino.

Undo/Redo (shortcut 'Ctrl+z'/'Ctrl+y') undo or redo the last change.

Clear clear the selected layer and clip area.

PNG download the Chattino as a PNG image.

SVG download the Chattino as an SVG image.

Custom Paths

Note: for small ad hoc changes, it may be easier to remove the element and use the 'Freehand Shape' tool to draw a replacement.

Any element can accept a custom SVG path to draw. For elements with a 'Mir' option, you only need to draw the left side and the path will be duplicated to complete the image. The path parser is not perfect; circular arcs and minified paths are not fully supported.

An SVG template is available to work from. If you use Just Pathable Vectors, the SVG will load with layers for each element. Create a new layer (the '+' button after the 'Layers' heading) or update the layer for the element you wish to customize. From the layer menu, select 'Copy Path to Clipboard' and paste into the text box.

Special Elements

For the 'Spots' element, the left and right paths will be rotated 45 degrees and centered at (-11,-44). Custom shapes should be drawn upright and centered at (0,-51).

For the 'Mouth' element, the first path will not be filled. E.g. the 'Open' preset draws the upper lip with the first path and the open mouth with the second.

For the 'Eye' element, the path will be clipped to under the eyebrow automatically. For the 'Eye Accent' element, the path will be clipped to inside the eye automatically.

Acknowledgements

Characters belong to COVER Corp and associated talents; used under a permissive policy for derivative works.