Tutorial: Customize using a bitmap file

This page describes how to create skins using a bitmap file. You can create and customize the skins using any image editing tool.

How It Works

You use an image editing tool to create a bitmap file. All graphics in this bitmap file can then be used to customize the visual components in the viewer, by entering pixel coordinates into the XML file.

If you don't have Adobe Photoshop or a similar image editing tools installed, a good and free alternative is GIMP.

Skin canvas

All skin graphics must be placed onto a single canvas, and saved as a PNG, JPG or GIF file. The skins are then later referenced in the XML file using their co-ordinates on this canvas.

Seen above is what a simple canvas could look like. This one contains the assets for some buttons in their different states, and a blue area used as the background. It's very simple; what you put on the bitmap is what you get.

You can download the Basic Blue Canvas theme. It contains all the files needed to edit and create a skin library using the blue bitmap seen above as a reference.

A canvas file is similar to any other bitmap asset found online, and the same rules apply:

XML

The layout of the viewer is controlled by an XML file usually called layout.xml. Skins from the exported image can be used in the viewer by referencing them by their co-ordinates.

The button and the needed co-ordinates for the button seen above would look something like this in the XML code:

...

<skin source="skins.png" type="image"/>

<button action="pageNext" upState="#100,50,200,100" overState="#200,50,300,100"
 downState="#300,50,400,100" disabledState="#400,50,500,100"/>

...

The skin element imports the image as a skin library into the viewer. The skin attributes, such as upState, overState, etc., can then be pointed to co-ordinates within the image canvas. Co-ordinates are specified in the order left, top, right, and bottom. So, if the value of a skin attribute is #0,0,100,50 for example, then it refers to the part of the canvas starting at co-ordinate 0,0 at the top-left and ending at co-ordinate 100,50 at the bottom-right.

You can use image skins in combination with SWF skins, so long as the image skins are imported first.

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#111111"
  backgroundImage="#Background" backgroundRepeat="repeat">

 <skin source="skins.png" type="image"/> <!-- import images first -->
 <skin source="skins.swf"/>

 <button action="index" upState="#100,50,200,10" overState="#200,50,300,100"
   downState="#300,50,400,100" disabledState="#400,50,500,100"/>

 ...

</viewer>

That's it

A great way to start of is by looking at some of the many sample themes.

 

 

Overview