Making a website with Photoshop
This tutorial will show you how to start building a website with Photoshop. It will not show you how to make the website itself, only the making of the layout and the basic graphics. The website we're going to make is a simple, 740 pixels wide, "header - menu - content"-page. In other words a clean and simple layout. I used Photoshop 7.0 on Windows XP. Earlier versions of PS will most likely work just as well. Lets get started.
Step 1
Create a new transparent image - 740 pixles wide and 400 pixles high. When we're done this will more or less be the header and left-hand menu.
Click to enlarge
Before we start making the graphics we need to lay out a few lines that will help us positioning things later.
Select the Measure Tool and pull a straight 80px high line from the top. Hold Shift to get a 90 degree angle.
Now make sure Snap is ON (View > Snap).
From the top-ruler (Ctrl+R to show/hide) pull a line down to the bottom of the measure tool's line. It should
snap right in when you're close.
This line will be where the bottom of our header is.
Select your measure tool again and pull a straight 110px wide line from the left side of the image. Now drag a line from the vertical ruler to the tip of the measure tool's line.
Step 2
Create a new layer.
Click to enlarge
Now select a foreground color you want your header and menu to have in it's background. I will use blue (#0000FF).
We're going to make rounded edges on our header and menu so select the Rounded Rectangle Tool. Settings: Fill pixels,
Radius: 15px, Mode: normal, Anti-aliased On.
Now drag from the bottom right corner of the menu to the top left corner of the image. Do the same from the bottom
right corner of the header to the top left corner of the image. Draw some extra rectangles over the corners:
top-right, bottom-left and top-left. Skip this if you want rounded corners there aswell, its up to you.
If PS created a new layer for each rectangle, merge them into one. Name the layer BGcolor.
Step 3
If you already have a logo you can put it into your header where you want it.
Click to enlarge
I will only make a simple title with a cool font and add some effects to it.
Create a new layer and select the Text tool. Type the title you want. To add some effects to the text double-click
your new text layer. I used: drop shadow, white outer glow, bevel and emboss (inner bevel, direction: up) and a
blue-to-white gradient overlay. The result will vary alot depending on font, font size, thickness etc. so just
try different settings until you find one you're satisfied with.
Don't click OK yet. We're going to save these settings so we can easily apply them to the links in our menu. Click New style... Give it a name of your choice and make sure Include Include layer effects is ON and that Include layer blending options is OFF.
Now click OK to save the style, and then OK to apply the settings.
If you want you can use simple text links in your menu. In that case jump to step 6...
Step 4
Click to enlarge
We need to split the menu in pieces, one for each link. My menu is now about 320px high and I'm planning on having 5
links in the menu. I subtract 40 pixels and split the remaining 280px with 5. This gives me ~55 pixels of height for
each button.
I will use the measure tool from the top of the menu and draw a 55px line. I then drag a guideline from the
top ruler to the tip of the measure tool's line. Do the same with each button until you have all the guidelines
where each button has its bottom.
Step 5
We now need to fill in the title of the link to each "button". Create a new layer for each button and type the text you want within the button. Choosing the same font as in your header will look better than if you use a different font. Using guidelines will help you position the text where you want it.
Click to enlarge
To add the effects we used in the header double-click the text-layer, double-click the text layer in the layers panel. Then select Styles at the top of the list on the left, then click the one we created earlier and click OK. Repeat with all the text layers in the menu. The font in the header is probably bigger than the font in the menu, so you may have to adjust the settings in the used effects to make it more readable.
Step 6
Click to enlarge
In this step we're going to slice the image into separate parts. Make sure View > Extras is ON (Ctrl+H to turn on/off).Lets start with the header. We want it to be one big image. Select the Slice Tool and drag a square around the header. If Snap is ON it should snap right in at the guideline we made to show where the header ended. This will be slice number 01 - as illustrated by the number in the corner of the slice. Now move on to the menu: drag a square around the first button. From guideline to guideline. Do the same with all the buttons and the bottom part of the menu (the one with the rounded edge).
Notice that the empty area outside the menu and header has a grey background where the slice number is. This mean that it isn't defined as a slice. In this case it's nothing at all.
Step 7
Click to enlarge
We're almost done!
Click File > Save for web. Select the Optimized tab at the top of the new window that appears. This gives you a
preview of how the images will look when they are saved as normal gif or jpg images. Select all the slices we created
(hold Shift + left-click the slice), not the one in the middle tho, since we don't want it to be an image.
Select either jpeg or gif. Gif is much better than jpeg on large single-colored areas. Other than that there are pros and cons with the two extensions. Select the one you feel gives you the best balance between high quality and small filesize. Remember that there are still many people out there that don't have broadband. I managed to squeeze the total filesize to 17KB with the settings you can see on the screenshot.
When you've found a balance you're happy with click Save:
File name: whatever you want it to be. Keep it short and without spaces
Save as type: Images only
Settings: Default
Slices: Selected Slices.
Click save.
The files will now (by default) be put in an images-folder in the location you choose to save it. The images is named [name]_[slice-number], for example "img_01.gif"
Now all you have to do is create a website layout, for example with tables, that is based on the sizes of the images you just created.
If you find it hard to get started you can download the complete project. It contains the Photoshop file, the saved images and a html file with the layout.
If you used this guide to make your own website, please let me know. I'd love to check out the results :)
Update - January 2005
When I'm writing this, this tutorial is aproximately one year old. Things have changed alot since i wrote it. For example, it's no longer common (and not recommended) to make website layouts with tables. That's why I made a version 2 of this tutorial, where the part about making the layout in HTML (and CSS) has been written to meet todays requirements to an accessible and semanticly correct website.