Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web 2.0 Portfolio Website Tutorial with PSD Source

Web 2.0 Portfolio Website Tutorial with PSD Source


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

For the middle shape add the following layer styles

image 3

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

image 4

This is my result

image 5

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 6

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

image 7

image 8

My result

image 9

Now for the Blue shape add the following layer styles

image 10

image 11

this is my result

image 12

Select this 2 layers in your layer palette

image 13

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 14

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

image 15

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

image 16

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 17

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

image 18

Then press Delete Key from your keyboard
Press CTRL+D do hide the selection,
this is my result

image 19

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

image 20

This is my result

image 21

Now it is time to add some text.

image 22

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

image 23

Also you can add a shadow under each text title

image 24

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 25

image 26

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 27

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 28

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 29

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 Tutorial with PSD Source



Author's URL: tutoriallounge
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: