\n\tFirst, turn off all the other layers in the PSD file with the exception of the Content Background layer, all the Button X layers, and the Text layers that name all the buttons. Keep them visible and active as shown in the Layers dialog box.
\n\tMake the slices.
\n\tUsing the Slice Tool, draw a box shape over the header area, then another box for the main body content area, and then one more for the footer area.
\n\tWhen you double-click over the first slice for the header, a dialog box opens. Add the name for the slice, in this case Header.
\n\tOnce the three slices are named, save the file by going to the menu path File | Save For Web | Save, or (Alt+Shift_Ctrl_S). All the slices will be saved as separate images as here.
\n\tSince the food images overlap somewhat with the header and body backgrounds, we need to make that slice separate. Next ,we will hide those active layers and make the food image collage at the top left of the header and body sections visible, therefore creating a fourth slice for that section.
\n
\n\tThen we will name and save the slice as we did in the steps for the first three above. I named this slice Food Images. We now have four slices that will be used to build our main sections of the header, body, and footer portions of the layout.
\n\tAs you can see in the CSS, the body background layer is set to a light gray. I’ve added a 1px red border just for sake of visualizing the elements.
\n\tHere is what the modified CSS code looks like in Firefox.
Selena Frye is a former Senior Editor for TechRepublic. Her background is in technical writing, editing, and research. I edit the Data Center, Linux and Open Source, Apple in the Enterprise, and IT Security blogs.
