In this web design tutorial we will create a clean, professional, and modern web layout in Photoshop using the 960 Grid System as our layout guide. We will use light and bright colors, subtle gradients, thin lines. Additionally, you will see a way to recreate a popular web design technique: 3D ribbons. Let’s get started!

This is the web layout that we will create. Click on the following image to see the larger version.

Resources

Step 1: The 960 Grid System

Download the 960 Grid System and unzip the archive.

Then go to the "photoshop" folder (inside "templates"). There you will find three .psd files. Each of these files contains a grid with 12, 16 or 24 columns. We will use the one with 24 columns. Open the "960_grid_24_col.psd" file in Photoshop.

Now we will increase the size of the canvas so that we can see how the layout will look on big screens. Go to Image > Canvas Size and use the settings from the following image.

The .psd file also contains guides. We will need them to arrange the elements of our layout properly. To hide/show the guides, go to View > Show > Guides (or use the shortcut Ctrl/Cmd + ;).

During this tutorial, you will have to create different shapes with certain dimensions. Open the Info panel (Window > Info) and you will be able to see the exact width and height of your shapes while you create them.

Step 2: Creating the layout’s background

Fill the background with the a very light blue/gray color (#ecf0f2) using the Paint Bucket Tool (G).

Select the Gradient Tool (G) and open the Gradient Editor window by clicking on the gradient that you see in the Options bar. Create a new gradient using the settings from the following image. Then you can save it by giving it a name and clicking on the "New" button.

Create a new layer, select the gradient which you created, hold down the Shift key and drag a vertical line at the top of your document. Name this layer "gradient".

Step 3: Creating a texture

Now we will use some Photoshop filters to create a texture at the top of the layout. Create a new layer. Then hit the "D" key on your keyboard to set the foreground color to black and the background color to white. Go to Filter > Render > Clouds.

Then press Ctrl/Cmd + Alt/Option + F a couple of times to increase the contrast of the clouds.

Right-click on this layer and select Convert to Smart Object. Now we can apply any filters to the smart object and edit them anytime we want.

Go to Filter > Blur > Motion Blur and use the settings from the following image.

Then go to Filter > Other > Maximum and use a radius of 30px.

Add some noise to this layer by going to Filter > Noise > Add Noise and using the settings from the image below.

Then go to Filter > Sharpen > Sharpen.

Name this layer "texture". Then add a mask to it (Layer > Layer Mask > Reveal All), select the Gradient Tool (G) and drag a black to transparent gradient as you see in the following image to erase the bottom area of the texture.

Set the blend mode of this layer to Soft Light 50%.

Step 4: Creating the navigation bar

Create a new group (Layer > New > Group) and name it "navigation bar". Activate the guides (Ctrl/Cmd + ;). Then select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle with the dimensions 950px by 50px and the color #d8dfe2.

Name this layer "navigation bar", double-click on it to open the Layer Style window and use the settings from the following image.

Step 5: Type out the navigation menu items

Select the Type Tool (T) and write the name for your navigation menu items. I used the font Gotham Book with the size 16px and the color #7c858b. Note that Gotham Book is not a web-safe color so feel free to use a different font if you don’t want to use a CSS background image replacement technique, @font-face, or any font replacement techniques when creating the design as a web page.

Step 6: Adding separators in the navigation bar

Create a new group and name it "separators". Select the Line Tool (U), set the weight to 1px, hold down the Shift key and create a vertical line from the top of the navigation bar to the bottom using the color #e3e7ea. Name this layer "1px light line".

Duplicate this layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the right arrow once to move the new layer one pixel to the right.

Change the color of this new line to #a3afb5 and name this layer "1px dark line". Put these lines between your first two navigation menu items.

Hold down the Ctrl/Cmd key and select the two line layers. Duplicate these layers by drag them over the ‘Create a new layer’ button from the bottom of the Layers panel.

Then use the Move Tool (V) to move them between the next two navigation menu items. Continue to duplicate and move your separators until you have as many as you need.

Step 7: Creating a search bar

Create a new group and name it "search bar". Select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle with the dimensions 250px by 30px and the color #f1f5f7. Name this layer "search bar", double-click on it and use the settings from the following image for Stroke. Then select the Type Tool (T) and write the words "To search type here and hit Enter" inside your search bar. I used the font Helvetica Oblique and the color #a3abaf.

Step 8: Adding the site name

Create a new group and name it "header". Select the Type Tool (T) and write the name of your website in the left side of the layout, above the navigation bar. I used the font Gotham Bold with the size 46px and the color #dee6ea. Double-click on your text layer to open the Layer Style window and use the settings from the following image.

Step 9: Adding a subtle texture over the site name

Create a new layer. Hit the "D" key on your keyboard to reset the foreground and background colors to black and white.

Then go to Filter > Render > Clouds.

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Motion Blur and use the settings from the following image.

Name this layer "texture", right-click on it and select Create Clipping Mask. Now this layer is visible only on the surface of the text. Name this layer "texture" and set its blend mode to Soft Light.

Step 10: Adding some social icons

Create a new group and name it "icons". Then download these icons, go to the "32×32" folder (inside the "png" folder) and open some icons in Photoshop. I used four icons for RSS, Twitter, Facebook and Flickr.

Move the icons into your first document using the Move Tool (V). Put them in the upper right side of your layout and name each layer accordingly. Set the opacity of the "icons" group to 75%.

Step 11: Adding a text beneath the navigation bar

Select the Type Tool (T) and write a welcome message beneath the navigation bar using the color #eff4f7. Then add a shadow to this text layer using the settings from the following image.

Step 12: Creating a content carousel

Now we will create a content carousel where can be shown featured images or projects.

Create a new group and name it "content carousel". Then activate the guides (Ctrl/Cmd + ;), select the Rectangle Tool (U), and create a rectangle with the dimensions 350px by 200px in the left side of your layout.

Name this layer "rectangle", double-click on it and use the settings from the image below to add a double-stroke effect to it.

Step 13: Creating a shadow for the rectangle

Use the Rectangular Marquee Tool (M) to create a selection with the height 30px at the bottom of your rectangle. Create a new layer and fill the selection with black using the Paint Bucket Tool (G). Name this layer "shadow", right-click on it and select Convert to Smart Object.

Go to Edit > Free Transform (Ctrl/Cmd + T), hold down Ctrl/Cmd + Alt/Option + Shift, click on the upper right corner of the transformation box and drag it to the right.

Move the "shadow" layer beneath the "rectangle" layer. Then go to Filter > Blur > Gaussian Blur and use a radius of 1px.

Add a mask to the "shadow" layer (Layer > Layer Mask > Reveal All).

Then select the Gradient Tool (G) and drag a vertical black to transparent gradient from the top of the shadow to the bottom.

Set the opacity of the "shadow" layer to 15%.

Step 14: Duplicate the content carousel boxes

Select the "rectangle" and "shadow" layers and hit Ctrl/Cmd + G to put them inside a group. Name the group "left image". Duplicate this group (right-click on it and select Duplicate Group), then move the new rectangle in the right side of the layout. Name this group "right image".

Duplicate the "right image" group. Then select the Move Tool (V), hold down the Shift key and hit the down arrow three times to move this new rectangle 30px down. Name this group "middle image".

To put this rectangle in the center of the layout, hit Ctrl/Cmd + A to make a selection of your entire document. Then make sure that the "middle image" group is active and go to Layer > Align Layers To Selection > Horizontal Centers.

Hit Ctrl/Cmd + D to deselect.

Step 15: Add images to the content carousel boxes

Add an image over each "rectangle" layer. Make sure that the images cover the entire surface of the rectangles. Then right-click on each layer of the images and select Create Clipping Mask. Now your images are visible only on the area of the rectangles.

Step 16: Creating two navigation buttons for the content carousel

Now we will create two navigation buttons for the content carousel. As you will see in the following images, the two buttons are joined together and they are not placed one in the left side of the content carousel and the other one in the right side (as we can usually see in content carousels). This way, it will be easier for the user to go back and forth through the featured images/projects.

Create a new group and name it "nav". Then select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 100px by 35px and the color #a0c3d5.

Put this rounded rectangle over the bottom edge of the middle rectangle. Name this layer "button", double-click on it to open the Layer Style window and use the settings from the following image.

Note: you can save the layer style of this button so you can use it later for other layers as well; to do this, make sure that the "button" layer is active, go to the Styles panel (Window > Styles) and click on the ‘Create new style’ button. Now, when you will need this layer style, you will only have to select it from the Styles panel.

Step 17: Adding a shadow to the button

Ctrl-click on the vector mask of the "button" layer to select its pixels (1).

Create a new layer, select the Paint Bucket Tool (G) and fill the selection with black. Hit Ctrl/Cmd + D to deselect (2).

Name this layer "shadow", right-click on it and select Convert to Smart Object. Go to Edit > Free Transform (Ctrl/Cmd + T) and drag the top line of the transformation box down (3).

Hold down Ctrl/Cmd + Alt/Option + Shift and drag the upper right corner of the transformation box to the right (4, 5).

Add a 1px gaussian blur to this layer (Filter > Blur > Gaussian Blur) and move it beneath the "button" layer (6).

Add a mask to the "shadow" layer (Layer > Layer Mask > Reveal All). Select the Gradient Tool (G), hold down the Shift key and drag a vertical black to transparent gradient from the top of the shadow to the bottom (7).

Set the opacity of this layer to 20% (8).

Step 18: Add arrows and a separator on the navigation button

Select the Line Tool (U), set the weight to 1px and create a vertical line at the middle of your button using the color #7c9cac. Name this layer "1px dark line". Hit Ctrl/Cmd + J to duplicate this layer. Select the Move Tool (V) and hit the right arrow once to move the new layer 1px to the right. Change the color of this line to #ccf2ff and name this layer "1px light line".

Select the Custom Shape Tool (U), right-click on your image and select an arrow shape. Then create an arrow in the right side of your button using the color #ccf2ff. Name this layer "right arrow 1" and set its opacity to 80%. Duplicate this layer and move the new arrow next to the first one. Name the new layer "right arrow 2".

Duplicate your right arrow layers, select the duplicated layers and go to Edit > Transform > Flip Horizontal. Use the Move Tool (V) to move the new arrows in the left side of the button and change the name of these new layers.

Step 19: Creating two call-to-action buttons

Select the Rounded Rectangle Tool (U) and set the radius to 4px. Create a rounded rectangle with the dimensions 160px by 45px and the color #a8bac4. Name this layer "button 1". Then go to the Styles panel and select the style which you have saved at step 16. Create a shadow for this button just like you did at step 17.

Duplicate this button and its shadow layer. Change the color of the new button to #80c2e5 and name this layer "button 2". Use the Move Tool (V) to move the new button at a distance of about 70px to the right from the first one. Then use the Type Tool (T) to add the text. Take a look at the following image for reference.

Group all these layers (Ctrl/Cmd + G) and name the group "call-to-action buttons". To put these buttons at the middle of your layout, make sure that this group is active, hit Ctrl/Cmd + A to select the entire document and go to Layer > Align Layers To Selection > Horizontal Centers.

Step 20: Creating the "Services" area

Create a new group and name it "services". Then select the Type Tool (T) and write the word "Services" in the left side of the layout beneath the call-to-action buttons using the color #648393. I used the font Helvetica Bold with the size 26px.

We will create four rounded rectangles for the ‘services’ area. Because our grid has 24 columns, we can split it easily into four bigger columns.

Select the Rounded Rectangle Tool (U), set the radius to 4px and create a rounded rectangle with the dimensions 230px by 170px and the color #dee9f0. Add a 1px stroke to this rounded rectangle using the settings from the image below. Name this layer "rounded rectangle 1".

Select the Rectangle Tool (U) and create a white rectangle with the dimensions 210px by 150px. Name this layer "rectangle 1". To put the white rectangle exactly in the center of the rounded rectangle, follow this process:

  1. Ctrl/Cmd-click on the vector mask of the "rounded rectangle 1" layer to select its pixels
  2. Click on the "rectangle 1" layer to make it active
  3. Go to Layer > Align Layers To Selection > Horizontal Centers
  4. Go to Layer > Align Layers To Selection > Vertical Centers
  5. Hit Ctrl/Cmd + D to deselect

Step 21: Add an image to the "Services" thumbnail

Add a representative image over the "rectangle 1" layer. Make sure that this image covers the entire surface of the rectangle. Then name this layer "image 1", right-click on it and select Create Clipping Mask. Now your image is visible only on the area of the rectangle.

Step 22: Create a button on the Services thumbnail

Select the Rounded Rectangle Tool (U) and create a button with the dimensions 120px by 35px and the color #a0c3d5. Name this layer "button 1", go to the Styles panel and select the layer style which you have saved at step 16. Put this button over the bottom edge of the rounded rectangle. Then select the Type Tool (T) and write the name of a design service inside this button. I used the font Helvetica Bold with the size 14px and the color #e9f3f6.

Select all the layers of your rounded rectangle and hit Ctrl/Cmd + G to group them. Name the group "1".

Step 23: Create more thumbnails

Duplicate the "1" group three times (right-click on it and select Duplicate Group). Then activate the guides and use the Move Tool (V) to arrange your rounded rectangles. Change the image of each duplicated group and use the Type Tool (T) to change the text of each button.

Step 24: Creating the "About" area

Create a new group and name it "about". Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 470px by 140px. Name this layer "bg", double-click on it to open the Layer Style window and use the settings from the following image.

Note: while the Gradient Overlay window is opened, click on your image and move the gradient at the bottom of the rounded rectangle.

Step 25: Make a 3D ribbon

Create a new group and name it "3d ribbon". Use the Rounded Rectangle Tool (U) to create a rounded rectangle with the dimensions 140px by 30px and the color #b1c8d2. Put this shape in the upper left corner of the big rounded rectangle. Double-click on this layer to open the Layer Style window and use the settings from the following image. Move the gradient in the left side of this shape while the Gradient Overlay window is opened.

Step 26: Creating the stem of the 3D ribbon

Now we need to modify the bottom left corner of the rounded rectangle. Select the Direct Selection Tool (A), click on the vector mask of this layer to make it active and follow the instructions from the image below.

Note: activate the Photoshop’s grid (Ctrl/Cmd + ‘) and guides (Ctrl/Cmd + ;) to help you modify this shape.

Step 27: Add the back shadow of the 3D ribbon

Create a new rounded rectangle beneath the first one by following the steps from the image below.

Step 28: Type out "About us"

Select the Type Tool (T) and write the words "About us" on your 3D ribbon. I used the font Helvetica Bold with the size 22px and the color #648393.

Step 29: Creating some photo frames

Now we will create some photo frames for the ‘About’ area of the layout.

Select the Rectangle Tool (U) and create a rectangle like the one you see in the following image. Name this layer "photo 1", double-click on it and use the settings from the image below. Duplicate this layer two times (Ctrl/Cmd + J) and rotate the new rectangles using Free Transform (Ctrl/Cmd + T).

Step 30: Add images to the photo frame

Add an image above each photo frame. Then right-click on the layers of the images and select Create Clipping Mask to make them visible only on the surface of the photo frames.

Step 31: Type some dummy text

Select the Type Tool (T) and add a block of text next to the photos. I used the font Helvetica with the size 12px and the color #6b757a.

Step 32: Creating a Twitter area

Duplicate the "about" group and move the new group in the right side of the layout. Then delete the photos and the text. Keep only the rounded rectangle and the 3D ribbon. Select the Type Tool (T) and write the words "Follow us" on your 3D ribbon. Name this group "twitter".

Step 33: Add a Twitter icon

Add a Twitter icon in the left side of this area (use the Twitter icon from the icons pack which you downloaded). Then select the Rounded Rectangle Tool (U) and create a rounded rectangle using the color #bdced6. Name this layer "rounded rectangle". Use the Pen Tool (P) to create a small triangle in the upper left corner of the rounded rectangle. Name this layer "triangle". Take a look at the following image for reference. Select the Type Tool (T) and add a text inside the rounded rectangle using the color #6b757a.

Step 34: Creating a "Recent works" area

Create a new group and name it "recent works". Activate the guides (Ctrl/Cmd + ;), select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 70px by 70px. Name this layer "square 1", double-click on it to open the Layer Style window and use the settings from the following image.

Duplicate this square 11 times and use the Move Tool (V) to arrange all the squares. Then add an image over each square, right-click on each image layer and select Create Clipping Mask.

Step 35: Creating the "Blog" area

Create a blue rounded rectangle with the dimensions 950px by 220px and a 3D ribbon just like you did for the ‘about’ and ‘twitter’ areas. Then write the word "Blog" on the 3D ribbon.

Use the Rectangle Tool (U) to create two squares with the dimensions 150px by 150px. Add two images over these square.

Select the Type Tool (T) and add some text next to each image.

Step 36: Tyle the copyright text

Select the Type Tool (T) to write a copyright statement at the bottom of your layout using the color #b3bdc1.

Tutorial Summary

Well, that’s it! The web layout is finished. I hope you enjoyed this tutorial and you learned something new. Click on the following image to see a larger version.

Download Tutorial Source Files

Author:

Ionut Ciursa is a freelance web designer and tutorial writer currently based in the United Kingdom. He is passionate about the web and loves to spend countless hours in Photoshop designing web interfaces, illustrations and photo manipulations. You can visit his portfolio at www.ionutciursa.com or follow him on twitter @ionutciursa.