In this web design tutorial, we’re going to learn how to create a clean-looking and modern website layout. We will take advantage of some fundamental techniques and tools — such as custom shape tools, selection tools, and clipping masks — and end up with a nice and professional web design. Ready? Let’s get started!

Preview

First, take a peek at what we’ll be creating together by clicking the preview image below to enlarge.

Resources

Step 1: Setting up a new document

In order to keep everything aligned and well-organized, we’ll be using the 960 Grid System: Download it here.

Once downloaded, open the Photoshop document called “960_grid_24_col". That document is the 24-column grid layout template of the 960 GS.

Hide the layer group called “24 Col Grid”.

Hide a layers group

Since we’ll be using guides a lot in this tutorial, our Rulers have to be turned on. Go to View > Rulers or press Ctrl/Cmd + R if your rulers are turned off.

View Rulers

We also need to make sure that guides are turned on. So go to View > Extras.

View extras

Let’s make our canvas a bit taller. Go to Image > Canvas Size and enter 1400 for the Height option. Press OK when you’re done.

Adjust canvas size

Using the Rectangular Marquee Tool (M), create a selection over the whole canvas (or press Ctrl/Cmd + A to create the selection around the canvas automatically).

Create a new layer, set your Foreground and Background color to #f5f5f5 and press Shift + Backspace to open up the Fill dialog box. Fill the selected area (the entire canvas) with the chosen color.

Fill background selection

Step 2: Creating the navigation bar background

With the Rounded Rectangle Tool (U), create a rectangle of 950x60px with Radius set at 5px. Align the rounded rectangle shape using the 960 GS guides.

Create navigation bar background

Give the shape a Drop Shadow and Gradient Overlay layer style.

Navigation bar background layer style

Step 3: Adding website name and navigation text

Using the Horizontal Type Tool (T), write your website’s name on the left side of navigation bar.

I used the following settings:

  • Font Family: Rockwell
  • Font size: 50px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ce133f

Website title character settings

Write the text for your menu links.

