I created this animated GIF above to post on my homepage as my header. I wanted something bright and fun to establish my blog’s persona. The paint splodges represent creativity and the ‘design’ aspect that I will be showing in my blog posts. I also love how each of the splodges come on one by one, almost like paint is being spilled on the GIF, and then my blog name is stamped at the end like a brand stamp.

Setup in Adobe Photoshop:

After planning what GIF you want to animate and the images you want to put onto your header, open up Photoshop and arrange them how you like. The header size is key in making sure it’s the right width and height – my header size is:

Layers are important in making sure they are individual and separate so you can put them in the sequence. I made sure to label my paint splodges differently so I could distinguish each one and I created a nice pink gradient as my background to keep it simple as the paint splodges were the main attraction. I found my particular font through DaFont so I could make it more unique and fun.

Timeline:

In order to create the GIF, it has to be looped. You can do this on Photoshop by clicking on the ‘Window’ tab, and then on ‘Timeline’. You can edit which speed you want each of your layers to appear. I wanted my paint splodges to appear fairly quickly but not too quick that you can’t digest the image so I put their speed on 0.5 secs. I put the final paint splodge onto 1sec to build up to the final layer of the blog name which appears for 2 seconds. I felt that this timeline worked best for me as any longer or any shorter made it look too quick and chaotic or too slow and disengaging. Because this is for a GIF, it has to be looped, so I put the timeline loop on ‘forever’.

---

Overall, I enjoyed making an animated header and I found it quick and easy to create this on Photoshop. It definitely adds some interesting elements to my homepage which is eye-catching and engaging.