[duh]

I thought I’d write up a guide on how to make animated gifs from video files since I've seen a few people asking how. There are loads of ways to make them, but this is my preferred method, although it is of moderate difficulty.

This guide might seem long, but I tend to over explain stuff just to make it clear as possible. The whole process shouldn't really take more than 10 minutes or so depending on what you want to do.

This tutorial is intended for Photoshop CS5, however it’s also possible with Photoshop CS4 and CS3. Photoshop CS6 is out now, no real changes have been made to the program so it should be all the same.

Google Docs version of this guide here. You can save as PDF, DOC (Word) and other file types in that version.

Things you’ll need:

- [Only registered and activated users can see links. ]. I've linked the free 30 day trial, you'll need an Adobe account to download, but you can use one of the logins from [Only registered and activated users can see links. ].
- [Only registered and activated users can see links. ]. Free, current latest is [Only registered and activated users can see links. ].
- [Only registered and activated users can see links. ]. Current latest is [Only registered and activated users can see links. ], the zip contains both 32bit and 64bit versions.

Update - I've put together VirtualDub 1.9.11 and the DirectShow driver 0.93 into a single zip [Only registered and activated users can see links. ] (32bit) for convenience. You can ignore the step below, unless newer versions come out.

Once you’ve installed VirtualDub, go to the folder where it’s located, i.e. C:\Program Files\VirtualDub and put the DirectShow driver (DShowInputDriver.vdplugin) into the plugins32 folder - not "plugins". If that folder doesn’t exist, create it.

Update 2 - It is possible to create gifs solely with VirtualDub alone, however I don't use that method since you cannot control the quality of the gif or do more advanced stuff like changing the delay of particular frames and add borders. However if you're interested in knowing how, follow the guide [Only registered and activated users can see links. ].

Some info on the DirectShow Input Driver:
The DirectShow driver is necessary as it'll allow you to open any video in VirtualDub such as mkv, mp4, rmvb, wmv and flv.

For the DirectShow driver in VirtualDub to work, you need to have the correct codecs installed beforehand, the easiest way to check is to try and play the video file in MPC or Windows Media Player or any other [Only registered and activated users can see links. ] media player. VLC and other self contained media players don't install codecs outside of their own folders, so they don't count.

If it doesn't play, I suggest installing [Only registered and activated users can see links. ] which covers the most popular and common codecs. Other codecs worth mentioning are [Only registered and activated users can see links. ] (QuickTime Alternative) and [Only registered and activated users can see links. ], but generally you won't need these two.

Basic summary:

You use VirtualDub to take a video file and extract the frames as individual images. You then use Photoshop to take the images you exported and create your gif.

So in essence:

Open video in VirtualDub, select the part you want, export as Image Sequence. Open images in Photoshop and save as a gif.


Tutorial - Using VirtualDub:

1. Open VirtualDub and go to File > Open video file... you'll get a window that looks something like this:

[Only registered and activated users can see links. ]

2. Firstly, make sure you change the Files of type option to DirectShow input driver. Pick a video file you want to use and click Open.



3. Use the seek slider (D) to roughly jump to the section of video you want, use your keyboard cursor/arrow keys for more precision.
4. Once you're at the start of the section you want, click the Set selection start button (A). Find the point where you want it to end and click the Set selection end button (B).

You'll see the portion of video you've selected in the seek bar (C).

Note: You could just save what you have to images right now, however there'll be a lot of duplicate frames and the gif tends to animate quite slowly. Ideally, what you want to do is have as few frames as possible to make the gif small (downloads quicker for people to see), but at the same time not too few so as you'll destroy the smoothness of the animation.

5. Go to Video > Frame Rate.... Click on the Convert to fps option and enter your desired speed. I find anywhere from 10 to 15 to be a pretty good balance between size and animation smoothness. Play around with the fps and see what looks best to you. Generally, I tend to use 10 fps.

[Only registered and activated users can see links. ]

6. Go to File > Export > Image sequence... pick an empty folder to save all the frames to and I tend to change Output format to Windows BMP so as I can easily preview them from Windows. Lastly press OK to begin exporting, which should take a few seconds.

[Only registered and activated users can see links. ]

[duh]

Tutorial - Using Photoshop CS5:

7. In Photoshop CS5, go to File > Scripts > Load Files into Stack... a window should popup like the one below:

[Only registered and activated users can see links. ]

8. Change the Use option to Folder, click the Browse button and find the folder where you exported the image sequence to in Step 6. Click OK when done and Photoshop will take a moment to load all the images.

9. Go to Window > Animation to bring up the animation panel.



10. In the top right of the animation panel, click the panel menu button (A) and select Make Frames From Layers (B).

11. I don't know why, but the animation is always imported backwards so to correct this, repeat Step 10, but this time select Reverse Frames (C).

12. You'll want to make the image smaller, otherwise the file size is going to be huge. Go to Image > Image Size... and change the width & height there to whatever you want.

Tip: At the bottom of the Image Size window is an option on how you want to resample the image. It's already labelled, but use Bicubic Sharper for reductions and Bicubic Smoother for enlargements.

*You can ignore this section if you wish and go straight to Step 13.



There are a few options in the Animation panel that you might want to familiarise yourself with:

