Tag Archives: AnimatedGIFAssignments

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

 

Ewww Brain… Now in 3D!

4 Replies

My DS106 maxim of Reduce, Riff & Recycle has once again resulted in a fun, creative morning project.  Ewww Brain… Now in 3D!

3DGIF_SharkBoy_Lines-fb

Last August,  DS106’s Talky Tina created daily GIF challenges to keep our creative juices flowing while we were waiting for the DS106 Headless ’13 course to begin.

Talky Tina’s DS106 animated GIF challenge August 2013 GIF Challenge #10: Monster Chiller Horror Theatre 3D Style GIF  was to:

…look for a part of a scene in a 3D type movie where the thing comes right out of the screen at you.  Find a way to emphasize the moving of the thing out of the screen and into your face in a GIF.

 Ewww…Brain! was my answer to the challenge taken from a  Sharkboy & Lava Girl- May The Best Dream Win movie clip on YouTube. (Link to original blog post for the ‘how it was made.’) Today while trolling my Twitter home stream a DS106 exchange about how to make a 3D GIF with the use of white lines caught my eye. (See twitter feed below.) The illusion reminded me of John Johnston’s GIFaChrome Layercake technology  that I hadn’t tried yet. I decided to give it a go andd watched the video tutorial recommended by Mariana Funes.

Using the original Photoshop CS5 file from the Talky Tina challenge I created one white (two seemed excessive) mask line.  I’ll be honest.  I’m not sure how I managed to create a layer mask instead of the intended solid white line demonstrated in the video tutorial.  But who’s going to complain? It made things much easier in the Studio B production department this morning.  Lucky me!

Next, all I had to do was erase the portion of the line where the brain was popping out of the screen. Hmmm…. What to do with the brain goo as the brain slides down the screen?  That presented a creative challenge all its own. It looked way cooler if I adjusted the erasing opacity to 50% instead of 100% to enhance the illusion of sliding down a glass surface.  One final visual feature was to use the lasso tool to cut out a brain and have it slide down over the black border of the movie trailer clip.

Looking forward to using this technique in the future.  Below is the Twitter conversation that sparked this project.


Riffs Sprouting Up Overnight

13 Replies

GAKC-AliceDJ-Mush-CCat-Smoke-Colin-CatPil_Rabbit

 

UPDATE 12/06/13: Check it out we were featured on the GIFaChrome Connects blog.

Another fun aspect of DS106 being an open online course that attracts global participation is that you can go to bed at night (usually way past a healthy bedtime because you just “had” to finish one more thing on that project) and wake up in the morning to find a comment on your posted work, or better yet that someone(s) have delightfully riffed on your creation. DS106 Never Sleeps! Such was the case with my DJ at Stonehenge photo I originally created for ds106 daily create tdc669.

From Wikipedia: A flash mob (or flashmob)[1] is a group of people who assemble suddenly in a public place, perform an unusual and seemingly pointless act for a brief time, then quickly disperse, often for the purposes of entertainment, satire, and artistic expression.[2][3][4] Flash mobs are organized via telecommunications, social media, or viral emails.[5][6][7][8][9]

Here’s what the ds106 flash mob created between 11/11/13 to 12/06/13:

  1. A giant DJ is spotted at Stonehenge.
  2. Mushrooms sprout up overnight.
  3. It’s all a dream reflected in Alice’s looking glass as shown by Cathleen Nardi.
  4. It gets curiouser and curiouser when a patch of spinning mushrooms and the  Cheshire Cat show up.
  5. Over night another patch of mushrooms spring up and smoke is seen gently rising from within.
  6. Colin dog is spotted lurking in the trees holding his stick ready for play.
  7. Alan Levine’s radioactive caterpillar notices the smoke rising among the mushrooms and crawls on back to see if his buddy is hanging out there.
  8. Cathleen Nardi notices a rabbit hole appearing in a flash in the bottom left corner with a pair of ears just poking out.
  9. Rochelle Lockridge coaxes the little white rabbit out of his hole.
  10. The story is captured with the new GIFaKidChrome imager in development over at the GIFaChrome labs.

You can witness the evolution of the composite image right here as it unfolds. I plan on updating this blog entry if it morphs further.  And links are provided to the posts so you can follow the comments and story line as it develops.  (Suggestion: By subscribing to comments on this post you can get the latest updates directly.)

Note: All of the image GIFs and layered .psd files are attached below so anyone can join in the fun. Most current Photoshop file can be downloaded here. 

Original Photos and evolution of our ds106 flashmob collaboration:

StoneHenge

Photo 1: Stonehenge – Feb 2010 photo taken by Rockylou

25. Pull Train

Photo 2: DJ opening toy train for his 2nd birthday (Aug 2013)

Nov 9, 2013 @7:57pm Minnesota, USA or 9:37am Hawaii or Nov 10 @12:37am Scotland

Photo 1 + Photo 2 + Rockylou’s sense of humor+ Photoshop CS5 => DJ at Stonehenge for ds106 daily create tdc669: “Take a photo of something very small and make it look big.”

 

DJ_StoneHenge

1st Composite: DJ reportedly “eats” left hand side of mushroom and grows huge (DS106 Google+ Community post  )

Some little blonde girl gave DJ a mushroom while visiting Stonehenge. He took a bite of the lefthand side before we had a chance to stop him. This is the result.  No need to worry though. He took another bite on the right hand side and was back to normal by the time we returned to the tour bus.

Let The Riffing Begin!

Nov 11, 2013 @12:14pm (6:14pm Scotland, 8:14am Hawaii )

DJ-Stonehenge-mushrooms

Riff 1: John Johnston discovers mushrooms sprouting up at Stonehenge and posts to DS106 Google+ Community

Nov 11, 2013 @1:52pm (9:52am Hawaii)

DJ-Alice

Riff 2: Cathleen Nardi reports that it was all in Alice’s mind and posts photo to DS106 Google+ Community

Nov 11, 2013 @11:38pm (Minnesota, USA)

It gets curiouser and curiouser with the addition of spinning mushrooms and a Cheshire Cat.

DJ-Alice-MushSpin_500px

Riff 3: Rockylou riffs on the evolving creation by adding spinning mushrooms and a Cheshire Cat to enhance the Alice in Wonderland story line. Posted to ds106 Google+ Community

Downloadable Spinning Mushrooms + Cheshire Cat Photoshop CS5 .psd

Downloadable Spinning Mushroom .psd

MushroomSpin-Transparent

Downloadable Cheshire Cat .psd

Cheshire_cat

Cheshire Cat GIF

Nov 11, 2013 @12:34pm (6:34pm England)

Mariana Funes shares this beautiful GIF  in a post to ds106 Google+ Community wondering how it was made.

smokecoffe_oph6aatl

Nov 12, 2013 @7:05am (Minnesota, USA)

Rockylou reports more mushrooms sprouted up over night and smoke is seen wafting up from behind. Observations posted to ds106 Google+ Community.

AliceDJ-MushSpin_Smoke_500px

Riff 4: Who could be hiding smoking their Hooka Pipe back there amongst the new patch of mushrooms?

Cropped Smoke GIF

smoke_RLLl

Downloadable Cropped Smoke .psd file

Nov 14, 2013 3:07pm (9:07pm, England)

Mariana captures Colin lurking in the trees, wondering what the cat is grinning at and is that girl going to throw him a stick or not.

I can see Colin coming out of the back trees to scare that grinning cat.  I was thinking about using  this http://theds106shrink.tumblr.com/post/58186170782/i-managed-to-get-colin-dog-to-wiggle-yes-the and adding it to it 🙂

AliceDJ-MushSpin_Smoke_500px-cd

Riff #5: Colin dog lurking in the shadows joins the fun with Mariana’s  post to ds106 Google+ community

Nov 14, 2013 @11:15pm ( Nov 15 @5:15am England)

Rockylou couldn’t stand seeing the rogue white background flashing through on the spinning mushrooms and fixed it while creating a new clean .psd file adding Colin dog as its own layer.

AliceDJ-Mush-CCat-Smoke-Colin

Riff #5 edit: Rockylou cleaned up the spinning mushroom GIF and created new .psd file with individual layers in comment to Google+ Community

Screencast tutorial on adding Colin to the Photoshop file as a single layer.

Colin Dog original photo by Alan Levine

http://www.flickr.com/photos/cogdog/10545712185/

Transparent .png of Colin

ColinDog

 

Nov 15, 2013 11:00am.

Alan Levine’s “radioactive” turquoise caterpillar joins in.  He’s last seen crawling up towards the mushroom patch in the back to check out if his buddy is back there.

Download the Photoshop .psd file here.

AliceDJ-Mush-CCat-Smoke-Colin-CatPil_2

Nov 20, 2013

Cathleen Nardi adds the rabbit hole we last talked about.

Alice in Wonderland with Rabbit Hole

 

Dec 06, 2013

In participation with the DS106 GIFaChrome final project Rochelle Lockridge adds a white rabbit popping out of the hole and turns it into a GIFaKidChrome image.

GAKC-AliceDJ-Mush-CCat-Smoke-Colin-CatPil_Rabbit

 

Headless Over Heels In Love

1 Reply

GIFFight_MannequinsLove

Headless Over Heels In Love [Tumblr Link]

GIFFfight_ManequinsI’m joining the GIF FIght again.  This time we were given a pair of stark white mannequins to work with. I like to give some time to thinking about my projects before I start them. [Link to past example of my non-linear creative thought process. ] I had a couple of ideas in mind that would use existing GIFs that I could riff off of like Alan Levine’s (@Cogdog) blue caterpillar. It didn’t work here, but I’m going to use it someday. I then tested out what it would take to move the arms to have them hold hands.  It could be done, but with more work than I had time for. My daughter is getting married on Saturday and if I wanted to complete this DS106 Headless13 Week 2 AnimatedGIFAssignment1190 I needed to get it done now. graphics-hearts-230756I then had the idea of giving this lovely headless couple pumping hearts.  I tried my luck over at Microsoft Clip Art, but again nothing seemed to work.  A Google image search on animated heart and GIF was fruitful and led me to a whole bunch of free heart GIFs at:  http://www.picgifs.com/graphics/hearts/ Using Adobe Photoshop CS5

    1. graphics-hearts-741799I opened the animated heart GIFs which show up with all of the layers intact.
    2. Combined the two heart GIFs with the mannequin base layer
    3. Selected all of the layers for the hearts
    4. Moved them into place
    5. Enlarged the small heart layers to match the size of larger heart.
    6. Created the animation frames by selecting the appropriate layers.  There is no need for merging of layers when using the full version of Photoshop.
    7. Resized the entire image to 350px by 500px making sure it would be less than 1Mb so Tumblr would accept it.
    8. Previewed at 256 colors, liked it and saved as a GIF.

To complete the process I uploaded my completed GIF to my Tumblr account, wrote up this blog post, and posted to Twitter and our DS106 Google plus community.

 Past GIF FIght Entries:

Other links to animated hearts I decided  not to use.

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!

DJ B-day Dance Photostrip GIF

7 Replies
DJDanceGIF_Strip_2

The DJ Birthday Dance Fim/GIF Photostrip

You know how you can take those quick burst photo strips at the mall or the fair? Wouldn’t it be cool if you could bring it to life with a GIF? That was my inspiration for making this Film/GIF Strip extracted from a short video clip taken on my grandson’s 2nd birthday this past weekend. [See his birthday cake here]

HOW IT WAS MADE

DJGIFDance

DJ Birthday Dance Still

I first downloaded the 9 second video clip my daughter sent into Adobe Premiere Elements, where I promptly exported it as an image sequence choosing 10 frames per second as my download. This significantly reduces the number of JPEGs produced. [Read how here]  I choose the images I wanted to use to make 4 different GIFs. Then I downloaded a free to use film strip image from Imikimi to use as my border.

With a little trick I learned yesterday, I duplicated the layers from each potential GIF and when the dialog box comes up, lo-and-behold, it asks me where I’d like to duplicate them to.  Of course it defaults to the file you are in at the moment, but by changing that drop down selection to my working consolidated file, I can easily move them without much of a bother. (Unlike what I’ve been trudging through on previous projects.)

Once all of the images were aligned onto one strip, using the full version of Photoshop , (each GIF having its own location) I created two animation frames and set them to 0.2 seconds.  There is no need for merging of the layers like when I’m using Photoshop Elements. THANK GOODNESS! My first attempt with all four GIF frames moving didn’t appeal to me.  [See below] It felt just too busy. I also wasn’t real pleased with the first GIF in the series. After some trial and error I decided I liked the look of the film/GIF strip with Photo A and D remaining stationary, while the two center GIFs of DJ really dancing continued to move.

DJDanceGIF_Strip_4

All frames moving are too busy for this Film/GIF strip

I’m now contemplating how I could turn one of these into a 3D Stereo Wigglegram GIF like Rockin’ The Rocks in 3D. The background is basically still with mostly DJ moving.  I think that means I can extract DJ from each photo and keep a single background image without needing to do much work rebuilding the chair.  Hmmmm……

Polar RIFF-A-GIF

3 Replies

 

jim_groom_dance_Freezer

DS106′ Jim Groom doing the Polar Bear Polka in Viv’s Freezer

Some of the best parts of ds106 happens when people spontaneously build off of the whacky things others share. Rapid fire style. Your assignment is to riff on someone else’s ds106 work and make it new in a GIF form. It can be revising an existing GIF, or taking a graphic and turning it into a GIF. [ Animated GIF Assignment 859 ]

Where in the world is Jim Groom? He’s moved from Christina’s refrigerator
http://ds-ina.tumblr.com/post/57311409496/groominmyfridge
to Viv’s freezer. http://flic.kr/p/eSZKx7

Talk about reduce-reuse-recycle.  I get a three-for-1 on a GIF I made for fun some days ago.

  1. Talky Tina’s August 2013 GIF Challenge #13: RIFF-a-GIF 
  2. DS106 RIFF A GIF Animated GIF Assignment 859
  3. Dancing Jim All Over The World: Animated GIF Assignment 1001

Notice how Jim is nestled in the polar bear’s arm? By wisely choosing my original photo there was no need for rebuilding a part of the image.  It was a simple wave of the magic wand tool over the polar bears leg in Photoshop Elements. Then the new layer was placed in front of dancing Jim.

jim_groom_dance_RLL

Dancing Jim Groom. Right click to download & open as layers in photo editor.

Get Ready to Tumbl! The #GIFFight is on.

11 Replies
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]

Vader_DS106_GroomJoyRide

DS106 Joins the Rebel Alliance by @Rockylou22

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.

RLP Under Construction

1 Reply
RLP_UnderConstruction

Rockylou Productions Under Construction

August 2013 GIF Challenge #6:  Sophisticate Your Own, Personal “Under Construction” GIF

or

 DS106 AnimatedGIFAssignments911

RLP_Logo_27leavesThe Rockylou Productions logo was created by my daughter, Amber Lockridge, as a surprise gift for me back in October of 2012. It was fun to animate our webheader to create this Under Construction GIF.  It was a simple cut, copy and pasting of the letters and parts into different layers using the full version of Photoshop. Once the layers were in place, selecting the appropriate layers and timing to be visible during the animation sequence.  Nothing to this one.

The tough part of this GIF challenge is going to be figuring out how to customize my Error 404 page.  After reading a helpful post from WordPress.org, it looks like my theme doesn’t have a 404 Template page.  I think this part of the challenge will have to wait until the DS106 Headless Course  boot camp begins on August 26th, 2013.

In the meantime you can check out another error page I had to create for visitors trying to find this blog from my regular Rockylou Productions site.

 

Rockin’ The Rocks in 3D

6 Replies
RaisinJiggleBand_Stonehenge

California Raisins Rockin’ the Rocks at Stonehenge- 3D Stereo Wigglegram GIF

Another kind of GIF that you can make is a Stereo Wigglegram GIF. You take two pictures that are almost the same except they are taken from two slightly different angles. When they are viewed your brain puts them together into one picture that has a 3D effect. Talky Tina’s DS106  August 2013 GIF Challenge #11: Get Your Wiggle on, with Friends! had us creating one of these 3D Jiggle GIFS.

RaisinIPAD_Band_2

Rockin’ The Rocks in 3D

This is one of those projects I’m not going to admit how much time I actually spent on it.  Let’s just say I was fascinated with the process and technical issues learning how to make these and I was really into it. The idea of having the California Raisins rocking with the rocks at Stonehenge tickled me tremendously. I’ve had a set of these little guys since the late 80’s, and now they sit proudly on a shelf in Studio B. (My basement where I do most of my DS106 and other digital storytelling projects.) Now that I’ve dusted them off, I’m thinking they might be making another appearance in a future stop motion video.

I created a couple of different versions and used different techniques and software as I was moving through the project. I started out with the Camera+ App on my iPhone 5 and downloading the pictures into Adobe Photoshop to create the GIF. I didn’t know how or how much I was to move the camera for the two shots to get a “slightly different angle”, so my first attempts didn’t quite look right. I then read Talky Tina’s post a little closer and she recommended an app called 3D Camera by Juicy Bits. The iPad version of the app gave me some guidance on how to actually take the photos.  You don’t just move the camera slightly by rotating your camera on the tripod like I did, You need to slide the camera in a straight line from left to right to get the two shots.

Raisin_StereoImages

To create good 3D stereo images SLIDE your camera left to right, don’t rotate it.

RaisinIPAD_Band

Green Screen Stereo Wigglegram GIF. Created with 3D Camera by Juicy Bits

My decision to take the original stereo photos against a green background so that I could “easily” replace it with a background of my choosing from my own photo collection didn’t turn out as I had expected. I had ambitiously started out with the concept of having the band members and Stonehenge remain stationary, while only the guitar player popped out of the image. This was NOT successful! (See problem plagued GIF below and second successful version at the end of the post.)  Creating layer masks by using the quick selection tool required a lot of fine tuning to remove the haloed green around my raisins.  This was further complicated by the fact that I was doing this process on two different photos and couldn’t select exactly the same areas with each image.  Consequently, I had occasional bulges and valleys along the edges that had to be manually erased or rebuilt for each separate image so that your eye remained focused on the 3D effect and not the little anomalies as the photos switched back and forth. Here’s an original unsuccessful version for your amusement that is a fine illustration of these issues: green halos, bumps & valleys, instead of popping out of the screen it moves back and forth.

RaisinJiggle_GIF_Band

Unsuccessful first attempt at 3D Stereo Wigglegram. Lots of technical issues!

Ahhh… this is better… a second SUCCESSFUL version of the California Raisin solo guitar rockin’ at Stonehenge.

RaisinGuitar_2_Jiggle

Stonehenge Solo 3D Stereo Wigglegram GIF