Tag Archives: AnimatedGIFAssignments1124

Riffs Sprouting Up Overnight



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


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



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 )


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

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


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.


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


Downloadable Cheshire Cat .psd


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.


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.


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

Cropped Smoke GIF


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 🙂


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.


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


Transparent .png of Colin



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.


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.



Up, Up, And Away


Animated Movie Poster GIF

Meet Rochelle from Pixar’s movie “Planes”.

Still enamored with creating GIFs, I stayed up way too late last night creating this animated movie poster from the movie Planes by Pixar to be released in theaters August, 2013. (DesignAssignments313)

Let me give you a little background on why I chose this particular movie poster. My name is Rochelle, and it’s not a very common name in the United States.  I met only one other Rochelle growing up, and that was in High School.  I’ve met maybe 5 others my whole life. So when a Facebook friend posted on my timeline that Pixar would be introducing a new character in their upcoming movie about planes, I was beaming,

 “I have a cartoon character named after me?”  

Now this assignment would give me the opportunity to create something out of a real movie poster that had my name on it.  How cool is that? If I liked it, I could see using it in other circumstances around the web. I do like my final product, so you might see it popping up again.

Keeping with this week’s design theme, I studied the poster to understand what is being conveyed in the image.  Since the movie isn’t even out yet, I read the Pixar synopsis of the movie and more specifically the plane character, Rochelle. (voice of by Julia Louis-Dreyfus)

Excerpt from Pixar site:


Pla rochelle rolloutimage v3-0simp

(voice of Julia Louis-Dreyfus)

Rochelle is a tough racer and the pride of the Great White North. Always confident and capable, she got her start running mail to small towns in Quebec, picking up home remedies for mechanical maladies along the way. She also developed a knack for fast travel that ultimately inspired her to give air racing a try. Rochelle never looked back (this competitive contender doesn’t need to). She is relentlessly pursued by charmer El Chupacabra, but steadfast Rochelle is much too focused on winning the race to return his affections.[20]

I would also need to keep in mind the file size limitations of a GIF, how many frames I’d be allowed in my photo editing software, and since I didn’t want this project to consume my life for days, the number of frames I’d actually have to create.  I decided that the important elements of the poster to focus on would be that this is a plane, and then illustrate something about Rochelle’s personality.  My first overly ambitious thoughts were to have her fly on the poster.  Moderating my initial exuberance with a dose of reality, I admitted to myself the work required to make the plane actually fly in or out of the poster was way too complicated to pull off.  My rational, although still very creative self, went with animating the propeller props, and giving her a wink.  I’m not totally at peace with the symbolism of her winking, since the character synopsis says she is steadfast and much to focused on winning the race to return another plane’s affection, but I’ve seen the blinking effect used in a lot of other GIF projects (Ben’s “The Colorized Zone” was a big inspiration), so why not give it a try.

[An illustrated detailed process of creating this animation will be documented and posted as a tutorial eventually. Until then, you can view a tutorial example with only one animation zone.] 

A summary of the process using PhotoShop Elements 11 for the Mac:

1. I used the lasso tool to grab an image of each of the propellers and the eyes/windshield of the plane. This was pretty painstaking while I experimented with which parts of the propeller would work best to create the rotating effect.  I then duplicated the propeller images and rotated them 30deg and 60 deg. I ended up with 3 different propeller images for each side of the plane.

2. For the winking eye I used the lasso tool again to capture just the left half the windshield image.  Then started stretching, erasing, copying, pasting, aligning… until I had something that looked right.

3. Once all of the individual image layers were created, it was time to merge the appropriate layers to create new combined images that would animate correctly.  Oh my was this a chore as it became closer and closer to midnight.  I was creating a total of 3 animation zones?! My brain just wasn’t working as well anymore and I was having a hard time following tracking of what went where.  And remember that ambitious enthusiasm I spoke about? Well I added in an additional challenge to have each of the propellers appear to be spinning a little differently. And believe you me, it was no walk in the park to properly align everything so that those parts that were supposed to be still remained still.  I didn’t want any distracting jumping around of the animation.

4. The timing of the animation sequence was also important.  I didn’t want her constantly winking, yet I wanted the propellers to be moving at a quick rate to provide a better spinning illusion. I was able to create the effect I wanted by duplicating more of the image layers for the propellers and sandwich the winking effect in the middle. All-in-all I ended up with a total of 14 frames: 8 propeller frames + 2 winking frames + 4 propeller frames, all running at 0.2 seconds per frame.

As I mentioned above, this post only gives a high level synopsis of creating this GIF.  The tutorial will have much more detail with screen shot images and examples at each stage as I move through the creation process.