- D. How you want the gif to loop, either forever or a set number of times.
- E. The frame delay, this changes how quick it jumps from one frame to the next thereby making the animation faster or slower. You generally won't need to touch this setting if you've exported it right from VirtualDub.
- F. Playback controls, pretty self explanatory, use these to preview the gif.
- G. Trash can button to delete any unwanted frames.

13. Go to File > Save for Web & Devices... and you'll see the window below:



14. You can now just pick a Preset (H) i.e. GIF 128 Dithered, hit Save and be done. See the Advanced file saving section for more details.

[duh]

Photoshop CS5 - Advanced section - This section can be skipped:

Advanced file saving:

I like to try and get the best balance between file size and quality, for that, you'll need to play with the options.



Firstly, change the view to 2-Up by clicking on the tab at the top, this way you can compare your original image and compressed image in one screen.

There's quite a lot of options here, but most you won't need to touch and you don't really need to know what everything does, just play around with the settings until it looks decent and is reasonably small.

- Change your file format (I) to GIF if it isn't already.
- J. Here you choose how colours are handled. Generally Selective or Adaptive seems to give the smallest file sizes.
- K. Here you choose how many colours the gif will use. More colours means bigger file size, but use too few and you'll start to lose detail. Generally 128 colours is a good balance, but you can drop that down further if it still looks good.
- L. Select the type of dithering here. You may want to use dithering when you've got gradients in your gif, it'll blend the colours better rather than leaving large blotches, however it will also add a grain to the image and increase the file size. Diffusion is probably the best type, but it depends on the scene.
- M. Here you choose how much dithering to use. I tend to just leave this on 100%, but again, play around with it and see what looks good.

You'll want to leave Transparency ticked as it tends to make the file size a fair bit smaller. All the other options you can ignore.

- N. Keep an eye on this section when changing any of the options, it'll give you an estimate of what the file size will be.
- O. Playback controls you can use to preview the gif.


Adding a basic border:

This section I'll explain how to add a very basic outline around your image.

1. In the Animation panel, make sure you select the 1st frame. In the Layers panel, select the top layer.
2. Make a new layer by clicking on the New Layer icon in the Layer panel or go to Layer > New > Layer... (Shift + Ctrl + N). This layer should be at the top of all other layers, if it's not, drag it up until it is.
3. Go to Select > All (Ctrl + A) and then Edit > Stroke, you'll get the window below:

[Only registered and activated users can see links. ]

4. What I've seen people do is use a double border, a white outline, then a black outline. To do this, set the Width to 2px, change the colour to white, select Inside and press OK.

5. Without deselecting anything, go back to the Stroke options (Edit > Stroke). This time change the Width to 1px and the colour to black, leave the other options as they are and press OK.

You can of course change the border colours to whatever you want.

You should get something like this:




Changing/fixing brightness & contrast:

Sometimes the video you have might lack contrast or could do with some brightness fixing. The easiest way to change this is to use an Adjustment Layer.

1. In the Animation panel, make sure you select the 1st frame. In the Layers panel, select the top layer.
2. Go to Layer > New Adjustment Layer and pick one of the options, I like to use Levels. A little window will popup, just name it whatever or leave it as it is and press OK. This layer should be at the top of all other layers, if it's not, drag it up until it is.

[Only registered and activated users can see links. ]

3. The Adjustments panel should popup (image above).
- A. Here you can just pick a preset if you're lazy.
- B. This slider controls the dark shades and shadows, sliding it to the right will make things darker.
- C. This slider controls the midtones, use this to fine tune the contrast.
- D. This slider controls the light shades highlights, sliding it to the left will make things lighter.

Generally, you'll want the the shadow (B) and highlight (D) sliders to be touching the edges of the histogram (the black mountain type graph). Then use the midtones slider (C) to tweak it further, this will generally give you a nicely balanced image.

There are a whole load of other type of adjustment layers, so feel free to play around with them. It's best to use these since they're non destructive and also they affect all layers below them. All other filters (in the Filters menu) like sharpen or blur etc, will have to be applied to each layer individually making it a bit of a chore.

[Jelmo]

Way too long.
For me, I can do it within a minute. Easily.

[duh]

Originally Posted by Jelmo

Way too long.
For me, I can do it within a minute. Easily.

Good for you, bro.

And to quote myself:

Originally Posted by duh

This guide might seem long, but I tend to over explain stuff just to make it clear as possible. The whole process shouldn't really take more than 10 minutes or so depending on what you want to do.

[FenRirFX]

so far i made gifs from video-files similar still not that efficient
very nice tutorial, detailed which is helpful and makes sense

thx. brah :-)

( Click to show/hide )

[duh]

Originally Posted by FenRirFX

so far i made gifs from video-files similar still not that efficient
very nice tutorial, detailed which is helpful and makes sense

thx. brah :-)

You're welcome

I don't expect many people to read this guide, let alone actually attempt it, but if it helps 1 person, then that's good enough for me.

[saber101]

different to how i do it but get the job done
i use fireworks pressing print screen on VLC when watching something

[Frediloc]

Wow, awesome tutorial - very thorough. I'm definitely gonna try to make a few. Thanks!

[dartdavid]

thanks, maybe i'll try it sometime