How to Make GIFs in Photoshop

In our current Internet climate, gifs are used all over the web, and now they’re even in our texting and messaging apps. Some sites are available to make user-friendly gifs for you, but sometimes the quality is just awful. If you want to learn how to make your own gifs from videos in Photoshop, keep reading.

First, figure out what video you want to make a gif from. Hopefully you are the original owner of the video, but if you would like to gif something from another source, just make sure they have a creative commons license and you are free to use their work. If you want to grab a video off of youtube and you have the conversion software, that’ll work just fine. You’ll need to have your video file in .MOV format for this to work properly. Once you’ve grabbed the video you’d like to make your gif from, open up Photoshop. In this tutorial, I will be using the CS6 version of Photoshop and using my own video from a concert I went to this summer.

Step 1:

With Photoshop open, go to File > Import… > Video Frames to Layers…

Step 2: 

Next, select ‘Selected Range Only’ and on the slider physically select what part of the video you would like to gif. To ensure greater accuracy, play the video through to figure out the exact location of the moment.

Step 3: Once your frames are loaded, they will be displayed at the bottom of your Photoshop window. Each frame is a new layer, and your number of frames will vary depending on how long your selection is. Here you can adjust the time between each frame. The default is 0.03 seconds, but I usually like to have no delay.

If you don’t have a layer menu open on your interface, go to Window and select ‘Layers’ from the drop down menu. You should see something similar to this.

Step 4: Once you get your gif playing the way you like, you can start messing around with adjustment layers. You can either do this from the adjustments window display right above your layer menu, or if it’s not up, go to the toolbar and select Layer > New Adjustment Layer… and add what you’d like. Just make sure the adjustment layer is above the last layer (last frame) in your list (so in other words, make sure it’s at the top)!

(Optional) Step 5: After you’ve adjusted the gif to your liking, I usually like to consolidate the adjustment layers into one group. To do this, select all adjustment layers and go to Layer and select ‘Group Layers’ from the drop down menu. You can make multiple groups as you go along, make just one after you’ve finished, or keep them all separate. Whichever you prefer is fine.

Step 6: Another helpful tool for you might be the cropping tool located on your toolbar. Once you like what you see and you’re ready to save your finished product, go to the top menu bar and select ‘File’ then ‘Save As…’

Here you can either save your document as a .psd file (which will keep the adjustment filters and layers intact so that the next time you open the file, you can go back to work on it exactly as it appears) OR you can opt to save it as a .gif file to use by selecting ‘Save for Web…’ in the dropdown menu.

Make sure here that you adjust the image size (if you haven’t already) or else you’ll have a gif that takes up your entire page. For the purposes of this gif, I adjusted my width to 250px.

Feel free to click on the Preview button in the bottom left corner to make sure your gif will look the way you want it to, and then go ahead and save!

And there you have it friends! 

I’m still a bit rusty with Photoshop myself (as I have had to re-teach myself a bunch of it), but hopefully this was at least somewhat easy to follow. If you have any questions feel free to let me know in the comments and I will try to help out to the best of my ability! Happy gif-ing y’all!