In this Photoshop web design tutorial, we’re going to create a sleek business  layout, which you can use for your projects or as inspiration for your business website.

Preview

Here is a preview of what we will be creating today.

Resources

Before you begin this tutorial download the Bagg and Box Icon Pack

Create a new document
1 The first thing we need to do is to create a new document in Photoshop with these settings:

Create the guides for the layout
2 The next step is to add the guides which we will use in order to keep the layout organised. To create the guides follow these steps:

In the file menu, click View > New Guide…

A new options box will appear, for the first guide, enter these settings:

Next, create the second guide with these settings:

For the third guide, use these settings:

For the final guide, use these settings:

That is the guides complete. You should now have a document looking like this:

Tip: You can hide & show guides by clicking View > Show > Guides in the file menu.

Applying the background
3 Now we need to apply the background colour to the document. To do this simply change the foreground colour to #ebebeb, then using the paint bucket tool (G), apply the foreground colour to the document.

Creating the header
4 We are now going to create the first element of this layout. To create the text based logo, first create a new layer, then using the type tool (T), create the logo using these text settings:

Logo Text
Font: Cooper Std, Style: Regular, Size: 36pt, Anti Aliasing: Sharp

4.1 Now add these layer style settings to the logo, to do this, right-click the logo text layer, then click, ‘Blending Options’ from the menu list. A new window will appear, apply these layer style settings:

Drop Shadow

Inner Shadow

Gradient

4.2 To finish the logo, add a rectangle layer the same colour as the background over the logo like so:

4.3 The second element in the header is the contact information on the right hand side of the layout. To create this section, use the headset image (casque micro.png) from the ‘Bagg & box download. Then add the contact number text next to the image on a new layer, like so:

That is the header completed

Creating the navigation bar
5 We are now going to create the navigation bar for the layout. To do this, first create a new layer, next set the foreground colour to #2f3336, then select the rounded rectangle tool (U), set the radius to 10px, then create a rounded rectangle the full width between the guides (820px), and a height of 100px, like so:

5.1 We now have to create the banner layer as well, in order to create the other navigation elements. To do this, create a new layer, then select the rectangular marquee tool (M), then create a selection the full width of the guides (820px), with a height of 250px. Then fill the selection with a foreground colour using the paint bucket tool (G).

The banner layer needs to overlap the navigation bar to cut off the bottom rounded corners. The navigation bar should now be roughly 80px in height.

To complete the banner, we need to add some layer styles. To do this, right-click the banner layer, then click, ‘Blending Options’ from the menu list. A new window will appear, apply these layer style settings:

Gradient

5.2 Now that we have created the banner layer, we can finish the navigation. The next step is to create the navigation text using the type tool (T). Make sure the foreground colour is set to #ffffff, then on a new layer create the navigation text using these text settings:

Font: Myriad Pro, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Capitals

There needs to be a gap of 48px between each word, either use the ruler tool, or press the spacebar 11 times when typing out the navigation on one line.

Now position the navigation text so that it is centred vertically inside the navigation bar and 46px from the first guide:

5.3 The next element we are going to create is the navigation hover state which is a rounded rectangle. To create this rounded rectangle, first create a new layer, then position that layer in the layer properties box, so that it is underneath the navigation text and banner layers, like so:

Once you have done this, select the rounded rectangle tool (U), and create a rounded rectangle with a width of 100px and a height of 76px. Then position the layer so that it is 14px from the top of the navigation bar like so:

Now we need to add some layer style settings to the rounded rectangle:

Gradient

5.4 To complete the rounded rectangle, we are going to add another smaller rounded rectangle at the top. To create this smaller rounded rectangle, create a new layer and follow the same steps you used to create the larger rounded rectangle.

Once you have done this, add these layer style settings to the rounded rectangle:

Blending Options – Opacity

Gradient

Search Bar
6 To complete the navigation bar, we need to create a search bar. To create the search bar, first create a new layer, then select the rounded rectangle tool (U) and create a rounded rectangle 140px wide with a height of 28px, like so:

Now we need to add some layer styles to the search bar:

Inner Shadow

Colour Overlay

Stroke

6.1 Now that we have created the search bar, we now need to create the search button. Again, create a new layer, then using the rounded rectangle tool (U), create a rounded rectangle with a width of 60px and a height of 30px.

You need to square the left side of the button. To do this, select the rectangular marquee tool (M) and then make a selection so that it covers both the search bar and button, and then using the paint bucket tool (G) fill the selection so that the button has a squared left side, like so:

Now that the left side of the button has been squared, apply these layer style settings to the search button layer:

6.2 To complete the search button, create another smaller rounded rectangle at the top just like the rounded rectangle in the navigation hover layer, using the same layer style settings:

6.3 To complete the search button, add this text on a new layer with the foreground colour #ffffff, using these settings:

