…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
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.
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.
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.
After writing my own and reading the other fun submissions for the 7/15/13 DS106 Daily Create: “Write a tabloid headline for ds106 and the opening sensational paragraph” I was inspired to take the assignment a step further and layout the sensational front page of The DS106 Daily Create Tabloid. Which then led to submitting today’s daily create tdc575.
First Things First:
Not wanting to fall into the same attribution trap that I found myself in with my last project (TalkyTina – Sweet As Tupelo Honey) I immediately documented my tracks as I gathered my media and placed the important information and links into a draft blog post. Boy did that save time and reduce the tedium of going back and trying to figure out exactly where I found things – much better plan of action this time around.
Creating the Front Page:
I started with a Google search to locate a tabloid template that I liked. I found this one at CLEO – Cumbria & Lancashire Education. Then came the quandary over which of the 7/15/13 DS106 Daily Create submissions should I use? The template allowed space for 2 stories and 3 images. And of course I wanted to use my own submission “Headless DS106 Mysteriously Runs Itself“. Story 1, Image 1. And the talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box. [Read the headline story here.] So that would be Story 2, Image 2. That left the 3rd image to be filled from the remaining tabloid entries. I had a few I could choose from, but the image of ruby red lips with a snappy headline would be entertaining, eye catching, match the color scheme – and most importantly, the easiest to produce.
Amidst a culture of cost-cutting and outsourcing of education to corporate massive open online courses (MOOCs) a small yet determined group of passionate educators have “organized” a digital storytelling course that can run itself. There is no official leader, although there is a syllabus that can be followed. No one is in charge, but there are plenty of opportunities for any of the global on-line participants to step-up and volunteer to facilitate the focus material of the week during the 15-week course. There are no deadlines or grades, instead suggested assignments and opportunities provided to collaboratively work and learn from others, share their work, and receive feedback to help improve their digital story telling skills.
Some suspect the Illuminati to be supporting this small underground group – encouraging the DS106 group’s subversive tactics with the intent to overthrow the big MOOCs. A secret source was heard to say…“The education system is and has always been ours. The MOOCs have gotten out of control and we need to clip their wings. It’s time to unleash the headless DS106!”
My creative inclusion of a suspected involvement of the Illuminati was to help fulfill the sensationalism and tabloid aspect of the assignment and was serendipitously supported by a statement from @PuppetMaster106 in his guest post on @IamTalkyTina’s blog.
This talk of a ‘headless ds106′ this fall is all well and good, but you know that someone, somewhere, needs to be always at work behind the scenes, keeping things ticking, poking and prodding, feeding the unicorns, and all. And since I’m experienced with webs and scenes, and strings and such, there’s certainly a role for me in the coming months — whether it’s visible to the ds106 community, or not so visible, and rather behind the scenes.
“…refers to various organizations…alleged to conspire to control world affairs by masterminding events and planting agents in government and corporations to establish a New World Order and gain further political power and influence. Central to some of the most widely known and elaborate conspiracy theories,
the Illuminati have been depicted as lurking in the shadows and pulling the strings and levers of power in dozens of novels, movies, television shows, comics, video games, and music videos.”
Image 1: As is usually the case in ds106, I wasn’t the only one riffing on the work of others, and I was more than pleased to use a great image created by Todd Conaway to perfectly complement my story as well as tie-in to the Talky Tina saga. Todd just couldn’t get the thought of Alan Levine’s proposed “headless” DS106 course for the Fall of 2013 out of his head either.
@IamTalkyTina is “Back in The Box” Three Layers Deep
Story 2 & Image 2: The talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box. [Read the headline story here.] The guest blog post created by @PuppetMaster106 [Read full story here.] included a wonderful GIF of @IamTalkyTina in her cardboard box being encased in ice and finally Carbonite.
It appears now that Talky Tina has acquired a new PsychicSiri App for her iPhone and is once again interacting with DS106 with animated GIF challenges in preparation for the August 26th, 2013 start of the “Headless” DS106 course. Although the original post was drafted back in July, my “psychic” inclusion of the GIF fits right in. This all begs for another news breaking tabloid front-page.
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.
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.
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]
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.
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.
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? 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.
Producing the DS106’s Sweet Talky Tina video was a labor of love as it presented many challenges due to the number of different media from several sources that had to be combined and sometimes created: image stills, GIFs, YouTube video and audio. And writing up this blog entry documenting the process turned out to take as much work and time as the video itself!
The task was to take a misunderstood, outcast, marginalized character and transform her into a more powerful, independent, and self-managed member of the ds106 community… to rehabilitate a character out of The Twilight Zone, such that the character would be accepted as one of the ds106 own.
The inspiration for the video was the result of listening to my Pandora Classic Folk Rock station when a fun song about love from the Beatles came on – can’t remember the name right now. The lyrics made me giggle when I thought of Talky Tina’s DS106 persona. Then Tupelo Honey by Van Morrison began to play….
She’s as sweet as Tupelo honey. She’s an angel of the first degree. She’s as sweet, she’s as sweet as Tupelo honey. Just like honey baby, from the bee.
I couldn’t resist. A video mashup/remix of Talky Tina as sweet as Tupelo honey had to be made.
As is the case with most of my projects, they are iterative in nature – forever improving and incorporating new ideas as I go along. Sometimes I am inspired by the work of others. Other times I just happen to stumble upon something that I like more. There are two versions of the video available. I decided to keep the first draft posted to YouTube so that I could illustrate with examples the modifications undertaken to produce the final version. Links to the actual in-video sequences are provided as needed.
=>INTRO & OUTRO
The first draft does not contain an intro or outro sequence. And upon request, Talky Tina was kind enough to create a special title sequence GIF, Starring @iamTalkyTina, that I could use in my final video.
For the title sequence, I liked the GIF that Talky Tina had made, but the first few frames of “smack talk” directed at Jim Groom needed to be deleted. By opening the GIF directly in Photoshop Elements 11 for the Mac I gained access to all of the original 30 image layers, and could easily delete the objectionable frames.
Next, I noticed that the star pattern used in the GIF was less dense than the star pattern I was using in other parts of the video. This lack of continuity didn’t sit well with me. I tried to let it go… telling myself no one would notice…. but it just kept bugging me every time I watched it. In the end, my “OCD” alter ego won out and I went about making the necessary image modifications.
Using the Magic Wand tool I selected the portion of images I wanted to retain, and deleted the rest. The remaining images fortunately did not have to be perfectly clean since they would be merged with a new black starry background that would hide the imperfections. This saved a lot of time, which I greatly appreciated.
When merging the selected images and text with the new background, I reduced the image opacity to 80% to give them more of an eerie feeling. Tina’s head is a little transparent – floating out in space. The GIF below visually illustrates the sequence of steps taken.
Click on image if the GIF is not running
The expanding “The DS106 Zone” text was created using the zoom effect on only that specific text image. The soundtrack for both the intro and outro were pulled from the original Twilight Zone television show. The outro was used in its full length. But the intro could only be used the first 10 seconds before Rod Serling speaks.
My video editing software is Adobe Premiere Elements 11 for Mac and my story purpose was to show Talky Tina as only sweet and loving – especially with Erich. To accomplish this task, I pulled the audio soundbite, “My name is Talky Tina, and I love you very much.” from the beginning of the episode when she is talking to Erich’s daughter. I unlinked the video and audio, deleted audio portions where Talky Tina and Erich hate or threaten to kill each other, and dubbed in the love line. I also found a segment of “silence” in the original video that I could use to cover up dialogue I had deleted but where video remained. The audio proved to be a bit trickier for Erich though. I didn’t want there to be the dubbed foreign film effect, and have Erich mouthing words that didn’t match the audio. To get around this I found back shots of Erich and strategically spliced in images of Tina at certain locations. [View example in video]
“And I love you very much.”
Erich’s facial expressions and actions also had to look loving toward Talky Tina. Again, careful splicing of the right portions of video did the trick. In one case I tried using Christina’s reversing effect so that instead of Erich throwing Tina against the wall, it looked as if she were throwing herself toward him and he is lovingly catching her in his arms. But the effect just didn’t look right in my video, so in the end it was deleted. As you can see, Erich and Talky Tina can say and do nice things to each other through the magic of video & sound editing.
=>GIFs
As I mentioned above, this project contained a number of different media. Each of which presents its own challenges. Working with the GIFs was a big one. When I tried inserting them directly into the video editing software, they no longer looped endlessly. They ran once and stopped. No problem you say… just copy and paste to make the sequence repeat… Sounds great, in theory, but my video editing software “deletes” a few beginning and ending frames in order to blend with the visual media on either side. While this wasn’t too big of a problem for most of the GIFs…
…for two: Quick Wink Tina and Tina & Julie Andrews – this resulted in the wink and the ghostly image of Julie Andrews being cut off prematurely. You’ll notice these irritations in the first draft version as illustrated below.
The use of the GIFs was further complicated by the fact that I only wanted the important event, such as Julie Andrews or the wink, to appear once, and the entire segment needed to be a specific length in order to match with the music soundtrack. To address these issues I opened the original GIFs in Photoshop and placed the layers with the “event” in the middle of the GIF, instead of at the end. I then duplicated a few strategic layers to make the event last longer on screen and to make the entire sequence itself longer.
The long GIF sequence of Talky Tina at the computer needed no modification what so ever. It was meant to play only once and was miraculously the same length as the instrumental section in the music soundtrack. What a stroke of luck. [View in final version]
=>Image Stills: Tips & Tricks
A trick I often use when mixing visual media is to capture a beginning or final frame of a video or GIF sequence. (In Adobe Premiere Elements 11 for Mac the command is Tools => Freeze Frame ) By inserting a still image captured from the original source the image is already perfectly aligned and will aid in providing a smoother transition between the media. And as an extra bonus you can easily adjust its length on screen to provide better synchronization to your music soundtrack if desired.
Reduce opacity of overlay by 80%
Reducing the opacity of an overlay image, such as Talky Tina’s head in the intro sequence or her webpage banner text as shown to the left, allows the underlying image to remain partially visible. This works great for title and credit text sequences as well.
Increasing the brightness & contrast of an image, such as for the cover of Talky Tina’s memoir, “The Stairs. They Go Both Up and Down” helps the image to stand out and become more memorable in the video.
Adjusting an image position and zoom factor in relation to an adjoining image can make for a smoother more natural transition without the need to create a time consuming manual pan of the shot. [Watch example in video]
=>Badges
Talky Tina had created badges that her DS106 “True Friends” could insert into their blogs. [Talky Tina’s True Friends Index] And there were a few technical hurdles that I had to overcome to include the badges in the video. First off, the whole badge wouldn’t fit on screen and remain legible on a mobile device. I was able to get around that by cropping the top half with the picture of Talky Tina and use it to introduce the badge segment in the video. The bottom half of the badge, including the “TalkyTina Says So” text, was then cropped and used as the badge image for each friend.
The video includes badges of people whose media I used, and her other “Super True” friends. I think of this segment as part of the credits and acknowledgments. Amazingly there was a length of soundtrack that lent itself well to the needed seven friend badge image sequence.
Originally I made the decision to exclude badges with GIFs. I assumed they would be too time consuming to make them work correctly and align them properly. I had a change of heart after modifying all of the other GIFs in the project, and the GIF badge by John Johnston (who also made the CogDog/Alan Levine-TalkyTina Dissolve) would be included in its full glory. [Click here to view]
The transitions between badges were surprisingly challenging. Fortunately, Talky Tina had used a template to create the original badges and I had used the same size and technique in Photoshop to crop them. This meant I had a supply of badge images that were the same size and shape to work with. I tried different transitions:
… and finally settled on the film dissolve. With careful alignment of each badge I was able to give the effect of only the photo image gently dissolving from one badge to the next. Toward the end of the project I was still not satisfied with the sequence. The badges were thin and there was a lot of blank space to either side. I considered adding vertical text, such as DS106 on the left and Zone on the right, but that felt like it would be too cluttered. It wasn’t until I had the inspired idea to add the starry background and reduce the opacity to 80% that I was satisfied and could call the badge section complete.
=>Rockylou Productions Animated Logo
The Rockylou Productions animated logo at the very end of the video was created by incorporating a dissolve transition between two logo images designed by Amber Lockridge. Transitioning from b&w to color with a slight increase in the size of the color graphic by 1% is meant to give the illusion of growth and expansion, an important value statement for Rockylou Productions.
The audio logo for Rockylou Productions was made with GarageBand and a simple “D” chord that I played on my 12-string guitar. I took the original recording and added a Bright Guitar effect to the basic track. I then duplicated the original track four times, and added dimensionality to the chord by adding a Lunar Bounce to two (panning each slightly left and right) and a Swirling Echo effect to the two remaining tracks, also panning them slightly left and right. With the addition of the Ambient – Wide Spaces effect to the master track the memorable audio logo for Rockylou Productions was born.
=>Wrap-Up
I think that about does it. This will most likely by my last DS106Zone related project, but I’m looking forward to completing many more digital storytelling projects in DS106 and with Rockylou Productions in the future. In the wings already in the early stages of production are two challenging projects:
a multi-media story using Facebook entries & Storify about the uprising in Istanbul in June, 2013
a video interview of Amber & I talking about the creation of the Rockylou Productions logo and website banner which will be incorporating images against a green screen background.
If you have any questions or would like to know more about the production of this project, post a comment or send me a tweet @rockylou22 and I’ll be glad to share.
=>Media Sources & Credits
Soundtrack: “Tupelo Honey” by Van Morrison
Twilight Zone Video & Audio Clips
YouTube 2min Talky Tina — Living Doll — Two Minute Twilight Zone Project
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.
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.
And a photo of what I remember as the hallowed out radio where my sister and I performed our radio plays.
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.
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.
