Tag Archives: AnimatedGIFAssignments

Ewwww… Brain!

3DGIF_SharkBoy

Ewww… Brain! Scene from “Shark Boy and Lava Girl”

Talky Tina’s DS106 animated GIF challenge August 2013 GIF Challenge #10: Monster Chiller Horror Theatre 3D Style GIF for today 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.

3DGIF_SharkBoy

Ewww… Brain

This one was easy.  I started with a YouTube search on 3D movies.  A bunch of movie trailers popped up right away, which I knew would have the good stuff.  Sharkboy & Lava Girl- May The Best Dream Win won.

I’ve just recently discovered the wonders or the full Photoshop CS5 software for creating GIFs. [Technology is Great! (When it works.)]  But as ‘luck” would have it, I have a 64-bit operating system on my PC based laptop and Photoshop won’t allow me to import video frames as layers unless I use a 32-bit OS.  Arrrrgh!  That meant I had to do some unexpected futzing around.

I downloaded the video clip using the downloader add-on for Firefox and placed it into Adobe Premiere Elements on my Mac.  From there I selected the short segment I wanted to use and exported it as a sequence. [ “Hula Hot Seat” will step you through the process.]

Since I am using both a PC and a Mac, (different software versions are at the moment residing on different computers.) I uploaded the JPEGs to my Google drive so that I could transfer them easily from computer to computer as needed.

I imported the photos into the full Photoshop on my PC, but again hit a bit of a snag because I couldn’t figure out how to easily move each of individual photo images into a new layer in one consolidated project file to be used to create the GIF.  I ended up tiling 10 images at a time and dragging each layer over. But oh no… does the fun end there?  Of course not! When I did the moves manually like that they were not aligned properly, and I had to go back in and manually align all 40 images layers.  Fortunately, I hadn’t messed with the formatting of the images, so the snap function for alignment kicked in and it went rather smoothly, all things considered.

The final step was to create the animation layers.  There was no need for merging of layers, as I wasn’t adding anything to the original image clip, and that alone made the project much less complicated than:

I most likely could have made this GIF in my limited Photoshop Elements on just my Mac. Oh well, I’m enjoying learning how to use the software. And I’m getting better and better all the time as I practice and come to terms with the advantages and limitations of each digital story telling tool that I use.

I’ve included the full movie trailer below for your easy viewing pleasure.

 

A Worm’s Daisy Delight

Worm_Flowers

Daisies & Butterflies delight. Turning that frown upside down.

ChristinaWorm

True Friends Can Help Chase the Blues Away [Link]

When you’re feeling sad and like you’re sliding into a black hole, as Christina Hendricks’s worm did a few weeks ago,  [Link to her post ] you could use a True Friend by your side to turn that frown upside down. Or you could turn that cold hard concrete of despair into something nice by adding some animated flowers as suggested by Talky Tina’s DS106 GIF Challenge #8  “Add Some Flower Power” and Assignment 1189. The flowers bravely pushing up through the cracks in the concrete were lassoed with Photoshop Elements from photos I had taken in Duluth, MN a few years back.

I’m trying hard to keep up with Talky Tina’s daily GIF challenges, but I started losing ground fast when my internet service was down for three days, the DS106 site was under attack and intermittently unavailable, then to top it all off @cogdog modified my simple daily create suggestion to record yourself singing a favorite childhood song, into “Stage a movie trailer for a favorite childhood song or nursery rhyme. You perform the audio.” and then post it to YouTube. I was stumped. So in the spirit of Reduce-Reuse-Recycle my submission for the daily create, “The Worms Crawl In”, starred these little guys too.  I think someone over there could use some Flower Power too.

Hula Hot Seat

HawaiiChairGIF00

Want to get fit without leaving your chair?  According to infomercial star Tamara Henry, the Hawaii Chair is for you. “It takes the work out of your work-out.” by hula-ing your way to fitness.

See update below for V2: “Groom Does The Hula Hot Seat Happy Dance”

HawaiiChairGIF00_ThumbDS106 GIF challenge #4 was to create a GIF of a hilarious infomercial moment that illustrates how ridiculous some infomercials can be. I started the project with a YouTube search for Infomercials.  Up came Top 10 Ridiculous Infomercial Products.  About the 3rd product in I saw the Hawaii Chair.  It piqued my interest and seemed like I could have some fun with it. The rest of the commercial snippets didn’t get much of a rise out of me.

I continued my search to find a better resolution or original copy of the video.  Unfortunately, the original Hawaii Chair Infomercial  was made in 2007, so I didn’t have much choice but to go with a very low 240p resolution version.  I like to use a Firefox video downloader add-on that sits right on my tool bar to download videos to my computer.  I get to choose the downloaded file type from a list of available formats and sizes.  That can often avoid a video converter hassle by not accidentally downloading an .flv or .3gp formatted video.

It’s been a couple of months since I created a GIF from a video clip and that was only once.  “Go Daddy… Wheeeee!!”  So I went back to my own blog post to read how I did it using my video editing software Adobe Premiere Elements 11 for the Mac. The key was to select a small 2-3 second clip of the original video then:

Publish+Share => Computer => Image (use for exporting still image) => open the advanced menu and choose “export as sequence” under the video heading, then save.

I also vaguely remembered there was something about reducing the output frame rate to 10 instead of the original video frame rate of 29, so that fewer still images in the sequence would be created.  Now I moved over to Adobe Photoshop Elements to create the GIF.  After importing the 36 JPEG image sequence created from the video file, I culled it down to the first 16 where the Hawaii Chair text flies in. Each of the photos became a layer for the final GIF.

I’ve heard others in the GIF challenge refer to being able to change the length of frame delay for each individual layer.  That’s not the case with the elements version of Photoshop.  I get a single frame delay option, the default being 0.2 seconds.  If I want to increase the time an image stays on the screen, I have to create duplicate layers for that specific image.  That was the case here with the beginning and end of the GIF to make for a smoother transition when it looped back again.

Did the Hawaii Chair live up to its claims?  I don’t know.  I didn’t own one or know someone personally who did. But from the looks of the suggested Youtube videos during my search, it certainly gave a number of comedians fodder for their shows and skits, and one reviewer talked about all they got was a hot butt.

UPDATE: Groom Does the Hula Hot Seat Happy Dance

Mucho thanks to Talky Tina for suggesting…

” …it would be funny with their heads NOT moving and no HAWAII CHAIR words and just the chair parts going and going and going. And they would have silly grins stuck on their heads.”

Now version 2 of my plain infomercial GIF has been DS106ized.  I figured while I was merging the stationary heads snippet (simply cut and pasted the top portion of the first image) into new layers in the Photoshop file, why not add Jim Groom dancing his little happy dance with the ladies.  Voilà! A funnier GIF and Animated GIF assignment 1001 has another submission from Rockylou.

HawaiiChairGIF_3_Groom

Jim Groom does the Hula Hot Seat Happy Dance

Slide on in to DS106

How do you go about promoting an open-online course in digital storytelling that anyone can join at anytime from anywhere?  With an animated GIF promo poster!

As my contribution to August 2013 GIF Challenge #3  from @IamTalkyTina I wanted my poster to promote DS106 with a creative example of digital storytelling in action.  There is explicit information relayed with the text, such as a link to the DS106 website, but each of the design elements also tell a little more about the story.

  • DaddyDJSlide_GIF_Poster_2The GIF used here is the first one I ever created, “Go Daddy… Wheeeee!!”,  of my grandson DJ & his Daddy playing at the park.  No need to clarify this design element.  The story is clear, and it is a real world example of what has been created in the course.
  • The Calvin & Hobbes font at the top of the poster was chosen for its ability to convey childhood, creativity & imagination in action.
  • Finally the Chalkduster font at the bottom of the poster continues the childhood theme, but also signifies a class and learning.

 

I deliberately chose not to include specific information for the Headless DS106 starting on August 26th, 2013 so that the promo poster could be easily used in the future.  To see other examples of telling the world about DS106 go to Animated GIF Assignment 1183: Tell the World About DS106 GIF

Groom – Outta This World With joy

GroomOnTopOfWorld

Jim Groom is out of this world with joy dancing to DS106 Radio.

Today’s DS106 animated GIF challenge was Assignment 1001.  We are asked to take the template GIF of Jim Groom dancing and add a background and foreground, to make him dance in an interesting place.  The title of the assignment “Dancing Jim All Over The World”  inspired my GIF of dancing on top of the earth, as well as one created here by Kevin Hodgson (@dogtrax).  I also had an astronaut floating around at one point.  But it looked “odd” with him in his space suit and there was Groom out in the open, unprotected, dancing and whooping it up with DS106 Radio. Okay… I admit it… No matter what I did with Jim it was going to look weird, but the astronaut stayed inside the ship during the final GIF merging step. As you can obviously tell there are several image layers involved with the final GIF image. Groom_GIFPhotoStrip

  • Tiled star background from 1-background.com [Link]
  • Modified Dancing Jim Groom GIF from John Johnston & TalkyTina   [Link to file]
  • Red Supergiant Star V838 Monocerotis posted on the hubblesite.org site [Link]
  • Earth Image as seen from the Apollo 17 Mission [Link to Wikipedia Commons Image]
  • Space Shuttle NASA X38: Sorry no official link.  I found this a few years ago on the NASA site, didn’t log the web address then, and now I can’t find it for a proper linking. 🙁
  • DS106 Radio Flag (Look real close.  It’s on the nose of the space shuttle where the US flag used to be.
  • DS106 Website Banner

Assembling in Adobe Photoshop 11 Elements

  1. Tiled the black star background to cover the image canvas
  2. Eraser tool to delete the starscape background around the red supergiant star.
  3.  Quick selection tool to extract the earth image and space shuttle from their respective backgrounds.
  4. Applied a black filter to the DS106 banner logo to turn it from white to black.
  5. Band-aide tool to erase the “United States of America” & US Flag from the space shuttle.
  6. I liked the effect of having the NASA logo with the sharp red lines sticking out under the DS106 logo, so I left it there.
  7. Merged Space Shuttle, DS106 Radio Flag, and DS106 logo into one layer.
  8. Assembled layers in proper order and merged: Starry Background, Red Star, Jim Groom, Earth, Modified Space Shuttle
  9. FILE=>Save For Web=> Select GIF & check “Animate” box. Time set at 0.2 sec.

My astronauts can float around now that Jim Groom has gone home to bed. And it looks like they’re all ready for the Headless DS106 to start on August 26th, 2013.

GroomGIF_Astronaut

Headless DS106 Astronauts- Now there’s a sight you don’t see everyday. [NASA Images]

So you don’t have to go through the hassle of lassoing the images (I already did that for you.) to add to one of your future art projects, here’s my DS106 space shuttle and astronaut.

DS106Spaceship AstronautSolo

Dancing Groom GIF (Right click to download then open it in your editing program as layers.

jim_groom_dance_RLL

 

Engineering Headless Rockylou

UPDATED POST:

I can’t believe I didn’t hear some smack talk with respect to my originally published version of this GIF.  What was I thinking? Not including DS106? I’ve fixed it!!!!

Headless_Rockylou_3_GIF_Final_500

DS106 Headless Rockylou is Cool

TalkyTina Hulka has given the Headless ds106 Fall 2013 participants an animated GIF challenge for the month of August.  Her first “assignment” was for us to create an animated GIF to show our headless self. [Link to TalkTina’s example] Headless_Rockylou_3I took pieces from three different photos to make the final GIF. (See below) I like my yellow & blue dress, but I don’t have any good photos of me wearing it.  I knew, however, that I had one of the dress hanging up and used that instead.  I used the quick selection tool in Adobe Photoshop Elements 11 to grab the dress and my head and neck from the photo of me with my daughter Jenny at her PhD graduation this May.  The final, “engineering is cool!” photo was taken from a set of photos I had from a 3M Visiting Wizards demonstration day at a local children’s interactive museum, “The Works” here in the Twin Cities. [Link to video I created about the fun of the day.] Headless_dressphoto GraduationHead EngineerFun The trickiest part of this GIF was getting my chest from the graduation picture to be as broad as the neckline on the yellow/blue dress.  I copied a piece of my chest, duplicated it and placed it on either side of my original neckline, merged the layers, and used the bandaid tool to blend them. Since there are no arms with the dress, I had to strategically crop the final GIF images so that you wouldn’t notice that.  The head fades with 100%, 80%, 60%, 40%, 20%, 0% layer opacity.  Then everything was merged onto a purple background slide.

Rockylou_Headless

Version 1: Headless & Neckless Rockylou – first GIF attempt

I made two three versions of my headless GIF. Here is the first version that had my entire neck and head disappear.  This looked especially creepy, and not the effect I was going after.  It looks like I am disappearing rather than just becoming headless.

Headless_Rockylou_2_500

Version 2: Engineering is Cool.  But where is DS106?

UPDATED POST: Version 2 had only the head disappearing.  Nice but still not right after I sat with it a little longer. Yes, I work in the 3M R&D labs and think engineering is cool.  But this GIF is supposed to be about Headless DS106.  What was I thinking?     ds106_edited-1 VERSION 3: I really needed to replace “engineering” with the DS106 logo from the website. I selected & copied the purple area above engineering to create a new layer.  I then stretched it and used the bandaid & clone tools to delete the unwanted text but keep the purple wall.  I had to do some merging of layers, cloning, and applying more bandaids to get it to look nice. You’ll notice the upper right wall is still a little mottled. I’m going with it gives more interest to the photo… and that’s my story and I’m sticking with it!

EngineerFun

Skewed Text On The Wall

To add the DS106 text, I have a png version of just the lettering (A png file maintains transparency unlike a jpeg.) that I made awhile back and keep on-hand just for these types of occasions. Oops… I couldn’t just add it directly onto the image.  If you look close, the way I took the original photo resulted in a skewing of the lettering on the wall.  Nice effect for a photo, but when I want to hack my photo and add new text, I have an issue.

DS106_WallText_500px

Skewed DS106

The problem was solved by adjusting the DS106 layer with the Image=>Transform function. I placed the DS106 layer over the original text and adjusted it until it looked about right tapering down from left to right. I hadn’t done this before so it took some trial & error.

One last change to version 3 was to make a continuous fade of my head in and back out.  Whereas versions 1 & 2 only faded out.  That made for a jumpy transition that I wanted to fix.  I simply duplicated the fading head layers and extended my loop.  I would suspect that there is an easier way to do this with the full version of Photoshop, but I only have Photoshop Elements. The final version is below.

Headless_Rockylou_3_GIF_Final_500

Version 3: DS106 Headless Rockylou

DS106 PNG Files for download

ds106

ds106_Black

Chicken Heart Terror – Behind the Scenes

"It's going to eat you up!!"

“It’s going to eat you up!!”

The It’s Going to Eat You Up! animated GIF [DS106 AnimatedGIFAssignment1162 ] was definitely fun to create. It combines two very fond childhood memories: The old campy Batman & Robin television show and the Bill Cosby comedy routine Chicken Heart . But the bulk of the project time and energy was put into on-line research to locate and link the images, audio files, and relevant websites that provide the story behind the story. Here are the Why’s and How’s of producing the GIF.

Arch Oboler recording "Lights Out".

Arch Oboler recording “Lights Out”.  (Photo Source)

During audio week of the UMW DS106 summer 2013 on-line course in Digital Storytelling, I was introduced by our audio mentor Scottlo to the Arch Oboloer The Devil and Mr. O radio plays.  As I started listening late one night I found that Oboler had created the “Lights Out” radio play Chicken Heart, which inspired the infamous comedy routine by Bill Cosby from his Wonderfulness album that my little sister and I would recreate playing inside an old gutted radio cabinet.

Excited by my find, I eagerly began what turned out to be a fruitless quest to locate the original 1937 Oboler recording. Sadly, I discovered it was one of his lost episodes. 🙁 Recordings of the original radio play and rebroadcasts in 1938 and 1942 are lost or unavailable, although he later recreated the episode for a record album in 1962 – which I couldn’t locate.  There is an 8 min abridged version that many mistake for the original.  And amazingly while researching this blog post, I actually came across a December 31, 2008 recreation of the entire Chicken Heart radio play by the Post Meridian Radio Players.

From Wikipedia:  Arch Oboler made effective use of atmospheric sound effects, perhaps most memorably in his legendary “Chicken Heart,” a script that debuted in 1937 and was rebroadcast in 1938 and 1942. It features the simple but effective “thump-thump” of an ever-growing, ever-beating chicken heart which, thanks to a scientific experiment gone wrong, threatens to engulf the entire world. Although the story bears similarities to an earlier Cooper episode (about an ever-growing amoeba that makes an ominous “slurp! slurp!” sound), Oboler’s unique choice of monster was inspired by a Chicago Tribune article announcing that scientists had succeeded in keeping a chicken heart alive for a considerable period of time after its having been removed from the chicken. Recordings of the original radio broadcasts are lost or unavailable, although Oboler later recreated this episode for a record album in 1962.

Credits & Notes:

To create the GIFs and other images I first downloaded:

 

Listening to Bill Cosby's Chicken Heart.

Imagination at work…

Using Photoshop Elements 11 for the mac I created a composite image of a little girl listening to the radio by using the magic wand tool to copy out representative chicken heart images from the cartoons.  I then adjusted the transparency of the cartoon images to 80% to give the impression of an imaginative mind at work before I merged the layers.

 

Scenes from the Fat Albert and the Cosby Kids "Fish Out Of Water" cartoon

Scenes from the Fat Albert and the Cosby Kids “Fish Out Of Water” cartoon: Fast forward to 10:20 for the Chicken Heart segment.

It took more steps in the process than I was expecting to create the background image for the Chicken Heart.  It was important to make it clear that it was terrorizing the city.  In order to do that I had to shift the Batman & Robin images from the original center to the far right…

BnR_base BnR_Right

… and move the original Chicken Heart image to the far left. This resulted in a blank area on the right hand side of the image that was corrected by duplicating the Chicken Heart graphic as a new layer and sliding it over to right. 

ChickenHrt_Bkgrnd

GIF Background modified from original

At one point I had the blue car mysteriously hanging in mid air, which I promptly fixed. And the color mismatch you see above on the street is hidden behind Batman & Robin, but I had to be careful and align things properly.

BnR_ChickenHrt_01Sec

Once I had the background completed, it was time to merge it with each of the 13 provided Batman & Robin image layers.  For the full version of PhotoShop there is no need to merge the individual layers.  If there’s a way to do that in elements, I’d be oh so grateful if you’d share it with me.

To produce the final GIF:

  • File=> Save for Web.  
  • Check the animate option box on the top right hand menu
  • Change the default 0.2 sec frame delay to 0.1 seconds – Otherwise, as I found out, they’ll run too slow, and it’s not as funny.
  • Click save and give it a file name.
  • To view your GIF, right click on the file name and open it with a web browser.  

SaveGIFWindow

 

TA! DA!  Batman & Robin terrorized by the Chicken Heart.

"It's going to eat you up!!"

“It’s going to eat you up!!”

 

It’s Going To Eat You Up!

 

"It's going to eat you up!!"

“It’s going to eat you up!” (Click on the photo if it’s not moving.)

As a young child in the late 60’s, two of my favorite past times were acting out Bill Cosby’s comedy routine, “Chicken Heart”  [based on a lost 1937 “Lights Out” radio play  by Arch Oboler] with my younger sister in an old hollowed out Philco 41-280 radio cabinet

ChickenHrt_Cartoon_Radio Scenes from the Cosby Kids cartoon

… and organizing the other kindergartners to play Batman & Robin with me…

batman tv show

With this DS106 project I’ve combined those two fond childhood memories with my new found GIFing skills, and a little extra humor tossed in as Batman and Robin are running away from #$&%.  Check out their other adventures here and download your own PSD file to play with.

Check out the Why’s & How’s of the behind the scenes production of the GIF!

Credits & Notes:

Run! Run! I forgot my meds again!

Talk about fun! Starting with the downloadable PSD file I was easily inspired to include my “horrible” thing for Batman & Robin to escape. A manic kitten? The “I forgot my meds!” pic had me rolling on the floor with laughter the 1st time I saw it. I can finally use it.

Batman

Run! Run! I forgot my meds again!

Run! Run! I forgot my meds again!

Robin

A big thank you to Michael Smith for tweeting out his new favorite meme and creating the new DS106 AnimatedGIFAssignments1162

I have a new toy to play with.

There’s an awesome Tumblr blog created by That Design Bastard filled with animated GIFs of Batman and Robin Running away from sh*t. The cool thing is the site posts a PSD file of Batman and Robin running with a transparent background so you can make your own. He even encourages you to submit your GIF to him for consideration. Time to get those two caped crusaders running scared!

Warholing a Rock ‘n’ Roll Stereo GIF

Warhol_It_GIF

Warholing an animated stereo GIF of a rock band

Last night I was writing up my post for “Have a Rockin’ Birthday” with the usual addition of a nice tutorial to share with others since no one had posted one yet.  It slowly dawned on me how much work I actually put into completing one of my DS106 assignments.  I’m definitely puttin’ on my “A” game that ScottLo and “Prof.” Groom referred to in LoDown episode 15 today.  I want more stars!  [Imagine little Rockylou hands on hips, threatening to throw a tantrum.] I think the creative star accounting I’ve used for this particular assignment should help toward remedying the situation.  Especially since I spent practically no time creating this one.

1. I downloaded an App called GIFBoom to my iPhone (for free) that lets me take my own photos and turn them into a GIF.

2. I found two quick shots on my iPhone from a band gig I’d documented a few months back.

Rock ‘N’ Roll ‘N GIF AnimatedGIFAssignments851 (3 stars)

3. They worked great to show the stereo GIF effect.

Stereo GIF AnimatedGIFAssignments991 (1 star)

4. The App gave me several options to add an additional effect.  I chose the Warhol filter.

Warhol Something VisualAssignments560 (2 stars)

5. Ta Da! Assignment complete.  Blog post written.

Animated GIF

Animated, Rock ‘n’ Roll GIF Completed!

By my count that’s 6 stars!  What say you Prof. Groom?