Ok a quick blog here on how you can extract images from a video file.

So I have a animated logo saved in .MOV format with an Alpha Channel, basically an Alpha Channel allows for transparency when you overlay a video file in something like OBS.

The Jonnychipz Logo above is animated and runs on a loop:

Now, I’m having a play with a few graphics bits and pieces with a friend to try and create some nice video transitions etc. and realised that the only ‘image’ version of my logo is the one at the top of this website with a black background:

So, in case you didn’t already know, PNG images are great, especially if you have a vector graphic like my logo to enable a ‘clean’ background transparency so you can overlay it like my animated video logo above.

My question was, wouldn’t it be good if I could extract all of the frames in my animated logo (which has that video transparency layer – Alpha Channel) into a bunch of separate PNG with transparency!

A quick Google later and we have!!! FFMPEG https://ffmpeg.org/

FFMPEG

FFmpeg is the leading multimedia framework, able to decode, encode, transcode, mux, demux, stream, filter and play pretty much anything that humans and machines have created. It supports the most obscure ancient formats up to the cutting edge. No matter if they were designed by some standards committee, the community or a corporation. It is also highly portable: FFmpeg compiles, runs, and passes our testing infrastructure FATE across Linux, Mac OS X, Microsoft Windows, the BSDs, Solaris, etc. under a wide variety of build environments, machine architectures, and configurations.

Getting it set up

So this sounds great, I thought I would jump straight in and install this on my WSL Ubuntu image on my PC (but they do have windows installations available!) https://ffmpeg.org/download.html#get-sources

From your Linux distro of choice, install ffmpeg:

sudo apt install ffmpeg

This will go off and install the package.

Next Browse to the location of your video file in cmd line, I can show you the File Explorer view here as well:

Ok so that’s cool, we have our MOV file in the folder… next we run this helpful little command that will extract every frame and create an PNG image from it!

ffmpeg -i JONNYCHIPZ_TITLE_FINAL.mov -r 24/1 output%03d.png

Give it a little time to process:

And here we go!!! We have a whole bunch of PNG images that we can use!!

Here is an example snip of my transparent PNG image! Very nice!

Hope you have found this post useful! 🙂