Final Result

Clicking on the image below will take you to the full-scale version of the web layout that we’ll be designing in this tutorial.

Setting up the document

1 Create a new document in Photoshop with the dimensions 1200px x 1050px.

Creating the background

2 Now, we will be creating the background. Select the Gradient Tool (G). Make sure it is set to Linear Gradient. Set the foreground color to #a1e8fe and background color to #59d3fa and create a gradient like below:

Placing the Grid System into the document

3 On a new layer, create a 960px wide grid - 12 bars, each bar at 60px wide. Place each bar 20px apart from each other. Place the grid at the center of the document. The grids should serve as your guide and it is recommended that the main elements of your design do not exceed the width of the grid. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. Go to the 960 Grid System site for more information, or download the Grid system here.

Making containers for the logo and navigation items

4 We will now be creating the containers for the logo and the navigation items. To create the containers, use the Rounded Rectangle Tool with Shape Layers selected. Set the radius to 10px.

5 Create a rounded rectangle 300px wide. Create a second rounded rectangle 620px wide; they should be situated on the grid as follows:

6 Apply these Layer Style settings to each rounded rectangle:

Your rounded rectangle should now look like this:

Inputing the logo and navigation text

7 To create the navigation items, use the Type Tool (T). Use the color #5f5f5f. In this case, I used the font Rockwell. Add the navigation items to the second rectangle and the company logo (current logo being used is just a fictional name for a design agency) to the first.

Making separators for navigation items

8 On a new layer, let us add a separator in between each navigation item. Here I added a line with the color #dedede.

9 Duplicate the separator. Use Layer > Layer Style > Blending Options > Color Overlay and change the duplicate’s color to #ffffff. Move the duplicate one pixel to the right. This will create a subtle engraved effect.

Creating the site header

10 Now let’s create the header below the logo and the navigation. Using the Type Tool (T), add the company tagline and a brief introduction below it. Let us then add a slight Drop Shadow to it to give it more dimension.

11 To fill up the empty space next to the tagline, add a photo of a computer or laptop. This is what you should have by now:

Create a rounded button

12 Below the brief introduction, with the use of the Rounded Rectangle Tool with 28px radius, create a button that says "Learn More". This is very helpful so that if users want to find out more about your company, this information is easily accessible.

Apply a Gradient Overlay to the button using the settings above with #086da0 as the bottom color and #23a7ea as the top color.

Creating a call-to-action box

13 Using the Rounded Rectangle Tool once again with 16px radius, create a 300px rectangle. Go to Blending Options and add a Drop Shadow with the same values as Step 6.

14 Select the rectangle we just created (Cmd/Ctrl + Click) and create a new layer above this rectangle. Add a light blue (#96e3fc) to transparent gradient over the rectangle.

15 Move this gradient one pixel up. This may be a very minute detail but let us be keen to that. It somehow makes it look a little different as opposed to having just an ordinary gradient box.

Crafting a call-to-action button

16 This box will serve as a call-to-action button. These are helpful if you want users to find important information on your site all at one glance. Let us add a heading, some description, and an icon to our buttons. Icons, as small as they may seem, help bring more appeal to your designs. They also assist users in promptly finding what they are looking for because icons communicate messages to users without them having to read their accompanying texts.

The awesome icons I am using in this tutorial are from Wilson Ink on DeviantArt. You can check them out and download them; The icon set is called the Green and Blue Icon Set. These icons are free for personal use only; if you intend to use the design in tutorial for commercial purposes, substitute these icons to one that allows you to do so.

17 Duplicate the box we just created along with its content twice, and then distribute them across the grid evenly. Change the content of the two new boxes as you please. It’s recommended that you change the content of each box rather than just duplicating them and having them all the same. This makes the design look more like a real, navigable website rather than just a lazily done mockup (helpful for presenting to clients).

18 To add more content to the design, we can add some text below the three boxes, for example, a newsletter section would be great. But don’t forget to keep everything inside the grid!

Last but not least… the footer

19 Next, we create the footer where we can add the copyright and the contact information for the website.

The icing on the cake

20 For some final touches, let’s add subtle diagonal lines on top of our background layer and erase around 60% of it from the bottom.

21 Voila! We now have a very clean, nice-looking, Web 2.0 style website design! Stay tuned for the follow-up tutorial where Jacob will show you how to convert this design into a working (X)HTML template!