By: Corrie Haffly

August 10th, 2005

Reader Rating: 9.5

Are you a CSS guru... but a layout and graphics newbie? Or are you a whiz at making great Websites using tables, but feel lost with this whole CSS thing? Perhaps you're a little bit of both… or are trying to be! You may have gone through lots of Photoshop or Fireworks tutorials, and pored over even more CSS tutorials, but how do you combine great graphics, layouts, and CSS to produce an outstanding Website?

Veerle Pieters put together an excellent series of tutorials [1] that combine both the graphics and CSS practicalities. Inspired by her work, this article will take you from a blank Photoshop canvas to a CSS-based Web page. From that point on, you just need to add your content!

Because of the current dearth of tutorials that take readers from concept to code, I'm going to go over three "flavors" of Web design. We'll start with the Clean and Crisp flavor, where almost all of the layout and design is achieved through a style sheet. Then, we'll move on to the Edgy Eye-Candy flavor, adding some shadow and gradient effects. Finally, I'll wrap up with the Curiously Strong Retro flavor. You can see the screenshots of the final results below:

The Crisp and Clean Flavor

The Edgy Eye-Candy Flavor

The Curiously Strong Retro Flavor

Just a few more notes before we get started: I'll be using Photoshop 7, although many of the techniques and effects can be duplicated in Fireworks and other graphics editors as well. Also, we'll be making client-presentable screenshots, complete with dummy text; if you're designing a site for yourself, you might choose to skip some steps of the design process. Finally, I've tried to write the Photoshop-specific sections simply, so that you don't need to be too familiar with Photoshop: please bear with me if you think the article starts out too basic! That said, you should have a basic knowledge of HTML and CSS to really get the most out of this tutorial -- or at least be prepared to learn some basic HTML and CSS as you're going through!

Download the .zip that contains the Photoshop, HTML, and CSS files [2] we'll use in this article. Feel free to use these for your own personal educational purposes.

The Clean and Crisp Flavor

Minimal graphics, fast-loading, sharp lines, boxes and borders: that's what the Clean and Crisp flavor is going to be about. Let's start by creating a screenshot in Photoshop (or your image editor of choice) with a new document that's 750x550 pixels (px) at 72 dpi.

I almost always start with the logo, as I can then draw colors and font styles from it. This fictional logo is in a pleasing shade of blue (#334392; you can select the Web color selector from the menu in the Color window) and uses the Bauhaus font for the top part, and Myriad for the bottom. I copy and paste the logo into Photoshop. To stay organized, I rename the layer "logo."

Tip: To rename layers in Photoshop, double-click on the layer name in the Layers Palette.

Here comes the brainstorming/sketching stage. I think I'll stick with a simple layout: a vertical navigation bar, a bordered content area (with a third column on the right of some pages), and a bordered footer area.

This is roughly what I'd sketch out on a piece of paper:

I'll start by drawing a gray box in Photoshop. After creating a new, blank layer named "vertical menu," I use the marquee tool to draw a rectangle:

Tip: To create a new layer, click the New Layer icon in the bottom of the Layers Palette.

To select a gray color, I click on the Color Picker (labeled by the red arrow below), then use the sliders and eyedropper to select a bluish tint of gray.

Then, I select the Paint Bucket tool and click inside the dotted area to create a gray rectangle.

The rectangle is a little bit dark for me, so I click on the Color Picker again, choose #EDEDED, and refill the rectangle.

Let's put a stroke of darker gray around this rectangle. In Photoshop, go to Layer > Layer Style > Stroke. Set the Size to 1, the Position to Inside, and the Color to a darker shade of gray (#A4A4A4).

With the same shade of gray, I'm going to draw the individual navigation button separators. I select the Pencil tool (hidden behind the Brush tool -- click and hold the Brush tool and then select the Pencil tool), create a new layer (called "divider"), set the brush diameter to 1px and draw a line to create my first navigation button:

Tip: To draw a straight line, click and hold to start your line, and then hold the Shift key to constrain the direction of the pencil line while you're drawing.

I'll duplicate the line and drag it downwards (instead of drawing each line individually). To duplicate layers, click on the "divider" layer in the Layers Palette and drag it, then drop it, on top of the New Layer icon. This creates a copy of the layer. After copying it, choose the Move Tool, hold Shift (to constrain the movement in a straight line), and drag the new layer down.

Remember that this is just a design screenshot idea, so there's no real need to be exact or precise with how far you drag it down -- unless you're designing this as a mockup for client review!

Repeat the duplication/moving steps to fill up the navigation bar. I like to keep my layers palette fairly clean, so I'll link all of the divider layers (so they all show a chain icon), and hit Ctrl-E to merge them (Layer > Merge Layers). Then, I create a new layer in between the "divider" and "vertical menu" layers (you can drag layers to reorder them) and use a darker blue-gray color (#6F6E7F) for a rectangle that acts as a left "border":

Finally, I'll make a small blue rectangle in the same blue as the logo (#334392) to show what a button might look like when you hover over it.

The rest of the design is simple: white rectangles, with strokes applied, for the content area and footer. If you want more of a finished look (e.g. for a client), you can add dummy text to the screenshot. I usually set the text to have no anti-aliasing so that it more closely resembles an online display.

Tip: With the text tool selected, click and drag to create a text area "box." This allows the text to word-wrap within the text area, and you can click on the handles to resize the text box.

Click to view larger screenshot in a new window [3].

Tip: I used the same stroke style as the menu box for the other boxes. In Photoshop, you can easily copy layer styles from one layer to another by clicking on the "f" icon of the style, and dragging/dropping it on top of the layer name. In some versions of Photoshop, you might have to hold down the Alt key as you drag and drop it.

Okay, so here's a confession -- realistically, this design is so simple that it probably would have been faster just to make the HTML and CSS pages and be done with it. However, if you're working on multiple design concepts for a client, you'd probably want to go ahead and build out the screenshot so that you have everything in one place. And for the purposes of this article, I wanted to cover basic things like making rectangles and stroke effects for those who didn't already know how to create them.

Saving the Logo Image

Before we get started with the HTML and CSS, I'm going to save a .gif of the logo image. This method, which I'll call "Crop 'n' Save", consists of duplicating the PSD, cropping, merging all unnecessary layers, and saving for Web. Here's the breakdown of the steps:

1. Go to Image > Duplicate. In the "As" field, I type "logo"; this will be the new file name.
2. Select the Crop tool, make a selection, then double-click in the selection to apply the crop. You can resize the selection by dragging on the handles. This is what I ended up with:

   

3. In the Layers palette, I link all of the layers except the logo layer to the Background, then hit Ctrl-E to Merge all the layers.

   

4. Finally, I save the file, and go to File > Save for Web and save it as a 16-color GIF.

How to Save for Web: In the Save for Web dialog box, select the GIF option in the right column dropdown. In the Colors dropdown, select the number of colors that seems to preserve the image quality while maintaining a fairly low file size (which you can see in the bottom left corner of the dialog box). For basic one- or two-color logos such as this image, 8- or 16-colors usually suffices.

The Basic Page Code

My very first step is to add the document type declaration for HTML 4.01 Strict to the very top of the page. This ensures that IE6 will act in "standards mode", as well as being good practice in general.

ccWeb/index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

After putting in the usual html, head, title and body tags, I add an @import for the style sheet. This allows the style sheet to be hidden from Netscape 4 -- Netscape 4's implementation of CSS is so poor that it's really better to hide the style sheet completely, lest it crash a user's browser.

ccWeb/index.htm (excerpt)

<html>
<head>
<title>Fictional Company</title>
<style type="text/css">
    @import "styles.css";
</style>
</head>
<body></body>
</html>

Now, I add a few basic <div>s to my page, all with the ID attribute set. When I'm first starting out, I put some simple placeholder text inside the divs just so I can see where they end up.

ccWeb/index.htm (excerpt)

<body>
 <div id="header">
   <div id="logo">logo</div>
   <div id="topmenu">top menu</div>
 </div>
 <div id="body">
<div id="leftcol">left column</div>
   <div id="centercol">center column</div>
   <div id="rightcol">right column</div>
 </div>
 <div id="footer">footer</div>
</body>

Now, I'm ready to make the style sheet...

The first step is to set the margins and padding to 0. I do this by specifying the margins and padding for both the html and body tag. This covers my bases in all browsers -- some versions of Opera apply margins to the html tag; most other browsers apply the margins or padding to the body tag.

ccWeb/styles.css

html { margin: 0px; }
body {
margin: 0px;
padding: 0px;
}

Then, I change the padding of the body tag to 10px, which allows me to have some space between the edges of the browser and the rest of the content. (If you're wondering why I bothered setting the margins to 0 when I was going to set the padding anyway, it's so that I can control the exact amount of space that I want around the design.)

ccWeb/styles.css

html { margin: 0px; }

body {
 margin: 0px;
 padding: 10px;
}

Next, I'll set the default font and font size for the entire page by adding a font definition to the body tag.

ccWeb/styles.css

html { margin: 0px; }

body {
 font: 0.7em Verdana, Arial, Helvetica, sans-serif;
 margin: 0px;
 padding: 10px;
}

In this next step, I'll set a height for the header, float the logo div to the left, and absolutely position the menu div from the top-right. (I'll also set some background colors so it's easier to preview.)

Tip: To find out dimensions of an area from your screenshot, use the marquee tool to select the area and look in the Info Palette. By doing this, I can see that the height of the header area is 73 pixels.

ccWeb/styles.css (excerpt)

#header {
 height: 73px;
 background: #fcf;
}

#logo {
 float: left;
 background: #ffc;
}

#topmenu {
 position: absolute;
 top: 30px;
 right: 20px;
 background: #ccf;
}

This is what it looks like so far:

Creating a Liquid, Three-column Layout

Now, for the body portion. For a liquid, three-column layout with a footer bar beneath, I'll use a technique developed at redmelon.net [4]. I find it easiest to copy and paste their tried and tested code, then modify the margins and widths of the columns.

Modifications to the HTML code (new code that has been added is emphasized) are as follows:

ccWeb/index.htm (excerpt)

<body>
<div id="wrapper">
 <div id="header">
   <div id="logo">logo</div>
   <div id="topmenu">top menu</div>
 </div>
 <div id="body">
   <div id="innerbody">
     <div id="leftcol">left column</div>
     <div id="centercol">Center column</div>
     <div id="rightcol">Right column</div>
     <div class="clear"></div>
   </div>
 </div>  
 <div id="footer">footer</div>
</div>
</body>

Here's the style sheet code:

ccWeb/styles.css (excerpt)

#wrapper {
 min-width: 540px;  /* Always good to have on full width liquid CSS layouts,  
                 google "min-width IE" for JS solutions there */
 width: 100%;               /* total width */
}      

#body {
 border-left: solid 145px #fff;  /* left column width and color */
 border-right: solid 170px #fff;  /* right column width and color */
 background: #fff;    /* center column color */
 width: auto;
}

#innerbody { margin: 0; width: 100%; }

#leftcol {
 width: 145px;              /* left column width */
 margin-left: -145px;      /* _negative_ left column width */
 background: #cfc;
 float: left;
 position: relative;
 z-index: 10;
}

#rightcol {
 width: 170px;              /* right column width */
 margin-right: -170px;   /* _negative_ right column width */
 background: #ccc;
 float: left;
 position: relative;
 z-index: 11;
}

#centercol {  
 float: left;  
 width: 100%;  
 position: relative;  
 z-index: 12;  
9  background: #cc0;  
}

.clear { clear: both; }

/* Mozilla code */
#body > #innerbody { border-bottom: 1px solid transparent; }
#leftcol { margin-right: 1px; }
#rightcol { margin-left: 1px; }
#rightcol p { padding-left: 10px; }
#centercol { margin: 0 -8px 0 -2px; }

#footer {
 clear: both;
 position: relative;
}

Now that I have the basic layout, I go into the HTML page and add the dummy content and links to the page.

ccWeb/index.htm (excerpt)

<div id="body">
 <div id="innerbody">
   <div id="leftcol">
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Products</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contacts</a></li>
     </ul>
</div>
   <div id="centercol">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
     tellus. Phasellus nonummy viverra mi. Phasellus mauris odio,
     nonummy vitae, scelerisque in, ullamcorper in, nulla.
     <!-- content cropped in code sample -->
</div>
   <div id="rightcol">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
     tellus. Phasellus nonummy viverra mi. Phasellus mauris odio,
     nonummy vitae, scelerisque in, ullamcorper in, nulla.  
     <!-- content cropped in code sample -->
</div>
   <div class="clear"></div>
 </div>
</div>
<div id="footer">©2005 – Fictional Company</div>

I'll also add the logo and the links in the header.

ccWeb/index.htm (excerpt)

<div id="header">
 <div id="logo"><img alt="Fictional Company" src="images/cc-logo.gif" width="125" height="55"></div>
 <div id="topmenu">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Site Map</a></li>
   </ul>
 </div>
</div>

After adding the content, I'm pleased to see that the liquid layout works: as you resize the browser window, the text wraps correctly and the divs stay in place. (There is a slight overlap of the right div, but we'll fix that with the padding in a few steps.)

Click to view larger screenshot in a new window [5].

Let's start with a few easy tweaks. We'll add padding to the logo div to push it further down the page, and we'll add a border and padding to the footer area. I'll also add a line in the style sheet to set the image border to 0.

ccWeb/styles.css (excerpt)

#logo {
 float: left;
 background: #ffc;
 padding-top: 10px;
}

#logo img { border: 0px; }

…

#footer {
 clear: both;
 position: relative;
 z-index: 13px;
 border: solid 1px #A4A4A4;
 padding: 8px;
}

Ordinary Lists to Extraordinary Menus

Now, we'll work on the top menu. It's currently an unordered list of links, which is what navigation bars are in theory, right? But I'd rather have it look a little more like a navigation bar and less like a bulleted list.

The first step is to get rid of the bullet marker.

ccWeb/styles.css (excerpt)  
 
#topmenu ul {  
 list-style: none;    /* removes list marker */  
}

Now, the bullet list looks like this:

Next, I get rid of the left indent by setting the padding and margin to 0 for the list. (This won't appear to make much of a difference since we have that section right-aligned already; you'll see it more visibly when we work on the vertical navigation later.)

ccWeb/styles.css (excerpt)  
 
#topmenu ul {  
 list-style: none;    /* removes list marker */  
 padding: 0px;    /* removes left indent */  
 margin: 0px;  
}

To get the list items to display in a row, I can just set the display to "inline" for the list items (li). I'll also add some padding to the left side so that there's some space between the links.

ccWeb/styles.css (excerpt)  
 
#topmenu ul {  
 list-style: none;    /* removes list marker */  
 padding: 0px;    /* removes left indent */  
 margin: 0px;  
}  
 
#topmenu ul li {  
 display: inline;  /* sets list items to display in a row */  
 padding-left: 10px;  /* puts space in between list items */  
}

Finally, I'll add some styling to the links so they display as bold, blue text. I also add styles for the a:active and a:hover pseudo-classes for a hover effect on the links.

ccWeb/styles.css (excerpt)  
 
#topmenu ul {  
 list-style: none;    /* removes list marker */  
 padding: 0px;    /* removes left indent */  
 margin: 0px;  
}  
 
#topmenu ul li {  
 display: inline;    /* sets list items to display in a row */  
 padding-left: 10px;  /* puts space in between list items */  
}  
 
#topmenu a:link, #topmenu a:visited {  
 color: #334392;  
 text-decoration: none;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
}  
 
#topmenu a:active, #topmenu a:hover {  
 color: #032BF2;  
 text-decoration: underline;  
}

The menu now looks like this (with Site Map in the "hover" state):

Next, I'll work on the left vertical navigation links. I'll take you through this process step-by-step as well, as we'll use the techniques we'll see here in later parts of this tutorial.

First, we'll apply a class to the div that holds the links for the vertical menu. I'll call mine "verticalmenu."

ccWeb/index.htm (excerpt)  
 
<div id="leftcol">  
<div class="verticalmenu">  
   <ul>  
     <li><a href="#">Home</a></li>  
     <li><a href="#">About Us</a></li>  
     <li><a href="#">Products</a></li>  
     <li><a href="#">Services</a></li>  
     <li><a href="#">Contacts</a></li>  
   </ul>  
</div>  
</div>

Repeating what we've already done for the top menu, I'll get rid of the list markers and set the margins and padding to 0 to get rid of the indent. Then, I'll give the <div> a width and border.

ccWeb/styles.css (excerpt)  
 
.verticalmenu ul {  
 list-style: none;  
 padding: 0px;  
 margin: 0px;  
}  
 
.verticalmenu {  
 width: 145px;  
 border: 1px solid #A4A4A4;  
}

The list currently looks like this:

A major difference between the styling for the top menu and what we're going to do here is that instead of formatting the list items (<li>), I'm going to format the links (<a>) instead.

Why? Well, I would like to set some background colors and borders and change the border when someone hovers over the link. But some browsers, IE in particular, only allow you to use :hover with respect to the <a> tag, not the <li> tag. So, with this vertical menu, we'll ignore the <li> attributes for now and focus on formatting the links (<a>).

