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: << < 1  2  3  4  5  > >>

Make a copy of the recently created layer and select again the Free Transform option to move the copy to the right side and lift it up a little the way it is demonstrated on the picture.

image 1

image 2

Using the Rounded Rectangle Tool (U), represent the lowest layer reserved for the buttons' panel on the site's header's menu, colored in #010101

image 3

image 4

The layer's parameters:

Blending Options>Outer Glow

image 5

image 6

Make a copy of the new made layer and select the Free Transform option to make it smaller a little and apply for this copy different parameters:

image 7

The layer's parameters:

Blending Options>Gradient Overlay

image 8

Gradient's parameters:

image 9

image 10

Using the Ellipse Tool (U), try to draw a flare on the right side of the buttons' panel situated on the site's header.

image 11

The layer's parameters:

Fill 0% on the layers.

Blending Options>Gradient Overlay

image 12

Gradient's parameters:

image 13

image 14

Press the Alt button and make a mouse's click between the flare's layer and the buttons' panel for the flare to be applied in the limits of the buttons' panel.

image 15

image 16

Make a copy of the new made layer and move the copy with Free Transform option on the left side of the buttons' menu.

image 17

Select now the Rectangle Tool (U) to paint the lowest part of the site's background in here shown color - #1A1A1A

image 18

The layer's parameters:

Blending Options>Outer Glow

image 19

Blending Options>Bevel and Emboss

image 20

image 21

Choose the Rounded Rectangle Tool (U) to represent the lowest layer reserved for the site's sections.

image 22

image 23

The layer's parameters:

Blending Options>Drop Shadow

image 24

Blending Options>Gradient Overlay

image 25

Gradient's parameters:

image 26

image 27

Make a copy of the last made layer and apply again the Free Transform option to make the copy smaller the way it is demonstrated below and change the copy's parameters too.

image 28



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