website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Rounded Layout
rss

Rounded Layout

Author: DesignTutorials.info More by this author


Step 1

Create a new document in Adobe Photoshop having 779x600 pixels. Select Rounded Rectangle Tool in your Tools Tab:

image 1

and draw a rounded rectangle the Photoshop document and set the color of your rectangle to #FFFFF (double click on "layer thumbnail" and choose color):

Click to enlarge
Click to enlarge

Step 2

Now, to rasterize the layer right click and select Rasterize Layer like this:

image 3

Step 3

Select Tools Tab and click on Add Layer Style and Drop Shadow to add shadow to you rectangle:

image 4

Set distance to 1% (in the shadow window setup) and click "OK".

Step 4

In Tools Tab select Rectangular Marquee Tool(M) and draw a contour like in the next picture, and Select > Modify > Smooth:

image 5

Delete your selection. Add a new color to you rectangle (#FF0000) or what color you want.

Step 5

Up to "background" layer insert a new layer and draw a little rounded rectangle, set the color and drop shadow. Something like this:

image 6

Step 6

Right click on your new layer and duplicate it. Move it to the next position. Do it again with another new layer and another one, like this:

image 7

Step 7

Add some kind of information to your layout like the text button and some content for the site and you have a trendy site layout:

Rounded Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge



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 "Rounded Layout"