Step One – What We Will Be Making

I suppose you might want to know what our design will look like once finished. I’m not going to make you wait any longer; here is what we will be building throughout this tutorial.

The reasons this design will be fairly appealing to your readers are:

• Usability, user-friendliness.
• The “living” atmosphere, with the picture and shadows.
• Content-centered, the layout doesn’t take the reader’s attention from the useful information
• The blog and twitter integration creates a closer relationship between the reader and your company.

Step Two – Structure

Something utterly important when starting the design of a website is to define a clear structure that you will follow no matter what. The first reason this is important is because you want your content to be as visible as possible, and not lost in a messy layout. The second one is that you’ll want to guide your reader’s eye through all the information contained on the page. The human mind will start reading a web page from the top left and will scan it all the way down to the bottom right. For that reason, putting a sidebar at the left of your content could distract your reader and in a worse-case scenario, even lose him.

I’ve chose the following structure for this design:

There are a few reasons for which I chose such a structure:

• As I’ve already said, it’s content-centred.
• It has a professional website feeling to it; it doesn’t look like a blog.
• It is not actually complicated to code!

Step Three – Getting Started

In this tutorial, I’ll be using Photoshop CS3 on Windows Vista, but you should be able to follow it with any CS version of Photoshop, since the techniques used are fairly easy. I’ll be sure to point out differences between Windows and Mac too, if there are any.

That being said, let’s get started! We are going to start with a blank document of 1600 by 1200 pixels, with a transparent background, a resolution of 72ppi and RGB 8 bit in Colour Mode should do just fine.

You may ask yourself why I’m using such a wide document. The reasons are simple:

• It gives you spaces to work, and hence doesn’t look cluttered.
• It shows you do care about widescreen resolutions when designing, which many web designers don’t.

Step Four – Setting Up Our Workspace

You’ll realize while reading this tutorial that I am somewhat of a guide geek. I simply love having rulers to guide me in my design process. You should therefore start by displaying rulers. Go to View->Rulers or simply use the shortcut Ctrl/Cmd + R. Make sure they are displayed in pixels by right-clicking on a ruler and choosing "Pixels" from the list.

Next, we will set up some vertical guides. Activate Snap (View->Snap or Shift + Ctrl/Cmd + ; ), and start by putting a guide at 800 pixels. This is where the snapping comes in handy because it “magnifies” the guide to the centre of the document. We will also need guides at 400px and 1200px. Why so? Well simply because 1200 – 400 equals 800 and that we want our design to display properly on 800*600 screens too.

The last thing we need to do is to set horizontal guides at 450px for the middle, and 300 and 900px for a top and bottom margin. I usually also set guides at the edges of my document to grab the corners more easily.

This leaves us with a coherent grid layout that we will be able to develop for our design.

In this case I have just coloured our otherwise transparent background so that you can see the guides better.

Step Five – The Status Bar

We will start our design from the top and then design our way down to the footer. This ensures minimal issues with vertical spacing.

I like keeping things organized in my PSD, so we are going to start by creating a new Layer Group called Status Bar, in which we are going to keep all our layers related to this bar.

The Shape

Before going any further, we obviously need to make our background ready. We want it to take up the entire width and have a height of 50px. That’s why we are going to place a new horizontal guide at 50px.

Then, in a layer group called Box, create a new rectangle with the Rectangle Tool (U). The colour of this rectangle should be #f8f8f8, which is a very light gray, and not as bright and tiring for the eye as white.

The following step concerns the border. We want to separate this bar from the rest of the design, so a bottom border is appropriate here. Create a new layer called Border then grab the Single Row Marquee Tool, hiding under the Rectangle Marquee Tool (M), and select a line right under the shape we recently created. Fill the selection with #959595 using Alt + Backspace. Then go to Select->Transform Selection and hit the down arrow once in order to make the selection shift down by one pixel. Now fill it with white (#FFFFFF). This makes a pretty nice beveled border:

