Forum Skin Category Icons<div class="preview"><a href="tutorial.php?id=24"><img src="images/previews/icons14.gif" style="height: 115px; width: 115px;" /></a></div>
<div class="previewtext">
<b>Forum Skin Category Icons</b><br />
Learn how to make great looking icons for your forum skin, simply changeable by editing a single color!<br />
<br />
Added date: 01/02/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: 3 Total Views: 715 Total Votes: 6<br />
<a href="rate.php?id=24">Rate Tutorial</a> <a href="#" onclick="return popitup('report.php?id=24');">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 will be making our icons for our Forum Skin category that we will learn how to make in the upcoming Tutorial Skin Category design tutorial. This is what our icons look like:</p><br />
<p><img src="tutorials/icon1/1.gif" width="256" height="325" /></p><br />
<p>1. Start off with a new document, make it about 75 x 75 pixels with a white background.</p><br />
<p><img src="tutorials/icon1/2.gif" width="209" height="144" /> </p><br />
<p>2. Grab your Rectangular Marquee Tool *or simply press M* and make a small square selection. Hold shift while making the selection to have an even height and width.</p><br />
<p><img src="tutorials/icon1/3.gif" width="209" height="144" /> </p><br />
<p>3. Fill it with a dark blue color. I picked color #02296A.</p><br />
<p><img src="tutorials/icon1/4.gif" width="209" height="144" /></p><br />
<p>4. Zoom in about 400%, and make a selection from the bottom to nearly half way of the square.</p><br />
<p><img src="tutorials/icon1/5.gif" width="321" height="274" /> </p><br />
<p>5. Grab your gradient tool, and select the color White. Pick these settings:</p><br />
<p><img src="tutorials/icon1/6.gif" width="64" height="272" /> </p><br />
<p><img src="tutorials/icon1/7.gif" alt="Gradient Tool" width="717" height="78" /></p><br />
<p>6. On a new layer, make a gradient from the bottom to the top of the square. You will now have a white "Fade".</p><br />
<p><img src="tutorials/icon1/8.gif" alt="gradient tool selection" width="321" height="274" /> </p><br />
<p><img src="tutorials/icon1/9.gif" alt="gradient" width="321" height="274" /></p><br />
<p>7. In your layer palet, set it to "overlay".</p><br />
<p><img src="tutorials/icon1/10.gif" alt="layer panel" width="212" height="243" /></p><br />
<p>8. Now we're going to move it up 2 pixels. Simply press Up on your keyboard twice. My result:</p><br />
<p><img src="tutorials/icon1/11.gif" alt="forum icon" width="209" height="144" /> </p><br />
<p>9. Now we're going to do the same with the top. Make a new layer, zoom back in to about 400%, and grab your selection tool. Make a selection from top to the bottom, and use the gradient tool to make a white "fade". </p><br />
<p><img src="tutorials/icon1/12.gif" alt="photoshop gradient tool" width="308" height="283" /></p><br />
<p><img src="tutorials/icon1/13.gif" alt="gradient tool" width="308" height="283" /></p><br />
<p>10. put this layer to Overlay as well. Press the Down button on your keyboard twice to move it down 2 pixels. This is my result:</p><br />
<p><img src="tutorials/icon1/14.gif" alt="forum skin button" width="209" height="144" /></p><br />
<p>11. we're going to remove 2 pixels on both sides of the gradients. Make a 2 pixel selection, and simply press delete. </p><br />
<p><img src="tutorials/icon1/15.gif" alt="forum skin icon" width="328" height="243" /></p><br />
<p>Do the same on the other side. </p><br />
<p><img src="tutorials/icon1/16.gif" alt="forum skin icon" width="328" height="243" /></p><br />
<p>12. Now make a square selection in the top left corner. We're going to make a fade from the top left to the right corner.</p><br />
<p><img src="tutorials/icon1/17.gif" alt="icon selection" width="328" height="243" /> </p><br />
<p><img src="tutorials/icon1/18.gif" alt="forum skin icon" width="328" height="243" /></p><br />
<p>13. Put this layer on overlay as well. My result:</p><br />
<p><img src="tutorials/icon1/19.gif" width="209" height="144" /> </p><br />
<p>14. Grab your Custom Shape tool. </p><br />
<p><img src="tutorials/icon1/20.gif" alt="custom shape tool" width="64" height="442" /></p><br />
<p>15. Grab a darkish red color. I picked #A70F00. On the toolbar on top, you can select your shape. Photoshop comes with several premade shapes, and they should be selectable instantly. Press the icon on top, and browse to the Checkmark:</p><br />
<p><img src="tutorials/icon1/21.gif" alt="custom shape checkmark" width="552" height="281" /> </p><br />
<p>16. now make the shape in the middle of your icon:</p><br />
<p><img src="tutorials/icon1/22.gif" alt="icon checkmark" width="209" height="144" /> </p><br />
<p>17. We're going to make a glare on top of the checkmark. First, we need to make a selection of the checkmark. We can easily do this by holding CTRL and then clicking on the icon that's next to the checkmark layer, like displayed on this image:</p><br />
<p><img src="tutorials/icon1/24.gif" alt="forum skin" width="212" height="325" /> </p><br />
<p>You should now have your checkmark selected. </p><br />
<p><img src="tutorials/icon1/23.gif" alt="forum icon" width="282" height="237" /></p><br />
<p>18. Make a new layer, and grab your gradient tool again. Make sure your color is set to White, and make a fade from top to bottom.</p><br />
<p><img src="tutorials/icon1/25.gif" alt="forum skin icon glare" width="282" height="237" /> </p><br />
<p>19) Set it to overlay, and move it down 1 pixel and to the right 1 pixel. Simply do this by tapping Right and Down arrow.</p><br />
<p><img src="tutorials/icon1/26.gif" alt="forum skin icon" width="282" height="237" /> </p><br />
<p>20) Ok, we're now basicly done with our icon. We can now mess around with the colors. The advantage of our overlay layers on white is that if we change colors of the square, the glare will simply fade into the color as well. Here are various results by simply changing the colors of the square and hiding/changing the color of the checkmark (sure, they dont all look as good, but you can experiment as much as you like!): </p><br />
<p><img src="tutorials/icon1/27.gif" alt="forum skin icons" width="290" height="162" /></p><br />
<p>good luck! </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> 
