RSS

Web 2.0 Portfolio Website Tutorial with PSD Source

Thu, Aug 6, 2009

Freebies, Photoshop

source

Talk-mania showing a great tutorial about Web 2.0 Portfolio website design, we offering a training where you can learn Adobe Photoshop which can use in website designing, hope if you follow these step, you may earn more regarding design, if you like this listed tutoril please leave your comments.

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

1104

For the top shape please add the following layer style

024

For the middle shape add the following layer styles

034

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

044

This is my result

1023

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.

1129

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

1224

084

My result

1615

Now for the Blue shape add the following layer styles

010

0111

this is my result

2118

Select this 2 layers in your layer palette

2214

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.

2311

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

249

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

255

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

265

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

274

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

284

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

294

This is my result

304

Now it is time to add some text.

3111

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

328

Also you can add a shadow under each text title

333

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

342

352

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

362

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

372

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

382

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

391

Download PSD Source

Share for other World:
  • Digg
  • del.icio.us
  • TwitThis
  • Facebook
  • StumbleUpon
  • Technorati
  • Reddit
  • MySpace
  • Mixx
  • LinkedIn
  • Google Bookmarks
  • Yahoo! Buzz
  • DZone
  • Propeller
  • Design Float
  • Diigo
  • Live
  • Netvibes

Related posts:

  1. Website Design for Business Theme Complete Tutorial A complete package of website design as a Business...
  2. 5 Page Website Design in Photoshop with Source Hello welcome to Complete Website design tutorial. In this...
  3. Create an Famous Blog Logo Through Photoshop Tutorial Today we’re trying to present an short way for...
  4. 3D Gooey Photoshop Text Tutorial Create great looking, 3-Dimensional, gooey looking text . This...
  5. Valentine’s Day Themed Pattern Tutorial Using Adobe Illustrator Saint Valentine’s Day is coming, soon millions of will...

Related posts brought to you by Yet Another Related Posts Plugin.

, ,

This post was written by:

admin - who has written 117 posts on Tutorial Lounge.


Contact the author

2 Comments For This Post

  1. joyoge designers' bookmark Says:

    beaituful web design, thanks for the tut..

  2. Rahul - Web Guru Says:

    Thanks for the website tutorial and the PSD source as well.

    Cheers.

4 Trackbacks For This Post

  1. Web 2.0 Portfolio Website Tutorial with PSD Source | Design Newz Says:

    [...] Web 2.0 Portfolio Website Tutorial with PSD Source [...]

  2. CSS Brigit | Web 2.0 Portfolio Website Tutorial with PSD Source Says:

    Web 2.0 Portfolio Website Tutorial with PSD Source…

    Talk-mania showing a great tutorial about Web 2.0 Portfolio website design, we offering a training where you can learn Adobe Photoshop…

  3. Web 2.0 Portfolio Website Tutorial with PSD Source | Tutorial Lounge Says:

    [...] Originally posted here: Web 2.0 Portfolio Website Tutorial with PSD Source | Tutorial Lounge [...]

  4. 40 Great Just Arrived User Links for Designers and Developers | tripwire magazine Says:

    [...] Web 2.0 Portfolio Website Tutorial with PSD Source [...]

Leave a Reply