We want to give the <a> tag a height, width, background color, etc. By default, links are "inline" elements. Thus, I'll set the links to have a "block" display so that the height and widths will apply. Then, I'll add a background color, font formatting, and the thick left border.

ccWeb/styles.css (excerpt)  
 
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {  
 display: block;  
 width: 145px;  
 height: 26px;  
 color: #334392;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
 text-decoration: none;  
 border-left: 10px solid #6F6E7F;  
}

I'll add another few lines to change the left border for the :hover pseudoclass:

ccWeb/styles.css (excerpt)  
 
.verticalmenu a:hover {  
 border-left: solid 10px #334392;  
}

This is what we have so far (note the blue left border of the "hovered" link):

You might think that, to get the dividers between the links, it's enough to set a bottom border for each link. Not so! Setting a border for the link will give you a border in the light gray area, but will not create a separating line in the left border area. Let's go back to the <li> attributes, setting a bottom border for each list item.

ccWeb/styles.css (excerpt)  
 
.verticalmenu li {  
 border-bottom: solid 1px #a4a4a4;  
}

When you do this, you'll get a 2px "double border" at the bottom of the list: one from the bottom border of the div, and one from the border that's around the entire list. We'll counteract the extra bottom border by modifying the .verticalmenu class to only use top, left, and right borders; our code now looks like this:

ccWeb/styles.css (excerpt)  
 
.verticalmenu {  
 width: 145px;  
 border-left: 1px solid #A4A4A4;  
 border-right: 1px solid #A4A4A4;  
 border-top: 1px solid #A4A4A4;  
}

Now, all we have to do is to set the padding for the text in the links. When you set padding for elements that have defined dimensions, you need to start talking about the box model. Browsers that follow the correct W3C specs (Firefox, and IE6 in standards-compliant mode, for example) will take your specified width and height to be the content area. If you add padding or borders, those dimensions will be added on to the outside of the content area. Here's a diagram that illustrates this point:

In the above diagram, the object is 303px x wide and 159px high. With an added border of 5px and padding of 15px, the actual rendered object, complete with border and padding, has a width of 303px + (15px x 2) + (5px x 2) = 343px, and a height of 159px + (15px x 2) + (5px x 2) = 199px.

All this is to say that when you're setting padding for elements whose widths you've already defined in the style sheet, you'll have to do a bit of subtraction to get the actual width of the element. In this case, the navigation links had defined dimensions of width: 145px, height: 26px. If I want to add padding of 5px, I'd then get width: 135px, height: 16px. But I also need to take into account the extra-thick left border, and subtract 10 pixels from the width, to get the final width: 125px. (I would have modified the widths earlier, when I defined the border, but for the purposes of this article, I wanted to talk about padding as well.)

ccWeb/styles.css (excerpt)  
 
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {  
 display: block;  
 width: 125px;  
 height: 16px;  
 padding: 5px;  
 color: #334392;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
 text-decoration: none;  
 border-left: 10px solid #6F6E7F;  
}

We're done, right?

Uh oh -- not quite. When you test the site in IE5, the floats and the menu dimensions are slightly off. Even when you fiddle with the dimensions, nothing seems to change. What's going on?

Those who have CSS experience may recognize the IE box model bug. Lower versions of IE (and IE6 when it's in "quirks" mode) interpreted the box model incorrectly. Instead of "adding on" padding and border amounts, IE takes the defined width and height, then subtracts the padding and border amounts for a limited text area, as illustrated in this diagram:

Now, it may be hard to tell if the box model bug applies in one situation or another. But because it's good practice to account for IE 5 bugs when you use borders and padding, I'll use the box model hack [6] and you'll see that this particular problem is miraculously solved.

There are plenty of articles about the box model bug and the corresponding box model hack [7], so I'll just demonstrate the fix:

ccWeb/styles.css (excerpt)  
 
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {  
 display: block;  
 width: 145px;  
 height: 26px;  
 padding: 5px;  
 color: #334392;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
 text-decoration: none;  
 border-left: 10px solid #6F6E7F;  
 /* box model hack */  
 voice-family: "\"}\"";  
 voice-family:inherit;  
 width: 125px;  
 height: 16px;  
}  
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, html>body .verticalmenu a:hover  
{  
 width: 125px;  
 height: 16px;    
}

Basically, you want to change the width and height to work for IE5 (in this case, the original 145x26 pixels). Then, add the two lines of "voice-family" code (as-is), and add code that the other browsers can see, with the box-model-compliant dimensions (125x16 pixels). IE5 doesn't know how to interpret the two lines of voice-family code, or anything in the rule that follows it, so it sees the first width and height definitions and ignores the rest of the styles; meanwhile, browsers like Firefox know how to skip the voice-family code and get to the real width and height, overriding the first set of dimensions.

The bottom part of the code fixes the issue for Opera using the following format, which is often described as the "Be Nice to Opera Hack." The very specific format allows IE5 to ignore the information, while allowing Opera to understand it, thus again overriding the first set of IE5 dimensions.

html>body [selector-name] {  
 width: [new width]  
 height: [new height]  
}

At last, our menu looks as it should!

Tweaking the Content Areas

The next tweaks to the code will affect the content areas. For the center area, I want to add the border and set some padding. I try applying that to the #centercol div.

ccWeb/styles.css (excerpt)  
 
#centercol {  
 float: left;  
 position: relative;  
 width: 100%;  
 z-index: 12;  
 background: #cc0;  
 border: solid 1px #a4a4a4;  
 padding: 10px;  
}

However, when I preview the page in IE6 and Firefox, it looks like this:

My guess is that this has to do with the box model again; perhaps IE6 and Firefox, which use a box model compliant to standards, are adding on the border and padding to the 100% width. I check the site in IE5 and, sure enough, there's nothing seemingly wrong. Remember that IE5 goes against standards by subtracting border and padding from the total width, so in this case, the center column would stay at 100% and look "fine".

So what I'll do instead is to create another div to surround the content, then apply the border and padding to this div. I'll also set some margins for the inner div so that there is space in between the left and right columns.

Here's the revised HTML code:

ccWeb/index.htm (excerpt)  
 
<div id="innerbody">  
 <div id="leftcol">left column</div>  
 <div id="centercol">  
   <div id="centercontent">  
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis  
     tellus. Phasellus nonummy viverra mi. Phasellus mauris odio,  
     nonummy vitae, scelerisque in, ullamcorper in, nulla.  
     <!-- content cropped in code sample -->  
</div>  
</div>  
 <div id="rightcol">Right column</div>  
 <div class="clear">  
</div>

And here's the revised style sheet. I changed #centercol back to what it used to be, and added the new information for #centercontent.

ccWeb/styles.css (excerpt)  
 
#centercol {  
 float: left;  
 position: relative;  
 width: 100%;  
 z-index: 12;  
 background: #cc0;  
}  
 
#centercontent {  
 border: solid 1px #a4a4a4;  
 padding: 10px;  
 margin: 0px 15px 0px 10px;  
}

Also, because I've adjusted the right margin for #centercontent, I no longer need the #rightcol p padding definition from the original liquid layout code, so I'll delete that line of code. (Instead of constraining myself to a padded p tag, I give myself more options for what can be put into the right column – such as other divs – by working with the margins of the #centercontent div.)

/* Mozilla code */  
#body > #innerbody { border-bottom: 1px solid transparent; }  
#leftcol { margin-right: 1px; }  
#rightcol { margin-left: 1px; }  
#rightcol p { padding-left: 10px; }  
#centercol { margin: 0 -8px 0 -2px; }

Here's what it looks like:

Finally, I add a top margin to the footer to make some space between it and the rest of the content, then remove all the test background colors.

ccWeb/styles.css – partial  
 
#footer {  
 clear: both;  
 position: relative;  
 z-index: 13;  
 border: solid 1px #A4A4A4;  
 margin-top: 10px;  
 padding: 8px;  
}

And here's our final result:

Click to view larger screenshot in a new window [8].
Click to view HTML page in a new window [9].
Click to view CSS file in a new window [10].

Liquid Two-Column Layout

A two-column layout is easy to make using what we've done already as a base. First, I'll modify the HTML code to use the #body2 selector instead of #body, and get rid of the third column content.

ccWeb/2column.htm – partial  
 
<div id="header">header stuff</div>  
<div id="body2">  
 <div id="innerbody">  
   <div id="leftcol">Left column</div>  
   <div id="centercol">  
     <div id="centercontent">  
Center column  
</div>  
</div>  
   <div class="clear"></div>  
 </div>  
</div>  
<div id="footer">©2005 - Fictional Company</div>

In the CSS, #body2 can look very much like #body, without the right border definition (which creates the right column).

