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.
- Jim Dancing with Darth Vader by @jimgroom
- Darth Vader plays a mean guitar by @cogdog
- You Ain’t My Father, Bub! by @iamTalkyTina.
- Light Fight by @shannotate
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.)
- Open the GIF in GIMP 2.8 as layers
- Image=>Mode=>RGB (See screen shot below)
- File=>Export
- Select file type as Photoshop image (*psd).
- Click Export
- Select “As Animation” in dialog box (see screen shot below)
- Click Export
- Open with Photoshop. All layers will be visible.
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.
GIF #3: Oh Crap! Run, Run
Number three in my Vader series stars a little ducky escaping 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
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.
- Sunbursts DS106 by JanWeb2
- Dance Jim Groom video by Janet Webster
- Turn That Frown Upside Down by @clhendricksbc
- Grandma Rockylou by @cogdog
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]
- PNG of the DS106 Space Shuttle
- GIF of dancing Jim Groom in one place (Scroll to bottom of the post)
Transparent GIF of Groom’s Joy Ride on the DS106 Space Shuttle
Well, Rochelle or @Rockylou22,
I think that the GIF Fight! will be a fun time for Friends as long as nobody gets hurt. It is good that the little ducks keep running away from the Vader Man. He had a broken Humpty Dumpty egg man and it made a mess. And it was not good for the Humpty Dumpty man either.
But I got him! I got that Vader Man good with my light sabre! Did you see my Princess Leia hair? It was pretty. And did you like the way I did a “come and get it” move with my light sabre to get the Vader Man head to come back after I cut it off so that I could cut it off again? And again? I sure taught him good.
So I hope you don’t get hurt in the GIF Fight! Rochelle or @Rockylou22
Well, bye!
@mdvfunes @clhendricksbc @IamTalkyTina I’ve posted clean files of Groom + others I use in #ds106 GIFs here. http://t.co/Yfp2TR46Fx
@JanWeb3 @IamTalkyTina @clhendricksbc @cogdog Oops! Did it again. Forgot link. DOOH! Ref at post end on riffing work. http://t.co/S1NyabKZGl
@jimgroom @cogdog @mbransons @johnjohnston I forgot again to add links to tweets. #ds106 GIF Fight for Challenge 12 http://t.co/S1NyabKZGl
I love gifs! Why? so much work just to give droplets of joy to those who see them in the midst of a busy day. I hope to learn how to make them and give you some joy back on Headless13. Thank you so much – love the juxtaposition of the cartoon light images with the evil dark Vader man 🙂 I tried to get Colin dog in the fridge today, but not getting the layers thing…BTW did you know you can get 30 day trial of Creative Cloud to have access to all Adobe products on the cloud? I have signed up, hope I can make some art before trial runs out.
Wow, this is amazing stuff, and your writeups are so helpful. I think some of it might be doable in GIMP too, like transforming/warping. Haven’t checked, but now I know to try to find out! I think my favourite is still the Groom one–having him dancing on the shuttle as it zooms across the image is utterly fantastic.
Thank you for including my work! I’ve spent all my spare time tonight with GIMP; I’m hopeless. Instead, tried to keep it simple and be clever, so tweeted my Vader’s flipped classroom effort.
Hi Jan, (Do you prefer Jan or Janet?)
I’m glad to see you jumping in and giving things a go. Keeping it simple is exactly the right thing to do. We’ve had a lot more practice at making GIFs at this point. Here’s one of my first attempts.
Why don’t you try taking your Twitter icon and turning it into a headless GIF? That will get you started with some basics of selecting and rebuilding a part of your scene,layers and fading. As Christina and I have discovered, choosing your starting media is part of the learning too.
Do you have a ds106 blog yet? Blogging your process and thinking for each project, no matter how it turns out, is good practice. We then know where you got hung up and can offer more specific help if you want it.
Hang in there. These can be lots of fun when you get the technical skills in place.
Rockylou is right–starting off with some of these harder GIF challenges is probably leading to some frustration. I started off GIFing with just a video clip and looping it. But what that did was to help me see how it all works. Starting off simple and moving up from there is what made it work for me. I think even the headless GIF thing is pretty advanced–that took me a long time to figure out and do! I think taking one of Rockylou’s already-cut-out images like Groom dancing on a rocketship, and putting that on a background, might be a good way to start?
[…] I added Tumblr in August- mostly for posting GIFs like this one. [Link to post about creating this and other similar […]
[…] on Darth Vader in Get Ready to Tumbl! (Includes a good tutorial on creating the […]