<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 31</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"><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/doom.gif" width="115" height="91" align="MIDDLE"></p><p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.16/feat/index.html">5 Years of Doom!</a>: Last year, on the 5th anniversary of Doom, we took a look back at how the industry has changed in its wake.</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>
          Anime and Illustrator</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>
        <p><font face="Arial, Helvetica, sans-serif">Oh, while I’m thinking of 
          it... here is another tip. Draw you face/figure/whatever big enough 
          when you are doing the sketch. It is MUCH better to scale down than 
          to scale up, and <b>Streamline</b> will have an easier time dealing 
          with your lines if it has some room to work with. I leaned this through 
          my own blunders over the years.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Okay, now it is time to scan 
          the sketch into the computer. I scanned mine in as a grayscale image 
          (not black and while line art). One thing you might want to do that 
          I suggest is going over your pencil lines with ink then lightly erasing 
          you pencil lines before you scan, so your lines are better defined. 
          Unfortunately, I didn’t do this so I ended up paying for it with more 
          work on the character by tweaking out the character’s outline in <b>Illustrator</b>. 
          That’s how we learn, I guess.</font></p>

        <p><font face="Arial, Helvetica, sans-serif">After you have scanned it 
          and saved it (I saved mine as a .TIF file), you can load up <b>Adobe 
          Streamline</b>. I use<b> Streamline</b>, but you can also use <b>Corel 
          Trace</b> (which I’ve also used and recommend), and I’m sure there are 
          other programs out there. Basically these programs all do the same thing 
          -- they make an outline of your black and white or grayscale bitmap 
          and attempt to turn the lines into Bezier curves and shapes that are 
          editable by vector points in <b>Illustrator</b>.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Load up <b>Streamline</b>, 
          then follow these simple steps:</font></p>
        <p><font face="Arial, Helvetica, sans-serif">1. Open you scanned picture 
          from the <i>File</i> menu.<br>
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif">2. Go to the <i>Convert</i> 
          option from the <i>File</i> menu. Then this menu will pop up: </font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/colorsetup.gif" width="325" height="237"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">3. Set the <i>Number of Colors</i> 
          to 2 (black &amp; white).<br>
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif">4. Set the <i>Threshold</i> 
          to something that works for your drawing (click the View Sample button 
          to verify your <i>Threshold</i> setting). I set mine to about 32%, but 
          yours could be completely different.<br>
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif">5. When you are happy with 
          your <i>Threshold</i>, press the <i>Convert</i> button.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">6. Under the <i>View</i> 
          menu, check <i>Preview Illustration</i> so you can see what <b>Streamline</b> 
          did to your graphic.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/streamhead.gif" width="384" height="419"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Remember that this is just 
          a preview so it is showing it worse than it actually is.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">7. Save that baby and fire 
          up <b>Illustrator</b>.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now that it has been successfully 
          turned from a bitmap into a vector image you can start fixing all the 
          lines that <b>Streamline</b> freaked-out on (which happens a lot unfortunately). 
          The darker your original lines are on your sketch, the better job <b>Streamline</b> 
          will do, and the less hassle for you in the long run. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">So now I’m going to zoom 
          in and go over my picture with a fine tooth comb and find every little 
          quirk and make all the lines as flawless as possible. Sometimes this 
          involves adding or extending lines and shapes, or simply just adjusting 
          Bezier curves. Here is a zoomed up view of some curves I’m correcting:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust1.gif" width="459" height="381"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">This is the most time consuming 
          part of the process. Look over you drawing carefully. Some parts might 
          need to be moved or angled or connected to other parts. Eventually, 
          you will get to this point and all the lines are looking nice: </font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust2.gif" width="354" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Also, notice that I’ve done 
          some major reshaping and fixing to the eyes, nose, and mouth.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now it is time to start coloring. 
          You could really do this step in either <b>Photoshop</b> or <b>Illustrator</b>. 
          Personally, I prefer <b>Illustrator</b> for this type of coloring.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Your choice of colors are 
          of course dependent on what kind of picture you are creating, but for 
          the Anime guy, I chose to use three colors for the skin that weren’t 
          too saturated. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">When I’m applying color to 
          a streamlined picture, I approach it in nearly same manner as cel animators 
          have paint applied to their characters. They paint on the <i>back</i> 
          of the celluloid so when the cel is flipped right side up, the black 
          outline of the character is always on top of the color and the color 
          never bleeds into the crisp, beautiful lines they’ve drawn. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">I do it like this in <b>Illustrator</b>, 
          but opposite (if that made any sense). I start a new layer for each 
          new color, then instead of drawing beneath the black line, I draw the 
          color <b>right over top, and into black line</b> (sometimes past the 
          black line). Then, I just drag the color layer underneath the black 
          line layer, and boom-bam it’s colored.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust3.gif" width="340" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now I’ll zoom up so you can 
          see how I’ve done it with a second color.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust3_2.gif" width="341" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">I have a black outline selected 
          (in blue). See how the color is extending past the black outline? Notice 
          how it is going into the hair a little bit? That doesn’t matter because 
          when I start drawing in the color for the hair, I’ll just paint right 
          over top of the skin color. Now you are probably saying, &quot;what’s 
          the point? In <b>Illustrator</b> you can fill in colors in any closed 
          shape, right?&quot; Yes, this is true, but remember, this picture was 
          <i>Streamlined</i>, and unfortunately Streamlining does funky things 
          to your images. More often than not, <b>Streamline</b> will make the 
          black line in your drawing into a <i>shape</i> (not a line), so when 
          you try to fill in the white areas, <b>Illustrator</b> can’t do it because 
          there is no shape there to fill; it’s just the negative space (the background). 
          Or, sometimes <b>Streamline</b> will connect shapes that you don’t want 
          to be connected so when you try to fill it with a color, it will fill 
          unwanted areas. Ugh! It’s annoying, but not too tough to deal with once 
          you get the hang of it.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now I’m going to continue 
          to add more colors to the skin for shading.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust4.gif" width="340" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Looking good. The skin is 
          done, so now I’m going to do the hair.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust4_2.gif" width="340" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">I also threw some highlights 
          on the hair to give the picture some depth. Note that these don’t have 
          black outlines around them. Generally, you don’t want to do that to 
          a highlight as it will just look out of place.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="images/illust5.jpg" width="340" height="400"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Finally, the coloring is 
          done! I made his hair green for no real particular reason other than 
          I like it that way. Now I look over my image and make sure everything 
          is where I want it. Maybe move the eyebrows up or down, or the mouth, 
          or whatever. Experiment and see what looks best.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">So, that’s it! This process 
          may take some time to get used to because manipulating curves in <b>Illustrator</b> 
          can be quite frustrating at times. It can be even more so with a Streamlined 
          picture because <b>Streamline</b> doesn’t always set your lines and 
          Bezier curves to the way you want them. Just keep at it, and you’ll 
          get the hang of it. Good luck with your artwork!</font></p>
        <p align="RIGHT"><font face="Arial, Helvetica, sans-serif" size="-1"><i>- 
          Rick Grossenbacher is a professional 2D artist and graphic designer. 
          Amongst other things, he has worked on the upcoming title Daikatana 
          from Ion Storm, and done freelance work for RCA and Sony records.</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>
