I’m not sure how long this has been a possibility, but I recently discovered that you can use transparency in your Twitter Avatar (or profile picture). When I was creating the new Gunaxin Twitter accounts, I wanted to have a different avatar for each one, so I decided to create some new graphics. Since I have all of the source images for our logo as high-resolution layered graphics, I figured I would try a transparent version and see what happened. To my delight it worked.

I’m not really here to teach you how to make transparent graphics, but essentially you create a layered image in Photoshop, and then use the Save for Web option to export out a PNG-24 graphic with transparency. For twitter of course I would recommend designing for a square. Once you have it added to your profile, it will look something like this :

Notice the background color in those two versions of the "G"

The result is an avatar which first of all stands out from everyone else, because it’s not a square box, but also will adapt to whatever background is behind it, in various twitter applications. Here is what our new avatars look like in Tweetdeck for example :

I suggest creating a fairly large image, so people can see a crisp avatar when they look at it by itself, or when viewing your profile page. At larger sizes, you can even see the drop shadow transparency, which leads me to believe that alpha channels are respected as well.

So I guess it’s time that we all start breaking out of that square box. Have fun!