Colorful Web Button<div class="preview"><a href="tutorial.php?id=15"><img src="images/previews/8.gif" style="height: 115px; width: 115px;" /></a></div>
<div class="previewtext">
<b>Colorful Web Button</b><br />
This tutorial will teach you how to make an awesome looking button in photoshop, very detailed and easy to follow tutorial.<br />
<br />
Added date: 20/01/2007<br />
Category: <a href="categories.php?catid=13" style="padding-right: 0px; margin-right: 0px;">Photoshop</a> / <a href="categories.php?catid=13&sub=33" style="padding-right: 0px; margin-right: 0px;">Web Effects</a><br />
Written By: <a href="http://www.tutorialgods.com">TutorialGods</a><br />
Rating: 2 Total Views: 1010 Total Votes: 5<br />
<a href="rate.php?id=15">Rate Tutorial</a> <a href="#" onclick="return popitup('report.php?id=15');">Report Tutorial</a><br />
</div><img src="images/middledots.gif" alt="" /><p /><script type="text/javascript"><!--
google_ad_client = "pub-2573353475736066";
google_alternate_color = "F8F8F8";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
//2007-03-11: Tutorialgods.com
google_ad_channel = "5864650512";
google_color_border = "F8F8F8";
google_color_bg = "F8F8F8";
google_color_link = "CC0000";
google_color_text = "000000";
google_color_url = "CC0000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br/>
<p>In this tutorial we're going to create this button:</p><br />
<p><img src="/tutorials/button1/1.gif" width="150" height="100" /></p><br />
<p>other possible results:</p><br />
<p><img src="/tutorials/button1/19.gif" width="200" height="177" /> </p><br />
<p>1) make a new document, i started with 200 x 100. Grab your Selection tool, and draw the selection of your button. Then, on a new layer, fill it with a color: </p><br />
<p><img src="/tutorials/button1/2.gif" width="223" height="149" /></p><br />
<p>2) Go to Layer > Layer Style > Gradient Overlay. We're going to make a nice green gradient, as you can see in the screenshots, I picked the colors: #3C9E04 #B4F204 and #3C9E04 again. </p><br />
<p><img src="/tutorials/button1/3.gif" width="600" height="444" /></p><br />
<p><img src="/tutorials/button1/4.gif" width="429" height="497" /></p><br />
<p>result:</p><br />
<p><img src="/tutorials/button1/5.gif" width="223" height="149" /></p><br />
<p>3) Make a new layer, and select a small part of the button on the left side. Fill this with any color.</p><br />
<p><img src="/tutorials/button1/6.gif" width="223" height="149" /></p><br />
<p><img src="/tutorials/button1/7.gif" width="223" height="149" /></p><br />
<p>4) Go to Layer > Layer Style > Gradient overlay, and pick the settings shown in the screenshots. I used colors: #FF6E02 #FFFF00 and #FF6E02 again.</p><br />
<p><img src="/tutorials/button1/8.gif" width="600" height="444" /></p><br />
<p><img src="/tutorials/button1/9.gif" width="429" height="497" /></p><br />
<p>result:</p><br />
<p><img src="/tutorials/button1/10.gif" width="223" height="149" /></p><br />
<p>5) Make a new layer, and grab your pencil tool. Zoom in to about 300%, and pick a bright green color. Make an outline around the entire green section. The color I've used was #B4F204:</p><br />
<p><img src="/tutorials/button1/11.gif" width="443" height="152" /></p><br />
<p><img src="/tutorials/button1/12.gif" width="443" height="152" /></p><br />
<p>6) Now make a darker green outline around it. The color I used was #40A104</p><br />
<p><img src="/tutorials/button1/13.gif" width="443" height="152" /></p><br />
<p>7) We're going to do the same with the orange section. Pick a yellowish and dark orangy color. The colors I've used are: #FF6D00 and #FFFE00.</p><br />
<p><img src="/tutorials/button1/14.gif" width="443" height="152" /></p><br />
<p>result:</p><br />
<p><img src="/tutorials/button1/15.gif" width="150" height="100" /></p><br />
<p>8) Now all there is left to do is add some nice text. I made an "arrow" ยป icon on the left to make it look good.</p><br />
<p><img src="/tutorials/button1/16.gif" width="223" height="149" /> </p><br />
<p>The style for the text I've used was:</p><br />
<p>Verdana<br /><br />
Italic<br /><br />
size: 12<br /><br />
smooth<br /><br />
color: #40A104</p><br />
<p><br /><br />
Drop shadow with these settings:</p><br />
<p><img src="/tutorials/button1/17.gif" width="600" height="444" /></p><br />
<p>The style for the "Arrow" icon I've used was: <br /><br />
</p><br />
<p>Verdana<br /><br />
normal<br /><br />
size: 12<br /><br />
color: #FF5400</p><br />
<p>Drop shadow with these settings:</p><br />
<p><img src="/tutorials/button1/18.gif" width="600" height="444" /> </p><br />
<p>possible results:</p><br />
<p><img src="/tutorials/button1/19.gif" width="200" height="177" /></p><br />
<p> </p><br />
<p>I hope you've enjoyed this tutorial! </p></div> </div>
<div class="left">
<img src="images/headers/stats.gif" alt="" />
<div class="side2">
People Online: 0<br />
Most ever online: 103 on 18/05/2007<br />
Total Searches: 0<br />
Total Tutorials: 21<p /> </div>
<img src="images/headers/announcements.gif" alt="" />
<div class="side2" style="padding-bottom: 5px;">
<b>Welcome!</b><br />Welcome to tutorialgods.com!
Feel free to browse our tutorials, and continue to check back often as tutorials are updated frequently!
Stay with us as we continue to provide you with the best free tutorials on the internet!<img src="images/smalldots.gif" alt="" /> </div>
<img src="images/headers/affilates.gif" alt="" />
<div class="side2" style="padding-bottom: 9px;"><a href="http://www.thewordpressfactory.com">Custom Wordpress Themes</a>
<br /><br /><div align="center"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"></div>
<img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form></div>
</div>
</div>
</div>
<div class="bottom">
<p><p align="center"><font face="Verdana" size="2">Copyright <a href="http://www.tutorialgods.com"> <font color="#FFFFFF">TutorialGods.com</font></a> 2007</font></p>
</div>
</center>
</body>
</html> 
