The same process that we??™ll use with Photoshop can
be used with alternative graphics programs such as Paint
Shop Pro or The GIMP.
Figure 5-1. The eight states of a
Button component
1. In Photoshop, create a new page. Set the size to be roughly the size of your button and set the
background to be transparent (Figure 5-2). Give it the name Button.
Figure 5-2. Create a new Photoshop file.
92
CHAPTER 5
In this file we will draw how we want the up state to appear. This image will have the look of the button
but not the text of the label that goes on top of it. We won??™t set the font here??”we??™ll do that
through CSS, which we??™ll add at the end.
To show how dramatic the change with skinning can be, the image that we have created is very different
from the standard look of Flex. In this case, it has a hand-drawn feel (Figure 5-3).
Figure 5-3. The up state of our button
This first image shows how the button will appear in the up state, or when the mouse is not on top of it.
2. Draw how you want your button??™s up state to look and save the image as a PNG-24 with the
name Button_upSkin.
The naming of the images is very important here. The format is ComponentName_skinPart. This will let
us automate the process of bringing the images into Flex Builder later. Note the capitalization.
3. Create a folder for the images called skinImages, and save the images to it.
We can now modify this Photoshop file to show what it will look like in its over state (when the mouse is
over the button but not ???pressing??? it).
Pages:
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81