[Re]Encoded.com

How To Create Professional Looking Website Layout With Photoshop

Want to design a professional looking website template using Photoshop. In this tutorial, we will learn how to design a web 2.0 type business template layout in Adobe Photoshop. I have made tutorial step by step with all images to make you understand very easily. I will try to mention each and every thing need to understand the design.

This is how our final layout will look.

Step 1:
Create a new document (File >> New) with following specification.
Size: 1200 px 1160 px
Background : white

Step 2:
Now we have to separate equal margin from both left side and right side. For this we will create two guides.
To create the guides, go to View > New Guide, in the box that pops open select vertical and enter 150px.

Repeat the process.
View > New Guide in the box that pops open select vertical and enter 1050px.

Like this we have 150px margin both the side, and our center part if of 1050px. From here, everything we create will be in center region i.e. within 1050px. Nothing should go in out left and right margin.

Step 3:
Now we will fill the background with gradient. Select the gradient tool and set,
Foreground color >> #d6d5d5
Background color >> # f7f7f7

Also set followings.

Step 4:
Press and hold shift key and drag mouse from top to bottom to apply the gradient. Now the layout looks like this.

Step 5:
Create new layer (Layer >> New >> Layer). Select the “Custom shape tool” and draw any shape for the website logo in top-left side. Use color # 80ac09

After shape tool select “Type tool”, and type website name and website slogan.
For website name use:
color: # ab2e03
Size: 48px
Font: Vista Sans OT

For slogan use:
Color: #6e6c6b
Size: 24px
Font: Street Corner

Step 6:
Select “Rounded Rectangle Tool” with radius 2px and draw two shapes in top-right region for search box.

Step 7:
Now apply following style from blending options to both box.

Now our layout looks like this:

Step 8:
Select “Type” tool, type “Search” on first box and “Go” on second box.
Color: #7d7d7d

Step 9:
Select “Rounded rectangle tool” and draw a shape from left guide to right guide of height 250px. Radius 15px and color #999898

Apply following style from blending option to this box.

Now our layout looks like this.

Step 10:
Press and hold ctrl key and click on the layer to select the shape layer we created in last step. Once you have selected the shape selection, contract the selection by 15px by applying Select > Modify > Contract, by 15px.

Step 11:
Create new layer, and fill the new selection with #95bd1d color.

Step 12:
Deselect the selection (ctrl + D), and apply following style from blending options.

Step 13:
Select “Ellipse” tool and draw few circles of white color of different shape on different layer. And set different opacity for each layer.

Step 14:
Add a custom shape and type some text over the rectangle.

Step 15:
Now we will create menu bar. Select the “Rounded Rectangle tool” and change the radius to 10px and of white color. Height of the rectangle shape should be 50px and from left guides to right guides.

Step 16:
After creating the rectangular shaper, apply following style from layer blending options.

Our Rounded rectangle bar looks like below.

Step 17:
On the menu rectangle shape, add some sample links text as shown below. In between each test link create a small bullet point. Use #88ab1a color for bullet point, and #535252 color for menu text. For active link we will use #ab2e03 color. Our Menu bar is complete.

Step 18:
Select the Rounded Rectangle tool with radius 10px and white color. Draw a rectangular shape of size 300 X 150 px starting from left guide. And all layer style in blending options that we have applied in step 26.

Step 19:
Make two duplicate rectangular shapes that we created in step 28.

Step 20:
Fill each rectangular shape with a custom shape and some text.

Step 21:
Now let’s add website heading. Select “text tool” with following settings.
Color: #817f7f
Size: 36pt
Font: Franklin Gothic D

Step 22:
Add some text below the heading.
Font: Apple Garamond
Size: 16pt
Color: #525252

Step 23:
Select “Rectangle Rounded tool” with radius 10px, color white. Draw a shape below the text and apply following layer style from blending options.

Step 24:
Press and hold ctrl key and click on the layer to select the shape layer we created in last step. Once you have selected the shape selection, contract the selection by 15px by applying Select > Modify > Contract, by 10px.

Step 25:
Create new layer (Layer >> New >> Layer). And fill the layer with color # e8e8e8

Step 26:
Add some custom shape over this rectangular shape. And add following layer style on each shape.

Our layout looks like this now.

Step 27:
Now add some text below the rectangular box.

Step 28:
Now we add footer text. First create a rectangular shape tool, with radius 10px, white color and of 900 X 50 px, and from left guide to right guide. Apply same layer style that we have applied in step 26. One the footer rectangular add some copyright text.

Our template layout is complete.