Creating a Professional Business Layout Using Photoshop


Designing a Simple but Professional Business Website Layout

Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact! By the end of this Photoshop tutorial you will know how to create a professional business layout.

1. Document & Background

Obviously the first thing we’ll want to do is create a new document in Photoshop! I used a standard document size of 1000 x 900 pixels, but we won’t be using the entire size of the document. Now we want to make a nice, suitable background for the design.

Start with the background by filling the canvas with a dark-ish grey-blue color (or any color you like). For this I used #4c535b. Next, we need to find a simple pattern we can blend into the background. For this you can find some nice patterns over at SquidFingers. Fill a new layer with your chosen pattern then erase away the pattern except for one corner:

Pattern Blended into Background

Next, lower the opacity for your pattern layer to around 10-20% and change the layer mode if you want something more unique. For the layer mode I usd Luminosity.

Layer Mode and Opacity Changes for Pattern

That’s a pretty neat effect right there! That’s all we’ll be doing for the background, unless you have a good idea for something more.

2. Navigation Bar

For the navigation area, find and get out the Rounded Rectangle Tool and set the settings for the tool like I’ve shown here:

Rounded Rectangle Tool Settings

OK, after you’ve got the settings, draw a rounded rectangle onto the canvas (after you’ve made a new layer). Now cut the bottom part of your rounded rectangle off, so it has a flat surface on the bottom.

Navigation Rounded Rectangle Shape Added

Please note: it doesn’t matter what color you used for the navigation bar shape. Next, apply the following layer modes to your newly-made layer:

And now we have a result like this:

Layer Styles Added to Navigation Bar

I finished off with the navigation bar effects by adding a slight hightlight to the top of the bar (use one pixel) and also a shine kind of thing at the bottom of the bar.

Highlights Added to Nav Bar

If you’re unable to add these, don’t worry about them, they’re not important. Lastly for the navigation bar we need to add text! Start by getting the text tool and writing out your navigation buttons using the font you like.

Navigation Text Links Added

You’ll want to make plenty of space between each of your links, so that there’s room for a nice divider. You may also want to apply a Drop Shadow to the text to make it stand out a little bit more.

To finish this part of the tutorial off we’ll add some simple dividers inbetween our links. Start by getting out the Pencil Tool and making a new layer. Using the smallest brush available (1 px) brush a few dots onto the canvas, like I’ve done here:

Pencil Tool used to Make Divider

Duplicate your divider and move it along so it’s inbetween the other links. Do this as many times as it takes then merge them all together. To finish off, apply a simple Drop Shadow to the now-single dividers layer.

Dividers Duplicated

3. Base Area

Now this is a really easy part. All you have to do is create another rounded rectangle shape underneath your navigation layers. What you have to do though is hide the top part of your ‘base’ shape underneath the navigation bar, otherwise delete the top part. Like this:

Base Shape Made

Very easy! Finish off by adding your copyright notice underneath.

Copyright Notice Text

The perfect font for this is ‘Arial’ and it comes with Windows. Use a size of 11 pt, all caps.

4. Header / Banner

Find a nice stock photo from a website such as iStockPhoto for the banner image.

Copy your stock photo onto the canvas and crop it to the width of your ‘base’ layer. After you’ve resized it and cropped it (something around 130 pixels in height will do) you might want to make some adjustments to the picture, possibly to make it stand out better.

Banner Stock Photo Added

To finish off with the header, add some text/a logo that you may want to come up with! I just used some basic text for the business name and slogan beneath it:

Text and Slogan Added

To make your text stand out better on a photo better you may want to add an outer glow using a dark color from the background. The two fonts that you can see in the above image are NeoSans, and Myriad Pro.

5. Content Area

Alright, we need to add some text and maybe some interesting images inside of the content area, this is to explain ‘what we do’ and some other stuff. Start by making a heading with the text tool.

Text Heading Added

Alright, add some dummy text below the heading, then a stock photo if you think it will look good!

Headings, Dummy Text and Stock Added

