Article
About the Author
Corrie Haffly
Corrie is the lead designer and developer for PixelMill and their in-house brand, jgtemplates. This would-be triathlete has a mathematics degree but wishes she had double-majored in computer science and art instead. Maybe next time...
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes
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 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 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.
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:
- Go to Image > Duplicate. In the "As" field, I type "logo"; this will be the new file name.
- 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:
- 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.
- 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. 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.
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;
}