Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Stylish WebStudio Web Layout
rss

Stylish WebStudio Web Layout

Author: Adobetutorialz.com More by this author
Browse Pages:  1  2  3 > >>


Begin by creating a new file (File>New) with 800x600 px and 72 dpi. Using the Paint Bucket Tool (G), paint it out in here showed color: # E2C89F.

image 1

Next we need to take the Rectangle Tool (U) to create the layer designed for the site's sections, which color is the same with the background's one. The shape may be corrected with Convert Point Tool. We'll add one more top with Add Anchor Point Tool.

image 2

The layer's parameters:

Blending Options>Drop Shadow

image 3

Blending Options>Stroke

image 4

image 5

Create a new layer. After that we'll represent the shadow under the sections' layer. Using firstly the Brush Tool (B), try to make a patch of black color and then applying the Smudge Tool (R) we'll blur out the patch from the right side to the left one. The Eraser Tool (E) will be helpful in erasing the unnecessary elements.

image 6

image 7

image 8

image 9

Now we'll represent the menu's buttons situated on the site's header, choosing the Rectangle Tool (U). Their shape may be corrected with Convert Point Tool. The layer should be placed lower than the sections' layer, on the layers' palette.

image 10

The layer's parameters:

Fill 0% on the layers.

Blending Options>Drop Shadow

image 11

Blending Options>Gradient Overlay

image 12

Gradient's parameters:

image 13

Blending Options>Stroke

image 14

image 15

Make four copies of the new made button and select the Free Transform option to turn them over if necessary. Choosing the Convert Point Tool, it's possible to make the corrections on the copies' shapes too. Change the parameters for each copy's layer. The copies must be placed, like the first button, lower than the sections' layer, on the layers' palette.

image 16

The parameters for the first copy:

Fill 0% on the layers.

Blending Options>Drop Shadow

image 17

Blending Options>Gradient Overlay

image 18

Gradient's parameters:

image 19

The parameters for the second copy:

Fill 0% on the layers.

Blending Options>Drop Shadow

image 20

Blending Options>Gradient Overlay

image 21

Gradient's parameters:

image 22

Blending Options>Stroke

image 23

The parameters for the third copy:

Fill 0% on the layers.

Blending Options>Drop Shadow

image 24

Blending Options>Gradient Overlay

image 25

Gradient's parameters:

image 26

Blending Options>Stroke

image 27

The parameters for the fourth copy:

Fill 0% on the layers.

Blending Options>Drop Shadow

image 28




print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages:  1  2  3 > >>

Add comments to "Stylish WebStudio Web Layout"