How to make a gif from a video in less than 10 minutes*
*Say you have the video on your computer already, and the softwares installed, of course.
Disclaimer: This is my way of doing gif, to each its own. I started making gif on Ulead Gif Animator when I was 13 and from there tried different techniques. I can safely say this way is the fastest I've tried and suits me best, and I hope you'll find it useful as well.
I'm not kidding with the 10 minutes; sometimes it's even less after some experience.
→ Making the gif
For this tutorial, we're learn how to make this
→ Editing the gif in Photoshop CS2+
and optionally something like this out of the first gif (or any gif)
Software needed:
» The KMPlayer [FREE] It will extracts all the frames for the gif we'll make.
» Animation Shop 3 The animation will be saved from there.
» Adobe Photoshop CS2+* Only if you want to make a more elaborate gif (icons for instance).
Making the gif
I'll be making a gif out of this video, which I downloaded from youtube and I'll be working with the .flv file.
The excellent thing about KMPlayer, it's that it basically plays every type of file (at least it never failed me so far.) The only exception is that I've never managed to extract captures directly from a DVD, if anyone knows a fix, I'm interested! ;)
So, instead of having to convert a file (.flv/mpg/mp4/3gp, etc) in .avi to work directly in photoshop (or extracts the caps in Virtual Dub), everything happens in KMP.
Once you have loaded your file in KMP, right click anywhere on the video and go to "Capture" > "Frame: Extract..."
Note: If you don't have the Capture menu, go to "Options" > "Preferences", in the General tab, make sure "Use advanced menu" is ticked. You should have the Capture menu after that.
This window will pop up:
Specify the destination folder for the captures and how you'd like the captures to be extracted. I like to have all the caps, it's best to have a little more caps rather than a very jerky gif, right? ;) And if there are indeed too many detailed frames, we'll fix that in the next step.
Go back to the video window, and find the moment you'd like to gif. Put yourself a little earlier to be sure to have the whole thing. On the Extract window, hit "Start".
Back to the video, hit play and you should see the Extract window working its magic and putting all the caps in the folder to specified earlier.
Once you're sure to have capped all the frames you need, you can stop the Extraction and Pause the video.
(Technically you won't need KMP anymore if you just want to make one gif, but if you have many moments to capture, just get to where you want and start again the Extration.)
Now you have a handful of captures, we'll animate them!
In Animation Shop, go to "File" > "Animation Wizard..." This window will pop up:
Just click "Next" until you have to choose the images. Load the bunch of caps we made at the previous step. And click "Next" until the window closes.
Once everything has been loaded in the software, you should have a window with all the caps you made. If you go to "View" > "Animation", you'll see the gif in action. All we have to do now is see if the gif is fast enough, etc.
The settings can be changed as below
If you think your gif is too detailed (meaning too many frames that look the same). You can use the "Cull" tool. It will deleted frames according to what you want. Like one frame every three frames. Be sure to select all the frames concerned of this change. ("Edit" > "Select All")
For mine it was 1 for 5 frames.
If you think the animation was too slow/fast, we can change the frame propriety. Which means we'll change how much time one frame will be visible. Be sure to select all the frames concerned of this change. ("Edit" > "Select All")
I changed mine to 4/100 seconds.
You can always preview the gif after each step to see how it evolves.
On mine, I cropped the animation with the Crop tool, and resized it to 300px width.
If you're good with your changes, it's time to save the gif! Go to "File" > "Save As..."
You can change the quality with the selector thingy at the left. I kept mine on "Better Image Quality", but you can always change it to suits your need.
And then you just need to click "Next" until the window closes and your gif is ready!
Editing the gif in Photoshop CS2+
Now the Photoshop part, I perfectly know that one could make a gif solely on Photoshop. But I rest my case that I prefer to make them with my technique cause it's less of a hassle, no need to convert the video file and I love my Cull tool (just imagine yourself having to delete every other frame out of 150?? No thanks.)
I work on Photoshop CS3, so it doesn't have Image Ready anymore (meaning I can't even load all the caps as frames like it used to). Instead, the animation function was integrated to the same software.
Go to "File" > "Import" > "Video Frames to Layers..." Now, I know we don't want to work with a video, this will simple load the gif (or any gif) we made in Animation Shop into Photoshop, while keeping its frames.
In the window, files are filetered to be only shown if they're video files. Just type "*" (a star) and click "Load", all the files in the folder will then appear, including your gif. Load it.
A window will pop up, just click "OK" with these settings:
You should have all the layers and matching animation frames like below. If you don't have this window, go to "Window" > "Animation"
From there, you can apply new layers to the animation (remember that everything applied to the first frame is propaged throughout the whole animation).
On mine, I brightened the images, cropped and resized on a 100x100 px canvas. From there I saved for web and here it is!
It's unfortunatelty not compatible with LJ (too big, lazy to find the right settings), but if you work the settings in the right way, you can basically do everything ;)
Hope this helped you in a way! Happy gif'ing!
Original post can be found here.
Disclaimer: This is my way of doing gif, to each its own. I started making gif on Ulead Gif Animator when I was 13 and from there tried different techniques. I can safely say this way is the fastest I've tried and suits me best, and I hope you'll find it useful as well.
I'm not kidding with the 10 minutes; sometimes it's even less after some experience.
→ Making the gif
For this tutorial, we're learn how to make this
→ Editing the gif in Photoshop CS2+
and optionally something like this out of the first gif (or any gif)
Software needed:
» The KMPlayer [FREE] It will extracts all the frames for the gif we'll make.
» Animation Shop 3 The animation will be saved from there.
» Adobe Photoshop CS2+* Only if you want to make a more elaborate gif (icons for instance).
Making the gif
I'll be making a gif out of this video, which I downloaded from youtube and I'll be working with the .flv file.
The excellent thing about KMPlayer, it's that it basically plays every type of file (at least it never failed me so far.) The only exception is that I've never managed to extract captures directly from a DVD, if anyone knows a fix, I'm interested! ;)
So, instead of having to convert a file (.flv/mpg/mp4/3gp, etc) in .avi to work directly in photoshop (or extracts the caps in Virtual Dub), everything happens in KMP.
Once you have loaded your file in KMP, right click anywhere on the video and go to "Capture" > "Frame: Extract..."
Note: If you don't have the Capture menu, go to "Options" > "Preferences", in the General tab, make sure "Use advanced menu" is ticked. You should have the Capture menu after that.
This window will pop up:
Specify the destination folder for the captures and how you'd like the captures to be extracted. I like to have all the caps, it's best to have a little more caps rather than a very jerky gif, right? ;) And if there are indeed too many detailed frames, we'll fix that in the next step.
Go back to the video window, and find the moment you'd like to gif. Put yourself a little earlier to be sure to have the whole thing. On the Extract window, hit "Start".
Back to the video, hit play and you should see the Extract window working its magic and putting all the caps in the folder to specified earlier.
Once you're sure to have capped all the frames you need, you can stop the Extraction and Pause the video.
(Technically you won't need KMP anymore if you just want to make one gif, but if you have many moments to capture, just get to where you want and start again the Extration.)
Now you have a handful of captures, we'll animate them!
In Animation Shop, go to "File" > "Animation Wizard..." This window will pop up:
Just click "Next" until you have to choose the images. Load the bunch of caps we made at the previous step. And click "Next" until the window closes.
Once everything has been loaded in the software, you should have a window with all the caps you made. If you go to "View" > "Animation", you'll see the gif in action. All we have to do now is see if the gif is fast enough, etc.
The settings can be changed as below
If you think your gif is too detailed (meaning too many frames that look the same). You can use the "Cull" tool. It will deleted frames according to what you want. Like one frame every three frames. Be sure to select all the frames concerned of this change. ("Edit" > "Select All")
For mine it was 1 for 5 frames.
If you think the animation was too slow/fast, we can change the frame propriety. Which means we'll change how much time one frame will be visible. Be sure to select all the frames concerned of this change. ("Edit" > "Select All")
I changed mine to 4/100 seconds.
You can always preview the gif after each step to see how it evolves.
On mine, I cropped the animation with the Crop tool, and resized it to 300px width.
If you're good with your changes, it's time to save the gif! Go to "File" > "Save As..."
You can change the quality with the selector thingy at the left. I kept mine on "Better Image Quality", but you can always change it to suits your need.
And then you just need to click "Next" until the window closes and your gif is ready!
Editing the gif in Photoshop CS2+
Now the Photoshop part, I perfectly know that one could make a gif solely on Photoshop. But I rest my case that I prefer to make them with my technique cause it's less of a hassle, no need to convert the video file and I love my Cull tool (just imagine yourself having to delete every other frame out of 150?? No thanks.)
I work on Photoshop CS3, so it doesn't have Image Ready anymore (meaning I can't even load all the caps as frames like it used to). Instead, the animation function was integrated to the same software.
Go to "File" > "Import" > "Video Frames to Layers..." Now, I know we don't want to work with a video, this will simple load the gif (or any gif) we made in Animation Shop into Photoshop, while keeping its frames.
In the window, files are filetered to be only shown if they're video files. Just type "*" (a star) and click "Load", all the files in the folder will then appear, including your gif. Load it.
A window will pop up, just click "OK" with these settings:
You should have all the layers and matching animation frames like below. If you don't have this window, go to "Window" > "Animation"
From there, you can apply new layers to the animation (remember that everything applied to the first frame is propaged throughout the whole animation).
On mine, I brightened the images, cropped and resized on a 100x100 px canvas. From there I saved for web and here it is!
It's unfortunatelty not compatible with LJ (too big, lazy to find the right settings), but if you work the settings in the right way, you can basically do everything ;)
Hope this helped you in a way! Happy gif'ing!
Original post can be found here.