cssWeb/styles.css – partial  
 
#body {  
 width: auto;  
 border-left: solid 145px #fff;  /* should be same width as left column */  
 border-right: solid 170px #fff; /* should be same width as right column */  
}  
 
#body2 {  /* almost exactly the same as #body */  
 width: auto;  
 border-left: solid 145px #fff;  /* should be same width as left column */  
}

Here's what that looks like:

To get rid of the extra gap on the right side of the content area, I'll also modify the HTML page to use a new #centercontent2 instead of #centercontent.

ccWeb/2column.htm – partial  
 
<div id="header">header stuff</div>  
<div id="body2">  
 <div id="innerbody">  
   <div id="leftcol">Left column</div>  
   <div id="centercol">  
     <div id="centercontent2">  
Center column  
</div>  
</div>  
   <div class="clear"></div>  
 </div>  
</div>  
<div id="footer">©2005 - Fictional Company</div>

In the style sheet, #centercontent2 will look very much like #centercontent, except that the right margin will be 0px.

cssWeb/styles.css – partial  
 
#centercontent {  
 border: solid 1px #a4a4a4;  
 padding: 10px;  
 margin: 0px 10px 0px 10px;  
}  
 
#centercontent2 {  /* almost exactly the same as #centercontent */  
 margin: 0px 0px 0px 10px;  
 border: solid 1px #a4a4a4;  
 padding: 10px;  
}

And finally, our two-column layout is complete:

Click to view larger screenshot in a new window [11].
Click to view HTML page in a new window [12].
Click to view CSS file [13].

At this point, you can create simple styles for headings, link colors, etc. -- but the basic layout is there, looking extremely clean and crisp!

Click to view a sample page with headings in a new window [14].

Learn more about Liquid Layouts

You can do a lot more with liquid layouts, including setting different background images for the right, left, and center columns. Be sure to take a close look at the examples at redmelon.net/tstme/3cols2/ [15] and alistapart.com [16] to see how they've done things.

Summary for the Clean and Crisp Flavor

Let's review what we've learned so far...

In Photoshop, you learned to:

• Create, duplicate, rename, and merge layers.
• Use the Color Picker to select colors.
• Use the Marquee and Paint Bucket to create rectangles.
• Create a Stroke layer effect.
• Copy layer effects to other layers
• Use the Shift key to constrain your movement to straight lines when drawing lines or moving objects
• Duplicate, crop, and save files for the Web

With HTML/CSS, you learned to:

• Create a liquid three-column layout with a header and footer.
• Create a liquid two-column layout with a header and footer.
• Convert a boring list of links to more interesting horizontal and vertical links using only CSS.
• Use the box-model hack and the be-nice-to-Opera hack.

The Edgy Eye-Candy Flavor

Now, let's go for some eye-popping Web design! Many designs use gradients and shadows to give an impression of depth. You may have noticed sites that use gradients in rows or columns, and sites that display shadows on the outside edges of the content area. With Photoshop, these effects are easy to create!

First I'll make a very basic sketch:

Again, I start by placing my logo on a 750x550 Photoshop canvas. I decide to make the background a dark gray (#535769), and use the marquee tool and paint bucket on another layer for a white content background (named "content"). I make the background a pretty specific size (715x530 pixels) because I'm going to use this screenshot as a "base" for my Web graphics. Notice that the white content area starts at the very top of the document, but a margin is maintained above the bottom border -- this leaves room for a drop shadow effect.

I select the "content" layer and go to Layer > Layer Style > Drop Shadow. I change the Opacity to 100%, the Distance to 0, and the Size to 8. This results in an even drop shadow all around the layer.

Now, I'll make the background for the menu bars. I create a blue rectangle that's the same width as the content area, using the same blue that's used in the logo (#334392):

Tip: If you want a selection to be the same width as something else, follow these steps. First, select the content layer, and select its contents using the Magic Wand tool, which makes a selection based on the pixels in that layer. Then, select the Marquee tool. Hold the Alt key, and you'll see the cursor change to a crosshair with a "minus" sign. What this will do is make a "negative selection" -- in other words, it will "cut out" pieces from your current selection. You can then section off two rectangles above and below the location at which you want the menu-shaped selection to appear (designated by the red and orange rectangles in the diagram below). Those areas will be subtracted from the main selection, giving you a long, horizontal rectangular selection that's exactly the same width as the white content area.

Create a new layer and, with the marquee still selecting the area, choose a darker shade of blue (I used #152367), and select the Gradient Tool, which is hidden behind the Paint Bucket tool. In the toolbar, choose the "Foreground to Transparent" option.

Click and hold at the top of the marquee, hold the Shift key, then release it when the cursor is near the bottom of the marquee. The darker blue gradient will be overlaid over the blue rectangle.

If you want, experiment by adding different types of gradients until you get an effect that you like. For example, I added a light-blue gradient at the bottom to slightly lighten the effect. This layer was named "menu." Then, I added a new layer, and applied a black line (using the Pencil Tool) above and below the menu to help it "pop" out.

Tip: Again, since I wanted the top and bottom borders of the menu to be the same width as the content area, I created a selection by Ctrl-clicking the content layer. Drawing a pencil line was a simple matter of carefully making the initial click to be the right position, then holding Shift to constrain the pencil movement, and quickly moving my mouse left and right until I had a pencil line stretching across the edge of the menu without spilling over the edges of the white content area.

The overall layout looks a little too white, so I decide to experiment with the header area. I create a new layer with a black rectangle to see what it looks like. To try different colors in the header, I duplicate the black rectangle layer (by dragging/dropping the layer onto the New Layers icon), then lock the transparent pixels by clicking the "Lock transparent pixels" icon in the Layers palette. This allows me to freely paint-bucket the whole rectangle without worrying about spilling over the edges of the area.

I try a black layer, a dark gray layer, and a blue layer. Here they are, shown next to the original white:

After turning the layers on and off a few times (click the "eye" icon in the layers palette), I decide on the gray version. (You might like a different version... it's up to you!)

The dark header background means that I need to modify my logo. Luckily, since this logo has a transparent background, I only need to lock the transparent pixels in the layer, then paint over the pixels with the paintbrush. I paint the big text white and the small text light blue (#A1ADEA).

Note: If a logo image does not have a transparent background, try using the image extraction tips in my article, 5 Great Background Masking Techniques in Photoshop [17], to get rid of the background.

I decide to break up the overwhelming whiteness with a colored left column. A very light shade of blue (#E9EAF0) seems to do the trick:

Then I add dummy content...

The page still looks a little bit plain to me. I think some kind of accent graphic behind the left column menu bar might be nice. To save myself some time, I browse through Photoshop's collection of custom shapes; after choosing the Custom Shape tool which is hiding behind the Rectangle tool, I click on the shape drop-down in the options bar and find one that I like.

After setting the color to #BFC0CA, I hold the Shift key to constrain the proportions and draw the shape:

The color is a little dark for me. In the Layers palette, I play with the opacity setting until it gives a subtle, not overpowering, effect.

I decide to see what it would look like if I just showed the bottom half of the custom shape, aligned to the top of the left column. I switch to the Move tool, then hold Shift (to constrain the movement) and move the shape up to the top edge.

The last modifications I make to the screenshot are a vertical button "hover" state treatment, also using a Photoshop custom shape and a line drawn with the pencil tool. Finally, I put some example content in the remaining white area. I think I'm ready to move on!

Click to view larger screenshot [18].

Crop 'n' Save

In the next steps, we're going to cut and save six Web-optimized images:

1. The logo


2. The background for the horizontal menu


3. The left column top graphic treatment


4. The vertical "hover" state graphic


5. A background graphic for the two-column look and side drop shadows


6. A graphic for the bottom part of the drop shadow

In this section, I'll use the method of cutting and saving the images demonstrated with the Clean and Crisp flavor ("crop 'n' save"); the next section will show you an alternative method ("slicing"). You can choose your preferred method.

1. The logo

Use the method described in the Clean and Crisp flavor -- duplicate, crop, merge all unnecessary layers, and Save for Web (as a gif) -- to get this:

2. The background for the horizontal menu

Use the same method. I crop a small vertical slice of the blue area of the menu, not including the black borders or any text, and save as a gif to get this:

3. The left column top graphic treatment

After the duplication, I carefully crop the top part of the left column -- making sure to get the entire width of the column -- then delete the navigation text/graphics layers before I merge all the other layers (except, of course, the actual graphic layer). I end up with a Photoshop file that has two layers: the light blue background layer, plus the top layer with the custom shape. Again, I save this as a gif.

4. The vertical "hover" state graphic

For the vertical hover button, I crop very carefully around the line and leaf.

Then, I merge all the layers except for the line and leaf, and delete them.

I save this graphic as a transparent gif. The Save for Web dialog box has a "transparency" option that should be checked.

5. A background graphic for the two-column look and side drop shadows

Using the Crop tool, I select an area that stretches across the entire document. For this graphic, I make sure that the "Hide" option is selected, instead of "Delete." This will keep the layers from being truly "cropped," which could mess up the drop shadow effect.

Then, I do the usual merge-delete until I only have the gray background, the white content area layer (with drop shadow), and the blue left column layer.

Using the Marquee tool, I carefully check the borders outside the content area to see if they're the same width. In the diagram below, you can see that the left border is 17 pixels wide, but the right border is 18 pixels wide. I'll have to make a slight adjustment to the canvas size to trim one pixel off the right side.

Go to Image > Canvas Size. I set the Anchor to the left side, change the width to 749 pixels, then click OK. A prompt appears, to ask if I want to do this, and I click OK again.

Finally, I save the background image as a GIF.

6. A graphic for the bottom part of the drop shadow

We're actually going to use the same Photoshop file for the bottom part of the drop shadow. The first step is to make copies of the current layers. To achieve this, I'll first link the two original "content" and "left column" layers, and then choose "New Set From Linked…" from the Layer Palette menu (click on the small arrow next to the tabs). This moves the two layers into a new layer set. Note that in later versions of Photoshop, Sets have been renamed "Groups," but they can be used in pretty much the same way.

I duplicate the Layer Set by dragging and dropping it on top of the "New Layer Set" icon that looks like a folder. You can duplicate a Layer Group by dragging it onto the New Layer icon.

I "hide" the first set (by clicking the eye icon), then select the new set. You can move the entire set using the Move tool. I hold the Shift key and move the set up until I see the bottom edge of the content area.

I use the up arrow key to fine-tune the movement until the edge has just passed out of sight, but the shadow remains. Then, I save this as a new .gif file, called something like contentbottom.gif.

Two-column Static-width Layout

Now that we have our images, we're ready to start coding.

Again, I'll start with a basic HTML page with placeholder text:

eecWeb/index.htm (excerpt)  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Fictional Company</title>  
</head>  
<body>  
<div id="wrapper">  
 <div id="header">logo</div>  
 <div id="menu">menu</div>  
 <div id="body">  
   <div id="leftcol">left</div>  
   <div id="maincol">main column</div>  
 </div>  
</div>  
<div id="footer">footer</div>  
</body>  
</html>

The #wrapper div is going to use the first background image (with the two columns and side drop shadows), so most of the other page elements will go inside it. The #footer will show up beneath the wrapper, with the bottom shadow background image, so we put that outside of the #wrapper div.

Now, for the style sheet.

As this is a fixed-width content layout, I'm going to center-align the #wrapper and #footer divs (by setting the text-align property for the body element). I'll also set the margins and padding to 0.

eccWeb/styles.css (excerpt)  
 
html { margin: 0px; }  
 
body {  
 background: #535769;  
 text-align: center;  
 font: 0.7em Verdana, Arial, Helvetica, sans-serif;  
 margin: 0px;  
 padding: 0px;  
}

Now, I'll set the background images for the #wrapper and #footer divs. I'll need to set the widths for these divs.

Tip: Although text-align is set to center for the body element, you have to set margin: 0px auto for the divs for them to center correctly in Firefox/Mozilla/etc.

eccWeb/styles.css (excerpt)  
 
#wrapper {  
 margin: 0px auto;  /* to fix centering in Mozilla */  
 background: url('images/eec-bg.gif') repeat-y;  
 text-align: left;  
 width: 749px;    /* width should be the same as the background image */  
}  
 
#footer {  
 margin: 0px auto;  /* to fix centering in Mozilla */  
 background: url('images/eec-bottom.gif') no-repeat;  
 width: 749px;    /* width should be the same as the background image */  
}

Now, the #wrapper is 749 pixels wide, but remember that we have those 17 pixels of "drop shadow border" on the right and left sides. We want the rest of the content to fall inside of the visual border, so we'll add some padding to the #wrapper div (and use the box model hack to make sure it works in IE5).

eccWeb/styles.css (excerpt)  
 
#wrapper {  
 margin: 0px auto;  /* to fix centering in Mozilla */  
 background: url('images/eec-bg.gif') repeat-y;  
 text-align: left;  
 width: 749px;   /* width should be the same as the background image */  
 padding: 0px 17px 0px 17px;  
 /* box model hack */  
 voice-family: "\"}\"";  
 voice-family:inherit;  
 width: 715px;  
}  
 html>body #wrapper { width: 715px; }

Finally, I'll add some code for the height and background color of the header. I'll also add some text formatting for the footer.

eecWeb/styles.css (excerpt)  
 
#header {  
 height: 66px;  
 background: #292C36;  
}    
 
#footer {  
 margin: 0px auto; /* to fix centering in Mozilla */  
 background: url('images/eec-bottom.gif') no-repeat;  
 width: 749px;  /* width should be the same as the background image */  
 color: #B1B5C1;  
 padding: 10px 0px 10px 0px;  
}

