logo
Company/Business/Software Web layout (PSD Template)

 

Let's start : Create a new document - width 1020px and height 1500px and for background use a GREY color. I have used : #eaeaea.For logo - grab rectangle tool (U) and create a shape on the top. As you can see in my preview the top has an darker color (#1c1c1c), you will need to create the same thing. After that grab the type too (T) and write your desired text. Use the following layer styles:

Outer Glow

Outer Glow

 

Gradient Overlay

Gradient Overlay

 

And here's my result so far

 

My result

 

I will move now to the header and to the top navigation. To recreate a similar thing you will need to follow me step by step.
Grab rounded rectangle tool - make sure you have a radios of 15px and create a new shape (name this layer Header) below the logo - mine has width - 934px and height 357px. To follow me exactly I suggest you to use a fixed size.

 

Fixed size

 

Here's a preview now:

Preview

 

Next I will color this shape with a blue color -# 1a8aca. Somehow we have created the header and now we will need to move to the navigation. If you will look again at my preview you will see that the navigation it's stand out. It's more visible and has a nice shadow. To obtain a similar effect you will need to follow those steps:

1<> Select the Header layer, right click on it and select Rasterize Layer

Rasterize Layer

 

2.Duplicate the Header layer, and rename it to Header1 (turn off the visibility - we will get back to this step soon)

3.Select Rectangular Marquee Tool

Rasterize Layer

 

4. Make sure you have the Header layer selected and with Rectangular Marquee make a selection, like I did

Preview
.
Then hit the delete button on your keyboard .
Here's my result:
Result

 

5.Now select again rounded rectangle tool, with a radius of 15. I recommend you to use this fixed sizes: width: 937, height 80 and name this layer Navigation.

Guide

