In part 1 of this tutorial series, I will be demonstrating how to design a professional business layout in Adobe Photoshop. I will use a number of different Photoshop tools and techniques to create this layout, which hopefully will help you improve your design skills.
Preview
Here is a preview of the layout we are going to create in this tutorial:
Downloads
Before you begin, you will need to download the following:
Design Files
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:
1.2 Now apply this background colour, #f2f2f2, to the canvas using the Paint Bucket Tool (G):
Header elements
2 The first element of this layout we are going to create is the header. To do this, start by setting the foreground colour to white (
#ffffff) and then using the
Rectangular Marquee Tool (M) create a selection
1200px by 76px and fill the selection with the white colour like so:
Now to complete this header layer, you now need to apply a layer style setting using the Blending Options Panel. Right-Click the header layer in the ‘Layers’ panel in Photoshop and select ‘Blending Options’ from the menu list. Apply the following layer style setting:
Stroke
Now position the header layer so that it is 5px from the top of the canvas, like so:
2.1 Now I am going to demonstrate how to create the ribbon shaped logo. Start by setting the foreground colour to a blue (#12a6dc) and then on a new layer create a selection 64px by 104px and fill the selection with the foreground colour. Now position this blue rectangle next to the left guide and at the very top of the canvas, like so:
Now to create the ribbon look you need to create a triangle selection using the Polygonal Lasso Tool (L) at the bottom of the rectangle. You can use guides to help keep everything aligned and equal.
Now hit the ‘Delete’ key to delete the part of the layer inside the selection. This will give you a cut out at the bottom of the rectangle, which will make it look like a ribbon:
Now apply a layer style setting to the ribbon layer in the Blending Options panel:
Drop Shadow
To complete the logo you need to add two layers of text, one inside the logo vertically and the other next to the logo. I used the font Newtow, the font file is contained in the downloads zip file.
Vertical Logo Text
Font: Newtow, Style: Regular, Size: 24pt, Anti Aliasing: Sharp, Colour: #FFFFFF
Horizontal Text
Font: Newtow, Style: Regular, Size: 24pt, Anti Aliasing: Sharp, Colour: #12a6dc
To rotate the text vertically, select the text layer and then click Edit > Free Transform... in the Photoshop menu. A rectangle will appear around the layer, right-click and select Rotate 90 CCW from the menu list. I positioned the text centred inside the logo and the header.
2.2 Now we are going to move onto creating the navigation elements of the header. For the navigation text, I used the following text settings with an equal 6 space gap between each word.
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #12a6dc
For the navigation button, I simply created a rectangle 68px by 28px using the Rectangle Tool (U) and positioned it centred over the word ‘HOME’. Now select all the layers for the navigation and centre everything inside the header layer, like so:
2.3 To complete the header elements, you need to create a blue top bar which goes in the 5px gap at the very top of the canvas. Start by creating a new layer, then create a selection 1200px by 6px and fill the selection with the colour #12a6dc. Position the rectangle at the very top of the canvas and that is the header elements completed.
Slideshow Elements
3
Now I am going to explain how to create the slideshow elements for the layout. Using the large slide image in the downloads zip folder you downloaded at the start of this tutorial, open it up in Photoshop and copy it across into a new layer in the document. Position the image
60px from the header like so:
3.1 Once you have the image in the layout, you then need to duplicate the logo layer, which we will use to create the slide title. To duplicate a layer, right-click on the logo layer and select ‘Duplicate Layer’ from the menu list.
Once you have the duplicated layer, you need to rotate it 90 clockwise and then extend it by creating another selection on the end and filling it with the blue colour. Position the ribbon 30px from the top of the image on the right side like so:
Now using the following text settings, you can write in a title for the slide.
Font: Newtow, Style: Regular, Size: 24pt, Anti Aliasing: Sharp, Colour: #FFFFFF
3.2 To complete the slideshow, you need to create the slide navigation circles using the Ellipse Tool (U) on separate layers. I used the colour #2d2d2d for the larger dark circles. For the current slide state circle, I used the colour #ffffff. The larger circles are 20px by 20px in size, the white smaller circle is 10px by 10px in size. Position everything like so:
Intro Section
4 The next elements you need to create are the ones for the intro section. This is where a welcome message can be displayed on the layout with a button link. Start by duplicating the header layer and positioning it
60px from the slideshow, like so:
Now using the following text settings add in some text, in this case Lorem Ipsum, to fill out this intro bar and indent the text from the left by 20px, like so:
Font: Newtow, Style: Regular, Size: 17pt, Anti Aliasing: Sharp, Colour: #12a6dc
4.1 To create the button, use the same method as the navigation button, create a selection 126px by 28px and fill the selection with the colour #12a6dc. Then position the rectangle centred within the intro bar an indented 20px from the right. You can also add in the text for the button on a new layer, like so:
Main Content
5
Now let us move onto the main content elements. First, we are going to create the three featured sections of the main content. Open up the featured image from the downloads zip folder into the layout on a new layer and position it
38px from the intro bar and next to the left guide like so:
5.1 Now underneath the image you just placed into the layout, add a title and body text using the following settings:
Title
Font: Newtow, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: #12a6dc
Body Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #7c7c7c
Continue Link
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #12a6dc
5.2 Now that you have created one of the featured item elements, you can then select each of the layers and then duplicate them two times. You can then position these duplicated layers with a 28px gap between each like so:
5.3 Next I am going to explain how to create the ‘Why Choose Us’ section of the layout. You need to start by creating a title for the section using the following text settings:
Title
Font: Newtow, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: #12a6dc
Position the title next to the left guide and 40px from the featured items, like so:
Now for each of the list items, you need to create the list symbol which I created using the Ellipse Tool (U). The larger blue circles are 20px by 20px in size and the white circles are 10px by 10px in size. Once you have created one list item, you can duplicate the layers and position them with a gap of 10px between each, like so:
5.4 Now you need to create the case study section of the layout. Again, you can duplicate the title for the section and position it 28px from the ‘Choose Us’ section. Use the case study image from the zip folder for the case study and add in the text and title underneath, similar to the featured items. The case study title, (John Doe) has a smaller font size of 14px. You should now have something like this:
5.5 Now you need to move onto the latest news section of the layout. Again copy across the title layer for the section and rename it. Use the following text settings for each part of the news posts:
Date
Font: Verdana, Style: Regular, Size: 10pt, Anti Aliasing: Sharp, Colour: #2d2d2d
Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #7c7c7c
Link
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #12a6dc
You should now have a latest news section like this:
Footer Elements
6 Now I am going to explain how to create the footer section of the layout. The footer background was created by creating a selection on a new layer,
1200px by 500px using the colour
#2d2d2d.
6.1 To apply the pattern to the footer, you need to use a preset pattern from the pattern file you should have inserted at the start of this tutorial. In the ‘Blending Options’ panel under the Pattern tab, apply the following pattern with the following settings:
6.2 Now that you have created the footer background, we can now start creating the footer content. First, duplicate the logo layers from the header and reposition them in the footer like so:
Now you need to add some text underneath the footer logo using the following text settings:
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #ffffff
6.3 Now open up the three social icons from the downloads zip folder and position them in the footer on separate layers likes so:
6.4 Now you need to create the twitter feed section of the footer. Use the following text settings for each of the different elements of the twitter feed.
Title
Font: Newtow, Style: Regular, Size: 18t, Anti Aliasing: Sharp, Colour: #12a6dc
Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #ffffff
Date
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Sharp, Colour: #12a6dc
6.5 Now for the final section in the footer I am going to explain how to create the quote form. The name and email boxes are 140px by 28px in size and I created these using the Rectangular Marquee Tool (M) and filling the selection with the colour #ffffff. There is a gap of 20px between the name and email boxes, like so:
6.6 Now apply the following layer style setting to both rectangles:
Inner Shadow
6.7 Now create the subject and message boxes using the following size settings and apply the same layer style setting as the name and email boxes. There is a gap of 10px between each box.
Subject
302px by 28px
Message
302px by 140px
6.8 To complete the quote form, duplicate the button layers from the intro section and reposition them underneath the quote form. Finally add in some text in each of the rectangles to represent the form text, like so:
6.9 The final step in the creation of this layout is t add a small part of the ribbon at the bottom of the footer to represent a ‘Return to Top’ link, like so:
That is the tutorial completed! Thanks for following along and be sure to check out part 2 soon.
Download PSD File
View All Articles