<HTML>

  <title>loonygames' Painting on Polygons</title>
<body bgcolor="#FEFFEC" link="#0000CC" vlink="#000000">
<div align="CENTER">
  <div align="CENTER">
    <center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2373963192914918";
/* 468x60 */
google_ad_slot = "3417104156";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
  </div>
  <div align="CENTER">
    <table border="0" width="100%">
      <tr> 
        <td width="261" height="105"><img src="../../images/next_logo_sml.jpg" width="251" height="94" usemap="#map" border="0"> 
        </td>
        <td width="92" height="105" align="LEFT" valign="MIDDLE"> 
          <p><font face="Arial, Helvetica, sans-serif" size="-1">- <a href="../index.html">Contents</a><br>
- <a href="../../../about.1">About</a><br>
            - <a href="../../../submissions/index.html">Submissions</a><br>
            - <a href="../../../feedback.1">Feedback</a><br>
            - <a href="../../archives/index.html">Archives</a></font></p>
        </td>
      </tr>
    </table>
  </div>
  <table border="0" width="100%" align="CENTER">
    <tr> 
      <td width="32%" align="LEFT" valign="TOP"> 
        <table border="0" width="190">
          <tr> 
            <td height="1194" align="LEFT" valign="TOP"> 
              <p><font color="#0000FF"><b><font face="Arial, Helvetica, sans-serif" color="#0000CC">volume 
                1, issue 29</font></b></font></p>
              <p><font color="#0000FF"><b><font face="Arial, Helvetica, sans-serif" color="#0000CC"> 
                </font></b></font></p>
              <p>  <p><font face="Courier New, Courier, mono"><b><font color="#339900" face="Arial, Helvetica, sans-serif">Today 
                in loonygames:</font></b></font></p>

<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1">New!!</font><font face="Arial, Helvetica, sans-serif" size="2"> The Archives have been cleaned up, fead links fixed, and printable versions restored! Also, don't miss the new comments <a href="../../../index.html">on the front page</a>!</font></p>
              
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../2.15/feat/index.html" target="">Livin' 
  With The Sims</a></font><font face="Arial, Helvetica, sans-serif" size="2">: 
  theAntiELVIS explores the wild and wacky world that is Will Wright's <b>The Sims</b>, 
  asking the inevitable quesiton, &quot;is <b>The Sims</b> the first step toward a virtual 
  life where everyone is Swedish?&quot;</font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../2.15/pixel/index.html" target="">Pixel 
  Obscura</a></font><font face="Arial, Helvetica, sans-serif" size="2">: Josh 
  Vasquez on <b>Omikron: The Nomad Soul</b>.</font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../rl/index.html" target="">Real 
  Life</a></font>: <font face="Arial, Helvetica, sans-serif"> <font size="-1">Check 
  out our newest comic strip, Real Life! Updated daily!</font></font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../uf.1" target="">User 
  Friendly</a></font>: <font face="Arial, Helvetica, sans-serif"> <font size="-1">Updated 
  daily!</font></font></p>


</p>
              
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Related 
                Links:</font></b></font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.6/index.html">DRAW 
                Partner!</a>: Chris Buecheler's article on games and 2D art.</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.26/feat/index.html">Two 
                Programs, Two Dimensions</a>: Rick Grossenbacher's tutorial on 
                using <b>Photoshop</b> and <b>Illustrator</b> to create original 
                2D images.</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="http://www.contaminated.net/studio/">The 
                Texture Studio</a>: Chris' texture home page, with tons of textures 
                for you to download.</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.26/feat/index.html">Two 
                Programs, Two Dimensions</a>: Get a preview of the next installment 
                of Painting on Polygons with this feature article by Rick Grossenbacher. 
                </font></p>
              
              
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Feedback:</font></b></font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1">You've got 
                an opinion...voice it! Drop a line to our <a href="../../../feedback.1">Feedback</a> 
                column...you could end up with a free T-Shirt!</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Random 
                Feature :</font></b></font></p>
               
