Her

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

Modern Web Layout (Part 1)

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

Open a new file with 820x790px and 72 dpi. Applying the Rectangle Tool (U), it's possible to represent the background of the next site to be.

image 1

The layer's parameters (click on the right mouse's button on the layers' panel)

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

Select now the usual Pen Tool (P) to draw several rays that would have the same parameters:

image 4

The layer's parameters:

Blending Options>Color Overlay

image 5

Merge down in a group all the layers composing the rays (make a click on Ctrl and mark out the necessary layers. Keeping pressed the left mouse's button try to stretch them down to Create a new group option). Apply the next parameters for the represented group and change the Pass Taught mode on Pin Light, setting the Opacity on 64%.

image 6

Choose now the Rounded Rectangle Tool (U) to represent the primary layer of the panel and the site's sections, having the next color – E3E3E3.

image 7

The layer's parameters:

Blending Options>Stroke

image 8

Create a new layer and select the standard Brush Tool (B) to paint in white the way indicated below:

image 9

Make a mouse click between the brush's layer and site's panel, pressing simultaneously the Alt button.

image 10

Choose the previous instrument to create a site's section colored in white.

image 11

The layer's parameters:

Blending Options>Stroke

image 12

Create a new layer and select the Brush Tool (B), clicking on the picture's layer also.

image 13

We have to use now the Eyedropper Tool (I) and the brush to make a click on those places the site's panel would look broken, near the site's background.

image 14

Using the Line Tool (U), it's possible to create a kind of calendar table of white color (holding up the Shift button).

image 15

image 16

Represent now the indicator of the current day applying the Rectangle Tool (U) and the next color – F2F2F2.

image 17

Using the Rounded Rectangle Tool (U), try to create the primary layer designed for the site's menu's buttons.

image 18

The layer's parameters:

Blending Options>Drop Shadow

image 19

Blending Options>Gradient Overlay

image 20

Gradient's parameters:

Modern Web Layout (Part 1)