The final step is to add a little shadow to create some volume. Create a new layer called Shadow and add a clipping mask between the Background layer and this one using Ctrl + Alt + Click between those two layers. Grab the Gradient Tool (G) with a linear gradient from black to transparent, and make a 15px high gradient starting from the bottom of the box. Set the layer’s opacity to 15%.

Welcome Message

Now that our box is created, we can start populating it with some text and other useful things. We will start with the welcome message. In the Status Bar layer group, create a new layer called Welcome.

Now, with the Type Tool (T), and starting at 400px from the left border, we are going to write our message. Be sure to centre the text vertically within the box as well.

The font I’m using is:

• Arial Regular
• 12px
• Smoothing: none
• #515151

This will be our default paragraph font.

Actions

Let’s get done with the action bar. I like using such a bar in my web designs because it’s a place where you can place elements that just don’t fit anywhere else.

Create a new layer group called Action bar, in which we are going to draw a Rounded Rectangle (U). It should be 30px high to leave 10px margin top and bottom and wide enough to wrap our links. Make it 55% opaque and align its right border to our centre guide.

Next, just write some links that would be relevant for your site. I chose login, sitemap, and license.

Notice that I’m still using the same Arial font with a white colour.

Search Box

A very important feature of this top bar is the search field. I’ve chosen an Apple-like form because I think it looks very smooth, and it’s actually very easy to design as well.

Start with the Rounded Rectangle Tool (U) with a radius of 10px, and make a shape that is 20px high in order to make the edges look perfectly round. Name this layer Field and put it in a new layer group called Search Box, align it with the 1200px vertical guide, and add the following layer styles:

Then, using the Custom Shape Tool (U), and the Magnifier Glass shape from Web.csh (which is a default shape but that you may have to load), make a little icon inside the field in order to show what the field is for.

Finally, type the word "Search" in the field using Arial and the dark grey we used for the welcome message.

That’s it! We’re done with the Status Bar, you can fold in all the layer groups to make our layer palette cleaner.

Step Six – The Header

The most important aspect of a web design is probably the header. That’s the place where you can unleash your creativity and make your website look astonishing. However, your header also needs to display a logo or a text bloc with the name of your company.

I’ve decided to use a picture as my header for this design, because it’s easy and fast to make, and it looks just brilliant. I found this great picture over at stock.xchng, but feel free to select your own. The great thing with using a picture as a header is that you can totally change the feel of your website just by changing the image. You can even have a different image on each page!

Adding the Image

First, we’ll need to create a new layer group called "Header". In that group, using the Rectangle Tool (U) and the guides that we drew earlier, make a shape between 50 and 300px high. This is going to be our box. Then import your image into your document using drag & drop. Resize it, and create a clipping mask between the image and the shape.

Notice how we already have this really cool look to our design?

Logo

You should obviously put your own logo here, but for the purpose of the tutorial, we’ll just make an easy one using some typography tricks.

I’m going to use the font Myriad Pro, which should be installed on your computer with Photoshop CS. If not, you can try to find another cool font because Myriad is unfortunately very expensive.

Using this font:

• Myriad Pro
• 48px
• #4d4d4d
• Smoothing: Smooth

I’m writing the name of a ficticious company: Roadside. This layer is aligned to the 400px vertical guide.

Next, the subheading “Studio” is going to be written underneath it. I’m still using Myriad Pro, but this time with the following settings:

• 12px
• #6ebacd
• All-Caps
• Bold
• Letter-spacing: 2300

This makes the subheading the same width as the company name, without taking too much attention from the reader. To keep things organized, I’m putting this into a layer group called "Logo".

Now that we are done with the header, let’s get started with the huge part of the tutorial, the content!

Part Seven – The Content Box, Wrapper, and Tabs

To make the content box, we need to decide how high the footer should be. I think 100px is good; not too high nor too small. We don’t need to write a whole lot of text, so 50px is enough. Then we also want the bottom of the image to make the footer less boring. We’ll give that 50px too.

