Get Ready to Tumbl! The #GIFFight is on.

Vader_DS106_GroomJoinAlliance_2

“DS106 Joins the Rebel Alliance” and the Tumblr #GIFFight by @Rockylou22

DS106 joined in the Tumblr GIF Fight (#GIFFight) this week.  Our subject?… to GIF-ify Darth Vader. A few of us (who I knew about) stepped right up when the tweet from @mbransons came across our screens.

And now Talky Tina has posted August 2013 GIF Challenge #12: You Ain’t My Father, Bub! GIF Fight! [ Animated GIF Assignment 1190]

I had so much fun making Groom Outta This World With Joy, followed by his surfing the DS106 space shuttle in celebration of joining the “rebel alliance”, that I couldn’t help making another, and then another. Since I’ve moved over to the full version of Photoshop I can do so much more. (I apologize for the slight background image bump on animation frame #3.  I tried to fix it, but finally gave up.)

GIF #1: DS106 Joins The Rebel Alliance

There are three moving animations In this GIF. A feat too time consuming and technically difficult to have produced with Photoshop Elements. All those merging of layers just to get an idea of what I had would’ve been a nightmare.  [See earlier post: Groom – Outta This World] In the full version I can maintain all layers and view work in progress by simply selecting and deselecting layers for each animation image. The bouncing globe only required a capture of Vader’s front fingers to be placed as a layer over the globe when in the palm of his hand. What was tricky here was getting Dancing Groom and the DS106 Space Shuttle to align properly as they moved across the screen. Timing, spacing, positioning, etc. But again, through the wonders of really nice (and unfortunately expensive) software it wasn’t a chore – just a little fiddling around.

GIF #2: What Really Happened to Humpty Dumpty

I’ve been downloading images from Microsoft Clip Art lately and would often see animated GIFs that I thought would be fun to use in projects.  But I couldn’t get them to load into Photoshop as layers because the files are what’s called Indexed color mode and they need to be in RGB.  You’ll never believe how easily I got around this technical difficulty. (After a bit of trial and error though.)

  1. Open the GIF in GIMP 2.8 as layers

    Humpty_Dumpty_Transparent

    Humpty Dumpty GIF

  2. Image=>Mode=>RGB (See screen shot below)
  3. File=>Export
  4. Select file type as Photoshop image (*psd).
  5. Click Export
  6. Select “As Animation” in dialog box (see screen shot below)
  7. Click Export
  8. Open with Photoshop.  All layers will be visible.

 

ConvertToRGB

Converting a GIF from Indexed to RGB in GIMP

SelectAnimlayers

Export RGB GIF as animation : GIMP screenshot

Poor little Humpty Dumpty.   He was lulled into a false sense of security watching a sweet little butterfly. Then WHAMMO! The Death Star zooms in and knocks him off his wall.

By hacking into the image layers of the original GIF I…

  • Made the wall shorter.
  • Extracted Humpty from each layer to have more control over how he moved in the scene.
  • Extracted the butterfly to get two separate image layers: wings open, wings closed, to create the illusion of flying away.
  • Put the egg into its own layer. (Which ended up being used in GIF#3.)
  • By lassoing the last pillar and pasting it into a new layer I had a place where the egg could splat.
Vader_Humpty

GIF#2: What Really Happened to Humpty Dumpty by @Rockylou22

GIF #3: Oh Crap! Run, Run

Vader_duck_2

“Oh Crap! Run, Run” Tumblr #GIFFight submission by @Rockylou22

Number three in my Vader series stars a little ducky Duck_Lifesaver_Transparentescaping the wrath of Darth after laying an egg in his hand. I took the egg from the Humpty GIF and placed it in Vader’s hand. I used the same fingers layer I had used in GIF#1 to make it look like Darth was actually holding the egg in the palm of his hand.

Besides getting my duck to run across the railing, the splatter of egg onto the post and slowly sliding down took some creative effort. Thanks to a video tutorial by Michael Branson Smith, I learned how to distort an image by using the transform layer command.  Talky Tina had used this effect in her Flower Power GIF to make the flowers mold around the top of her Drill Sgt hat. I had been wondering how this was accomplished.

Select image layer => Edit => Transform => Warp => adjust handles till it looks right

Vader_duck_WarpEgg

Warped egg in Vader’s hand.

As I was writing up this section of my post to get the correct sequence for transforming an image layer I noticed that I should’ve warped the egg in Darth Vader’s hand too. It looks so much better for dripping if it’s draped.

Feel free to Riff and hack into any of my GIFs. It’s fun to see the creativity of DS106 in action with stuff I’ve posted.

I made a point of including all of the GIF files so you could use them if you wanted and a few other pieces of art used in this post.  [Talky Tina  August 2013 GIF Challenge #13: RIFF-a-GIF]

Transparent GIF of Groom’s Joy Ride on the DS106 Space Shuttle

Groom_DS106Shuttle

Groom’s Joy Ride aboard the DS106 Space Shuttle. Right click to download. Open in photo editor as layers to use.

Subscribe without commenting