Make a Professional Business Website Template Using Photoshop

By Web Design | 26 comments | Photoshop | Tags: Adobe Photoshop Tutorials, Business Template Tutorial, Create a Business Website, Create a Website Template, Free Web Templates Photoshop, How To Use Photoshop Tutorials, How To Use Photoshop Web Templates, Photoshop Flash Templates, Photoshop How-To, Photoshop Template, Photoshop Template Tutorial, Professional Business Template, Professional Photoshop Template, PSD Template Photoshop, Using Photoshop Dreamweaver, Using Textures Photoshop

Tweet

In this tutorial you’ll learn how to make a very professional, sleek business web-template in Photoshop. You can then edit the template to your full configuration. Alternatively you can download the template .psd file from us here. Good Luck!

Step 1:

Firstly, of course, start by making a new document in Photoshop. I used a nice small size of 760 x 633 pixels. Now fill the background with a nice, light color. The color I used was #f2f3ed.

Step 2:

Create a new layer then make a selection for your navigation bar. The size of my navigation bar will be 720 x 80 pixels. You can fill your navigation bar with any color you want, I just used #000000.

After making your navigation bar, apply the following layer styles:

If you used the correct layer style settings you should have a navigation bar like this:

Using a small, sharp font write out a few buttons in the top right above the navigation bar.

These are just secondary navigation buttons/links. The font used above is called Tahoma, the size is 12 pt, the color is #5a5d59.

On a new layer drow a straight, 1px vertical line with the pencil tool inside of the navigation bar. After drawing the line, invert your colors and draw another line right next to it the same height.

This line will be used as a divider for the text buttons we’ll be putting in shortly. After you’ve drawn your divider line(s), apply Filter > Blur > Motion Blur, using the following settings:

Lastly you need to change the layer mode to either Overlay or Soft Light, and lower the opacity to about 30-60%.

Now you’ll want to duplicate your divider and move it over about 80 or so pixels, repeat this until you have about 6 dividers.

Finally, add in some text for the buttons.

The font used in the above image is Helvetica Neue, Condensed Oblique, 14 pt, Sharp. Now apply the following layer styles to your text layer:

And now your text should look like this:

Looks pretty neat doesn’t it?

Step 3:

Next thing to do is create a header type of logo thing, with the website name and description in. Start by making a new layer then create a selection on top of the navigation bar, the size of my selection was 200 x 120 pixels.

You can fill your selection with any old color, as the you’ll be applying Gradient Overlay to it in just a moment. After making your rectangle thing, apply the following layer styles:

Now your box should look like this:

Add in a nice little glossy highlight type of thing to the top left of the rectangle.

You can accomplish this effect by following this few simple steps:

1. Firstly select your rectangle layer, now make a new layer.
2. Contract your selection by 1-2 pixels by going to Select > Modify > Contract in the Photoshop menus, be sure you’re on a new layer then drag a White to Transparent gradient inside of the selection.
3. Using the Pen Tool, make a nice, curvy path on the outer edges of your gradient, turn your path into a selection then delete the inside contents.
4. To make your gradient blend in nicely you might need to change the layer mode to Soft Light, or just lower the opacity.

Now to add in your website’s text.

In the above image I used the same font as for the navigation, then I applied the following layer styles:

Looks pretty nice doesn’t it?

Step 4:

Now let’s add in a nice header graphic. Start by making a new layer underneath the logo-header layers. Create a selection the same width as the navigation bar but quite a bit larger in height, make your selection 1 px beneath the navigation bar.

Note that my selection was 720 x 140 pixels in size. Fill your selection with any old color, I used #000000. Now you’ll need to find a nice stock photo to go into your header. You can find some nice stock photos on SXC. I used this stock photo, but I colored it green.

Drag your stock photo onto the canvas, make your simple adjustments, resize then crop it to the layer you made earlier.

I added in a nice ‘glass’ type of effect underneath the logo header, I did this by making a selection the same width as the logo area, then I made a White to Transparent gradient inside of it.

I then added in some interesting text.

I used Tahoma, 12 pt, #000000 and #FFFFFF. Lastly for this section, the header, write out some text on the right side of the header.

I used Helvetica Neue for that text. I also applied this Outer Glow…

Step 5:

For this still we’ll add in a sidebar type of thing, with some nice bars and boxes. Start by making a new layer, now make a set-sized selection of about 200 x 30 pixels, make this selection underneath the header/banner.

Be sure you’re on a new layer then fill your selection with any old color. After filling your selection, you can deselect, then you can copy/paste the layer styles from your navigation bar. I had to edit the Inner Shadow though so it wasn’t so big.

Create another selection underneath this layer, but a bit larger this time, fill the selection with black then change the layer mode to Overlay.

Add in texts for both areas, I used the concept of “Testimonials.”

Duplicate. Add minor details if needed.

Step 6:

Duplicate the layers you made previously and move them downwars, rename, resize, etc.

Looking pretty good so far, huh? Duplicate the Testimonials section and move it over to the right so theres 1 pixel space inbetween them. Stretch the bar and box layer over to the edge. Now change your text so it suits.

Step 7:

Finally and lastly, add a footer and any other details/fillers you might want to add. This was just a tutorial on how to make a nice template in Photoshop, you’ll need to learn how to slice or code to get this thing onto the interweb.

Thanks for reading, we hope you enjoyed the tutorial, and of course, if you need to you can download the PSD file from here.