Note: The box model hack isn't needed for the footer, as I've only specified padding for the top and bottom, not the sides.

This is what our page looks like right now:

The menu is pretty basic, too. First, I'll set the menu background image to repeat horizontally. I'll also specify the background color to be the bottom (lighter) shade of blue -- that way, if the menu goes onto more than one line for some reason, the blue will continue.

eecWeb/styles.css (excerpt)  
 
#menu {  
 background: url('images/eec-menubg.gif') #4858A4 repeat-x;  
}

I'll add the top and bottom borders and set the padding and fonts.

eecWeb/styles.css (excerpt)  
 
#menu {  
 background: url('images/eec-menubg.gif') #4858A4 repeat-x;  
 border-top: solid 1px #000;  
 border-bottom: solid 1px #000;  
 padding: 5px;  
 color: #fff;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
}

The list of links essentially will be the same as the horizontal links in the Clean and Crisp flavor. (At this point, I'll also start putting in the text content.)

eecWeb/styles.css (excerpt)  
   
#menu {  
 background: url('images/eec-menubg.gif') #4858A4 repeat-x;  
 border-top: solid 1px #000;  
 border-bottom: solid 1px #000;  
 padding: 5px;  
 color: #fff;  
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;  
}  
 
#menu ul {  
 list-style: none;  /* removes list marker */  
 padding: 0px;    /* removes left indent */  
 margin: 0px;  
}  
 
#menu ul li {  
 display: inline;  /* sets list items to display in a row */  
 padding-left: 10px;  /* puts space in between list items */  
}  
 
#menu a:link, #menu a:visited {  
 color: #fff;  
 text-decoration: none;  
}  
 
#menu a:active, #menu a:hover {  
 color: #EDDF7D;  
 text-decoration: none;  
}

Now, the page looks like this:

While there are a few different ways to position the left and right columns, my preference is to set a width for both of the columns, and set them both to float: left.

eecWeb/styles.css (excerpt)  
   
#leftcol {  
 width: 168px;  
 float: left;  
}  
 
#maincol {  
 width: 545px;  
 float: left;  
}

In IE and Opera, the site looks fine, but in Netscape and Firefox, the background has disappeared!

To get the background to show up, add <br class="clear"> after the right column div, and create a style for .clear in the style sheet.

eecWeb/index.htm (excerpt)  
   
<div id="body">  
 <div id="leftcol">left column</div>  
 <div id="maincol">main column</div>  
 <br class="clear">  
</div>

eecWeb/styles.css (excerpt)  
   
.clear { clear: both; }

The site should now display correctly in Firefox and Netscape. Our basic static-width two-column layout works!

Layout Touchup

For the graphic element in the top left column, I'll set a non-repeating background image for the #leftcol div. While I'm at it, I'll set padding for the content areas and use the box model hack to make sure the layout works for IE5 as well as more recent browsers.

eecWeb/styles.css (excerpt)    
   
#leftcol {    
 width: 168px;    
 float: left;    
 background: url('images/eec-leftcoltop.gif') no-repeat;    
 padding: 10px 8px 8px 10px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 152px;    
}    
   
html>body #leftcol { width: 152px; }    
   
#maincol {    
 width: 545px;    
 float: left;    
 padding: 10px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 525px;    
}    
   
html>body #maincol { width: 525px; }

When I add padding and use the box model hacks, I'll sometimes find that my divs no longer float side-by-side, but the second div gets knocked underneath the first. If that happens, I would add background colors to the divs for testing purposes, and play with the pixel amounts until I find numbers that work. Eventually, I'll end up with a site that looks like this:

Link Bar with Hover Image

