<HTML>

  <title>loonygames Feature: Two Programs, Two Dimensions</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" align="CENTER" width="100%">
    <tr> 
      <td width="32%" height="936" align="left" valign="top"> 
        <table border="0" width="190">
          <tr> 
            <td align="LEFT" valign="TOP" width="32%"> 
              <p><font color="#0000FF"><b><font face="Arial, Helvetica, sans-serif" color="#0000CC">volume 
                1, issue 26</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="http://www.loonygames.com/current/gc/">Painting 
                on Polygons</a>: Our regular texture tutorial series, by Chris 
                Buecheler, a freelance 2D artist.<b></b></font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.6/feat.1">DRAW, 
                Partner!</a>: A look at the various techniques involved in 2D 
                art design.</font></p>
              
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a href="http://www.berda.com/loonygam.htm">T-Shirts</a>: 
                </b>Stylin' loonygames t-shirts from Berda Compugrafix!</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a href="../../../artwork.1">Artwork</a>: 
                </b>Hey, dig the artwork on <b>loonygames</b>? We're selling some 
                of the original art.</font></p>
              <p><!--#include virtual="/includes/shooters.htm" --></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/v_thumb.jpg" width="64" height="64" align="MIDDLE"></p><p><font face="Arial, Helvetica, sans-serif" size="-1">Hey <B>Half-Life</b> fans! Looking for some good reads? Check out Valve designer Harry Teasley's <a href="../../1.16/guest/index.html">guest editorial</a>, our <a href="../../1.16/topshelf/index.html">review</a> of Half-Life, or our interview with <a href="../../1.34/feat">Marc Laidlaw!</a></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%" height="936" align="left" valign="top"> 
        <p align="center"><font size="+3" face="Arial, Helvetica, sans-serif" color="#0022A8">Two 
          Programs, Two Dimensions<br>
          <font size="+1">(Using Adobe Illustrator and Photoshop to create killer 
          2D game art)</font> <br>
          </font></p>
        <p align="RIGHT"><font color="#804000"><b><font face="Arial, Helvetica, sans-serif">By 
          </font><font color="#804000"><b><font face="Arial, Helvetica, sans-serif"> 
          Rick &quot;<a href="mailto:flat@iserv.net">Flatness</a>&quot; Grossenbacher</font></b></font></b></font></p>
        <p align="RIGHT"> 
          <script language="JavaScript">

<!--
       function gotoSite(obj)
          {
          var s;
          s=obj.options[obj.selectedIndex].value
                         location.href=s;
          }
// -->

</script>
          </p>
        <p align="LEFT">&nbsp;</p>
        <p><font face="Arial, Helvetica, sans-serif">Now we need to trim the edges 
          of the shape. I used the <i>Pen</i> tool to quickly draw a triangle 
          to use as a marker. While drawing it, hold down the shift key to constrain 
          your angles of the triangle. Then, place the triangle over the left 
          edge of the curve so it is overlapping into the shape a little so we 
          can snip that edge off (look closely to notice where the two shapes 
          are overlapping). Select both shapes.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure6.gif" width="542" height="208"></font></p>

        <p><font face="Arial, Helvetica, sans-serif">Then, do a <i>Pathfinder 
          Minus Front</i>. That will chop off the left edge of the curve shape 
          where your triangle was.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure7.gif" width="561" height="218"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Make another triangle and 
          do the same to the right edge of the curve shape. Now we have our basic 
          shape that we soon will turn into a complex shape to use as the template 
          in our bitmap.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">The next step is to copy 
          the curve shape and paste it right on top of the original one, offset 
          just a little to the right.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure8.gif" width="551" height="201"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now do a <i>Pathfinder Unite</i> 
          to make them one object. There will be a little bump near the ends of 
          both sides of the object, so just go in and fix that (delete the offending 
          points and join the other ones to close the gap).</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure9.gif" width="556" height="208"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">The next step is to copy 
          it and mirror it so it is upside down. Use the <i>Reflect </i>tool by 
          double clicking on the tool's button to bring up the dialogue box. Then, 
          click the <i>horizontal</i> button to flip it upside down. After you've 
          flipped it, line it up so it looks something like this:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure10.gif" width="562" height="243"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">To line them up, I used the 
          <i>Horizontal Align Center</i>, and <i>Vertical Align Center</i> buttons 
          on the alignment window to line them up exactly on top of each other. 
          Then I just selected one and pressed the left-arrow key on the keyboard 
          to move it where I wanted it.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">We are now done with our 
          basic shape that we will use as a template for creating the carving 
          on the texture. But before we close up Illustrator, there is one more 
          thing we need to do. Take a look at the following graphic. It is just 
          a simple texture I made in <b>Photoshop</b>. </font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure11.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">I'm not going to go in-depth 
          into how I created it since this is a tutorial on designing and putting 
          your design together rather than building raw textures. It will serve 
          as our base texture. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">Import this graphic into 
          <b>Illustrator</b> with the file still open with the shape we just created. 
          Use the <i>Place</i> menu item (File - Place). Once it has been imported, 
          put your shape right on top of the bitmap. We are doing this so we can 
          get the sizing right. You can scale your shape in Photoshop, but keep 
          in mind that Photoshop's scale is lossy and might mess up your shape 
          a bit. So, I advise to stick with Illustrator since the scaling is based 
          on mathematical vectors rather than colors and pixel placement.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure11_2.jpg" width="344" height="223"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">(This is a zoomed-in view)</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Notice how it doesn't fit 
          perfectly on top of the bitmap? The edges go off. Actually, this is 
          good to a small degree because, remember, we want this to tile horizontally 
          – so we want the sides of the shape to overlap a bit or else it wouldn't 
          tile correctly. Experiment and see what works best. The way I have it 
          in the graphic above is probably a bit too large, so you may need to 
          scale it up or down a bit to fit it how you want it. You will want it 
          so the shapes fit together (when tiled) similar to this:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure11_3.gif" width="561" height="90"></font></p>
        <p>&nbsp; </p>
        <p align="RIGHT"><font face="Arial, Helvetica, sans-serif" size="+1">(<a href="index3.php">continued 
          on next page</a>)</font></p>
        <p align="LEFT">&nbsp;</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><i><font face="Arial, Helvetica, sans-serif" size="-2"><b>Credits:</b> 
      Illustration &copy; 1999 Chris Buecheler. Two Programs, Two Dimensions is 
      &copy; 1999 Rick Grossenbacheri. 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 
      try it or we'll do something really nasty. Trust us. Wooooo.</font></i></td>
  </tr>
</table>
</HTML>
