Her

Home Photoshop Tutorials Web Layout Portfolio Web Layout (Part 1)

Portfolio Web Layout (Part 1)

Author: Adobetutorialz.com Author's URL: www.adobetutorialz.com More by this author

Select File>New option with 800x720 px and 72 dpi. Select the Rectangle Tool (U) to represent the background of the site to be next:

image 1

Make the necessary adjustments on the layer's parameters in the layers' panel:

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

Using the Rounded Rectangle Tool (U), try to represent the primary layer reserved for the site's panel:

image 4

The layer's parameters:

Blending Options>Gradient Overlay

image 5

Gradient's parameters:

image 6

Blending Options>Stroke

image 7

Choosing the same Rounded Rectangle Tool (U), we have to represent a button on the menu's panel on the site's header which needs to be turned over with Free Transform option. The button's color must be C92130.

image 8

The layer's parameters:

Blending Options>Stroke

image 9

Make four copies of the new made button's layer and change each button's color:

image 10

Select the Ellipse Tool (U) to draw the necessary element for the menu's buttons:

image 11

Apply the next parameters on the layers' panel:

Fill 0%

Blending Options>Gradient Overlay

image 12

Gradient's parameters:

image 13

Blending Options>Stroke

image 14

Using the same instrument, try to make a small circle on the lowest part of the site's panel:

image 15

The layer's parameters:

Blending Options>Drop Shadow

image 16

Blending Options>Inner Glow

image 17

Blending Options>Stroke

image 18

Selecting the previous instrument, it's possible to draw several more circles on the lowest part of the site's panel:

image 19

The layer's parameters:

Blending Options>Gradient Overlay

image 20

Gradient's parameters:

Portfolio Web Layout (Part 1)