Creative Arts Studio Web Site Layout

Creative Arts Studio Web Site Layout
Create modern web layout for a creative arts studio.

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

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

Gradient’s parameters:

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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:

Creative Arts Studio Web Site Layout

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:

Creative Arts Studio Web Site Layout

The layer’s parameters: Fill 50%

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

The layer’s parameters: Opacity 70%
Blending Options>Stroke

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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.

Creative Arts Studio Web Site Layout

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.

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

The layer’s parameters: Blending Mode-Hard Light
Blending Options>Inner Glow

Creative Arts Studio Web Site Layout

Blending Options>Stroke

Creative Arts Studio Web Site Layout
Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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:

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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):

Creative Arts Studio Web Site Layout

The layer’s parameters: Fill 0%
Blending Options>Bevel and Emboss

Creative Arts Studio Web Site Layout

Blending Options>Pattern Overlay

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

The layer’s parameters: Blending Options>Outer Glow

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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.

Creative Arts Studio Web Site Layout
Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

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:

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

(about company, services)

Creative Arts Studio Web Site Layout

(main)

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

(the bold text):

Creative Arts Studio Web Site Layout

(the basic text of the sections)

Creative Arts Studio Web Site Layout

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

Creative Arts Studio Web Site Layout

(CreativeStudio)

Creative Arts Studio Web Site Layout

(digital media solutions)

Creative Arts Studio Web Site Layout

 

Creative Arts Studio Web Site Layout

The final result!

View full size here.