Chapter 18 — Creating Themes Keep in mind that there is no correct way to lay out images; you can simply choose the method that works best for you. As long as the code you write is valid CSS and points to valid images, it will work properly.
Layered Images The easiest way for me to align all the different image states was to put each state on a separate layer. That way, I could manipulate each layer individually. Another method that might prove helpful is the use of gridlines. I use Jasc Paint Shop Pro to edit images while creating themes. To overlay the default theme’s images, open browser\toolbar.png, as shown in Figure 18-9.
FIGURE 18-9: Paint Shop Pro
Because the default theme uses 24 × 24 pixel images for large icons, you need to have your images the same size. Open up the image that you would like to use for the Back button and then copy the image by pressing Ctrl+C, or selecting Edit ➪ Copy. To paste your image as a new layer, press Ctrl+L or select Edit ➪ Paste ➪ Paste As New Layer. You can then select the new layer in the layer properties window (it will be called Raster 2), and use the Move tool to drag your icon over to where the Back button resides in the default icon set. Once you complete that step, your display will look similar to Figure 18-10. The Back button on layer 2 is the Back button from the Smoke theme.
391