Other Programs You Will Need

The other programs you'll need for skin creation depends on how far you plan to take your skinning. Are you going to be satisfied with editing existing skins (those you download), or do you want to build skins from the ground up?

Each of the skin editors provides tools that enable you to edit different elements of the GUI. For example, Figure 7.5 shows the selection of the Windows title bar bitmap. This bitmap can then be edited, in terms of colors and margins, directly in the skin editor.

Figure 7.5. SkinStudio provides some capabilities related to editing a GUI bitmap, such as the Windows title bar.

A skin editor provides easy access to the various bitmap pictures that make up the elements of the Windows GUI. To edit (to any great degree) or replace these bitmap images, you need additional software.

Two categories of software necessary for creating more advanced skins are drawing software and image/graphics editors. Let's take a look at each of these categories and some examples of each software type.

Drawing Software

You can choose from a variety of software drawing programs. Microsoft Paint, which ships with Windows, provides a simple tool for drawing and modifying existing images. Although this painting program doesn't offer a ton of options for drawing (in terms of fine-tuning or altering), it can be used as a way to draw the various 3D objects that make up the Windows visual style elements, and it can be used to modify existing objects.

For example, in SkinStudio, you can right-click the title bar shown in the sample window and then edit that bitmap in a drawing or image editing software package. Figure 7.6 shows the MS Paint program window and the classic_top.bmp, which is the default for the visual style I am working on in SkinStudio.

Figure 7.6. Bitmap pictures of each element of the Windows interface can be edited.

Notice that the bitmap that represents the title bar, or the top of the window, is shown twice in the bitmap I opened in Paint. Most elements of the interface exist in a number of different states. For example, in the case of a window, the title bar can be active or inactive. So, the bitmaps that make up the visualizations of the various elements in a visual style consist of individual images of an object in all its states. We will talk more about object states later in this chapter.

In Paint, the active title bar and the inactive title bar are showing in the open bitmap. Now I can edit this bitmap and save it. The edited and saved version will be used by the visual style I am creating in SkinStudio (or other skin editor). My choices are somewhat limited in Paint: I can select the images and then invert the colors, or I can use the fill, airbrush, or other tools to edit the bitmap (basically by drawing on it).

You will find that Paint is fairly limited, particularly if you want to create your own bitmap pictures to use in your visual styles and skins. A higher-level drawing tool such as Macromedia FreeHand might be needed if you plan on radically redesigning the interface objects. Figure 7.7 shows the normal Start button bitmap (only one of the possible states of the Start button; we discuss object states later in the chapter) and an alternative Start menu button that I am creating.

Figure 7.7. Visual style objects can be created in a drawing application such as FreeHand.

In terms of cost and functionality, Microsoft Paint and Macromedia FreeHand are pretty much at opposite ends of the spectrum. However, there are a number of other drawing software packages with a range of functionality (and cost). Examples are Adobe Illustrator, Paint Shop Pro, and even some freeware products such as Jans Painter 25 (check out www.jansfreeware.com for more information).

Note

Using the default objects (the bitmap that represents the object) as a starting place for designing a new skin is a good idea. It provides you with some guidelines related to shape, size, color usage, and the other design elements that make up a particular object. You don't have to create a copy of the original; you can be as creative as you like. But understanding how the default objects, such as the Start button, have been designed is a good first step as you design your own unique objects.

If you are going to create skins, it is really worth your while to play around with some of the available drawing programs. You will find that most offer trial or shareware versions.

Image Editing Software

Another software tool you will need if you are going to create skins is image editing software. As with drawing software, products vary in terms of both cost and functionality.

Probably the best of the image editors is Adobe Photoshop (see Figure 7.8). Photoshop allows you to select areas by color and provides an array of tools for editing bitmaps, photos, and pretty much any graphics file.

Figure 7.8. Photoshop is the heavyweight in the image editor class.

Note

Drawing software such as Adobe Illustrator provides specific tools for actually drawing and rendering items from scratch. This contrasts with image editing software such as Photoshop, which is designed to take existing images and enhance them.

However, the full-blown version of Photoshop can be a little pricey. You might find that you can get by with one of the other image editors. For example, Microsoft Picture It! is often bundled with other software on a new PC. So, you might already have access to an image editor that is adequate to the task.

Again, take a look at the demo and shareware versions of some of the image and photo editors and use them in conjunction with StyleBuilder or SkinStudio. This is the best way to determine whether the image editor has the features you like to use as you customize the various objects in a particular visual style.