Use a bitmap canvas to create skin elements
This page will tell you how to create Calaméo skins using a image file, using any image editing software (e.g. Adobe Photoshop, the Gimp...)
Accepted formats are: PNG (recommended), JPG and GIF.
A bitmap canvas is one image file on which are all of the desired button states or other graphical elements. Knowing their position in the bitmap, you will be able to select it with the Calaméo Skins syntax. Here is a simple canvas example:
How to use it
The CSML code to extract an image is real simple:
<button action="zoom" tooltip="no" upState="mycanvas#0,0,35,35" overState="mycanvas#0,35,35,35" disabledState="mycanvas#0,70,35,35"></button>
Let's have a look at overState="mycanvas#0,0,35,35":
mycanvas refers to our bitmap file previously loaded by means of a media tag
The four coordinates are:
- abscissa (x-coordinate): distance between the left side of the canvas and your button
- ordinate (y-coordinate): distance between the top side of the canvas and your button
- width of the button
- height of the button