<p align="CENTER"><img src="../../images/thumbs/pok.jpg" width="96" height="96" align="MIDDLE"></p><p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.41/feat/index.html">Put a Little Love in Your Pocket!</a>: Trying to understand <B>Pokemon</b>? Our loony editor got to the bottom of the GameBoy phenomenon.</font></p>

              <form method="get" action="http://www.google.com/custom" name="">
                <font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Search 
                the Archives!</font></b></font> 
               
                 <INPUT TYPE=text name=q size=12 maxlength=255 value="">
 <INPUT type=submit name=sa VALUE="Google Search">
 <INPUT type=hidden name=cof 
VALUE="LW:216;L:http:/home/loonygames/loony.timedoctor.org/content/images/logo1.jpg;LH:55;AH:center;S:http://www.loonygames.com;AWFID:13a298c7abe84fd0;">
<input type=hidden name=domains value="loonygames.com"> 
<input type=hidden name=sitesearch value="loonygames.com">               
</div>
              </form>

            </td>
          </tr>
        </table>
      </td>
      <td width="62%" align="LEFT" valign="TOP"> 
        <p align="LEFT"><font face="Arial, Helvetica, sans-serif" color="#0022A8"><b><a target="" href="../../corner/index.html"><font size="-1">Painting 
          on Polygons</font></a><font size="-1">:</font></b></font><font face="Arial, Helvetica, sans-serif" size="+3" color="#0022A8"><br>
          Hunting for Selective Colors</font></p>
        <p align="right"><font color="#804000"><b><font face="Arial, Helvetica, sans-serif">By 
          Rick "<a href="mailto:flat@iserv.net">Flatness</a>" Grossenbacher<br>
          </font></b></font><b><font face="Arial, Helvetica, sans-serif" size="-1"></font></b></p>
        <p align="right">&nbsp;</p>
        <br>
        <p><font face="Arial, Helvetica, sans-serif">Now we have to ask ourselves 
          a couple of questions. We’ve just matched the skin tones, but do we 
          like them? Also, are we going for a completely realistic look or a comic 
          book type of coloring? Personally, like it somewhere in between because 
          if I’m going for a pure photographic quality, then why did I bother 
          drawing the face in the first place! I could have just scanned in the 
          real face of someone and manipulated it. </font>

        <p><font face="Arial, Helvetica, sans-serif">Personally, Face 2 is a bit 
          too much on the orange side for my tastes, and there are a few facial-feature 
          issues that are bothering me so I’m going to do some changes. For starters, 
          this guy is screaming for a better nose. Oh, and lower eyelids. I’m 
          going to do all this by going in and further manipulating small groups 
          of pixels in specific places. It needs a few higher refined details 
          and some slight color variations to break up the never-ending quality 
          of orange that it seems to have.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">I decided that I should show 
          you what I did with this head in order to improve it instead of just 
          giving a before and after picture. The reason is: <b>details are the 
          key to good pixel art</b>, and when I say details, I mean actually manipulating 
          one pixel at a time in some cases. Sometimes I even use the <i>Rectangular 
          Marquee</i> to select a single pixel or two so I can slide a few sliders 
          (<i>Brightness</i>, <i>Hue</i>, etc.) just to see the difference it 
          will make. Mainly this type of craziness is for the eyes or nose where 
          detail is absolutely essential, and a single pixel can make a difference.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">I wasn’t quite sure how I 
          was going to show this process, so I decided to save as many of the 
          steps that I took along the way. The graphic below displays the change 
          in the head numbered at every step. At first glance they may all look 
          alike to you for the most part. They do to me even, and I’m the one 
          who made ‘em! But, then if you look at step number 1 and then to step 
          16, you’ll see a fairly substantial change (and improvement, I hope).</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="http://www.loonygames.com/content/1.29/pop/steps.jpg" width="517" height="220"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">I didn’t have a terribly 
          logical reason for the order of the steps that I took. I basically just 
          went to whatever part my eye lead me to fix next. To really follow along 
          with the changes, you’ll probably want to bring this graphic into <b>Photoshop</b> 
          and zoom in. Or, another way is to copy one of the faces and paste it 
          on a separate layer exactly over top of another face (a face right next 
          to it, of course). Then, you can click the layer on and off to see what 
          pixels have been changed (sort of like a flip-book). I did this quite 
          a bit while making the corrections to the face to help me see if my 
          highlights and shadows made enough of an improvement. It’s a pretty 
          nice technique.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Here is a brief summary of 
          each change that took place.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">1. I took down the saturation 
          on the entire head to around -11.<br>
          </font><font face="Arial, Helvetica, sans-serif">2. The <i>Burn</i> 
          tool was used on the bridge of the nose. <br>
          </font><font face="Arial, Helvetica, sans-serif">3. The <i>Dodge</i> 
          tool was used on parts of the nose.<br>
          </font><font face="Arial, Helvetica, sans-serif">4. At the corners of 
          the eyes, the <i>Burn</i> tool was used to darkened them up.<br>
          </font><font face="Arial, Helvetica, sans-serif">5. I started constructing 
          a lower eyelid.<br>
          </font><font face="Arial, Helvetica, sans-serif">6. More altering of 
          the lower eyelid.<br>
          </font><font face="Arial, Helvetica, sans-serif">7. The <i>Burn</i> 
          and <i>Dodge</i> tools were used just above the upper lip (and to the 
          side) to even out the contrast a bit.<br>
          </font><font face="Arial, Helvetica, sans-serif">8. I started cleaning 
          up around the nose.<br>
          </font><font face="Arial, Helvetica, sans-serif">9. The nostrils needed 
          Fixing.<br>
          </font><font face="Arial, Helvetica, sans-serif">10. More general nose 
          fixing.<br>
          </font><font face="Arial, Helvetica, sans-serif">11. Yet more nose fixing.<br>
          </font><font face="Arial, Helvetica, sans-serif">12. I evened out the 
          shading on the cheeks.<br>
          </font><font face="Arial, Helvetica, sans-serif">13. The face has been 
          extended out to the sides.</font><br>
          <font face="Arial, Helvetica, sans-serif">14. I darkened the outer edges 
          of the eyeballs a slight bit (getting the eyes correct is <b>critical</b>).<br>
          </font><font face="Arial, Helvetica, sans-serif">15. Ok, I probably 
          crammed a lot of steps into this one. The chin and upper lip have been 
          given highlights using the<i> Burn</i> and <i>Dodge</i> tools. The forehead 
          has been shaped a bit better (on the sides). The chin was altered slightly.<br>
          </font><font face="Arial, Helvetica, sans-serif">16. 
          A highlight was placed on the top of the eyebrows, and both the <i>Saturation</i> 
          and <i>Lightness</i> was taken down on the lips to get rid of some of 
          that orange. Done! </font></p>
        <p><font face="Arial, Helvetica, sans-serif">Let’s look at a before and 
          after picture.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="beforeafter.jpg" width="173" height="126"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Ahhhhhh, much better. Now 
          let’s do a before and after with the original face.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="beforeafter2.jpg" width="173" height="126"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Huge difference!</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Then, for the beans of it, 
          I quickly slapped a mustache on him (on a separate layer) to see what 
          it would do to the face. It seemed to age him a bit.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="mustache.jpg" width="93" height="95"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Here are a few other things 
          that could still be fixed if you are real nit-picky (which I am, but 
          I wanted to get this thing done so this tutorial would be out before 
          the turn of the century).</font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- Real human faces aren’t 
          exact on both sides. I did all my alterations to the left side of the 
          face, then copied and flipped it over to form the right. But notice 
          that I kept a one pixel width strip the runs vertically down the entire 
          center of the face, and is neither part of the left or right side. Differences 
          on both sides of the face would add considerable realism and interest 
          to it. A few nuances here and there can go a long way.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- The nose posed the greatest 
          challenge for me. I feel it could still be better. I may have made it 
          too &quot;pretty&quot; or bulbous for this type of character.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- As it sits, there are 
          too many wild lines on the forehead. I didn’t really deal with those 
          too much for this example though.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- The cheeks may be puffed 
          out too much, and could stand to be flattened a little, but I’m such 
          a fan of shadows on faces that I couldn’t resist making them like that.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Even though the creation 
          of the head might not be terribly practical for use in whatever game 
          graphics you might be making (since it’s not really an example of constructing 
          a head for skinning -- those are mashed out a bit more, and are proportionally 
          different), it’s still a good example of some basic pixel art manipulation 
          techniques that can be applied to any graphics you are making. What 
          I’ve shown for adjusting color in your image is far from every way to 
          do it. I just wanted to introduce the <i>Replace Color</i> menu for 
          those of you who aren’t familiar with it.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Here are a few more techniques 
          that you could do to match up the colors from Face 2 to look like it 
          had the same skin tone as Face 1:</font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- You could redraw the entire 
          face using a <i>Color Indexed</i> palette from Face 1, and you’d have 
          all the colors you want. It would definitely be 100% correct then -- 
          but I think that’s <b>major</b> overkill. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">-- You could <i>Color Index</i> 
          your original image, then save the palette, then <i>Color Index</i> 
          your target image by importing the original image’s palette. This can 
          work quite well, but you have no control over what areas get changed 
          for the most part, and it can make your graphic a serious mess if the 
          colors don’t match up properly (you may need to do some manipulation 
          ahead of time to account for this). This could potentially be the fastest 
          way to do it except that you’ll almost certainly lose some color gradients 
          when you do the color indexing (because color indexing takes your graphic 
          down to 256 colors from the original millions of colors). However, this 
          is still a good technique.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Those aren’t the only techniques 
          that exist (especially since I didn’t even bring up the <i>Levels, Auto 
          Levels, and Curves</i> menus in this tutorial -- we can save them for 
          some other time). I’m sure there a few other good ones out there.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Well, that’s it for today. 
          I hope it was helpful. To tell you the truth, I leaned some interesting 
          things about <b>Photoshop</b> while making this tutorial, so it was 
          fun for me too! Good luck on your graphics, and e-mail me some ideas 
          on what you want to appear in an upcoming tutorial. See you an a couple 
          of weeks!</font></p>
        <p align="RIGHT"><font face="Arial, Helvetica, sans-serif" size="-1"><i><font face="Arial, Helvetica, sans-serif" size="-1">- 
          Rick Grossenbacher is a professional 2D artist and graphic designer. 
          Amongst other things, he has worked on the upcoming title <b>Daikatana</b> 
          from Ion Storm, and done freelance work for RCA and Sony records.</font></i></font></p>
        <p align="RIGHT">&nbsp;</p>
        </td>
    </tr>
  </table>
  </div>
<map name="map">
  <area shape="rect" coords="32,38,226,76" href="../../../index.html" target="_self">
  <area shape="rect" coords="12,79,125,94" href="http://www.bluesnews.com" target="_self">
 
</map>
<table border="0" width="100%" align="CENTER">
  <tr> 
    <td> 
      <p><i><font face="Arial, Helvetica, sans-serif" size="-2"> <b>Credits:</b> 
        Painting on Polygons is &copy; 1999 Rick Grossenbacher. All other content 
        is &copy; 1999 <a target="_self" href="http://www.loonyboi.com">loonyboi 
        productions</a>. Unauthorized reproduction is strictly prohibited, so 
        don't do it, or we'll paint you white against a white background.</font></i></p>
    </td>
  </tr>
</table>
</HTML>
