Make sure that the ruler is displaying pixels rather than inches. To change the ruler measurement
units, right-click/Control-click on the ruler on the top or the left side of the image and
select Pixels from the context menu that opens.
2. Drag out rules to define where the top, bottom, and sides of the button are by clicking on the
ruler bar and dragging a rule out into position on the button (Figure 5-13).
Figure 5-13. Our button in Photoshop with rulers defining Scale 9 areas
We do not have to do any slicing of this image into its sections??”we merely need to know where the
sections are. In this case, the left line is approximately 10 pixels in and the right is about 132. The top
is about 14 pixels down from the top, and the bottom is 52 pixels down from the top. You can read
these values off the rulers or, if you have the Info panel open in Photoshop, you can see the values for
the rulers there. It is admittedly a bit difficult to see the edges on such an organic and skewed button,
but the trick is to make sure that no part of the lines are inside the center box. The scaling of the lines
in the wrong directions creates the most dramatic pixelation.
Now that we know where these lines should be, we can use CSS to control the scaling.
99
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
3. Using the numbers that you pulled from using the rulers in Photoshop, add the CSS between
the brackets for the up state image, as shown in Figure 5-14.
Figure 5-14. CSS for Scale 9
Since all the states of the button use the same scale values, you only assign the values to the upSkin
property.
Pages:
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85