Obviously, since this is just a dummy text, I’ve added in some random text *cough*

6. Client Login

Every web host website should have a client login area, if not a link that leads to the client login area. Start by getting the Rounded Rectangle Tool out and make a shape onto your canvas, around 220 x 105 pixels is a good size.

Client Area Rounded Shape

The color isn’t particularly important, but use a dark grey for it. Change the fill for this layer to 10%, then apply the following layer styles:

Layer Style and Mode Changes

Add the necesary text and all that, including some boxes that you’re meant to put the text in, and this is what I’ve got:

Text and Stuff Added

Obviously it would take me a while to explain every detail about adding all of that stuff, so please download the PSD at the end of the tutorial and you can see all of the layers!

7. Special Deal Button

Just for a nice touch we’ll add in a button to the sidebar that will state what sort of hosting deals are going on. Start by making another rounded rectangle, or duplicate the one you used previously.

Deal Shape Created

As you might observe, the shape also has a dark gradient inside of it, the colors used were #3f3f3f and #292929. Now add in some text for your banner.

Myriad Pro Text Added

As you can see, the font used in the above image is Myriad Pro, various weights & sizes. Mess around with some different fonts and sizes and you’ll get something nice.

I thought it was still a little boring, so I added in a few extras:

  1. Add in a dark star shape, lower the opacity to blend it into the main shape
  2. Add a nice highlight to the top of the rectangle shape
  3. Finish off by adding another dark gradient to the bottom of the shape

Deal Button Finished

8. Testimonials

What site would be complete without testimonials? 😉 Let’s start by making another rounded rectangle in the sidebar area, use the color #c3c3c3 for making this shape.

After you’ve made the shape, copy the layer style from the client login box and paste it onto your new box.

Box Created

Layer Styles Pasted

Now, using Arial as your primary font, add in some random filler text, and a name underneath, like so:

Testimonial Filler Text

Now duplicate all of your testimonial layers and move them down a little bit so you have two.


Well, we’re done for this tutorial! I hope you enjoyed it, if you have any questions please feel free to leave a comment below, but be sure you’ve checked out the PSD file before you ask a question!

Recommended for you:

29 thoughts on “Creating a Professional Business Layout Using Photoshop”

  1. That was good tutorial but could you make a tutorial on how to make this PSD into an html site. The slicing and other stuff?

  2. yeah, as Sahil said: awesome tutorial and I just made something I’m really proud of… now how do I add the HTML? Thanks for the help!

    Luke’s last blog post..May Income Report

  3. Hey, Great design and great tutorial but i have 1 question
    would you be able to upload or give us/me an link to the
    NeoSans Bold Font? i would really appreciate it!

  4. Thanks, great tutorial but same question for me.

    How to make a real site out of it ? Having a great picture is useless now, I checked the other interface template tutorials and still no instructions to make this a functional website.

  5. You shouldn’t put up a page of sliced photoshop for a web site. It needs to be coded and elements are placed on that page, not the whole image that you mock up in photoshop.

    The best way, if you don’t want to learn, is have someone do it for you. There are plenty of places that turn mockups into valid xhtml pages, just do a google search.

    Here are a couple:

  6. awesome although i have a photoshop cs3
    I don’t know how to build a complete based web using photoshop application
    thanks 4 the tutorial ,man

  7. Very good tutorial but how could i open the psd file?
    Because when i download it, and i want to read it whith photoshop it tells me that rar file are not supported.

  8. Nice design tutorial, but useless as a website. You don’t want your title, headings, or content displayed as images. You’ll never be recognized in search engines.

    Use it as a background, but every word that appears on your website should be coded in html.

  9. I don’t understand how that if you add text to it now, you can do it after you slice it up in imageready? Then the text wouldn’t be editable.

  10. Excellent tutorial, as usual. It’s true what they say about how an expert makes something difficult look easy.

    I really enjoy this site and I’m using some of the techniques as I rebuild Thanks again,

Leave a Reply

Your email address will not be published. Required fields are marked *