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.

The layer’s parameters:Blending Options>Gradient Overlay

Gradient’s parameters:

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.

Save it!

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.

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

The layer’s parameters:Blending Options>Pattern Overlay

Blending Options>Stroke

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

The layer’s parameters:Blending Options>Inner Glow

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.

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.

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

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.

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

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

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

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

Blending Options>Stroke

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:

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

The layer’s parameters: Blending Options>Inner Shadow

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

The layer’s parameters:Blending Options>Inner Glow

Blending Options>Bevel and Emboss

Blending Options>Gradient Overlay

Gradient’s parameters:

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:

The layer’s parameters:Blending Options>Gradient Overlay

Gradient’s parameters:

Write the site’s title too:

(Design)

(Studio)

The layer’s parameters: Blending Options>Gradient Overlay

Gradient’s parameters:

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