Create a Rounded Layout

admin · #1 (**permalink**) 11-28-2006, 09:16 PM

Hello

This is the Tutorial number 43 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

Today i will show you how to create a nice layout with rounded shapes
Please download the PSD file so you can see exactly how the layout is done.

This is the final result:

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:

Then apply the following Layer styles:

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

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

Press on Subtract from selection

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

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

Now add some text Buttons

Then create another Rounded rectangle ( Radius 90 )

Now add this layer style:

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

Then add the following layer style:

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

The result should look like mine

Now we will create some details for the body of the page.
Select Rounded Rectangle Tool ( Radius 90 ) and draw some shapes:

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 )

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:

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

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

Select The Paint Bucket Tool, use the following settings:

And press inside your selection

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

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

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

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.

If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

If you have questions do not hesitate to ask me