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

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.

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