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

Figure 7-15. The partially complete layout for the questions page
Slicing PSDs and Creating Sprites
With the layout mostly complete, we need to get the images for the buttons into the site. This will require slicing the
PSD and creating a sprite, which is a large image made up of smaller images. Sprites are used to reduce the number of
requests and the overall download size of a site.
Open the PSD in Photoshop in the attendee question view and grab the Slice tool. Draw a slice that's 76 px by
76 px around the vote up button. Make sure it is centered horizontally and vertically.
On the second vote up button, go into the layers styles on the dark circle shape and add a color overlay using our
highlight color, #E06F00 . This will be the hover and active state for the button.
Draw another slice on top of that button at 76 px by 76 px (see Figure 7-16 ).