Animated Header for Blogger

By Roshidan Rashid

Updated : Animated images could make our website's layout or presentations catchy but it may also distracting and annoying if its overdo.

I have received a few requests from my blog site's visitors who interested in animated images for blogs, to teach them how I have created my Blogger-hosted animated header. So as not to turn them down, in this post I will try to show you how I have created (an animated gif image file) and uploaded the file as my blog site header.

Its quite simple but it seem a bit complicated to those who are not familiar with the application software such as Adobe Photoshop, SWiSHmax or/and Adobe Flash.

Its actually a GIF animation file format (the only allowed Blogger-hosted animated image file). Uploaded to Picasa Web Album and installed to Blogger template. It is as simple as that.

How to make gif animated file?

I started by creating the background of the header using a graphic application software that I am familiar with that is the Adobe Photoshop. The width of the background actually was designed for my previous template which is 900 x 100 pixels in dimension. I have created several designs and saved this static pictures to gif or as a jpeg file.

Then, I used SWiSHmax (Flash or Shockwave application software) to create the animated text effect by importing the background file into it. SWiSHmax has plenty of preset effects that can be used to make our presentation looks stunning and impressive. I've used the preset animated effects for my animated blog header namely "Move together from random direction", "Vortex up and slide forward" with "Squash out" and "Typewriter".

The latest SWiSHmax3 has the advanced flash creation tool for the graphic artist or web professional. It could creates stunning flash animations and websites with ease. It also includes over 350 preset multimedia effects and over 180 ready-to-use components and vector shapes. It has the capability of importing images, graphics, sound and video from all popular formats so as to export presentations to flash, video, EXE, GIF animation or image sequence.

Since I am using the earlier version's product which has been discontinued and has no capability of exporting presentations to GIF animation files, my animated header has been saved as a swf file.

If you have the latest version, you may skip the next step (converting SWF files to GIF Animation files).

In this step, I've used Adobe Flash application software (usually used to produce flash animation, flash banners or flash files) only just for the conversion purpose by importing the SWF file to the stage and set the 'loop play back' on, so that my animated header will repeatedly animated and then exported it as a GIF animation file.

The next step is to upload the file. Previously, animated images won't stay animated if the image is a Blogger-hosted since the images are stored in Picasa Web Albums which doesn't support animated images. Thanks god, now picasa does allowed it.

Finally I've to edit or configured the header on my Blogger template layout (layout for blogger) by replacing the image of the my previous header with the newly created animated GIF file.

Walla! This is what it turned up to be.

If you have any question, just give me a comment. InsyaAllah, I'll try to help the best that I could. Good Luck.

If you like this post, please bookmark and share. Thank you