In this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact! You will learn step by step how to create a web layout with Adobe Photoshop.
I will provide you also a set of vector icons to help you design this layout.

Preview full size layout

Open a new document with the following size: 960 x 900 pixels. For the background color please use: #292929
Select Rectangle Tool, and create a black shape at the top of your layout. I have used this color #111111

Select Line Tool, and create two lines. Both lines should have the weight of 1 pixel

I will create a new layer (press CTRL+SHIFT+ALT+N), and with Brush Tool, and with 300 pixel smooth brush I will make a point on my layout.

Then I will change the blending mode for this layer to Soft Light.

I will select Rounded Rectangle Tool and right under the header I will create three shapes.

For all these three shapes I will add the following layer styles:

This is my result so far.

Under these three shapes I will add another one. It will be the body of our layout. I will use one more time Rounded Rectangle Tool, and for the color I will use #e1e1e1.

On the left side I will create a shape with Pen Tool.

With Rectangle Tool, I will create a new shape, and I will place it like in the following image.

I will select Custom Shape Tool, and with the following shape:

I will place the shape on the right side of the previous shape. For the shape I will use the same color as the big shape #e1e1e1.

I will create other shapes with Rounded Rectangle Tool. I will use the following color: #cacaca

I will provide you the following set of icons. You can apply for a VIP account and you can download this nice set of vector icons.

I will open the eps file in Photoshop, and with Rectangular Marquee Tool, I will select each icon.

I will make sure I will have the layer with icons selected.

If the layer is selected in your layer palette, you can press on CTRL+J (this is the shortcut for layer via cut). This means a new layer with a single icon will be created on top of the previous layer.

Drag this icon over the layout document. To drag the layer from one document to another you need to have both documents visible on your screen. Repeat the steps until you have the following result.

Change the opacity value to 10% for each icon.

This is my result

I will select Horizontal Type Tool, and I will add the text.  For the header I will use the following fonts:

For Grafpedia Company I will use:

For the slogan line I will use: Tahoma, with a size of 11 pt, and the font style to Regular.

On the right side I will add another text for menu. I will use the following settings for my menu buttons.

This is how it looks

Using the same fonts I will add the alone the text over my layout

Click on the following image to see the real size layout

On the top I will add another button

I will rasterize the layer by right clicking on the layer palette

With Rectangular Marquee Tool I will make a selection.

I will hit the Delete Key from my keyboard, and then I will press on CTRL+D to deselect. This is my final result.

Step 3:-After step 2  when you hit apply the dektop builder restarted and and icons are gone away

Now right click any where in the middle of you computer screen you will get new menu

clik on last option DESKTOP X BUILDER and new submenu opens then click on the new object like following

 

Now when you hit it autmatically new screens comes with little rounded icons like following

i tell what that stuff is ,The little circle on left handside is our object which we want to configure and the little window is it configuraion.

Now click and hold the little left cirlcle and drag it to get familiar with it ..

Now as you can see in upper window in configuration window click on the staes tabs as in figure and browse our uppertab.png and hot apply you will get this

Drag this uppertab.png on the upper part of the screen

Step 4:-Now we want to go again in the cnofiguration window og uppertab.png for doing so right click to select it it turns dullish blue and go to property..and set it like following

and hot apply

Step 5:-Now go to photoshop and make a new image of size  155X46

and of following color and dimension

Now duplicate this layer by going on menu LAYER>DUPLICATE LAYER
and set property of dulicate layer to overlay like following

you will then see change in image color

Step6:-

Now go to the filter>Render>LIghtning effect> menu like following

you will see the light effect then

Step 7

Now save this image as BLUE.png

we want this image in two more color GOLDENand red for this click on the color icon of orignal layer and color  to yellow  and save it YELLOW.png

and RED.png

Step 8:-

Now again go to our desktop right click >NEW OBJECT  Set images as directed in following figure

As you can see in above image we have three images RED YELLOW and BLUE

set this image one by one for every states as directed above

by clicking in add button

Step 9:-Now we want to add drop shadow go in property window again

and change setting like following

Step 10:-Now your image look like following

Step 11:-

Now again go to the property of this tab

change remaning two settings

and  relation settings

Remeber while you want to move the object change the movement to Default and when you done click on LOCKED as above

Step 12:-

Now again make a new object and but this time text no image

and place this text object above the previous tab and locked the moverment and change following setting to avoid the overlappin between text and our Blue tab

Step 13:-

Make a new image in photoshop with size 15X57

and make rectangle which cover whole 15X57 image and change its opacity to 42% your image look like this

Save this image as hanger.png and load as a new object  and place it like this

Its settings property

This setting is for only one hanger now right click on that hanger.png object and click on clone object therefore two object forms place it

Step 14:- Now we want vaiou tabs click on the  and click clone it promt you to clone child element also click yes and OK

and clone it various time ro make fore objects like following

discuss this topic to forum