<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/raven_thum.jpg" width="93" height="93" align="MIDDLE"></p><p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.36/feat/index.html">Inside Raven Software</a>: Our definitive history of the company behind <B>Hexen</b>, <B>Heretic</b> and other classics.</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 
          Rick &quot;<a href="mailto:flat@iserv.net">Flatness</a>&quot; Grossenbacher</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">Once you have your shape 
          the size you want it, get rid of the bitmap of the base texture you 
          just imported. You <b>don't</b> want to keep it underneath your shape 
          because when you rasterize the <b>Illustrator</b> document in <b>Photoshop</b>, 
          the bitmap will be part of your shape (and you don't want that). We 
          will import the stone texture into <b>Photoshop</b> separately so the 
          shape and bitmap are on different layers.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">You should have only your 
          shape in the Illustrator document now. Save this as an <b>Illustrator</b> 

          file. Now we're done with Illustrator for this exercise. It's time to 
          fire up <b>Photoshop</b>.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">In <b>Photoshop</b>, open 
          up the base texture you used to do your sizing in <b>Illustrator</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 made the texture and the 
          background two different layers, then named the texture layer "Stone." 
          There was really no cosmic reason for making a background layer other 
          than I just wanted one – I like to have a background layer separate 
          from things I will be editing. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now it's time to load up 
          the shape we made in Illustrator. Load it like you would any other file 
          in <b>Photoshop</b>. A dialogue box will come up to confirm that it 
          is going to rasterize your shape (change it from a vector object to 
          a bitmap). Click OK. Select the shape, copy it, and paste it on top 
          of the stone texture in the middle as a separate layer. Name this layer 
          "Shape." Naming your layers is a good habit to get into. Although I 
          have to admit I'm usually too lazy to do it, for the purposes of this 
          tutorial it is critical or else it would be impossible for you to know 
          which layer I'm referring to.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure12.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">In your layers palette, click 
          on the "Stone" layer to select that layer (it should be right below 
          your "Shape" layer). Then move your mouse pointer to the "Shape's" layer 
          and Ctrl click. It should select the shape. Notice that when you have 
          the cursor on top of the "Shape" layer and you press Ctrl, the mouse 
          icon changes to a little hand with a hash-marked box. Now that you have 
          the outline of the shape selected and you are still on the "Stone's" 
          layer, do a copy (Ctrl C). You've just copied the shape but from the 
          contents of the "Stone's" layer. Now paste it right on top of the original 
          shape but on a separate layer. Name the layer "Stone Shape," and drag 
          it so that it is the top layer in the palette. Then, with the "Stone 
          Shape" layer still highlighted, bring up the <i>Brightness/Contrast</i> 
          pop-up window (under the menu item: Image - Adjust - Brightness/Contrast). 
          We are going to brighten it up very slightly to set it off from the 
          background stone. Drag the <i>Brightness</i> slider up to +16 and click 
          OK. Here is what your layers palette should look like:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure13.jpg" width="212" height="243"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">It's time to put a shadow 
          under the shape we just cut out of the stone. First, select the "Shape" 
          layer (the black shape, <b>not</b> the one we just made), and make two 
          copies of it. We have made the two extra layers because they will simulate 
          the shadow's falloff. Your layers palette should now have the following 
          layers from top to bottom: "Stone Shape," "Shape copy 2," "Shape copy," 
          &quot;Shape,&quot; "Stone," and "Background." Click the layer "Shape 
          copy 2" to activate it, then select the <i>Move</i> tool (V), and press 
          the down-arrow key on the keyboard once to move it down one pixel.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure14.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now select the layer "Shape 
          copy" and press the down-arrow key twice. Then, set the opacity slider 
          of "Shape copy" to 70%. To complete the shadow, select the layer "Shape" 
          and press the down-arrow key four times and set the opacity slider of 
          that layer to 40%. Here is what the graphic should look like:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure15.jpg" width="128" height="88"> 
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif">With your shadow done, we 
          need a highlight at the top. Make a duplicate layer of the "Stone Shape" 
          layer and drag it below the original "Stone Shape" layer (the copy should 
          be your second layer from the top). Bring up the <i>Hue/Saturation</i> 
          menu (Ctrl U). Drag the <i>Lightness</i> slider to +40 and click OK. 
          Now move it up in position by one pixel by pressing the up-arrow key 
          on the keyboard once. Ba-Bing! Now it is starting to look like something.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure16.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now that everything looks 
          good, go ahead and merge all the layers <b>except</b> the "Background" 
          layer and the "Stone" layer. Name the layers you just merged "Stone 
          Shape." You should have a total of three layers in your layers palette 
          now. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">Ok, here is where it may 
          get a bit complicated so pay close attention. Duplicate the layer "Stone 
          Shape," and name the duplicate "Stone Shape Bottom," then move the layer 
          down underneath "Stone Shape" (so "Stone Shape Bottom" is the second 
          layer from the top in your layers palette). Next, click "Stone Shape 
          Bottom" to make sure it is selected, and press the down-arrow key on 
          the keyboard 7 times (make sure you are still using the <i>Move</i> 
          tool. After that, bring up the <i>Brightness/Contrast</i> menu and set 
          the <i>Brightness</i> to -20 and the <i>Contrast</i> to -27.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure17.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now, duplicate "Stone Shape" 
          again and name it "Stone Shape Bottom 2," and on the layers palette 
          move it underneath the layer "Stone Shape Bottom." Then press the down-arrow 
          key 11 times. On this one, you don't need to change the Brightness/Contrast 
          because it is underneath the shadow of "Stone Shape Bottom" and looks 
          fine as it is. </font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure18.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Ok, we did the bottom. Now 
          for the top. Duplicate "Stone Shape" and name the duplicated layer "Stone 
          Shape Top," then drag the layer on the layers palette underneath "Stone 
          Shape Bottom" (in between "Stone Shape Bottom" and "Stone Shape Bottom 
          2"). Then move it with the up-arrow key 9 times. Then bring up the <i>Brightness/Contrast</i> 
          menu again and set the <i>Brightness</i> to -28 and the <i>Contrast</i> 
          to -23.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Next, duplicate "Stone Shape 
          Top" (the layer you just created), and name the duplicate "Stone Shape 
          Top 2," then drag it underneath "Stone Shape Bottom 2." Move "Stone 
          Shape Top 2" up 2 pixels by pressing the up-arrow key twice. Then, set 
          the <i>Brightness</i> down to -55. I know that all these layers are 
          a pain to keep track of, but their arrangement is very important. So 
          check to see if yours is the same as here:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure19.jpg" width="192" height="324"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Then, check to see if your 
          graphic looks like this:</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure20.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">This thing is really starting 
          to take shape now. I looked at the top layer in the layers palette, 
          "Stone Shape," and decided that it was a bit too bright so I took down 
          both the <i>Brightness</i> and the <i>Contrast</i> to -8. Feel free 
          to do this to any of your layers. Maybe you'll want something different 
          from what I have here and like it better. Quite often I will continuously 
          change the brightness of layers, just to give it a different perspective. 
          If you do this, you will tend to see things you didn't before. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">At this point we are basically 
          done with our design. The only thing it needs now is some touching up 
          by hand. So, I'm going to set my brush to a real small size (a couple 
          of pixels width) and go into a few areas using the <i>Burn </i>and<i> 
          Dodge</i> tools to make some highlights and shadows.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure21.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">The real problem this graphic 
          suffers from is that by using a simple 2-D shape created in Illustrator 
          and placed in Photoshop, it gives somewhat the appearance of paper-thinness 
          to the stone shapes. Maybe that is the look you are going for. If not, 
          the way to solve this problem is up to some imaginative pixel art manipulation 
          or even some of it being rendered in <b>3D Studio MAX</b>. But that's 
          a whole other tutorial for another time.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Experiment and try different 
          things with your texture. I put another smaller border inside the original 
          top and bottom borders and then drew some moss to see how that would 
          look.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure22.jpg" width="128" height="88"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Or, if you are really ambitious, 
          try something completely different. Most of the alterations made to 
          this were with a few added/changed layers, and the use of the <i>Burn</i> 
          and <i>Dodge</i> tools (probably my most often-used tools besides the 
          <i>Rubber Stamp</i>). </font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="figure23.jpg" width="137" height="133"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Well, whatever you do, I 
          hope you've at least learned a few things about using <b>Illustrator</b> 
          and <b>Photoshop</b> together to your advantage to create some cool 
          art. If you would like to send me your version of this tutorial that 
          you are working on, for me to take a look at, go ahead and e-mail it 
          to me, I'd be happy to check it out. Or, if you've seen a technique 
          in this tutorial that you think could be improved on, or just a different 
          way of doing something that would make it look better, send that in 
          too. I'm always interested in other artists' methods.</font></p>
        <p>&nbsp;</p>
        <p align="right"><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></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 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 
      try it or we'll do something really nasty. Trust us. Wooooo.</font></i></td>
  </tr>
</table>
</HTML>