For the vertical menu, I'll start with the basic structure we made in the Clean and Crisp flavor, but I'll adjust the width and strip out the border/background code:

eecWeb/index.htm (excerpt)    
   
<div id="leftcol">    
 <div class="verticalmenu">    
   <ul>    
     <li><a href="#">Home</a></li>    
     <li><a href="#">About Us</a></li>    
     <li><a href="#">Products</a></li>    
     <li><a href="#">Services</a></li>    
     <li><a href="#">Contact</a></li>    
   </ul>    
 </div>    
</div>

eecWeb/styles.css (excerpt)    
   
.verticalmenu ul {    
 list-style: none;    
 padding: 0px;    
 margin: 0px;    
}    
   
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {    
 display: block;    
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;    
 color: #1A286E;    
 text-decoration: none;    
 padding: 5px;    
 width: 153px;    
 height: 26px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 143px;    
 height: 16px;    
}    
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, html>body .verticalmenu a:hover {    
 width: 143px;    
 height: 16px;    
}

When the mouse is over the link, I want the hovered-state graphic to appear. The standard technique is to set it as the background image of the link hover psuedoclass:

eecWeb/styles.css (excerpt)    
   
.verticalmenu a:hover {    
 background: url('images/eec-vertical.gif') no-repeat;    
}

Because the graphic is a transparent gif, it allows the background to show through. Here's what the vertical menu looks like now (with the About Us hover state showing):

Almost done! All I have to do is add a few extra styles for headings, and my site design is complete!

Click to view larger screenshot in a new window [19].
Click to view HTML page in a new window [20].
Click to view CSS file in a new window [21].

Three-column Static-width Layout

Creating a fixed-width, centered, three-column layout is easy when you already have the two-column layout.

We'll modify the HTML code so that there are three divs: one for each column.

eecWeb/3col.htm (excerpt)    
   
<div id="body">    
 <div id="leftcol">left column</div>    
 <div id="centercol">center column</div>    
 <div id="rightcol">right column</div>    
 <br class="clear">    
</div>

In the style sheet, we set #centercol to be very much like #maincol, with a narrower width.

eecWeb/styles.css (excerpt)    
   
#centercol {    /* basically a modification of "maincol" */    
 width: 395px;    
 float: left;    
 padding: 10px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 375px;    
}    
 html>body #centercol  { width: 375px; }

Then, we'll add code for the right column div (with float: left defined).

eecWeb/styles.css (excerpt)    
   
#rightcol {    
 width: 150px;    
 float: left;    
 padding: 10px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 130px;    
}    
 html>body #rightcol { width: 130px; }

And the result looks like this:

If you want a border to separate the middle and right columns, remember that the two-column look is achieved by a background image. So all you need to do is modify the background image with a section for the right column. In the diagram below, you can see a very faint thin blue line marking the right column border:

Create a new #wrapper3col selector to use that background image (instead of #wrapper, which uses the two column background image), and change the HTML code to reference the new selector:

eecWeb/styles.css (excerpt)    
   
#wrapper3col {    
 margin: 0px auto;  /* to fix centering in Mozilla */    
 background: url('images/eec-bg3col.gif') repeat-y;    
 text-align: left;    
 width: 749px;   /* width should be the same as the background image */    
 padding: 0px 17px 0px 17px;    
 /* box model hack */    
 voice-family: "\"}\"";    
 voice-family:inherit;    
 width: 715px;    
}

eecWeb/3col.htm (excerpt)    
   
<div id="wrapper3col">    
 <div id="header">logo</div>    
 ….

Here's the final three-column layout:

Click to view larger screenshot in a new window [22].
Click to view HTML page in a new window [23].
Click to view CSS file in a new window [24].

Summary of Edgy Eye-Candy Flavor

Let's review the additional skills you've learned in this section.

In Photoshop, you learned to:

• Create a Drop Shadow layer effect.
• Create gradients.
• Use the Magic Wand tool to create a selection based on the pixels in that layer.
• Lock the transparent pixels in a layer to easily re-color layers.
• Hide layers from view by clicking the "eye" icon in the Layers Palette.
• Use the Custom Shape tool.
• Adjust the opacity of a layer.
• Duplicate, crop, and save images for the Web (in more detail).
• Adjust the Canvas size (to ensure the borders are the same width).
• Create, duplicate, and move a Layer Set.

With HTML/CSS, you learned to:

• Create a static-width, centered, two-column layout with a header and footer.
• Create a static-width, centered, three-column layout with a header and footer.
• Use background images for a two-column and three-column effect that stretches the height of the total content area, and make sure they show up in Netscape and Firefox.
• Get divs to center in all browsers.
• Use background images as "hover" navigation buttons.

The Curiously Strong Retro Flavor

Retro furniture, retro dishware, retro cars -- everything's going retro, so why not your site design, too? Some of the design elements we'll draw on for this screenshot include funky fun fonts, simple shapes, clean lines, and -- of course -- the thick outline.

