For a horizontally tiling section, such as the background gradient, flatten the image, copy a narrow section (here, down to the point where the gradient becomes a solid colour) and in the Save for Web & Devices dialog save it as a lossless GIF or PNG. Note the hex value (in the Info panel) of the solid background colour, since that will be used in CSS.
For images with a border in the layout document, export the images as JPEGs, and without their borders. (If you keep the borders on while making the JPEGs, they’ll look muddy. Adding the borders later in CSS means you’ll get crisp, solid results.) One other tip, to balance file size and quality, a quality setting of 60 is a good starting point.
This step’s a doosie: build the web page! To help you along, the web page based on this layout is on the CD, so you can play around with it. Use web standards (divs for structure, CSS for styles), and don’t be precious about replicating the layout exactly, nor in getting identical results across browsers and platforms – be happy with similar.
To retain a tight vertical grid, temporarily replace your site’s background in CSS with a grid tile, as shown. This will show whether things are lining up and any adjustments that need to be made. In grids.css from the CD files, uncomment the second ‘background’ property within the ‘body’ rule to see the grid.
Who: Craig is a writer and designer. He has contributed to various tech and gaming publications, has written several books on web design, and designed more websites than you can shake a stick at. In his spare time, he often writes music (and publishes it on projectnoise.co.uk)
Software: Adobe Photoshop CS4, A text editor and a Web browser
Time to complete: 30 mins
On the CD or download: Files for this tutorial can be found on the cover CD or downloaded here