How to record desktop images into gif format on Ubuntu 14.04

First, you need to install a few requirements:
sudo apt-get install gifsicle imagemagick
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder

Now you need to use simple screen recorder to capture whatever video you like. I used it to snag some gameplay of a game I was working on. It has an excellent GUI, and I drew a rectangle on the screen around the game I wanted to record, and saved it.

Now that you have a video, it’s time to convert it into an exciting gif! First, use avconv to break the mp4 into it’s component frames. The stuff in brackets is optional.

avconv -i lights_gameplay.mp4 -vsync 1 [-r 25] -an -y -qscale 1 [-s 800x600] lights/out_%04d.png

Woo! This is a big confusing command and is difficult to just discover what it’s doing. So here’s a breakdown!

  • -i [filename] this is the input filename
  • -an Ignore the audio
  • -y allow overwrites without asking
  • -r [fps] frames per second, if you want to set it to something different than your video
  • -qscale [amount] 1-31, with 1 being the best and 31 being awful
  • -vsync [method] I have no idea what this does. Just set it to 1.
  • -s [output resolution] If you want to start with a particular image scale.

I used this because my video was already perfect.
avconv -i lights_gameplay.mp4 -vsync 1 -an -y -qscale 1 lights/out_%04d.png

Note: I didn’t convert directly to gif here because you lose the color information. Since I didn’t select *exactly* the game window, I used an image editing program (gimp) to figure out how many pixels I wanted to crop off of the edges.

I want to remove 14 pixels from the left side, and 12 pixels from the top, so that my remaining image is 800×600 (the size of my game screen).

for i in lights/*.png ; do convert "$i" -crop 800x600+14+12 +repage "$i" ; done

At this point, there was a bit of “video editing” I wanted to do. I just opened the folder with the pngs and deleted out the frames I wanted to remove. To reduce the file size, I also decided to scale the images down. This is not required, but if your gif ends up massive, this is the first recommendation I would make for improving it.

for i in lights/*.png ; do convert "$i" -resize 50% "$i" ; done

Now that our frames are just what we want, let’s finally turn them into gifs! (This takes a long time if you have a bunch of frames, so just be patient!)
for i in lights/*.png ; do convert "$i" "${i%.*}.gif" ; done

Gifsicle is an animated gif manipulation tool. We’re using it just to piece together an animated gif from the frames, but it allows us to change some standard gif parameters in the process. For instance, this sets the delay between frames to 3, and sets the gif to loop forever.
gifsicle --delay=3 --loop lights/*.gif > lights_raw.gif

Finally, try to have imagemagick strip out extraneous data (bits of each frame that don’t change)
convert -layers Optimize lights_raw.gif lights_gameplay.gif

or, if you want to be really aggressive in compressing the gif (but you run the risk of artifacts)
convert lights_raw.gif -fuzz 30% -layers Optimize lights_gameplay.gif

And here’s the finished product! Only a tiny 7.9 mb!



Published by EyeOfMidas

Game Programmer, Web Developer, Linux Server Admin

Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: