Design Studio Layout

Design Studio Layout
Learn how to create an effective and contemporary web layout for your design studio.

Start by creating the background of the site we want to represent next (File>New), having 800×600 px and 72 dpi. Select the Rectangle Tool (U) for this operation.

Design Studio Layout

The layer’s parameters:
Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout
Design Studio Layout

Create a new layer that would have 4×4 px and 72 dpi and try to represent a pattern. We need to choose in this case the Pencil Tool (B) with the color # 59AAC8.

Design Studio Layout

Save it!

Design Studio Layout

Take the same instrument applied before and represent one more Pattern, but firstly we need to create a new layer of 4×4 px and 72 dpi. The background’s color is #002848, but the pattern’s color is the same with the previous one.

Design Studio Layout

Save it too!
Create a new layer again and take this time the Rounded Rectangle Tool (U) to represent the primary layer reserved for the site’s sections, colored in # 4F95B3

Design Studio Layout
Design Studio Layout

The layer’s parameters:
Blending Options>Pattern Overlay

Design Studio Layout

Blending Options>Stroke

Design Studio Layout
Design Studio Layout

Make a copy of the last made layer and select the Free Transform option to make it smaller a little, changing the parameters too. The layer’s color should be #004D7B

Design Studio Layout

The layer’s parameters:
Blending Options>Inner Glow

Design Studio Layout
Design Studio Layout

Create one more layer on which we’ll represent the next Pattern, using the same Pencil Tool (B). The layer’s size is 4×4 px and 72 dpi. The background’s color is #104668; the texture’s color is #588EB0.

Design Studio Layout

Save this one too!

Design Studio Layout

Selecting the Rounded Rectangle Tool (U), it’s possible to draw next the site’s section.

Design Studio Layout
Design Studio Layout

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

Design Studio Layout

Blending Options>Bevel and Emboss>Texture

Design Studio Layout
Design Studio Layout

(Rock Patterns Set)
Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout

Blending Options>Stroke

Design Studio Layout
Design Studio Layout

Make a copy of the new made layer and choose again Free Transform option to make the copy smaller like it is shown on the next picture, changing the parameters too.

Design Studio Layout

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout
Design Studio Layout

For a better result, we need to combine in a group all the layers composing the left section (press on Ctrl button to mark the necessary layers and hold on the left mouse’s button to take the layers down on Create a new group option). Make a copy of this group and apply the Free Transform option to narrow the copy horizontally, placing it the way it is demonstrated below.

Design Studio Layout

Applying the Rounded Rectangle Tool (U), create now a layer on the site’s header colored in # 003250

Design Studio Layout
Design Studio Layout

Draw next a thin stripe colored in #002848, situated lower than the new made layer. It’s possible to apply the Rectangle Tool (U) for this operation.

Design Studio Layout

The layer’s parameters:
The Opacity should be of 50%
Blending Options>Pattern Overlay

Design Studio Layout
Design Studio Layout

Using the same Rounded Rectangle Tool (U), we need to represent now the primary layer reserved for the menu’s buttons on the site’s header, colored in #065E91

Design Studio Layout
Design Studio Layout

Choosing the last instrument, represent next the button on the menu’s palette situated on the site’s header. The color is #0473AC

Design Studio Layout
Design Studio Layout

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

Design Studio Layout

Blending Options>Stroke

Design Studio Layout
Design Studio Layout

Make four copies of the last made layer and select the Free Transform option to change the copies’ sizes, the way it is shown on the next picture:

Design Studio Layout

Using the Ellipse Tool (U), draw now the primary layer of the site’s logotype that would have the color indicated here: #003F6E

Design Studio Layout

The layer’s parameters:
Blending Options>Inner Shadow

Design Studio Layout
Design Studio Layout

Make a copy of the new made layer and select again Free Transform option to make smaller the copies, changing their parameters too.

Design Studio Layout

The layer’s parameters:
Blending Options>Inner Glow

Design Studio Layout

Blending Options>Bevel and Emboss

Design Studio Layout

Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout
Design Studio Layout

Write on the logotype the first letters that would compose the site’s name, having the demands for the inscription indicated in the next table:

Design Studio Layout
Design Studio Layout

The layer’s parameters:
Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout
Design Studio Layout

Write the site’s title too:

Design Studio Layout

(Design)

Design Studio Layout

(Studio)

Design Studio Layout

The layer’s parameters:
Blending Options>Gradient Overlay

Design Studio Layout

Gradient’s parameters:

Design Studio Layout
Design Studio Layout

Insert the titles for the menu’s buttons, the name of the current page and the copyright, keeping the demands from the next table:

Design Studio Layout
Design Studio Layout

We need to insert the text in the corresponding section:

Design Studio Layout

(the orange text)

Design Studio Layout

(the basic text reserved for the sections)

Design Studio Layout

The last stage includes adding pictures on our site:

Design Studio Layout

The site is finished!

View full size here.