tag:blogger.com,1999:blog-87624573240916630712024-03-12T20:38:04.281-07:00Tutorial WorldThe ultimate collection of webmaster Tutorial,Css,Html,ajax and javascript etcABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.comBlogger74125tag:blogger.com,1999:blog-8762457324091663071.post-1918794055735057952010-04-19T00:24:00.000-07:002010-04-19T00:24:48.728-07:005 STARS PREMIUM THEME BLOGGER TEMPLATE<div style="text-align: center;"><span class="Apple-style-span" style="color: #444444; font-family: trebuchet, arial, verdana, sans-serif; font-size: 12px;"></span></div><h3 style="color: #444444; font-size: 14px; font-weight: bold; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 5px;"><strong style="color: #222222; display: block; font-size: 21px; font-weight: bold; text-decoration: underline;">Are You looking for free professional and premium blogger template ?</strong></h3> <strong>Than absolutely you came to the right place !</strong><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://lh3.ggpht.com/_9b1traaMESE/Spl5xW2UYCI/AAAAAAAAAz4/kmj4AOc9Qxs/PROFESSIONAL%20BLOGGER%20TEMPLATE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://lh3.ggpht.com/_9b1traaMESE/Spl5xW2UYCI/AAAAAAAAAz4/kmj4AOc9Qxs/PROFESSIONAL%20BLOGGER%20TEMPLATE.png" width="324" /></a></div><br />
<span style="font-size: x-large;"><strong><a href="http://5-stars-theme.blogspot.com/" style="color: #ff5500; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><span style="color: red;">DEMO</span></a><span style="color: red;"> | </span></strong><a href="http://www.box.net/shared/zphdr0fxd4" style="color: #ff5500; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank"><strong><span style="color: red;">DOWNLOAD</span></strong></a></span><br />
<h3 style="color: #444444; font-size: 14px; font-weight: bold; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 5px;"><strong style="color: #222222; display: block; font-size: 21px; font-weight: bold; text-decoration: underline;">PREMIUM AND HIGH QUALITY BLOGGER TEMPLATE !</strong></h3>NOT EASY TO GET EVERYWHERE … THAT IS WHY I HAVE CREATED THE<br />
<h3 style="color: #444444; font-size: 14px; font-weight: bold; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 5px;">5 STARS PREMIUM THEME CONTAINED THE FOLLOWING FUNCTIONS :</h3><ol style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px;"><li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>PROFESSIONAL LOOKING BLOGGER TEMPLATE</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>FULLY WIDGETS</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>ADSENSE ADS OPTIMIZED TOP </strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>ADSENSE ADS OPTIMIZED BELOW POST </strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>HIGH QUALITY GRAPGHIC PICKED</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>AUTO READ MORE FUNCTION</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>RELATED POST WIDGET</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>THREE COLUMNS UPPER SECTION</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>THREE COLUMNS BOTTOM SECTION</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>RSS FEEDS COSTUMIZED WIDGET</strong></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 1px; text-align: left;"><strong>SEARCH BAR</strong></li>
</ol><strong><span style="font-size: x-large;">INSTALLATION :</span></strong><br />
<strong>FOR THE LOGO JUST SEARCH FOR THE FOLLOWING CODE :</strong><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(238, 238, 238); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; color: #993300; margin-bottom: 1em; margin-left: 20px; margin-right: 20px; margin-top: 1em; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; padding-top: 3px;"><div style="font-size: 11px; line-height: 15px; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0.75em; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">.logo {<br />
background : transparent url(http://lh3.ggpht.com/_9b1traaMESE/Spfnvvf9feI/AAAAAAAAAzo/CvLAvzrjGso/PROFESSIONAL%20LOGO.png) no-repeat scroll 0 0;<br />
display : block;<br />
float : left;<br />
width : 400px;<br />
padding : 10px 0 0 25px;<br />
height : 80px;<br />
overflow : hidden;<br />
text-indent : -9999em;<br />
}</div></blockquote>AND <strong>REPLACE </strong>THE IMG LINK <strong>WITH YOURS</strong> ! AND IF YOU WANT AND USE <strong>ONLY TEXT</strong> !<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(238, 238, 238); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; color: #993300; margin-bottom: 1em; margin-left: 20px; margin-right: 20px; margin-top: 1em; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; padding-top: 3px;"><div style="font-size: 11px; line-height: 15px; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0.75em; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">background : transparent url(http://lh3.ggpht.com/_9b1traaMESE/Spfnvvf9feI/AAAAAAAAAzo/CvLAvzrjGso/PROFESSIONAL%20LOGO.png) no-repeat scroll 0 0;</div><div style="font-size: 11px; line-height: 15px; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0.75em; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">text-indent : -9999em;</div></blockquote><b><br />
</b>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-78690200395033650712010-02-27T05:49:00.000-08:002010-02-27T05:49:45.526-08:00Learn Designing of 3D Glass Icon Using Photoshop<span class="Apple-style-span" style="color: #333333; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px;"></span><br />
<div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/internet-icon-lead" rel="attachment wp-att-1246" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="internet icon lead Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1246" height="216" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/internet-icon-lead.jpg" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="internet-icon-lead" width="498" /></a>Learn How To Design a translucent 3D<span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;"> Frosted Glass</span></span> Box based on the Safari Icon in Adobe</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Photoshop.</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span id="more-1238" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"></span>Step 1: Setting Up</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;">Make a new document with these settings:</span></span><br />
Setting Up</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/01-3d-glass-setting" rel="attachment wp-att-1240" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="01 3D Glass Setting Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1240" height="281" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/01-3D-Glass-Setting.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="01 3D Glass Setting" width="496" /></a></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Next, select the fill tool (G) and fill it with #626262. Now, we need to make a new<span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;"> adjustment layer</span></span>. Make a brightness/contrast layer (Layer > New Adjustment Layer > Brightness/Contrast). Put it on these parameters.<br />
Adjustment Layer Parameters</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/01-3d-glass-adjustmentlayer" rel="attachment wp-att-1239" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="01 3D Glass adjustmentlayer Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1239" height="441" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/01-3D-Glass-adjustmentlayer.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="01 3D Glass adjustmentlayer" width="310" /></a>We add this adjustment layer so as everything looks better in the later stages.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 2: Making the Circle</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Select the circular marquee tool and use these settings:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/02-3d-glass-circularmarqueetool1" rel="attachment wp-att-1247" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="02 3D Glass circularmarqueetool1 Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1247" height="35" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/02-3D-Glass-circularmarqueetool1.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02 3D Glass circularmarqueetool1" width="344" /></a>Make a selection and fill it with #649ad2. Then, grab a soft eraser, on a low <span class="IL_AD" id="IL_AD5" style="background-attachment: scroll !important; background-clip: initial !important; background-color: transparent !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(51, 51, 153) !important; border-bottom-style: solid !important; border-bottom-width: 1px !important; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: rgb(51, 51, 153) !important; cursor: pointer !important; display: inline !important; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif !important; font-size: 12px !important; font-style: normal !important; font-weight: normal !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 1px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: static; text-decoration: underline !important; vertical-align: baseline;">opacity</span>, and erase some areas like this:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/02-3d-glass-stage1" rel="attachment wp-att-1245" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="02 3D Glass stage1 Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1245" height="499" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/02-3D-Glass-stage1.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02 3D Glass stage1" width="499" /></a>This is so that it looks more 3D, and later on, it’ll add a nice transparent feel to our icon.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">When you’re happy, and you have a similar result to the one above, add these Layer FX to it, to make it look better.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/02-3d-glass-circlefx" rel="attachment wp-att-1242" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="02 3D Glass circleFX Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1242" height="1140" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/02-3D-Glass-circleFX.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02 3D Glass circleFX" width="499" /></a>You should now have something resembling this:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/02-3d-glass-circle2" rel="attachment wp-att-1241" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="02 3D Glass circle2 Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1241" height="380" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/02-3D-Glass-circle2.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02 3D Glass circle2" width="498" /></a>Step 3: Making the Circle 3D</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">In this step, we’re going to make <span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;">the circle</span></span> look 3D. The theory of this is simple. You think about where the light is coming from, then add shadows and highlights to fit your <span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;">light source </span></span>if you keep this consistent, then you’ll have a much better final result. Below is some light theory that should make it easier for you.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/03-3d-glass-lighting" rel="attachment wp-att-1249" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="03 3D Glass lighting Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1249" height="498" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/03-3D-Glass-lighting.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03 3D Glass lighting" width="498" /></a>Lighting</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Although this is not the best of diagrams, it shows basic lighting. If you stick to this, and have a constantlight source, your piece will turn out far more striking and realistic.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">OK, grab your circular marquee tool, set it to 10px Feather and make it 200px by 200px. There are many different ways of getting highlights/gloss and shadows. My favourite, and I think one of the best ways to get gloss is like this.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Change the layer mode to multiply</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/03-3d-glass-multiply" rel="attachment wp-att-1250" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="03 3D Glass multiply Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1250" height="395" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/03-3D-Glass-multiply.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03 3D Glass multiply" width="127" /></a>And then, with white as your foreground colour, add this Layer FX</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/03-3d-glass-multiplyfx" rel="attachment wp-att-1251" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="03 3D Glass multiplyfx Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1251" height="380" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/03-3D-Glass-multiplyfx.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03 3D Glass multiplyfx" width="499" /></a>Vary</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">You can vary this. When making your highlights, you can vary the opacity, or colour of the gradient you use. You can also vary the layer mode. Try changing some settings now, and see what happens!</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Shadows are much easier to make, and in a way, more powerful. You can have more highlights than shadows, because shadows are more obvious. For a shadow, simply make a circle, you can vary this and the feather px. Then, you can set it to<span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;"> soft light,</span></span> overlay or of course, normal, it really comes down to which one you like best.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">With the shadows, you can make them very discreet, yet they still play a very important part in the eventual outcome of the icon. Highlights are less noticeable, so you can add more of them, but with shadows, they play a bigger part; and have more of an impact.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">The worst thing you can do when shadowing is zoom in too far. When you do that, you can’t see the whole image, and so you can’t really tell if it looks right. Make sure that when shadowing, you can see the whole image, and you’re thinking about what you’re doing!</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">By now, you should have a well highlighted and shadowed 3D sphere, resembling this. Don’t worry if it looks a little strange at this point, it’ll all come together later on.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/03-3d-glass-highlightsshadows" rel="attachment wp-att-1248" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="03 3D Glass highlightsshadows Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1248" height="380" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/03-3D-Glass-highlightsshadows.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03 3D Glass highlightsshadows" width="498" /></a><strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 4: Adding Detail</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now, that looks OK. I added some highlights on the right that add a lot; I used the highlight technique described above. In this step, we are going to make those really nice 3D looking lines. The way to do this is simple, which we’ll find out in a bit.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Select your pen tool and get a brush size of 3px wide. You want to use these settings for the pen tool.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/04-3d-glass-pentollsettings" rel="attachment wp-att-1253" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="04 3D Glass pentollsettings Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1253" height="30" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/04-3D-Glass-pentollsettings.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04 3D Glass pentollsettings" width="516" /></a>Next, we want to start drawing paths like this:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/04-3d-glass-paths" rel="attachment wp-att-1252" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="04 3D Glass paths Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1252" height="1137" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/04-3D-Glass-paths.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04 3D Glass paths" width="498" /></a>Set your brush size to around 3 – 5pxNow, for PC users, press right click > stroke path, for Mac users;<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">CTRL + click ></strong> stroke path. When you stroke paths, there are two types of stroke paths. With simulated pressures and without simulated pressures. Here is an example of both.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/04-3d-glass-simulated" rel="attachment wp-att-1255" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="04 3D Glass simulated Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1255" height="486" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/04-3D-Glass-simulated.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04 3D Glass simulated" width="486" /></a>If it doesn’t work, you may need to reset your brushes here’s how to do that:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/04-3d-glass-reset" rel="attachment wp-att-1254" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="04 3D Glass reset Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1254" height="281" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/04-3D-Glass-reset.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04 3D Glass reset" width="350" /></a>In the next step, we’ll work out how to make these lines aid the 3D look.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 5: Detailing the Detail</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">You probably have some white lines now, looking 3D, but not merging into the icon. Set the layers tosoft light or overlay, you can also lower the opacity and/or the fill of the lines. You can also get a soft eraser to erase some areas to make it look more 3D.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">If you look carefully, you will also see not only the very distinct circles, which I’ll tell you how to do later; but also the very faint ones. To make both of them, grab the circular marquee tool with these parameters:</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/05-3d-glass-featherorbs" rel="attachment wp-att-1257" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="05 3D Glass featherorbs Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1257" height="34" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/05-3D-Glass-featherorbs.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="05 3D Glass featherorbs" width="509" /></a>You can then edit the layer styles. For mine, I simply set the opacity to 50%. But you could set it to soft light or overlay.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">For the faint ones, but it below every ‘line’ layer, and set it to soft light or overlay and lower the opacity.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">In the next step, we’ll make 3D paths, that really add to the image.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 6: 3D Paths</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">This is a really short step, but it adds a lot.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Firstly, get your pen tool open, and then follow these steps.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/06-3d-glass-circlepaths" rel="attachment wp-att-1258" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="06 3D Glass circlepaths Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1258" height="1248" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/06-3D-Glass-circlepaths.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="06 3D Glass circlepaths" width="499" /></a>Experiment</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Try out different paths and set some layers to soft light or overlay and lower the opacity.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 7: Making the Basic Box</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">If you want to have something to trace around, you can do so around here. But of course, if you want to make your own, go for it! When you’re tracing, use the pen tool, and make each side on a new layer. Then, fill the paths with white (#ffffff). Then add these layer FX to every side.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">On the ‘front’ sides, set the fill to 15% and the ‘back’ sides to 10%. This’ll get it looking transparent.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/07-3d-glass-box1" rel="attachment wp-att-1259" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="07 3D Glass box1 Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1259" height="491" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/07-3D-Glass-box1.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="07 3D Glass box1" width="496" /></a><strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 8: Highlighting the Box</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Remember that highlight technique earlier? Well, use that technique on paths like this. Make a new layerabove each box ’side’ and then make a path accordingly. To make ’swirly’ paths, make two points, then; click in the middle of the path and drag it up/down left/right and it’ll make a nice path. Have a look at this example.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/08-3d-glass-swirlypath" rel="attachment wp-att-1260" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="08 3D Glass swirlypath Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1260" height="495" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/08-3D-Glass-swirlypath.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="08 3D Glass swirlypath" width="500" /></a>Then, select the right ’side’ layer and press CTRL + SHIFT + I or for Mac users CMND + SHIFT + I, then press delete. In the next step we will look at adding more detail into the box.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 9: Adding Details to the Box</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">In this step, there’s not going to be much writing, more annotated pictures. I am using the techniques for stroking paths, highlights and shadows that we looked at earlier to make the box, and anything you seen in these pictures.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/09-3d-glass-3dbox" rel="attachment wp-att-1261" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="09 3D Glass 3DBox Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1261" height="4483" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/09-3D-Glass-3DBox.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="09 3D Glass 3DBox" width="498" /></a>Making Softer Shadows</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">If you want to make those soft shadows, get a soft brush (airbrush) around the size of 9-12px, stroke the paths and then lower the opacitysoft light.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 10: Making Everything Glow</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">That looks good, but… Not full of that striking glow. To get something to glow, it’s really easy. Simply get an airbrush, 100-300px and just paint on white. For background highlights, make new layers at the bottom and highlight there. For more centralised ones, do it on top, and maybe in a smaller brush.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">To get a better glow-type look, adding lots of layers on 5-10% opacity will look much better than two or three on 40%. You can also add blue highlights to give it more of a glow.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/10-3d-glass-3dboxglow" rel="attachment wp-att-1262" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="10 3D Glass 3DBoxGlow Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1262" height="4660" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/10-3D-Glass-3DBoxGlow.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="10 3D Glass 3DBoxGlow" width="490" /></a><strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 11: Finishing Details</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">The icon looks good, but it’d be nice to add a bit more shadow. Make a new layer at the top (behind your contrast one) and fill it with black (#000000) and set the fill to 0%. Then add these layer styles and you<span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;"> have a nice</span></span> shadowed look.</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://www.buildtutorial.com/learn-designing-of-3d-glass-icon-using-photoshop.html/11-3d-glass-shadow" rel="attachment wp-att-1256" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0088cc; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="11 3D Glass shadow Learn Designing of 3D Glass Icon Using Photoshop" class="aligncenter size-full wp-image-1256" height="763" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/11-3D-Glass-shadow.png" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-color: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; border-width: initial; display: block; font-size: 12px; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="11 3D Glass shadow" width="500" /></a>And you’ll have a nice shadowed look to your image.<br />
<strong style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Conclusion</strong></div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">In this tutorial, we’ve learnt about strokes, layering, shadowing, highlighting, layer FX, layer modes,opacity and fill. Put together you can make so many amazing things in Photoshop, so good luck; and make sure you check Tutorial9 frequently for tutorials!</div><div style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">I hope you enjoyed creating your own internet icon!</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-41982160544975087042010-02-20T12:15:00.000-08:002010-02-20T12:15:36.431-08:00HDR - High Dynamic Range Photography. Merging HDR in Photoshop CS3-CS4 Tutorial<span class="Apple-style-span" style="color: #566047; font-family: Tahoma, Arial, Helvetica, sans-serif;"></span><br />
<h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">0 (Intro)</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">In this tutorial we will take a look at HDR photography. HDRI (High Dynamic Range Imaging) was originally used in 3D and is now in full force in photography. Basically it's the process of taking multiple exposures and merging them together into a single 32 bit image. Let me explain: A camera is capable of capturing a limited amount of tones in a single photo. Typically we sacrifice elements in a photo when we press the shutter. For example there is a powerful cloudscape and some cliffs. If we expose for the clouds the cliffs become dark. If we set the camera's exposure to capture detail in the cliffs, the brighter sky is blown out and detail is lost. This is because the human eye can see a larger range of tones than the camera can capture on the chip or film in a single photograph.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The solution is to take more than one photograph and bracket the photos. Shoot normal exposure, then under-expose a shot to capture highlights and over-expose a shot to capture shadow detail. Finally, merge these photos together to produce a single image with a larger range of tones that can now show all the details in the shadows and highlights. This tutorial will show you how to complete this process with the minimum fuss.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">First we need to get our source images. (You could begin with a 32 bit 3D image and then skip to step 6). Typically we will capture these with our camera. You will need to shoot a minimum of 2 photos with different exposure settings.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Its been recommended by Adobe to limit the bracketing by 1 stop and this will help reduce banding. You may also take 5 or more shots with a smaller gap in the bracketing. I personally get good results from 3 shots. I like to over expose and under expose by 2 stops. I know this is a bigger bracket than most people are comfortable with, but for the type of HDR images I like to create (cityscapes), this works great. If your shooting people, you may want to reduce this to even 3rd stops.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" />(Note: You can't use a single raw image and exposure it several times as some people suggest, for a true HDR photo. This is known as pseudo-HDR. Photoshop will not allow you to merge these because there isn't sufficient tone detail captured).</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">For more details see the new video<a href="http://www.photoshopcafe.com/video/HDR.htm" style="color: #000066; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> HDR and Photoshop</a></div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">1</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Start with 3 images. One normal exposure, the second underexposed and the third overexposed. In this case I used 2 stop bracketing. As I shoot a lot of city scapes I can get away with 2 stops, because I'm mainly shooting flat surfaces and banding and posterization isn't such a problem. If your shooting rounded and curved surfaces you will want to lower your bracketing to get smoother gradients.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">I set the bracketing on my camera to 2 stops. Then I set the shooting mode to burst. When I hold the shutter down, 3 photos will be captured. I shoot in RAW mode for the widest possible dynamic range. You can still create HDR if your camera doesn't support RAW. Make sure you shoot in Aperture Priority or in Manual. You want to bracket the exposure time, not the Aperture. If you change the aperture, the depth of field won't be consistent and you'll get blurring. Also avoid any moving subjects in the photo or you'll get ghosting.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="361" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR01.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="683" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">2</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Time to merge the photos together into a single 32 bit image.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Choose File>Automate >Merge to HDR. This works on Photoshop CS2 and CS3. (CS2 Doesn't have auto align). Choose either images or folder. I organize each set of photos in its own folder so I used the folder option. Select your photos to merge. Turn on Auto Align in Photoshop CS3. Click OK. (Photoshop CS3 uses new Auto-align technology that even allows you to create HDR without the use of a tripod!)</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="370" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR02.gif" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="544" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">3</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Your images will now be merged into a single photo. You can turn off individual photos by un checking their boxes on the left filmstrip. If you get some blurring caused by camera shake in the longest exposure, you may want to turn off that photo.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="366" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR03.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="431" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">4</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">The merged result is a floating-point 32 bit image. You can adjust the overall tones by sliding the White Point slider. Easy with it, a little movement goes a long way!<img alt="" height="367" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR04.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="431" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">5</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Click OK to merge the photos into a 32 bit image. Now is a good time to save your file.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="294" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR05.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="193" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">6</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">In order to use the photos, you'll need to convert them t 16 or 8 bit images. When we convert them we will create what I call interpretations of the photo. The reason I say this is because we have unlimited ways we can make the photo look. While we have this huge dynamic range available in 32 bit, we will no longer have those options after conversion. Always work from the saved 32 bit version, and then convert and save versions (personal interpretations). Avoid overwriting the 32 bit image, it's our master and we may want to go back to it many times.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Choose Image>Mode>16 bit (or 8 bit). Now we get to play with some fun options. You're now at the tone mapping part of the process. This is were all the creativity can ooze.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">(If you want to make the adjustments without converting, choose view>32 Bit Preview Options. You can use several of Photoshop's tools in the Image>Adjustments menu. The most important of these is the Exposure control)</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">You'll see an HDR Conversion Dialog box. Exposure and Gamma is the default option. Best way to approach this? Set the gamma first, then adjust the exposure to suit. If you want an image with lots of contrast, lower the gamma. For less contrast raise the gamma. Finally, adjust the exposure to get the desired brightness. If you want more control, read on... otherwise press OK to convert.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="428" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR06.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="650" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">7</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Change the Method to Local Adaption. (There are 4 available methods, but these are the only 2 with user input).</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">With local Adaption, you can adjust the curves. Set these like you would normally work in curves, but don't be afraid to clip the histogram a little. You can clip because your working with a larger dynamic range than you're used to. Bring out the detail in the image, but don't forget to put some shadow in there or it will look washed out and fake. Once your happy with the curve, adjust the radius and Threshold sliders to make sure there are no halos in the photo. (Badly converted HDR images have a glow around the areas of contrast.) The radius controls the mask blur while the threshold decides what gets blurred and what doesn't.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Click ok to convert.<img alt="" height="430" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR07.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="642" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">8</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Here we have a merged image from HDR. The second image is a variation. In the second variation, I applied exposure, curves and sharpening settings while in 32-bit mode (Highlight Compression Method). Photoshop is great for producing very realistic HDR images.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="546" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR08.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="363" /><img alt="" height="546" src="http://www.photoshopcafe.com/tutorials/HDR_ps/alt.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="363" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">9</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">If your desiring a more surreal result there are different plug-ins that you can use. My favorite is Photomatix pro from <a href="http://www.hdrsoft.com/" style="color: #000066; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" target="new">HDRsoft.</a> You can just get the tone mapping plug in for Photoshop which works great. Use the coupon code photoshopcafe to save 15%.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Using photomatix tone mapping plugin allows you to get highly detailed textures in your photographs. You merge in Photoshop as shown in this tutorial. Then choose Filter>Photomatix to apply tone mapping. Convert and save as normal.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="505" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR09.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="568" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">10</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">This image shows an image after tone mapping using Photomatix pro.<img alt="" height="614" src="http://www.photoshopcafe.com/tutorials/HDR_ps/HDR10.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="408" /></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">11</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Here you can see comparisons between a single image, subtle Photoshop HDR and a radical Photomatix effect (<a href="http://www.photoshopcafe.com/tutorials/HDR_ps/comparrison-full.jpg" style="color: #000066; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Click for larger image</a>). Whatever result your after, hopefully this tutorial has helped demystify the HDR process.<a href="http://www.photoshopcafe.com/tutorials/HDR_ps/comparrison-full.jpg" style="color: #000066; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="421" src="http://www.photoshopcafe.com/tutorials/HDR_ps/compare.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="800" /></a></div><h3 style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.photoshopcafe.com/tutorials/css/step.gif); background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(125, 137, 101); border-bottom-style: solid; border-bottom-width: 1px; clear: both; font-family: Arial, Helvetica, sans-serif; height: 28px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 2px; text-indent: 65px;">12</h3><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="" height="477" src="http://www.photoshopcafe.com/tutorials/HDR_ps/rodgersbw.jpg" style="float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;" width="700" />Here is another HDR shot of mine. This is a night scene converted to grayscale.</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">I hope you enjoyed this tutorial!</div><div style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.7em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Colin</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-4538330593453058282010-02-12T23:36:00.000-08:002010-02-12T23:36:26.606-08:00Design Valentine’s Day e-Card using Photoshop<div style="text-align: center;">Alright folks, first tutorial here. We’re going to create a simple Valentine’s Day e-card for your special someone – as a plan B, just in case you forget that present. In the process, you will learn how to create a brush of your own and edit some of its more advanced settings.</div><div></div><div style="text-align: center;">Besides your own “heart” [...]</div><div style="text-align: center;"></div><div class="copy fix" style="text-align: center;"><div class="post-content">Alright folks, first tutorial here. We’re going to create a simple Valentine’s Day e-card for your special someone – as a plan B, just in case you forget that present. In the process, you will learn how to create a brush of your own and edit some of its more advanced settings.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentines-day" rel="attachment wp-att-767"><img alt="valentines day Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-767" height="277" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentines-day.jpg" title="valentines-day" width="277" /></a><br />
Besides your own “heart” brush, we’re going to use some starry brushes download them here and a stock image for the background. Good and more importantly,.Now that we’ve got that out of the way, let’s begin.<br />
<b><span id="more-766"></span>Step 1</b><br />
Create a new document. It can be any size really, depending on the size you want the e-card to be. I made it 800×600. Create a new layer and name it <i>“Background”</i>. Select #ff0000 as your foreground color and press <i>Alt+Backspace</i> to fill it up.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s1" rel="attachment wp-att-768"><img alt="valentinesday s1 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-768" height="373" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s1.jpg" title="valentinesday-s1" width="500" /></a><br />
<b>Step 2</b><br />
Create a new layer and fill it with the color #330000. Name this layer <i>“Radial Gradient”</i>. Add a <i>Layer Mask</i> to it, then select the mask itself in the <b>Layers</b> window. Select the <i>Gradient Tool</i> and select <i>Radial gradient</i>. Press the <i>D key</i> to make sure you have Black and White as your foreground and background colors and draw a straight gradient line at 90° holding <i>Shift</i>, starting from the middle of the document all the way to the edge. If you have to, draw it even beyond the edge for a lighter effect. Play with this until you get it right.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s2" rel="attachment wp-att-769"><img alt="valentinesday s2 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-769" height="373" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s2.jpg" title="valentinesday-s2" width="500" /></a><br />
<b>Step 3</b><br />
We’re going to create a vignette effect and texturize our background.<br />
Create new layer (<i>Ctrl+Shift+N</i>) and fill it up with Black #000000. Name this layer <i>“Vignette”</i>. Grab the <i>Rectangular Marquee</i> tool and draw a rectangle in the very center of your black layer. Make sure your rectangle is at about the same distance from all the document edges, say 80px. Press Delete to remove the selection leaving only a black 80px border on your layer. Now go to the <i>Filter menu › Blur › Gaussian Blur</i> and apply a blur of 45 pixels. Turn the layer opacity down to about 50% by pressing 5 on the keyboard (this is an easy way to play with the layer opacity).<br />
<b>Time to texturize!</b><br />
Grab a picture of a piece of cloth (or anything else that you think would work) and paste it just above your bottom layer. Name this layer <i>“Texture”</i>. Hold down <i>Ctrl</i> and click the mask of the <i>“Radial gradient”</i> layer above it. You should now have what looks like a circular marquee. Press <i>M</i> to select the <i>Marquee tool</i>, right-click inside the document and in the menu that appears click <i>Select Inverse</i>. Yup, this does exactly what you think That is, it inverts the selection. Now, click the <i>Add layer mask</i> button in the <b>Layers </b>window. Select this layer’s Blending Mode to be <i>Linear Burn</i>. You should now have something that looks like the picture below.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s3" rel="attachment wp-att-770"><img alt="valentinesday s3 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-770" height="373" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s3.jpg" title="valentinesday-s3" width="500" /></a><br />
<b>Step 4</b><br />
Time to create our brush! Select the <i>Custom Shape tool</i> and select the Heart Card shape.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s4" rel="attachment wp-att-771"><img alt="valentinesday s4 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-771" height="373" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s4.jpg" title="valentinesday-s4" width="500" /></a><br />
Draw the heart shape anywhere in the document, about 40px wide, black color and rename its layer to <i>“Heart”</i>. <b>Hide all your other layers before you continue!</b> This makes sure your brush has a transparent background and doesn’t contain anything but your shape. Rasterize the layer, then Ctrl+click it in the Layers window to select the shape’s pixels, then go to the menu <i>Edit › Define Brush Preset</i>. Give your brush a name, let’s say “Heart”, and <i>voilà!</i> You have created your own brush. Now select the Brush tool and open the <i>Brush Preset picker</i>, scroll all the way down to the bottom of the brush list and select the brush you’ve created.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s4_1" rel="attachment wp-att-772"><img alt="valentinesday s4 1 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-772" height="373" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s4_1.jpg" title="valentinesday-s4_1" width="500" /></a><br />
<b>Step 5</b><br />
Now we’re going to set some advanced parameters for your brush and use it.<br />
First, make all your layers visible again, but delete or hide the <i>“Heart”</i> layer since we don’t need it anymore. Create a new layer just above your <i>Texture</i> layer and name it <i>“Hearts”</i>. With Black selected as foreground color and the <i>Brush tool</i> selected, press <i>F5</i> to bring forth the Brushes window. Edit the settings according to the image below.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s5" rel="attachment wp-att-773"><img alt="valentinesday s5 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-773" height="1016" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s5.jpg" title="valentinesday-s5" width="500" /></a><br />
Now use it to brush around the edges of the document and make a bit of a frame. After you are done brushing, with the <i>Hearts </i>layer selected <i>Ctrl+click</i> on your <i>Radial Gradient</i> layer and then click <i>Add layer mask</i> to give it that elliptic mask. The document should now look like this:<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s5_1" rel="attachment wp-att-774"><img alt="valentinesday s5 1 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-774" height="382" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s5_1.jpg" title="valentinesday-s5_1" width="500" /></a><br />
<b>Step 6</b><br />
Let’s add some more effects. Download this brush set and load it in Photoshop.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s6" rel="attachment wp-att-776"><img alt="valentinesday s6 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-776" height="382" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s6.jpg" title="valentinesday-s6" width="500" /></a><br />
Create a new document and name it <i>“Stars Fade”</i>, select a brush from the set you just loaded (one of the star brushes) and press <i>F5</i> to open up the Brushes window. Edit the brush settings and the layer effects according to the image below:-<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s6_1" rel="attachment wp-att-777"><img alt="valentinesday s6 1 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-777" height="1232" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s6_1.jpg" title="valentinesday-s6_1" width="500" /></a><br />
Now with the <i>Stars Fade</i> layer selected grab the <i>Elliptical Marquee tool</i>, set its feather to 25px and draw a circle in the middle of your document about 450px in diameter. Now click the <i>Add layer mask</i> button to convert the selection to a mask. Your stars layer should now fade towards the outside in a circle shape. Duplicate the layer, do a <i>Ctrl + T</i> (Transform), right-click and select <i>Flip Horizontal</i>. You should now have something that looks more or less like the image below.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s6_2" rel="attachment wp-att-778"><img alt="valentinesday s6 2 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-778" height="385" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s6_2.jpg" title="valentinesday-s6_2" width="499" /></a><br />
<b>Step 7</b><br />
Almost there now. Select the <i>Custom Shape tool</i>, pick the Heart Card shape (the same we used to create the brush) and paint a nice one smack dab in the middle of the document – any color. Mine was around 330px high. Try to keep it proportioned when you draw it, holding down <i>Shift </i>should help. Name this new layer <i>“Big Heart”</i>. Duplicate it, press <i>U</i> (to select the <i>Custom Shape tool</i>) and change its color to a nice white, then rasterize this layer. <i>Ctrl+click</i> it in the <b>Layers </b>window to select its pixels, press <i>M</i> and then press right arrow once and again down arrow once, then press <i>Delete</i>. What you just did was create a small white “highlight” in the top left side of the heart. Now press 5 to reduce its opacity to 50%. Name this layer <i>“Big Heart Highlight”</i>. Alright, time to slap some effects on the <i>“Big Heart”</i> layer. Take a look at the image below.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s7" rel="attachment wp-att-779"><img alt="valentinesday s7 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-779" height="1114" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s7.jpg" title="valentinesday-s7" width="500" /></a><br />
<b>Step 8</b><br />
Press <i>T</i> to bring up the <i>Type tool</i> and type a message right on that heart. It can be anything, depending who your Valentine is, how many Valentines you intend to send this to, whatever. Choose a nice heavy font and apply these effects:<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s8" rel="attachment wp-att-780"><img alt="valentinesday s8 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-780" height="1326" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s8.jpg" title="valentinesday-s8" width="500" /></a><br />
<b>Step 9</b><br />
I can almost hear you slap your forehead right now, but there’s nothing I can do. One last step and we’re done. Grab that starry brush you used on <b>Step 6</b> (exact same settings) and make it a tad smaller by pressing the key <i>[</i> (that’s the open square bracket key). By the way, [ makes your brush size a step smaller, while ] makes it a step bigger, so this is a cool way to modify your brush size on the fly without having to type in an actual size in the <i>Brush Preset picker</i>. Select white as your foreground color, press <i>Ctrl+Shift+N</i> to make a new layer and paint all along the edge of the <i>Big Heart</i> to give it a sort of glitter (hence, we’re naming this layer <i>“Glitter”</i>). Set its blending mode to <i>Screen</i>. Once you’re happy with the way it looks, give it the effect below.<br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-s9" rel="attachment wp-att-781"><img alt="valentinesday s9 Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-781" height="364" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-s9.jpg" title="valentinesday-s9" width="499" /></a><br />
<a href="http://www.buildtutorial.com/design-valentine%e2%80%99s-day-e-card-using-photoshop.html/valentinesday-final" rel="attachment wp-att-775"><img alt="valentinesday final Design Valentine’s Day e Card using Photoshop" class="aligncenter size-full wp-image-775" height="375" src="http://www.buildtutorial.com/wp-content/uploads/2010/02/valentinesday-final.jpg" title="valentinesday-final" width="500" /></a><br />
Believe it or not, we’re done. And it was such as short tutorial…;) Well folks, I hope you’ve enjoyed this tutorial. I tried to keep it simple and at the same time detailed for the newbies out there that might be following it. This is my very first Photoshop tutorial, ever, so be gentle on me please. Also, to save your scrolling finger, for my next tutorial I promise I’ll find a better way to display those screenshots without taking up so much space.<br />
Again, I hope you enjoyed and learned something from this tutorial. If you liked it please leave a comment and if you <i>really </i>liked it, I would appreciate it if you would tell a friend or promote it using those little buttons at the bottom. If you didn’t like it, don’t just leave a comment saying how much it sucked, try to give a reason why it did and I’ll try to not repeat the same mistakes in my next tutorials.</div></div><br />
<br />
Tagged with: learn photoshop, photoshop creation, photoshop desiging, photoshop editing, photoshop effects, photoshop learning, photoshop tutorial, valentine card, valentine dayABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-66538907199011492612010-02-07T22:18:00.000-08:002010-02-07T22:18:35.699-08:00Click Menu using Jquery<div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxcase.com/file/pic/1073.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.ajaxcase.com/file/pic/1073.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
A clickable dropdown menu with (theoretically unlimited) submenus made out of an an unordered list. It’s behaviour is like an application menu (click to open, click to close, stays open even after hovering elsewhere).<br />
<span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;"><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium; line-height: normal;"><br />
</span></span></span><br />
<strong>More Examples:</strong><br />
<pre class="brush: javascript" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"><script type="text/javascript">
$(document).ready(function()
{
$.fn.clickMenu.setDefaults({arrowSrc:'arrow_right.gif', onClick: function(){/*do something*/}});
$('selector1').clickMenu(); /* use default values */
$('selector2').clickMenu({arrowSrc:''}); /* dont use an arrow for submenus */
$('selector3').clickMenu({subDelay: 1000, mainDelay: 500}); /* slow menu */
});
</script>
</pre><br />
<br />
<span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;"></span><br />
<strong>Available options:</strong><br />
* onClick – function – callback function triggered when a list item is clicked – returning false will stop the default action of the clicked element<br />
* arrowSrc – string – url of the image to be used as an arrow indicating a submenu (e.g. “images/somearrow.jpg” or an empty string if you don’t want an arrow)<br />
* mainDelay – string or number – the time to wait before starting the fadein after hovering over a main menu item (”slow”, “normal” or “fast” or the time in milliseconds – e.g. 1000)<br />
* subDelay – string or number – the time to wait before starting the fadein after hovering submenu item (”slow”, “normal” or “fast” or the time in milliseconds – e.g. 1000)<br />
<ins style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; display: inline-table; height: 15px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; visibility: visible; width: 468px;"><ins style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; display: block; height: 15px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" frameborder="0" height="15" hspace="0" id="google_ads_frame4" marginheight="0" marginwidth="0" name="google_ads_frame" scrolling="no" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-9128240462010624&output=html&h=15&slotname=3684482750&w=468&flash=10.0.42&url=http%3A%2F%2Fwww.ajaxupdates.com%2Fclick-menu-using-jquery%2F&dt=1265609749240&prev_slotnames=8471426248%2C1726953992%2C9983300482&correlator=1265609749163&frm=0&ga_vid=589671415.1265608399&ga_sid=1265608399&ga_hid=2064975391&ga_fc=1&u_tz=300&u_his=4&u_java=1&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_nplug=8&u_nmime=51&biw=1007&bih=651&ref=http%3A%2F%2Fwww.ajaxupdates.com%2F&fu=0&ifi=4&dtd=3&xpc=k08WeU3kT5&p=http%3A//www.ajaxupdates.com" style="left: 0px; position: absolute; top: 0px;" vspace="0" width="468"></iframe></ins></ins><br />
<br />
Demo: <a href="http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html" onclick="javascript:pageTracker._trackPageview('/outgoing/p.sohei.org/stuff/jquery/clickmenu/demo/demo.html');" style="color: #0084ff; text-decoration: none;">http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html</a><br />
Download:<br />
<ul style="line-height: 2em; list-style-image: url(http://www.ajaxupdates.com/wp-content/themes/WhosWho/images/bullet.gif);"><li><a href="http://p.sohei.org/download-manager.php?id=45" onclick="javascript:pageTracker._trackPageview('/outgoing/p.sohei.org/download-manager.php?id=45');" style="color: #0084ff; text-decoration: none;">jquery.clickmenu.js</a> (15kb)</li>
<li><a href="http://p.sohei.org/download-manager.php?id=46" onclick="javascript:pageTracker._trackPageview('/outgoing/p.sohei.org/download-manager.php?id=46');" style="color: #0084ff; text-decoration: none;">jquery.clickmenu.pack.js</a> (4kb)</li>
<li><a href="http://p.sohei.org/download-manager.php?id=34" onclick="javascript:pageTracker._trackPageview('/outgoing/p.sohei.org/download-manager.php?id=34');" style="color: #0084ff; text-decoration: none;">clickmenu.css</a> (2kb – it won’t work without this)</li>
</ul>Source: <a href="http://p.sohei.org/jquery-plugins/clickmenu/" onclick="javascript:pageTracker._trackPageview('/outgoing/p.sohei.org/jquery-plugins/clickmenu/');" style="color: #0084ff; text-decoration: none;">http://p.sohei.org/jquery-plugins/clickmenu/</a>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-19959815588481198522010-02-07T22:14:00.000-08:002010-02-07T22:14:41.775-08:00Jquery-Droppy Amazing Menu<div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxcase.com/file/pic/1072.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.ajaxcase.com/file/pic/1072.jpg" /></a></div>Smooth, nested drop down menus from semantic markup. Simple integration, limited flexibility – you’ll either love it or hate it.<br />
Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like this for a recent project and a quick Googling turned up nothing that really suited, so droppy was born. It hasn’t been designed with flexibility in mind – if you like what you see, great, integration should be a breeze – otherwise I’d look for something more configurable elsewhere.<br />
<br />
Usage<br />
<br />
No mandatory configuration options or nothin’ here, just use include the Javascript/CSS resources and insert the following code in your<br />
document head, or any other suitable place:<br />
Javascript:<br />
<span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;"></span><br />
<pre class="brush: javascript" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"><<span class="IL_AD" id="IL_AD4" style="background-attachment: scroll !important; background-clip: initial !important; background-color: transparent !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(0, 132, 255) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; color: rgb(0, 132, 255) !important; cursor: pointer !important; display: inline !important; font-family: monospace !important; font-size: 11px !important; font-style: normal !important; font-weight: normal !important; padding-bottom: 1px; position: static;">script type</span>='text/javascript'>
$(function() {
$('#nav').droppy();
});
</pre>And here’s some example HTML markup:<br />
<strong>HTML:</strong><br />
<pre class="brush: html" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"><ul id="nav"><li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Top level 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Top level 2</a> <ul><li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 1</a></li>
<li> <a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2</a> <ul><li> <a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 1</a> <ul><li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 1 - 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 1 - 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 1 - 3</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 1 - 4</a></li>
</ul></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 2</a></li>
<li> <a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 3</a> <ul><li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 3 - 1</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 3 - 2</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 3 - 3</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 2 - 3 - 4</a></li>
</ul></li>
</ul></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071#">Sub 2 - 3</a></li>
</ul></li>
</ul></pre>Droppy supports a single configuration option, speed, for setting the animation time.<br />
Example with custom speed:<br />
<pre class="brush: javascript" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"><script type="text/javascript">
$(function() {
$('#nav').droppy({speed: 100});
});
</script> </pre>The example CSS file has been split up into three small sections for ease of customisation if you feel like getting your tinker on. As of version 0.1.2, the ‘hover’ CSS class is applied to both < li > and < a > tags inside the menu on rollover, improving skinability with IE6.<br />
<br />
<span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;">Demo: <a href="http://onehackoranother.com/projects/jquery/droppy/" onclick="javascript:pageTracker._trackPageview('/outgoing/onehackoranother.com/projects/jquery/droppy/');" style="color: #0084ff; text-decoration: none;">http://onehackoranother.com/projects/jquery/droppy/</a><br />
Download: <a href="http://plugins.jquery.com/files/droppy-0.1.2.zip" onclick="javascript:pageTracker._trackPageview('/outgoing/plugins.jquery.com/files/droppy-0.1.2.zip');" style="color: #0084ff; text-decoration: none;">http://plugins.jquery.com/files/droppy-0.1.2.zip</a><br />
Source: <a href="http://onehackoranother.com/projects/jquery/droppy/" onclick="javascript:pageTracker._trackPageview('/outgoing/onehackoranother.com/projects/jquery/droppy/');" style="color: #0084ff; text-decoration: none;">http://onehackoranother.com/projects/jquery/droppy/</a></span>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-13950330152145293622010-02-07T22:08:00.000-08:002010-02-07T22:08:57.769-08:00Grid Column Sizing<div style="text-align: center;"><div style="text-align: center;"><b>Grid Column Sizing</b></div></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxcase.com/file/pic/1046.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.ajaxcase.com/file/pic/1046.jpg" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div style="text-align: center;"><div style="text-align: left;">This plugin, applied to a number of HTML tables, provides the behaviour of resizing their columns</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"># This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing columns by dragging the mouse or double-clicking over a “handler hint”.</div><div style="text-align: left;"># I want it to be FAST, non-intrusive, and for HUGE tables (intranet applications, as well as for internet)</div><div style="text-align: left;"># If you double-click, the column collapse (to minimum width property); if you repeat double-click, the column returns to previous width status, and viceversa.</div><div style="text-align: left;"># If the plugin “jquery.cookies.pack.js” is present and the property “cookies” is true, then the columns width status are preserved from load to load.</div><div style="text-align: left;">Compatibility</div><div style="text-align: left;">Tested in IE6+, Firefox 2+</div><div style="text-align: left;">Release Notes</div><div style="text-align: left;">[25 July 2008] Release version 0.5</div><div style="text-align: left;">Bugs / TODO</div><div style="text-align: left;">(buggy) double-click behaviour is tricky</div><div style="text-align: left;">to update to future jQuery UI module or interface version 2</div><div style="text-align: left;">to indicate visually pixels width, while dragging</div><div style="text-align: left;">to use dinamic methods like “create” / “destroy”</div><div style="text-align: left;">to use dinamic methods like “collapse/expand X column/s”</div><div style="text-align: left;">possibility of defining columns width default values for initiating</div><div style="text-align: left;">to improve documentation and demos</div><div style="text-align: left;">(perhaps?) to change “jquery.grid.” into “jquery.table.” as the connotations of “grid” word are too ambitious…</div><div style="text-align: left;"><span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;"></span></div><strong>Javascript:</strong><br />
<pre class="brush: javascript" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"><script src="jquery-1.1.3.1.pack.js" type="text/javascript">
</script>
<script src="jquery.dimensions.pack.js" type="text/javascript">
</script>
<script src="jquery.cookies.pack.js" type="text/javascript">
</script>
<script src="jquery.iutil.pack.js" type="text/javascript">
</script>
<script src="jquery.idrag.js" type="text/javascript">
</script>
<script src="jquery.grid.columnSizing.js" type="text/javascript">
</script>
</pre><strong>CSS:</strong><br />
<pre class="brush: javascript" style="background-color: whitesmoke; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.8em; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px;">table.jquery_columnSizing{
table-layout: fixed;
width : 100%;
}
table.jquery_columnSizing tr td{
overflow : hidden;
}
</pre><br />
<div style="text-align: left;"><span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; line-height: 18px;"></span></div><div style="text-align: left;"><b><br />
</b></div><div style="text-align: left;"><b><span class="Apple-style-span" style="color: #4c4c4c; font-family: Arial; font-size: 11px; font-weight: normal; line-height: 18px;">Demo: <a href="http://www.ita.es/jquery/jquery.grid.columnSizing.htm" onclick="javascript:pageTracker._trackPageview('/outgoing/www.ita.es/jquery/jquery.grid.columnSizing.htm');" style="color: #0084ff; text-decoration: none;">http://www.ita.es/jquery/jquery.grid.columnSizing.htm</a><br />
Download: <a href="http://www.ita.es/jquery/jquery.grid.columnSizing.pack.js" onclick="javascript:pageTracker._trackPageview('/outgoing/www.ita.es/jquery/jquery.grid.columnSizing.pack.js');" style="color: #0084ff; text-decoration: none;">http://www.ita.es/jquery/jquery.grid.columnSizing.pack.js</a>jquery javascript grid columns collapsible collapse plugin<br />
Source: <a href="http://www.ita.es/jquery/jquery.grid.columnSizing.htm" onclick="javascript:pageTracker._trackPageview('/outgoing/www.ita.es/jquery/jquery.grid.columnSizing.htm');" style="color: #0084ff; text-decoration: none;">http://www.ita.es/jquery/jquery.grid.columnSizing.htm</a></span></b></div></div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-34448884467860253792010-01-12T13:22:00.000-08:002010-01-12T13:22:20.342-08:00Background Image Animation With jQuery: jAniAnimated GIFs can have up to 256 colors & they are not interactive.<br />
<a href="http://www.ajaxblender.com/jani.html" target="_blank"><strong>jAni</strong></a> is a lightweight <strong>jQuery plugin</strong> for animating background images which can be an <strong>alternative to animated GIFs</strong> (in some cases).<br />
It simply <strong>changes the position of a long background image</strong> in given distances & speed.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.webresourcesdepot.com/wp-content/uploads/jquery-bg-animation.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="http://www.webresourcesdepot.com/wp-content/uploads/jquery-bg-animation.jpg" width="320" /></a><br />
</div>The plugin has few options for controlling it:<br />
<ul><li>start, stop, pause</li>
<li>speed</li>
<li>loop on/off</li>
<li>dimensions of the frames</li>
</ul>As it will require JavaScript to be enabled, using <strong>jAni </strong>combined with other JavaScript events (like animating a better-quality Ajax loader) would be very functional.<br />
<strong>Website:</strong> <a href="http://www.ajaxblender.com/jani.html" target="_blank">http://www.ajaxblender.com/jani.html</a><br />
<strong>Demo:</strong> <a href="http://www.ajaxblender.com/script-sources/jani/demo/index.html" target="_blank">http://www.ajaxblender.com/script-sources/jani/demo/...</a> <br />
<div class="separator" style="clear: both; text-align: left;"><br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-23814405458353019582010-01-05T04:04:00.000-08:002010-01-05T04:04:31.137-08:00Free Studiopress Magazine Template for BloggerThis Template is the 2 column Magazine template originally a wordpress Theme designed by Studiopress and we have converted this Template into blogger for blogger blogs.This template is also absolutely free for all users who want it to use it for their blogger blogs.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRQohe7unYApZ934cWwXrNBdWZHMJIInMDS78itRwlv7zHQgFjeVvrKuQ588rFplbqXu_AmydEqIbC1Rc34B2HjbzghAcpZAYRl4QHy9mjJ1OduQxDK7y0U1Ev93n6qUIVGVsQE4t_HU/s1600/Magzine+template+snapshot.GIF" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRQohe7unYApZ934cWwXrNBdWZHMJIInMDS78itRwlv7zHQgFjeVvrKuQ588rFplbqXu_AmydEqIbC1Rc34B2HjbzghAcpZAYRl4QHy9mjJ1OduQxDK7y0U1Ev93n6qUIVGVsQE4t_HU/s320/Magzine+template+snapshot.GIF" /></a><br />
</div><div class="separator" style="clear: both; text-align: center;"><span style="font-size: large;">Features of this Template</span> <br />
</div><ul><li>This is a two fixed free blogger Template.</li>
<li>This Template is Google Adsense Optimized.</li>
<li>This Template has got 6 tabbed menu.</li>
<li>This Template has got sidebar enews and updates box.</li>
<li>This Template has got the customized blogsearch engine</li>
<li>This Template has got customized dropdown category(labels) widget with the menu bar.</li>
<li>This Template has got breadcrumb menu to each posts.</li>
<li>This Template has got two menu bars.</li>
</ul><a href="http://studiopress-magazine-blogversion.blogspot.com/">LIVE DEMO</a><br />
<strong></strong><strong><a class="aligncenter" href="http://www.bloganol.com/blogger/templates/Studiopress%20Magazine%20blogger%20Template.zip" target="_blank" title="Download free studiopress Magazine blogger template">>>DOWNLOAD NOW<<</a></strong> <br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-5960851570964540082010-01-05T03:20:00.000-08:002010-01-05T10:19:32.736-08:00Download WooThemes :The Gazette Edition: Converted for Blogger FreeThe gazette is a Premium wordpress theme made for Wordpress blogs by woothemes.com.I am currently using this Theme in my Wordpress blog and Its pretty good So I have Converted this The Gazette Edition into blogger Theme for The Blogger Users.Hope you will love this Template.Look at the demo and instructions below and decide how is the Theme.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.bloganol.com/wp-content/uploads/2009/11/The-gazette-edition-blogger-template-673x1023.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://www.bloganol.com/wp-content/uploads/2009/11/The-gazette-edition-blogger-template-673x1023.jpg" width="210" /></a><br />
</div><div class="separator" style="clear: both; text-align: left;"> <a href="http://stars-newz.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.bloganol.com/wp-content/uploads/2009/11/View-live-demo.png" /></a><br />
</div><h2>Features Of this Template</h2><ul><li>This template is a three columned.</li>
<li>This Template has got 3 perfect areas for placing ads.</li>
<li>This Template has got auto read more feature on Home page,labels page and archive pages.</li>
<li>This template has got two perfect menus above and below the header.</li>
<li>This Template has got Content slider widget on Front page.</li>
<li>This Template has got the 5 tabbed menu that shows your Popular posts,Recent posts,recent comments,Tags and Subscription widget.</li>
<li>This Template is absolutely free to download from here.</li>
<li>and many more…</li>
</ul><h2>Download</h2>This template is absolutely free to download from here.To download right click the Download button below and then click Save link as.<br />
<br />
<a href="http://bloganol.com/wp-content/plugins/download-monitor/download.php?id=2" title="Downloaded hits times"><img alt="Download free" src="http://bloganol.com/wp-content/plugins/download-monitor/img/download.gif" style="border: 0px none; margin-right: 500px;" title="Download WooThemes The Gazette Edition Converted for Blogger Free" /></a><br />
<br />
<b>Credit To : http://www.bloganol.com/</b>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com1tag:blogger.com,1999:blog-8762457324091663071.post-91973237098982871862010-01-01T23:18:00.000-08:002010-01-01T23:18:45.628-08:002010 Poster Design in Photoshop<h3>We will celebrate the new 2010 year with a cool ,simple poster design . This design summarize the year 2009 popular trends like bokeh , light and colors . <br />
</h3><h3>The Poster</h3><img alt="" class="alignnone size-full wp-image-439" height="840" src="http://themegamag.com/wp-content/uploads/2010/01/poster1.jpg" title="2010 Poster" width="600" /><br />
<h3>Step 1</h3>Start a new document with a black background .Choose the size you like I used <b>1000*1400</b> pixels .Of course if you are planning to print it you might need to adjust the size to a bigger one .<br />
<img alt="" class="alignnone size-medium wp-image-387" height="400" src="http://themegamag.com/wp-content/uploads/2009/12/01-280x400.png" title="01" width="280" /><br />
<h3>Step 2</h3>Add a new fill layer with solid color ( <b>Layer > New fill layer > solid color</b>) and choose <b>#fdd413</b> for the color. Change the layer <b>opacity</b> to <b>20%.</b><br />
<img alt="" class="alignnone size-medium wp-image-388" height="400" src="http://themegamag.com/wp-content/uploads/2009/12/02-280x400.png" title="02" width="280" /><br />
<h3>Step 3</h3>Use a large soft brush with the following setting and brush some random colors around the canvas<br />
<img alt="" class="alignnone size-medium wp-image-389" height="400" src="http://themegamag.com/wp-content/uploads/2009/12/03-321x400.jpg" title="03" width="321" /><br />
From Filter menu<b> choose blur> Gaussian blur </b>.I’ve used the max value <b>250</b> for the radius .<br />
<img alt="" class="alignnone size-medium wp-image-391" height="400" src="http://themegamag.com/wp-content/uploads/2009/12/04-285x400.jpg" title="04" width="285" /><br />
<h3>Step 4</h3>Create a new<b> Gradient fill</b> layer <b>(Layer > Fill layer > Gradient</b> ) .With the following setting<br />
<img alt="" class="alignnone size-full wp-image-392" height="220" src="http://themegamag.com/wp-content/uploads/2009/12/05.jpg" title="05" width="353" /><br />
Change the layer <b>blend mode</b> to <b>overlay</b> and the <b>opacity</b> to <b>21%</b>.<br />
<img alt="" class="alignnone size-medium wp-image-393" height="400" src="http://themegamag.com/wp-content/uploads/2009/12/06-284x400.jpg" title="06" width="284" /><br />
<h3>Step 5</h3>We now want to create the brush that we will use for the dots(Fake bokeh) .The brush will have the following settings<br />
<img alt="" class="alignnone size-full wp-image-400" height="445" src="http://themegamag.com/wp-content/uploads/2009/12/07.png" title="07" width="448" /><br />
<img alt="" class="alignnone size-full wp-image-401" height="444" src="http://themegamag.com/wp-content/uploads/2009/12/081.png" title="08" width="443" /><br />
<img alt="" class="alignnone size-full wp-image-402" height="444" src="http://themegamag.com/wp-content/uploads/2009/12/09.png" title="09" width="449" /><br />
<img alt="" class="alignnone size-full wp-image-403" height="445" src="http://themegamag.com/wp-content/uploads/2009/12/10.png" title="10" width="449" /><br />
<img alt="" class="alignnone size-full wp-image-404" height="413" src="http://themegamag.com/wp-content/uploads/2009/12/11.png" title="11" width="436" /><br />
<h3>Step 6</h3>Reset the colors by pressing <b>D</b> on your keyboard.Create a new empty layer and draw randomly using the brush we created start from the center of the poster .<br />
<img alt="" class="alignnone size-full wp-image-405" height="489" src="http://themegamag.com/wp-content/uploads/2009/12/12.jpg" title="12" width="350" /><br />
Apply the Gaussian blur filter (<b>Filter >Blur> Gaussian blur</b> ) with the <b>value 7</b> . Change the <b>blend mode</b> to <b>Soft blend</b> .<br />
<img alt="" class="alignnone size-full wp-image-406" height="485" src="http://themegamag.com/wp-content/uploads/2009/12/13.jpg" title="13" width="350" /><br />
<h3>Step 7</h3>Create another layer and draw again using the same brush .This time apply the<b> Gaussian blu</b>r using the<b> value 4.2</b> and change the <b>blend mode</b> to <b>Screen.</b><br />
<img alt="" class="alignnone size-full wp-image-411" height="446" src="http://themegamag.com/wp-content/uploads/2009/12/131.jpg" title="13" width="319" /><br />
<h3>Step 8</h3>Another new layer , Add the dots using the brush , <b>Gaussian blur</b> the layer with the<b> value 2 </b>and the layer <b>blend mode</b> to <b>Color dodge</b> .<br />
<img alt="" class="alignnone size-full wp-image-412" height="446" src="http://themegamag.com/wp-content/uploads/2009/12/14.jpg" title="14" width="315" /><br />
<h3>Step 9</h3>Another layer , with the dots brush , no blur this time and the layer<b> blend mode</b> to <b>color dodge</b> .<br />
<img alt="" class="alignnone size-full wp-image-413" height="443" src="http://themegamag.com/wp-content/uploads/2009/12/15.jpg" title="15" width="313" /><br />
<h3>Step 10</h3>Select all layers except the yellow color layer and the black background layer ( <i>by Clicking on the layer and press command/ctrl</i>).Press (<b>Commend / Ctrl + t</b>) or (<b>Edit >Free transform</b>) and re-size the image to create a border around the poster.<br />
<img alt="" class="alignnone size-full wp-image-414" height="562" src="http://themegamag.com/wp-content/uploads/2009/12/16.jpg" title="16" width="391" /><br />
<h3>Step 11</h3>Add the text (<b>2010</b>) . I used a dark gray color and the font is (<b>Impact</b>) .<br />
<img alt="" class="alignnone size-full wp-image-417" height="219" src="http://themegamag.com/wp-content/uploads/2009/12/18.jpg" title="18" width="324" /><br />
We now will add some style to this text .<br />
<img alt="" class="alignnone size-full wp-image-418" height="562" src="http://themegamag.com/wp-content/uploads/2009/12/19.jpg" title="19" width="600" /><br />
<h3>Step 12</h3>Duplicate the text layer( <b>Ctrl/command + J</b>).Keep everything the same just change the stroke settings.<br />
<img alt="" class="alignnone size-full wp-image-420" height="236" src="http://themegamag.com/wp-content/uploads/2009/12/20.jpg" title="20" width="318" /><br />
<h3>Step 13</h3>Duplicate the 2nd text layer and apply the following settings<br />
<img alt="" class="alignnone size-full wp-image-422" height="407" src="http://themegamag.com/wp-content/uploads/2010/01/21.png" title="21" width="319" /><br />
<img alt="" class="alignnone size-full wp-image-424" height="214" src="http://themegamag.com/wp-content/uploads/2010/01/23.png" title="23" width="327" /><br />
<img alt="" class="alignnone size-full wp-image-423" height="427" src="http://themegamag.com/wp-content/uploads/2010/01/22.png" title="22" width="327" /><br />
<img alt="" class="alignnone size-full wp-image-425" height="304" src="http://themegamag.com/wp-content/uploads/2010/01/24.jpg" title="24" width="527" /><br />
<h3>Step 14</h3>Now we want to add the sentence under the year text. Choose the <b>rounded rectangle</b> and draw a white rectangle .Make sure you choose the (<b>Shape layers</b> ), so we can edit the shape later with the pen tool .<br />
<img alt="" class="alignnone size-full wp-image-428" height="40" src="http://themegamag.com/wp-content/uploads/2010/01/27.png" title="27" width="279" /><br />
Change the layer <b>blend mode</b> to <b>overlay</b>.<br />
<img alt="" class="alignnone size-full wp-image-426" height="154" src="http://themegamag.com/wp-content/uploads/2010/01/25.jpg" title="25" width="600" /><br />
Then add some shadow with the following settings<br />
<img alt="" class="alignnone size-full wp-image-427" height="317" src="http://themegamag.com/wp-content/uploads/2010/01/26.png" title="26" width="324" /><br />
<h3>Step 15</h3>Choose the <b>direct selecting tool (or press a )</b>. Right click on the top line of the shape and choose <b>add anchor points</b> . Add 3 new points .<br />
<img alt="" class="alignnone size-full wp-image-429" height="292" src="http://themegamag.com/wp-content/uploads/2010/01/28.png" title="28" width="333" /><br />
Choose convert point tool<br />
<img alt="" class="alignnone size-full wp-image-430" height="127" src="http://themegamag.com/wp-content/uploads/2010/01/29.png" title="29" width="199" /><br />
Click on each point once to convert the point to corner point. Now<b> press a</b> again and press on the middle point and start draging it upward<br />
<img alt="" class="alignnone size-full wp-image-431" height="255" src="http://themegamag.com/wp-content/uploads/2010/01/30.png" title="30" width="300" /><br />
Play with the 3 points using the direct select tool until you are satisfied with the results.<br />
<img alt="" class="alignnone size-full wp-image-432" height="162" src="http://themegamag.com/wp-content/uploads/2010/01/31.jpg" title="31" width="378" /><br />
<h3>Step 16</h3>Add your text . Change the layer <b>opacity</b> to around <b>81%.</b><br />
<img alt="" class="alignnone size-full wp-image-433" height="138" src="http://themegamag.com/wp-content/uploads/2010/01/32.jpg" title="32" width="509" /><br />
<h3>Step 17</h3>We are almost done . Now we want to drew attention toward the center of the poster where the text is located .<br />
Create a new layer .Choose <b>Edit>Fill >Use 50% Gray</b> .Then Choose <b>filter>render>Lighting effect</b> with the following settings.<br />
<img alt="" class="alignnone size-full wp-image-434" height="458" src="http://themegamag.com/wp-content/uploads/2010/01/33.png" title="33" width="600" /><br />
Change the layer<b> blend mode</b> to <b>overlay</b> and the <b>opacity</b> to <b>83%.</b><br />
<br />
<img alt="" height="840" src="http://themegamag.com/wp-content/uploads/2010/01/poster1.jpg" title="2010 Poster" width="600" /><br />
<br />
<b>Credit To :</b> <a href="http://themegamag.com/tutorials/2010-poster-design-photoshop/">http://themegamag.com/tutorials/2010-poster-design-photoshop/</a>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-15098171883899229822009-12-23T13:21:00.000-08:002009-12-23T13:22:47.056-08:00Flection v0.1 using MooToolsWith Moo.flection you can easily add a Javascript/CSS based cross-browser reflection with true transparency to you images.<br />
<br />
It’s based on the Mootools Javascript Framework.<br />
<br />
Version number is 0.1 since it’s far from finished. A lot of options for implementation should be added and the code has to be optmized for a real release.<br />
<center><img src="http://www.ajaxcase.com/file/pic/1074.jpg"/></center><br />
<b>Implementation</b><br />
<br />
You will need mootools v1.1 or higher and moo.flection.js<br />
Example 1<br />
<br />
This is the most simple and basic version. All images within any type of block element with the ID ‘reflections’ will gain a nicereflection. <br />
<pre>// create a new instance for reflections.
var myReflection = new Reflection(
'simple_reflection',
); </pre><br />
<b>HTML:</b><br />
<blockquote><div id="simple_reflection"><img src="./hella_floor.jpg" alt="Hella On Floor"/><br />
<img src="./sea.jpg" alt="Sea"/><br />
</div></blockquote><br />
<br />
So if we have an image with the following Javascript, CSS and HTML:<br />
<b>Javascript:</b><br />
<pre>// create a new instance for reflections.
var myReflection = new Reflection(
'css_copied_reflection',
); </pre><br />
<b>CSS:</b><br />
<pre>.funnyimage {
float: left;
margin: 50px 10px 30px 20px;
padding: 5px;
background: #ff0;
border: 3px solid #f00;
border-right: 5px dotted #0f0;
}
</pre><b>HTML:</b><br />
<blockquote><div><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div><div id="css_copied_reflection"><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div></blockquote><br />
Demo: http://www.setragasj.nl/mooflection/<br />
Download: http://www.setragasj.nl/mooflection/js/moo.flection.js<br />
Source: http://www.setragasj.nl/mooflection/ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-30410754697817633002009-12-20T01:37:00.000-08:002009-12-20T01:37:52.388-08:00Design a Dante’s Inferno Game Inspired Dark Flaming Hell Scene in PhotoshopBefore we begin, I’d like to introduce a bit of concept behind this artwork:<br />
<ol><li>our hero arrives in hell, in front of him is a flaming river filled wit lava</li>
<li> he must somehow get across the river and reach the island in the far distance, guarded by fearsome monsters,</li>
<li> he then has to get inside the castle on top of the island to rescue his lover.</li>
</ol>Ok once you understand the concept, let’’s get started!<br />
To complete this tutorial, you will need the following stocks:<br />
<a href="http://cybergranny-stock.deviantart.com/art/Foggy-plain-67231582" target="_blank">Foggy Plain</a><br />
<a href="http://skybase.deviantart.com/art/Clouds-Above-124259703" target="_blank">Cloud</a><br />
<a href="http://fakethisstock.deviantart.com/art/Cliff-top-21-50780001" target="_blank">Cliff</a><br />
<a href="http://stock-gallery.deviantart.com/art/Places-Castle-River-1-49886725" target="_blank">Castle</a><br />
<a href="http://markopolio-stock.deviantart.com/art/Dragon-1-42138820" target="_blank">Dragon</a><br />
<a href="http://falln-stock.deviantart.com/art/Ancient-Life-Museum-27-88700954">Skull</a><br />
<a href="http://mjranum-stock.deviantart.com/art/Barbarian-Warrior-27-77829696" target="_blank">Warrior</a><br />
<h3>Step 1</h3>Create a new document size 1400px * 800px, fill the background layer with black. Load the “Foggy Plain” image into Photoshop, then copy and paste the entire image onto our document, resize it to fix the canvas size.<br />
Name this layer as “plain”, apply the following “Reduce Noise” settings to it to get rid of the noisy bits and add some gloomy effect to it:<br />
<img alt="2 reduce noise" class="alignnone size-medium wp-image-4330 meebo-_sharableItem" height="353" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-reduce-noise-500x353.jpg" style="-moz-user-select: none;" title="2 reduce noise" width="500" /><br />
And you will have the following effect:<br />
<img alt="1 effect" class="alignnone size-medium wp-image-4331 meebo-_sharableItem" ev_id="50" height="281" src="http://www.psdvault.com/wp-content/uploads/2009/12/1-effect-500x281.jpg" style="-moz-user-select: none;" title="1 effect" width="500" /><br />
Use the Spot Healing tool to remove the dots on the image:<br />
<img alt="1 dots" class="alignnone size-medium wp-image-4332 meebo-_sharableItem" ev_id="51" height="275" src="http://www.psdvault.com/wp-content/uploads/2009/12/1-dots-500x275.jpg" style="-moz-user-select: none;" title="1 dots" width="500" /><br />
And you will have the following effect:<br />
<img alt="1 effect 2" class="alignnone size-medium wp-image-4333 meebo-_sharableItem" ev_id="52" height="280" src="http://www.psdvault.com/wp-content/uploads/2009/12/1-effect-2-500x280.jpg" style="-moz-user-select: none;" title="1 effect 2" width="500" /><br />
Duplicate this plain layer once, change the blending mode of the duplicated layer to “Multiply”, this way will darken the image. Add a layer mask to the duplicate layer to hide the top sky portion so it remains bright:<br />
<img alt="1 mask" class="alignnone size-medium wp-image-4334 meebo-_sharableItem" ev_id="53" height="280" src="http://www.psdvault.com/wp-content/uploads/2009/12/1-mask-500x280.jpg" style="-moz-user-select: none;" title="1 mask" width="500" /><br />
And here is the effect so far:<br />
<img alt="1 effect 3" class="alignnone size-medium wp-image-4335 meebo-_sharableItem" ev_id="54" height="284" src="http://www.psdvault.com/wp-content/uploads/2009/12/1-effect-3-500x284.jpg" style="-moz-user-select: none;" title="1 effect 3" width="500" /><br />
<h3>Step 2</h3>Now let’s load the “cliff” iamge into Photoshop, then drag the entire image onto our canvas, resize and position it as shown below:<br />
<img alt="2 drag" class="alignnone size-medium wp-image-4336 meebo-_sharableItem" ev_id="55" height="283" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-drag-500x283.jpg" style="-moz-user-select: none;" title="2 drag" width="500" /><br />
Here comes the interesting bit: grab a really soft (0% hardness), big round brush, erase the ocean part and the edges of the cliff off – the ulimate goal is to try and blend the cliff into our image as seamless as possible:<br />
<img alt="2 erase" class="alignnone size-medium wp-image-4337 meebo-_sharableItem" ev_id="56" height="281" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-erase-500x281.jpg" style="-moz-user-select: none;" title="2 erase" width="500" /><br />
Now we have the cliff texture here, however it looks quite boring to me with just a single bit sort of sticking out. So I decided to extend it a bit to cover the entire lower portion of the canvas.<br />
This is probably the most tricky part of the tutorial – The goal we got to achieve is to take this cliff texture and somehow make it longer to cover the lower portion.<br />
To do this, following the following steps:<br />
<ol><li> make serveral duplicates of the original cliff layer</li>
<li>use the same method as described in the previous step to erase the edge portion</li>
<li><b>on each duplicated layer</b>, use Ctrl + T to free transform them so they look different.</li>
<li>Then drag them to across the canvas to form a joint cliff</li>
</ol>You can make as many duplicated layers as you want.<br />
Also try to experiment layer blending mode with each layer, you will discover how powerful those layer blending modes are.<br />
Here is my effect after the blending and duplicating: (This effect is made by around 10 duplicated cliff layer texture)<br />
<img alt="2 effect" class="alignnone size-medium wp-image-4338 meebo-_sharableItem" ev_id="57" height="287" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-effect-499x287.jpg" style="-moz-user-select: none;" title="2 effect" width="499" /><br />
<br />
Add the following three image adjustment layer and their respective layer mask to it:<br />
Color Balance (Drop opacity to 70%)<br />
<img alt="2 col bal sha" class="alignnone size-full wp-image-4339 meebo-_sharableItem" ev_id="58" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-col-bal-sha.jpg" style="-moz-user-select: none;" title="2 col bal sha" width="210" /><br />
<img alt="2 col bal mid" class="alignnone size-full wp-image-4340 meebo-_sharableItem" ev_id="59" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-col-bal-mid.jpg" style="-moz-user-select: none;" title="2 col bal mid" width="210" /><br />
<img alt="2 col bal hig" class="alignnone size-full wp-image-4341 meebo-_sharableItem" ev_id="60" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-col-bal-hig.jpg" style="-moz-user-select: none;" title="2 col bal hig" width="210" /><br />
<img alt="2 col bal mask" class="alignnone size-medium wp-image-4342 meebo-_sharableItem" ev_id="61" height="283" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-col-bal-mask-500x283.jpg" style="-moz-user-select: none;" title="2 col bal mask" width="500" /><br />
Levels<br />
<img alt="2 levels" class="alignnone size-full wp-image-4344 meebo-_sharableItem" ev_id="62" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-levels1.jpg" style="-moz-user-select: none;" title="2 levels" width="210" /><br />
<img alt="2 levels mask" class="alignnone size-medium wp-image-4345 meebo-_sharableItem" ev_id="63" height="282" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-levels-mask-500x282.jpg" style="-moz-user-select: none;" title="2 levels mask" width="500" /><br />
Brightness and Contrast<br />
<img alt="2 bc" class="alignnone size-full wp-image-4346 meebo-_sharableItem" ev_id="64" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-bc.jpg" style="-moz-user-select: none;" title="2 bc" width="210" /><br />
<img alt="2 bc mask" class="alignnone size-medium wp-image-4347 meebo-_sharableItem" ev_id="65" height="278" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-bc-mask-499x278.jpg" style="-moz-user-select: none;" title="2 bc mask" width="499" /><br />
and here is the effect so far:<br />
<img alt="2 effect 2" class="alignnone size-medium wp-image-4348 meebo-_sharableItem" ev_id="66" height="282" src="http://www.psdvault.com/wp-content/uploads/2009/12/2-effect-2-500x282.jpg" style="-moz-user-select: none;" title="2 effect 2" width="500" /><br />
You can see I delibrately produce those color and lighting dynamics through layer masking and blending options – they will be used in future steps.<br />
<h3>Step 3</h3>Now let’s load the “cloud” image into Photoshop and drag it onto our document, name the new layer as “cloud”. Desaturate this cloud layer and use a big soft brush to erase the outer portion of the cloud, leave the bits as show below:<br />
<img alt="3 cloud" class="alignnone size-medium wp-image-4349 meebo-_sharableItem" ev_id="67" height="436" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-cloud-499x436.jpg" style="-moz-user-select: none;" title="3 cloud" width="499" /><br />
Change the blending mode to “color burn” and you will have the following effect:<br />
<img alt="3 blending change" class="alignnone size-medium wp-image-4350 meebo-_sharableItem" ev_id="68" height="391" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-blending-change-499x391.jpg" style="-moz-user-select: none;" title="3 blending change" width="499" /><br />
Duplicate this cloud layer a few more times, position the duplicated layer around the edge of the cliff, adjust their blending mode as shown below:<br />
<img alt="3 dup" class="alignnone size-medium wp-image-4351 meebo-_sharableItem" ev_id="69" height="276" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-dup-500x276.jpg" style="-moz-user-select: none;" title="3 dup" width="500" /><br />
add a curves adjustment layer to it with mask as shown below:<br />
<img alt="3 curves" class="alignnone size-full wp-image-4352 meebo-_sharableItem" ev_id="70" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-curves.jpg" style="-moz-user-select: none;" title="3 curves" width="210" /><br />
<img alt="3 curv mask" class="alignnone size-medium wp-image-4353 meebo-_sharableItem" ev_id="71" height="283" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-curv-mask-500x283.jpg" style="-moz-user-select: none;" title="3 curv mask" width="500" /><br />
You will have the following effect:<br />
<img alt="3 effect" class="alignnone size-medium wp-image-4355 meebo-_sharableItem" ev_id="72" height="281" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-effect1-499x281.jpg" style="-moz-user-select: none;" title="3 effect" width="499" /><br />
<h3>Step 4</h3>Now let’s produce some Lave and Flaming effect to the image. Create a new layer called “lava” and fill it with Black, render some cloud using the cloud filter, as shown below:<br />
<img alt="4 cloud" class="alignnone size-medium wp-image-4356 meebo-_sharableItem" ev_id="73" height="283" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-cloud-500x283.jpg" style="-moz-user-select: none;" title="4 cloud" width="500" /><br />
Then render some difference cloud afterwards: (try press Ctrl + F a few more times for different result)<br />
<img alt="4 diff cloud" class="alignnone size-medium wp-image-4357 meebo-_sharableItem" ev_id="74" height="283" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-diff-cloud-500x283.jpg" style="-moz-user-select: none;" title="4 diff cloud" width="500" /><br />
Apply the following colour balance settings to it:<br />
<img alt="4 col sha" class="alignnone size-full wp-image-4358 meebo-_sharableItem" ev_id="75" height="218" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-col-sha.jpg" style="-moz-user-select: none;" title="4 col sha" width="437" /><br />
<img alt="4 col mid" class="alignnone size-full wp-image-4360 meebo-_sharableItem" ev_id="76" height="218" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-col-mid1.jpg" style="-moz-user-select: none;" title="4 col mid" width="437" /><br />
<img alt="4 col hi" class="alignnone size-full wp-image-4361 meebo-_sharableItem" ev_id="77" height="218" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-col-hi.jpg" style="-moz-user-select: none;" title="4 col hi" width="437" /><br />
Then resize this layer “lava” to a very small size and position it into the centre of the canvas, erase the edges with a small soft brush, you will have the following effect:<br />
<img alt="4 reduce" class="alignnone size-full wp-image-4362 meebo-_sharableItem" ev_id="78" height="352" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-reduce.jpg" style="-moz-user-select: none;" title="4 reduce" width="477" /><br />
change its blending mode to “color dodge”, you will have the following effect:<br />
<img alt="4 lava" class="alignnone size-full wp-image-4363 meebo-_sharableItem" ev_id="79" height="451" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-lava.jpg" style="-moz-user-select: none;" title="4 lava" width="472" /><br />
Again we duplicate this lava layer, rotate and resize the duplicated layer, until it covers the center area:<br />
<img alt="4 effect" class="alignnone size-medium wp-image-4364 meebo-_sharableItem" ev_id="80" height="208" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-effect-500x208.jpg" style="-moz-user-select: none;" title="4 effect" width="500" /><br />
<h3>Step 5</h3>Now load the “castle” image into Photoshop and select the upper portion of the image without the lake, copy and paste it onto our document. Desaturate it and change its layer blending mode to “hard light”, you will have the following effect:<br />
<img alt="5 copy paste" class="alignnone size-medium wp-image-4365 meebo-_sharableItem" ev_id="81" height="275" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-copy-paste-500x275.jpg" style="-moz-user-select: none;" title="5 copy paste" width="500" /><br />
erase the edges off with a soft brush:<br />
<img alt="5 erase" class="alignnone size-medium wp-image-4366 meebo-_sharableItem" ev_id="82" height="410" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-erase-500x410.jpg" style="-moz-user-select: none;" title="5 erase" width="500" /><br />
add following three image adjustment layer with relevant mask attached to them, to the castle layer as clipping mask:<br />
Curves<br />
<img alt="5 curves" class="alignnone size-full wp-image-4367 meebo-_sharableItem" ev_id="83" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-curves.jpg" style="-moz-user-select: none;" title="5 curves" width="210" /><br />
<img alt="5 curves mask" class="alignnone size-medium wp-image-4368 meebo-_sharableItem" ev_id="84" height="263" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-curves-mask-500x263.jpg" style="-moz-user-select: none;" title="5 curves mask" width="500" /><br />
Levels<br />
<img alt="5 levels" class="alignnone size-full wp-image-4369 meebo-_sharableItem" ev_id="85" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-levels.jpg" style="-moz-user-select: none;" title="5 levels" width="210" /><br />
<img alt="5 level mask" class="alignnone size-medium wp-image-4370 meebo-_sharableItem" ev_id="86" height="282" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-level-mask-500x282.jpg" style="-moz-user-select: none;" title="5 level mask" width="500" /><br />
Brightness and Contrast<br />
<img alt="5 bc" class="alignnone size-full wp-image-4371 meebo-_sharableItem" ev_id="87" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-bc.jpg" style="-moz-user-select: none;" title="5 bc" width="210" /><br />
<img alt="5 bc mask" class="alignnone size-medium wp-image-4372 meebo-_sharableItem" ev_id="88" height="281" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-bc-mask-499x281.jpg" style="-moz-user-select: none;" title="5 bc mask" width="499" /><br />
Go back to the orignal “lava” layer and make a few more duplcations, drag those duplicated lava layer on top of the castle layer, change their layer blending mode to “soft light”, apart from the one on the bottom – set it to “screen”:<br />
<img alt="5 lava paste" class="alignnone size-medium wp-image-4373 meebo-_sharableItem" ev_id="89" height="382" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-lava-paste-500x382.jpg" style="-moz-user-select: none;" title="5 lava paste" width="500" /><br />
Now we can add some smoke effect to the image. To do this, create a new layer called “smoke” and render some cloud on it, add a lens flare in the centre top:<br />
<img alt="5 cloud" class="alignnone size-medium wp-image-4374 meebo-_sharableItem" ev_id="90" height="278" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-cloud-500x278.jpg" style="-moz-user-select: none;" title="5 cloud" width="500" /><br />
Add the following mask to this cloud layer:<br />
<img alt="5 cloud mask" class="alignnone size-medium wp-image-4375 meebo-_sharableItem" ev_id="91" height="280" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-cloud-mask-500x280.jpg" style="-moz-user-select: none;" title="5 cloud mask" width="500" /><br />
Change the blending mode of this cloud layer to “color burn”, you will have the following effect:<br />
<img alt="5 effect 2" class="alignnone size-medium wp-image-4376 meebo-_sharableItem" ev_id="92" height="275" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-effect-2-500x275.jpg" style="-moz-user-select: none;" title="5 effect 2" width="500" /><br />
<h3>Step 6</h3>Now let’s add some skulls to the scene. Load the “Skull” image into Photoshop, drag it onto our document, resize and position it as shown below: (I have already erased the edge off and desaturate it)<br />
<img alt="6 resize" class="alignnone size-medium wp-image-4377 meebo-_sharableItem" ev_id="93" height="280" src="http://www.psdvault.com/wp-content/uploads/2009/12/6-resize-499x280.jpg" style="-moz-user-select: none;" title="6 resize" width="499" /><br />
Add the following two adjustment layer to it as clipping mask:<br />
Curves<br />
<img alt="6 curves" class="alignnone size-full wp-image-4378 meebo-_sharableItem" ev_id="94" height="356" src="http://www.psdvault.com/wp-content/uploads/2009/12/6-curves.jpg" style="-moz-user-select: none;" title="6 curves" width="214" /><br />
Color Balance<br />
<img alt="6 col bal" class="alignnone size-full wp-image-4379 meebo-_sharableItem" ev_id="95" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/6-col-bal.jpg" style="-moz-user-select: none;" title="6 col bal" width="210" /><br />
Create a new layer called “skull shadow” below the skull layer, use a black brush with 30% flow and opacity, gently paint some shadow for the skull:<br />
<img alt="6 shadow" class="alignnone size-medium wp-image-4380 meebo-_sharableItem" ev_id="96" height="323" src="http://www.psdvault.com/wp-content/uploads/2009/12/6-shadow-500x323.jpg" style="-moz-user-select: none;" title="6 shadow" width="500" /><br />
Put those skulls stuff into a folder, then duplicate the folder and scatter the skull around the canvas (make sure to adjust the shadow position accordingly)<br />
You can duplicate as many as you want, I only did it once for demonstrate purpose here:<br />
<img alt="6 effect" class="alignnone size-medium wp-image-4381 meebo-_sharableItem" ev_id="97" height="275" src="http://www.psdvault.com/wp-content/uploads/2009/12/6-effect-500x275.jpg" style="-moz-user-select: none;" title="6 effect" width="500" /><br />
<h3>Step 7</h3>Now let’s add some flying monster to the image. Load the “Dragon” image into photoshop, drag it onto our document on name the layer “dragon”. Desaturate the layer and change its blending mode to “Hard Light”, you will have the following effect:<br />
<img alt="7 dragon" class="alignnone size-medium wp-image-4382 meebo-_sharableItem" ev_id="98" height="365" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-dragon-500x365.jpg" style="-moz-user-select: none;" title="7 dragon" width="500" /><br />
Add the following two adjustment layers as clipping mask to the dragon layer:<br />
Colour Balance<br />
<img alt="7 col sha" class="alignnone size-full wp-image-4383 meebo-_sharableItem" ev_id="99" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-col-sha.jpg" style="-moz-user-select: none;" title="7 col sha" width="210" /><br />
<img alt="7 col mid" class="alignnone size-full wp-image-4385 meebo-_sharableItem" ev_id="100" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-col-mid.jpg" style="-moz-user-select: none;" title="7 col mid" width="210" /><br />
<img alt="7 col hig" class="alignnone size-full wp-image-4384 meebo-_sharableItem" ev_id="101" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-col-hig.jpg" style="-moz-user-select: none;" title="7 col hig" width="210" /><br />
Curves<br />
<img alt="7 curves" class="alignnone size-full wp-image-4386 meebo-_sharableItem" ev_id="102" height="336" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-curves.jpg" style="-moz-user-select: none;" title="7 curves" width="210" /><br />
You will have the following effect:<br />
<img alt="7 effect" class="alignnone size-medium wp-image-4389 meebo-_sharableItem" ev_id="103" height="358" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-effect-500x358.jpg" style="-moz-user-select: none;" title="7 effect" width="500" /><br />
To add some motion to the monster, we can dupliate the dragon layer once and put it on top of the adjustment layers, apply the following motion blur settings to the duplicated layer:<br />
<img alt="7 motion blur" class="alignnone size-full wp-image-4390 meebo-_sharableItem" ev_id="104" height="348" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-motion-blur.jpg" style="-moz-user-select: none;" title="7 motion blur" width="309" /><br />
change the blending mode to “color dodge” and duplicate it a few more times:<br />
<img alt="7 effect 2" class="alignnone size-medium wp-image-4387 meebo-_sharableItem" ev_id="105" height="368" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-effect-2-500x368.jpg" style="-moz-user-select: none;" title="7 effect 2" width="500" /><br />
Make a folder and put all dragon layers into it, duplicate the folder and resize and rotate it, postion it to the left, as show below: (don’t forget reduce the opacity of the dragon a bit, because it’s a bit further away)<br />
<img alt="7 effect 3" class="alignnone size-medium wp-image-4388 meebo-_sharableItem" ev_id="106" height="285" src="http://www.psdvault.com/wp-content/uploads/2009/12/7-effect-3-500x285.jpg" style="-moz-user-select: none;" title="7 effect 3" width="500" /><br />
<h3>Step 8</h3>Now let’s add our hero onto the image. Load the “Warrior” image into Photoshop, drag it onto our canvas and name the layer “hero”, resize it and put it to the position as shown below: (erase and desaturate as usual, set blending mode to “Vivid Light”)<br />
<img alt="8 paste" class="alignnone size-medium wp-image-4391 meebo-_sharableItem" ev_id="107" height="348" src="http://www.psdvault.com/wp-content/uploads/2009/12/8-paste-500x348.jpg" style="-moz-user-select: none;" title="8 paste" width="500" /><br />
Duplicate this layer twice, keep the blending mode as “vivid light”. You wll have the following effect:<br />
<img alt="8 dup" class="alignnone size-medium wp-image-4392 meebo-_sharableItem" ev_id="108" height="340" src="http://www.psdvault.com/wp-content/uploads/2009/12/8-dup-500x340.jpg" style="-moz-user-select: none;" title="8 dup" width="500" /><br />
Use the same method as used for the skull, paint some shadow under the hero by make a new layer called “hero shadow”:<br />
<img alt="8 sha" class="alignnone size-medium wp-image-4393 meebo-_sharableItem" ev_id="109" height="294" src="http://www.psdvault.com/wp-content/uploads/2009/12/8-sha-500x294.jpg" style="-moz-user-select: none;" title="8 sha" width="500" /><br />
<h3>Step 9</h3>That’s pretty much it! To spice up the image a bit, I added a few more lighting layers by simply creating a new layer with the overlay blending mode, grab a white big soft brush, and paint over the following areas:<br />
<img alt="9 paint" class="alignnone size-medium wp-image-4394 meebo-_sharableItem" ev_id="110" height="377" src="http://www.psdvault.com/wp-content/uploads/2009/12/9-paint-500x377.jpg" style="-moz-user-select: none;" title="9 paint" width="500" /><br />
Finally I flatten the image, reduce the noise of the image a bit with the following settings:<br />
<img alt="9 red" class="alignnone size-full wp-image-4395 meebo-_sharableItem" ev_id="111" height="552" src="http://www.psdvault.com/wp-content/uploads/2009/12/9-red.jpg" style="-moz-user-select: none;" title="9 red" width="300" /><br />
and here is my final effect for this tutorial: (click to enlarge)<br />
<a href="http://www.psdvault.com/wp-content/uploads/2009/12/hell-scene-flatten1.jpg"><img alt="hell-scene-flatten" class="alignnone size-medium wp-image-4396 meebo-_sharableItem" ev_id="112" height="285" src="http://www.psdvault.com/wp-content/uploads/2009/12/hell-scene-flatten1-500x285.jpg" style="-moz-user-select: none;" title="hell-scene-flatten" width="500" /></a><br />
Alternative version which I adjusted the color saturation: (click to enlarge)<br />
<a href="http://www.psdvault.com/wp-content/uploads/2009/12/hell-scene-flatten-2.jpg"><img alt="hell-scene-flatten-2" class="alignnone size-medium wp-image-4400 meebo-_sharableItem" ev_id="113" height="285" src="http://www.psdvault.com/wp-content/uploads/2009/12/hell-scene-flatten-2-500x285.jpg" style="-moz-user-select: none;" title="hell-scene-flatten-2" width="500" /></a><br />
<br />
<br />
<b style="color: red;">Credit To : http://www.psdvault.com/photo-effect/design-a-dantes-inferno-game-inspired-dark-flaming-hell-scene-in-photoshop/ </b>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-86327693554259961042009-12-18T09:50:00.001-08:002009-12-18T09:51:21.318-08:00jQuery Column FiltersThis jQuery plugin for a quick way of allowing table columns to be filtered by the user. It will add text box’s to the top of each column in a table, by typing into the text box’s you can narrow the number of rows in the table down to those that match your search text. It allows for wild cards and a NOT operator (ie show me everything that doesn’t match my search text).<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxrain.com/rainImage/070800.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="98" src="http://www.ajaxrain.com/rainImage/070800.jpg" width="320" /></a><br />
</div><div style="text-align: center;"><br />
</div><br />
<pre class="brush: javascript">$('#filterTable').columnFilters(); </pre>To use this script you need to download jQuery (included in the download below). Each table you apply the script to must be well formed; containing atleast a tbody and a thead. The script doesn’t yet compensate for any cells that have a colspan greater than 1. Below are a list of the variables that can be changed and there defaults. Please also check out the demo!<br />
* wildCard: (default ‘*’) Allow you to search for any characters. eg ‘*m’ or ‘*12*3′<br />
* notCharacter: (default ‘!’) Allow you to NOT the results. eg ‘!T’ would return all rows that don’t start with ‘T’<br />
* caseSensitive: (default ‘false’) Are results case sensitive.<br />
* minSearchCharacters: (default ‘1′) The minimum amount of characters that each search string must contain before the filter is applied.<br />
* excludeColumns: (default ‘[]‘) Which columns, if any, do not require a filter. This array is zero indexed. eg ‘[0,1]‘<br />
* alternateRowClassNames: (default ‘[]‘) An array of alternating class names for each row in order to keep odd and even row styling on tables. Maximum of two items. eg ['rowa','rowb']<br />
* underline (default ‘false’) Set to true if the script is to underline the search text whilst filtering is in progress… good for tables with lots of rows where the filter may take a second. (not in Opera)<br />
One last thing, the row created containing the text box’s is given a class name of ‘filterColumns’ so that you may style that row using CSS.<br />
<b>Tested to work in the following browsers;</b><br />
* IE 7 & 6<br />
* FireFox 2.0.0.14<br />
* Opera 9.24<br />
* Safari for windows<br />
Demo: <a href="http://www.ajaxupdates.com/visit_website.php?url=http://www.tomcoote.co.uk/JavaScript/columnFilters/demo.html" target="_top">http://www.tomcoote.co.uk/JavaScript/columnFilters/demo.html</a><br />
Download: <a href="http://www.ajaxupdates.com/visit_website.php?url=http://www.tomcoote.co.uk/Downloads/columnFilters.zip" target="_top">http://www.tomcoote.co.uk/Downloads/columnFilters.zip</a><br />
Source: <a href="http://www.ajaxupdates.com/visit_website.php?url=http://plugins.jquery.com/project/ColumnFilters" target="_top">http://plugins.jquery.com/project/ColumnFilters</a> <br />
<pre class="brush: javascript"> </pre>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-2950798744901412102009-12-18T09:49:00.000-08:002009-12-18T09:49:34.814-08:00Rotating jQuerry tabs<div style="text-align: center;">Generally we use tabs to break content into sections that can be swapped to save space, very similar to accordion. By default tab widget will swap between tabbed section onClick,but you can change the events onHover option. Content of tab can be loaded via AJAX by setting href on a tab.<br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxlady.com/wp-content/uploads/2009/12/rotating_jquerry.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.ajaxlady.com/wp-content/uploads/2009/12/rotating_jquerry.gif" /></a><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: justify;"><strong>Download: </strong><a href="http://jqueryui.com/download" target="_blank">Rotating_jQuery_Tab</a><br />
</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div style="text-align: center;"><br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-45267695458014041292009-12-17T03:12:00.000-08:002009-12-17T03:12:03.672-08:00Design A Simple Illustration for ChristmasIn this tutorial, you’ll go through easy steps and techniques to design a simple illustration for Christmas. You’ll learn how to use the brush presets and modify its properties. Let’s get started!<span id="more-30970180"></span><br />
<h2>Final Image Preview</h2><img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/32.jpg" /><br />
Create a new document (<strong>Ctrl+N</strong>) in Photoshop with the size <strong>1920px</strong> by <strong>1200px</strong> (<strong>RGB</strong> color mode) at a resolution of <strong>72 pixels/inch</strong>. Using the <strong>Rectangle Tool (U)</strong>, let’s represent a big rectangle reserved for background we want to have.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/1-.jpg" /><br />
For this layer click on <strong>Add a layer style</strong> icon from bottom part of the <strong>Layers panel</strong> and select <strong>Gradient Overlay</strong>:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/1.jpg" /><br />
Click in the color bar to open the <strong>Gradient Editor</strong> and set the color stops as shown. Click <strong>OK </strong>to close the <strong>Gradient Editor</strong> dialog box.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/2.jpg" /><br />
We’ve got the next background:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/3.jpg" /><br />
<strong>Create a new layer</strong> and use on it the <strong>Soft Round</strong> brush from <strong>Brush Tool (B)</strong>.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/4.jpg" /><br />
Change the <strong>Foreground color</strong> to <strong>black</strong>, set <strong>Opacity </strong>to<strong> 10%</strong> for this brush in <strong>Options bar</strong> and paint the bottom part of the picture as shown:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/5.jpg" /><br />
Next we must <strong>create a new layer</strong> and apply on it the <strong>Hard Round</strong> brush to outline the contours of the Christmas tree.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/6.jpg" /><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/7.jpg" /><br />
Next step we’ll download a set of <a href="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/brushes_533.rar" target="_blank">brushes</a> for in Adobe Photoshop, named: <em>stars and blinks </em>. <strong>Create a new layer</strong> and go to <strong>Brush Tool (B)</strong>, select the next brush from downloaded set.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/8.jpg" /><br />
We need to customize our brush in <strong>Brushes panel (F5)</strong>, select the <strong>Brush Tip Shape</strong>. Click and drag any of the sliders to change the <strong>Diameter</strong> and brush <strong>Spacing</strong> as show. The <strong>Preview window</strong> displays the changed brushstroke.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/9.jpg" /><br />
Go to <strong>Shape Dynamics</strong>:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/10.jpg" /><br />
Also change the <strong>Scattering</strong> settings:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/11.jpg" /><br />
This brush should be used in the limits of the tree’s contours and garland’s ones.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/12.jpg" /><br />
On the next <strong>new layer</strong> we’ll use the same brush, but of bigger diameter<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/13.jpg" /><br />
Fill the tree’s silhouette with new elements. Then we’ll apply the below shown brush to represent a star on the tree’s top:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/14.jpg" /><br />
<strong>Create a new layer</strong> again and use on it the above mentioned brush to insert one more star of white color on the tree’s top. Using the <strong>Free Transform (Ctrl+T)</strong>, turn over the pictured star on <strong>90 degrees</strong> around its axe.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/15.jpg" /><br />
<strong>Create a new layer</strong>, using here the already known brush out of the stars and blinks set.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/16.jpg" /><br />
Customize our brush in <strong>Brushes panel (F5)</strong>. Go to <strong>Shape Dynamics</strong> and change the settings as shown. The <strong>Preview window</strong> displays the changed brushstroke.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/17.jpg" /><br />
Use the brush on the indicated places below:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/18.jpg" /><br />
On the next <strong>new layer</strong> we’ll apply the earlier set brush of white color but change the <strong>Diameter</strong> of the brush (set <strong>Opacity</strong> to <strong>50%</strong> in <strong>Options bar</strong>) to add more elements on the Christmas tree.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/19.jpg" /><br />
Next we’ll use the <strong>Ellipse Tool (U)</strong> to represent a Christmas tree ball.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/20.jpg" /><br />
Click on <strong>Add a layer style</strong> icon from bottom part of the <strong>Layers panel</strong> and select <strong>Outer Glow</strong>:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/21.jpg" /><br />
Add <strong>Inner Glow</strong><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/22.jpg" /><br />
Set the <strong>Bevel and Emboss<br />
</strong><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/23.jpg" /><br />
Also add <strong>Gradient Overlay</strong><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/24.jpg" /><br />
Click in the color bar to open the <strong>Gradient Editor</strong> and set the color stops as shown. Click <strong>OK</strong> to close the <strong>Gradient Editor</strong> dialog box.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/25.jpg" /><br />
We’ve got the next Christmas ball:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/26.jpg" /><br />
Make several copies of the last made layer and choose the <strong>Free Transform (Ctrl+T)</strong> to change the copies’ sizes, placing them the same way demonstrated below:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/27.jpg" /><br />
<strong>Create a new layer</strong> and select the next brushes from downloaded set.<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/28.jpg" /><br />
Change the <strong>Foreground color</strong> to <strong>#FCFD00</strong> and using this brush represent several small stars as shown:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/29.jpg" /><br />
Now you can delete the layer contain the contours:<br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/30.jpg" /><br />
<strong>Create a new layer</strong> again, represent on it several small stars on the background with the same brush of white color. Select for the last made layer the next filter - <strong>Filter>Blur>Gaussian blur</strong><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/31.jpg" /><br />
<img alt="Design a simple illustration for Christmas in Adobe Photoshop CS4" src="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/32.jpg" /><br />
The Christmas tree is finished!<br />
View full size <a href="http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial511/design-a-simple-illustration-for-christmas.jpg">here</a>.<br />
<b>Credit Goes To : http://www.tutorialkit.com/ </b>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-66120674198937439662009-12-15T00:36:00.000-08:002009-12-15T00:36:39.542-08:00CMS For Flash Websites: FlashMoto CMS<div style="text-align: center;"> When we hear about a <strong>Flash CMS</strong>, there is mostly a prejudice that it may not be that functional.<br />
</div><div> </div><div style="text-align: center;"> <a href="http://www.flashmoto.com/" target="_blank"><strong>FlashMoto CMS</strong></a> is a totally different one which is <strong>quite impressive & really works</strong> for managing Flash-based websites.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> With the help of a good-looking & easy-to-use interface, a website is controlled just like a standard CMS but with the extras that Flash offers.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> <a href="http://www.flashmoto.com/" target="_blank"><img alt="FlashMoto Logo" height="98" src="http://www.webresourcesdepot.com/wp-content/uploads/image/flashmoto-logo.jpg" width="480" /></a><br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"> What does it offer in a snapshot?</h3><div style="text-align: center;"> </div><div style="text-align: center;"> Using <strong>FlashMoto CMS</strong>, it is possible to:<br />
</div><div style="text-align: center;"> </div><ul style="text-align: center;"><li> add unlimited number of pages, update or delete them</li>
<li> manage your website menu (with sub-menus)</li>
<li> create image galleries & add-remove images to them</li>
<li> create forms</li>
<li> upload videos & music</li>
<li> insert shapes or other Flash files</li>
</ul><div style="text-align: center;"> </div><div style="text-align: center;"> The content is created using a <strong>WYSIWYG editor</strong>. There is a <strong>media library</strong> where you can upload images, video or SWF files & use them in any part of the website with a few clicks.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> <a href="http://www.flashmoto.com/" target="_blank"><img alt="FlashMoto Admin Panel" height="245" src="http://www.webresourcesdepot.com/wp-content/uploads/image/flashmoto-admin-panel.jpg" width="480" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> It has a <strong>built-in gallery component</strong> for displaying a list of images and/or videos. This feature is specially useful for designers, photographers or anyone willing to present a portfolio.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> Adding a standalone background music or <strong>embedding videos from popular services</strong> like Youtube, Vimeo is also a breeze.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> Similar to HTML websites, websites created with <strong>FlashMoto CMS</strong> are indexable by search engines & every page has their own URLs + titles.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> It also allows you to <strong>define the Google Analytics details</strong> & statistics of the website will be tracked (every page will tracked even it is a Flash website).<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><span id="more-1325"></span> <br />
</div><div style="text-align: center;"> <a href="http://templates.flashmoto.com/" target="_blank"><img alt="FlashMoto Templates" height="250" src="http://www.webresourcesdepot.com/wp-content/uploads/image/flashmoto-templates.jpg" width="480" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> Like mentioned in the beginning, <strong>FlashMoto CMS</strong> is like a standard CMS, it controls websites that are prepared to fit the <strong>XML-based templating system</strong> it offers.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> Any Flash developer can build new templates (a detailed documentation is provided) or there are <a href="http://templates.flashmoto.com/" target="_blank"><strong>FlashMoto CMS templates</strong></a> offered which are ready to go.<br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"> Besides all these features, there are much more like:<br />
</div><div style="text-align: center;"> </div><ul style="text-align: center;"><li> various other built-in components like scroll bar, progress bar or paginator</li>
<li> ability to upload <strong>custom fonts</strong></li>
<li> infoModule to display news</li>
<li> & much more..</li>
</ul><div style="text-align: center;"> </div><h3 style="text-align: center;"> Conclusion</h3><div style="text-align: center;"> </div><div style="text-align: center;"> This <a href="http://www.flashmoto.com/" target="_blank"><strong>Flash CMS</strong></a> is a very flexible & powerful product which is handy for:<br />
</div><div style="text-align: center;"> </div><ul style="text-align: center;"><li> any designer that creates websites in Flash & wants to provide a backend to customers</li>
<li> anyone willing to create a website easily & quickly using ready-to-go templates</li>
</ul><div style="text-align: center;"> </div><div style="text-align: center;"> It is possible to give it a try with the <a href="http://www.flashmoto.com/online-demo/" target="_blank">demo</a> provided & better see how functional it can be.<br />
</div><div style="text-align: left;">Credit To : http://www.flashmoto.com/ <br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-49826741779268223082009-12-11T03:19:00.000-08:002009-12-11T03:19:26.365-08:00jQuery Select Box<div style="text-align: center;">This is an unobtrusive jQuery plugin that allows you to replace the HTML select box with a styled dropdown menu.<br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.ajaxrain.com/rainImage/27110702.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="98" src="http://www.ajaxrain.com/rainImage/27110702.jpg" width="320" /></a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;">As most of us, I hate IE6 but I have to deal with it. At work, our users use exclusively IE6 so you can imagine the nightmare! I came across the IE bug where theselect box stay always on top of any div even if you define a z-index value, more on the subject can be found here and here. So this plugin try to resolve the problem by replacing theselect box by dropdown menu.<br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;">Know issues<br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;">* On Mac with both Safari and FF when you select a value using Enter key the form is submitted, it seems that “preventDefault” is not working. If anyone has an idea about how to resolve this, just drop me a mail or a leave a comment.<br />
</div><div style="text-align: center;">* When an option is selected using the mouse and when you reopen the list the selected option is not highlighted anymore.<br />
<br />
</div>Demo: http://www.brainfault.com/demo/selectbox/<br />
Download: http://www.brainfault.com/download/jquery.selectbox-0.3.zip<br />
<br />
Source: http://www.brainfault.com/2007/07/23/select-box-replacement/ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-69024850209427566692009-12-10T00:46:00.000-08:002009-12-10T00:48:42.374-08:00How To Create a Stunning Vista Inspired Menu<span style="color: #42423d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: italic; line-height: 17px;">This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.</span><span style="color: #42423d; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px;"></span><br />
<h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 1</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-1.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-1.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 2</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Create a Rectangle (U) that fills the lower ruled area and label the layer "lower bar." Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now create another rectangle in the upper rules area and name the layer "upper bar." Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-2.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-2.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 3</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to "lower highlight." Now draw another line directly above the previous and change the color to #484b4d and change the name to "upper highlight." Group these layers with bar layers in a group called "bar." This stage completes the basis of the menu.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-3.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-3.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 4</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now that the menu bar is complete, we can create a set of dividers to go between the text. Select the Line Tool again and leave the weight at 2px. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672. Label this layer "upper divider."<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to #43474b. Rename this layer to "lower divider." Group the two sections of the divider and name the group "divider."<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-4.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-4.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 5</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group "links."<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now copy your dividers and space them in between the links. You should end up with something similar to this.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-5.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-5.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 6</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-background.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-background.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-6.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-6.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 7</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called "blur."<br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Paste the shape in the layer called "blur" and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-7.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-7.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 8</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-8.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-8.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Step 9</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-9.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/vstep-9.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><h3 style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #27221f; font-family: Helvetica, Arial, sans-serif; font-size: 2.7em; font-style: inherit; font-weight: bold; letter-spacing: -0.04em; line-height: 1.05em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">Conclusion</h3><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><br />
</div><div style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.<br />
</div><div class="tutorial_image" style="background-color: #f0f0f0; border-bottom-color: rgb(206, 207, 208); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(206, 207, 208); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(206, 207, 208); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(206, 207, 208); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 6px; padding-left: 0px; padding-right: 0px; padding-top: 10px; text-align: center; vertical-align: baseline;"><img class="img" original="http://psdtuts.s3.amazonaws.com/40_Vista/conclusion.jpg" src="http://psdtuts.s3.amazonaws.com/40_Vista/conclusion.jpg" style="border-bottom-color: rgb(203, 203, 203); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(203, 203, 203); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(203, 203, 203); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(203, 203, 203); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-size: 11px; font-style: inherit; font-weight: inherit; margin-bottom: auto; margin-left: auto; margin-right: auto; margin-top: auto; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" /><br />
</div><div style="text-align: center;"><div style="text-align: left;">Credit To : http://psdtuts.com/interface-tutorials/how-to-create-a-stunning-vista-inspired-menu<br />
</div></div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-35601456966228957752009-12-08T23:00:00.000-08:002009-12-09T00:52:37.397-08:00Draw a Rather Cute Unique Style Play Button in Photoshop<h3>Step 1</h3>Create a new document sized 1000 x 600px. Fill the background with the following gradient:<br />
<img alt="1 fill" class="alignnone size-medium wp-image-4252 meebo-_sharableItem" height="298" src="http://www.yaaad.com/Image-Hosting/images/ng88vuczirlbndsclx7v.png" title="1 fill" width="499" /><br />
Duplicate the background layer once, resize and rotate the duplicated layer, use a big soft brush to erase the left and right side, and position it as shown below:<br />
<img alt="1 resize and rotate" class="alignnone size-medium wp-image-4253 meebo-_sharableItem" ev_id="48" height="296" src="http://www.yaaad.com/Image-Hosting/images/jdp3t4ptd1tqw5a1mdgw.png" style="-moz-user-select: none;" title="1 resize and rotate" width="500" /><br />
We now have a reasonably good-looking background to work on. Personally I feel sometimes a nice background help creating the mood we need to continue working on the graphic.<br />
<h3>Step 2</h3>Create a new layer named “circle”, grab the “Ellipse Tool” from the toolbox:<br />
<img alt="2 ellipse tool" class="alignnone size-full wp-image-4278 meebo-_sharableItem" height="168" src="http://www.yaaad.com/Image-Hosting/images/8esz3soz0caupnl19nj4.png" style="-moz-user-select: none;" title="2 ellipse tool" width="273" /><br />
Make sure your setting is set to below: (white fill color)<br />
<img alt="2 e setting" class="alignnone size-medium wp-image-4279" height="24" src="http://www.yaaad.com/Image-Hosting/images/5p19agy6plo7z39e0xc1.png" title="2 e setting" width="500" /><br />
hold down the “Shift” key and draw a white circle on the layer:<br />
<h3><img alt="2 draw" class="alignnone size-medium wp-image-4256 meebo-_sharableItem" ev_id="49" height="275" src="http://www.yaaad.com/Image-Hosting/images/8unzkya0fkpyl7irclfc.png" style="-moz-user-select: none;" title="2 draw" width="500" /></h3>Apply the following layer blending options to this circle layer:<br />
Drop Shadow<br />
<img alt="2 drop sha" class="alignnone size-medium wp-image-4257 meebo-_sharableItem" ev_id="50" height="350" src="http://www.yaaad.com/Image-Hosting/images/r4wgm65w5x5h1fg4lq.png" style="-moz-user-select: none;" title="2 drop sha" width="500" /><br />
Inner Shadow<br />
<img alt="2 inner sha" class="alignnone size-medium wp-image-4260 meebo-_sharableItem" ev_id="51" height="350" src="http://www.yaaad.com/Image-Hosting/images/fibkzmwa4u2kj6joery.png" style="-moz-user-select: none;" title="2 inner sha" width="500" /><br />
Bevel and Emboss<br />
<img alt="2 bevel" class="alignnone size-medium wp-image-4254 meebo-_sharableItem" ev_id="52" height="350" src="http://www.yaaad.com/Image-Hosting/images/xmzsl3h3ozgopgt1v40a.png" style="-moz-user-select: none;" title="2 bevel" width="500" /><br />
Color Overlay<br />
<img alt="2 col over" class="alignnone size-medium wp-image-4255 meebo-_sharableItem" ev_id="53" height="350" src="http://www.yaaad.com/Image-Hosting/images/fibkzmwa4u2kj6joery.png" style="-moz-user-select: none;" title="2 col over" width="500" /><br />
<br />
Gradient Overlay<br />
<img alt="2 gra over" class="alignnone size-medium wp-image-4259 meebo-_sharableItem" ev_id="54" height="350" src="http://www.yaaad.com/Image-Hosting/images/9wnfgceetlsu7452y6r.png" style="-moz-user-select: none;" title="2 gra over" width="500" /><br />
and here is the effect so far:<br />
<img alt="2 effect" class="alignnone size-medium wp-image-4258 meebo-_sharableItem" ev_id="55" height="286" src="http://www.yaaad.com/Image-Hosting/images/ncfvnvqxfs35px6pg6cd.png" style="-moz-user-select: none;" title="2 effect" width="500" /><br />
The colour I chose for this play is orange, however you can try out different colour such as blue, green, purple – the choice is yours.<br />
<h3>Step 3</h3>Now we can add a glossy overlay to the circle background to make it more attractive :) To do this, create a new layer on top of the “circle” layer, name it as “glossy overlay”. Load the selection of the “circle” layer by Ctrl + left click the thumbnail on the layer pallette, as shown below:<br />
<img alt="3 load selection" class="alignnone size-full wp-image-4265 meebo-_sharableItem" ev_id="56" height="262" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-load-selection.png" style="-moz-user-select: none;" title="3 load selection" width="386" /><br />
Click on the “Glossy Overlay” layer, then select the “Elliptical Marquee Tool” and choose the “subtract from selection” option:<br />
<img alt="3 subtract" class="alignnone size-medium wp-image-4280 meebo-_sharableItem" ev_id="57" height="133" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-subtract-500x133.png" style="-moz-user-select: none;" title="3 subtract" width="500" /><br />
Then draw a selection around 50% the height of the original “circle” layer on the “Glossy Overlay” layer, you will have the following effect:<br />
<img alt="3 after sub" class="alignnone size-medium wp-image-4261 meebo-_sharableItem" ev_id="58" height="327" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-after-sub-499x327.png" style="-moz-user-select: none;" title="3 after sub" width="499" /><br />
Fill the selection with white colour, then change the blending mode to “overlay”, opacity around 30%.<br />
Press Ctrl + T and use the Free Transform Tool to rotate the selection clockwise a bit, you will have the following effect:<br />
<img alt="3 effect 2" class="alignnone size-medium wp-image-4262 meebo-_sharableItem" ev_id="59" height="311" src="http://www.psdvault.com/wp-content/uploads/2009/12/3-effect-2-500x311.png" style="-moz-user-select: none;" title="3 effect 2" width="500" /><br />
<h3>Step 4</h3>Create a new layer on top of the glossy overlay layer, grab the “polygon tool” from the toolbox, apply the following option to it: (Make sure to choose “3″ for sides, because we’re drawing a triangle!)<br />
<img alt="4 poly sides 3" class="alignnone size-medium wp-image-4272" ev_id="60" height="46" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-poly-sides-3-500x46.png" title="4 poly sides 3" width="500" /><br />
After drawing, rotate it a bit clockwise so it matches the angle of the background:<br />
<img alt="4 after draw" class="alignnone size-medium wp-image-4268 meebo-_sharableItem" ev_id="61" height="282" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-after-draw-499x282.png" style="-moz-user-select: none;" title="4 after draw" width="499" /><br />
Apply the following layer blending options to it:<br />
Drop shadow<br />
<img alt="4 drop shadow" class="alignnone size-medium wp-image-4270 meebo-_sharableItem" ev_id="62" height="350" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-drop-shadow-500x350.png" style="-moz-user-select: none;" title="4 drop shadow" width="500" /><br />
Inner Glow<br />
<img alt="4 inner sha" class="alignnone size-medium wp-image-4271 meebo-_sharableItem" ev_id="63" height="350" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-inner-sha-500x350.png" style="-moz-user-select: none;" title="4 inner sha" width="500" /><br />
Bevel and Emboss<br />
<img alt="4 bevel" class="alignnone size-medium wp-image-4269 meebo-_sharableItem" ev_id="64" height="350" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-bevel-500x350.png" style="-moz-user-select: none;" title="4 bevel" width="500" /><br />
<b>(Ingore the gradient overlay setting, I decided not to include it in the end)</b><br />
Add a layer mask to this triangle layer, use a smalll soft brush, erase the joint points a bit:<br />
<img alt="4 effect" class="alignnone size-medium wp-image-4282 meebo-_sharableItem" ev_id="65" height="387" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-effect-500x387.png" style="-moz-user-select: none;" title="4 effect" width="500" /><br />
You will have the following effect:<br />
To add a bit depth to the play button, we can duplicate the triangle layer once, disable all layer effect on the duplicated layer, reduce its height and width a bit, you will have following effect:<br />
<img alt="4 effect 2" class="alignnone size-medium wp-image-4283 meebo-_sharableItem" ev_id="66" height="355" src="http://www.psdvault.com/wp-content/uploads/2009/12/4-effect-2-500x355.png" style="-moz-user-select: none;" title="4 effect 2" width="500" /><br />
<h3>Step 5</h3>To add a bit creativity to the button, I decided to add some smaller circle around it, with a different colour. To do this, I simple duplicated the original circle layer once and put the duplicated layer below it. On the duplicated layer, cancel all layer blending effects except the<b> Bevel and Emboss and Gradient Overlay options:</b><br />
Bevel and Emboss<br />
<img alt="5 bevel" class="alignnone size-medium wp-image-4273 meebo-_sharableItem" ev_id="67" height="350" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-bevel-500x350.png" style="-moz-user-select: none;" title="5 bevel" width="500" /><br />
Gradient Overlay<br />
<img alt="5 gradient" class="alignnone size-medium wp-image-4277 meebo-_sharableItem" ev_id="68" height="350" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-gradient-500x350.png" style="-moz-user-select: none;" title="5 gradient" width="500" /><br />
Use the free tranform tool to resize it to a smaller size, then duplicate it for another three times, scatter those layers around the circle as shown below<br />
<img alt="5 effect" class="alignnone size-medium wp-image-4275 meebo-_sharableItem" ev_id="69" height="356" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-effect-500x356.png" style="-moz-user-select: none;" title="5 effect" width="500" /><br />
Then we can add shadow onto the image to make it deeper – To do this simply create a new layer on top of the “background copy” layer, and grab a big black brush around the same size as the circle layer, do a single click on it, then resize the layer as shown below:<br />
<img alt="5 resize shadow" class="alignnone size-medium wp-image-4284 meebo-_sharableItem" ev_id="70" height="297" src="http://www.psdvault.com/wp-content/uploads/2009/12/5-resize-shadow-500x297.png" style="-moz-user-select: none;" title="5 resize shadow" width="500" /><br />
Reduce its opacity a bit and position it behind the circle, and here is the final effect: (click to enlarge)<br />
<a href="http://www.psdvault.com/wp-content/uploads/2009/12/glossy-play-button-final2.jpg"><img alt="glossy-play-button-final" class="alignnone size-medium wp-image-4285 meebo-_sharableItem" height="300" src="http://www.psdvault.com/wp-content/uploads/2009/12/glossy-play-button-final2-500x300.jpg" style="-moz-user-select: none;" title="glossy-play-button-final" width="500" /></a><br />
That’s for this tutorial! Drop me a comment if you have any trouble with it, I will try my best to help you out :)<br />
<br />
<b style="color: red;">Credit To</b> :<a href="http://www.psdvault.com/drawing/draw-a-rather-cute-unique-style-play-button-in-photoshop/" target="_blank"> http://www.psdvault.com/drawing/draw-a-rather-cute-unique-style-play-button-in-photoshop/ </a>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-21490997641472617732009-12-08T22:37:00.000-08:002009-12-08T22:37:35.004-08:00Create a Powerful Mental Wave Explosion Effect<h3>In this tutorial, I will show you how to create a crazy explosion, like a mix of Magneto's ability with Peter Petrelli's power. We will use images and filters to produce this wave explosion effect. Even though it may look like a difficult tutorial, it's really not that hard. <br />
</h3><h3>Final Image Preview</h3>Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image.<br />
<div class="tutorial_image"><a href="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_full.jpg"><img alt="Final Image Preview" height="449" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/click.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/click.jpg" width="600" /></a><br />
</div><h3>Step 1</h3>Open a new document. I used 800x600px. Look for a road photo on the Internet. The one I used can be downloaded <a href="http://www.sxc.hu/photo/958370/">here</a>. After downloading, place the photo in your document.<br />
<div class="tutorial_image"><img alt="Step 1" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s1.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s1.jpg" /><br />
</div><h3>Step 2</h3>Now we need a photo of a person. The one I used can be found <a href="http://www.sxc.hu/photo/853035">here</a>. Once you have your photo, it's time to extract the guy from the background. Using the Pen Tool(P) create a path like in the image below. After that go to the Paths Palette and create a selection from that path. Then go to Layer>Layer Mask>Reveal Selection. Lastly, I named this layer "dude."<br />
<div class="tutorial_image"><img alt="Step 2" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s2.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s2.jpg" /><br />
</div><h3>Step 3</h3>Go to Edit>Transform>Scale and reduce the size of the guy. Then go to Edit>Transform>Flip Horizontal. We do that to match the light direction.<br />
<div class="tutorial_image"><img alt="Step 3" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s3.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s3.jpg" style="display: inline;" /><br />
</div><h3>Step 4</h3>Go to Image>Adjustments>Curves. The idea here is to darken the guy a little bit so he will fit better with the background. Use the image below as a reference.<br />
<div class="tutorial_image"><img alt="Step 4" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s4.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s4.jpg" style="display: inline;" /><br />
</div><h3>Step 5</h3>Holding Cmd/Ctrl click on the mask thumb of the "dude" layer. That will create a marquee selection of the guy. After that create a new layer. Rename it to "shadow" and fill it with black. Then go to Edit>Transform>Distort and move the vertices to make the shadow in perspective. The last thing here is go to Filter>Blur>Gaussian Blur.<br />
<div class="tutorial_image"><img alt="Step 5" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s5.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s5.jpg" style="display: inline;" /><br />
</div><h3>Step 6</h3>Grab the Ellipse Tool(U). Select Paths instead of Shape Layer. Create a Circle, like the image below. After that grab the Direct Selection Tool(A) and adjust the bottom of the circle.<br />
<div class="tutorial_image"><img alt="Step 6" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s6.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s6.jpg" style="display: inline;" /><br />
</div><h3>Step 7</h3>Create a new layer. Rename it to "clouds." Then go to Filter>Render>Clouds. While holding Alt, click on Clouds. After that go to the Path's Palette and create a selection from the path and mask the layer.<br />
<i>Tip: As you will be using the Render>Clouds, you will probably need to apply the filter several times until you got the clouds just right. Keep working with it until the light and dark areas are in a good position.</i><br />
<div class="tutorial_image"><img alt="Step 7" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s7.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s7.jpg" style="display: inline;" /><br />
</div><h3>Step 8</h3>Go to Filter>Liquefy. In the Liquefy Dialog Box select the Bloat Tool (B). Then for the settings use: Brush Size 550, Brush Density 100, Brush Pressure 100, Brush Rate 60, and Turbulent Jitter 75.<br />
Then select the Show Backdrop Option. That will allow you to see the clouds and the background. It will be necessary to use the Bloat Tool in the right place. Click a few times and deselect the Show Backdrop. Then you will see the effect and will be able to repeat it more times in the correct place.<br />
<div class="tutorial_image"><img alt="Step 8" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s8.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s8.jpg" style="display: inline;" /><br />
</div><h3>Step 9</h3>Change the Blend Mode of the cloud layer to Soft Light. Then create another layer and rename it to "Clouds 2" and repeat Steps 7 and 8. We will need another cloud to make it more turbulent. This time, however, use Multiply for the Blend Mode.<br />
After that, create yet another layer. Rename it to "Clouds 3" and repeat Steps 7 and 8. For this layer use Color Dodge for the Blend Mode. The last thing here is with the Eraser Tool (E) delete some parts. This layer is used to give highlights to the clouds. <br />
<div class="tutorial_image"><img alt="Step 9" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s9.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s9.jpg" style="display: inline;" /><br />
</div><h3>Step 10</h3>Group the "Clouds 3" layer and go to Layer>Layer Mask>Reveal All. After that, select the Brush Tool (B), give it a black color, and mask some parts of the clouds that are close to the ground.<br />
<div class="tutorial_image"><img alt="Step 10" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s10.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s10.jpg" style="display: inline;" /><br />
</div><h3>Step 11</h3>Select the "Clouds" layer and go to Filter>Sharpen>Sharpen More. Then repeat this Sharpen filter on Clouds 2 and 3 layers.<br />
<div class="tutorial_image"><img alt="Step 11" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s11.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s11.jpg" style="display: inline;" /><br />
</div><h3>Step 12</h3>Create a new layer. Rename it to "Glow." Fill it with white and go to the Path Palette. Create a selection from the clouds path as we did in Step 9. Then mask the layer.<br />
After that go to Layer>Layer Style>Outer Glow. Use the default settings. Then go to Layer>Layer Style>Create Layer. This command will create another layer from the Outer Glow. You can delete the white layer and leave just the Outer Glow layer.<br />
<div class="tutorial_image"><img alt="Step 12" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s12.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s12.jpg" style="display: inline;" /><br />
</div><h3>Step 13</h3>Create a folder called "Lights." Move the "Glow" layer to this folder. Next select the "Glow" layer. Then go to Layer>Layer Mask>Reveal All. Then select the Brush Tool, black for the color, and start masking the glow. We need just the outline; however, some bright spots in the middle will give a nice result.<br />
<div class="tutorial_image"><img alt="Step 13" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s13.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s13.jpg" style="display: inline;" /><br />
</div><h3>Step 14</h3>Create a new layer beneath the clouds group. Using the Elliptical Marquee Tool create a selection like the image below. Fill the layer with black and use 40% Opacity.<br />
<div class="tutorial_image"><img alt="Step 14" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s14.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s14.jpg" style="display: inline;" /><br />
</div><h3>Step 15</h3>Go to Layer>Layer Mask>Reveal All. After that select the Gradient Tool(G) and use a black and white gradient. Then mask the layer, like in the image below.<br />
<div class="tutorial_image"><img alt="Step 15" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s15.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s15.jpg" style="display: inline;" /><br />
</div><h3>Step 16</h3>Duplicate the layer and go to Layer>Layer Mask>Apply. Then go to Edit>Transform>Distort. Repeat the same thing we did for the shadow of the guy on this layer. Group these two layers and rename the group to "Shadows."<br />
<div class="tutorial_image"><img alt="Step 16" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s16.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s16.jpg" style="display: inline;" /><br />
</div><h3>Step 17</h3>Create a new layer right above the road photo. Go to Filter>Render>Clouds. Then go to Filter>Distort>ZigZag. Use 100 for the Amount and 5 for the Ridges. For the Style use Pond Ripples.<br />
<div class="tutorial_image"><img alt="Step 17" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s17.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s17.jpg" style="display: inline;" /><br />
</div><h3>Step 18</h3>Now go to Edit>Transform>Distort. Distort the layer until you get the right perspective. After that, change the Blend Mode to Overlay. Again, as we are using Render Clouds, the results may vary so you might need to erase some parts to make it more realistic.<br />
<div class="tutorial_image"><img alt="Step 18" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s18.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s18.jpg" style="display: inline;" /><br />
</div><h3>Step 19</h3>Create an Elliptical Selection like the image below. Then fill it with black. After that, create another Elliptical Selection, but smaller. Then delete that part of the layer. With the Magic Wand Tool(W) select the black part of the layer. <br />
<div class="tutorial_image"><img alt="Step 19" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s19.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s19.jpg" style="display: inline;" /><br />
</div><h3>Step 20</h3>Duplicate the road's layer and select it. Make sure that you still have the Marquee Selection from the Step 19. Then go to Layer>Layer Mask>Reveal Selection. You can delete the black ellipse layer from the Step 19 or just hide it.<br />
Go to Layer>Layer Styles>Bevel and Emboss. This is another way to create the ripple effect. You could use Displace as well.<br />
<div class="tutorial_image"><img alt="Step 20" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s20.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s20.jpg" style="display: inline;" /><br />
</div><h3>Step 21</h3>Go to Layer>New Layer Fill>Gradient. Use Radial for the Style. For the colors use #ddc396 and #2f1e00. Change the Blend mode to Color Dodge.<br />
<div class="tutorial_image"><img alt="Step 21" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s21.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s21.jpg" style="display: inline;" /><br />
</div><h3>Step 22</h3>Here I used another image from Stock.Xchng, <a href="http://www.sxc.hu/photo/941942">image</a>. Just place it on top of all layers and change the Blend Mode to Overlay.<br />
<div class="tutorial_image"><img alt="Step 22" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s22.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s22.jpg" style="display: inline;" /><br />
</div><h3>Step 23</h3>Now let's make some adjustments. First, lets darken our Magneto dude a bit more. Select the Burn Tool(S) and burn the back of the guy. After that, change the Blend Mode of the "ripples" layer to Soft Light. You can delete some parts of the clouds as well.<br />
<div class="tutorial_image"><img alt="Step 23" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s23.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s23.jpg" style="display: inline;" /><br />
</div><h3>Step 24</h3>Create a new folder, beneath the "dude" layer. Name the group "power" and change the Blend Mode to Color Dodge. After that, create a new layer inside of this group. Then using the Brush Tool with white color, create some lights coming from the hands of the guy. <i>Tip: use a regular brush with 0% for the hardness.</i><br />
After that you create another layer. Use some brushes to add more effects. I used some abstract brushes from <a href="http://www.brusheezy.com/brush/442-Rise-Brushes">http://brusheezy.com</a>. Then add a Pink Outer Glow Layer Style.<br />
<div class="tutorial_image"><img alt="Step 24" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s24.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s24.jpg" style="display: inline;" /><br />
</div><h3>Step 25</h3>Import the truck image, you can download it at <a href="http://www.sxc.hu/photo/924177">image</a>. Then with the Magic Wand Tool(W) select and delete the background of the photo. Leave just the truck. After that go to Edit>Transform>Flip Horizontal. Move the truck to the side of the road.<br />
<div class="tutorial_image"><img alt="Step 25" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s25.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s25.jpg" style="display: inline;" /><br />
</div><h3>Step 26</h3>Go to Image>Adjustments>Curves and make the truck a bit darker. After that, using the Rectangular Marquee Tool(M), create a rectangular selection a bit bigger than the truck. Then go to Filter>Blur>Radial Blur. For the settings use Amount 2, Method use Spin, and set Best Quality. Next go to Filter>Blur>Motion Blur. Then use -75 degrees for the angle and 3 pixels for the Distance.<br />
<div class="tutorial_image"><img alt="Step 26" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s26.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s26.jpg" style="display: inline;" /><br />
</div><h3>Step 27</h3>Now we will create the truck's shadow. To do that select the Truck's layer, click with the right button of the mouse and choose Select Pixels. Then create a new layer and fill it with black. Put this layer beneath the truck layer and go to Edit>Transform>Distort. Distort the shadow to make it look more real. Then go to Filter>Blur>Gaussian Blur. Change the Opacity of this layer to 60%.<br />
<div class="tutorial_image"><img alt="Step 27" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s27.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s27.jpg" style="display: inline;" /><br />
</div><h3>Step 28 </h3>Group the truck and the shadow layer and rename it to "truck." Then organize your folders in the Layers Palette.<br />
<div class="tutorial_image"><img alt="Step 28" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s28.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s28.jpg" style="display: inline;" /><br />
</div><h3>Conclusion</h3>You can add more elements to the image, like a traffic cone or more cars. But always change the curves in order to make the objects have the same lighting. That will make the image more realistic. For some effects, there will be many other ways to achieve a similar result. Experiment with different methods of achieving an effect, like we did with the ripples. Finally, stick with the ones you think are the best for that image.<br />
<div class="tutorial_image"></div><div class="tutorial_image"></div><div class="tutorial_image"></div><div class="tutorial_image"><img alt="Conclusion" height="449" original="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s29.jpg" src="http://psdtuts.s3.amazonaws.com/128_Wave_Explosion/we_s29.jpg" style="display: inline;" width="600" /><br />
</div><br />
<b style="color: red;">Credit To :</b> <a href="http://psd.tutsplus.com/tutorials-effects/create-a-powerful-mental-wave-explosion-effect/" target="_blank">http://psd.tutsplus.com/tutorials-effects/create-a-powerful-mental-wave-explosion-effect/</a>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-22469602015803370062009-12-08T18:17:00.000-08:002009-12-08T18:17:44.161-08:00Photo Cutout : Photoshop Tutorial<div style="text-align: center;">Create this fun cutout effect that makes the subject look like it's coming in or out of a printed photo. In this Photoshop tutorial, you will learn how to use Photoshop's Extract tool, layer masks, and layer styles to createa cutout from a photo..<br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="http://img30.imageshack.us/img30/7274/photocut.jpg" src="http://img30.imageshack.us/img30/7274/photocut.jpg" /><br />
</div><div style="text-align: center;"><a href="http://www.blogger.com/post-create.g?blogID=8762457324091663071" name="more"></a><br />
</div><div style="text-align: center;"><br />
</div><h2 style="text-align: center;">Preview of Final </h2><div style="text-align: center;"><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/after.jpg" /><br />
</div><h2 style="text-align: center;">Photo Cutout Photoshop Tutorial </h2><h3 style="text-align: center;">Step 1: Open a photo into Photoshop</h3><div style="text-align: center;">To begin this tutorial, open a photo into Photoshop. To do this, open the File menu and select Open. Browse for and select a photo with asubject that you can use as a cutout then click OK. <br />
</div><div style="text-align: center;"><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/1-open.jpg" /><br />
</div><h3 style="text-align: center;">Step 2: Duplicate the layer </h3><div style="text-align: center;">Press Ctrl+J to duplicate the layer. <br />
</div><div style="text-align: center;"><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/2-duplicate-layer.jpg" /><br />
</div><h3 style="text-align: center;">Step 3: Open the Extract tool</h3><div style="text-align: center;">To extract the subject, we'll be using Photoshop's Extract tool. Open the Filter menu and select Extract. <br />
</div><div style="text-align: center;"><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/3-extract.jpg" /><br />
</div><h3 style="text-align: center;">Step 4: Extract the subject</h3><div style="text-align: center;">To extract the subject out of the photo, we highlight the edge around the subject with a brush. Before we begin, select a brush size that is just thick enough to cover the edge. Then, checkmark "Smart Highlighting". Now press Ctrl++ to zoom in until you can see the pixels clearly. Paint over the edge of the subject. When you reach the edge of the screen, hold the spacebar, click, and drag to move to a different part of the photo. When highlighting the edge, let go of the mouse button every few seconds. This way, when you make a mistake, you can simply press Ctrl+Z to undo that small portion. Although extracting can be quite boring, if stay slow and steady, you can avoid mistakes and complete this step faster. <br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/4-zoom.jpg" /> <br />
</div><h3 itxtvisited="1" style="text-align: center;">Step 5: Fill the area </h3><div style="text-align: center;">Once you're done creating an outline of the edge, select the fill tool and fill the subject. Your subject should now have a blue fill with a green outline. Click OK.<br />
</div><div style="text-align: center;"><img $included="null" alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/5-done.jpg" /><br />
</div><h3 itxtvisited="1" style="text-align: center;">Step 6: Unlock the background layer </h3><div style="text-align: center;">We need to add a layer mask to the background layer. But before we do this, we need to unlock it. Double-click on the Background layer. A window should appear where we can specify the layer options. Click OK and you should now have a layer called "Layer 0".<br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img $included="null" alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/6-layer.jpg" /><br />
</div><div style="text-align: center;"><br />
</div><h3 itxtvisited="1" style="text-align: center;">Step 7: Add a layer mask </h3><div style="text-align: center;">Now we'll add a layer mask to the layer. Open the Layer> New Layer Mask menu and select Hide All. This will create a black layer mask and will make the layer invisible.<br />
<img $included="null" alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/7-layer-mask.jpg" /><br />
</div><h3 itxtvisited="1" style="text-align: center;">Step 8: Select the Rectangular Marquee tool </h3><div style="text-align: center;">From the toolbar, select the Rectangular Marquee tool. It should be the second one listed in the toolbar. Once you select it, the option bar near the top of the Photoshop window should have a drop down menu where you can select the style. Select <b itxtvisited="1">Fixed Ratio</b> as the style and enter <b itxtvisited="1">6</b> as the width and <b itxtvisited="1">4</b> as the height. This will ensure that the selection you create will be of the same aspect ratio as a printed 4x6 photo. <br />
</div><img $included="null" alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/8-rectangular-marquee.jpg" /><br />
<h3 style="text-align: center;">Step 9: Create a selection and fill </h3>First, make sure that the layer mask is selected. Now create a rectangular selection and fill the selection with white. Don't worry if you can't get the selection where you want it to be; we will fix this later. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/9-fill.jpg" /><br />
<h3 style="text-align: center;">Step 10: Unlink the layer mask </h3>Between the layer and its layer mask, there is a link icon. Click on that icon and it should disappear indicating that the layer mask is unlinked from the layer. With the layer mask unlinked, we can move the contents of the layer mask without causing the layer to move. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/10-unlink.jpg" /><br />
<h3 style="text-align: center;">Step 11: Access the blending options </h3>Right-mouse click on the layer and select "Blending Options". <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/11-blending-options.jpg" /><br />
<h3 style="text-align: center;">Step 12: Fill the area </h3>In the Blending Options window, checkmark and select "Stroke". You should now have a set of options for the stroke. First, set the position to inside and color to white. Then, adjust the size tocreate a white border around the photo. Click OK when done. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/12-stroke.jpg" /><br />
<h3 style="text-align: center;">Step 13: Create a new layer </h3>Click on the "Create a New Layer" button in the Layers pallet. Drag the new layer to the bottom of the stack. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/13-new-layer.jpg" /><br />
<h3 style="text-align: center;">Step 14: Fill the layer </h3>Press Ctrl+Backspace to access the Fill tool. With this tool, you can fill the layer with any color you like. I'm going to select the 50% Gray for this step. Click OK when you have your color selected. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/14-fill.jpg" /><br />
<h3 style="text-align: center;">Step 15: Fill the area </h3>Finally, we're at the last step where we can reposition the photo. Select the layer mask then select the move tool from the toolbar. Drag the frame around to position it in a creative position where part of thesubject is outside of the photo. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/15-reposition.jpg" /><br />
<h3 style="text-align: center;">Step 16: Distort the picture (Optional) </h3>To add a more three dimensional effect, you may distort the image. To do this, press Ctrl+T to activate the Transform tool. Now hold the Ctrl key and drag each of the four corner to skew their position. <br />
<img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/16-distort.jpg" /><br />
<h2 style="text-align: center;">Final Results</h2><h4 style="text-align: center;">Original Photo</h4><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/before-2.jpg" /><br />
<h4 style="text-align: center;">Photo Cutout Photoshop Tutorial </h4><img alt="undefined" border="undefined" hspace="6" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Manipulation/Photo%20Cutout/after-2.jpg" />ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-20865600029568875112009-12-06T16:49:00.000-08:002009-12-06T16:49:10.720-08:00Image Gallery With An Inline Thumbnail Browser: jQuery (mb)Gallery<a href="http://pupunzi.wordpress.com/2009/02/28/mbgallery/" target="_blank"><strong>jQuery (mb)Gallery</strong></a> is a jQuery plugin for creating <strong>image galleries with a slideshow</strong> feature.<br />
It is <strong>possible to present the galleries in any way wanted</strong> & adding a link to display them in the main gallery viewer.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.webresourcesdepot.com/wp-content/uploads/image/jquery-mbgallery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="http://www.webresourcesdepot.com/wp-content/uploads/image/jquery-mbgallery.jpg" width="320" /></a><br />
</div>The plugin has an <strong>inline thumbnail browser</strong> which is great to easily switch between images.<br />
It offers multiple parameters for an easy customization like:<br />
<ul><li>width, height & colors</li>
<li>auto-starting from a pre-defined image</li>
<li>auto-sliding to be on/off</li>
<li>timings between each slides</li>
<li>& more..</li>
</ul><strong>Tip:</strong> The author of the plugin, Matteo Bicocchi, has other jQuery plugins which are presented in his <a href="http://www.open-lab.com/mb.ideas/" target="_blank">ideas repository</a>.<br />
<br />
<b>Download : </b><a href="http://pupunzi.open-lab.com/2009/02/28/mbgallery/">http://pupunzi.open-lab.com/2009/02/28/mbgallery/ </a><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-8611465354897149912009-12-06T16:37:00.001-08:002009-12-06T16:37:43.731-08:0010 Ways to Become a More Successful Freelancer1. Never write yourself off<br />
<br />
When I started freelancing I would sometimes write myself off as not good enough for the job. It’s hard not to be sometimes, when the world is full of so many talented people and your work looks mediocre in comparison. Without self confidence in your own work and ability though, you’ll never be able to take off as a freelancer. Now I realize this is a much bigger problem for a designer than a coder, since designing is a much more creative field, but coders can have the same problem too.<br />
<br />
In the end, work is hard to come by and the last thing you need is your mind telling you that you wouldn’t be able to achieve a job, and turning it down.<br />
<br />
Ways to better your confidence in your ability<br />
Practice until you believe you’re good enough<br />
Rather than concentrating on problems as a whole, look at them individually and sort them out<br />
Don’t compare your work with others. Instead, look at what they’ve done and draw inspiration from it.<br />
Stay positive about your work and don’t degrade it.<br />
2. Have Confidence with clients<br />
<br />
Your client (even though temporary) is still your employer. They’ve employed you as you have skills that they don’t have and need your help in an area they are inexperienced with. The last thing they need is you being unsure of what to do.<br />
<br />
When presenting yourself or talking with your clients, speak in a confident and polite manner. It’s best to be professional and never shorten or use acronyms when talking online. Try and be sure of what you’re going to do based on what your client has told you. If you’re a designer, explain how what you’ve designed will be beneficial to the user. Most importantly of all, accept the criticism of your client and add their critiques to your design. Never write your client off as not “in the know”. You’re designing for them, remember.<br />
<br />
Even if you’re not a naturally confident person, try and put it on. Your client probably has never met you before (most of the time anyway) and won’t know what you act like, so you can put on any persona you want.<br />
<br />
3. Make a sweet Portfolio<br />
<br />
This almost goes without saying. A good idea is to have a few selected pieces which you think best represent the best of your abilities, and archive the rest of your portfolio pieces. Again, a portfolio’s requirements vary depending on your field. If you’re a web designer, make sure your own design best represents your abilities. If a client sees your design is bad, they will be less likely to hire you.<br />
<br />
For writers and coders this isn’t such a big deal, but it’s still good to have an eye catching design that will make you stand out. Testimonials are another important part of a portfolio. When you complete a job for a client, ask them to give a testimonial of your work if they were happy with it. You can have a separate page to house these testimonials, or perhaps a box on the front page showing them.<br />
<br />
Other Resources<br />
10 Steps to The Perfect Portfolio<br />
90 Inspirational Portfolios<br />
50 Creative and Inspirational Portfolios<br />
4. Build a Reputation<br />
<br />
A good reputation is something that happens over time. It’ll almost certainly help you to get clients more easily, and will overall help your business. This sort of links back to making an awesome portfolio. When clients see your portfolio, brimming with content and experience, they are more likely to hire you.<br />
<br />
4.1 Keep your work to a high standard<br />
Building a reputation is as easy as keeping your work to a high standard and employing higher class clients (big businesses for instance). Okay, so that’s not easy, but over time you’ll hopefully be hired by bigger clients, and keeping your work to a high standard is down to you and your ability. Never give up, and keep trying.<br />
<br />
4.2 Socialize<br />
Join twitter, facebook, and become friends with the big names in your niche. This is going to be great for your exposure and reputation. When people see that you’re friends with the biggest names, they’ll think that you’re associated with them, and therefore you must be pretty good.<br />
<br />
5. Stay up to date with your niche.<br />
<br />
This is very important. Imagine if you were a web designer in the 90s and never stayed up to date with what was happening. Your designs would be rather dated, to say the least.<br />
<br />
It’s important that you keep up with what’s happening in your niche and community, as this will certainly affect how your client perceives the problem. If everyone else in your niche is using a good (new) technique, it’s not going to pay off for you. People like to fit in (most of the time) and your client will probably want what everyone else is getting (if not better).<br />
<br />
How to Stay up to Date<br />
Twitter is an invaluable tool that helps me stay up with what’s happening in the web community.<br />
RSS helps to give you updates on the biggest sites in your niche.<br />
Socializing in the right circles will help you to keep up with what’s happening.<br />
6. Do what you do best.<br />
<br />
Pick a field that you think you work best in, and use that. Don’t pick a field you don’t like, or are bad at; the only person this will affect is you. This is why if you’re not good at designing websites you might consider doing more back-end stuff like coding that doesn’t require as much creativity. It’s down to you though.<br />
<br />
7. Understand your Clients needs.<br />
<br />
Read the brief that your client has given you and make sure you understand exactly what they want. Never jump to conclusions and try your best to follow what your client wants. They’re hiring you after all.<br />
<br />
If you are unsure exactly what they want, don’t forget to discuss it.<br />
<br />
8. Discuss, Discuss, Discuss<br />
<br />
This links back to understanding your clients. If you don’t understand the clients brief, ask them about it. You’re only human, and discussing with clients is the best way to move a project forward. At every stage of the project ask the clients opinion (if you can) and make sure what you’re doing is moving in the right direction.<br />
<br />
Saying this however, you don’t want to want to come across as bothersome to your client, so don’t go completely out of your way every hour to ask your client what they think; they have lives too you know! If you come across as needy (god forbid) your client may not decide to use you again, and reusable clients are a very valued resource.<br />
<br />
9. Secure long term clients<br />
<br />
Long term clients are clients that wan’t to re-employ you because they believe that your skills are of a grade good enough. Lets be frank; finding a job in the freelance world is very hard. Having a client that wants to re-employ you is very valuable because it means you have one less job to find.<br />
<br />
To secure a long term client simply keep your work to a high standard and be polite and confident with them. The most plausible long term clients are businesses. A small time start-up is likely to only hire you one and leave it at that, because they only require your skills once. Bigger businesses with multiple targets and websites are more likely to hire you again, as, well, they need you.<br />
<br />
10. Don’t Procrastinate<br />
<br />
This is one of the most important rules. Procrastinating is easily my greatest enemy when it comes to productivity. The best thing you can do is to stop procrastinating. The best way I’ve found is to just do everything for a while when you think about it, no matter how monotonous. Don’t get into the habit of saying “I’ll do it in an hour” cause we all know it’s not going to happen.<br />
<br />
When you’re stuck to a deadline and you think “Oh I’ve got 5 days”, it can start your procrastination all up again, so just start it straight away, rather than leaving it for a few days. This post is a perfect example of how to battle procrastination. A few weeks ago I probably would’ve left this for a few days, but because I’ve been trying not to procrastinate I tried my best to get it done.ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0tag:blogger.com,1999:blog-8762457324091663071.post-39001452683846870972009-12-06T16:29:00.000-08:002009-12-06T16:29:53.077-08:00CU3ER: Stunning & Free Flash 3D Image Slider<a href="http://www.progressivered.com/cu3er/" target="_blank"><strong>CU3ER</strong></a> is a <strong>free Flash 3D image viewer</strong> that can even amaze the users who don’t prefer to use Flash.<br />
It is an easy-to-use slider which can be <strong>customized via XML</strong> & offers beautiful 3D transitions.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.webresourcesdepot.com/wp-content/uploads/image/cu3er-3d-image-slider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="http://www.webresourcesdepot.com/wp-content/uploads/image/cu3er-3d-image-slider.jpg" width="320" /></a><br />
</div>Images can be viewed with the <strong>auto-slideshow</strong> feature where 2 different types of preloaders can be selected or using the <strong>prev-next buttons</strong>.<br />
The core of the slider, <strong>transitions, can be configured in many ways</strong> too. The number of slices, animation direction, duration, delays, colors & more can all be customized.<br />
And, optionally, it is possible to display a description box for each image.<br />
<strong>CU3ER</strong> is very well-documented and can be used freely in both free & commercial websites.<br />
<br />
<b>Download :</b> <a href="http://www.progressivered.com/cu3er/download/cu3er-v0.9.2.zip">Click Here</a> <br />
<b>Credit To :</b> <a href="http://www.progressivered.com/cu3er" target="_Blank">http://www.progressivered.com/cu3er</a><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div>ABDUL SABOORhttp://www.blogger.com/profile/12454561823366146454noreply@blogger.com0