<?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>Sydney Web design blog &#124; Cheb 2.0 &#187; Tutorial</title>
	<atom:link href="http://www.cheb.com.au/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cheb.com.au</link>
	<description>A blog about Australia/Sydney Web design, Web 2.0, Technology, Gadgets, CSS/XHTML and more!</description>
	<lastBuildDate>Tue, 21 Jul 2009 01:46:31 +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>Creating realistic smoke: Photoshop effect</title>
		<link>http://www.cheb.com.au/creating-realistic-smoke-photoshop-effect/</link>
		<comments>http://www.cheb.com.au/creating-realistic-smoke-photoshop-effect/#comments</comments>
		<pubDate>Sun, 11 May 2008 17:40:44 +0000</pubDate>
		<dc:creator>Cheb</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Effects]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.cheb.com.au/?p=167</guid>
		<description><![CDATA[Hey guys, Another Photoshop tutorial because you guys asked for it! This time we are going to take a look at how to create realistic-looking smoke. Whether you use it to add that eery effect to a night-time scene, or to jazz up that photo that just looks too cool &#8211; you will find a [...]]]></description>
			<content:encoded><![CDATA[<p>Hey guys,</p>
<p>Another <a title="Photoshop tutorials at Cheb 2.0" href="http://www.cheb.com.au/tag/photoshop/">Photoshop tutorial</a> because you guys asked for it! This time we are going to take a look at how to create realistic-looking smoke. Whether you use it to add that eery effect to a night-time scene, or to jazz up that photo that just looks too cool &#8211; you will find a dozen or so uses of this effect.</p>
<p>So let&#8217;s do it shall we&#8230;</p>
<p>1. As always, for the purposes of this demo, let&#8217;s go ahead and create a new document with canvas size 460&#215;600 and black; #000000 as the background.</p>
<p>2. Create a new layer called &#8220;Smoke&#8221;. As always, you can achieve this in the Layer menu; &#8216;Layer &gt; New &gt; Layer&#8217;, or Shift+Control+N (Shift+Command+N on a Mac).</p>
<p>3. We are going to select a &#8216;Hard Round&#8217; brush at about 20 pixels (which you can also select by right-clicking on the canvas with the brush selected and changing the settings. Make sure the brush is set at 100% opacity and obviously 100% hardness. Select white for the foreground colour; or #FFFFFF. Once we have these settings set-up we can roll ahead to step four!</p>
<p>4. Okay, as you can see in the image below, we are just going to create some &#8216;beanstalk&#8217; style swirls or better yet; back to front question marks without the colon &#8211; on the canvas! Make sure to start from the left to the right. We are going to be reducing the size of the brush as we move from left to right; and the easiest way to explain this is to probably show you how it should look over a couple of screens. So here we go!</p>
<p><img class="alignnone size-full wp-image-168" title="Creating smoke - brush setup" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-1-4.gif" alt="Creating smoke - brush setup" width="460" height="600" /></p>
<p><img class="alignnone size-full wp-image-169" title="Creating smoke - brush setup" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-2-4.gif" alt="Creating smoke - brush setup" width="460" height="600" /></p>
<p><img class="alignnone size-full wp-image-170" title="Creating smoke - brush setup" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-3-4.gif" alt="Creating smoke - brush setup" width="460" height="600" /></p>
<p><img class="alignnone size-full wp-image-171" title="Creating smoke - brush setup" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-4-4.gif" alt="Creating smoke - brush setup" width="460" height="600" /></p>
<p>5. Okay, now that you have created the above brush patterns at different sizes, let&#8217;s create the magic. Let&#8217;s go to &#8216;Filter &gt; Blur &gt; Gaussian Blur&#8217; at 7 pixels radius. Here&#8217;s the screeny.</p>
<p><img class="alignnone size-full wp-image-172" title="Smoke effect - Gaussian blur" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-blur.gif" alt="Smoke effect - Gaussian blur" width="460" height="367" /></p>
<p>If you got it right it should be looking like this so far:</p>
<p><img class="alignnone size-full wp-image-173" title="Smoke effect - After Gaussian blur" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-after-blur.gif" alt="Smoke effect - After Gaussian blur" width="460" height="600" /></p>
<p>6. You might not have used the &#8216;Maximum&#8217; and &#8216;Minimum&#8217; effects before. These two effects, which can be found under &#8216;Filter &gt; Other&#8217;, are useful for modifying masks.</p>
<p>The Maximum filter basically applies a choke to the layer; basically spreading out white areas and <em>choking</em> in black areas. Whereas, the Minimum filter has the effect of applying the direct opposite; a spread. It achieves this by spreading out black areas and consequently  shrinking white areas.</p>
<p>The great thing about the Maximum and Minimum filters is both effects look at individual pixels in a selection. As mentioned in Adobe&#8217;s documentation, &#8216;within a specified radius, the Maximum and Minimum filters replace the current pixel’s brightness value with the highest or lowest brightness value of the surrounding pixels.&#8217; </p>
<p>That&#8217;s just what we need for this effect! We want to basically &#8216;blend&#8217; the pixel brightness values by going over the layer with a &#8216;Maximum&#8217; pass &#8211; so let&#8217;s go ahead and do just that.</p>
<p>Head over to the &#8216;Filter &gt; Other &gt; Maximum&#8217; filter and select a radius of 4 pixels. Notice how the higher up you go in radius, the less-realistic it starts to look.</p>
<p><img class="alignnone size-full wp-image-174" title="Smoke effect - maximum pass" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-maximum.gif" alt="Smoke effect - maximum pass" width="460" height="381" /></p>
<p>7. Okay, if you managed to get that section okay, your canvas should start looking like this:</p>
<p><img class="alignnone size-full wp-image-175" title="Smoke effect" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-sofar.jpg" alt="Smoke effect" width="460" height="600" /></p>
<p>8. Alright, let&#8217;s add  a few <a title="Effects at Cheb 2.0 Web Design Blog" href="http://www.cheb.com.au/tag/effects/">more effects</a>. Let&#8217;s go to &#8216;Filter &gt; Distort &gt; Spherize&#8217; and select &#8216;-100%&#8217;, select okay, and then go to &#8216;Filter &gt; Distort &gt; Twirl&#8217; and select a setting of &#8216;-75%&#8217;. Your canvas should now be looking like this:</p>
<p><img class="alignnone size-full wp-image-176" title="Smoke effect - so far..." src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-sofar2.jpg" alt="Smoke effect - so far..." width="460" height="600" /></p>
<p>9. Alright, we are almost there! Let&#8217;s setup a Surface Blur by going to &#8216;Filter &gt; Blur &gt; Surface Blur&#8217; with the following settings:</p>
<p><img class="alignnone size-full wp-image-177" title="Smoke effect - Surface Blur" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-surfaceblur.jpg" alt="Smoke effect - Surface Blur" width="460" height="486" /></p>
<p>10. Okay! We are pretty much done! Let&#8217;s find an interesting image to use as a backdrop. Through the magic of Stock Xchange, here&#8217;s one CraigPJ created earlier. [<a title="CraigPJ self portrait" href="http://www.sxc.hu/photo/788512">http://www.sxc.hu/photo/788512</a>] </p>
<p>Insert this image, or any other as a separate layer but make sure it is underneath the &#8216;smoke&#8217; layer we have been working on.</p>
<p><img class="alignnone size-full wp-image-178" title="Smoke effect - completed" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-complete.jpg" alt="Smoke effect - completed" width="460" height="600" /></p>
<p>There you go! Cool hah? Feel free to play around with the Smoke effect to get it looking a little better. Try duplicating the &#8216;smoke&#8217; layer and playing with the opacity of that layer, or moving it around the canvas.</p>
<p>You can use the &#8216;Warp Tool&#8217; to make the smoke move in a certain direction. Maybe something like this? [Click to maximise]</p>
<p style="text-align: center;"><a class="aligncenter" rel="lightbox" href="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-warptool.jpg"><img class="alignnone size-medium wp-image-179 aligncenter" title="Smoke effect - Warp tool" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-warptool-300x253.jpg" alt="Smoke effect - Warp tool" width="300" height="253" /></a></p>
<p style="text-align: left;">So here&#8217;s just one of the ways this effect can go in terms of Levels and Curves.</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-180" title="Smoke effect - final demo" src="http://www.cheb.com.au/wp-content/uploads/2008/05/smoke-final-effect.jpg" alt="Smoke effect - final demo" width="460" height="600" /></p>
<p style="text-align: left;">So there you go guys! Enjoy playing with this effect. There are many ways to create smoke in <a title="Photoshop tutorials - Cheb 2.0" href="http://www.cheb.com.au/tag/Photoshop/">Photoshop</a>, but this method usually gets you good results. Not only that, it gives you ample oppurtunity to experiment with not only the settings, but the post-production after the effect has been setup.</p>
<p style="text-align: left;">So once again, thank you for following &#8211; let us know what you think by posting a comment if you liked it or it helped you and share, share, share. Don&#8217;t forget to <a title="Cheb 2.0 RSS Feed - Subscribe to our RSS Feed" href="http://www.cheb.com.au/feed/">subscribe to our RSS feed</a> for updates on future content (It&#8217;s free and easy!).</p>
<p style="text-align: left;">Till next time, Cheb 2.0.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cheb.com.au/creating-realistic-smoke-photoshop-effect/feed/</wfw:commentRss>
		<slash:comments>2913</slash:comments>
		</item>
		<item>
		<title>Really wicked Photoshop glow lighting effect and Pen tool introduction</title>
		<link>http://www.cheb.com.au/wicked-photoshop-glow-lighting-effect-pen-tool-introduction/</link>
		<comments>http://www.cheb.com.au/wicked-photoshop-glow-lighting-effect-pen-tool-introduction/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 15:01:56 +0000</pubDate>
		<dc:creator>Cheb</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Effects]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.cheb.com.au/?p=133</guid>
		<description><![CDATA[Hey guys, I&#8217;ve been playing with glow effects lately for an upcoming website redesign, and I&#8217;ve been noticing quite a bit of work being done with Photoshop&#8217;s pen tool and cool lighting effects, so I figured I&#8217;d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used [...]]]></description>
			<content:encoded><![CDATA[<p>Hey guys,</p>
<p>I&#8217;ve been playing with glow effects lately for an upcoming website redesign, and I&#8217;ve been noticing quite a bit of work being done with Photoshop&#8217;s pen tool and cool lighting effects, so I figured I&#8217;d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another <a title="Posts tagged 'Photoshop' on Cheb 2.0" href="http://www.cheb.com.au/tag/photoshop/">Photoshop tutorial</a>.</p>
<p>Just as a sneak peak, this is what we are going to be creating&#8230;</p>
<p><img class="alignnone size-full wp-image-134" title="Cheb 2 Glow Effect - Final Result" src="http://www.cheb.com.au/wp-content/uploads/2008/04/cheb2-glow-final.jpg" alt="Cheb 2 Glow Effect - Final Result" width="460" height="460" /></p>
<p>Okay, Let&#8217;s start from the top!</p>
<p>If you&#8217;ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.</p>
<p>Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.</p>
<h2>The Pen Tool</h2>
<p>The Pen tool has the following five options:</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-135" title="pen-tool-options" src="http://www.cheb.com.au/wp-content/uploads/2008/04/pen-tool-options.jpg" alt="" width="254" height="178" /></p>
<ol>
<li>The <strong>Pen tool </strong>is mostly likely going to be the main tool you use. The &#8216;Pen Tool&#8217; allows you to create straight lines and curves that make up most your paths.</li>
<li>The <strong>Freeform Pen too</strong>l is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it&#8217;s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.</li>
<li>The <strong>Add Anchor Point Tool</strong> allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.</li>
<li>The <strong>Delete Anchor Point Tool</strong> removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.</li>
<li>The <strong>Convert Point Tool</strong> allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.</li>
</ol>
<p>Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself &#8211; so create a new document, 460&#215;460 and let&#8217;s go! Try to create the following easy curves and lines by following the simple steps.</p>
<p>If you can get these down-pat, it&#8217;ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!</p>
<p><img class="alignnone size-full wp-image-136" title="Examples of the pen tool" src="http://www.cheb.com.au/wp-content/uploads/2008/04/curves.gif" alt="Examples of the pen tool" width="460" height="460" /></p>
<p>If you have made it this far, I&#8217;m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..</p>
<p>Okay, let&#8217;s create a new document, 460&#215;460 and set background colour to black, #000000. Before we get kicking, let&#8217;s make sure we have some settings where they need to be.</p>
<p><img class="alignnone size-full wp-image-138" title="Pen tool settings" src="http://www.cheb.com.au/wp-content/uploads/2008/04/pentoolsettings.gif" alt="" width="460" height="168" /></p>
<p>Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three &#8216;squares&#8217; &#8211; the &#8216;Paths&#8217; option highlighted in green above. Then make sure that &#8216;Pen tool&#8217; is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a &#8216;Rubber Band&#8217; option.</p>
<h2>What&#8217;s the Rubber Band option for?</h2>
<p>The Rubber Band option is used to help show you where the curve is heading and how it&#8217;s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just &#8216;follows&#8217; you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!</p>
<p>Just a little tip &#8211; when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or &#8216;Shape Layers&#8217; and not &#8216;Paths&#8217;. Obviously we can keep &#8216;Paths&#8217; on for now because we need this option.</p>
<p>So back to your 460&#215;460 canvas with a black background.</p>
<p>Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.</p>
<p>Don&#8217;t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it &#8216;straight line&#8217; or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.</p>
<p><a href="http://www.cheb.com.au/wp-content/uploads/2008/04/step1-curves.gif"><img class="alignnone size-full wp-image-139" title="step1-curves" src="http://www.cheb.com.au/wp-content/uploads/2008/04/step1-curves.gif" alt="Step one - curve demo" width="460" height="460" /></a></p>
<p>If that&#8217;s what you see on your screen, well done! Let&#8217;s keep going.</p>
<p>Click the brush tool and select a soft round brush, 5 pixels in size &#8211; or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the &#8216;Master Diameter&#8217; to 5px and leave hardness at 0% (obviously! it&#8217;s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.</p>
<p>This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!</p>
<p>[flashvideo filename="http://www.cheb.com.au/wp-content/uploads/2008/04/Untitled.flv" /]</p>
<p>Okay, let&#8217;s recap.</p>
<p>If you right click on the paths you should see a &#8216;Stroke Path&#8217;. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose &#8216;Brush&#8217; and make sure we keep &#8216;Simulate Pressure&#8217; ticked. After that, you&#8217;ll want to right click again and &#8216;Delete Path&#8217; because we now have a stroked layer in its place and don&#8217;t need the &#8216;guide&#8217; anymore!</p>
<h2>What exactly is simulate pressure?</h2>
<p>Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected &#8211; it makes everything look much better!</p>
<p>Okay, if you followed the video, you should now have something like below.</p>
<p><img class="alignnone size-full wp-image-143" title="curves-stroked" src="http://www.cheb.com.au/wp-content/uploads/2008/04/curves-stroked.gif" alt="" width="460" height="312" /></p>
<p>Cool hah? Okay, let&#8217;s get some glowing happening.</p>
<p>If you apply the following Layer effects to your now-stroked paths, your glow should start forming.</p>
<p><img class="alignnone size-full wp-image-144" title="layerstyle_glow_1" src="http://www.cheb.com.au/wp-content/uploads/2008/05/layerstyle_glow_1.jpg" alt="Glow effect layer style 1" width="460" height="341" /></p>
<p><img class="alignnone size-full wp-image-145" title="layerstyle_glow_2" src="http://www.cheb.com.au/wp-content/uploads/2008/05/layerstyle_glow_2.jpg" alt="Glow effect layer style 2" width="460" height="341" /></p>
<p><img class="alignnone size-full wp-image-146" title="layerstyle_glow_3" src="http://www.cheb.com.au/wp-content/uploads/2008/05/layerstyle_glow_3.jpg" alt="Glow effect layer style 3" width="460" height="341" /></p>
<p><img class="alignnone size-full wp-image-147" title="layerstyle_glow_4" src="http://www.cheb.com.au/wp-content/uploads/2008/05/layerstyle_glow_4.jpg" alt="Glow effect layer style 4" width="460" height="341" /></p>
<p>When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:</p>
<p><img class="alignnone size-full wp-image-148" title="Paths - final glow effect" src="http://www.cheb.com.au/wp-content/uploads/2008/05/curve-glow-finalised.gif" alt="Paths - final glow effect" width="460" height="312" /></p>
<p>Cool hah?</p>
<h2>Quick Tip 2.0</h2>
<p>If you want to make your life easier, you can click the &#8220;New Style&#8221; button as seen in the above Layer style selection screens; immediatly under &#8216;Cancel&#8217;. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: &#8216;Layer &gt; Layer Style &gt; Blending Options&#8217;, click on the &#8216;Styles&#8217; tab, on top of &#8216;Drop Shadow&#8217;, and &#8216;Inner Shadow&#8217;, etc &#8211; and then select your new style from the list; press &#8216;OK&#8217; and you&#8217;re done!</p>
<p>So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below&#8230;</p>
<p><img class="alignnone size-full wp-image-149" title="Curves - example 1" src="http://www.cheb.com.au/wp-content/uploads/2008/05/curves-exampl1.jpg" alt="Curves - example 1" width="460" height="312" /></p>
<p><img class="alignnone size-full wp-image-150" title="Curves - example 2" src="http://www.cheb.com.au/wp-content/uploads/2008/05/curves-exampl2.jpg" alt="Curves - example 2" width="460" height="312" /></p>
<p>So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.</p>
<p>Enjoy and drop a comment if you liked the tutorial or you need something explained &#8211; or feel free to share it with your mates. Get on the <a title="Cheb 2.0 RSS Feed" href="http://www.cheb.com.au/feed/">RSS Feed</a> to keep up to date about when I next post!</p>
<p>Thanks for reading, Cheb.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cheb.com.au/wicked-photoshop-glow-lighting-effect-pen-tool-introduction/feed/</wfw:commentRss>
		<slash:comments>5609</slash:comments>
		</item>
		<item>
		<title>What makes a great website?</title>
		<link>http://www.cheb.com.au/what-makes-a-great-website/</link>
		<comments>http://www.cheb.com.au/what-makes-a-great-website/#comments</comments>
		<pubDate>Fri, 25 Apr 2008 03:35:21 +0000</pubDate>
		<dc:creator>Cheb</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Blogging Tips]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.cheb.com.au/?p=128</guid>
		<description><![CDATA[We all know how important it is to have a website be able to communicate with the world. A good website just &#8216;does the job&#8217; &#8211; a great website exceeds all expectations and thus has a far better return! The million dollar question is however; what makes a great website? No, really &#8211; What makes [...]]]></description>
			<content:encoded><![CDATA[<p>We all know how important it is to have a website be able to communicate with the world. A good website just &#8216;does the job&#8217; &#8211; a great website exceeds all expectations and thus has a far better return! The million dollar question is however; what makes a great website?</p>
<h2>No, really &#8211; What makes a great website?</h2>
<p>That really is the million dollar question. Many people have tried to tie this down to mitigating factors &#8211; but at the end of the day, in my opinion &#8211; a great website is one which meets the following rules:</p>
<h2>Content</h2>
<h3><strong>Content is easy to find</strong></h3>
<p>It&#8217;s simple &#8211; if a user can&#8217;t find information they are looking for, they have no reason to be on your site. You need to make sure content is easy to find; and in a variety of ways. For example, on <a title="Cheb 2.0 Web Design Blog" href="http://www.cheb.com.au">Cheb 2.0</a>, you can search the site for any keyword which will return a list of matching articles/posts, or you can click on &#8216;<a title="Cheb 2.0 Web Design Blog Archives" href="http://www.cheb.com.au/archives/">Archives</a>&#8216; menu to show every article posted sorted by date. Further to that, there is a tag cloud to search by keyword or a direct link to each month with the number of posts that were published during that month.</p>
<p>You might be wondering why I have left that as a way to search for posts? Well, in essence it was a really easy decision. Not only does it just add another form of search &#8211; but there are times when monthly archives make sense. For example, if a website regular was to go on holidays for 2 weeks in one month and then come back to your website next month, all they want to see is what they missed out on &#8211; and this is where monthly-archiving achieves a sense of purpose.</p>
<p>Besides, my reporting/stats definitely show people are using it! 172 uniques can&#8217;t be wrong, right?</p>
<p>All in all, make sure you take every step you can possible to make sure the user experience is a good one; allowing them to find content easily will definitely help that endeavour.</p>
<h3><strong>Original and fresh content that brings people back</strong></h3>
<p>Cheb 2.0 has lots of <a title="Subscribe to the Cheb 2.0 RSS feed!" href="http://www.cheb.com.au/feed/">RSS subscribers</a>. I&#8217;m a huge advocate of RSS feeds! It means people can stay in touch with your website/blog/online endeavour and not have to worry about constantly reloading for new content. On the flip-side, it&#8217;s that new content that keeps people coming back. Whether or not they actually physically click on your site to see it, or read it through their RSS; they are still a visitor and they still have to be tracked!</p>
<p>Google itself considers the freshness of a link a <em>massive</em> importance when determining <a title="Search engine optimization (SEO) terms and glossary - Cheb 2.0" href="http://www.cheb.com.au/search-engine-optimization-seo-terms-glossary/">PageRank and relevance</a>. Make sure you set yourself a blogging/posting/editing schedule and follow it to the best of your ability! SEO-wise, make sure you keep your homepage fresh and beaming with new content &#8211; but importantly, do not neglect your inner pages as well.</p>
<p>When I say inner pages, I don&#8217;t mean to go back and worry about a blog post you did 10 months ago; we&#8217;re talking about your &#8216;About&#8217; page, or your &#8216;Services&#8217; page! Keeping those integral pages fresh makes sure: 1) they don&#8217;t fall into supplemental results, and 2) Google and other search engines show you some love for those pages too!</p>
<h2>Aesthetics/Look and feel</h2>
<h3><strong>The website is physically appealing to look at</strong></h3>
<p>Let&#8217;s face it &#8211; the only reason people still visit <a title="UseIt.com" href="http://www.useit.com">UseIt</a> &#8211; Jakob&#8217;s usability portal is because of his tremendous advise. No one is going there to admire his website design!</p>
<p>Unless you are an online giant who already has a user-base that will never deplete, i.e. Google, (who when you think about it has great website design because it&#8217;s <em><strong><a title="Fit For Purpose Testing - Wikipedia article" href="http://en.wikipedia.org/wiki/Fitness_For_Purpose_Testing">fit for purpose</a></strong></em>) &#8211; you really need to make sure you look into your website design. It doesn&#8217;t have to be glitzy and glow; just appealing to look at.</p>
<p>I mean you might have people looking at the screen whilst browsing your site or blog for more than 5 minutes on end (or you hope, anyway!). Do you want them to not come back because they found the site looked a little too 1998?</p>
<p>I&#8217;ve seen numerous websites my friends have set up with an amazing idea, or great content that have simply given way due to the in-assurances that come along with badly-designed websites.</p>
<h3><strong>Things are where the user expects them to be</strong></h3>
<p>This is an important one. If you can&#8217;t get your website to look &#8216;amazing&#8217; &#8211; meet the user half way and at least promote a sense of structure and conformity. You need to make sure you set out your page elements to be where the user expects to see them. Unless you are going for an &#8216;outlandish&#8217; theme or look which you are trying to get noticed for [i.e. Cheb 2.0] &#8211; make sure you take into consideration what I&#8217;m going to call the &#8217;6 section grid model for website layout&#8217;.</p>
<p><a rel="lightbox" href="http://www.cheb.com.au/wp-content/uploads/2008/04/6-section-model.gif"><img class="alignnone size-medium wp-image-127 alignright" style="float: right;" title="6-section-grid-model" src="http://www.cheb.com.au/wp-content/uploads/2008/04/6-section-model-300x293.gif" alt="6-section-grid-model" width="300" height="293" /></a></p>
<p>As you can see to the right [click to maximise], web users are now confortable with the following grid on many websites. Unless you are trying to break the Interweb apart [laughs] &#8211; make sure your logo is on the top-most left section of the website. Same goes for your site search (if any) and top-level navigation.</p>
<p>You might be thinking &#8211; but why doesn&#8217;t <a title="Cheb 2.0 Web Design Blog" href="http://www.cheb.com.au">Cheb 2.0</a> have navigation directly to the right of the logo? Obviously that&#8217;s not the point I&#8217;m trying to make. My navigation is easily recognisable, as well as still sticking to the top right section of the page. Please keep in mind these grids are only meant to be a <a title="10 reasons to justify a website redesign - Cheb 2.0" href="http://www.cheb.com.au/10-reasons-to-justify-a-website-redesign/">guide</a> and are not meant to be followed to the &#8216;tee&#8217;.</p>
<p>As long as content is easy to find, sections are split into bite-sized chunks of similarly-grouped information, and your content area is the most-prominent section of your layout, you should be good to go!</p>
<h3><strong>Consistency in colours and scheme</strong></h3>
<p>Make sure you try to keep everything consistent! Colours, headings, everything! Sometimes plugins, and other things like Google ads might not help you because they only allow you to change certain bits of detail. Don&#8217;t let that stop you from making sure everything that is in your power is consistent. There&#8217;s nothing worse than 43.5 different types of link styles. You don&#8217;t want one link to have an underline, one not!</p>
<p>Consistency above all means that users find it easier to connect to your website and also get more a feel for how everything works and what stands for what &#8211; e.g. links.</p>
<h2>User-centered</h2>
<h3><strong>Usability and accessibility is practiced</strong></h3>
<p>This one is important for many reasons. Check that you have taken adequate steps to enhance the usability and accessibility of your website. If you have forgotten the difference between accessibility and usability, check out &#8216;<a title="10 reasons to justify a website redesign" href="http://www.cheb.com.au/10-reasons-to-justify-a-website-redesign/">10 reasons to justify a website redesign</a>&#8216;. I will be blogging in more detail about accessibility more than anything else in a future post &#8211; but for now, a little teaser:</p>
<p>Make sure you check how your website, and more importantly, links &#8211; look to someone who suffers from varying degrees of colour blindness.</p>
<p><a rel="lightbox" href="http://www.cheb.com.au/wp-content/uploads/2008/04/cheb2-protanopia.jpg"><img class="alignnone size-thumbnail wp-image-129 alignleft" style="float: left;" title="cheb2-protanopia" src="http://www.cheb.com.au/wp-content/uploads/2008/04/cheb2-protanopia-150x150.jpg" alt="cheb2-protanopia" width="150" height="150" /></a></p>
<p>For example, the thumbnail on the left shows how Cheb 2.0 looks to someone suffering from Protanopia (Red-Green colour blindness).</p>
<p>You might think that checking things like that are &#8216;way too left-field&#8217; &#8211; but something as simple as this can be checked in 10 seconds and can mean the difference between someone with colour-blindness not being able to distinguish between your linked content and non-linked content! You still thinking it&#8217;s not worth it?</p>
<p>If there was anything I could do to give everyone equal chance of viewing my content/website or what I had to offer &#8211; then of course I&#8217;m going to do everything in my power to achieve that!</p>
<p>Look carefully at the link colour on &#8220;Continue reading Facebook launches chat toolbar. Now they&#8217;re talking!&#8221;. Notice how it&#8217;s already changed from the real, default colour that non-colour blind people should make out?</p>
<h3><strong>The user always has an opportunity to right their wrongs</strong></h3>
<p>Make sure there is always a way out for the user. A top navigation, side navigation, search and links back home are great players in this field. No matter how good your website is, there will always be users who get lost along the way. Depending on the type of site you are running, you might want to try the Hansel and Gretel tactics of &#8216;breadcrumbs&#8217;. Whatever you choose, make sure the user has ways to right any wrongs they create along the way getting them off-track!</p>
<h3><strong>Meaningful file names</strong></h3>
<p>This isn&#8217;t only great for SEO; it works wonders for the user experience. The address http://www.cheb.com.au/what-makes-a-great-website/ is a lot better than http://www.cheb.com.au/index.php?pageid=283&amp;level=2. I mean it&#8217;s not rocket science! Make your URL&#8217;s as easy to follow as possible. I should know what the link is about before I even click it! Cloaking or hiding information in strange URL&#8217;s kill the user experience and kill user-confidence in your website. Don&#8217;t do it!</p>
<h2>Site architecture</h2>
<h3><strong>Logical site structure</strong></h3>
<p>Make sure your website structure makes sense. Top-down, there should be a logical flow. The header should come first, followed by navigation (if not already part of your header section), followed by the content with any sidebars or side-navigation, and ultimately followed by the footer of the page.</p>
<p>Footers are just as important as headers. a good footer helps the user determine if the page has fully loaded. If the user doesn&#8217;t see what they are used to seeing at the base of your page, they should know that the page has not fully loaded yet; bet you didn&#8217;t think about that one!</p>
<h3><strong>Folksonomy and taxonomy</strong></h3>
<p>Tag your content as much as you can. Tagged content means related content. Try to relate articles wherever you can. It doesn&#8217;t have to be a &#8216;Related articles&#8217; or &#8216;related posts&#8217; section. It could be as easy as linking the user to <em>relevant</em> articles/web pages based on the current content of the page. Don&#8217;t just link-out for the fun of it &#8211; or to get more hits!</p>
<p>The way you classify and connect your information is just as important as the information itself! Keep that in mind when you are writing your next article or designing your upcoming website.</p>
<h2>Purpose</h2>
<p>At the end of the day, if there is no purpose to your website, then it won&#8217;t survive for long. Find a niche if you can and tackle it. if you are dealing with something that is &#8216;way beyond your marker&#8217; or something which is totally hard to place yourself in; whether it be &#8216;Web design&#8217; or &#8216;Get rich quick schemes&#8217;; the process is the same: find a reason to bring visitors back for me! Whether it is super-cool, fresh, relevant content, or a cool flash game that people just can&#8217;t get enough of!</p>
<p>Everything you create online should have an ultimate purpose to succeed!</p>
<h2>Tracking and reporting</h2>
<p>Finally, great websites learn from their mistakes! Use tools such as Google Analytics to help you determine popular and not-so-popular sections of your website. See if you can get down to the reason why &#8216;x&#8217; is not as popular as &#8216;y&#8217;.</p>
<p>Good webmasters compare pages that work and don&#8217;t work and will simply weed-out or unpublish something which just isn&#8217;t pulling in the visitors as it did before. <em>Great </em>webmasters/designers will isolate the page and find out WHY it is failing.</p>
<p>Did you recently put some plugins such as text-ads or any other plugins which may have affected that page? Is there even a way to reach that particular page from other prominent sections of your website?</p>
<p>Put it this way: articles which you may have written 12 months ago, may become tomorrow&#8217;s most popular article online! History <em>can</em> and does repeat itself. What was last year&#8217;s news may, for whatever reason become popular again. Do not unpublish articles or remove pages simply because &#8216;they are getting too old&#8217; or &#8216;you are running out of space&#8217;. Get more space!</p>
<p>There you go guys &#8211; another one bites the dust. Hopefully these articles/tutorials are hoping you achieve the best you can out of your website and online experience. Please digg/stumble this post if you enjoyed it and <a title="Cheb 2.0 RSS Feed - Keep Updated!" href="http://www.cheb.com.au/feed/">subscribe to my RSS feed</a> to keep updated.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cheb.com.au/what-makes-a-great-website/feed/</wfw:commentRss>
		<slash:comments>4406</slash:comments>
		</item>
		<item>
		<title>Photoshop tutorial: Creating a wicked cinema billboard scene</title>
		<link>http://www.cheb.com.au/photoshop-tutorial-cinema-billboard-scene/</link>
		<comments>http://www.cheb.com.au/photoshop-tutorial-cinema-billboard-scene/#comments</comments>
		<pubDate>Fri, 22 Feb 2008 14:29:01 +0000</pubDate>
		<dc:creator>Cheb</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.cheb.com.au/photoshop-tutorial-cinema-billboard-scene/</guid>
		<description><![CDATA[Today, we will be creating a wicked cinema/theatre billboard effect that you may have seen before &#8211; either in print advertising or online work.The effect incorporates many cool techniques such as creating a star-burst, working with multiple layers, positioning, and other awesome styling queues. Feel free to subscribe to our RSS feed to be alerted [...]]]></description>
			<content:encoded><![CDATA[<p>Today, we will be creating a wicked cinema/theatre billboard effect that you may have seen before &#8211; either in print advertising or online work.The effect incorporates many cool techniques such as creating a star-burst, working with multiple layers, positioning, and other awesome styling queues. Feel free to subscribe to our RSS feed to be alerted when we update the blog, and in particular, add more Photoshop and other tutorials.</p>
<p>To get this show on the road, this is what we are going to attempt to create today! Good Luck!</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/example.jpg" alt="example.jpg" /><br />
<span id="more-69"></span> <strong>Step 1</strong><br />
Start with a blank canvas, by going to &#8216;File&gt;New&#8217;, set size to 640&#215;800 pixels with white as background.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/1.jpg" alt="1.jpg" /></p>
<p><strong>Step 2</strong><br />
Create a new layer called &#8216;Gradient&#8217;  &#8211; &#8216;Layer&gt;New&gt; Layer&#8217; (Shift+Ctrl+N). Set your foreground colour to: #ebb82d (hex) and background colour to: #8e410e. Create a linear gradient(G) from the top to the bottom of the canvas. If you did it right, it should be looking something like this.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/2.jpg" alt="2.jpg" /></p>
<p>Not much yet &#8211; I know.. There&#8217;s a method to my madness &#8211; kick on!</p>
<p><strong>Step 3</strong><br />
Create a new layer, and call it &#8216;Footer black&#8217;. Change the foreground colour to #373737, grab the rectangle tool (U) and draw a rectangle, the width of the canvas in about the bottom 20% of the size of the canvas. After you have achieved this, create another layer, change foreground colour again to #b13333; this time calling it &#8216;Footer red&#8217;, and again, draw a rectangle across the canvas where the black rectangle ends. Make it about 50 pixels high. If you did it right, it should look like below, so far.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/3.jpg" alt="3.jpg" /></p>
<p><strong>Step 4</strong><br />
Okay, so far so good. Type U on your keyboard to make the Custom Shape Tool active. If you click down on this icon, or right click, you will get an option called &#8216;Custom Shape Tool&#8217;. Select this! When you do, the top navigation will change to show the following:</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/41.jpg" alt="41.jpg" /></p>
<p>If you click on the highlighted section you will be shown a list of shapes you can use to spice up your projects. Select the &#8216;Registration Target 2&#8242; shape. The shape you need is highlighted below as well as how to activate all shapes, if you can&#8217;t see it the first time.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/42.jpg" alt="42.jpg" /></p>
<p><strong>Step 5</strong><br />
With this shape now selected, create a new layer and call it &#8216;Starburst&#8217;. You should be on that layer at this stage &#8211; drag it so it is positioned <em>under</em> the black and red footer layers. You can also use &#8216;Ctrl+[' to drop layers down, and 'Ctrl+]&#8216; to push layers up above other layers. Okay, let&#8217;s kick on and draw a shape on the &#8216;Starburst&#8217; layer, which should still currently selected. Change your foreground colour to white, or #ffffff. Start drawing the shape &#8211; making sure to make the shape bigger than the canvas &#8211; zooming out of the canvas to see; if you have to. You can hold down &#8216;shift&#8217; whilst drawing the shape, to get a perfect circle! Make sure it covers the full area of the orange gradient &#8211; like mine, below. When you are done with the shape, set the opacity of the layer, thus, the shape, to 20%. This will create a neat see-through effect. If you can&#8217;t find opacity, try clicking on &#8216;Window&gt;Layers&#8217;.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/5.png" alt="5.png" /></p>
<p>You don&#8217;t have to make it exactly center-perfect &#8211; it makes it a nice effect if it&#8217;s not actually 100% in the center of the canvas. Notice how the red and black footer layers don&#8217;t effected because we moved them &#8216;on top&#8217; of the star burst layer?</p>
<p><strong>Step 6</strong><br />
Okay, create a new layer and call it &#8216;Billboard frame&#8217;, making sure it is the top-most layer, using shortcuts shown above. Set foreground colour to white, if you have to, set opacity to 100% before you kick on, and create a rotated rectangle as in the screen grab below. Firstly create a shape, and click &#8216;Control+T&#8217; on your keyboard to transform the shape. If you move your mouse to the corner of the shape, your mouse cursor will change to a &#8216;rotate&#8217; shape. Clicking down and moving your mouse will let you rotate the shape. When the shape has been set and rotated, click on &#8216;Layer&gt;Layer Style&gt;Blending Options&#8217; and copy the settings from below.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/6.png" alt="6.png" /></p>
<p>The settings for the &#8216;Gradient&#8217; colours in Fill Type above, with basic setting directions are shown for your convenience below.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/61.png" alt="61.png" /></p>
<p><strong>Step 7</strong><br />
Okay, moving on. Create a new layer called &#8216;Lights&#8217;, making sure its the top-most layer, once more. Set the foreground colour to #ff6600, click the brush tool (B) and then right click on the canvas to get brush settings. Use the following settings: Master Diameter: 45px, Hardness: 0%. Place your mouse cursor in the middle of the black portion of the newly-created billboard and paint. It should look something like this.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/7.jpg" alt="7.jpg" /></p>
<p>Okay, still on the same layer, change the foreground colour to: #ffffcc, change the brush settings by right-clicking the canvas again, and change to the following settings: Master Diameter: 20px and Hardness: 85%. FYI; the greater the hardness is, the less blur-out there is (i.e. shape is &#8216;fuller&#8217; with colour). Okay, this might sound hard, but simply align your cursor in the middle of the orange brush splatter you just made above and paint (click once). You should now have something cool like this:</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/7a.jpg" alt="7a.jpg" /></p>
<p>Yay! it&#8217;s starting to look like a light-on <img src='http://www.cheb.com.au/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> . Let&#8217;s press Control+J to duplicate/clone the light layer (which should now be the two brushes on top of each other (as above). Do this a few times, and lay the lights out around the black border. When you are done, you should have something like below.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/7done.jpg" alt="7done.jpg" /></p>
<p><strong>Step 8</strong><br />
Wicked ayh! Okay, grab the line tool, pressing &#8216;U&#8217; on your keyboard will select the Shape Tool, and right clicking on the icon, or clicking and selecting it will let you change to the &#8216;Line Tool&#8217;. Change the foreground colour to #ffffcc and draw lines from left to right of the white section; just like lined paper, all the width of the white. In an upcoming tutorial, I will show you how to make this an easy process using custom patterns.</p>
<p>Does it look like this? If it does, you are still on track!</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/8.jpg" alt="8.jpg" /></p>
<p><strong>Step 9</strong><br />
Okay, we got the lines, let&#8217;s get some text up on our billboard. This really is up to you to make it creative. What I recommend is using Arial bold and playing around with tracking (in the character panel) to portray spacing. Here is my creation.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/9.jpg" alt="9.jpg" /></p>
<p><strong>Step 10<br />
</strong> Alright, this has been a fairly detailed tutorial &#8211; hope we didn&#8217;t lose anyone! Let&#8217;s start wrapping up &#8211; if you need any help, have any questions or whatever, please don&#8217;t hesitate to comment and we&#8217;ll get onto it! Okay, what&#8217;s left to do is type some text on the red and black footers, maybe put your logo on the black section to re-enforce the &#8216;branding&#8217;. After you have done that, you can stop, sit back and admire your work! This is an example of what you could have at this stage.</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/done.jpg" alt="done.jpg" /></p>
<p>Awesome ayh? Simple, cool effect you can use on your next website or &#8216;ad&#8217; <img src='http://www.cheb.com.au/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>If you really want to get techy; applying some custom-vector shapes to the mix and some lighting effects, (Filter&gt;Render&gt;Lighting Effects), you can easily come up with something like this:</p>
<p><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/donecool.jpg" alt="donecool.jpg" /></p>
<p>Obviously, you wouldn&#8217;t want your logo and the &#8216;call&#8217;, etc to be hidden in the light, but for this tutorial, it&#8217;s just some ideas on what you can do to spice it up! Looks pro, ye?</p>
<p>Well, there you have it boys and girls &#8211; I hope you have enjoyed the tutorial and/or it has helped to show you some of Photoshop&#8217;s hidden jems that just make a project look awesome. As you can see, the steps themselves weren&#8217;t hard &#8211; most of the time, it is the conviction of how everything comes together that creates the &#8216;wow&#8217; effect.</p>
<p>Feel free to share your creations on the <a title="Cheb 2.0 Flickr Group" href="http://www.flickr.com/groups/cheb2/" target="_blank">Cheb 2.0 Flickr group</a>, <a title="Cheb 2.0 RSS Feed - Subscribe for updates!" href="http://www.cheb.com.au/feed/">subscribe to our RSS feed</a> for updates on when we post now content/tutorials, and digg/bookmark this tutorial if you enjoyed it.</p>
<p>Till next time,</p>
<p>Cheb.</p>
<p><script type="text/javascript"><!--
 digg_url = \\\\'http://www.cheb.com.au/photoshop-tutorial-cinema-billboard-scene\\\\';
// --></script><br />
<script src="http://digg.com/api/diggthis.js"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cheb.com.au/photoshop-tutorial-cinema-billboard-scene/feed/</wfw:commentRss>
		<slash:comments>3252</slash:comments>
		</item>
		<item>
		<title>Cloverfield text effect photoshop tutorial</title>
		<link>http://www.cheb.com.au/cloverfield-text-effect-photoshop-tutorial/</link>
		<comments>http://www.cheb.com.au/cloverfield-text-effect-photoshop-tutorial/#comments</comments>
		<pubDate>Fri, 18 Jan 2008 23:14:24 +0000</pubDate>
		<dc:creator>Cheb</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.cheb.com.au/cloverfield-text-effect-photoshop-tutorial/</guid>
		<description><![CDATA[Hey guys, I just watched Cloverfield and thought it was a great, action-packed movie. I also noticed the cool text effect that the creators decided to go with to represent the movie. So obviously I decided to play around in Photoshop and see if I can come up with something close to it, and figured [...]]]></description>
			<content:encoded><![CDATA[<h3>Hey guys, I just watched <a href="http://www.cloverfieldmovie.com/" title="Cloverfield movie link Cheb 2.0 Web Design Blog" target="_blank">Cloverfield</a> and thought it was a great, action-packed movie. I also noticed the cool text effect that the creators decided to go with to represent the movie. So obviously I decided to play around in Photoshop and see if I can come up with something close to it, and figured I might as well share it with you guys.</h3>
<p><a href="http://www.cheb.com.au/wp-content/uploads/2008/02/cloverfield-chebcomau.jpg" title="cloverfield" rel="lightbox"><img src="http://www.cheb.com.au/wp-content/uploads/2008/02/cloverfield-chebcomau.thumbnail.jpg" alt="cloverfield" align="left" hspace="5" vspace="5" /></a>For those of you that aren&#8217;t sure what I am talking about, to the left is an example of what we are going to be creating (just the text effect, obviously) [click to expand].<br />
<br />Not bad ayh? Okay, let&#8217;s get going. For your convenience, this is a video tutorial, which will hopefully make it easier for you guys to follow along, as well as rewind/fast-forward if you need to.<br />
PS: My Photoshop decided to play up on me during the taping of the tutorial, so expect a little stuff-ups. It might have had something to do with the fact that I had my desktop and Photoshop open for over a week without a reset!<br />
Okay, let&#8217;s do this. Please keep in mind that this is just a basic introduction to how to make the effect, and there are other ways it can be done. More importantly, the bigger the canvas, the more tracking you can set on the font, the better the effect will be!</p>
<p>
<center><embed src="http://www.youtube.com/v/wrcZ6Aj4d_c&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6&amp;border=1" type="application/x-shockwave-flash" wmode="transparent" height="373" width="425"></embed><center></p>
<p>The font used it called AFKLampenborg and is available to download <a href="http://www.cheb.com.au/wp-content/uploads/2008/01/AFKLampenborg.ttf" title="Download Cloverfield font here...">here.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.cheb.com.au/cloverfield-text-effect-photoshop-tutorial/feed/</wfw:commentRss>
		<slash:comments>5219</slash:comments>
		</item>
	</channel>
</rss>

