In this tutorial series, we are going to create a clean fresh business layout. Starting with the design of the layout in Photoshop, and then building the design using the latest HTML 5 & CSS3 standards.

Preview

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

Resources

Before you begin this tutorial you need to download the resource file which contains the patterns and images used in the creation of this layout:

Download Resource File ->

Before you begin to create the tutorial you need to open both pattern PSD files in the resource download and then define each PSD as a pattern, by clicking EDIT >DEFINE PATTERN… in the Photoshop file menu. You will then be able to use them when applying a pattern layer style.

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

1.1 Now we are going to add some guides to the document, in order to aid us in the design of the layout:

Applying the background colour
2 Apply the background colour to the canvas by first setting the foreground colour to #f6f6f6 and then using the Paint Bucket Tool (G) fill the canvas with the colour, like so:

Creating the navigation bar
3 We are now going to create the first element of this layout the navigation bar. Start by creating a new layer, then with the foreground colour set to #4cb43d create a rounded rectangle with a radius of 20px, using the Rounded Rectangle Tool (U), the width of the first and last guide (960px) and a height of 41px, like so:

3.1 Once you have created the navigation bar, you then need to apply some layer style settings to the layer. To do this, right-click the nav bar layer and select ‘Blending Options’ from the menu list. A window will appear, then apply these layer style settings:

Inner Shadow

Pattern Overlay

Stroke

3.2 Next we need to create the navigation button, which will represent the hover state. Create a new layer, then using the Rectangle Tool (U), create a rectangle 70px wide by 42px in height. Then place it next to the second guide:

3.3 You now need to apply these layer styles to the navigation button:

3.4 We are now going to add the navigation text using the Type Tool (T). Start by creating a new layer, then set the foreground colour to #fffff, then type the navigation text using these text settings:

Font: Helvetica, Style: 65 Medium, Size: 14pt, Anti Aliasing: Crisp

3.5 To finish the navigation bar, we now need to create the search section. This is simply created by first creating a new layer, then set the foreground colour to #ffffff, then using the Rectangle Tool (U), create a white rectangle 200px wide by the height of the navigation bar, and finally position it next to the guides like so:

3.6 To complete the search section, reduce the layer opacity of the search box to 20%. Then finally from the resource download, insert the search symbol (Magnifying Glass) onto the search box. That is the navigation bar completed.

Logo & other header content
4 Before we begin to create the main section of the layout, we need to create the text based logo. Start by creating a new layer, then set the foreground colour to #4cb43d, then using the Type Tool (T), type the logo using these text settings:

Font: Helvetica, Style: 65 Medium, Size: 30pt, Anti Aliasing: Crisp

4.1 Now apply these layer style settings to the logo layer:

Drop Shadow

Inner Shadow

Gradient Overlay

4.2 To complete the header section, simply add some email or other tagline, like so:

Main Banner
5 We are now going to begin creating the main banner section of the layout. Start by creating a new layer, then create another 20px radius white rounded rectangle, with a width of 960px and a height of 300px, like so:

5.1 Now apply these layer style settings:

Inner Shadow

Pattern Overlay

Stroke

The banner should now look like this:

5.2 You now need to insert the Iphone/Ipad image from the resource download. (You can customise them with your own images) Then insert a guide 176px from the top, finally position both images like so on separate layers:

5.3 Now insert a guide 496px from the left of the canvas, and then create the banner text as follows:

Heading
Font: Helvetica, Style: 65 Medium, Size: 24pt, Anti Aliasing: Crisp

Apply the same layer style settings as the logo.

Text
Colour: #2d2d2d, Font: Helvetica, Style: 65 Medium, Size: 14pt, Anti Aliasing: Crisp, Spacing: 18pt

5.4 Now create a 20px radius rounded rectangle on a new layer 180px wide by 40px in height. Then apply the same layer style settings as the navigation bar:

5.5 Now using the Line Tool (U) on separate layers, you need to create two vertical lines the height of the button, with the colour codes below, and then position the lines 43px from the right of the button.

Left Line (1^st)
# 229200

Right Line (2^nd)
# 94d583

5.6 Now on another new layer, using the Custom Shape Tool (U) create an arrow shape, 20px wide by 15px in height, then position it so that it is centred between the lines and the right edge. Finally apply these layer style settings to the arrow layer:

Drop Shadow

Inner Shadow

Gradient Overlay

5.7 Now you need to add the following text on a new layer with the colour #2d2d2d, then position the text so that it is centred between the left edge of the button and the lines. To complete the button, apply the same layer styles to the text as the ones for the button arrow.

Font: Helvetica, Style: 65 Medium, Size: 14pt, Anti Aliasing: Crisp

Main Content
6 We are now going to create the main content for the layout. The first section is just simply text on separate layers. Here is a list of the different settings you need to replicate the body text of the layout:

Heading
Font: Helvetica, Style: 65 Medium, Size: 18pt, Anti Aliasing: Crisp

Apply the same layer style settings as the logo.

Text
Font: Helvetica, Style: 65 Medium, Size: 14pt, Anti Aliasing: Crisp

6.1 You now need to create the blog section of the main content. The images for the posts can be found in the resource download. The text settings are as follows:

Post Title
Font: Helvetica, Style: 65 Medium, Size: 18pt, Anti Aliasing: Crisp

Date
Font: Helvetica, Style: 65 Medium, Size: 10pt, Anti Aliasing: Crisp

Text
Font: Helvetica, Style: 65 Medium, Size: 12pt, Anti Aliasing: Crisp

Sidebar content
7 Next is the sidebar content. The service section is self explanatory but I am going to show you how to create the circle symbols. You need to insert another guide 566px from the left edge of the canvas.

Start by creating a 30px by 30px circle on a new layer using the Ellipse Tool (U), with the same colour and layer style settings as the navigation bar. Like so:

7.1 Next create a tick symbol using the Custom Shape Tool (U), 24px wide by 23px in height, the same colour as the background, #f6f6f6. You then need to position the symbol so that it overhangs the top right side of the circle like so:

7.2 Now complete the service section by adding the text and duplicating the symbols like so:

7.3 You now need to create the recent projects section of the main content. The thumbnail images can be found in the resource file, but you could use your own.

Footer
8 To complete the tutorial you need to create the footer. This can be easily done by duplicating the navigation bar by right-clicking the navigation bar layer and clicking ‘Duplicate Layer…’ from the menu list. Then change the text and place the footer like so:

That is the tutorial complete! Thanks for following along and be sure to check out part 2 when it has been posted. You can download the PSD file below:

Download PSD File ->