I have used a red color just to show exactly what I have done. After you can see 50 percent of the Navigation layer is hidden (it's under Header layer). On the step 6 we will need to erase that hidden area.

 

6. Make sure you have selected the Navigation layer, right click on it and then select Rasterize Layer. (see step 1)

7.Select Rectangular Marquee Tool (see step 2)

8. Make sure you have the Navigation layer selected and with Rectangular Marquee make a selection, like I did

Guide

right click on the selected area and choose Select Inverse (additional you can use this shortcut Ctrl+Shift+I) and then hit Delete button on your keyboard to erase the hidden portition of the shape now.

 

9. Applying the following layer style to the Navigation header:
Drop Shadow

Drop Shadow

Gradient Overlay
Gradient Overlay

 

You should have something like this:

Preview

 

Next add some text to the navigation. If you will look again on the final preview you will see that I have created some effects for selected menu and for hover area. I have choose Our Products to be the selected area and Client Area a hover zone.
To create the selected area, choose Pencil Tool (B), choose white as a color (make sure you have created a new layer and your brush is 1px) and then draw a straight line. Than with rectangle tool create a shape using this color : # 18778e
You should have something like this now:

Navigation

 

For the hover area, choose pen tool and draw a rectangle.

Navigation

than right click on it, choose Make Selection, a little window will pop-up asking you if do you want to change the Feather Radius - leave it at 0px and hit OK. The selection is now defined, all you have to do is to hit the Delete button on your keyboard. And here's my result.
Navigation preview
With this step the Navigation is finished now. Let's move now to the Slide Show Area

 


Slide show area - Here you will need to follow me step by step again

1.Select the rectangle tool a draw a similar shape (width 1025px, height 253px)

and then apply the following layer styles : Gradient Overlay

 

2.Using rounded rectangle tool draw another shape (width: 1026px, height: 166px )

and apply the following layer styles
Drop Shadow:

Gradient Overlay

 

3.Select ellipse tool and draw a similar shape.

and then apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 5.5px. This will serve as a background shadow.

 

Here's my result

 

With this shadow move it downward to create a shadow effect for our slideshow are. I have added some text and few images to make it looks good. Here's my result so far

 

Now let's get back to the header. Do you remember that layer called Hader1? Turn it on, select it hit Ctrl+T (for transformation) and than using Shift+Alt+mouse (drag) make it a little bit bigger and move it downwards. Also don't forget to choose white as a color. Here's my result:

 

The header is almost done. We will need to add some text and some images to the right (to present our products). The text in header is quite easy to add, as well as images. To make that perspective view for images I have used Skew function (Edit>Transform>Skew). The demo button is from our Web 2.0 Photoshop Buttons


Let's move to the content are now! First we will need to add a foreground, select Rectangle tool , draw a shape(select white as a color) with the following dimensions width :962px, height: 876px and then apply the following layer styles:

 

If you will look at the preview you will see that I have dived the content are in 3 columns. On the left column I have added some articles, on the middle one I have used to spotlight some info's such as "About Us", "Testimonials" and "Why to choose us" To create a similar box to display this articles you will need to follow these steps:

1.Select Rectangle tool, and draw a shape, mine is 311px wide and 220px high.

2.Now select Ellipse tool and draw a shape like this one


and name this layer Shadow Box

 

3. Make sure you have selected the layer Shadow Box and then apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 15px. You should obtain something like this:


, all you have to do is to move it upwards to create a nice shadow effect for our box. Next you will need to populate it with some text Here's a preview

 

Let's move now to our last column. On this one I have created a quick contact form and I have added some social media icons and a twitter update.The quick contact was created using the Rectangle Tool (U) basically I have added few shapes and then I have applied the following layer styles:
Inner Shadow


Stroke

For social media I have used an rss and a twitter icon from the web.

 


Footer

Here grab again Rectangle Tool and draw a shape. Mine has the following dimensions - width: 1026px and height 60px and then apply this layer styles:
Drop Shadow


Gradient Overlay:

 

At the top of this shape place your logo, I have add a text - PSDTemplate.comThe last thing that I will need to do is to create a menu in footer. Grab the Rounded Rectangle Tool and create a shape with a radios of 6px using the following dimensions - width: 327px, height: 41px and then add the following layer styles:
Drop Shadow


Gradient Overlay


My Result

 

With this layer selected, please move it upwards to hide its top rounded corners.
Here's my result:

 

Ttutorial is finished now. You shold have something similar with my preview now. I hope you enjoyed watching this tutorial and on the same time I hope that you have learned something new!

To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.

Download Templates

 

Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....

Here is the final result:

Company/Business/Software Web Layout

Comments (7)

...
0
Wow... this is awesome !
Mike , April 21, 2009
...
216
nice !!!!
;]]] , April 22, 2009
...
0
a really professional design
photo retouching , May 02, 2009 | url
..
0
Very nice tutorial.I'm just confused with the header. When creating a new rounded shape with fixed sizes: width: 937, height 80.I have a very large rounded shape for the header.I don't understand properly why its so large. any ideas?
sebastien , May 10, 2009 | url
evden eve nakliyat
0
super thankss
evden eve nakliyat , August 28, 2009 | url
evden eve nakliyat
0
nice !!!!
thenkss
evden eve nakliyat , September 15, 2009 | url
kraloyun
0
thanks admin very good
kraloyun , December 11, 2009 | url

Write comment

smaller | bigger

busy
 

Latest Tutorials

Previous Next
Create a Business PSD Layout in less than 10 minutes* Create a Business PSD Layout in less than 10 minutes* This is the first tutorial, before I begin I would like to present myself.My name is Stefan, I'm a web designer for more than 5 years and I ... Read more
Create an Elegant Photoshop (PSD) Template for Wordpress Create an Elegant Photoshop (PSD) Template for Wordpress Hello and welcome to PSDTemplate.comToday I will create another Photoshop Template but this time it will be a Wordpress Photoshop (PSD) Temp... Read more
[Tutorial] - Create a Photoshop (PSD) Template for Joomla or Drupal [Tutorial] - Create a Photoshop (PSD) Template for Joomla or Drupal Hello and welcome to another tutorial here at PSDTemplate.comToday I will create another Photoshop Template but this time it will be a funky... Read more
[Tutorial] - Make an Elegant Blog Layout in Photoshop [Tutorial] - Make an Elegant Blog Layout in Photoshop Hello and welcome to another tutorial here at PSDTemplate.comToday I will try to create another psd template (web layout) for Wordpress. Thi... Read more
Company/Business/Software Web layout (PSD Template) Company/Business/Software Web layout (PSD Template) Hello and welcome to another tutorial here at PSDTemplate.comFor today I have prepared a nice layout psd template (web (psd template) which ... Read more
Flower,Ornamental, Agriculture Web Layout (PSD Template) Flower,Ornamental, Agriculture Web Layout (PSD Template) TESTAnother day another tutorial here at PSDTemplate.comToday I have tried to create a simple web layout (psd template) related to nature, ... Read more