In this tutorial I will show you how create a clean blue web layout in Photoshop.

We will use the 960 Grid System. Download it, unzip the archive and open the “960_grid_24_col 2.psd” file (you’ll find this file in the Templates > Photoshop folder). Hide the “24 Col Grid” group and activate the guides (View > Show > Guides). To quickly hide of show the guides, use the shortcut Ctrl/Cmd + ;.

Register for a VIP account and download ALL resources including this PSD layout. You will have also 12 Months free updates.

Step 1

First of all, we will increase the size of our document. Go to Image > Canvas size, set the width to 1200px and the height to 1160px.

Use the Paint Bucket Tool (G) to fill the background with the color #38434b. Right-click on the Background layer and select Convert to smart object. Then go to Filter > Noise > Add Noise and use the settings from the following image. Name this layer “bg”.

Step 2

Select the Type Tool (T) and write the name of your layout in the upper left side of your document using the color #93aaba. Take a look at the following image to place your text in the right position. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 3

Create a new group and name it “search bar”. Select the Rounded Rectangle Tool (U), set the radius to 8px and create a rounded rectangle in the right side of your layout using the color #cdd7de. Take a look at the following image for reference. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “search bar”. Then select the Type Tool (T) and add some text inside your search bar using the color #526572.

Step 4

Select the Rounded Rectangle Tool (U), set the radius to 8px and create a white rounded rectangle like the one you see in the image below. Double-click on this layer and use the settings from the following image for Drop Shadow.

Step 5

Use the Rectangle Tool (U) to create a rectangle with the height 50px and the color #7493a8 at the top of the white rounded rectangle. Then right-click on this layer and select Create Clipping Mask.

Double-click on this layer and use the settings from the following image for Gradient Overlay. Name this layer “navbar”.

Step 6

Select the Rectangle Tool (U) and create a white rectangle beneath the navigation bar. Add a Gradient Overlay to this layer using the settings from the following image. Leave a distance of 1px between the navigation bar and this rectangle. Name this layer “gradient” and set its opacity to 10%.

Step 7

Select the Line Tool (U), set the weight to 1px and create a line at the bottom of the navigation bar using the color #506b7f. Name this layer “1px dark line”.

Hit Ctrl/Cmd + J to duplicate this layer. Select the Move Tool (V) and hit the up arrow once to move it one pixel up. Change the color of this line to #789ebb and name the layer “1px light line”.

Step 8

Create a new group and name it “navbar”. Select the Type Tool (T) and write the name for your navigation menu items using the color #d8e9f5. Add a shadow to these text layers using the settings from the following image.

Step 9

Create a new group and name it “featured”. Then add some images and text inside the white rounded rectangle. Take a look at the following image for reference. I used images of vector packs from Grafpedia. For the text I used the color #50728d.

Step 10

Create a new group and name it “right arrow”. Then select the Ellipse Tool (U) and create a white circle in the right side of your featured area.

Then select the Custom Shape Tool, and create two arrows with the color #38434b inside the white circle.

Step 11

Right-click on the “right arrow” group and select Duplicate Group. Then go to Edit > Transform > Flip Horizontal. Move this group in the left side of the featured area and name it “left arrow”.

Step 12

I used the Type Tool (T) and the color #a8c4d8 to add a call-to-action text beneath the featured area.

Step 13

I used the Rounded Rectangle Tool (U) and the color #516c7f to create a button next to the call-to-action text. I used following layer style settings.

Step 14

Then I used the Type Tool (T) and the color #dfe6eb to write a text inside the button. I also added a shadow and a gradient overlay to this text layer using the settings from the following image.

Step 15

Create a new group and name it “services”. Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 310px by 250px. Activate the guides to help you create this shape.

Double-click on this layer and use the settings from the following image for Drop Shadow. Name this layer “services bg”.

Step 16

Select the Rectangle Tool (U) and create a rectangle with the height 40px and the color #6c818f at the top of the rounded rectangle. Right-click on this layer and select Create Clipping Mask. Then add a Gradient Overlay to this layer using the settings from the following image. Name this layer “top bar”.

Step 17

Use the Type Tool (T) and the color #bed0dc to write the word “Services” at the top of your blue rounded rectangle. Then add a shadow to this layer using the settings from the following image.

Download these vector icons and open the .AI file in Adobe Illustrator. Then select one of those icons, copy it (Ctrl/Cmd + C), go back to Photoshop and paste it (Ctrl/Cmd + V) as a smart object. Go to Edit > Free Transform (Ctrl/Cmd + T), change the size of this icon and put it at the top of the rounded rectangle. Name this layer “icon”.

Step 18

Select the Type Tool (T) and write some text for the “services” area. Take a look at the following image for reference. I created the bullet points using the Ellipse Tool (U).

Step 19

Create two more blue rounded rectangles for the “Products” and “About us” areas just like you did for the “Services” area. Use a new icon for each area.

Step 20

Add some images for the “Products” area. Then add a double-stroke effect to each image using the settings from the following image.

Step 21

Select the Type Tool (T) and write some content for the “About us” area using the color #42525d.

Step 22

Create a new group and name it “blog”. Then create a new blue rounded rectangle like the one you see in the image below (I used the same colors and layer styles that I used for the smaller rectangles from above). Add an icon at the top of this rounded rectangle and write the word “Blog” next to it.

Step 23

Add an image in the left side of your blog area. Use the following layer style settings to add a double-stroke effect to this image. Then select the Type Tool (T) and add some content next to the image.

Step 24

Select the Rounded Rectangle Tool (U), set the radius to 4px and the color to #6b7881 and create a small rounded rectangle like the one you see in the image below. Name this layer “button”. Then use the Type Tool (T) and the color #bec8cf to write the words “Continue reading »” inside the rounded rectangle.

Step 25

Add one more article inside the blog area.

Step 26

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

Final result

We’re finished! I hope you enjoyed this tutorial and you learned some new things. As you can see, stock vectors icons are very easy to use when designing a web layout. And with the Grafpedia VIP account you will have access to all the vectors from Grafpedia.

Stay tuned for the next tutorial!

Download our latest ccie pass4sure exam dumps and 312-50 practice test to competently prepare for SK0-003 certification.