I used the following settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: White (#ffffff) and pink (#d3123f)

Navigation text character settings

Let’s make the active menu item. Using the Rectangular Marquee Tool (M), create a selection of about 60x60px around the first link item ("Home") and fill it with a very dark (almost black) gray color (#0f0f0f).

Name this layer “hover” to keep our work tidy.

Create hover selection

Add an Inner Shadow the "hover" layer.

Add inner shadow

Select the “hover” layer and click on the Add layer mask button (it’s at the bottom of the Layers Panel).

Using the Gradient Tool (G), drag from the bottom to the top of the active menu link with the Black, White linear gradient preset.

Add layer mask to hover layer

Step 4: Creating search bar

Set your Foreground color to a gray color (#dadada).

Using the Rounded Rectangle Tool (U), create a rectangle with dimensions of 185x25px and Radius set at 5px.

Give the new rounded rectangle shape an Inner Shadow.

Create the search bar background

Write the word “search…” inside the search bar
with the Horizontal Type Tool (T).

Here are the settings I used:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1b1b1b

Search word character settings

Use the Custom Shape Tool (U) to create an arrow. Under the Shape options in the Options Bar of the Custom Shape Tool, look for the shape called "Arrow 2" or use a shape that you prefer. Set your Foreground color to our pink color (#d3123f) before drawing the shape. Create the arrow shape on the right side of the search bar.

Give the arrow a Stroke layer style.

Search arrow

Always make sure to keep your document tidy by organizing your layers and giving them meaningful names.

Organize the header layers

Step 5: Creating the sub-navigation bar

Set your Foreground color to a light gray color (#e5e5e5). With the Rounded Rectangle Tool (U), go ahead and create a rectangle below our main navigation/header sized at 490x40px with Radius at 5px.

Add a Drop Shadow layer style to the sub-navigation bar.

Create the sub-navigation bar background

Write some text in your sub-navigation bar using the Horizontal Type Tool (T) that will serve as your sub-navigation links.

I used the following font options:

  • Font Family: Arial
  • Font size: 13px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1b1b1b

Sub-navigation text character settings

We will now create vertical dividers to separate our sub-navigation text. Use the Rectangular Marquee Tool (M) to create two vertical lines 1px apart from each other.

Fill (Shift + F5 or Edit > Fill) the 1px marquee selection. Use white (#ffffff) for the left selection, and then a gray color (#bbbbbb) for the right one.

Create separating line

Duplicate this separator twice by selecting its layer in the Layers Panel and pressing Ctrl/Cmd + J twice.

Use the Move Tool (V) to move the duplicated layers to the right side of the other sub-navigation links.

Duplicate sub-navigation separating line

Check back to your Layers Panel and make sure that you have your layers organized.

Organize the sub-navigation layers

Step 6: Creating the featured area background

We’ll start by dragging a new horizontal guide from the top ruler to about 25px below the sub-navigation.

Drag new horizontal guide

Create a new layer. Create a selection of 1020x350px and fill the selection with a gray color (#d0d0d0).
Call this layer “featured_bg”.

Create a selection for featured area background

Add a layer mask to the “featured_bg” layer, set your gradient to the Black, White linear gradient preset, and start dragging from the bottom to the top of your document.

Add layer mask to featured background layer

How the background looks

Step 7: Creating the featured area shadow

Using the Rectangular Marquee Tool (M), put a selection sized at 1020x15px below the sub-navigation. Fill the selection with a dark gray color (#404040).
Name this new layer as “shadow”.

Create selection for the featured area shadow

Let’s make it a bit blurry! Go to Filter > Blur > Gaussian Blur, set the Radius to 5px and then press OK to apply the filter.

Apply gaussian blur to shadow layer

With the “shadow” layer as the active layer in the Layers Panel, use the Rectangular Marquee Tool (M) to create a selection over the lower part of our blurry shadow. Then hit Delete to remove the unwanted area.

Delete the lower part of the shadow

Set the Opacity of the “shadow” layer to 50% to make it blend into the background better.

Reduce shadow layer opacity

Use the Line Tool (U) to create a white (#ffffff), 2px line.

Note: The layer of this line has to be on top of the rest of the featured area layers.

Create a 2px line

Step 8: Adding an image of a featured design

We’ll start this step by dragging a new horizontal guide 25px below our first horizontal guide.

Drag a new guide after 25px

Pick up your Rounded Rectangle Tool (U), set its Radius to 5px and choose Paths as the drawing option.

Create a square rounded rectangle shape sized at 280x280px and place it on the right edge of our layout.

Right-click on the path and choose Make Selection from the contextual menu that appears.

Make selection for an image of a featured design

Choose the Rectangular Marquee Tool (M) with its selection type set to Subtract from selection to put a selection over the lower part of our previous selection. This removes that portion of the selection, giving the bottom of our selection non-rounded corners.

Subtract a part from selection

Fill (Shift + F5) your selection with any color.

Next, add an Inner Shadow and Stroke layer style.
Namel this layer “image_holder”.

Featured design image layer style

Place any image of your choosing (preferably an image that you’re proud of featuring) in this area. Put the image’s layer right above the “image_holder” layer.

Right-click on the image layer and choose Create Clipping Mask; this will remove excess parts of the image you chose so that it doesn’t spill outside the "image_holder" layer.

Create clipping mask

Ctrl/Cmd + click on the "image_holder" layer to make a selection around it. Use the Polygonal Lasso Tool (L) while holding down Alt/Option to subtract a diagonal triangle from the bottom right of the original selection.

Fill the triangular selection with white (#ffffff) on a new layer and also reduce the layer’s Opacity to 10%.

Add galre effect

Step 8: Adding a smaller featured design’s image

Drag a new horizontal guide 40px below the last one we made.

Drag a new horizontal guide after 40px

Add a smaller image of another featured design using the same techniques explained in the previous step.

Add a smaller image of another featured design

Step 9: Adding a tagline

Write your site’s tagline using the Horizontal Type Tool (T). For the purpose of this tutorial, this tagline is just the word "Awesome" in all-caps.

You can use the following font settings:

  • Font Family: Rockwell
  • Font size: 100px
  • Font weight: Bold
  • Anti-aliasing setting: Sharp
  • Color: #ce1340

Welcome text character settings

With the tagline’s text layer selected in the Layers Panel, click on the Add a layer mask icon to make a layer mask.

Add layer mask to text layer

Create a selection over the lower part of your text using the Rectangular Marquee Tool (M) and then press Shift + Backspace to open the Fill dialog window. Fill the layer’s mask with black (#000000). This will result in the lower portion of our tagline being hidden.

Fill selection with black

Write another word
below the "Awesome" text.

The settings used for this new text is:

  • Font Family: Rockwell
  • Font size: 50px
  • Font weight: Bold
  • Anti-aliasing setting: Sharp
  • Color: #1b1b1b

Welcome text character settings

Step 11: Creating the "See More!" button

Select the Rounded Rectangle Tool (U) and create a 205x45px rounded rectangle with 5px Radius.

The color of the shape should be pink ( #c9103b).

Create see more button bacground

Create a selection on the top part of the button using similar techniques we’ve done. Fill the selection with a lighter shade of pink (#da1543).

Create a selection and fill it

Write the words “See More!” with the Horizontal Type Tool (T) on top of the rounded rectangle shape we just created.

Here are the settings for the "See More!" text:

  • Font Family: Rockwell
  • Font size: 40px
  • Font weight: Bold
  • Anti-aliasing setting: Sharp
  • Color: Won’t matter since we’ll add a Gradient Overlay

Read more character settings

Give your "See More!"
text a Gradient Overlay.

Add a gradient overlay to your text

This is a good point to check and make sure you’re keeping your layers organized.

How the layers panel looks

Step 12: Creating the content area background

We’ll start by dragging a couple of horizontal guides to keep everything well-aligned.

Drag a couple of horizontal guides

Create a selection of about 890x400px with the Rectangular Marquee Tool (M).

Create a selection for the content area background

Press Shift + Backspace to open the Fill dialog window; fill your selection with a very light gray color (#edeaeb).

Fill your selection

Give the very light gray content area a Stroke layer style.

Add a stroke

Using the Elliptical Marquee Tool (M), place a very thin elliptical selection at the bottom of the content area. Fill this area with a dark gray color (#404040).

Create an elliptical selection

We will make the elliptical shape we just made into a shadow. Go to Filter > Blur > Gaussian Blur, set Radius to 4px, and press OK to apply the filter.

Apply gaussian blur

Step 13: Creating the sidebar

Create a selection of 170x395px on the left side of our content area. This area will contain a navigation menu.

Create a selection for the sidebar background

Fill (Edit > Fill) your selection with any color in a new layer.

Apply a pink horizontal Gradient Overlay to the sidebar layer.

Apply gradient overlay to your selection

Step 14: Adding content to the sidebar

Drag two new horizontal guides to help us keep our content in the sidebar aligned, one near the top, and the other, near the bottom.

Drag two new horizontal guides

Using the Line Tool (U), create two horizontal lines on top of each other. The top line should be a dark pink color, and the bottom, a light pink color. This will serve as horizontal dividers in a consistent style as the vertical dividers we created earlier for the sub-navigation bar.

Create a separating line

Write a word such as "Category" using the Horizontal Type Tool (T) towards the top of our sidebar.

These are the font settings for "Category".

  • Font Family: Arial
  • Font size: 17px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff

Keep adding more categories, horizontal lines and text.

Keep adding categories and lines

Using the Custom Shape Tool (U), add some arrows on the right side of the menu text. Fill the downward-pointing arrow — which indicates which category you’re on — with white (#ffffff) and the rightward-pointing arrows (inactive categories) with a dark pink/red color (#960023).

Add arrows

Step 15: Write a heading for the main content area

Let’s move to the main content area again. Type a word such as "welcome." that will serve as a heading.

Here are the font settings for the word, "welcome.":

  • Font Family: Rockwell
  • Font size: 100px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ce133f

Write a heading for the main content

Again, cut the lower part the text using the Add a layer mask technique we covered earlier in the tutorial.

Cut the lower part of the text

Write some content below the "welcome." text using the Horizontal Type Tool (T).

The settings used for this text:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #1b1b1b

Note: We used an Anti-aliasing value of None to mimic how this text would look like in a web browser that doesn’t support technologies like ClearType that smoothens HTML text.

Text character settings

Step 16: Add the main content

Let us add a smaller heading (the text used was "Who we are") with the following font settings:

  • Font Family: Rockwell
  • Font size: 30px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ce133f

Smaller heading character settings

Add some lorem ipsum text samples (using a nifty tool like this one to generate the text).

The settings used for lorem ipsum text is:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #1b1b1b

Text character settings

Duplicate your heading and text layers by selecting them in the Layers Panel and then pressing Ctrl/Cmd + J or right-clicking on them and choosing Duplicate Layers from the contextual menu.

Duplicate the heading and text

Using the Line Tool (U), create a 1px-thick line (the color of the line doesn’t matter for now). Place the line in between the two content sections.

Apply a Gradient Overlay to the line to give it some color.

Create a line and apply a gradient overlay to it

Create another copy of this 1px line by duplicating its layer. Change the Gradient Overlay settings of this duplicated line.

Create another line and apply a gradient overlay to it

Step 17: Creating the featured work box

Select the Rounded Rectangle Tool (U) and create a rectangle of 170x275px and Radius of 5px on the right side of our content. The color of this rounded rectangle should be pink (#ce1340).

Create the featured work box background

Apply a Stroke layer style to the rounded rectangle.

Apply stroke to the featured work box background

Use the same techniques I’ve explained in previous steps to create a shadow at the bottom of the rounded rectangle.

Create a shadow for the featured work box

Step 18: Adding content to the featured work box

Add some text with the Horizontal Type Tool (T) within the featured work box.

The font settings for the content is as follows:

  • Font Family: Rockwell
  • Font size: 40px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: Any color just for now

Write text in the featured work box

Apply a white-to-gray vertical Gradient Overlay layer style to your text.

Apply gradient overlay to your text

Next up, place a square rounded rectangle selection of 65x65px and Radius of 5px using the same technique we used for the featured area image.

Create a selection

Place an image on top of the rounded rectangle shape layer, right-click on the image, and pick Create Clipping Mask.

Place an image and create clipping mask

Make three more thumbnails.

Make more three copies of the image

Create a vertical line that separates the content from the Featured works box using the same techniques we’ve used to create the horizontal lines to separate the content.

Create a vertical separating line

Step 19: Creating the footer area background

Create a selection of 1020x550px using the Rectangular Marquee Tool (M).

Create a selection for the footer area

Fill your selection with a light gray (#d0d0d0).

Fill the selection

Using the Single Row Marquee Tool, create a 1px selection at the top of the light gray area. Fill this 1px selection with white (#ffffff).

Create a 1px selection and fill it with white

Step 20: Add the Twitter icon at the footer

Start by dragging a new guide 25px below the top of the footer area.

Drag a new guide after 25px

Type the letter “t” using the Horizontal Type Tool (T).

To make the letter look like the Twitter logo, use the following font settings:

  • Font Family: Pico Black (get it from here)
  • Font size: 48px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #33ccff

T letter character settings

Apply a Stroke layer style to our Twitter icon to finish it off.

Apply a stroke to the T letter

Step 21: Creating the Tweets bar

Using the Rounded Rectangle Tool (U), create a rectangle of 730x40px with Radius at 5px. Fill this shape with a light gray color (#e1e1e1).

Create a rectangle for the twitter feed bar

Apply an Inner Shadow layer style to our bar.

Apply an Inner Shadow

Write some text in the bar using the Horizontal Type Tool (T) and the following settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #ce133f

A tweet character settings

Create two 1px vertical lines 1px apart from each other and fill the left one with white (#ffffff) and the right one with gray (#bdbdbd).

Create two vertical lines next to each other

Write some more text using the Horizontal Type Tool (T). The text represents the tweet’s meta information.

The font settings for the meta information is as follows:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #1b1b1b

Tweet inforamtion text's character settings

Step 22: Creating the follow us icon

Download the popular Function Icon Set by WeFunction. Find the file called “twitter_48.png” and place it on the right of our Twitter bar.

Place an icon of a bird

Write the word “Follow” on the Twitter bird’s right.

The font settings for the word "Follow" are:

  • Font Family: Rockwell
  • Font size: 35px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ce133f

Cut the lower part of the word "Follow" using the same techniques we’ve used before for the tagline and other text elements.

Write the word follow

Now type the word “US on Twitter” below the word "Follow".

You can use the following font settings:

  • Font Family: Rockwell
  • Font size: 21px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #1b1b1b

Type the word us on twitter

Step 23: Make the separator

Using the Elliptical Marquee Tool (M), create a thin elliptical selection towards the top part of the footer area and fill it with a dark gray color (#404040).
Call this layer “separator_bg”.

Create an elliptical selection and fill it

Go to Filter > Blur > Gaussian Blur, set the Radius to 4px, and then apply the filter by pressing the OK button.

Apply gaussian blur filter

Create a selection over the upper part of your blurred shape. Hit Delete to remove the top portion, and you should end up with a straight edge at the top.

Delete the upper part

Give the blurry shape a Gradient Overlay layer style.

Set your gradient editor panel

Add a layer mask to the “separator_bg” layer.

Set your Foreground color to black (#000000). Use the Line Tool, hold down the Shift key to keep your line straight, and create a line at the top of the blurry shape.

Drag from right to left

Using the Line Tool (U), create a light gray (#e9e9e9) 1px line on top of the blurry shape.

Create a 1px line

Again, add a layer mask to the white line, dragging it from right to left with the Black, White gradient preset.

How the line should looks

Step 24: Creating the big footer

Drag two new horizontal guides.

Drag two new horizontal guides

Write a heading like "Testimonials" using the Horizontal Type Tool (T) and the same techniques and font settings we’ve used before. Also add some text below the heading (also in the same way as we’ve done before).

Writing a heading

Write a client name (I used "Mr. Clinet Name") below the "Testimonials" heading.

The font settings for "Mr. Clinet Name" are as follows:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ce133f

Client name character settings

Write some more filler text (lorem ipsum) that represents Mr. Clinet Name’s testimonial.

The font settings for the client’s testimonial text are:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1b1b1b

Client testimonial character settings

Duplicate your text layers and create a separating line.

Duplicate text and create a separating line

Step 25: Add more footer content

Using the same techniques we’ve covered in this tutorial, add some more content.

Add more content to the footer

Add more content to the footer

Step 26: Creating social media icons

I’ve showed you how to create this twitter “t” letter: you can duplicate that and place it under your contact information.

Type Twitter t letter

Write “fr”, which represents Flickr. To make it look like the Flickr logo, use these font settings:

  • Font Family: Frutiger (get it from here)
  • Font size: 45px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ff3093 – #0079d2

Flickr character settings

Write a letter “f” for Facebook. To make it look like the Facebook logo, use these font settings:

  • Font Family: Kalvika (get it from here)
  • Font size: 50px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #395796

F letter character settings

Write the word "in" for LinkedIn. You’ll also need to create a blue rounded-corner square (use the Rounded Rectangle Tool) for its background. Fill the rounded-corner shape with this blue color: #0181ae.

Here are the font settings for LinkedIn’s icon:

  • Font Family: Myriad Pro (get it from here)
  • Font size: 35px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ffffff

Create linkedin icon

Write the letters “YT” for YouTube. Here are the font settings for YouTube’s logo.

  • Font Family: League Gothic (get it from here)
  • Font size: 50px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #b72d28 – #1e1e1e

YT character settings

Step 27: Creating the small footer

Create a separating line at the bottom of the footer.

Create separating line for the small footer

Write some text in the footer such as your copyright information and links to important pages using the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #ce133f – #1b1b1b

Tutorial Summary

There we have it! Whew! We’ve created a clean and modern web design with some basic techniques and Photoshop tools, but ended up with a pretty professional layout. We just used basic tools such as shape tools, clipping masks, layer masks, and layer styles.

Download Tutorial Source Files

Author:

Mahmoud is a young web and graphic designer from Egypt. Apart from that, he also enjoys blogging and writing tutorials. At a young age of 15, he already shows skills equivalent to his older counterparts. Send him a tweet @mahmoudkhaled, connect with him on Facebook and visit his blog and portfolio site called mkhaled.com.