I'll start with a striped background pattern. This simple pattern begins with a 1x2 pixel document in Photoshop. I zoom in as much as I can and give the background the same color as the logo (#334392). Then, I'll color one of the pixels a lighter blue (#5967AE).

I can immediately save this for the Web, to use for the background image (called "background.gif").

To apply this background to the screenshot, I hit Ctrl-A to make a selection of all two pixels. Then I go to Edit > Define Pattern (you can name the pattern).

Now that you've created the background, you can create another 750x550 canvas, insert your logo, and apply the background pattern you've just created. With the paint bucket tool selected, switch from Foreground to Pattern in the options bar, and select the pattern.

A simple click (with the paint bucket tool) on the background of the screenshot fills it with your new pattern.

I create a content background layer (in white, for now), and use the pencil tool to draw a dark blue border on each side of the content layer. Then I add a light blue rectangle for the left column. (Tools used: Marquee to select content area -- while looking at the Info palette to get an exact width, paint bucket tool -- set to foreground color, pencil tool for borders.)

I think I want to put an outline around the word "fictional," but not around "company," so I'll have to separate the elements, as they're currently in the same layer. There are a few ways you can do this -- I choose to duplicate the layer, and use the eraser tool to erase "fictional" from one layer and "company" from the other layer.

Now, I'm able to apply a white stroke to the "fictional" layer. I also lock the transparency for the "company" layer, and use the paintbrush to color the pixels a very light blue (#C5CCF0).

One design element often seen is the "sun ray" object. We'll create this very easily using the Polygon tool (hidden behind the Custom Shape or Rectangle tool). By clicking the options arrow, you can choose to make the shape into a star shape.

Then, change the number of sides to a large number -- I used 80, but you can experiment to find a number that works for you. I then drew the sun-ray shape in the same dark blue color as the logo text.

After choosing the Move tool, I move the sun shape up. Then, I go to Edit > Free Transform (Ctrl-T) and drag on the bottom center handle to "squash" the shape slightly, in proportion to the logo. Once I have the shape about the size that I want it, I double-click inside the square to apply the transformation.

The ray effect is a little too much for me, so I bring the opacity down to 50% to make it a little more subtle. Shortcut -- If you have selected that layer already, you can usually type in the number to adjust the opacity without needing to click and drag on the opacity slider.

I switch to the rounded rectangle tool to make some navigation buttons. With a five-pixel radius, I choose a bright shade of orange (#ECA908) and create a rounded rectangle, then apply a three-pixel white stroke to it. I duplicate and move the layer a few times to get a few navigation buttons.

I decide to apply a slight drop shadow to the layers. I try it out on one of the buttons, decide I like it, and copy the effect to the other buttons.

Now, I add a text layer. Using a darker color for the text (#8A4C03), I type the text and then use the Character palette to adjust the leading (the space in between lines) so the text aligns in the buttons correctly.

Now for the content area. I try using different shades of orange, and decide the darker shade (#D68321) looks better:

The "little details," like the stroke around the top part of the logo and the sun ray effect, are what will give this otherwise plain site a retro feel. With this in mind, I think I'll create some kind of graphic effect for headings. I'll start with text using the Brush Script font in dark orange (#9B5C11), with a light orange (#FFDE90) stroke applied to it.

Using the same color as the text, I create a few new layers and start drawing retro-looking custom shapes on them. (I draw each shape on a separate layer so that I can move them around later if needed.)

Photoshop comes with several shapes that can work. These are the ones that I used:

Note that I've moved the shape layers beneath the Heading layer.

For the text area, I'll add a white, rounded rectangle. I apply a white stroke to it, but change the opacity of the stroke to 40%. I also copy the drop shadow effect from the buttons to this content area.

In the last few steps, I add dummy text content, then experiment with more custom shapes to appear behind the text heading.

Click to view larger screenshot in a new window [25].

Slicing and Dicing

In the next several steps, I'll demonstrate a secondary way of cutting up your image to save them for Web, this time, using the Slice tool in Photoshop.

Select the Slice tool from the toolbar and draw a rectangle around the logo:

Double-click on the slice and change its name. This will be the same as the filename; for example, the Slice name is "logo," so the filename will be "logo.gif" or "logo.jpg."

I create more slices for each image that I'll need. (Note: I only create one slice for the vertical button).

• logo – The logo
• vertical – Just one of the vertical buttons
• title – Title area, with plenty of room for longer titles
• contenttop – The top part of the content area, including the drop shadow
• contentbg – A section from the middle part of the content area, the same width as contenttop
• heading – The heading graphics
• contentbottom – The bottom part of the content area, including the drop shadow, the same width as the other content slices
• bg – The blue and orange background area, not including the side borders

In the diagram below, I've marked where each of these slices is located.

Now comes the not-so-exciting part. You'll notice that Photoshop creates "auto slices," which are shown by gray numbers, in contrast to the blue numbers of the "user slices" that you created. Unfortunately, Photoshop will treat each one of those auto slices as an image that needs to be saved. What I'll do is to go through every auto slice with the Slice Select tool (behind the Slice tool), double-click it, and set it to "No Image."

You'll notice that the slice number now looks like a user slice, as it's blue, but also notice the "X" icon, which signifies that there is no image. (Contrast that to the "picture" icon for Slice 02, where the logo is located.)

Note: If you want to skip this step, just be aware that you'll end up with several "extra" slices when you export the image. You can delete those files, which may seem easier to you than going through and modifying all of the auto slices. I personally like to take the time to modify the auto slices, as I often find myself exporting the sliced images frequently.

Before I export the slices into images, I'll hide all the dummy text layers by clicking the eye icon in the Layers palette. I'll also modify the "Heading" text to depict the first title that I want to make.

Now, go to File > Save for Web.

At this point, you want to double-click on all the image slices and change the settings if necessary (if, for example, you want to save the images as .gifs or .jpgs, and at a particular level of quality). If you're going to make them all the same, you can Shift-click to select multiple slices and then change the settings all at once. I change all the slices to 32-color gifs.

Now, click "Save." The Save Optimized As dialog box will appear. Change the Save as type setting to "Images Only."

By default, Photoshop will create a folder named "images" and save all the images there. If you don't want to do this, select "Other…" under the Settings option and either uncheck the "Put images in Folder" (in which case, it will save all the images into your currently selected folder), or change the name of the subfolder to which you want the images saved.

Click "OK" if you're in this dialog box. Then, click "Save" to save the images.

Now, I'm going to create one more image for the hovered state of the vertical button. First, I'll make a duplicate of the button layer and hide the original one. Then, I'll hide the drop shadow effect by clicking the eye icon next to that effect in the Layers Palette.

Using the Move tool, I'll use the arrow keys to move the button layer down two pixels, and over to the right one pixel. This will help the button to look like it's been pushed down. Then, I'll rename the slice "vertical-over."

Again, I'll go to File > Save For Web. I'll select that slice, click Save, and this time choose to save only "Selected Slices."

After saving, you should have both "vertical.gif" and "vertical-over.gif" in your images folder.

Note: There's a different method of creating navigation buttons for CSS-styled sites [26]. This other method ensures that you don't need to try to preload your images, which works well if you have buttons that might take a little longer to load.

Renaming slices and choosing to save only Selected Slices will allow you to create more Title graphics if they're needed. In fact, I just realized that I never moved the little flower graphic elements after I changed the title of the page. I'll do that now and resave the "title" slice.

And that's the Slice and Dice method of saving images for the Web from a screenshot!

In practice, I tend to combine both the Slice and Dice and Crop 'n' Save methods. For example, in this screenshot, I might have used slices for the design elements that don't change, but duplicated/cropped the title graphic. That way, if I want to change the entire color scheme, it will be easy enough to modify the screenshot and create all the new design images at once. But if I want to make more title graphics, I can use the crop 'n' saved "title" Photoshop file to edit and save without having to go through the different slice save options.

Building the Page

The techniques for building this page will be very similar to the ones we used for the Edgy Eye-Candy flavor, except that the logo and copyright note will display in a two-column layout, without a separate header and footer area.

We'll start with the HTML page, structured like this:

retroWeb/index.htm (excerpt)      
     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">      
<html>      
<head>      
<title>Fictional Company</title>      
</head>      
<body>      
<div id="wrapper">      
 <div id="body">      
   <div id="leftcol">left</div>      
   <div id="maincol">main column</div>      
   <br class="clear">      
 </div>      
</div>      
<div id="footer">footer</div>      
</body>      
</html>

The style sheets for the body, wrapper, and columns are almost exactly the same format as the ones we used with the Edgy Eye-Candy flavor, with the dimensions modified slightly:

retroWeb/styles.css      
     
html { margin: 0px; }      
     
body {      
 background: #334392 url('images/background.gif');      
 text-align: center;      
 font: .7em Verdana, Arial, Helvetica, sans-serif;      
 margin: 0px;      
 padding: 0px;      
}      
     
#wrapper {      
 margin: 0px auto;  /* to fix centering in Mozilla */      
 background: url('images/bg.gif') repeat-y;      
 text-align: left;      
 width: 717px;    /* width should be the same as the background image */      
 border-left: solid 1px #02092E;      
 border-right: solid 1px #02092E;      
 border-bottom: solid 1px #02092E;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 width: 715px;      
}      
 html>body #wrapper { width: 715px; }      
       
#leftcol {      
 width: 155px;      
 float: left;      
 padding: 5px;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 width: 145px;      
}      
 html>body #leftcol { width: 145px; }      
     
#maincol {      
 width: 560px;      
 float: left;      
 padding: 10px;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 width: 540px;      
}      
 html>body #maincol { width: 540px; }      
     
       
.clear { clear: both; }

The page currently looks like this:

Now I'll add the logo and left column navigation bar to the HTML page.

retroWeb/index.htm (excerpt)      
     
<div id="leftcol">      
<div id="logo">      
<img src="images/logo.gif" width="128" height="98" alt="Fictional Company">      
</div>      
 <ul class="verticalmenu">      
   <li><a href="#">Home</a></li>      
   <li><a href="#">About Us</a></li>      
   <li><a href="#">Products</a></li>      
   <li><a href="#">Services</a></li>      
   <li><a href="#">Contacts</a></li>      
 </ul>      
</div>

For the vertical menu styles, I'll start with the same type of style definitions that I've used before. Note that I've defined a background image for both the normal link and hovered link pseudo-classes.

retroWeb/styles.css (excerpt)      
     
.verticalmenu {      
 list-style: none;      
 padding: 0px;      
 margin: 0px;      
}      
     
 .verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {      
   display: block;      
   font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;      
   color: #1A286E;      
   text-decoration: none;      
   text-align: center;      
   width: 141px;      
   height: 38px;      
   background: url('images/vertical.gif') no-repeat;      
 }      
     
 .verticalmenu a:hover {      
   background: url('images/vertical-over.gif') no-repeat;      
 }

When I preview the page, the navigation menu buttons show up. (Take note of the "hovered" button for "About Us.")

The text is "off," so we'll fix that with some padding (which requires the use of the box model hack). I give the hover state a bit more padding to account for the graphic effect of the button being "pushed."

retroWeb/styles.css (excerpt)      
     
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {      
 display: block;      
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;      
 color: #1A286E;      
 text-decoration: none;      
 text-align: center;      
 padding-top: 10px;      
 width: 141px;      
 height: 38px;      
 background: url('images/vertical.gif') no-repeat;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 height: 28px;      
}      
 html>body .verticalmenu a:link, html>body .verticalmenu a:visited, html>body .verticalmenu a:hover {      
   height: 28px;      
 }      
     
.verticalmenu a:hover {      
 background: url('images/vertical-over.gif') no-repeat;      
 padding-top: 13px;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 height: 25px;      
}      
     
 html>body .verticalmenu a:hover { height: 25px; }

Now the menu looks like this (again, with "About Us" in the hover state):

Now, to the body content. First, I'll add some dummy text and other structure tags to the HTML page:

retroWeb/index.htm (excerpt)      
     
<div id="maincol">      
 <h1 class="title">Lorem ipsum</h1>      
 <div class="content">Content</div>      
 <div class="footer">Copyright statement</div>      
</div>

For the title, I'll use CSS to display the image as a background image, and hide the text by setting a really large negative left indent. The cool thing about using this method (instead of replacing the text with an image, using the <img> tag in the HTML code) is that if a browser has CSS turned off, the viewer can still read the title. Other benefits include better search engine optimization, and getting well-structured page kudos!

Note: There are times when I wouldn't use CSS to replace text with an image, but would go ahead and embed the image into the HTML page. For instance, I'd do this if I had a heading that I wanted to be hyperlinked so that users could click on it.

Let's start by setting the background image of the title graphic in the style sheet:

retroWeb/styles.css (excerpt)      
     
.title {      
 background: url('images/title.gif') no-repeat;      
}

This is what the page looks like now:

I'll set a height for the title, to get the entire image to display:

retroWeb/styles.css (excerpt)      
     
.title {      
 background: url('images/title.gif') no-repeat;      
 height: 56px;      
}

Now I'll set the negative indent for the text. To counteract the negative margin, I set a position for the background image, and we're done with the title graphic!

retroWeb/styles.css (excerpt)      
     
.title {      
 background: url('images/title.gif') 20000px no-repeat;      
 height: 56px;      
 margin-left: -20000px;      
}

Note: Because you'll most likely have different title graphics for different pages, I'd remove the .title class from the main style sheet and embed it into the top of each page. You can then set different background images for different pages.

Are you ready to tackle the content area? We're going to use some nesting divs, like this:

retroWeb/index.htm (excerpt)      
     
<div class="content">      
 <div class="contenttop">      
   <div class="contentbottom">Content</div>      
 </div>      
</div>

The basic idea behind this method is that we'll attach the top border (with the rounded corners) to the .contenttop div, attach the bottom border to the .contentbottom div, and attach the middle background to the .content div. Because .contenttop and .contentbottom are nested inside the .content div, those background images will appear on top of the middle background image. We'll set some padding for .contentbottom for the text.

retroWeb/styles.css (excerpt)      
     
.content {      
 width: 532px;      
 background: url('images/contentbg.gif') repeat-y;      
}      
     
.contenttop {      
 background: url('images/contenttop.gif') no-repeat;      
}      
     
.contentbottom {      
 background: url('images/contentbottom.gif') no-repeat bottom left;      
 padding: 10px 15px 10px 15px;      
}

The page now looks like this:

A few more adjustments...

First, I'll set the other margins of the .title to "0" so that there's less space between the title and the content block.

retroWeb/index.htm (excerpt – style code in the <head> of the document)      
     
.title {      
 background: url('images/title.gif') 20000px no-repeat;      
 height: 56px;      
 margin: 0px 0px 0px -20000px;      
}

I make some minor adjustments for the footer div.

retroWeb/styles.css (excerpt)      
     
#footer {      
 text-align: center;      
 font-size: .9em;      
}

I also fix the logo div alignment so that it's centered.

retroWeb/styles.css (excerpt)      
     
#logo { text-align: center; }

Now, I'll add the rest of the content. I decide to make another title graphic for a "second" section on the page, duplicate the .title class, renaming it .title2, and change the background URL:

retroWeb/index.htm (excerpt – style code in the <head> of the document)      
     
<style type="text/css">      
.title2 {      
 background: url('images/title2.gif') 20000px no-repeat;      
 height: 56px;      
 margin: 0px 0px 0px -20000px;      
}      
</style>

By duplicating what I've already done with the original title and content box, it's easy enough to create a second section on the page.

retroWeb/index.htm (excerpt)      
     
<h1 class="title">Lorem ipsum</h1>      
<div class=" content">      
 <div class="contenttop">      
   <div class="contentbottom">      
     <p>... dolor sit …</p>      
   </div>      
 </div>      
</div>      
<h1 class="title2">Integer nec orci</h1>      
<div class="content">      
 <div class=" contenttop">      
   <div class="contentbottom">      
     <p>...dolor sit amet...</p>      
   </div>      
 </div>      
</div>

And here's what it looks like:

Next, I'll create a style for headings that are within the white content area. This time, I want the HTML text to show up, but I want a background image behind it. Because I have a set height and padding, I have to use the box model hack again.

retroWeb/styles.css (excerpt)      
     
.heading {      
 background: url('images/heading.gif') no-repeat;      
 height: 37px;      
 padding-top: 5px;      
 font: bold 1.4em Helvetica, Arial, Verdana, sans-serif;      
 margin-bottom: -10px;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 height: 32px;      
}      
 html>body .heading { height: 32px; }

Here's what it looks like:

As I look at the screenshot, I realize that I never changed the navigation font color and style from the previous Edgy Eye-Candy Flavor. In a final modification, I go back to the style sheet to make a quick change:

retroWeb/styles.css (excerpt)      
     
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {      
 display: block;      
 font: bold .9em Verdana, Arial, Helvetica, sans-serif;      
 color: #8A4C03;      
 text-transform: uppercase;      
 text-decoration: none;      
 text-align: center;      
 padding-top: 11px;      
 width: 141px;      
 height: 39px;      
 background: url('images/vertical.gif') no-repeat;      
 /* box model hack */      
 voice-family: "\"}\"";      
 voice-family:inherit;      
 height: 28px;      
}

And at last, our Curiously Strong Retro Flavor page is done!

Click to view larger screenshot in a new window [27].
Click to view HTML page in a new window [28].
Click to view CSS file in a new window [29].

Retro Resources

If you're interested in getting more inspiration for retro designs, visit kelieresources.com [30] for links to sites with retro clip art, colors, design and more.

Summary of Curiously Strong Retro Flavor

Let's review the additional skills you've learned in this section…

In Photoshop, you learned to:

• Use Define Pattern to capture a pattern.
• Use the Paint Bucket to apply a pattern.
• Use the Polygon tool to create a sun-ray graphic effect.
• Use Free Transform to change the shape of an object.
• Apply Strokes to help with a retro effect.
• Use the Character Palette to adjust the space between lines of text (the leading).
• Save images for Web using the Slice tool.

With HTML/CSS, you learned to:

• Create a two-image hover button effect using CSS.
• Display an image in place of text using CSS.
• Use nested divs to create a content area with a top and bottom border image.
• Add a background graphic to spice up a text heading.

Conclusion

There you have it: how to make sites that have that crisp and clean CSS flavor, or graphic-intensive table-less sites, from start to finish. You'll find that many of the basic techniques, like enhancing unordered lists for navigation menus, creating liquid or static-width layouts, and using nested divs for rounded corners on content areas, are tools that you'll draw on over and over again in CSS-based Web design. And if you're trying to improve your graphics skills, the many Photoshop tips and techniques in this article have hopefully given you a few more tricks to try!

[1] http://veerle.duoh.com/comments.php?id=208_0_2_10_C
[2] http://www.sitepoint.com/examples/psdesigns/psdesigns.zip
[3] http://i2.sitepoint.com/graphics/cc-13-big.jpg
[4] http://www.redmelon.net/tstme/3cols2/noborder.htm
[5] http://i2.sitepoint.com/graphics/cc-19-big.jpg
[6] http://tantek.com/CSS/Examples/boxmodelhack.html
[7] http://www.sitepoint.com/article/browser-specific-css-hacks
[8] http://i2.sitepoint.com/graphics/cc-26-big.jpg
[9] http://www.sitepoint.com/examples/psdesigns/ccweb/index.htm
[10] http://www.sitepoint.com/examples/psdesigns/ccweb/styles.css
[11] http://i2.sitepoint.com/graphics/cc-27-big.jpg
[12] http://www.sitepoint.com/examples/psdesigns/ccweb/2column.htm
[13] http://www.sitepoint.com/examples/psdesigns/ccweb/styles.css
[14] http://www.sitepoint.com/examples/psdesigns/ccweb/page.htm
[15] http://www.redmelon.net/tstme/3cols2/
[16] http://www.alistapart.com/articles/negativemargins/
[17] http://www.sitepoint.com/article/masking-techniques-photoshop
[18] http://i2.sitepoint.com/graphics/eec-16-big.jpg
[19] http://i2.sitepoint.com/graphics/eec-34-big.jpg
[20] http://www.sitepoint.com/examples/psdesigns/eccweb/index.htm
[21] http://www.sitepoint.com/examples/psdesigns/eccweb/styles.css
[22] http://i2.sitepoint.com/graphics/eec-37-big.jpg
[23] http://www.sitepoint.com/examples/psdesigns/eccweb/3col.htm
[24] http://www.sitepoint.com/examples/psdesigns/eccweb/styles.css
[25] http://i2.sitepoint.com/graphics/r-21-big.jpg
[26] http://www.wellstyled.com/css-nopreload-rollovers.html
[27] http://i2.sitepoint.com/graphics/r-44-big.jpg
[28] http://www.sitepoint.com/examples/psdesigns/retroweb/index.htm
[29] http://www.sitepoint.com/examples/psdesigns/retroweb/styles.css
[30] http://www.kelieresources.com/keli.htm