Slick Business Website Template

Business Web Template

In this Photoshop tutorial you’ll learn how to make a professional business web template. So if you run a business and don’t want to pay from $xx to $xxxx for a web template, this is the tutorial for you.
business web template - Photoshop Tutorial
Click for larger preview.

Step 1.

First start this tutorial by making a new document for the template. I will be using 820×900.
Now fill the background of the document with #bab4a4.
filled background - Photoshop Tutorial

Step 2.

Next thing is to make a selection on the canvas the whole height of the document but about 60 pixels smaller than the width.
My selection was 740×1020.
selection - Photoshop Tutorial
Click for larger preview.
Now fill this selection with white (#ffffff)
filled with white
In the layers pallete, right-click the main white layer and go to the Blending Options…
Apply the following Outer Glow.
outer glow applied - Photoshop Tutorial

Step 3.

Next we’ll make the header bar.
At the top of the document make a selection of your choice, I used a selection 20 pixels smaller than the main white rectangle, and 46 pixels in height.
header bar selection
Fill your selection with a light grey, I used #ebebeb.
Now apply the following Gradient Overlay.
after gradient overlay
On a new layer make a 1 pixel line 1 pixel from the bottom of the bar all the way across with the pencil tool.
1 pixel line
Lower the opacity for this layer to about 50%.
Now add in the text for the header bar. I used Tahoma, 12pt, Bold, #3aaddb.
text - Photoshop Tutorial

Leave a comment