Design and Build a Clean Business Layout Using Photoshop and HTML5 Part 1

Posted 6th September 2011

In part 1 of this tutorial series, I will be demonstrating how to design a clean business layout in Adobe Photoshop. You can use the tools and techniques used in this site design in your own projects.

Before you begin, you will need to open and save the following images to be used in the design of this layout:

Vector iPhone 4 PSD File Large
Vector iPhone 4 PSD File Small

Preview

Creating a new document
1 Start by opening Photoshop and creating a new document with the following settings:

1.1 In order to keep the elements in the layout organised, I used a number of guides to keep things organised. Insert guides by clicking View > New Guide... in the file menu:

We will be using a white background for this design, so there is no need to change the background colour.

Header elements
2 First, we are going to create the text based logo for this layout. Simply create a new layer in your Photoshop document and select the Type Tool (T). Then using the following text settings, type out your logo with the colour #2d2d2d, and position the logo according to the image below:

Font: Myriad Pro, Style: Italic, Size: 30pt, Anti Aliasing: Sharp, Colour: #2d2d2d

2.1 Now you need to apply some layer style settings to the logo layer. To do this, right-click the logo layer in the layers panel of the Photoshop framework, and select ‘Blending Options’ from the menu list. Then apply the following settings in the options panel which should appear:

Drop Shadow

Inner Shadow

Gradient Overlay

2.2 Now you need to create the text based navigation for this design layout. Set the foreground colour to #2d2d2d and then on a new layer, type out the navigation text using the appropriate space between each word, like so:

That is the header elements completed; your document should look like this:

Slideshow
3 The next set of steps will explain how to design the slideshow in the layout. Start by creating a new layer and then using the Rectangular Marquee Tool (M), create a selection 940px wide by 300px in height. Fill this selection with a colour using the Paint Bucket Tool (G) and then position the rectangle so that it is centred and 40px from the header elements.

3.1 Now apply the following layer style settings to the layer, using the Blending Options panel, like so:

Your layout should now look like this:

3.2 Now we are going to add a bokeh circle effect to the slide background layer we just created. In order to do this, you first need to create a brush preset. Create a new document 600px by 600px with a transparent background, like so:

3.3 Now using the Ellipse Tool (U) create a circle shape using a foreground colour of #2d2d2d, like so:

3.4 Now apply a Stroke layer style setting to the layer in the Blending Options panel:

Stroke

Now you need to save this document as a preset brush to be used when creating our bokeh effect. To do this, click Edit > Define Brush Preset... in the file menu and save your brush.

3.5 Now back onto our layout document, we need to add some 80px circles using the Brush Tool (B) and the preset brush we just created onto a new layer using a white foreground colour #ffffff. In order to create the effect you need to build up the layers by applying a few circles at a time overlapping each other. Reduce the Opacity of each layer to 15%. Once you have a few layers, you should have a neat bokeh effect for your slide background.

You can adjust the opacity further in order to create the look you prefer:

3.6 Now that you have created the slide background. Open the iPhone images you should have saved at the beginning of this tutorial and then place them on separate layers in the layout like so:

Tip: You can use guides at anytime to help you keep things aligned and centered.

3.7 Now add some text to the slide using the colour white on separate layers. Position the text like so:

3.8 To complete the slideshow, you need to create some slide navigation layers, using the Rectangle Tool (U) on separate layers. Create 4, 12px by 12px squares, 3 with the colour #ffffff and the fourth with the colour #2d2d2d. This will be for the selected slide. You then need to reduce the layer opacity of the squares to 80%. Finally position them in the bottom right corner like so:

Tagline element
4 The next element we are going to create is the tagline area under the slideshow. You need to create a line break, which we will duplicate. To do this create a new layer, set the foreground colour to #7f7f7f, and then using the line tool (U) create a line 940px wide using the guides. Then duplicate the line layer you just created by right-clicking the layer and selecting ‘Duplicate Layer’ from the menu list. You then have to move this line down 1px so it is underneath the first and then give it a colour of #b4b4b4. You should have something like this:

4.1 Now add a tagline using the Type Tool (T) on a new layer. I used some lorem ipsum text, but you may prefer to write something realistic. Position the text so that it is centered and use the following text settings:

