Tag Archives: AnimatedGIFTutorials1190

GIFing with Jean-Claude

5 Replies
JCVD-Sheep_ShootSlink

“Oh Sheep! This is gonna look bad.” – The directors cut.   (Created by Rochelle Lockridge  for the JCVD #GIFFight)

My latest round of creativity induced OCD started with a new GIFFight challenge from Michael B Smith (@mbransons)

There’s also a DS106 Animated GIF Assignment 1190 for any of the GIFFight projects to post to.

After downloading 1.1GB of short .mov clips of Jean-Claude Van Damme from Funny or Die JCVD Make My Movie Challenge there was no turning back.  I was riding the dopamine wave.  There were some new learnings and tricky bits with the Adobe Elements software I was using that I’ve included below in the process portion of this post.

My first GIFs used downloaded images from the Tate Collectives which I had been introduced to through a previous GIFFight Challenge. Animate the crap out of 1840’s Tate Artworks as part of the Tate Museum 1840’s GIF Party. (There’s also a DS106 Animated GIF assignment 1248 for this too.)

Two of my Tate 1840’s GIF Party entries:

 

JCVD-Vesuvius

JCVD Erupts With Mt. Vesuvius

Vesuvius In Eruption from the Tate Collectives

JCVD-TatePastPresent

JCVD To The Rescue. “I’ll protect you.”

Past and Present No. 1 from the Tate Collectives

The continued ride on that dopamine wave resulted in me making the following JCVD gifs to give a few of my DS106 mates a giggle.

Wanting to celebrate John Johnston’s hitting 106 likes on his JJGifs Tumblr site I searched through his posts and found a GIF of sheep running past that I thought would work well. Due to Tumblr size restrictions I was forced to shorten the “directors cut” version you see at the top of this post.  I just thought having him shooting the place up then realizing it was just sheep passing by added another layer of absurdity. The shortened version below is still funny watching JCVD slink away with the sheep though.

JCVD-SheepSlink_Short

“Oh Sheep! This is gonna look bad.” Shorter version due to Tumblr size restrictions

Sheep GIF from JJGIFs

The GIFaChrome corporation recently posted that Colin’s new body guard, Jean-Claude Van Damme may need to tone down his enthusiasm somewhat.  He’s going to scare everybody off…. not just the bad guys.

JCVDRun_ColinToy

JCVD is the new bodyguard for Colin the Dog (@GIFaDog). The GIFaChrome mascot.

A crazed Jean-Claude Van Damme freaked out on Twitter. His overactive testosterone levels blinded him to the fact that DS106 doesn’t need protecting from @clhendricksbc.

JCVDRun_Christina

Jean-Claude freaks out over @clhendricksbc Twitter thumb.

Remember the DS106 Headless ’13 Riff-a-GIF spontaneous collaboration Riffs Sprouting Up Overnight? Which started out as a doctored photo of my grandson “DJ at Stonehenge“, Glad Jean-Claude wasn’t in the picture back then “protecting us”.

JCVDRun_DJStonehenge

Stonehenge under attack – “Run for your lives! I’ll cover you!”

The How I Did It portion

I’m thinking it would be helpful if I were to create a screen cast tutorial for this process.  Like I said above, it’s a little tricky and has taken a fair bit of effort on my part to learn how to do it. Future project……

  1. Downloaded the 1.1GB (yes Gigabytes) of .mov clips from Funny or Die JCVD Make My Movie Challenge.
  2. Imported the clips into Adobe Premeire Elements 12 and added them to the time line.
  3. Added the still image onto a track under the JCVD clip. Premiere Elements knew that the movie clip was formatted so that it should have a transparent background and automatically created a video merge effect.
  4. Render, Publish+Share as Computer files => Scroll down to choose JPEG
  5. => Advanced => Basic Settings Click “Export as Sequence”
  6. To easily make the GIF in PSD from many images without having to drag and drop each. (A very painful process when you have 82 frames.)  The easy way…. File=>Place
  7. File => Save for web => make sure to check the “image sequence”.  Check for compliance with Tumblr size restrictions max 500px wide and must be less than 1MB

Going one step further, so that I or others (or me 🙂 ) could use the JCVD transparent images for their projects I produced a GIF and accompanying layered PSD file.

To create transparent background of JCVD for use in PSD files.

  1. Added JCVD movie clip to time line.
  2. This time our background will be a solid color that we can delete when it gets into Photoshop.
  3. Open project assests => New Item => Color Matte => pick color (I used green screen)
  4. Render, Publish+Share as Computer files => Scroll down to choose JPEG
  5. => Advanced => Basic Settings Click “Export as Sequence”
  6. Save
  7. Open jpg series in Photoshop Elements with File=>Place.
  8. click on layer changing it from background to layer
  9. Select a portion of the green. Select Similar. Select Inverse.
  10. Refine Edge. Output decontaminate Colors – amt 100% – Output to New Layer
  11. Smart Radius = 2.1 , Smooth = 1
  12. Edit => Cut (or ctrl-X)
  13. Delete original layers with the green background
  14. File => Save for web => make sure to check the “image sequence”.  Check for compliance with Tumblr size restrictions max 500px wide and must be less than 1MB.

JCVDRun_Template

 

Chomp Chomp The GIF Fight

3 Replies

PacMan_400

As I become more and more experienced with any of the digital media platforms we play with here in DS106, my thought process for how I choose and go about creating matures. Let me walk you through how this one went.

I read the tweet announcing the new #GIFFight challenge photo had been posted at about 9:30pm.

I was seriously considering going to bed early. But now my mind started thinking about what in the photo I could animate. That was it. I was sucked in. But I really did want to get to bed at a decent hour. So… it went something like this.

Run! Run! I forgot my meds again!

Run! Run! I forgot my meds again!

Hmmm… I could animate Superman flying across the page… Yeah, that might work…. Or I could add the ‘Batman & Robin Run Away From $#!%’ GIF to up top under one of the monster guys. Nah… would probably make the GIF too big. Tumblr only gives you 1Mb and 500px to work with. Let’s see. Oh, how about incorporating the headless theme? I could have Pac-Man come in and eat Batman and Robin’s heads off. Nah… I’d have to rebuild background. Hey.. That Pac-Man concept is good. I think Pac-Man is an 80’s thing too. Yep. Trusty ol’ Wikipedia confirms it. First introduced into the US in Oct. 1980.

1024px-Pacman_HD

Public Domain Image

Let’s find a usable, non-copyrighted image with a Google search. Drat, all of these are copyrighted or unknown licenses. Wait, here’s a simple-looking one. And what luck. It’s a CC Public Domain licensed wikimages.

 

 

PacMan_Lines

Pac-Man can move along the white lines, looking like original game.

Now that I have my image, how shall I move the little guy across the page. Hey wait a second, there are white dividing lines between the images, sort of like the video game. Yeah… I can make him move along the lines.

 

 

PacMan_Only

Pac-Man open, closed & change directions

Oh, but I’ll need to have his mouth open and close. Let’s do some copying, pasting and a little band-aid work to create a Pac-Man with a closed mouth.

Great I have all of the pieces. Let’s start him moving along the line. No that’s not right. He is moving too far from frame to frame. That’s better when they are closer. Hmmm.. he has to turn the corner, I need to duplicate my two pacman layers and rotate them 90deg clockwise. Chomp, chomp, chomp. He finishes his way out of the GIF.

PacMan_Pellets

Pac-Man can eat the pellets

Let’s take a look at it. Yep. That looks right. Hey wait…. There are little pieces as he’s heading out of the frame that look like the pellets that Pac-Man eats. Oh… I have to do something with that.  Another round of copying, pasting, resizing of a layer to cover the objects as he passes by. Now this is lucky… Because of the way I have Pa-cMan moving across the screen and his size, I won’t have to make the pellets disappear gradually. They can all be eaten in one pass as Pac-Man chomps by. Now we’ll post to Tumblr. Tweet out #GIFFight completed.

Oh that’s really ni…. wait a minute, hold the Tweets.  The shadow by the pellets is partially obscured by the new layer covering them up. Drat. I want to fix that. Let’s see if Tumblr will let you replace a photo without having to change the post link. YES! I can delete the old one and add a new one in its place and no one needs to know about the mistake at this point. Go back into Photoshop. Erase a bit of the new cover layer so that the entire shadow is visible. Save as a GIF remembering to bring it down to 500px. Open Tumblr post, delete old version and replace with new version.

Ta Da!