December 24, 2008

Spread Christmas Cheer With an Animated Twitter Avatar

By Jesse Stay of Stay N' Alive (Twitter/FriendFeed)

While searching through various profiles on Twitter lately, I realized a select few had realized a small secret with Twitter. In browsing those profiles, Twitterati such as @ijustine and others I noticed had animated profile pictures, some even larger than the default 100x100 pixel standard profile avatar we're used to seeing. The animated profile pictures were a unique way to make their profiles stand out amongst the many other profiles I was reading amongst my friends list on Twitter. They were also a great way to spread the Christmas cheer.

I decided to try this on my own, and was unsuccessful on my first try. It appeared as though these profiles were either a fluke, taking advantage of a previous flaw in Twitter's profile image upload process that no longer worked, or they were clue on a secret I wasn't aware of. Then I came across this post on Twitter's GetSatisfaction page and I realized I was just not trying hard enough.

How to Create Your Own Winter Snowfall Profile Picture

Here's how I made mine. Creating the image takes a little PhotoShop knowledge, or you can just do a search and steal your own graphic from elsewhere on the Web. This is the best way I know how to do it - please share if you know better! Here's how to roll your own in PhotoShop - this was all done on a Mac in CS4:
  1. Download the Snowfall PSD - I found these files of animated snowfall you can load right into PhotoShop. Decompress the file, then open one of them in PhotoShop, and now we need to get your profile picture behind the snow.
  2. Click File->Open, and select your profile image to have in the background. It will open in a new tab or window within PhotoShop. Choose your little arrow selector (I'm not a PhotoShop expert - I'm not sure the "official" name for this), and drag, then drop your image into the main Snowfall PSD window you originally opened. It should create a new layer with your profile image in it (if not, create one, and re-apply the image to that layer). Now, resize your image to fit the existing canvas.
  3. You should see a window with a list of frames for the animated graphic. If not you'll need to enable that window (we won't cover that here). With the new layer and your profile image, you'll need to delete the extra starting frame with that profile image. Once deleted, select the new first frame, then make sure the background image frame is shown (the little "eye" should be selected), and the first layer should be the only one displayed (again, with the little "eye").
  4. Take your little magic wand selector, and click in the black background. The snowflakes should all be selected.
    Now hit your "delete" button. (Again, be sure the layer 1 is selected, or you'll get the wrong snowflakes selected) You should now see the first frame's snowflakes in front of your profile picture.
  5. Now, select the second frame, and then ensure your profile image background, and second layer is showing, and the first layer is turned off. Repeat step 4, and you'll see the second frame with your profile image background and second frame snowflakes in front of it.
  6. Repeat for the remaining frames and layers.
  7. Now, click "File", and "Save for Web and Devices", choose to export as the preset "GIF 128 No Dither". Then, in the colors' dropdown select 256 (so we get the full spectrum). Click Save, and then save to a file you can remember. You've now got your animated gif!
Saving the File to Twitter

This is actually the tricky part. Unless Twitter fixes their upload process (which in that case perhaps it won't even be possible to do this, or else it will be much easier, depending on what they decide their policy to be), it won't work on your first try. For some, it could take up to 30 tries, so be patient, but your patience will be rewarded, I promise!

The first thing to do is go to http://twitter.com/account/picture, and delete your current profile picture by clicking "delete current". I found that even this takes several tries to get working, so if at first you don't succeed, try, try again. Once deleted, you'll need to start the process of selecting the file from your computer (by clicking "browse"), then uploading the file to Twitter (by clicking "save"). You should see a "That's a nice picture!" message after you hit save and it is uploaded.

If successful, your new animated picture should display next to the browse box, and you need to do nothing else. However, you will probably not see that your first try, and even some times you'll get a "Twitter is over capacity" message. Ignore those, hit back, and restart the process of browsing to select your picture, then hitting save again, and again (again, it could take over 30 times!), until you see your animated gif appear.

Soon you'll have a beautiful animated Christmas gif like mine. You can check mine out on my profile - create your own and share it with us in the comments!

Read more by Jesse Stay at Stay N' Alive.