Category Archives: Animated GIF

Technology is Great! (When it works.)

Tim Owens (@timmmmyboy) and Alan Levine (@cogdog) – DS106.us heroes

Keeping the DS106 server happy.

Technology is great… when it works. And keeping the DS106.us site up and running has been a labor of love and a real pain at times – especially this week. So Talky Tina’s August 2013 Animated GIF Challenge #9 was to make an animated GIF celebrating the behind the scenes work that keeps the ds106.us server happy. Giving some love and recognition to the folks behind the scenes that keep the web servers and internet tubes running. Tim Owens and Alan Levine were on the battlefield this week.

D’Arcy Norman – DS106 Hero

UPDATE: Just found out from Alan (see comment below) that Tim and D’Arcy Norman (Twitter @dlnorman) are doing all the heavy lifting to get and keep the DS106 servers up and running. This thank you GIF is for D’Arcy too.

This was also an assignment before there was an Animated GIF category — found hiding in the Design Assignments category as @cogdog‘s wonderful Design Assignment 842: Rainbows and Unicorns in the Server Room. Make an animated GIF of a server room that includes both rainbows, unicorns, and a message of thanks. The cheesier the better. Bonus points for elves and pink ponies.

WOW! What a difference. Making the GIF this time around I discovered the wonders of the full version of Photoshop CS5. No more manually merging the layers before I can take a test drive, and I can easily change the animation screen time for each image seperately. In Photoshop Elements you don’t have that flexibility. I’ve had to use the brute force method of saving several versions of files with the individual layers, different merged images, etc. so I could go back to them when I wanted to make a change. A few of my past blog posts walk you through this time consuming painful experience.

Yes. Technology is great…. when it works. And I can tell you, the full version of Photoshop works! No wonder some of the DS106ers can crank these animated GIFs out in no time.

Images:

Server Room
Rainbow Image found at OpenClipArt.org
Unicorn animated GIF found on a free clip art site with a page dedicated to unicorns
Alan Levine [@Cogdog]
Tim Owens [@timmmmyboy ]
D’Arcy Norman [@dlnorman]

A few other server images you might enjoy

A Worm’s Daisy Delight

5 Replies

Daisies & Butterflies delight. Turning that frown upside down.

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.

“The Worms Crawl In”

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

29 Replies

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”

DS106 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.

Jim Groom does the Hula Hot Seat Happy Dance

Slide on in to DS106

4 Replies

Animated GIF Assignment 1183: Tell the World About DS106 GIF

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.

The 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

17 Replies

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.

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

Tiled the black star background to cover the image canvas
Eraser tool to delete the starscape background around the red supergiant star.
Quick selection tool to extract the earth image and space shuttle from their respective backgrounds.
Applied a black filter to the DS106 banner logo to turn it from white to black.
Band-aide tool to erase the “United States of America” & US Flag from the space shuttle.
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.
Merged Space Shuttle, DS106 Radio Flag, and DS106 logo into one layer.
Assembled layers in proper order and merged: Starry Background, Red Star, Jim Groom, Earth, Modified Space Shuttle
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.

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.

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

Engineering Headless Rockylou

7 Replies

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!!!!

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] I 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.] 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.

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.

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!

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.

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.

Version 3: DS106 Headless Rockylou

DS106 PNG Files for download

Chicken Heart Terror – Behind the Scenes

6 Replies

“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”. (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:

Link to Blog Post for Chicken Heart: Images taken from The Cosby Kids cartoon show.
Link to PSD of Batman & Robin Running Away
Link to DS106 AnimatedGIFAssignments1162
Link to Girl listening to radio (wikipedia creative commons)
Short abridged 8 min recording of the Chicken Heart radio play.
30 min full-length recreation of the Chicken Heart radio play by Post Meridian Radio Players
Link to Bill Cosby comedy routine – Part 2: Chicken Heart || Part 1: Snakey Lick set-up

To create the GIFs and other images I first downloaded:

The PSD of Batman & Robin Running Away
Philco 41-280 Radio
- see their other adventures here
Images from The Cosby Kids “Fish out of Water” episode.
images captured on a blog post
Original full-length cartoon [10:20 for Chicken Heart]
Girl listening to radio (wikipedia creative commons)
Batman, Robin & Catwoman photo
And a photo of what I remember as the hallowed out radio where my sister and I performed our radio plays.

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: 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…

… 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.

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.

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.

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

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

It’s Going To Eat You Up!

4 Replies

“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…

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

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:

Link to Blog Post for Chicken Heart: Images taken from The Cosby Kids cartoon show.
Link to PSD of Batman & Robin Running Away
Link to DS106 AnimatedGIFAssignments1162
Link to Girl listening to radio (wikipedia creative commons)
Short abridged 8 min recording of the Chicken Heart radio play.
30 min full-length recreation of the Chicken Heart radio play by Post Meridian Radio Players
Link to Bill Cosby comedy routine – Part 2: Chicken Heart || Part 1: Snakey Lick set-up

Run! Run! I forgot my meds again!

Warholing a Rock ‘n’ Roll Stereo GIF

1 Reply

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, Rock ‘n’ Roll GIF Completed!

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

Rockylou's DS106 Blog

Cultivating Creativity. Raising Visions.