Her

Home Photoshop Tutorials Web Layout Web 2.0 Portfolio Website

Web 2.0 Portfolio Website

Author: amitk Author's URL: www.talk-mania.com More by this author

So let's start with a new document

Size : 760 x 700 pixels
Background color : white

Select Rectangle tool, and create some simple shapes

I have used different colors. in this way you can see better the placement of this shapes

image 1

For the top shape please add the following layer style

image 2

image 3

For the middle shape add the following layer styles

image 4

image 5

image 6

And for the bottom shape please add the following layer styles:

image 7

image 8

image 9

This is my result

image 10

Now with rounded rectangle tool ( radius 10 pixels ) create some other shapes and place it like me. One more time i use different colors for each shape.

image 11

For the top shape, and the green shape please add the following layer styles

image 12

image 13

image 14

image 15

My result

image 16

Now for the Blue shape add the following layer styles

image 17

image 18

image 19

image 20

This is my result

image 21

Select this 2 layers in your layer palette

image 22

And press Ctrl+E ( this will merge this 2 layers )

We will have one single rasterized file

Select rectangular marquee tool, and make a selection like me.

image 23

After you have this selection press Delete on your keyboard, then Ctrl+D to deselect

image 24

Select Ellipse Tool , and try to create something like me. please use black for the following shape

image 25

Go to Filter > Blur > Gaussian Blur. You will be asked if you want to rasterize the shape. please press OK

Then use the following settings

image 26

After you click OK select Rectangular Marquee Tool, and make a selection like mine

image 27

Then press Delete Key from your keyboard

Press Ctrl+D do hide the selection,

This is my result

image 28

Then set the Layer Mode to overlay, and reduce the Opacity to 40 %

image 29

This is my result

image 30

Now it is time to add some text.

image 31
Click to enlarge

You can also add some text on the bottom of your layout

image 32
Click to enlarge

Also you can add a shadow under each text title

image 33
Click to enlarge

And you can also add a button on the bottom of the green shape

This button you can create it with Rounded rectangle tool

Please use the same layer styles we have used for the black shape

image 34
Click to enlarge

Please add some 3D box, or some image on the header

image 35

You can see that i have placed the Talk-Mania Big-Pack. If you are already the owner of this pack, please load some ornaments brushes, or floral brushes and add them like me

Please note that you need to add a new layer ( press Ctrl+Shift+Alt+N ) Then with brush tool create some nice details

Please note that the star brush you can download for free from www.free-photoshop.com.

And the floral brushes are included in Talk-Mania Big-Pack. I have used only 2 brushes for this details. think about that you have in this pack over 4000 brushes ( in 3 different sizes ) this means over 12.000 photoshop brushes

image 36
Click to enlarge

Now you can add some lines between the top menu links. Select Line tool ( set the width to 1 pixel, and create three lines ) white - black - white

image 37

Then merge all this lines ( to merge the lines you need to select all line layers in your layer palette and press Ctrl+E )

Then select eraser tool , Choose a Soft Round Brush , set the opacity to 50 % and delete the top and the bottom of the line

image 38

Duplicate this layer a few times and place it between text links> this is my final result. i hope you like it

Web 2.0 Portfolio Website
Click to enlarge