Tag Archives: animated gif

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. 


Number 6 Ain’t No Comic

"Number 6 Ain't No Comic (first attempt)," animated GIF by @aforgrave

“Number 6 Ain’t No Comic (first attempt),” animated GIF by @aforgrave

Bill Smith (@byzantiumbooks, on Twitter) tackled the Visual Assignment 341: Comic Book Effect earlier today, and the actual task itself popped up on my screen this evening as I was poking around in the Visual Assignments looking for my next challenge. I know I have an iOS app on my phone (called Halftone by Juicy Bits) that effortlessly creates this effect — I wanted to approach the task from closer to first principles rather than relying on a purpose-designed app.

I’d experimented with the halftone filter in Photoshop once or twice before, to it didn’t take too long to locate it and obtain the result displayed above. Essentially, the effect creates four different coloured images of dots and offsets them to created the pixellated look that is so familiar in comic books. The eye recombines the colour layers to create the colour-blended image that results. I did a bit of research just now and determined that the dots originally used in the 50s pulp press were known as Ben Day dots — in that implementation, the dots were all the same size, resulting in a very characteristic look. With halftone, the dots vary in size or spacing (from very small on a gradient up to very large) which allows for a more continuous and even transition.

Photoshop lets you select the maximum radius of the dots, which determines how “fine” a detail your image will have. In the original 631×480 MPEG Streamclip screen image, the ratio of smallest maximum pixel radius (4 pixels) to image was too large — it was too difficult to get a fine enough detail. So I scaled the image size up (Image>Image Size) so that the relative smallest maximum pixel radius ratio would be smaller (follow?) and was able to get a finer halftone from the same image.

"Pixel Composition," animatedGIF by @aforgrave

“Pixel Composition,” animatedGIF by @aforgrave

After fiddling around with the maximum pixel radius and the image size, I took a look back at the assignment description. I noticed that there were a couple of tutorials for the assignment. One was no longer available, and the second one was done using Picnik and Chogger. However, Picnik closed up shop in 2013, and Chogger was only used to add speech bubbles. So I searched for “halftone comic book effect using Photoshop” in Google, and immediately noticed an identical image in the Google Image results to the one that sits in the thumbnail on the Comic Book Effect assignment’s page. Following that image to its source page led me directly to “Give Your Photos a Retro Comic Book Effect,” which I will now apply to the original image for comparison.

Tutorial Exploration

  1. Start with a fresh copy of the image.
  2. Apply Image>Adjustments>Levels, (I liked setting Input to 29/1.22/94, which seemed to give a nice contrast.)
  3. Apply Filters>Artistic>Film Grain, with settings Grain:4, Highlight Area:0, Intensity:10 as suggested
  4. I then created several duplicates of the original photo layer, in preparation for step 5..
  5. Applied a different filter radius (trying maximum pixel radii of 4, 8, 12, and 16) to a each new layer.
  6. Added a light frame, black border, an orange radiant-filled top caption box and a white bottom narration box.
  7. Downloaded and installed the font Digital Strip and used it to add a caption and narration. The leading red M was created by increasing the font size, choosing font colour of red, and applying both a stroke and drop shadow effect from the fx menu.
  8. Used File>Save for Web to create a png file for each halftone variation.

Here are the various results:

“Meanwhile, in the Village PRE1” by aforgave, on Flickr.

“Meanwhile, in the Village PRE2,” by aforgrave, on Flickr

“Meanwhile, in the Village 4,” by aforgrave, on Flickr.

“Meanwhile, in the Village 8,” by aforgave, on Flickr.

“Meanwhile, in the Village 12,” by aforgave, on Flickr.

“Meanwhile, in the Village 16,” by aforgave, on Flickr.

What the Heck, Let’s Try the Halftone App

For comparison, I uploaded the original photo to my phone and experimented with the Halftone app. It was very easy to replicate the elements, albeit with slightly less control over some specifics of the finished product. Dot size and strength are easily adjusted with sliders, which allows for a rapid experimentation. The app also applies the frame, the border and makes for easy creation of the caption and narration boxes and text. It also applies a rustic antique look to the image.

“Meanwhile, in The Village (Halftone app),” by aforgave, on Flickr.

In Closing

Wow, that was quite a bit of work for 1 Credit Unit. But maybe the value obtained from the learning and the exploration is sometimes more valuable than the actual credit obtained.


Where’s Waldo? — in The Village??

"Where's Waldo? --  in The Village?? Image 1" by @aforgrave

“Where’s Waldo? — in The Village?? Image 1” by @aforgrave

I don’t know that you’ll be able to find Waldo in this image, but perhaps you can find some differences between this image and the one that follows it. Visual Assignment 1686: Find the 6 Differences invites us to adjust an image to introduce 6 pairs of differences. It reminds us to keep a copy of the original (important!) and also to make up an answer sheet. I’ll let you play first, before commenting on some of the strategies I used in making this.  One note: I couldn’t stop at 6 differences. I’ve not counted up the number — perhaps you might like to provide the number that you think are present, while keeping your own list of differences private so that others can play along.


“Where’s Waldo? — in The Village?? Image 2” by @aforgrave

This was a fun challenge for 2 Credit Units. Most of the changes were implemented using the Clone Brush tool in Photoshop, typically with a radius of about 4 pixels, but on a few instances edited with a 1 pixel brush. On a couple of occasions I used the colour replacement tool (those ones are kind of subtle). In one instance I used the Magic Wand tool to select an area, and then applied a couple of transformations — can you find out which edit I would have used those for?

Historical Synchronicity (July 14th, 2015):

As I worked on this image, magic was happening way out in space today, magic that that carries the remains of Clyde Tombaugh. I imagine that he would have had an easy solution to a problem like this. A portion of his remains are on the New Horizons spacecraft.

Gorgeous Pluto! The dwarf planet has sent a love note back to Earth via our New Horizons spacecraft, which has traveled more than 9 years and 3+ billion miles. This is the last and most detailed image of Pluto sent to Earth before the moment of closest approach, which was at 7:49 a.m. EDT Tuesday – about 7,750 miles above the surface — roughly the same distance from New York to Mumbai, India – making it the first-ever space mission to explore a world so far from Earth. This stunning image of the dwarf planet was captured from New Horizons at about 4 p.m. EDT on July 13, about 16 hours before the moment of closest approach. The spacecraft was 476,000 miles (766,000 kilometers) from the surface. Images from closest approach are expected to be released on Wednesday, July 15. Image Credit: NASA #nasa #pluto #plutoflyby #newhorizons#solarsystem #nasabeyond #science

A photo posted by NASA (@nasa) on

SPOILER: If you have read this far and want a Clyde Tombaugh solution, … click here.

Arrival: In a Pixel Perfect Village


“Drive” animated GIF by @aforgrave

"Come In ..."

“Come In …” animated GIF by @aforgrave

"Spotlight" animated GIF by @aforgrave

“Spotlight” animated GIF by @aforgrave

"Sit Down ..." animated GIF by @aforgrave

“Sit Down …” animated GIF by @aforgrave

"Rover on the Lawn" animated GIF by @aforgrave

“Rover on the Lawn” animated GIF by @aforgrave

"A Still Tongue ...." animated GIF by @aforgrave

“A Still Tongue ….” animated GIF by @aforgrave

"Just a Few Questions ..." animated GIF by @aforgrave

“Just a Few Questions …” animated GIF by @aforgrave

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

June 2017
« Feb    

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