Adobe Photoshop is known for creating awesome still photos, but it can also create stellar moving images too. The most familiar file-type of animated image is the .gif. Lucky for us, Photoshop has all the tools we need to create our own! So how do we create one? Why would we do so? And what is a .gif anyway? Let’s get started!
What and Why .gif?
A .gif file is a type of image file which more or less functions like any other. It has fixed dimensions, contains information, can be embedded in posts, and viewed on websites or other image hosting services. So how is it different? A .gif file has the ability to carry within it information which can assign multiple colors to each of the individual pixels of the image. What that means for us internet users, is that we are able to view a dynamic file by watching these pixels change color as opposed to a static one where the colors remain the same. Excitement! For more info on just what makes a .gif, feel free to read this Wikipedia page, otherwise launch Adobe Photoshop and we’ll start making our own.
GIFs Like Small Files!
Before we start, we meed to understand that GIF creation is all about getting the most out of your image with as little information as possible. We’ve all seen .gifs that take too long to load. Why does this happen? That’s because the creator of the .gif didn’t take into account how large the file was. But we’re smart. We’re going to make short gifs, with small dimensions (less than 500 pixels in the longest dimension), with as much compression as we can manage. We’ll get into that later, but keep this in mind!
Importing A Video File
1) Launch Adobe Photoshop
2) Go to File > Import > Video Frames to Layers
This will let Photoshop know the method we want it to use to understand our video file – it will translate each frame into a separate Photoshop layer. Awesome right? Well, not all the time. Try to get the dimensions of your source file as close to the dimensions of the intended .gif as possible. If your dimensions are too large, and your frame-rate very high (let’s say 60fps at 2,560×1,1440), Photoshop will try to create 60 separate 2,560×1,1440 layers for every second of your video. Yikes!
3) Navigate to and select your video file. For this tutorial I’ll be using an old Coke commercial titled “Ali Baba and the Thieves,” which aired in 1953 and has now entered the public domain.
4) Click Open.
5) Photoshop will open a new window for you, which looks like a small video player. Unless you’ve pre-cut your video file, you’ll want to make sure “Selected Range Only” is checked. With this option checked, you can move the two black sliders to roughly where you would like your .gif to start and end. Try to get as close as possible, but undershoot your start by a frame and overshoot your end by a frame. This will ensure you don’t miss something you need.
6) After sliding those tick markers to the desired positions, ask yourself how many frames you’d like to include in the .gif. I’ve limited mine to include only every 2 frames. Why? Because by doing so I’ve halved the size of the gif (remember GIFs love small sizes) and the work Photoshop needs to do. This does come at a cost, however, as the .gif may be noticeably faster than the original (Think watching every other frame of a movie at the same frame-per-second speed as the original. It will be twice as fast.) We can compensate for this later if we’re so inclined by decreasing the frame per second speed.
Congratulations! Your video is now imported into Photoshop, and you’re halfway to transforming it into a .gif.
Cleaning Your Frames
1) If this is the first time you’ve done this, your work-space probably isn’t ready yet. To pull out the tools you need, go to Window > Timeline
This will pull out a long bar which runs horizontally across the bottom of your work-space. Each frame in the timeline is a frame in your .gif.
2) You’ll notice when you import the video in, that you’ll have some frames you don’t want. In my case, I had only one frame in the beginning I didn’t want (which you can see in the screenshot). Removing unwanted frames is a 2 step process.
- First, select the frames you want to delete on the timeline, then drag them to the trashcan icon on the bottom of the timeline. This will remove the frames from your project.
- Second, find the frames you deleted in your layer panel to the right and delete the layers as well. This keeps your file small and clean, and is a good habit to get into. Delete them by dragging them to the trashcan icon on the bottom of the layers panel.
3) Preview your project by pressing the play icon located at the bottom of the timeline panel. Pretty cool right? It should run smoothly, and loop when it’s done with its first pass
4) Optionally, you can adjust how long each frame remains if you want to make the .gif faster/slower.
- To do so select all the frames in your timeline by shift-clicking the first and last frames.
- Navigate to the .03 number on one of the frames. This stands for .03 seconds, which means that the frame will remain for only .03 seconds.
- You will be given several options to choose from, and make your selection. For a standard .gif, .03 seconds works great.
- Preview the project by pressing the play icon until you’re happy with it.
Saving to .gif Format
Once you’re happy making all the changes you want to make, you’ll now need to save the project as a .gif file for online viewing. The importance of this step is super crucial, as it can result in really impressive .gifs or really horrible ones. Remember – GIFs like small files!
A fantastic .gif is shown above, and a horrible .gif is shown below.
1) Navigate to File> Save for Web…
You’ll be greeted with a new window filled with tons of options. Don’t be intimidated! We’re only dealing a few of them.
2) One of the easiest ways to create a decent .gif file is to start with a preset. Go to the preset drop-down menu on the right and select GIF 128 Dithered. While you’re here, try out the other presets and see how they alter the appearance the GIF.
2) Under the Colors drop down menu, I was able to select 256. This will give me a wider range of colors, but will greatly increase my file size and load time. Luckily for me, my .gif isn’t too large at this point, and I can afford to do so without really feeling the effects.
3) Under Image Size near the bottom of the window, change your largest dimension so that it is 500 pixels or less. This is will ensure your .gif fits the dimensions of most image hosting websites and blogs like Tumblr, for example. More importantly, it will greatly cut down your file size.
4) Click Save…
Rename your file accordingly and save it. You’re done! Now you can upload the .gif to the website of your choice.
Note: Your .gif might not animate when you preview it using your computer’s default image viewer. To view it in all its glory, open it in your web browser or upload it to a simple image hosting website like Imgur. Uploading it also helps you ensure what others will experience when loading your file.
Good luck and have fun with your new .gif! You are now participating in the creation of animated online content.
Feels pretty good, doesn’t it?