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. The main thing you're going to learn is how to use the slice tool. Our website will have a horizontal header + menu, then some content, and a footer. Quite simple, but it still can look really nice and stylish.
I'm assuming you are somewhat familiar with Photoshop, so most of the time I'll just say what to do, not how to do it. 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. Write the different menu links you'll need. If it doesn't make it too hard to read give the text a color that is similar to the color(s) you used in the header. Also don't make it too small. Remember that there may be people with a resolution of 1600*1200 or more that's going to view the website - it would be nice if they could read it too :p

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 (there are other ways, but those sucks so we're doing it this way). Now drag a guide in the middle between each link in the menu. Like this:

It doesn't have to be exactly in the middle. Just do the measuring with your eyes. Once you've done this we can start making the slices. Select the slice tool and drag it around the gradient at the top, then 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 or jpeg - depending on what you have in your header. 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 is the best way to compress. Then click save, and check that the settings are OK.

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.

Part 2 Cascading Style Sheet - CSS

Now I'll show you how to make the images we just created into a website. Since tables suck open up your favourite HTML-editor. I prefer Dreamweaver, but you mught 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:

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:

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:

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 wont 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!

By the way... CSS and HTML is valid and have been tested in Internet Explorer 6, Mozilla Firefox 0.8 and Opera 7.