Creative Studio Web Page

Creative Studio Web Page
Creative Studio Web Page
In this detailed tutorial we will learn how to create impressive layout for Creative Studio.

Begin your work by creating a new file of 845×900 px and 72 dpi. Select after that the Paint Bucket Tool (G) to give it the color #151616

Creative Studio Web Page

Using the Rectangle Tool (U), try to represent a kind of illumination on the background’s top part.

Creative Studio Web Page

Select for this layer the parameters from below: Fill 0%
Blending Options>Gradient Overlay

Creative Studio Web Page

Gradient’s parameters:

Creative Studio Web Page
Creative Studio Web Page

Introduce now the site’s name, keeping the next shown demands:

Creative Studio Web Page

creative

Creative Studio Web Page

studio

Creative Studio Web Page

The layer’s parameters: Blending Options>Drop Shadow

Creative Studio Web Page

Blending Options>Gradient Overlay

Creative Studio Web Page

Gradient’s parameters:

Creative Studio Web Page
Creative Studio Web Page

Using the Line Tool (U), try to make a horizontal line, colored with #323537

Creative Studio Web Page

The layer’s parameters: Blending Options>Drop Shadow

Creative Studio Web Page
Creative Studio Web Page

Make a copy of the last made layer and select the Free Transform option to situate the copy the same way indicated below:

Creative Studio Web Page

Now it’s time for drawing the buttons on the site’s header. In this case we’ll select the Rounded Rectangle Tool (U) with a radius of 10 px. But firstly we need to represent just one button colored with #3D4A4E

Creative Studio Web Page

Then we’ll make two copies of the last made button and select again the Free Transform option to place the copies the same way demonstrated next picture. Just one copy should be left without any changes. For the other button we’ll apply the color #1194FC

Creative Studio Web Page

Insert now the name of the buttons for the site’s menu:

Creative Studio Web Page
Creative Studio Web Page

Using the Rounded Rectangle Tool (U) (radius of 10 px) lower, try to make the primary layer of the basic web site’s panel:

Creative Studio Web Page

The layer’s parameters: Blending Options>Gradient Overlay

Creative Studio Web Page

Gradient’s parameters:

Creative Studio Web Page
Creative Studio Web Page

Introduce the next indicated picture on the made panel, preliminary cut out according to the panel’s sizes or you can place picture above the panel layer (on the layers’ palette) then press Alt button and make a mouse click between the picture layer and the panel layer (the right corner of the picture should correspond with the beginning of the menu buttons).

Creative Studio Web Page

The layer’s parameters: Blending Options>Inner Shadow

Creative Studio Web Page

Blending Options>Stroke

Creative Studio Web Page
Creative Studio Web Page

Introduce now the text we need on the panel, on the picture’s right part.

Creative Studio Web Page
Creative Studio Web Page

Applying the Line Tool (U), draw a horizontal line under the text, having the color #363A3C

Creative Studio Web Page

Under the already made line we need to apply the Rounded Rectangle Tool (U) (radius of 10px) for representing a button colored with #F79700

Creative Studio Web Page

Write the button’s title:

Creative Studio Web Page
Creative Studio Web Page

Next we need to get the appropriate result by merging together in a group all the layers composing the panel, the picture, the button there and the text (press Ctrl button to mark out all the necessary layers and hold on the left mouse’s button to take down the marked layers on Create a new group selection). Make two copies of this new group and select Free Transform option to place the copies lower. Insert also other pictures on the panels’ copies.

Creative Studio Web Page

Write the data on each panel:

Creative Studio Web Page
Creative Studio Web Page

Create a new layer to represent on it a pattern, like the one from below. In this case we’ll use the Pencil Tool (B), the brush of 1px and the color #363A3C

Creative Studio Web Page

Save it: Edit>Define Pattern.
Using the Line Tool (U) now, try to draw a dividing line between the panels:

Creative Studio Web Page

The layer’s parameters: Fill 0%
Blending Options>Pattern Overlay

Creative Studio Web Page
Creative Studio Web Page

The last step includes introducing the copyright in footer:

Creative Studio Web Page
Creative Studio Web Page

The final result!

View full size here.