Create a light business psd template in Photoshop

Sep 18th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a light business template in Photoshop.

When I’m writing this tutorial I’m really happy because this is the tutorial nr. 30 published on trendyTUTS. If it’s the first time when you came on trendyTUTS, I advise you to read the rest of our tutorials published on Website Layout Tutorials. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion.

If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our Web Layouts (PSD and CSS/HTML version for each tutorial), all Premium Files and unlimited access to our PSD to CSS/XHTML Tutorials.

Click Here To See The Live Preview (CSS/HTML)

For security reasons some files from this template have been encrypted, that’s why, browsers such as Internet Explorer wont display this template correctly. In order to see a working live preview, I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Final preview:

Business PSD Template

To create this tutorial I have used:

Let’s start the tutorial. Open Photoshop and create a new document 1020 by 1250:

Next, set the Foreground Color to #f0f0f0, than with Paint Bucket Tool press one time on the document

Select Rectangle Tool and draw a similar shape on the footer

Step1 – Creating the logo and the top links:

To create the logo, I will select Type Tool and I will write “Business Template” and as a tagline I will write: “a design by trendyTUTS”

Next I will select Rectangle Tool and I will create an orange shape on the top right corner, than using type tool I will add some links.
Here is my final result for this area:

Step2 – Creating the navigation

To create the navigation, first I will select Ellipse Tool and I will create this shape:

Next I will go to Filter>Blur>Gaussian Blur. Here I will apply a radius of about 15px

My result.

In this manner I have created the shadow for the navigation. Now I will select Rounded Rectangle Tool, with a radius of about 10 px and I will create the navigation bar over the shadow. I will apply this layer styles also:



Next I would like to create a hover for the navigation bar. To do that I will select again Rounded Rectangle Tool with a radius of 10px and I will create this shape:

On my Layer Palette I will right click on the hover layer and I will choose Rasterize Layer,

Then I will select Rectangular Marquee Tool, I will make this selection on the hover

I will hit Delete on my keyboard than I will press Ctrl + D to unload the selection. With type Tool I will add the links for the navigation

Then I will select Rounded Rectangle Tool, this time with a radius of 30px and I will create a search form.
Here is my result for this area:

Step3 – Creating Featured Area

First I will create a shadow in the same way that we have created it for the navigation bar. With Ellipse Tool we will create a shape then we will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of about 15px.

Then with Rectangle Tool I will add a white shape over this shadow

On the left side I will add some text

Then from my stock photos I will add an image

With Rounded Rectangle Tool (radius 30 px) I will create 2 buttons:

For the darker one I have applied this layer styles:


For the orange one, this layer styles:


Here is my final result for Featured Area:

Step4 – Creating the content area

First using Line Tool I will add this lines:

Than using Type Tool and some images from stock websites, such as istockphoto.com, I will add some images:

Next using Type Tool I will continue to add some text. From our Premium Files, Available to our Premium Members I will add some vector icons from the Office Vector Icons set.

Then on the right side, using Rounded Rectangle Tool I will create some forms. To create the submit button I have used the same layer styles used to create the buttons from Featured Area

Here is my final result for the content area:

Step 5 – Creating the footer

If you will look again at the final preview for this layout, you will see that the footer is the same with the top part (logo and top links). All you have to do is to look again at the indications provided when I have created the top part and you will be able to create the footer as well.

Here is my final result for footer

Final preview for this layout:

Business PSD Template

Want to Download the Source File? (including CSS/HTML version)

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.

  • Gerolf

    I’m in doubt if and how you will solve the horizontal menu “hover” effect. (cfr “Next I would like to create a hover for the navigation bar.”)

    Since the left background is with a rounded corner, and the others are not, you’d need to have seperate CSS styles for :first, but afaik this does not work in older browsers (ie6?)

    I’d happily be a Premium member if your source code would solve that issue, but your live preview does not contain a hover effect …

  • http://www.20milesnorth.com 20 Miles North Website Design

    Another solid website layout! The office furniture icons are a great resource as well.

blog comments powered by Disqus