Creating an office website layout

Setting up the workspace:

Create a 1024x768 document.Fill the background with this color #ded7c9.

Create a new layer, fill it with the same color and apply some noise(Filter-Noise-Add noise) :

Reduce the opacity of this layer to 30%

Ctrl+E to merge the layers.Rename the new layer "Background".

Part I : Creating the shapes:

1.Create a new layer and name it "Main Shape".

Using the Rounded Rectangle Tool with a radius of 10 px draw a shape like mine:

Right-click the "main shape" layer and select rasterize layer.

Apply the following styles:

2.Now to create a cool effect:

Duplicate "main shape" layer.Select Edit-Transform-Perspective and modify the shape like so:

Apply a Drop Shadow:

Move this layer under "main shape" layer.

3.The contact tab:

Using the Rounded Rectangle Tool draw a shape like this:

Resterize the layer and fill the shape with this color: #b5a27e

Move the layer under the "main shape" layer and reduce it�s opacity to 75%.

Add some text on your own will:

Part II : The banner:

1.Again create a shape like this:

Fill it with a dark blue and use apply this styles:

Press Ctrl+R to view the ruler.Try to align this shape with the contact shape like so:

2.Ctrl+Click "main shape" layer's thumbnail to get it's selection. Ctrl+Shift+I to invert. Press M on your keyboard to get the Rectangular Marquee Tool. Press the "Intersect with selection button":

Create a selection like mine:

Select the blue shape's layer and press delete.
3.Now to create a logo:

Add some text on your own will:

Add some stroke(black color) and a drop shadow with the default settings.

Draw a logo too:

4.Banner details:

Ctrl+Click the banners layer thumbnail to get its selection.Create a new layer and fill with black.

Then apply Filter-Render-Lens Flare:

Change the blending mode to overlay.

Without deselecting, create a new layer and fill with white.Ctrl+Click main shape layer thumbnail press Ctrl+Shift+I and press Delete.

Change the blending mode to overlay and reduce the opacity to 50%.

I added some text and a picture from www.sxc.hu :

4.For the buttons I used the Rounded Rectangle Tool:

I also added some lines for a nicer effect:

5.The content of this webpage will be created at your own will.I put some photos and some text and I came up with this:

Here's the final result (click on the image to enlarge):

Subscribe now via RSS feed and get all the new tutorials