Making a website with Photoshop - Version 2
This tutorial will take you through the steps of making some graphic elements, slicing them, and saving for use on a website. After that I will show you how to position the elements using CSS - no tables, woho! Let's get started..
The website we're going to create is just a simple one. It will have a header + menu, then some content, and a footer. I'm assuming you are somewhat familiar with Photoshop, and know how to select the different tools and use them. If you have any questions, send me an email and I'll answer if I can :)
Step 1
Open up Photoshop and make a new 770x500px image with a white background. Now make sure you've got the rulers activated. If not press Ctrl+R to make them visible. Now drag a horizontal guide 20px down from the top of the canvas. Also drag one down to 150px, 170px, and finally one that is 20px from the bottom. You should now have four guides that will help you position things later.
Step 2
Now we're going to fill the top 20px of the canvas with a gradient. Select your gradient tool and open up the gradient editor. Now make yourself a nice gradient. Here's mine:
Select the rectangular marquee tool and make a selection around the top 20px where we placed the guide earlier. Now make it a new layer and fill it with the gradient you made. Name the layer header-top. Also give the layer a 1px dark-gray inside stroke.
Step 3
Now for the fun part - main header contents. The main header is the area between the gradient we just made and the guide we made 150px from the top. I'll leave it up to you to decide what you want inside the main header. A cool effect or someting should do the trick. I'm just going to have a few colors, a title and a symbol as you can see in the finished website. Make sure you use different layers for the different things inside the header so it's easy to make changes later.
Step 4
Time to make the menu. This is the 20 pixels below the 150th pixel. Select your gradient tool again and change the position of the different colors so that it is slightly different than the gradient area above the header. Drag a selection around the menu-area and make it a new layer. Name it menu_bg or something like that. Now fill it with the gradient you just made and - as we did with the top-gradient - give it a 1px dark-gray inside stroke.
Step 5
Now use the type tool and position it on the menu_bg layer. Type in all the different menu links you want, and remember that it's a good idea to clearly seprate them (with symbols like "-" or "|" or whatever).
Step 6
Now we need to make a footer. It'll just be a gradient like the one at the top and some text like a copyright
message or whatever. Duplicate the header-top layer we created in step 2 and drag it to the bottom of the canvas.
Might also be a good idea to rename the layer to something more 'footer'-ish ;)
Then add some text to it - if you want.
Step 7
Now we need to split this header and footer into multiple images. Make sure snap is on. Since our menu will be images, we need to make each link a separate image. Now drag a guide in the middle between each link in the menu. Like this.
Once you've done this we can start making the slices. Select the slice tool and use ot to drag a square around the gradient at the top, then one around the main header, each of the menu buttons and the remaining part of the menu gradient, and finally the footer. You should then have something like this.
Now go to File > Save for web. Hold shift and select all the slices. Select gif, jpeg or png - depending on how your header looks. If you have lots of colors and details, you should use jpeg. But if you have, like me, relatively few colors and large single-colored areas, GIF or PNG is the way to go. Then press save. Also take a look at all the different settings you can use when saving, and experiment a bit to get the desired results.
That concludes the Photoshop-part of this tutorial. If you want to learn how to make these images into a CSS-based website read on.
Cascading Style Sheet - CSS
Now I'll show you how to make the images we just created into a website. Since tables suck (more info
here,
here,
here, etc..) we're going to use a div+CSS-based layout.
Open up your favourite HTML-editor. I prefer Dreamweaver, but you might aswell do it with notepad.
We'll split the page into four pieces - header, menu, content and footer. First of all we'll make a "frame" in which
we'll put the four pieces:
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-top:15px;
padding:0px;
text-align:left;
background:#FFFFFF;
border:1px solid black;
}Margin-left and -right will position it in the center of the screen. I've also given it some margin-top so that it doesn't get completely squeezed. Now let's position the header, menu, content area and the footer:
#header {
width:770px;
height:150px;
padding:0px;
}
#menu {
width:770px;
height:20px;
padding:0px;
}
#content {
width:764px; /* 770px - padding = 764px */
padding:3px;
}
#footer {
width:770px;
height:20px;
background:url(./path/to/footer.gif);
}
/* Some basic text formatting: */
body,p,a {
font-family:Verdana, Arial;
font-size:12px;
}Save this as style.css.
The HTML document
Once we're done with the CSS, we can start making the HTML-document.
At the top of our HTML-document we need to have the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./path/to/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your title here</title>
</head>
<body>
The red text tell the browser to use the CSS file we just created. Make sure the path is correct.
To prevent that this page will be 2 miles long, I won't show you the complete HTML code here.
I've just created an example of how the page will look like.
To view the code go to View -> Source in your browser. I've inserted some comments here and there, so hopefully you'll
understand what I've done. If you have any questions or comments feel free to email me.
Good luck!