Web 2.0 clean layout  

Posted in ,

Web 2.0 style is hot these days. Although now some web designer set new trend for anti Web 2.0, anti-gradient and anti-glossy-icon, this tutorial will show you how to make a clean style layout with some basic tools with Photoshop.

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

Pick the rounded recangle tool, look on Option Bar and choose Ridius : 10px

Rightclick on your new appear layer and choose “Rasterize layer”.
Continue rightclick on that layer and choose ” Blending Option” and set the detail like these :

OK, And here is result :

Still working on uper layer.
Pick “Recangular Maquee Tool”, draw a selection like this :

And then, pick Pollygon Lasso Tool, hold ALT and remove a part of recangle selection :

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 creat any new layer)
And here is the result :

Creat a new layer, set foreground color to eae9e8
CTRL+CLICK on “One rounded corner” layer, a selection will appear on the working area.
Choose Menu Select ~> Modify ~> Contract = 1px

Pick “Gradient Tool” , look on Option bar at the top of window, choose this box :

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

Result :

Pick Move Tool (V) and press DOWN arrow and RIGHT arrow ONCE :

Creat a new layer (Ctrl+Shift+N)
CTRL+CLICK on thumnail image of “One rounded corner” layer, Menu select ~> Modify ~> Contract ~>2px
Pick GRADIENT TOOL , and set option :

Drag a path from C to D :

Result :

Pick “Brush Tool” , set foreground color to BLACK and set option :

Creat 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%:

STEP 5 : (Creat a clean bullet)
Pick Eliptical Marquee Tool , Hold Shift and draw a small circle selection, press ALT+BACKSPACE at the same time to fill selection with any color :

Rightclick on “Bullet” layer and choose “Blending Option”, set detail information :

And you’ll have….

Creat a new layer (Ctrl+Shift+N)
Set foreground color to ffff76
Pick Brush Tool , and set option like this :

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

Final result : (added text and photos)

This entry was posted on 29 June 2008 at Sunday, June 29, 2008 and is filed under , . You can follow any responses to this entry through the comments feed .

0 comment

Post a Comment