Have you ever wanted to make one of those fancy moving three second images but didn’t know where to start? Well today is your lucky day.
Before we dive on in, I want to explain what a GIF is for those who don’t know and want to learn.
A GIF (or graphic interchange format) is just an image file type that can be either a static image or an animated one. The great thing about GIFs are their ability to be used across the internet while being easy to load and view. Since a GIF is not a video it does not need to start or stop the animation. Depending on how it was created, GIFs can either play once or loop indefinitely which makes them great for short animations and repetition.
Now that we know what a GIF is, let’s make one.
Two things you will need:
- A video file
(must have the file extension .mpg or .mpeg, .mp4 or .m4v, .mov, or .avi)
- Adobe Photoshop
(I am using Creative Cloud so if you are using a previous version the settings may not be in the exact place I say they are)
Step 1: Import video into Photoshop
- When you first open Photoshop, go to File → Import → Video Frames to Layers
- Find and select your video file from the window, then click “Open”
- Here you may edit the duration of the video and the number of frames Photoshop will load into the program.
(NOTE* – Longer the video = bigger file size, and more frames = bigger file size)
If your video is short you can get away with loading the entire video by clicking the “OK” button. However, do know that loading the video into Photoshop can take a bit of time if your computer is older or doesn’t have a high amount of processing power.
What I sometimes like to do if there are a lot of pauses in the video (where the image is static) is to check the box “Limit to every” and use the default value of 2, then click the “OK” button.
Step 2: Getting the video ready
Now before we turn the video into a GIF, you can decrease the size of your video by deleting duplicate frames that repeat at least seven to ten times (if you do this make sure there are a couple duplicates left so your GIF doesn’t skip). However, doing this will shorten the length of the GIF if you don’t adjust the amount of time a static frame is shown.
- Since we selected “Video Frames to Layers” at the beginning of this process, Photoshop will be turning all the video’s frames into individual layers. To see these layers consecutively, select “Window” from the top menu bar. Select “Timeline” near the bottom of the options from that dropdown menu. This allows you to see your video by each frame.
Each frame in the timeline has a very short time in which it is shown (underneath the small thumbnail) before proceeding to the next frame. A tip for doing this: for every duplicate frame you delete, add time to the original frame.
If each frame in the video plays for .1 sec (1/10 second), and you delete let’s say 15 frames, then you want to add 1.5 sec (1 ½ seconds) to the original frame. So the original frame would be shown for a total of 1.6 sec.
An equation to remember would be:
(Original frame duration x Number of deleted duplicate frames) + Original frame duration = Total time for the frame
Step 3: Turn the frames into a GIF
- Go to “File” → “Export” → “Save for Web” (Photoshop CC says “Save for Web (Legacy)”)
- For a GIF to load quickly on many computers (if used on the web) you need to have this file be below 2mb – the lower the better. This is going to be another tedious part, but hang in there it will be worth your trouble.
- A window will pop-up but there are only going to be five things we want to focus on:
1. “File Type”
Located under the “Preset” button, click the dropdown and select “GIF”. Easy.
If the video was shot with a camera, you might not want to limit the colors too much because the quality can suffer. But make sure you play around with it. Also this will take some time to load; I have a decent desktop computer and it still took me about a minute or two when adjusting the colors.
Now I don’t know what this setting does technically but I do know that it lowers your file size and makes the GIF look great. Setting it between 1 – 8 is a good place to be.
4. “Image Size”
This is the setting with the most influence on file size and takes the longest to render (load) out. I personally like to stick with the 16:9 ratio so I usually start at 800 (w) and 450 (h). But if that is too large or small for you, adjust the settings to suit your fancy. Remember that we are shooting for well below 2mb for fast loading times on the web.
5. “Looping Options”
Lastly, we want to choose whether our GIF runs once or if it loops indefinitely. Both don’t effect the file size so you don’t need to worry here. I personally like having GIFs loop infinitely because if you loop only once and if someone misses the loop the first time, then they have to reload the page in order to see it.
Finally, click the “Save” button, not the “Done” button, and save it to somewhere you can easily find it. Saving might take a couple minutes or seconds based on the size and length of your GIF.