Get Cooking with Photoshop and CSS - 3 Low-fat Recipes

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

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!