Creative Arts Studio Web Site Layout

Begin by creating a new file (File>New) that would have 766x750 px and 72 dpi.

Using the Rectangle Tool (U) we'll represent the background, reserved for the site's page.

The layer's parameters are these ones: Blending Options>Gradient Overlay

Gradient's parameters:

Next we'll select the Custom Shape Tool (U) to represent a circle, colored with #3B6289

Now we have to make copies of this layer as many as we need, changing the color and the Fill parameter if necessary. And then we'll apply the usual Free Transform application to change the copies' sizes:

Next select the Ellipse Tool (U) and try to represent a circle colored with #006C9D that will be situated inside the last upper right circle:

The layer's parameters: Fill 50%

Using the same Custom Shape Tool (U), try to represent one more circle, colored with #3B6289, applying the earlier used pattern:

The layer's parameters: Opacity 70%

Blending Options>Stroke

Make several arbitrary copies of the last made layer and place them also as we want them to be placed, but we have to change also the color of the copies, their sizes, using the Free Transform application.

Next stage includes representing the primary layer, reserved for the site's sections, selecting firstly the Rounded Rectangle Tool (U). The color in this case should be #EAF8FF.

The layer's parameters: Blending Mode-Hard Light

Blending Options>Inner Glow

Blending Options>Stroke

Now we have to represent on the right upper corner a button of black color, selecting the Rounded Rectangle Tool (U) (Radius 10px)

Next make a click on the Alt button and then make another click between the button's layer and the layer reserved for the site's sections. The button will take the necessary dimensions:

Create now a new layer and select the Pencil Tool (B) to represent the primary element of the texture's pattern, colored with #596267

Save it: Edit>Define Pattern

Now we have to create the running stripe, situated on the right part of the site's sections' panel. In this case we'll use the Rectangle Tool (U):

The layer's parameters: Fill 0%

Blending Options>Bevel and Emboss

Blending Options>Pattern Overlay

The same instrument will be helpful in representing the running indicator of black color:

Using the Custom Shape Tool (U), we'll try to picture a part of the button, reserved for the section that would be colored in #596267

The layer's parameters: Blending Options>Outer Glow

Applying the Pencil Tool (B) and the here shown color - #879095, we'll try to represent next the pointer's symbol, situated inside the button.

For our convenience, we have to combine in a group all the layers, composing the button (pressing the Ctrl button and marking out the necessary layers and then keeping pressed the left mouse's button, we can take them down on Create a new group option). Make a copy of this new made group and place the copy the way you may see below:

Introduce also the titles for the site's sections' buttons:

(about company, services)

(main)

Insert now the text in the corresponding site's divisions:

(the bold text):

(the basic text of the sections)

The last stage includes introducing the site's name, keeping the demands from the tables below:

(CreativeStudio)

(digital media solutions)

Click to enlarge

The final result!