Layer text and images on background layers with code
In Photoshop we will make several slices of the main content background section starting with separating the header section from the body, and then the footer section. The body background will be a separate division and we will eventually create divisions with <div> tags in the coding to piece it all back together.
Remember, you want to organize your layout in such a way that you can put them into defined divisions in rows, columns, blocks, or tiles so that they can be rendered in coding. The text and images in the PSD layout are added on top of the background layers and can be placed easily with styling code. It is the background elements that will need to be sliced, and before making the slices, I will copy the Body Background layer wood grain and save it as a separate gif file named WoodGrainBg.gif. (All the images and slices are included in the download.) For the full tutorial, see "Backgrounds in web design: Going from PSD to code."
First, 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.
Make the slices.
Using 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
Name the slice
When you double-click over the first slice for the header, a dialog box opens. Add the name for the slice, in this case Header.
Once 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
Since 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.
Then 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
As 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
Here is what the modified CSS code looks like in Firefox.
Comment and share: Creating a website from Photoshop to CSS code
By Selena Frye
Selena has been at TechRepublic since 2002. She is currently a Senior Editor with a background in technical writing, editing, and research. She edits Data Center, Linux and Open Source, Apple in the Enterprise, The Enterprise Cloud, Web Designer, and...