Her

Home Photoshop Tutorials Web Layout Personal Site Layout (Part 1)

Personal Site Layout (Part 1)

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

We shall begin by opening a new file of 800x800 px and 72 dpi and then apply the Rectangle Tool (U) to represent the background of the next site.

image 1

The layer's parameters may be set by marking out one layer and clicking on it on the right mouse's button.

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

Create a new layer now and select the Brush Tool (B) from a standard set of brushes clicking on the right mouse's button on the picture (the color is 98B660). Represent after that two small stripes the way it is indicated on the picture below. The unnecessary elements may be erased with the usual instrument – Eraser Tool (E).

image 4

image 5

Choose now the Rounded Rectangle Tool (U) and represent the primary layer, reserved for the site's panel, but we have to delete a top from the upper part and from the left bottom (Delete Anchior Point Tool)

image 6

The layer's parameters:

Blending Options>Gradient Overlay

image 7

Gradient's parameters:

image 8

We have to represent now the frame designed for the site's panel, applying the instrument from here: Rounded Rectangle Tool (U)

image 9

Set the layer's parameters on the layers' panel.

Fill 0% on the layers.

Blending Options>Outer Glow

image 10

Blending Options>Stroke

image 11

Then we have to create a special layer for the menu's panel situated on the site's header, using the usual Rectangle Tool (U).

image 12

The layer's parameters:

Fill 0%

Blending Options>Gradient Overlay

image 13

Gradient's parameters:

image 14

Blending Options>Stroke

image 15

Select the Line Tool (U) to draw a dividing line on the menu's panel situated as we said on the site's header:

image 16

image 17

The layer's parameters:

Fill 0%

Blending Options>Gradient Overlay

image 18

Gradient's parameters:

image 19

Make two copies of the new made layer and place the copies the same way it is demonstrated below. Place this layer under the frame's one:

image 20

Write now the titles of the menu's buttons, keeping the demands from the next table:

image 21

image 22

Using the Line Tool (U), try to make three horizontal dividing stripes on the site's panel, colored with CBF08E.

image 23

Entitle now the site's sections, applying the same demands from the next tables:

image 24

(lorem)

image 25

(ipsum dolor)

image 26

(blandit, consequat)

image 27

(cursis ultrices, fringillla)

Personal Site Layout (Part 1)