Graphic Design Studio WebLayout


Graphic Design Studio WebLayout

Open a new file with 835×686 px and 72 dpi. Paint it with the next indicated color – 626160.

Graphic Design Studio WebLayout

Taking this instrument

Graphic Design Studio WebLayout

, it’s possible to represent the shadow of black color.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

The layers’ Opacity should be of 45%.
Using the following instrument

Graphic Design Studio WebLayout

, represent the lowest layer designed for the site’s divisions. It should be painted in 363E41.

Graphic Design Studio WebLayout

Take now another tool

Graphic Design Studio WebLayout

and represent the upper part of the site, then apply the next instrument

Graphic Design Studio WebLayout

to raise a little the upper corners.

Graphic Design Studio WebLayout

Blending Options-Gradient Overlay

Graphic Design Studio WebLayout

Gradient’s parameters:

Graphic Design Studio WebLayout

Take now the next instrument

Graphic Design Studio WebLayout

and create the lowest layer reserved for the site’s menu buttons. Click now on Alt button, making use of the same instrument and cut off the lowest edge until reaching the straight angles.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Blending Options-Bevel and Emboss

Graphic Design Studio WebLayout

Blending Options-Gradient Overlay

Graphic Design Studio WebLayout

Gradient’s parameters:

Graphic Design Studio WebLayout

Using the previous instrument, it’s possible to create the lowest layer reserved for the site’s logotype.
Make use of the shown instrument

Graphic Design Studio WebLayout

after that and raise the upper corners. Use the same method applied before to cut out the lowest edge of the layer.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Blending Options-Bevel and Emboss

Graphic Design Studio WebLayout

Blending Options-Gradient Overlay

Graphic Design Studio WebLayout

Gradient’s parameters:

Graphic Design Studio WebLayout

It’s time to insert the titles of the site’s menu buttons. You have the demands for writing them in the table below.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Insert also the site’s name.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Select the next shown tool

Graphic Design Studio WebLayout

to draw a dividing stripe colored in white.

Graphic Design Studio WebLayout

Write now the title of the site’s section.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Take now the next tool

Graphic Design Studio WebLayout

and try to represent the lowest layer of the section.

Graphic Design Studio WebLayout

Blending Options-Gradient Overlay

Graphic Design Studio WebLayout

Gradient’s parameters:

Graphic Design Studio WebLayout

Using the last instrument, make one more layer designed for the site’s panel’s section.

Graphic Design Studio WebLayout

Blending Options-Gradient Overlay

Graphic Design Studio WebLayout

Gradient’s parameters:

Graphic Design Studio WebLayout

Make two copies of this new made layer and then apply Free Transform option to stretch a little each of the copies horizontally, the way it is demonstrated below:

Graphic Design Studio WebLayout

Introduce now the photo in the site’s section:

Graphic Design Studio WebLayout

Blending Options-Stroke

Graphic Design Studio WebLayout

Make use of the shown tool

Graphic Design Studio WebLayout

to represent the button colored in 363E41.

Graphic Design Studio WebLayout

Insert another part of the text in the site’s sections. Keep the same demands indicated below.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Write after the title of the section’s button.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Select now the next instrument

Graphic Design Studio WebLayout

and create a white triangle next to the button’s name.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

For your convenience now, we should merge down all the layers containing the new made button in a group. Copy after that the new made group and place it the same way you may see below:

Graphic Design Studio WebLayout

Select this tool now

Graphic Design Studio WebLayout

and draw two white stripes next to the buttons.

Graphic Design Studio WebLayout

Take the shown instrument

Graphic Design Studio WebLayout

and represent 3 layers: two of them must look the same, they are reserved for two more sections’ buttons; the other layer is reserved for introducing the text (all of them colored in 363E41).

Graphic Design Studio WebLayout

Insert the titles of the site’s sections’ buttons.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Draw now on the upper part of the site’s sections three horizontal white stripes. Draw them with the instrument shown here

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Insert the titles of the site’s sections.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

Introduce now the photo in the site’s section.

Graphic Design Studio WebLayout

Create now the logotype of the site by choosing the next instrument

Graphic Design Studio WebLayout

and selecting the corresponding cliché from the table below:

Graphic Design Studio WebLayout

It should be of white color.

Graphic Design Studio WebLayout

Copy the new created layer 4 times and make use of Free Transform option again to make it smaller and then place it the way it is demonstrated in the next picture.

Graphic Design Studio WebLayout

Cut out from any possible source the logotypes and insert them in the site’s section.

Graphic Design Studio WebLayout

The last step includes writing the author’s rights.

Graphic Design Studio WebLayout
Graphic Design Studio WebLayout

The final result is this one!