Tag Archives: animated gif

Seven Robot, Deluxe Redux

“Seven Robots, Deluxe Redux,” animated GIF by @aforgrave (click image for rock music)

After only getting to try The Daily Create, tdc2016 yesterday on my iPhone, I wanted to revisit the RoboBoogie website on my computer. After playing with the code generator for a few minutes, I started animating all of the robots, and captured each one as a short video.

For each of the seven robot videos,
1) import into Photoshop, isolate 25 unique frames, make the background transparent for each frame
2) import grouped layers into master Photoshop file
3) re-assigned each robot’s 25 frames across the 25 frames within the all robot GIF.
4) add in a background for the robots to dance in front of.

In closing, I made an mp3 of one of the music tracks, and then used the John Johnson trick to make the mp3/ogg playable on a click.

Voila! Seven Dancing Robots!

They also dance on Mars, in Vegas, and in Fredericksburg!

“Seven Robots, on Mars,” animated GIF by @aforgrave (click image for synth music)


“Seven Robots, in Vegas,” animated GIF by @aforgrave (click image for funk music)


“Seven Robots at CoWork in Freddy,” animated GIF by @aforgrave (click image for disco music)

Background Images

The Robot Dances “My Way”

“The Robot Dances ‘My Way’,” animated GIF by @aforgrave

For The Daily Create, tdc2016, in which we are asked to make the robot dance.

As the GIF should make clear, I was only using my phone today, and with limited time I had available. I started with a screen capture of the initial robot and then isolated it using Pixomatic app. The robot was then flipped, rotated, and sequenced with the other screen captures first within Keynote, and then assembled into a GIF using the Giffer Pro app.


Make a Poster to Celebrate Your Achievement in Completing the 30-Day Challenge!

“June 2017 30 Day Challenge for The Daily Create poster, animated GIF by @aforgrave

Sure. You can make a list of your 30-Day Challenge art. Maybe you can earn yourself a badge. However, why not take the final step and create your very own ready-t0-print 2’x3′ wall-mountable poster to celebrate your month of creativity? (Note: current technology does not allow you to animate a printed poster, so you still need to to a GIF version to enjoy that feature.)

Here is my completed 2’x3′ poster as a flattened PDF.

Download a layered photoshop template PSD file, all ready for you to insert and crop the 30 images that represent your contributions to the June 2017 30-Day Challenge for The Daily Create.

Options within the Template

You have 4 options for how your poster may look, depending on the layers you activate in the PSD.

  1. Black Frame with TDC numbers displayed
  2. Black Frame without TDC numbers
  3. White Frame with TDC numbers
  4. White Frame without TDC numbers

My poster and GIF above were generated with option #3. Depending on the contents of your 30 boxes, you may find one option looks better than another. Simply toggle on the layers you wish to use.

June 2017 30-Day Challenge poster options,” animated GIF by @aforgrave

Mask That GIF!

I was flipping through the DS106 The Daily Create twitter stream this afternoon and I came across a post by Mariana where she had tried out a GIF making app — ImgPlay. Her assessment was that the app created a rather large GIF (too large for Tumblr — been there!) and with some undesirable movement (I gather the original came from a hand-held video?), and so she went into Photoshop to get a better result.

I’m including Mariana’s three images here so that you can see her progression:

GIF #1 – file size, 1.5 MB, direct from ImgPlay

You can see the original movement inherent in the hand-held video. Note we get full colour, and smooth movement. The file size, however, is 1.5 MB. That’s big for a GIF.

GIF #2 – File Size 382 kb

Mariana’s second GIF retains the unwanted jerking of the original, but a small colour palette results in a smaller file size.

GIF #3, 230 KB

Mariana’s third GIF is even smaller, but there’s a trade off in speed of the horse’s gait and the number of colours.

How Can We Make a GIF Smaller, but Retain Colours and Frames? Use a Mask!

Below is a new GIF, re-made from the original, and retains the full colour and smooth movement of the horse. However, through the use of a mask, the image now loses the the jerky frame-to-frame movement of the surrounding trees, and the file size is considerably smaller at 305 KB — essentially 1/5 the file size of the original.

GIF #1 redone, with mask in Photoshop, at 256 colours, 305 KB

The secret is in the use of a mask to cut down on the number of pixels that change from frame to frame within the GIF. The fewer pixels that change, the smaller the final size of the GIF.

Although there are different ways to create a mask, the simplest conceptually may come from taking one frame of your GIF, cutting a hole wherever the image needs to change, and then placing that frame at the top of the stack of layers, making sure that it is visible for all frames of the GIF. Here’s the mask that I used for the re-do:

Screen capture of the mask used as the top layer for all frames

Getting a grasp of the dance between layers and frames in Photoshop when GIFfing is something that took a bit of trial and error to get straight in my head, back in the day. Early efforts using GIMP did not help, as everything needed to be a different frame when making a GIF in GIMP — you wound up merging lots and lots of bits to make the different frames, whereas Photoshop simply lets you turn layers on and off on a frame-by-frame basis, allowing you to keep the primary pieces and keeping everything much simpler.

At any rate, making 4/5th of the image static from frame-to-frame drops the file size considerably. A really great benefit is that you can include more frames (keeping movement smoother) AND maintain colour fidelity much more easily, both resulting in a better looking GIF.

I’ve downloaded ImgPlay to my iPhone and will be experimenting with it. Steadying your phone (a tripod or a wall helps, when they are available) if you know you want a stop-motion or GIF is always important — but you aren’t always thinking ahead when you take a video.

GIFfing while on the go is fun — and taking time with Photoshop is not always desirable. Having said that, if you have a bit of time, and want a really superior GIF, you probably can’t beat Photoshop.

Here is the Photoshop file if you want to take a look inside.

Google Says … I am Not a Number

"Google ... I am not a Number ...," animated GIF by @aforgrave

“Google … I am not a Number …,” animated GIF by @aforgrave

I like Visual Assignment 1244: Illustrating Odd Autocompletes. I’ve done it a couple of times before, although I can’t find any examples in my Media Library and it’s not showing up in the Assignment Bank examples. Maybe it’s in the Assignment Bank more than once? Like maybe in the AnimatedGIFAssignments?

For this one, I didn’t necessarily illustrate the odd autocompletes, but there are a couple good ones in there.

  • “I am number four.” (Six would not say that.)
  • “I am not a robot.”
  • “I am not a nugget shirt.”

Anyway, I knew what I was expecting with this one, and Google did not disappoint. The real fun was getting that tiny little visual summary of the opening credits to animate in the search results.   (2 & 1/2 Credit Units)


This challenge is essentially driven by adding letters one at a time into the Google search bar, but taking a screen shot after each new letter so as to capture the autocomplete suggestions and hopefully capture some interesting gems. I also like to try to capture the odd text cursor, and put in a few “pauses” where the cursor blinks as if waiting for input. That’s simply done by repeating two successive frames (one with the cursor and one without) a couple of times.  A 0.5 second interval seems to be appropriate.

Image Capture Tools:  Snapz Pro X2 (left) and Skitch (right)

Image Capture Tools: Snapz Pro X2 (left) and Skitch (right)

Snapz Pro X  🙁  Skitch?

My long-standing screen capture tool of choice, Snapz Pro X, doesn’t play nice under the latest versions of Mac OS X, and unfortunately it appears support for updates is not forthcoming, which is sad. I’ve used it for over a decade.

Recently I’ve been making use of Skitch for my screen captures. My limited familiarity with Skitch has me having to pause after each snapshot and save the file out to a determined location. (Snapz Pro X and even the native OS X screen capture tool just save to a predetermined folder automatically.) Given that the save-each-capture-every-time slows things down considerably, I investigated the Skitch integration with Evernote. (Turns out Evernote bought Skitch 4 years ago.) Authenticating Skitch with your Evernote account allows for a single “Save” button, and the files go to Evernote automatically, numbered in sequence. Fortunately there was an easy Save Attachments command in Evernote that let me get the images back down out of the clouds.  The nice thing about Skitch that makes it work nicely is the  Previous Snapshot Area command, which allows you to grab successive images from the same section of the screen — something that really comes in handy when you want to layer them for animation later on. And the integration with the cloud and access on multiple platforms is a benefit when you need to share files between devices.  But I think I’ll be investigating something that I can count on locally for when I’m deep in the throes of creating. Uploading just to download don’t make no sense.

In the meantime, I think I need to find the duplicate entry of the Google autocomplete assignment. I know I’ve done it before. Or someone I know has. 


Daily Create Shirt – 2017

What Is Your Question Today?

#prisoner106 Summer 2015

#noir106 Winter 2015

ECOO 2014 #bit14

#ecoo14 #bit14 Bring IT Together

#wire106 Fall 2014

Bava/Nobody WIRE106 T-Shirt

3D Anaglyphs

3D Glasses_FLAT AnaglyphBADGE GREY fill BLACK

3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

The Daily Create T-Shirt


ds106 Spring 2014

#ds106 The DS106 Workplace

ds106 Summer 2013

Posts by Date

August 2017
« Jul    

Creative Commons

Visitors to de•tri•tus

MiniCYHMN? | Status | 64K | Listening Options

Winampwindows Media PlayerReal PlayerQuickTime
Listening to 105theHive - details FAQs

What is is #4life.
Why do you
Who is is of The Earth. That's you, brother! MiniPlayer

MiniCYHMN? | Status | 64K | Listening Options