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

Professional Design Studio Web Layout (Part 1)

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

Next we need to create a window designed for additional information. So we'll need to take the Rounded Rectangle Tool (U) for the operation in case. The corrections on the window's shape, it's possible to do with the Convert Point Tool.

image 1

image 2

The layer's parameters:

Blending Options>Gradient Overlay

image 3

Gradient's parameters:

image 4

Blending Options>Stroke

image 5

Gradient's parameters:

image 6

image 7

Using the Rounded Rectangle Tool (U), try to represent the layer reserved for the section colored in black.

image 8

image 9

The layer's parameters:

Blending Options>Outer Glow

image 10

image 11

Make a copy of the last made layer and choose the Free Transform option to place the copy like it is shown on the next picture and narrow it out horizontally.

image 12

Create a new layer. Now we need to draw a vertical line between the sections. Choose two colors for it and the Pencil Tool (B).

image 13

image 14

The Eraser Tool (E) will be helpful in erasing the elements we don't need on the picture.

image 15

image 16

image 17

Make a copy of the last made layer and choose again the Free Transform option to move the copy to the right side to the layer's edge, under the button reserved for the mobile palette.

image 18

image 19

Now we need to draw the button reserved for the mobile palette, selecting the Rectangle Tool (U).

image 20

image 21

The layer's parameters:

Blending Options>Gradient Overlay

image 22

Gradient's parameters:

image 23

Blending Options>Stroke

image 24

image 25

Take the Custom Shape Tool (U) and represent a pointer on the created button that would have the color # 205884. The pointer should be turned over with usual option - Free Transform.

image 26

image 27

image 28

Next we'll represent the palette reserved for the navigating buttons. For the beginning we'll take the Rounded Rectangle Tool (U) to represent one part of the palette to be and then hold on the Shift button, choosing simultaneously the Ellipse Tool (U) to finish the buttons. The color should be this one - #0E7AD9

image 29

image 30

The layer's parameters:

Blending Options>Inner Shadow

image 31

image 32



Author's URL: Adobetutorialz.com
Browse Pages: << < 1  2  3  4  > >>
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 "Professional Design Studio Web Layout (Part 1)"

Captcha