Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

In this tutorial you will learn how to create a unique business layout using Adobe Photoshop. Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact!

Designing a Simple but Professional Business Website Design

Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact!

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:

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.

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:

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.

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:

• Inner Shadow
• Gradient Overlay

And now we have a result like this:

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.

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.

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:

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.

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:

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

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.

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:

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.

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

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.

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:

• Gradient Overlay
• Stroke

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:

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.

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.

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

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.

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

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

Complete

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!

Tags: Adobe Photoshop, Creating Websites, Photoshop Tutorials