We should therefore put a new horizontal guide at 1100px. To keep things tidy, create a new layer group called Content too. I’ll explain later why keeping the PSD clean is very important, but for the moment, you’ll just need to believe me when I tell you it is.

The Box

Create a new Layer Group called Box, and using the Rectangle Tool (U), and the same light gray that we used for the Status Bar (#f8f8f8), draw a rectangle going from 300px to 1100px high, taking all the space horizontally.

Next, we need to create borders. We are going to use the same borders between the content box and the image that we did between the status bar and the image. Instead of doing the whole selection thing again, just fetch the Border layer in the Status Bar / Box layer group, duplicate it twice using Ctrl / Cmd + J, and call those two layers Border top and Border Bottom. Then put them in the Content / Box layer group. You can leave the Border Bottom layer as it is, and just place it at 1200px high; however, you’ll need to flip Border Top vertically to have a consistent border around the image. Enter Free Transform Mode (Ctrl / Cmd + T), right-click the box, and select Flip Vertical. Put the border at 300px high.

The final step is to add shadows to the top and the bottom of the box. We are going to do the same thing we did before for the shadow; create two layers over your Shape, Shadow Top and Bottom, and add a clipping mask between them. Then grab the Gradient Tool (G) with a black to transparent gradient, and make a 15px gradient on each layer. The layers should be 15% opaque.

Page Wrapper

Instead of starting with the tabs and the navigation menu, we’ll just make the page wrapper first in order to set the width and have something to go after.

We want 50px between the header and the tabs, to make the design breathe. The tabs are going to be 35px high. We should therefore set up some guides (yes, again!) at 350 and 385px. To even things out, the page wrapper is going to be 365px high, so we’re putting our last guide at 650px.

Next, create a new layer group, "Wrapper" in our Content group. This is where we are going to put our layers now. You also need three layer groups inside it: Box, Slideshow, and Message.

Out vertical guides will now come in handy. Using the Rectangle Tool (U), make a white (#ffffff) rectangle in the newly defined box. Then add the following layer styles to it:

This is what it should look like:

The Slideshow

Let’s start with the slideshow. Slideshows, carousels, sliders, or whatever you want to call them, are an effective way to display a lot of pictures, diagrams, or any other media in a very small box. It’s fairly easy to set up in a website, and with some smooth JS effects, it does look really cool! That’s why I like slideshows very much.

But before we begin with the content of the page wrapper, make 15px worth of padding around the box (yes, you should use guides). We also want to cut this wrapper in two parts; one with the carousel, and one with the little text box. Luckily, our 50% width guide does this for us. However, we don’t want the text and the slider to be right next to each other, so we should set 15px padding on each side of the middle of the box.

This is what it should look like:

As you can see, the 50% height guide separates our box in two vertical boxes too. Let’s take advantage of this. Here’s what the structure of our box will be:

Now we can really start building the slideshow. Make a black rectangle covering the entire Image box (Cf. Illustration), then add a 1px inside stroke with the colour #a7a7a7. Next, create a new layer called "Image" over your rectangle and add a clipping mask between them. You can now import the picture you want, resize it, and make it look good. I’m using one of my web designs that you can find here if you want to use it for the purpose of the tutorial. In a live website however, you should obviously use your own.

Now we need to create our command panel. Using the Rounded Rectangle Tool (U), with a radius of 5px and a black colour, create a box that’s 30px less wide than your image. Make sure to hide the rounded corners at the top behind the image. Set the layer’s opacity to 55%. Considering I’m a Layer Group maniac, I’ve created a new one called Commands, which I put behind our image layer.

Then, using the Polygon Tool (U) with three sides, make two triangles to act as your previous and next commands, then, with Arial 12px white, write the title of your image.

Great! Now we’re done with the slideshow. Notice how it is extremely simple, nothing distracting from the image. That’s what I meant with content-centred and not layout-centred.

The Message

Before we go any further, we should just add a separator between our two blocks. As I said before, the middle of the document cuts the box in two equal parts, but we still want to emphasize that using a 1px border. Create a new layer called Separator, and then use the Single Column Marquee Tool to make a line at 900px wide. Fill it with black, and use the Rectangle Marquee Tool (M) to clear the exceeding parts of the line. Set the layer’s opacity to 30%.

Ok, now that we've done that, we have to find a catchy headline for our welcome text. The title here will obviously depend on what kind of website you are building. I chose to design a layout for a web design agency, so I’ll just put “We build great websites!”. Yes, I know it does sound a bit over-confident, but the thing is it does push the reader to look further into your site.

This heading will be the second element visitors will see after the logo, so we have to make it stand out. I’m still using the font Myriad Pro for my headings:

• Myriad Pro Regular
• 24px
• Smooth
• #6eb9cc

This will be the default heading font.

Notice how the colour we use is the same one that we used for the subheading in the logo?

Use our guides to place the heading with the correct padding.

I’m not going to bother with the text right now, since this is more about the design than the content. So, I’ll just use a simple Lorem Ipsum placeholder text.

A few details about text in web design: Don’t forget that text is ugly. Text makes a web design look cluttered, and difficult to read. To prevent this, we will need to make our text look nice. A trick for doing this is to have as little text as possible, to keep the paragraphs short, and to use 1.5x line spacing. This last tip makes your text look friendlier and more readable than a single line spaced text.

Click and drag with the Type Tool (T) in order to create a text box, and then fill it with some random text. I’m using my paragraph font, Arial, here:

• Arial Regular
• 12px
• Line-spacing 20px
• #4d4d4d

The following step will be to add some contact information. It is a good idea to provide this on your home page, considering it creates a closer relationship with your client, showing that you’ve got nothing to hide.

To emphasize this information, we’ll use two of Photoshop's default custom shapes: the phone and the letter from the file objects.csh.

Start with your phone number. Grab the Custom Shape Tool (U), and select the phone shape. Using the colour #7d7d7d, draw a small phone centred on the 600px guide, then using our Arial font, enter your phone number. I decided to put this in a new layer group called "Contact Info".

On the same line, do the same with your address. Since an address is rather long, I decided to split it on several lines, but you can decide to keep it on a single one if it fits your needs.

M’kay, now that this welcome page is done, let’s make our tabbed navigation menu.

Navigation Bar

I chose tabs because I think it’s a great way to display pages with. It feels really straight forward and natural because of the fact that we are used to flicking through tabs in real life. I also decided to include previous and next commands. This may not be relevant to your site, but in this case, your reader will land on this welcome screen, then he might want to go and take a look at the portfolio, then read something about the company, and finally contact us if he is interested in our services. To make this process more easy, next and previous are really handy.

We’ll need to create a new layer group under the “Box” layer group before we get started. Call it Tabs. To make things tidier, I’ll just create a new layer group for each tab too, respectively Previous, Home, Portfolio, About, Contact, and Next. We won’t type any text right now. Instead, we will just create the structure. To give you an idea, this is what it will look like once it’s finished:

Let’s start with the right side. Grab your Rounded Rectangle Tool (U), with a black colour and a radius of 5px, and then make a little nice rounded rectangle at the top right edge of the content box. Hide the rounded corners at the bottom behind the box. Don’t forget that you want the top of your tabs to be 50px under the header image, so use the created guide to help you.

We're not done yet. We need to get rid of the rounded corner on the left. To do so, use the Convert Point Tool, hidden under the Pen Tool (P), click on the path to make the anchor points appear, then, with the Delete Anchor Point Tool, delete to two anchor points at the extreme left. Photoshop will try to compensate this by dragging the handles and this will create a weird shape. Just grab the Convert Point Tool again, and click on the two remaining anchor points on the left to reinitialize the handles. Review the animation below to make things clearer:

Great, now we just need to set the opacity to 55%. The next step is to add the rectangles for each page. Don’t forget to put it in the correct layer group. You should obviously use the Rectangle Tool (U), with a black colour, and then set the opacity to 55% as well. Leave some margin between each rectangle too to make things cleaner. This is what you should have now:

The last part of the structure is the previous button shape. You’ll need to use the Pen Tool (P) for this one, so go ahead and learn how to use is it if you don’t already. It’s not a waste of time: the Pen is probably Photoshop’s most powerful tool.

If you know how to use the Pen Tool (U), draw a shape like this one:

Then place it in the Previous layer group, and on the left side of the current shapes.

For the links, I’m using Myriad Pro again, this time size 14, and #f6f6f6 as colour. Since “Home” is our current page, we are going to set its weight to bold in order to emphasize it. I usually show the hover effect in the menu as well, so that explains why we should put the “Portfolio” link in blue #6eb9cc. The links are obviously centred to give it a nicer look.

Now, using the same technique that we used to create the slideshow commands, we should now create two arrows, one pointing left, and one right, to symbolize Previous and Next. Make your Polygon Tool (U) burn!

This looks great! However, it does look a bit weird to have the blue link all alone. To symbolize the fact that it is a hover effect, we’ll just add a cursor over the link. You can grab this one:

This is what your finished tabbed navigation menu should look like:

It does look pretty neat doesn’t it? Believe it or not, we are now done with the Wrapper. This was the more “corporate” area of our design. What we are going to do now is the more entertaining part, I’m talking about the blog module and the twitter module.

Step Eight – The Blog Module

We will need to set up a few guides here as well. To keep consistency in our design, we will have a 50px margin between the wrapper and the modules. This makes us place a guide at 700px high. We also need a new layer group inside the content layer group called Module 1 – Blog.

I’m a huge fan of icons in web design. It adds a little extra something that gives a nice overall feeling to the design. However, the icons we use have to be relevant for the content, and should fit the rest of the design. For this tutorial, I chose Crystal Project by Everaldo, which is a huge icon set under LGPL license, which allows us to use them wherever we want without having to pay. And the best thing about this is that they are simply gorgeous! You can reach them here.

Once this is downloaded, we need to find an icon that suits our needs. We want something reflecting the idea of blog, news, or updates. In my opinion, the news.png icon from the mimetypes folder does this more than well. I chose the 64*64px size, which is just the right size for our design.

The Header Bar

Great, now import it into your document by Drag & Dropping it. Resize it a little bit, if you find it necessary. I don’t find it too big, so I’ll just keep it like so. Align it with the intersection of the 700px high and 400px width guide.

Now we need to give our module a header. Instead of using Myriad Pro here, which was our convention for headers, we’ll use Arial. Why? Well I think it looks better. But in order to make it look like a heading, we’ll add a black rounded rectangle behind the text.

Grab your Rounded Rectangle Tool (U), with a black colour, and a radius of 5px, and make a rectangle that is about 30px high and that stops 15px before the middle of our document. We’ve already got a guide there, so there is no need to add a new one. Hide the left corners behind the icon to show that the icon is related to the entire block, and finally set the layer’s opacity to 55%.

Now we just need to add our text. I think making this blog and twitter area a little more intimate is a good idea. So instead of writing something like “Latest News”, we’re going to write something a bit longer and more personal: “Latest entries from our blog”. Use this font:

• Arial Regular
• 12px
• #f6f6f6
• Smoothing: none

And write our text. Be sure to offset it a little bit from the icon to keep things spaced. I decided to put those layers in a layer group called Header Bar too.

Entries

Now we need to populate this module with a few entries. The good thing here is that we just need to create one, then duplicate it and just change the text.

Start by putting a vertical guide at 445px. This adds an extra 15px margin to our block, which shows that the header actually contains the entire entry section, and not just a simple link.

I’m going to use a lipsum placeholder text here as well, but you can use an existing entry from your blog if you'd like.

For the title of the entry, I’ll use our heading font, with a smaller size however:

• Myriad Pro Regular
• 18px
• Smooth
• #6eb9cc

We are not going to offset this the entire way to our recently added guide at 445px. Instead, we’ll start typing at 430px, and offset the content of the entry to 445px. Place it 15px under the header bar.

Then we need to add some meta info such as the author and the date. This is not very important information, so we’ll type it in a small font:

• Arial Regular
• 10px
• Smoothing: None
• #707070

To make our entries a little more condensed, we’ll just put this info on the same line as the title. I just chose a random name and date here.

Align this text to the right.

For the content of the entry, we’ll just put a few descriptive lines to keep as little text as possible on the screen. This text should be offset to 445px. Using the Type Tool (T) we can make a paragraph bloc to make thing easier for us. The font I’m using is:

• Arial Regular
• 12px
• Smoothing: none
• #525252

As you may have noticed, I put those three layers, Title, Meta, and Content in a layer group called "Entry 1". This will make things easier for us since we will just duplicate it two times by dragging them over the “New Layer” button. Rename those groups"Entry 2" and "Entry 3", respectively, and place them one under each other. You should obviously leave some margin between them, but just not too much or it will look weird. This is what you should have:

You’ll have to agree that it does look pretty awkward with the same entry three times. To change this, just generate some new Lipsum and place it there.

Read More Button

What if the reader actually wants to visit the blog, you might ask. Well the first thing is that the titles will be links in the coded design. If your reader just wants to go to the home page of your blog however, he won’t be able to do it if we leave it like so. We could have added a link to the header bar, but that doesn’t look half as cool as a button saying Read More!

Create a new document with a transparent background that is 210*25px. Create a Rounded Rectangle (U) with a radius of 10px. The colour doesn’t matter. Make sure to make the shape 20px high so that the edges blend into a half-circle. Leave some space at the bottom and on the right for the drop shadow.

Now we need to spice up this button by adding a few layer styles: a drop shadow, a gradient overlay, and a stroke.

This style gives a nice little 3D effect to the button:

Then we need to add text to this. I’m using Myriad Pro, size 12 and #393939. Don’t forget to centre the text!

Final step of this button will be to add a bevel to the text:

Now we just need to import this into our document by drag & dropping, and we’re all set! I decided to align it to the right, but it does look good centred or on the left too, so it’s up to you to choose. I also put those two layers in a layer group Read More, to make it easier to move around.

Doesn’t this look just awesome? Anyway, now that we are done with the Blog module, it’s time to get done with the Twitter module!

Step Nine – The Twitter Module

Since this is pretty much the same thing as the Blog module, it will probably go a lot faster.

The Header Bar

To get started, just duplicate the header bar from the Blog Module and put it on the other side of the middle of the document, then place it in a new layer group called "Module 2 – Twitter". Replace the text with something like “Follow the Roadside Team on Twitter”. Make this message really personal. Indeed, Twitter is something that should be friendly and personal, because it allows your readers to get closer to you.

I decided to use the Twitterific icon for the purpose of this tutorial, since it is for educational purpose only. However, should this website go live, we would have to use another icon to comply with copyright restrictions. But I just think it looks cool, so I decided to use it here. You can fetch it on Wikipedia by searching for Twitterific for example.

Include the icon to your document, resize it with Ctrl / Cmd + T, and place it instead of the newspaper. I decided to make this icon a bit bigger than the newspaper, simply because it didn’t look good otherwise.

Tweets

Next we’ll have to indent our content. Place one vertical guide at 830px and another at 845px to give us a solid base to work with, we also need a guide at 770px high to create a 15px margin between the twitter icon and the first tweet.

What are we going to put here? Each member of the team will have his own line with his latest tweet. A tweet is usually built with a profile picture, a name, and a sentence. Create a new layer group called "Tweet 1", which we are going to duplicate to create our other Tweets.

We’ll start with the picture. You can find pictures at stock.xchng in their portraits category.

Before we add this picture, we will need to create a shape to make a clipping mask. Use the Rectangle Tool (U), to create a square that is 35*35px, and add a 1px inside stroke to it with a colour of #202020.

Once you’ve found a picture you like on stock.xchng, we can add it to our design. Simply drag & drop it on the design, and create a clipping mask between the recently created Shape layer and the picture. Resize the picture with Ctrl / Cmd + T, if necessary.

Now we need to add the name of the team member. I’m going to start with the name I used in the blog posts, to show consistency. I’m using Myriad Pro here, as usual with our headings:

• Myriad Pro Regular
• 18px
• Smooth
• #6eb9cc

Be sure to leave a 15px margin between the picture and the name by adding a new guide.

Now, let’s add our status. I’m using Lipsum here as usual. Be sure not to write more than one line because it might break our design otherwise. Use our paragraph font as usual:

• Arial Regular
• 12px
• Smoothing: none
• #525252

You don’t need to make a paragraph block here since we’re only writing a single line.

Great, now that we are done, we can simply duplicate the layer group, "Tweet 1", to create the other Tweets. Rename your layer groups to Tweet 2, 3 and 4, respectively. Leave 15px margin between each one.

It’s highly improbable however that every single team member is called Jonathan Davidson, so we’ll need to change their names, their pictures, and also their status to make it more plausible.

Now, the only thing missing compared to the Blog module is a "Read More" button. So we’ll just duplicate the "Read More" layer group from the Blog module, put the duplicated group in the Twitter Module group, and rename it “Get More Tweets”. We will not leave the same "Read More" message in order to make things look more personal and to show that we actually spent some time doing these buttons.

The only thing to do is to change the text layer to “Get More Tweets!”. The exclamation mark fits the informal Twitter spirit. Align this button horizontally with the Read More one, and vertically to the right.

Congratulations! We’ve now finished the content part of the design! It was really a tough nut to crack. Things will be easier from now on. We only have the footer left. Let’s just take a moment to admire what we’ve been creating for some hours now:

We’re really getting somewhere aren’t we?

Step Ten - Footer

We could have placed the footer text directly under the content. To be honest, when preparing for this tutorial, that was exactly what I did. But I found that something was missing; the design wasn’t really balanced. Adding the bottom of the header image to the footer gives a nice frame in which the content can live, so that explains why we are putting it there.

We don’t want the image to be too big though; 50px seems appropriate. So, we’ll add a new horizontal guide at 1150px in order to help us draw the shape.

We should create a new layer group called Footer, in which we are going to have the groups Image and Bar.

Image

Use the Rectangle Tool (U) to draw a rectangle taking 100% of the width and 50px high. This layer should be in the Image group.

Now, Drag & Drop our stock header image into our document again, and create a clipping mask between the image and the Shape layer. Use Ctrl / Cmd + T to place it correctly.

Footer Bar

Okay, we are done with the footer image. We now need to make our footer bar. Create a new group in the Bar group called box, and with the Rectangle Tool (U), fill the remaining transparent part of the design with #f8f8f8.

Now create a new layer called Shadow, create a clipping mask between Shadow and Shape, and with the Gradient Tool (G), make a black shadow that is about 15px high. Set the layer’s opacity to 15%.

Finally, to finish this box, duplicate the Border Top layer from the Content box using Ctrl / Cmd + J, drag this layer into the Footer Bar Box layer group and rename it Border Top.

Finally, create a new text layer, and with our paragraph font:

• Arial Regular
• 11px
• Smoothing: none
• #525252
• Text-align: Centre

Write some copyright license or anything you want to put in the footer. I decided to put Copyright, the company name, and a little “All Rights Reserved” too. In order to space things out, I put this on two lines. Align this text layer with the 800px wide guide.

Step Eleven – Admire!

Yes, that’s it, we are done! All this struggle and now we’re finished, but the final result was probably worth it, right?

Step Twelve – Final Thoughts

We’ve now designed our website using Photoshop. In Part II of this tutorial, to be released tomorrow, you’ll learn how to turn this PSD into a semantic, standards-compliant web page using xHTML 1.0, CSS 2.0 and JavaScript.

I sincerely hope you’ve enjoyed this tutorial, that you’ve learn some new techniques, and that you’ll now be able to make outstanding web designs yourself!

I'll see you tomorrow for Part II!

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.