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

Portfolio Web Layout (Part 1)

Browse Pages: 2  3  > >>

Select File>New option with 800x720 px and 72 dpi. Select the Rectangle Tool (U) to represent the background of the site to be next:

image 1

Make the necessary adjustments on the layer's parameters in the layers' panel:

Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

Using the Rounded Rectangle Tool (U), try to represent the primary layer reserved for the site's panel:

image 4

The layer's parameters:

Blending Options>Gradient Overlay

image 5

Gradient's parameters:

image 6

Blending Options>Stroke

image 7

Choosing the same Rounded Rectangle Tool (U), we have to represent a button on the menu's panel on the site's header which needs to be turned over with Free Transform option. The button's color must be C92130.

image 8

The layer's parameters:

Blending Options>Stroke

image 9

Make four copies of the new made button's layer and change each button's color:

image 10

Select the Ellipse Tool (U) to draw the necessary element for the menu's buttons:

image 11

Apply the next parameters on the layers' panel:

Fill 0%

Blending Options>Gradient Overlay

image 12

Gradient's parameters:

image 13

Blending Options>Stroke

image 14

Using the same instrument, try to make a small circle on the lowest part of the site's panel:

image 15

The layer's parameters:

Blending Options>Drop Shadow

image 16

Blending Options>Inner Glow

image 17

Blending Options>Stroke

image 18

Selecting the previous instrument, it's possible to draw several more circles on the lowest part of the site's panel:

image 19

The layer's parameters:

Blending Options>Gradient Overlay

image 20

Gradient's parameters:

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  > >>
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 "Portfolio Web Layout (Part 1)"

Only registered users can write comment

No comments yet...