Creating a website from Photoshop to CSS code
Image 1 of 10
Layers dialog box
Layers dialog box
ntFirst, 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.
Slice tool
Slice tool
ntMake the slices.
Slices
Slices
ntUsing 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.
Slice Select Tool
Slice Select Tool
Name the slice
Name the slice
ntWhen you double-click over the first slice for the header, a dialog box opens. Add the name for the slice, in this case Header.
Save slices
Save slices
ntOnce 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.
Creating a fourth slice
Creating a fourth slice
ntSince 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
ntThen 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.
Body background layer
Body background layer
ntAs 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.
The Photoshop design as rendered in code
The Photoshop design as rendered in code
ntHere is what the modified CSS code looks like in Firefox.
Final view of design as rendered in Firefox
Final view of design as rendered in Firefox
