The use of gifs seems to have exploded in the past few years. But have you ever looked at one and wondered how to make your own? They’re fun to do, and best of all, really easy! Learn how to make gifs from your favourite photos or video snippets, to upload to your website or social profile.
We make gifs in Photoshop by creating a slideshow of images. This can either be done with video frames or still images. But, we have to be able to see these individual frames, and we can do this by viewing them in the Timeline window.
In Photoshop, look across the toolbar at the top and select Window > Timeline.
You should see the Timeline bar appear at the bottom of your screen.
How to make a video into a gif You’ll probably want to use a fairly short video of no more than 15 seconds when making a gif. Not only does a long video take more time to open, but it will slow your computer down a lot. I’m using an 11 second video of a squirrel on a tree.
With Photoshop open and your Timeline window showing, go to File > Import > Video Frames to Layers, then select your video in its folder. It may take some time to load the file.
You’ll be presented with a dialogue box:
Here you have the option of importing all frames from the beginning to the end of the video, or cutting it short. You can do this by selecting ‘Selected Range Only’ then dragging the sliders underneath the video preview.
I’m going to select ‘From Beginning to End’ and keep the whole length of video.
Pro Tip: To prevent my finished file size from being huge, I’m going to select ‘Limit To Every 10 Frames’. This means it will load every tenth frame but delete all other frames in between. The video will still show the whole length, but will have reduced the file size dramatically from 274 frames to 55 frames, which is much more manageable for my PC. You may like to limit to more or less frames than this, but remember that the more you keep, the slower it will take to render your gif.
Again, it may take a few minutes to load all the frames into layers. Once it’s finished, you should see that your Timeline has filled up with frames.
Press the play button at the bottom of the screen (the right facing arrow) to view your gif.
Making adjustments to your gif At this point you can make whatever adjustments to your gif that you desire.
Change the loop frequency – The dropdown menu in the bottom left of the window allows you to change how many times your gif replays.
It’s automatically set to loop forever, but you can change this to just once or however many times you desire.
Change the speed – You’ll notice that each frame automatically displays for 0.02 seconds each. You can make this time longer or shorter by right clicking on the drop down arrow under each frame:
I would recommend that if you want to change the speed, make it consistent for all frames.
Deleting frames – Individual frames can be deleted by selecting them, then pressing the trashcan icon.
Adding adjustment layers – In the same way that you might add adjustment layers to your photos (black & white, curves, levels, brightness/contrast etc.), you can also add these to your gifs. If you’re planning on applying them to each frame of your gif, I would recommend putting all your frames into a folder, then applying your adjustment layers above the folder, as I have below:
Have a play around with your adjustment, and when you’re done, scroll down the page to find out how to render your finished gif.
How to turn photos into a gif Turning your photos into a gif works in much the same way as a video does. You’ll want to put all the photos you need into a folder, then go to File > Scripts > Load Files Into Stack > Browse, then select all the photos you wish to add to your gif. Press ok.
Pro Tip: Be sure to use photos of the same width and height, otherwise the frames will overlap.
You’ll notice that things look a little different this time, but bear with me.
Select ‘Create Frame Animation’ in the Timeline window.
This won’t automatically load all the layers into frames, as it does with video. To do this we have to click the menu on the right of the timeline and select ‘Make Frames From Layers’.
You may find that your frames are out of order, if this is the case, reorder them by dragging and dropping the frames around the timeline.
Make your adjustments as necessary, you may want to scroll back up to see how to do this. I’ve added some text to my layers.
When you’re done, keep reading to find out how to save your gif.
Rendering your finished gif (photo or video) Before we save our file, there’s a few things we should check off first.
Check that all frames and adjustments are correct. Are your frames running at a consistent speed? Do your adjustments correspond to the correct layer and are they visible (moving them to the top of the layer stack can help this)?
Does the image need to be resized? If you’re using images of a very large size, you will probably want to rescale your gif so that it has a small file size, runs smooth and will upload to the internet easily. To do this, go to Image > Image Size.
My image is currently 2000 pixels wide. I probably don’t need it to be this big, as I’m only uploading it online. I’m going to resize this to 800 pixels wide. Press ok. Rescaling will affect all layers, frames and adjustments.
If you’re ready to save your gif, go to File > Export > Save For Web (Legacy). You’ll get the following dialogue box:
From the Preset dropdown menu, select GIF 128 Dithered.
From the Colors menu, select 128.
You might have already changed the image size, but if you haven’t and would like to make it smaller for uploading to the web, you can do that under Image Size.
Select which looping option you would like the gif to display, if different to what had been previously selected. I’m going to keep mine on Forever.
Before saving, you may want to view a preview of your gif as it would display in a webpage. Click the Preview button on the bottom left.
Press save, and save the gif to your hard drive.
Ta da! You can open and view your gif in its folder, or upload to the web.