<?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>TurboGFX &#187; Layouts</title>
	<atom:link href="http://www.turbogfx.com/category/tutorials/layouts/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.turbogfx.com</link>
	<description>Be Creative, Be Inspired</description>
	<lastBuildDate>Mon, 11 Jan 2010 12:50:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Classy Model Portfolio Layout</title>
		<link>http://www.turbogfx.com/tutorials/layouts/classy-model-portfolio-layout/</link>
		<comments>http://www.turbogfx.com/tutorials/layouts/classy-model-portfolio-layout/#comments</comments>
		<pubDate>Mon, 23 Nov 2009 08:21:04 +0000</pubDate>
		<dc:creator>Raven</dc:creator>
				<category><![CDATA[Layouts]]></category>

		<guid isPermaLink="false">http://www.turbogfx.com/?p=39</guid>
		<description><![CDATA[Well, here is a rather simple tutorial on creating a classy models portfolio layout. So lets begin shall we.
Firstly, open a new document (800px x 880px) withn a backgroung color of #444444
Using the Rectangle Tool, draw a rectangle, with the came color as the background, in the centre of your page. once tis is done, [...]]]></description>
			<content:encoded><![CDATA[<p>Well, here is a rather simple tutorial on creating a classy models portfolio layout. So lets begin shall we.</p>
<p>Firstly, open a new document (800px x 880px) withn a backgroung color of #444444</p>
<p>Using the Rectangle Tool, draw a rectangle, with the came color as the background, in the centre of your page. once tis is done, apply the following stroke to this layer.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/box-stroke.gif" target="_blank"><img class="aligncenter" src="/wp-content/uploads/tutorials/model_portfolio/box-stroke-small.gif" alt="" width="400" height="299" /></a></p>
<p>You sould have something that looks like this&#8230;</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/box-stroke-result.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/box-stroke-result-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>Now what we want to do is draw another rectangle inside this box we have just completed, I have chosen the color #888888. It should look like this.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/inner-box.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/inner-box-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>Now, we are going to use the Ellipse Tool and draw an oval over the top left corner, I used #e9a0b2 as my color of choice. Once you have done that, rasterize the layer. Now here come a slightly tricky part, Ctrl click on the thumbnail of the inner box we have just created to select it, then press Shift + Ctrl + I to inverse the selection, with the oval layer still active hit Delete. This should remove all of the oval we drew except for the section inside of the inner box. One last thing to do is to set the opacity of this layer down to about 25%. I have added a white to black linear gradient stroke to mine just to add a bit of depth, you can play around with this if you wish.</p>
<p>Now, repeat the above step agan, only draw you oval in the bottom right corner. Your end result should be similar to this.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/inner-box-ellipse.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/inner-box-ellipse-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>In the next step we are going to be adding 2 lines above the inner box, the first line is 1px which runs the entire length of the top edge, the second is a slightly thicker line that is slightly shorter than the first. Once this is done, add the following gradient overlay to these lines.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/top-box-strip.gif" target="_blank"><img class="aligncenter" src="/wp-content/uploads/tutorials/model_portfolio/top-box-strip-small.gif" alt="" width="400" height="299" /></a></p>
<p>This layer style makes the lines almost seem to vanish into thin air. Your result should look similar to the image below.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/top-box-strip-result.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/top-box-strip-result-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>Next we are going to be creating the conten boxes or tabs..</p>
<p>Right, lets press on, select the Rounded Rectangle Tool and set the radius to 7px. I used the same color as the background, #444444, draw a rectangle the size that you like, then rasterize the layer. Ctrl click on the layer thumbnail to select it and then go to Select &#8211; Modify &#8211; Contract and set this setting to about 3px (set it higher if you want your lines thicker), once you see that the selection has been contracted, press delete. This will remove te centre of this rectangle. Now apply a layer mask to this layer and using the Gradient Tool, with a black to while gradient, hold Shift and drag your gradient from left to right inside the rectangle. You will end up with this.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/content-tabs-result.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/content-tabs-result-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>That is pretty much the basic layout, now its time to add a few finishing touches, I wont tellt you any more, it&#8217;s now time for your imagination to take effect&#8230;</p>
<p>After all of that, here is my final result of for my Model Portfolio Layout tutorial.</p>
<p style="text-align: center;"><a href="/wp-content/uploads/tutorials/model_portfolio/final-result.gif" target="_blank"><img class="aligncenter" style="border: 0pt none;" src="/wp-content/uploads/tutorials/model_portfolio/final-result-small.gif" border="0" alt="" width="400" height="350" /></a></p>
<p>Click the above image to enlarge.</p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em>Socialize Us</em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;submitHeadline=Classy+Model+Portfolio+Layout&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;title=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;title=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;title=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;bm_description=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;T=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;title=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;title=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Classy+Model+Portfolio+Layout+@+http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fwww.turbogfx.com%2Ftutorials%2Flayouts%2Fclassy-model-portfolio-layout%2F&amp;t=Classy+Model+Portfolio+Layout" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.turbogfx.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.turbogfx.com/tutorials/layouts/classy-model-portfolio-layout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
