Professional Design Studio Web Layout

Learn how to create a dark and professional website layout with detailed steps and maintain quality.

Create a new file that would have 766x700 px and 72 dpi. Using the next instrument , represent the background of the site to be.



Blending Options-Gradient Overlay



Gradient?s parameters:



Take the previous instrument and represent the lowest layer designed for the site?s panel. Its color should be 1B242B.



Select now the next tool that will help us to draw the frame of one of the site?s sections (the color is 1B242B).

Blending Options-Stroke



Take now the following tool and insert a horizontal stripe inside the already drawn frame. Its color is 585D60.



Blending Options-Stroke



Now we should merge down in a group all the layers composing the frame. Copy the recently made group two times and place everything the way it is demonstrated in the next picture.



Create one more frame inside the represented site?s sections.
It?s possible to do this operation by using this instrument which will be helpful in representing the outside bounds and then keep holding the Alt button to erase the inside part with the same instrument.
The shapes may be corrected with the following tool .

Blending Options-Gradient Overlay



Gradient?s parameters:



Select now this tool to represent the site?s header.



Blending Options-Gradient Overlay



Gradient?s parameters:

Using the previous instrument, draw the shadow on the recently new made layer.





Blending Options-Gradient Overlay



Gradient?s parameters:



Take this tool and represent two vertical stripes. That one situated on the left side has the black color, that one from the right side ? the white one.

The Opacity on the layers should be of 40%.



Make a copy of the new made layer and place it the way you may see below, in the following picture.



Insert now the titles for the site?s header?s menu buttons.





Write now the name of the site to be. In the next table are inserted the demands for the inscription.



(design studio)

(creative studio)



?Design studio?s? parameters:
Blending Options-Bevel and Emboss



Blending Options-Gradient Overlay



Gradient?s parameters:

?Creative studio? parameters
Blending Options-Inner Shadow



Blending Options-Gradient Overlay



Gradient?s parameters:



Applying the next instrument , its? possible to choose from the table below the right clich?, like you may see in the picture. It will serve us as a logotype.

Blending Options-Drop Shadow



Blending Options-Bevel and Emboss



Blending Options-Gradient Overlay



Gradient?s parameters:



Taking the next instrument try to draw 3 triangles colored in BBBEC3.

Entitle now the site?s sections.





Insert also a photo on the following site?s section:



Blending Options-Stroke

Introduce the necessary text now on the corresponding site?s section, keeping the demands from the next table:





Introduce another part of the text on the section situated lower than the previous one:



(the text represented in a lighter color)



(the text represented in a darker color)

Introduce now a triangle with its shadow next to the recently added text by applying this shown tool





Make four copies of the new created layer and place them the way it is shown in the next image:

The last feature includes adding the logotype on the left site?s section:



The final result is this one!

View full size here.