Animated Header for Blogger
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 request from my blog site's visitors who interested in animated images to teach them how I've created my Blogger-hosted animated header. So as not to turn them down, in this post I will try to show you how I've created and uploaded the animated header to my blog site.
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 GoogleDocs and installed to Blogger template. It is as simple as that.
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 and was saved as 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 was save 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. Animated images won't stay animated if the image is a Blogger-hosted since the images are stored in Picasa Web Albums and Picasa doesn't support animated images.
What I've done was, to upload my animated GIF file to Google Docs of my Google Account.
Finally I've to edit or configured the header on my Blogger template layout by replacing the image of the my previous header with the newly created animated GIF file using the link address retrieved from the GoogleDocs.
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