Font: Myriad Pro, Style: Italic, Size: 24pt, Anti Aliasing: Sharp, Colour: #2d2d2d

4.2 Now complete the tagline by duplicating the two line break layers you created earlier and move these down underneath the text like so:

Main Content
5 Now I am going to explain how to create the main content of the layout. First you need to create the welcome text on separate layers using the Type Tool (T). Use the following text settings:

Title
Font: Myriad Pro, Style: Italic, Size: 22pt, Anti Aliasing: Sharp, Colour: #653dcc

Text
Font: Myriad Pro, Style: Italic, Size: 14pt, Anti Aliasing: Sharp, Colour: #2d2d2d

5.1 Next you need to create the service boxes. This is easily done by creating a 132px wide by a 76px in height rectangle using the Rectangle Tool (U). You then need to add the following layer style settings to the rectangle:

Inner Shadow

Gradient Overlay

5.2 Once you have creating one of these service boxes and added some text, you can then duplicate the box three times and then space them out like so:

5.3 Next is the latest news section of the layout. This element has a rather nice title placeholder image which I will explain how to create. First create a new layer and then set the foreground colour to #e3e3e3, then create a 220px by 360px selection using the Rectangular Marquee Tool (M) and then fill that selection with the foreground layer. Position the layer in line with the other main content elements and then apply the following layer style:

You should have something like this:

5.4 Now we are going to create the title placeholder for the top of the rectangle. Start by creating a new layer, then using the Rounded Rectangle Tool (U) create a rounded rectangle with a radius of 10px, 140px wide with a height of 60px. Then position this layer like so:

5.5 Now we need to create a 22px radius size circle with the colour #2d2d2d, using the Ellipse Tool (U). Once you have done this you then need to cut the bottom half off the circle using the Rectangular Marquee Tool (M), like so:

Now that you have a semi circle, position it next to the rounded rectangle you created earlier and then duplicate the semi circle and move it to the other side, like so:

5.6 Now you need to fill the gaps between the rounded rectangle and the semi circles. To do this, create a new layer and then create a selection like so and fill the selection with the foreground colour you used:

5.7 To complete this title element, apply the following gradient to the layer:

Gradient Overlay

Add in the title text and then you should now have a news box looking like this:

5.8 Now add some text inside the news box on separate layers, like so:

Date
Font: Myriad Pro, Style: Italic, Size: 12pt, Anti Aliasing: Sharp, Colour: #653dcc

Text
Font: Myriad Pro, Style: Italic, Size: 12pt, Anti Aliasing: Sharp, Colour: #2d2d2d

5.9 To complete the main content section of the layout, we are going to create a button under the welcome text section. To do this, create a new layer, then using the Rounded Rectangle Tool (U), create a rectangle 120px wide by 32px in height with a radius of 16px. Then apply the following layer style settings:

Inner Shadow

Gradient Overlay

Add some text in white to the button and position it like so:

Footer elements
6 To complete this layout we need to create the footer section. Start by creating a new layer and then set the foreground colour to #e3e3e3. Create a selection the full width of the document and 394px in height, then fill the selection with the foreground colour. You should have something like this:

6.1 Now you need to create the Request A Quote section of the footer. To do this, create a new layer and type out the title using the following text settings:

Font: Myriad Pro, Style: Italic, Size: 24pt, Anti Aliasing: Sharp, Colour: #653dcc

Position the title like so:

6.2 Now we need to create the input forms. To do this, create a new layer, then using the Rounded Rectangle Tool (U), create a rounded rectangle with a width of 150px and a height of 32px. The rectangle should have a radius of 16px. Now apply a inner shadow layer style to the layer:

Inner Shadow

Once you have created one of these rounded rectangles you can duplicate them and insert text. For the submit button you can duplicate this from the one in the main content.

6.3 Now you need to create the quick links section of the footer. This is simply a 20px circle with the same purple gradient we have used throughout the layout. You can then use the Custom Shape Tool (U) to add a tick symbol to the circle on a separate layer. Add in the text and then position everything like so:

6.4 Now for the Flikr photo placeholders. These squares are 75px by 75px in size with slightly darker grey colour #d0d0d0. They then have the inner shadow layer style applied to each of them we have used on other elements in the layout. Position all of the layers like so: