DIY Animated Blog Header

Sharing is caring!

   Hello everyone! I’m here to share a relatively simple tutorial on how to get a custom, animated blog header like mine:
If you haven’t noticed, I change my headers seasonally but this is the first time I figured out how to get it to move! I realize its nearing closer to winter now, and feels like it due to Sandy hitting the east coast and leaving Ohioans with unseasonably chilly weather. So soon this header will become obsolete and I will get to make a new one! here is a quick synopsis of the evolution of my headers…
Starting with spring’s:


 And then Summer’s
That was quick and believe me, I have had many more headers but this is going to be a sort of theme (somewhat like Google) with the same cool font but different scenarios. I really like to look at the evolution so far, even if it is small so far.
Would you like to make your own moving header? Just follow these easy steps!…
Open Photo shop and create your document. Square isn’t really good for a header but keep in mind, animation makes for some flashy buttons too!


Not many people use the animation in photoshop but you can bring it up in your window by going to window > animation and clicking it.


The idea is that each layer makes the movement.


You need all the layers before you can start making the frames. This is usually made for making GIFs so, it also sort of limits your use for it. I used circles to make a bubble-ish effect.


Each circle will be a layer!



I did a lot of circles until it went to almost one solid color.


It builds up to look like this…

Now turn all of your layers off except the base.


Go to the little arrow on the side and click “New Frame” It will pop up as a frame.


Turn the layers on one by one and repeat.




If you want one slide to stay longer, like me (I wanted it to actually be readable instead of passing by really fast).  It is selected at 10 seconds but the longest that I used was .5.


Now the last step is to go to Image > Image Size


Set your Resolution to 75 ( I haven’t noticed a difference in quality using text and graphics rather than photos, but the only difference is that this makes it load faster).


You have to save it as a GIF so what has worked for me is to go to File > save for Web and Devices…


Make the right handed side of the chart thing look like this…


Then just click save and save it to wherever! Blogger doesn’t let you straight upload a GIF to the blog header section, but if you upload it to Photobucket and then copy the direct link it will work. Instead of uploading it from your computer, just paste the link in other box. Hope this helps!
Did you make an animated header for your blog? Email me the link to your blog at knowandtellcrafts(at!)hotmail(dot!)com
I’ll be sure to check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *