Create a Clean Business Web Template Design in Photoshop

Oct 22 2009 by Andrei Patrascu | 26 Comments

Create a Clean Business Web Template Design in Photoshop

In this web design tutorial, you’ll see a method for creating a professional web design mockup that’s perfect for a modern business or e-commerce website. This tutorial assumes that you know the basics of Photoshop.

Final Result

This is a preview of how your template will look like when we finish it, so take a look at what we will be creating! Remember that you can click on the preview below to see the full-scale version.

Final Result

Setting up the Photoshop document

1 We will start by creating a new document (Ctrl + N) with a width of 1024px and a height of 1200px.

Creating the Header

2 Once the new Photoshop document is set up, create a new layer (Shift + Ctrl + N) above the standard white Background layer and name it header.

3 After that, grab the Rectangular Marquee Tool (M) and draw a 75px high rectangle selection at the very top of the Photoshop canvas, as shown in the figure below:

Creating the Header

4 Now right-click the rectangle, and select Fill, which will open up the Fill dialog box. Under the Use option, choose Color; this will open the Choose a color dialog; use a dark gray color (#191919) and press OK to set the fill.

5 Now go to Filter > Texture > Texturizer to give the header background a bit of texture. Input the settings below:

Setting up the Photoshop document

6 Now, the texture filter applied will seem a little bit harsh and pronounced, but keep reading because we’ll make more adjustments. The next step is to go to Image > Brightness/Contrast and apply the settings below:

Setting up the Photoshop document

7 It already looks better, right? Now we will adjust it with some layer styles. So right-click on the header layer in the Layers Panel and select Blending options. Select Gradient Overlay and than apply the following settings:

Setting up the Photoshop document

Here is what the header should look like now:

Setting up the Photoshop document

Creating the logo

8 Lets create a basic logo/site name; don’t panic, it’s not going to be complicated and if you want to use your own logo, go ahead. Create a new layer over the two existing ones (Background and header) and name it logo.

9 Then grab the Horizontal Type Tool (T) from the Tools Panel and create a text box by holding down Shift and dragging your mouse to the size you want your site name to be. Finally, apply these Character settings (if you don’t have the Character Panel open, go to Window > Character to switch it on):

Creating the logo

10 I chose "INDEX" as the name, but you can choose any other name and may change the size and the alignment. I applied white color (#FFFFFF) to the text but to add a bit of style, changed the last letter, "X", to a color of #00C0FF.

Making the Navigation bar

11 Make a new layer (Shift + Ctrl + N) called Nav Line.

12 Press M to choose the Rectangular Marquee Tool and make a 10px high rectangle right below the header background. Fill it with #0C0C0C. This will be a nice divider between the header background and Navigation bar.

Making the Navigation bar

13 Now, create a new layer and call it Nav.

14 Now select again the Rectangular Marquee Tool (M) and create a 40px high rectangle right below the Nav Line. Fill it with #181818.

Making the Navigation bar

15 Right-click on the Nav layer and choose Blending Options. Add an Inner Shadow layer style to the layer with the following settings:

Making the Navigation bar

16 Select the Horizontal Type Tool (T) and write your navigation link items. You can use the following Character settings:

Making the Navigation bar

17 Now we create a new layer below the text layer we just created named Atab, which stands for Active tab. This will denote the link that the user is currently on – in this example, the Home link.

18 Select the Rounded Rectangle Tool (U). Set the Radius option in the Options bar to 6px and the Color option to a dark gray color (#0F0F0F). Then, draw the rounded rectangle shape right beneath the Home link.

19 Next, right-click the rounded rectangle shape layer and select Blending Options. Apply an Inner Shadow and a Stroke layer style with the following settings:

 

We finished the navigation! Now our template is starting to take shape.

Navigation

Designing the Product Preview section

20 Now, we will set up a nice and modern looking preview of the product/service your company has to offer. We start by creating a new layer and then calling it Product Preview.

21 Grab the Rectangular Marquee Tool (M) and make a 325px high rectangle. Fill it with a light gray color, #E8E8E8.

Designing the Product Preview section

22 Go ahead and create a new layer above Product Review and name it PO Line.

23 Get the Single Row Marquee Tool and make a line between the Nav layer and the Product Preview layer. Right-click on the marquee selection and fill with white, #FFFFFF.

Designing the Product Preview section

Making the Content Area

24 Create a new layer and name it Content. Again, grab the Rectangular Marquee Tool (M) and select the area of the canvas below the header, navigation, and Product Review area; we’ll give this area a subtle gray color gradient in the next steps.

Designing the Product Preview section

25 Fill the selection with whatever color you want; it’s not important what color you choose because we will style it with a gradient overlay.

26 Right-click the Content layer in the Layers Panel, select Blending Mode and apply a Gradient Overlay layer style with the following settings:

Designing the Product Preview section

27 Make a new layer between the PO Line layer and the Content Layer and name it Content Shadow. This will be a nice divider between the Product Preview and Content sections.

28 Grab the Rectangular Marquee Tool (M), make a rectangle that’s roughly 20px in height, and fill it with #000000.

29 Now go to Filter > Blur > Gaussian Blur and set the Radius to 10px. Also, lower the opacity of the layer to 20%.

Designing the Product Preview section

Creating the Footer section

30 Lets work on the footer section of the template. It will be something clean and simple, nothing too fancy. Start by making a new layer and naming it Footer.

31 Grab the Rectangular Marquee Tool (M) and make a rectangle selection at the bottom of the canvas at 150px height. Fill it with a color of #181818.

Creating the Footer section

32 Create a new layer and name it Footer Line. It will be a separator line between content and footer. Use the Rectangular Marquee Tool (M) to create a 20px rectangle and fill it with #0F0F0F.

Creating the Footer section

Creating the Footer section

Adding in the content on the Product Preview section

33 Create a new layer called Preview Image. This will be an image used at the Product Review section. You can either choose a preview image of your own, or download the one I used in the template. If you choose to download the image, place it on the Preview Image layer we just created, then resize it until you like how it looks and align it properly.

Creating the Footer section

34 Apply a Drop Shadow layer style onto Preview Image layer and use the following settings:

Creating the Footer section

35 Next, we add the text content on the right of the layout. Start by creating a new layer. Grab the Horizontal Type Tool (T) and write a nice title for you product. The font settings used in this tutorial, which you can set in the Options bar is Myriad Pro, Semibold weight, 24pt size, and a dark gray color of #0F0F0F.

Creating the Footer section

36 Then create another layer and write a short (a few phrases) description of the product using the settings of Myriad Pro, Regular weight, 16pt, and a color of #5A5A5A.

Creating the Footer section

Creating buttons in the Product Preview section

37 Now, we have to create two nice buttons for our preview product area, a "Read More" button and an "Order Now" button. Let’s start with the first one! Create a new layer and name it Read More Btn. Grab the Rounded Rectangle Tool (U) and draw a good fitting sized rectangle (adjust the Radius option of the corners to something you like).

Creating buttons in the Product Preview section

38 Now right-click the layer and select Blending Options applying these settings:

Creating buttons in the Product Preview sectionCreating buttons in the Product Preview section

Creating buttons in the Product Preview section

Creating buttons in the Product Preview section

Creating buttons in the Product Preview section

39 Use the Horizontal Type Tool (T) to type in the "READ MORE" Text using a white color.

40 Duplicate the Read More Btn layer and rename it Order Now Btn. Move it to the right of the Read More button using the Move Tool (V) and your right arrow key. Change the Gradient Overlay layer style of the button to make it blue; use #0084AF for the left color stop and a slightly lighter shade of blue (#00C0FF) for the right color stop.

Here is how the website should look now!

Creating buttons in the Product Preview section

Adding the content in the Content area

41 Well friends, now we will work on the Content area. This area will contain some more information about the company, testimonials, and payment methods. This is not that hard but we have a little work to do! We’ll be using some free icons called Function Icon Set. Download that set, as we’ll be using some icons included with it in the following steps.

Adding content

42 Grab the Horizontal Type Tool (T) and type "Our company" at the top left of the content area; the font size 18pt, font weight of Bold, and color of #8F8F8F.

Adding the content in the Content area

43 OK. Now create a text layer with the Horizontal Type Tool (T) and write some text describing the company – place it right below the Our company heading. The font size used here is 15pt, font weight Regular, and color of #1B1B1B.

Adding the content in the Content area

44 Let’s create the Read More link for it below. Type out Read More using the Horizontal Type Tool (T) with a font size of 15pt, italics, and the same color as the description. Open the Function Icon Set, look for the coffee cup icon (it’s called coffee_mug.png). Resize it down using the Free Transform Tool (Ctrl + T), making sure to hold down the Shift key while resizing to maintain the proportions. When you get the size you like, place it on the left of the Read More link.

Adding the content in the Content area

45 Create the "Testimonials" section in a similar fashion as the "Our company" section. The icon used in the web template from the Function Icon Set is called coffee_48.png. This is what it looks like now:

Adding the content in the Content area

Working on the Content area right column

46 Now, the right part of the Content area needs to be done. At the right of the first column that we just created, write "Why Us?" as the heading. The font size is 18pt, bolded and using a color of #8F8F8F. Position it so that it is vertically aligned with the first heading of the left column ("Our company").

Adding the content in the Content area

47 Use the Rounded Rectangle Tool to create a rectangle below the "Why Us?" heading.

Adding the content in the Content area

48 Add a Color Overlay layer style using the color #E1E1E1 and a Stroke layer style that’s 1px and set to the color of #DBDBDB.

49 Follow the previous steps for the "Payment Methods" section below the "Why Us?" section. Make the gray Rounded Rectangle significantly shorter, about 40px high and as wide as the "Why Us?" box.

50 Finally, go into the Function Icon Set and look for the credit card symbols, and then place them into our design: they’re called creditcard_paypal.png, creditcard_mastercard.png, and creditcard_visa.png.

Adding the content in the Content area

Adding the content in the Content area

We’ve finished the Content area now! This is how it looks thus far:

Putting in the content for the Footer

51 Finally, the footer! Yes, our template is almost finished, but the cherry on the top will be the footer! I think it’s a great idea to place a newsletter subscription form and a Twitter update status in site footers. Let’s start with the newsletter first. Grab the Horizontal Type Tool (T) and write in the heading, "Get our Newsletter" in the footer area. The setting is: 20pt size, bolded and a color of #0F0F0F.

52 Place newspaper_48.png icon from the Function Icon set it on the right of the "Get our Newsletter" heading.

53 Write some explanatory text for the newsletter feature below the "Get our Newsletter" Heading; I used the same font we’ve been using, 16pt in size, in italics, and with a color of #B8B7B7 (Which is a light gray).

54 Create a new layer and name it Input Box. Get the Rounded Rectangle Tool (U) and create a medium in input box for the users to type in their email address to get the newsletter.

55 Create another rounded rectangle on the right of the input box. Use the Horizontal Type Tool (T) to write the word "Go!’ inside it (the font settings used in this tutorial is 18pt, bolded, and with a color of white – #FFFFFF).

Below is what the newsletter subscription section should look like:

Putting in the content for the Footer

56 Now, let’s work on the Twitter status. We’ll need the icon called twitter_48.png from the Function Icon Set. Place it into the Photoshop document and move it somewhere on the right side of the footer.

57 We need to turn flip it horizontally so that the icon is facing the other way, so press Ctrl + T, then right-click on the icon in the canvas, and then choose Flip Horizontal.

58 Create a new layer under the icon layer. Grab the Ellipse Tool and draw a circle that will act as a shadow of the Twitter bird, using a dark gray color of #0F0F0F.

Putting in the content for the Footer

59 Create a new layer and with the Rounded Rectangle Tool, draw a nice solid square that will act as a speech bubble; use the dark gray color we just used (#0F0F0F).

60 Now, with the Pen Tool (P), draw a triangle that points from the box to the icon using the same color as above (#0F0F0F).

Putting in the content for the Footer

61 And finally, type in some sample text to simulate a Twitter status update.

Putting in the content for the Footer

Conclusion

We just completed the tutorial on how to build a simple business template in Photoshop.

Final Result

I hope you found my tutorial useful; practice and I have no doubt that you’ll do better than this!

Special thanks to We Function for the beautiful free icons used in the tutorial!

Share your work with us on Flickr!

If you’ve finished the tutorial, why don’t you share with us your work in the Flickr Six Revisions group? See you there!

Download

If you would like to get the PSD file associated with this tutorial, you can download it below as a ZIP archive.

Related Content

About the Author

Andrei Patrascu is a young freelancing graphic and web designer based in Romania. His web presence can be found at andreip.net. If you would like to stay in touch with him, follow him on Twitter as @andrei where he regularly shares graphic and web design-related tweets.

26 Comments

dronix

October 22nd, 2009

hey nice layout, would love to see the tut on how to code this.

win

October 22nd, 2009

Thanks for the tutorial!

designfollow

October 22nd, 2009

thanks for this great tutorial.

Webjohn01

October 23rd, 2009

What a nice simple and clean business design. I really love
the simplicity that makes your web experience a breeze.

Keep up the good work.

janvanlysebettens

October 23rd, 2009

“How to create a boring web template design.” would have been a more appropriate title.

z0r

October 23rd, 2009

Bad visibility of “Get our Newsletter” and I’d make a different stroke above “Our Company” section. Rest is really nice.

Lauren Jordan

October 23rd, 2009

I wouldn’t go bashing this tutorial. It may not be the most exciting of layouts, but it works well. Not all companies would want this approach to their website, but it’s an idea. Tutorials are meant to help you learn a new technique on how to do something, and not meant to just copy. So what you label as boring is probably really helpful to someone else. Good job on the tutorial.

Tim Read

October 23rd, 2009

Its OK janvanlysebettens. Not everything has to be uber fancy. The point is, people can also use this to learn some basic photoshop too.

esranull

October 23rd, 2009

thanks like it

WipeR

October 23rd, 2009

Not very nice…

jASON

October 23rd, 2009

nice layout, can someone do a follow up coding tut? we havent had a psd conversion tut for a while

Jacob Gube

October 24th, 2009

@jASON: I know, we haven’t published a PSD->HTML/CSS conversion in a while. They’re hard to write but we’ll get some up soon to convert the Photoshop mockups we’ve shown previously. Thanks for the nudge.

Andrei Patrascu

October 24th, 2009

Thank you guys for the nice replies :). More coming soon.

AtiKuSDesign

October 27th, 2009

This is a really comprehensive tutorial. Hopefully I’ll find some time to properly go through it some time this week.

DlibrarieD

October 27th, 2009

Thanks for tuts on mockups. It`s very helpful. Waiting for conversion.

Sek

October 28th, 2009

Please keep the web template out. I really love it. As the newby in the web design Business. It’s good to study from successful design.

Dax

October 28th, 2009

Sorry, but I agree with janvanlysebettens.

Altough you don´t need a fancy design, a website design needs a meaning. Every detail, like the height of the header, the design of elements like links or buttons must be proper designed. Web design it is not a random task.

I know this is a Photoshop beginners tutorial, but you must remember that this design it is supposed to be used in an actual website.

For example, why the navigation is aligned right? Just because it looks good? A user must travel all the way from the main content (left) to the navigation (top right). It is a waste of time.

Another example: Conventions and Consistency.
Hyperinks should look like hyperlinks so the user can identify them easily. Usually hyperlinks should be text underlined or in blue color. The “Read More” text doesn´t look like links, instead, the “@templatetus” and “2 minutes ago” text in the footer look like links.

Maya

October 29th, 2009

I’m loving the how-tos. Thanks for sharing, it’s very very helpful.

Hugh

October 30th, 2009

I think it was a good tutorial. I just finished it. My only concern is for the people just beginning that you say pt instead of px for the font through out which will make the layout look wrong, but still a good tutorial. I am looking into having some tutorials like this on my webzine. Thanks for the tutorial.

hibiscus jaune

October 31st, 2009

It is not necessarily a bad design. I guess it really depends on what you want to achieve with your website.

It looks pretty straightforward. It could be that the target audience for this website is the kind that is not concerned with fancy stuff.

Some people, especially in the business field, have no time to waste trying to figure out what icon does what. They are looking for a clear design and readily available information.

Mars

November 2nd, 2009

this is a great tutorials, very clean indeed

John

November 6th, 2009

This is THE template to show a tut on how to code. The minimalistic design will make it great and applicable for many other designs as well.

digibomb

November 10th, 2009

is that a timmys cup icon? awesome!

yury

August 8th, 2010

great tutorial! thanks for sharing…

Mr.AD

April 16th, 2011

Hello,

Maybe the image at step 19 is lost ! Please check it :)

Shirl

August 12th, 2011

Geez, that’s unbleeiabvle. Kudos and such.

Leave a Comment

Subscribe to the comments on this article.