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

Professional Modern Web Layout (Part 1)



Author's URL: Adobetutorialz.com
Browse Pages: 2  3  4  5  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Professional Modern Web Layout (Part 1)"

Captcha