Her

Home Photoshop Tutorials Web Layout Professional Modern Web Layout (Part 1)

Professional Modern Web Layout (Part 1)

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

Create a new file (File>New) having 800x700 px and 72 dpi. Apply now the Paint Bucket Tool (G) to fill the background with color #131313

image 1

Using the Ellipse Tool (U), try to represent an element reserved for the site's header to be that would have the white color.

image 2

The layer's parameters:

Blending Options>Outer Glow

image 3

image 4

Applying the previous instrument, try to make the next layer belonging to the site's header, which corrections can be made with Convert Point Tool.

image 5

The layer's parameters:

Blending Options>Inner Glow

image 6

Blending Options>Gradient Overlay

image 7

Gradients parameters:

image 8

image 9

Make a copy of the new made layer and select the Free Transform option to narrow a little the copy and stretch it out a little the way it is shown below (change the layer's parameters).

image 10

The layer's parameters:

Blending Options>Gradient Overlay

image 11

Gradient's parameters:

image 12

image 13

Create a new layer having 20x20 px and 72 dpi and then apply the Rectangle Tool (U) about three times and turn over the copy with Free Transform option to create a kind of pattern of white color.

image 14

image 15

Save the Pattern!

image 16

Create a new layer and use on it the Rectangle Tool (U) to represent a wide stripe looking like a part of the site's background.

image 17

The layer's parameters:

Blending Options>Gradient Overlay

image 18

Gradient's parameters:

image 19

Blending Options>Pattern Overlay

image 20

Professional Modern Web Layout (Part 1)