Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Professional Modern Web Layout (Part 1)

Professional Modern Web Layout (Part 1)

Browse Pages: 2  3  4  5  > >>

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

image 21



Author's URL: Adobetutorialz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: 2  3  4  5  > >>
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 "Professional Modern Web Layout (Part 1)"

Only registered users can write comment

No comments yet...