Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 132

Figure 7-16. The buttons in the PSD with slices
Save for the Web (command + option + shift + S or “Save for Web…” in the File menu). Save the two button slices
as PNG files. Name them whatever you want because you'll be combining them into a different image in the next step.
To be ready for the presenter view, do the same thing for the answer button and its hover state by drawing slices
that are 78 px wide by 88 px high (see Figure 7-17 ).
Figure 7-17. The answer buttons in the PSD with slices
Next, create a new PSD at 154 px wide by 176 px tall. Set the background to the light color #FBF7E7 .
Place the four PNGs you just created into the document, placing the “off ” vote button at the top left, the “on” vote
button at the bottom left, the “off ” answer button at the top right, and the “on” answer button at the bottom right
(see Figure 7-18 ).