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

Rounded Layout

Author: amitk More by this author


For start you have to create a new document in Photoshop

760 x 700 px should be fine

Change the Color of your background to # 333333

Select The Rounded Rectangle Tool ( Radius 90 ) and draw a shape:

image 1

Then apply the following Layer styles:

image 2

image 3

image 4

image 5

image 6

This layer style we will use a lot so it is good if you can save this layer style. If you don't know how to save your layer style please ask me and i will show you how to create a new layer style

Now hold the Ctrl key down and press on the Layer Thumbnail

image 7

You will notice that you will have a selection around your shape

image 8

Press on Subtract from selection

image 9

and delete the top and the bottom from your selection. The remaining selection will be like in the following image:

Click to enlarge
Click to enlarge

After you have this selection you have to create another layer ( press Ctrl+Shift+Alt+N )

Fill the selection with white with Paint Bucket Tool , then apply the same Layer style as above

image 11

Now add some text Buttons

Click to enlarge
Click to enlarge

Then create another Rounded rectangle ( Radius 90 )

Click to enlarge
Click to enlarge

Now add this layer style:

image 14

Create another White rectangle ( please use the same setting for the radius - 90 )

Please make this rectangle a little bit smaller that the last one

image 15

Then add the following layer style:

image 16

image 17

image 18

image 19

Please save also this layer style ( to save the layer style you have to press on New Style)

image 20

The result should look like mine

Click to enlarge
Click to enlarge

Now we will create some details for the body of the page.

Select Rounded Rectangle Tool ( Radius 90 ) and draw some shapes:

Click to enlarge
Click to enlarge

As you notice i have used the first layer style for this small rounded rectangles.

Now please create another rectangles with the Rounded Rectangle Tool ( this time change the Radius to 20 )

You can use the same layer style ( the first one )

Click to enlarge
Click to enlarge

Now you have to create another 2 rounded rectangles ( set the radius back to 90 )

Now you can use the green layer style

Place this 2 rectangles like in the following image:

Click to enlarge
Click to enlarge

Next we will add some nice details on this layout.

Create a new document with a transparent background ( 5 x 5 pixels )

Zoom this document to 1600% and with the pencil Tool create the following drawing

image 25

Go to Edit > Define Pattern ...

Chose a name for your pattern and press ok

Now we will go back to our layout.
Create a new layer ( Press Ctrl+Shift+Alt+N )

Select rectangular Marquee Tool and make a selection

image 26

Select The Paint Bucket Tool, use the following settings:

image 27

And press inside your selection

image 28

Duplicate this layer and place it also on the bottom of the layout

image 29

Select One more time Rectangular Marquee Tool and use this settings:

image 30

With this tool press one time near your text Buttons. You will notice that a new selection will be visible. Create a new layer and with the Paint Bucket Tool and with the pattern from above selected press one time inside the selection

image 31

After you have filled with this pattern be sure you will press Ctrl+D to deselect

This is the result after i have duplicated this small squares a few times:

I have added also some text in the middle of the header. Please remove it if you don't like it.

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


Author's URL: www.talk-mania.com

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"