Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Web 2.0 Clean Layout
rss

Web 2.0 Clean Layout

Author: EZPhotoshop More by this author


Step 1:

Create a new document, any size. (Ctrl+N)

image 1

Pick the rounded rectangle tool, look on Option Bar and choose Radius : 10px

image 2

Right click on your new appear layer and choose "Rasterize layer".

Continue right click on that layer and choose " Blending Option" and set the detail like these :

image 3

image 4

OK, And here is result :

image 5

Step 2:

Still working on upper layer.

Pick "Rectangular Marquee Tool", draw selection like this :

image 6

And then, pick Polygon Lasso Tool, hold Alt and remove a part of rectangles :

image 7

Press Alt+Backspace at the same time to fill in the selection with foreground color.

(remember, you're still working on "Overlay and Stroke" layer, do not create any new layer)

And here is the result :

image 8

Step 3:

Create a new layer, set foreground color to eae9e8

image 9

Ctrl+click on "One rounded corner" layer, selection will appear on the working area.

Choose Menu select ~> Modify ~> Contract = 1px

image 10

Pick "Gradient Tool" image 11 , look on Option bar at the top of window, choose this box :

image 12

OK, now look over working stage. First, drag straight from A to B :

image 13

Result :

image 14

Pick Move Tool (V) image 15 and press down arrow and right arrow once :

image 16

Create a new layer (Ctrl+Shift+N)

Ctrl+click on thumbnail image of "One rounded corner" layer, Menu select ~> Modify ~> Contract ~>2px

Pick Gradient Tool image 17 , and set option :

image 18

Drag a path from C to D :

image 19

Result :

image 20

Step 4:

Pick "Brush Tool" image 21 , set foreground color to black and set option :

image 22

Create a new layer lower "One rounded corner", name it "shadow"

Start brush a little bit to make a little shadow on the right bottom corner, set Opacity on layer palette = 70%:

image 23

Step 5 : (Create a clean bullet)

Pick Elliptical Marquee Tool image 24 , Hold Shift and draw a small circle selection, press Alt+Backspace at the same time to fill selection with any color :

image 25

Right click on "Bullet" layer and choose "Blending Option", set detail information :

image 26

image 27

image 28

And you'll have....

image 29

Create a new layer (Ctrl+Shift+N)


Set foreground color to ffff76

Pick Brush Tool image 30 , and set option like this :

image 31

Zoom out your work and click to brush on the center of upper bullet :

image 32

Final result : (added text and photos)

Web 2.0 Clean Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: ezphotoshop.info

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Web 2.0 Clean Layout"