Posts Tagged ‘DesignTutorials306’

Comic Wars, the Animation

Monday, February 13th, 2012


Due to other ds106 pioneers success with GIFs, I wanted to challenge myself with this assignment. It took me a while to figure out what cover I wanted to do, but I finally settled on this provocative comic cover. Honestly, I do not know anything about Marvel/DC characters or comic book history, but I loved the blood on the shield, the fierce looking characters, and the refined details of this one.

On the technical side, making the GIF was a very involved process, without too much to show for it. I am still experimenting with the tools and features in GIMP, so the technical skill behind this GIF is low. First, I need to figure out the basics to creating a GIF, while hunting in The Google I found this tutorial. The guy is a little sporadic and probably 14 but he provides a solid foundation for a basic GIF.

Next, I decided to create a modest GIF by focusing on making the shield spin. First I created a duplicate layer of the original image. Next, I cropped the shield from the second layer away from the background.


Next, I clicked on the ‘rotate’ tool (the one of the two blue squares), and rotated the image by 90 degrees.

Then, I saved the image. Next, I isolated the newly rotated shield then cut/pasted it into the original layer. Last, I dragged the rotated shield into position. I repeated this process two more times until I created four separate images with the shield in four different positions.

To learn how to save the new creation, I followed the tutorial posted above. This is where it gets tricky: embedding the GIF into WordPress. To successfully embed a GIF click on New Post -> Upload/Insert -> (select your GIF file) -> Insert. Be mindful to keep the GIF in its original size. Do not be tempted to size it down, because it will not animate in your post.

Overall, this was a simple, clean animated GIF. It also marks my journey/struggle with GIMP. Soon I aspire to make a GIF like this one, it’s the dream.