Working in San Francisco’s Financial District is like no other place in the world. There are famous landmarks, good restaurants, and interesting people to see. Frank Chu is one of those people. On any given day you may spot him incoherently ranting out loud on a busy street corner. Trying to figure out what his signs mean and just what he’s trying to tell you can be surreal, yet try to speak to him normally and he’ll respond very normally. He’s an interesting charter to figure out. I’m still trying.
I’ve discovered that the PNG image format is the way to go when you’ve got an image with surrounding gradients or anti-aliased pixels and a background that requires transparency. Say you want to add a drop-shadow to an image with a non-solid background color (i.e. a picture as a background with multiple colors). The usual step is to create a transparent GIF file with the matte color set to the background color. This doesn’t work too well with varying background colors, especially background colors with high contrast to the matte color that’s been set for the image.
Method 1
I used my foreground color as my matte color:
![]()
Transparent logo image with matte color set to foreground color:

Overlaying the transparent logo image over the background image.

I set the matte color to the green grass color using the eyedropper tool, but as you can see the resulting overlay doesn’t look that great.
So, the solution is to use transparent PNG! The quality of the drop-shadow will still look relatively high (either equal to or better than GIF quality) and it doesn’t matter what the background is; the drop-shadow will always blend into the background.
Method 2
Saving the transparent logo as in PNG format:

Overlay the logo over the background, and viola!

So, there’s no longer a need to define a matte color. Game, set, match…no more ugly glows around anti-aliased images.
People ask me, “so what is this good for”? This technique has many uses on web sites but one general purpose to be able to skin your sites with different backgrounds without ever affecting the main elements of the page such as your logo or your navigation images. This saves you a lot of time in not having to update other images on your site as a result of having changed to a different background or theme.
Last night’s Monday Night Football game featured a heated rivalry between the Eagles and Cowboys at Texas Stadium in Dallas. It become a powerful offensive showdown before halftime as the Eagles captured a lead with the score at 30-24. However, the biggest news of the night for fantasy football owners is what didn’t happen. With a clear line to the endzone, receiver DeSean Jackson of the Eagles committed one of the biggest rookie bonehead moves since Plaxico Buress’ spiking of a live ball. Jackson celebrated to the endzone too soon a la Leon Lett and fumbled the ball away at the 1-yard line by letting go. The play was reviewed and luckily the Eagles were given the ball at the 1 with first and goal. Brian Westbrook took it in and I guess you can say it was football kharma because last year Westbrook intentionally prevented himself from reaching the endzone to guarantee an Eagles win over the Cowboys. These weird, comedic moments in NFL history in a way is what makes watching the game so entertaining. You never know what’s going to happen. Thank God for Tivo.
Testing out Wordpress on iPhone. Ladies and gentlemen, Flashtut has gone mobile! Tune in next week when we officially welcome Flashtut to modern society.