Learn how to create a simplistic but effective contemporary web layout for your Design Studio.

Open a new file having 555x671 px and 72 dpi, then paint it in this indicated color?s code: 586168.



Select after that the following instrument and create a part of the lowest site?s panel:



Blending Options-Gradient Overlay



Gradient?s parameters:



Selecting the same instrument, it?s possible to create the lowest site?s panel in 3 stages.
In the first stage we?ll create the first element (correct its angles with the instrument shown here ).
The second stage includes pressing the Shift button and do the rest of the work.
In the third stage keep pressed the Alt button and erase the middle of the figure.

Blending Options-Drop Shadow



Blending Options-Gradient Overlay



Gradient?s parameters:



Take the next tool and represent a dividing vertical line, colored in 464F56.

Blending Options-Color Overlay



Blending Options-Stroke



Make five copies of this new made layer and place everything the way it is shown in the next picture.



Then take the following instrument and create the lowest layer of the central site?s part.

Don?t forget to place correctly all the layers, exactly the way it is shown here:
Blending Options-Drop Shadow



Blending Options-Gradient Overlay



Gradient?s parameters:



Take the previous instrument to create this time the element of the site?s header:



Blending Options-Outer Glow

Blending Options-Gradient Overlay



Gradient?s parameters:



Make use of the next tool to draw one more element reserved for the site?s header:



Blending Options-Inner Shadow



Blending Options-Inner Glow

Blending Options-Bevel and Emboss



Blending Options-Gradient Overlay



Gradient?s parameters:



Make three copies of the new made layer and place all the copies the way it is indicated below:



Then we should represent the site?s header in several stages, the method we used before.
The main instrument is this one: .
Correct the angles with the next tool and the openings may be cut out by holding the Alt button.

Blending Options-Drop Shadow



Blending Options-Inner Glow



Blending Options-Gradient Overlay



Gradient?s parameters:

Using the next tool now , it?s possible to draw a thin stripe above the middle of the header:



Blending Options-Gradient Overlay



Gradient?s parameters:



Take the indicated tool now and represent a horizontal stripe of black color.



Now we should represent several vertical stripes on the header the same way we represented them on the lowest site?s panel (or they may be simply copied).

Using the instrument shown here , draw a dividing stripe on the panel of the menu?s buttons.





Blending Options-Gradient Overlay



Gradient?s parameters:



Make two copies of the new made layer and place them the way you may see in the next shown picture.

Select next the following tool to represent the layer of deepness on the upper part of the button.





Fill 0% on the layers.
Blending Options-Gradient Overlay



Gradient?s parameters:



Take the same instrument and represent one more layer on the recently made one.

Blending Options-Drop Shadow



Blending Options-Gradient Overlay



Gradient?s parameters:



For our convenience, we should merge down in a group all the layers, containing the deepness of the upper part with blue setting. Then make three copies of this new made group.

Take the next instrument and create one more layer on the central site?s part



Blending Options-Inner Glow



Blending Options-Gradient Overlay



Gradient?s parameters:



Fill the site?s central part with the next shown text, keeping the demands from the table below:



(bold text?s type)

(the rest of the text)



Insert now by a photo opposite each paragraph.



The parameters are the same for all the photos.
Blending Options-Stroke



Write now the name of the site, being attentive with the demands inserted in the following tables:



(Design)

(Studio)



The parameters of the Design word:
Blending Options-Outer Glow



Blending Options-Bevel and Emboss



Blending Options-Color Overlay

The parameters for the Studio word:
Blending Options-Drop Shadow



Introduce now the titles for the menu?s buttons situated on the site?s header:





Take the next instrument and try to represent a continuous line formed of several dots:

Make a copy of the new made layer and place it the way it is shown here:



The last feature includes drawing a stripe on the site?s menu?s buttons, done with the instrument from here :





Blending Options-Gradient Overlay



Gradient?s parameters:

Finished!

View full size here.