BigBlueHat

We like them. A lot. Especially those from a quaint locally owned outfit known as the Donut Shoppe. I suggest you try the chocolate-covered cream cheese donut, which is just as unnecessarily decadent as it sounds, and the donut known simply as “spice.” These treats have been known to cause me to utter profound phrases such as, “Just remember… always eat lots of donuts… on Tuesday.”

Some days these donuts provide just the inspiration we need to tackle the world’s problems, such as adding many wonderful features to our CMS of triumph known as BlueInk. In recent days we have added the capability for front-end registration and a corresponding permissions system, refined a couple of content types (contacts and events) based on popular microformats, and constructed a fairly robust form-builder system. We invite you to try our demo and let us know what you think—we are seeking to enhance it steadily, so if you have any ideas, criticisms, or observations, we are all about hearing them. Just let me grab a donut first.

Okay, so the words “fun” and “GIMP” might not belong in the same sentence, but here’s a tip for those working with a GIMP or Photoshop file with transparent layers that need to be exported as transparent GIFs for a website. Granted, life would be easier if we could just export PNGs and use them on our web pages, but then again life would be easier if we didn’t have Internet Explorer 6 to worry ourselves over. But fear not! On that fateful day when pigs learn to fly, we won’t have to worry anymore.

Of course you know this whole rigamarole isn’t necessary if your GIF rests on a solid color background. If it does, why use transparency? In my case, the background is a gradient, so here’s the procedure. Highlight the layer in GIMP that you need to export (my layer was complicated by the fact that it was semi-transparent to start with even though the opacity for the layer was 100%—long story). Now select a background color, which will be used as a transparency mask—the general color of your web page’s background. You have a bit of leeway here and may need to repeat the step later. Now for the magic step: from the menu select Layer > Transparency > Semi-Flatten. After doing this your image should still look relatively the same. If not, undo this action and select a different background color. I found that a light foreground on a dark background is harder to get right, so trial and error may be the order of the day.

Once you are incredibly stoked with your decision, go ahead and crop the image to the desired portion and remove the visibility from the background layer(s). Save this as a GIF (accept the prompts to merge layers and index the colors), and you should be good to go. But as we all know, in the wacky world of web design, your CSS masterpiece may not match up perfectly with what you saw in your GIMP or Photoshop file. This was the case for me on a couple of my attempts. The first image was dark on a light background, and I got it right the first time. The second was light on dark, and it took four or five tries to get it right. All you need to do is undo the appropriate number of actions in GIMP, select a different background color, and try again. You may also need to use the burn tool to lighten up your layer before exporting. Hey, I wish I could tell you how to do this perfectly in one try, but if I could do that, I’d probably be President of the United States and spending my valuable time jogging around the White House 200 times per day, not doling out image-editing advice free of charge.