Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web Page Design Layout

Web Page Design Layout

Browse Pages: 2  > >>

Create a new file (File>New), having 900x885px and 72 dpi. Select next the Paint Bucket Tool (G) and paint it in this presented color - #7E7E7E

image 1

Apply for the layer in case the next parameters by making a right mouse's click on the layer.

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

image 4

Create now another new layer (Create new layer) of 4x4 px for representing the next texture's pattern:

image 5

And save it: Edit>Define Pattern

Continue by creating the next layer:

image 6

Apply for this layer the next shown parameters:

Blending Options>Gradient Overlay

image 7

Gradient's parameters:

image 8

Blending Options>Pattern Overlay

image 9

image 10

The next stage includes representing the primary layer of the site's page of white color, selecting previously the Rounded Rectangle Tool (U)

image 11

We should apply for this layer the next parameters too. Fill 30% on the layer.

Blending Options>Drop Shadow

image 12

Blending Options>Stroke

image 13

Gradient's parameters:

image 14

image 15

Insert one more layer for the central site's panel, using the Rounded Rectangle Tool (U) of white color:

image 16

Select for this layer the next demonstrated parameters:

Blending Options>Drop Shadow

image 17

Blending Options>Gradient Overlay

image 18

Gradient's parameters:

image 19

image 20

Create the next layer on the site's header, choosing firstly the Rectangle Tool (U)

image 21

The layer's parameters: Blending Options>Gradient Overlay

image 22

Gradient's parameters:

image 23

image 24

Next we should represent a stripe of black color on the site's header zone, applying the Rectangle Tool (U).

image 25

image 26



Author's URL: Adobetutorialz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: 2  > >>
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web Page Design Layout"

Only registered users can write comment

No comments yet...