<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tutorial Lounge &#187; Portfolio Website Tutorial</title>
	<atom:link href="http://www.tutoriallounge.com/tag/portfolio-website-tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tutoriallounge.com</link>
	<description>Learn step by step!</description>
	<lastBuildDate>Wed, 08 Feb 2012 09:58:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Web 2.0 Portfolio Website Tutorial with PSD Source</title>
		<link>http://www.tutoriallounge.com/2009/08/web-20-portfolio-website-tutorial-with-psd-source/</link>
		<comments>http://www.tutoriallounge.com/2009/08/web-20-portfolio-website-tutorial-with-psd-source/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 18:14:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Photoshop Tutorials]]></category>
		<category><![CDATA[Portfolio Website Tutorial]]></category>
		<category><![CDATA[Website Tutorial]]></category>

		<guid isPermaLink="false">http://www.tutoriallounge.com/?p=1794</guid>
		<description><![CDATA[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&#8217;s start with a new.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1832" title="source" src="http://www.tutoriallounge.com/wp-content/uploads/source.jpg" alt="source" width="530" height="537" /></p>
<p>Talk-mania showing a great tutorial about Web 2.0 Portfolio website design, we offering a training where you can learn <a href="Web 2.0 Portfolio Website Tutorial with PSD Source"><strong>Adobe Photoshop </strong></a>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.<span id="more-1794"></span></p>
<p>So let&#8217;s start with a new document<br />
Size : 760 x 700 pixels<br />
background color : white</p>
<p>Select Rectangle tool, and create some simple shapes<br />
I have used different colors. in this way you can see better the placement of this shapes</p>
<p><img class="alignnone size-full wp-image-1795" title="1104" src="http://www.tutoriallounge.com/wp-content/uploads/1104.jpg" alt="1104" width="530" height="535" /></p>
<p>For the top shape please add the following layer style</p>
<p><img class="alignnone size-full wp-image-1796" title="024" src="http://www.tutoriallounge.com/wp-content/uploads/024.jpg" alt="024" width="530" height="390" /></p>
<p>For the middle shape add the following layer styles</p>
<p><img class="alignnone size-full wp-image-1798" title="034" src="http://www.tutoriallounge.com/wp-content/uploads/034.jpg" alt="034" width="530" height="576" /></p>
<p>And for the bottom shape please add the following layer styles:</p>
<p><img class="alignnone size-full wp-image-1799" title="044" src="http://www.tutoriallounge.com/wp-content/uploads/044.jpg" alt="044" width="530" height="610" /></p>
<p>This is my result</p>
<p><img class="alignnone size-full wp-image-1800" title="1023" src="http://www.tutoriallounge.com/wp-content/uploads/1023.jpg" alt="1023" width="530" height="537" /></p>
<p>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.</p>
<p><img class="alignnone size-full wp-image-1801" title="1129" src="http://www.tutoriallounge.com/wp-content/uploads/1129.jpg" alt="1129" width="530" height="537" /></p>
<p>For the top shape, and the green shape please add the following layer styles</p>
<p><img class="alignnone size-full wp-image-1802" title="1224" src="http://www.tutoriallounge.com/wp-content/uploads/1224.jpg" alt="1224" width="271" height="350" /></p>
<p><img class="alignnone size-full wp-image-1803" title="084" src="http://www.tutoriallounge.com/wp-content/uploads/084.jpg" alt="084" width="530" height="602" /></p>
<p>My result</p>
<p><img class="alignnone size-full wp-image-1804" title="1615" src="http://www.tutoriallounge.com/wp-content/uploads/1615.jpg" alt="1615" width="530" height="311" /></p>
<p>Now for the Blue shape add the following layer styles</p>
<p><img class="alignnone size-full wp-image-1806" title="010" src="http://www.tutoriallounge.com/wp-content/uploads/010.jpg" alt="010" width="322" height="522" /></p>
<p><img class="alignnone size-full wp-image-1807" title="0111" src="http://www.tutoriallounge.com/wp-content/uploads/0111.jpg" alt="0111" width="530" height="363" /></p>
<p>this is my result</p>
<p><img class="alignnone size-full wp-image-1808" title="2118" src="http://www.tutoriallounge.com/wp-content/uploads/2118.jpg" alt="2118" width="261" height="244" /></p>
<p>Select this 2 layers in your layer palette</p>
<p><img class="alignnone size-full wp-image-1809" title="2214" src="http://www.tutoriallounge.com/wp-content/uploads/2214.jpg" alt="2214" width="204" height="109" /></p>
<p>And press CTRL+E ( this will merge this 2 layers )<br />
We will have one single rasterized file</p>
<p>Select rectangular marquee tool, and make a selection like me.</p>
<p><img class="alignnone size-full wp-image-1810" title="2311" src="http://www.tutoriallounge.com/wp-content/uploads/2311.jpg" alt="2311" width="380" height="292" /></p>
<p>After you have this selection press Delete on your keyboard, then CTRL+D to deselect</p>
<p><img class="alignnone size-full wp-image-1811" title="249" src="http://www.tutoriallounge.com/wp-content/uploads/249.jpg" alt="249" width="249" height="168" /></p>
<p>Select Ellipse Tool , and try to create something like me. please use black for the following shape</p>
<p><img class="alignnone size-full wp-image-1812" title="255" src="http://www.tutoriallounge.com/wp-content/uploads/255.jpg" alt="255" width="401" height="207" /></p>
<p>Go to Filter &gt; Blur &gt; Gaussian Blur. You will be asked if you want to rasterize the shape. please press OK<br />
Then use the following settings</p>
<p><img class="alignnone size-full wp-image-1813" title="265" src="http://www.tutoriallounge.com/wp-content/uploads/265.jpg" alt="265" width="330" height="340" /></p>
<p>After you click OK select Rectangular Marquee Tool, and make a selection like mine</p>
<p><img class="alignnone size-full wp-image-1814" title="274" src="http://www.tutoriallounge.com/wp-content/uploads/274.jpg" alt="274" width="525" height="164" /></p>
<p>Then press Delete Key from your keyboard<br />
Press CTRL+D do hide the selection,<br />
this is my result</p>
<p><img class="alignnone size-full wp-image-1815" title="284" src="http://www.tutoriallounge.com/wp-content/uploads/284.jpg" alt="284" width="355" height="87" /></p>
<p>Then set the Layer Mode to overlay, and reduce the Opacity to 40 %</p>
<p><img class="alignnone size-full wp-image-1816" title="294" src="http://www.tutoriallounge.com/wp-content/uploads/294.jpg" alt="294" width="206" height="54" /></p>
<p>This is my result</p>
<p><img class="alignnone size-full wp-image-1817" title="304" src="http://www.tutoriallounge.com/wp-content/uploads/304.jpg" alt="304" width="412" height="150" /></p>
<p>Now it is time to add some text.</p>
<p><img class="alignnone size-full wp-image-1818" title="3111" src="http://www.tutoriallounge.com/wp-content/uploads/3111.jpg" alt="3111" width="530" height="498" /></p>
<p>You can also add some text on the bottom of your layout</p>
<p><img class="alignnone size-full wp-image-1820" title="328" src="http://www.tutoriallounge.com/wp-content/uploads/328.jpg" alt="328" width="530" height="211" /></p>
<p>Also you can add a shadow under each text title</p>
<p><img class="alignnone size-full wp-image-1822" title="333" src="http://www.tutoriallounge.com/wp-content/uploads/333.jpg" alt="333" width="530" height="56" /></p>
<p>And you can also add a button on the bottom of the green shape<br />
This button you can create it with Rounded rectangle tool<br />
Please use the same layer styles we have used for the black shape</p>
<p><img class="alignnone size-full wp-image-1823" title="342" src="http://www.tutoriallounge.com/wp-content/uploads/342.jpg" alt="342" width="530" height="227" /></p>
<p><img class="alignnone size-full wp-image-1824" title="352" src="http://www.tutoriallounge.com/wp-content/uploads/352.jpg" alt="352" width="416" height="307" /></p>
<p>You can see that i have placed the <a rel="nofollow" href="http://www.talk-mania.com/store/index.php?target=products&amp;product_id=29779" target="_blank">Talk-Mania Big-Pack</a>. If you are already the owner of this pack, please load some ornaments brushes, or floral brushes and add them like me</p>
<p>Please note that you need to add a new layer ( press CTRL+SHIFT+ALT+N ) Then with brush tool create some nice details<br />
Please note that the star brush you can download for free from <a href="http://www.free-photoshop.com/" target="_blank">www.free-photoshop.com</a></p>
<p>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</p>
<p><img class="alignnone size-full wp-image-1825" title="362" src="http://www.tutoriallounge.com/wp-content/uploads/362.jpg" alt="362" width="530" height="537" /></p>
<p>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 &#8211; black &#8211; white</p>
<p><img class="alignnone size-full wp-image-1827" title="372" src="http://www.tutoriallounge.com/wp-content/uploads/372.jpg" alt="372" width="292" height="215" /></p>
<p>Then merge all this lines ( to merge the lines you need to select all line layers in your layer palette and press CTRL+E )</p>
<p>Then select eraser tool , Choose a Soft Round Brush , set the opacity to 50 % and delete the top and the bottom of the line</p>
<p><img class="alignnone size-full wp-image-1828" title="382" src="http://www.tutoriallounge.com/wp-content/uploads/382.jpg" alt="382" width="92" height="167" /></p>
<p>Duplicate this layer a few times and place it between text links&gt; this is my final result. i hope you like it</p>
<p><img class="alignnone size-full wp-image-1829" title="391" src="http://www.tutoriallounge.com/wp-content/uploads/391.jpg" alt="391" width="530" height="537" /></p>
<h1><a href="http://www.talk-mania.com/attachments/web-layouts/336d1192203272-web-2-0-portfolio-website-layout134.zip">Download PSD Source</a></h1>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoriallounge.com/2009/08/web-20-portfolio-website-tutorial-with-psd-source/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

