Prop Pix with PS

<BODY BACKGROUND="gif/pbg2.gif" BGCOLOR="#F0F0F0" text="#000000" LINK="#4040A0" VLINK="#800000" ALINK="#00FF00"> <TABLE BORDER=0 CELLPADDING=5> <TR> <TD VALIGN=top ALIGN="right"> <img src="gif/props.gif" alt="Props!" width=128 height=142><br> <ul> <font size="-1"> <em> <li>What is <A HREF="http://www.palacetools.com/">The Palace?</A> <li>What about <A HREF="ipt.html">Scripts?</A> </em> </font> </ul> </TD><TD> <h1><img src="gif/astsh.gif" width=279 height=63 alt="Avs of Steel!"><br> Making Palace Pics with <a href="http://www.adobe.com/prodindex/photoshop/main.html"><cite>Adobe Photoshop</cite></a></h1> <h3>A Guide for Windows and Mac Users</h3> <font size="-1"> <em> If you can see this, you are using a web browser without frames. You're missing many of the best and newest features! </em> </font> </TD></TR></TABLE> <P> <font size="+4"><b>E</b></font>very <A HREF="http://www.palacetools.com/"><cite>Palace</cite></A> user wants great avatars and props. Some want to draw them, some want to scan them, some want to steal them. This short document will tell you how to do all three using <cite>Adobe Photoshop.</cite><p> <em>If you are not a Photoshop user,</em> don't turn off this page yet! There are some tricks that everyone may find useful when editing av pictures.<p> If you are a <strong>Mac</strong> user without Photoshop,</em> try <a href="gcpix.html">this page</a> instead, for a look at how to build props with the shareware program <a href="http://www.lemkesoft.de/" target="_top"><cite>GraphicConverter.</cite></a> <strong>Windows</strong> users without a copy of Photoshop are urged to follow along here and to look for the latest version of the shareware powerhouse <a href="http://www.digitalworkshop.co.uk/psp.htm" target="_top"><cite>Paintshop Pro.</cite></a> <ul> <li>Press <a href="pprecap.html">here</a> for the step-by-step recap. <li>Press <a href="ppedge.html">here</a> for an Advanced Tutorial. <li>Press <a href="http://www.rahul.net/natpix/RayPS.html">here</a> for more Photoshop fun - like <em>Raytracing</em> in Photoshop! </ul> <h2>Making a Copy of the Palace Color Map</h2> <img src="gif/clut.gif" alt="CLUT" align="RIGHT"> The first thing any Photoshop user should do with Palace is store a copy of Palace's custom color map. You can do this by opening most any Palace room GIF ("pgate.gif" is prefered, since it's guaranteed to have the complete map). They <em>should</em> all have the same map, and your avs should use the same set of colors.<p> Once you've opened the GIF, select "Color Table..." under the Photoshop "Mode" menu. A dialog will pop up, showing you the color table. Hit the "Save..." button. I saved mine as "Palace CLUT" (<em>C</em>olor <em>L</em>ook<em>U</em>p <em>T</em>able). Once the CLUT is saved, you can just hit cancel on the dialogs and close the GIF <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> you won't be needing it any more.<p> The chart below shows the Palace color map rearranged in various strips. The top strip shows the map in the order it appears in the GIFs, and thus in Photoshop (The block of blacks at the end of the table is unused). Subsequent strips rearrange the color table, sorting on hue, on saturation, on brightness, on the red components, on the green, and finally on the blue.<p> <center> <img src="gif/strips.gif" alt="CLUT Strips"><br> <font size=2><em>Looking at the Color Map <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> Indexed on Different Qualities</em><font size=3> </center><p> Of special interest here should be the block of colors at hues of around 15 degrees or so (easily found in Photoshop by using the color picker). Sadly, this region is not well-repesented, and the colors in it are overly-saturated. Why is this region important? Because that part of the color wheel is where all the skintones (worldwide) live. It often makes it very hard to nail a good flat-colored "skin" region on an avatar face <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> especially for flat-colored cartoon characters. Why this color map was made the way it was, I can't answer.<p> <h2>Using the Color Map</h2> For any picture you want to use with the Palace, as a room background or an avatar, you need to make sure it uses that color map. Unless the picture started as a Palace image (like the room GIF), we'll need to convert it. There are essentially three kinds of pictures we will convert:<p> <ul> <li>RGB (24-bit or 32-bit) full-color images (such as color JPEGs) <li>Grayscale (8-bit) images (such as B&W Photos, JPEG or GIF) <li>"Alien" indexed-color images (such as GIFs you might find on the net) </ul> For both grayscale and indexed-color images, you must convert to RGB color via the "Mode" menu <em>first,</em> before converting to indexed color. Photoshop will always assume that grayscale GIFs should be mapped to exactly 256 grayscales; and it has no good way to directly convert from one color table to another. A short time RGB mode is the neccesary in-between step.<p> Remember: <em>Save Your RGB Image.</em> You may need it later, for changes or fixes.<p> To convert an RGB image, you select "Indexed Color..." under "Mode." A dialog will pop up. In the "Palette" box, press the "Custom..." button. In the "Dither" box, press whatever you like <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> "None" will generally give you the smallest file size, "Diffusion" the nicest tonal gradations. Now press "OK."<p> Another dialog will come up, showing you the color table. If it's still the Palace table (after a while, you'll get to recognize it!), just press "OK." If not, press "Load..." and load our "Palace CLUT" file. Now look at your image: it's living in the Palace world.<p> <blockquote> Not sure about that "Dither" option? Just hit "Undo" and convert it again in several different ways. Or duplicate the image and convert each copy a different way, to compare side-by-side. </blockquote> <center> <table width=100%> <tr> <td align="CENTER"><img src="jpg/m_132.jpg" alt="RGB" width=132 height=132></td> <td align="CENTER"><img src="gif/mNoDith.gif" alt="unDith" width=132 height=132></td> <td align="CENTER"><img src="gif/mDith.gif" alt="Dith" width=132 height=132></td> </tr> <tr> <td align="CENTER"><font size=2><em>RGB Original</em><font size=3></td> <td align="CENTER"><font size=2><em>No Dithering</em><font size=3></td> <td align="CENTER"><font size=2><em>Dithered</em><font size=3></td> </tr> </table> </center> <h2>Transparent Areas</h2> Pictures are moved back and forth between Photoshop and the Palace Prop Editor by using the clipboard. If you can open both applications at the same time, great <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> if not, you'll need to use the Scrapbook as a go-between.<p> The transparency mask is <em>not</em> preserved when pasting pictures back and forth between programs. My method to deal with this is to place the picture on a background color that I'm sure I won't be using in the av picture itself. Usually an extreme green or blue ("bluescreen," heh). The color I usually use is [R51 G255 B0]. This is a color that's in the Palace CLUT, so Photoshop will never dither it. In PS 3.0, I put this falt color in a background layer, and leave the av in a transparent foreground layer, "flattening" only when converting to indexed color.<p> The transparency channel for the Palace is <em>one bit</em>. That means it's or of it's off. That's not the same as Photoshop, which allows 256 levels for soft edges (feathering) and other effects. So you'll have to stomp on that transparency mask <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> use the PS Levels command to force it. Select only the transparency channel (usually #4), select "Image -> Adjust ->Levels..." and try typing in the values 127 1.0 129 in the Levels Dialog Box. The grayscales should pin to black and white.<p> Once the picture is in the Palace Prop Editor, you can easily delete the odd-colored areas with the eraser. Holding down the Control key while erasing will quickly fill-erase large areas of contiguous color.<p> Copying <em>from</em> the Palace prop editor, the transparent areas will go black. If your prop had black edges, you won't know where they are any more! There are two good solutions for this problem:<p> <ol> <li>Since you've been saving a copy of the original prop in Photoshop, you may have also saved the mask. You did save the original pic, didn't you? Didn't you? <img src="gif/headOnBG.gif" alt="on bg" align="RIGHT"> <li> Put the prop on some flat-colored background other than black, and do a screen grab. This illustration here was made in the "Onyx Room" <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> I painted a blue blob behind the av, then hit the Mac "snapshot" FKey (Cmd-Shift-3). The resulting (RGB) picture is then cropped-down to just the region I need, and I can select the blue with the magic wand, invert the selection, and <em>voila</em> I get just the av. </ol> <a href="ppedge.html">Antialiasing Avatar Edges</a> <h2>Picture Sizes</h2> Palace uses two basic picture sizes for avatars. The basic prop size is 44 by 44 pixels. It's small, but bigger than a Mac finder icon. The second size is the actual avatar area: 132 by 132 pixels, or three props by three props. Large avatars can be built out of smaller props by tiling them together.<p> Personally, I like smaller, single-prop avatars. They are <em>much</em> faster to use when in the Palace. But it's easy to build bigger props, and I have a few big avs, too.<p> Photoshop lets you resize pictures. GIFs and the like should be converted to RGB before being resized. Sometimes resizing really destroys the line quality in GIF drawings <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> small lines turn to mush. This is a generic digital-picture probem. Fortunately, it's only occasionally serious. There are only a few recourses:<p> <ul> <li>Redraw the problem lines by hand in Photoshop, after resizing. <li>Beef-up the lines by hand in Photoshop, <em>before</em> resizing. <li>Convert a copy of the image to grayscale. Isolate the lines by pinning all non-black areas to white using either fills (magic wand useful here) or the "Levels" command. Build yourself a beautiful line mask, convert it to the same size as your resized color image, use "Levels" to beef-up any failing line densities, and use it as an overlay (or multiply the images together, if you've the chops for that sort of thing). <li>Copy the image to Adobe Illustrator using Adobe Streamline, then save as an EPS file in Illustrator, then convert back to a raster image in Photoshop <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> PS will let you force the image to a particular size. This is definitely the premium professional approach, but not for the casual non-artist. </ul> <h2>Building That Big Avatar</h2> When you have a picture that's bigger than 44x44, you will need to tile it. There's no automatic way to do this in Photoshop, but Palace's prop editor can do it for you.<p> For <strong>Windows</strong> users, things are easy <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> a large prop can be automatically cut-up and positioned with a single keystroke. Instead of just hitting Ctrl-V, press <strong>Ctrl-Shift-Insert</strong> to paste the image into Win Palace. The parts will be broken up and dropped into the prop lister boxes. It's then a simple task to go through the list and name each prop <a href="iptpos.html">something appropriate.</a><p> Similarly for <strong>Mac</strong> users, things are easy <IMG align=absmiddle width=13 height=1 SRC="gif/dot_black.gif"> large props can be automatically cut-up and positioned with a single keystroke. The trick is in <em>when</em> you hit "Paste" <strong>(Cmd-V).</strong> If you paste into to <em>prop lister,</em> the image will be correctly broken and tiled. If you paste in a prop-edit window instead, the entire large prop will be scaled down to fit 44x44 (probably not what you want). Again, go through the list and name each prop <a href="iptpos.html">something appropriate.</a><p> You've saved your original picture, right?<p> Now to assemble the entire avatar: hit "naked" in the prop window, then add all the props, one at a time, by double-clicking them in the prop window. If you've placed them correctly, they will tile together to create your entire av picture. Save the appearance as a macro, and you're there!<p> <a href="pprecap.html">Step-By-Step Recap</a> </a> <ul> <li><a href="house2.html">The House o Props n Bots</a> <li><a href="ipt.html">(The Bots Wing)</a> <li><a href="spt1.html">Stupid Palace Tricks</a> <li><a href="ibot.html">The BotBot!</a> <li><a href="jitter.html">The Palace That Never Was</a> </ul> <p> <!--BEGIN Palace Ring> <table width="100%" bgcolor="#000033" border=0 cellpadding=4 cellspacing=0> <tr><td align="center" valaign="center"><font color="#f0cf00"><b>The Palace Ring</b></font> <a href="http://www.geocities.com/SiliconValley/Park/5049/palacering.html" target="_top" onMouseOver="window.status='The Palace WebRing Homepage' ; return true"> <img src="gif/PRing.gif" align="abscenter" alt="The Palace Ring" width=45 height=36></a> <a href="http://www.webring.org/cgi-bin/webring?ring=twp&id=62&prev" target="_top" onMouseOver="window.status='Jump to the Previous Ring Site' ; return true"> <img src="gif/PPrev.gif" align="abscenter" alt="Previous Ring Site" width=36 height=36></a> <a href="http://www.webring.org/cgi-bin/webring?ring=twp&id=62&random" target="_top" onMouseOver="window.status='Jump to a Random Ring Site' ; return true"> <img src="gif/PRand.gif" align="abscenter" alt="Random Ring Site" width=33 height=36></a> <a href="http://www.webring.org/cgi-bin/webring?ring=twp&id=62&next" target="_top" onMouseOver="window.status='Jump to the Next Ring Site' ; return true"> <img src="gif/PNext.gif" align="abscenter" alt="Next Ring Site" width=36 height=36></a> <a href="http://www.webring.org/cgi-bin/webring?ring=twp&id=62&skip" target="_top" onMouseOver="window.status='Skip the Next Ring Site' ; return true"> <img src="gif/PSkip.gif" align="abscenter" alt="Skip Next Ring Site" width=43 height=36></a> <a href="http://www.webring.org/cgi-bin/webring?ring=twp&id=62&next5" target="_top" onMouseOver="window.status='See the Next Five Ring Sites' ; return true"> <img src="gif/P5.gif" align="abscenter" alt="See Next 5 Sites" width=32 height=36></a> </td></tr> </table> <!END Palace Ring!> <p> <a href="book/thebook.html" target="_top"> <strong>Feedback/Suggestions/Guess Book</strong></a> <br> <h5> <a href="house2.html"><img src="gif/LeftButton.gif" alt="Prev" HSPACE=8>House</a><br> Updated 7 April 97</h5> </body>