Creating a website from Photoshop to CSS code

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."

Related: Backgrounds in Web Design: Creating a theme.

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...