Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design Studio Layout

Design Studio Layout

Browse Pages: << < 1  2  3  > >>

Gradient's parameters:

image 1

image 2

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.

image 3

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

image 4

image 5

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.

image 6

The layer's parameters:

The Opacity should be of 50%

Blending Options>Pattern Overlay

image 7

image 8

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

image 9

image 10

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

image 11

image 12

The layer's parameters:

Blending Options>Bevel and Emboss

image 13

Blending Options>Stroke

image 14

image 15

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:

image 16

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

image 17

The layer's parameters:

Blending Options>Inner Shadow

image 18

image 19

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

image 20

The layer's parameters:

Blending Options>Inner Glow

image 21



Author's URL: Adobetutorialz.com
Browse Pages: << < 1  2  3  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Design Studio Layout"

Captcha