[NCLUG] OT: transparent jpg

[dobbster]

> so, what do folks do when making logo type images for web pages? incorporate
> a background color on the image to 'go with' the background color of the
> webpage? create some other kind of transparent image? hire out to some
> image/graphics person?

Forgive me if I am over-answering this question, but it seems like a
good opportunity to document some of my GIMP "recipes" (some of my
coworkers ask about this on occasion).  It's also late at night and I am
semi-delerious.

The GIMP rocks.  It is a great tool for creating transparent .gifs. I am
currently using GIMP 1.1.24.  If the logo or graphic is simple and can
be created with the text/brushes/etc. tools, here's all you need to do:

1. Hit CTRL+N for a new image.  Select a "transparent" fill color.  

2. Create your image using GIMP's built-in tools.  Hit CTRL+H to anchor
each newly created layer.

3. Hit ALT-I to switch to "Indexed" mode.

4. Right click, "File->Save as..." and save the file as a .gif.  Done.

For more complex images, here's what I do:

1. Under File->Preferences, set the transparency type to something
obvious, like "mid tone checks".  This makes the transparent regions
obvious.

2. Hit CTRL+N for a new image.  Select a "transparent" fill color and
choose the final image size.  This will create a window called 
"Untitled-1.0".  

3. Choose a background color you don't plan to use in the image.  I'd
suggest selecting a RGB hex triplet like "#fff0f0", which is not quite
white.  

4. Hit CTRL+N again and select a "background" fill color.  This will
make a new window, "Untitled-2.0".

5. Create or open your logo/graphic in Untitled-2.0.  (I like making
logos with the built-in "logo" scripts.  To do this, go to the GIMP main
window, click "Xtns->Script Fu->Logo" and choose a logo script.  If you
do this, make sure to "merge layers (CTRL+M)" before going to the next
step.  The freefonts package helps provide a lot of variety, and there
are lots of logo scripts available for download.)

6. When the logo/graphic is complete, right click on Untitled-2.0 and
"Select->By Color..."  Click on a background region of Untitled-2.0. 
The default "fuzziness threshold" seems to usually work fine, but you
might have to tweak it if your logo/graphic has colors close to the
background color.

7. Hit the "Invert" button.  The region selected should now be your
logo/graphic.  Copy it with CTRL+C.

8. Move to Untitled-1.0, paste with CTRL+V, then hit CTRL+H to anchor
the layer onto the transparency.

9. Repeat steps 4-8 as needed to add more stuff to the final image.

10. With the focus on Untitled-1.0, hit ALT-I to switch to indexed
mode.  Now right click, hit "Save as..." and save Untitled-1.0 as
"whatever.gif".  Done!

This process can be streamlined with certain trickery, such as assigning
hotkeys to different menu items.  For example, you can mouseover "Select
by Color" and hit CTRL+ALT+1 while holding down the right mouse button
to make a hotkey.

Another thing you can do is work with the "layers, channels & paths"
window.  Start with a transparent background image, and add a new layer
with a transparent fill color.  Click the eyeballs so that only the new
layer is visible.  Create your logo there, and then anchor the layer to
the background.  Repeat as needed.  You can also create animated .gifs
this way: If you create multiple layers (without anchoring them) and
save the file as a .gif, the layers become frames in an animation.  You
can then re-edit the file and modify the layer names to change the delay
between frames in the animation.

I think to make this work with .pngs, you have to use an alpha layer for
the transparency.  I've never tried this.  So far, I haven't been sued
for using .gifs on my web pages.

(Questions: Is there a better way?  And given the copyright stuff, why
does GIMP still support .gifs?)

Mark (dobbster at dobbster.com)