Font: Myriad Pro, Style: Regular, Size: 12pt, Anti Aliasing: Sharp

Once you have added the search button text, centre the entire search bar vertically in the navigation bar.

You should now have a layout looking like this:

Banner Content
7 The next stage of the design, is to add the banner content. The first step is to add a light overlay layer to the banner to give it some depth. To do this, create a new layer, then make sure the foreground colour is set to #ffffff, then using the pen tool (P), create an overlay like so:

Zoom in on the layout using the zoom tool (Z), then plot the first point using the pen tool, then plot the second point but hold down the mouse button and drag to create the curve, like so:

Once you have created the overlay layer, set the layer opacity to 5%. Your banner should now look like this:

7.1 Now we need to add the image of the padlock to the banner. Open the padlock image from the Bagg & box download (private Box.png), then insert the image into a new layer in the layout and resize the image so that it fits centred vertically inside the layout like so:

7.2 Now on a new layer, add the banner slogan using these text settings:

Font: Cooper Std, Style: Black, Size: 30pt, Anti Aliasing: Sharp

7.3 Next, add the banner text on a new layer using the text tool (T), use these text settings:

Font: Myriad Pro, Style: Regular Size: 18pt, Anti Aliasing: Sharp

7.4 The next two elements of the layout that need to be created are the banner buttons. These buttons are created in the exact same way the Nav and Search buttons were created, using the same layer style settings. Using the rounded rectangle tool (U), create two rounded rectangles with a width of 110px and a height of 40px, like so:

To create the two small arrows inside the buttons, use the custom shape tool (U) and select the arrow image. Then create two small arrows inside the buttons and make sure they are centred.

Then apply these layer style settings to the arrows:

Drop Shadow

Inner Shadow

Gradient

7.5 To complete the banner, we need to add a news feed section. To do this, using the rectangular marquee tool (M), on a new layer create a selection 820px wide x 30px height, using the same colour as the navigation bar, like so:

Then using the text tool (T) add the news feed text using these text settings:

Font: Myriad Pro, Style: Regular Size: 14pt, Anti Aliasing: Sharp

Main Content
8 The next set of elements we are going to create is the main content elements. The first thing we are going to create is the background for the main content. Set the foreground colour to #adadad, then make a selection on a new layer 820px wide x 450px height, then using the paint bucket tool (G), fill the selection with the foreground colour, like so:

8.1 Now we are going to create the first section of the main content which is the Welcome section. Using the text tool (T), on separate layers add the welcome title and body of text using these text settings:

Title Text
Font: Cooper Std, Style: Black, Size: 18pt, Anti Aliasing: Sharp, Colour: #ffffff,

Content Text
Font: Myriad Pro, Style: Regular Size: 14pt, Anti Aliasing: Sharp, Colour: # 2f3336,

Now to complete the welcome section we need to create a line break. To create the line break, select the line tool (U) and on separate layers create two lines, like so:

8.2 We now need to create the services section. You can insert a new guide if you wish to help you keep everything aligned. First add the title and the opening text, on separate layers using the same text settings as the text and title in the welcome section, like so:

8.3 We now need to create the circle symbols, which are fancy bullet points. To create these circle symbols, first create a new layer, then using the ellipse tool (U) create a circle 30px width x 30px height and then position it in line with the text like so:

Once you have created the circle add this Gradient layer style setting:

Gradient

Your circle should now look like this:

The next part of the symbol is the circle overlay layer, which is another smaller circle positioned at the top of the circle layer. This has a height of 15px x a width of 15px. Once you have created this circle, add the following Gradient layer style setting:

Gradient

You should now have a circle symbol like this:

Next add a 16px x 16px tick symbol on a new layer, using the custom shape tool (U), and then position it centred in the circle. Finally, add the same layer style settings as the arrow layers in the banner buttons, like so:

Now you just need to add the text next to the symbol on a separate layer. Once you have done this, duplicate all the layers and create 5 symbols with text like so:

Image:  55_completed_services

8.4 To complete the main content section, you need to create the testimonial section of the content on separate layers, using the text tool (T), like so:

Footer
9 To complete the layout we need to create a footer section. Creating the footer is similar to creating the navigation bar, you need to create a new layer and position it so that it is underneath the main content layers.

To create the footer, select the rounded rectangle tool (U) and create a rounded rectangle with a radius of 10px, 820px wide with a height of 100px. Make sure the foreground colour is set to #2f3336. Finally, position the layer so that the footer is 40px in height like so:

9.1 To complete the footer, add the footer text on separate layers, using these text settings, making sure that the text is centred vertically in the footer:

Font: Myriad Pro, Style: Regular Size: 14pt, Anti Aliasing: Sharp, Colour: # ffffff,

That is the tutorial completed! Thanks for following along and be sure to check out the other tutorials on Instinct Design Tuts.