To create that effect, I used the “tween” option. After I added in all of my frames, I wanted to add a dissolving effect between frames so that the words in my animation looked like they were fading in to the picture. Select a frame, and add in as many frames as you would like using the Replicate button within the Timeline panel. You will create different images in frames and put them together to create an animation. Remember those from when you were a kid? Each page had a different picture on it and when you flipped through the book, all of the images came together and it looked like it was moving. Note: The frame animation option works essentially the same way that a flip book does. Click it and a new frame will pop into the panel. It took a while for me to figure this out, and was wondering why nothing was happening when I chose this option. Then make sure you click where it says “Frame Animation”. Once that panel comes up, choose the “Frame Animation” option in the middle of the timeline. If you can’t find your timeline panel in Photoshop, go to Window > Timeline.
Then, I created a frame animation within the Timeline window. So I created different layers for all of the words. In this case, I wanted to animate the text. While creating the image, I placed all of the items that I want to animate in different layers.
To begin with, I created a new image in Photoshop with the dimensions of 1080 x 1920, which is the optimum size for Instagram stories.
If you loved this tutorial and want more like it, read through our tutorial on how to animate vectors in Photoshop to create a different kind of animation, then explore our collection of Adobe After Effects tutorials to become a pro-level animator.Here are the steps I used to create the GIF: Our library of royalty-free footage that’s perfect for making all of your GIF dreams come true. You did it! You made a GIF in Photoshop-it’s time to throw your hands in the air and celebrate your new skills in the art of GIF-making.Īs you can see, making GIFs isn’t all that difficult, and now that you know how to create your own GIFs in Photoshop, you can customize your own to share with friends and family. Adjusting these settings may lower the quality of the final product, but GIFs aren’t known for being high-definition, cinematic masterpieces. From here you can adjust certain settings-like the lossy compression, dither, and colors-to make your GIF a nice, small size for uploading on the web. When you’re done perfecting your GIF, click File > Export > Save for Web and change the file type to GIF. GIFs typically operate on an endless loop, so set the loop to “Forever.” This setting is completely up to you, so pick whichever time works best for your project.Īt the bottom of the timeline window, there is a drop-down menu that allows you to change the looping setting of the GIF. You can do this by highlighting all of the frames in the timeline window within Photoshop and clicking on the scroll down button at the bottom of a frame panel. The next step is to adjust the speed of your GIF. Importing every two frames will give it that authentic GIF feel, but no two GIFs are the same. The more frames you skip, the choppier the GIF will be. You can also adjust the number of frames you want to import. Adjust the in-point and out-point by dragging the markers underneath the timeline. Adjust the Length of Your VideoĪfter you import your video, a window pops up that allows you to adjust the length of your GIF. For this tutorial, we used this clip of a man running and jumping on the beach.Īccess the best video tips, design hacks, and deals straight to your inbox. This will make it so that each frame in the video will exist as its own layer, making it easier to edit your soon-to-be GIF. Import Your Video into PhotoshopĪfter you open Photoshop, click File > Import > Video Frames to Layers. So, if you want to learn how to make a GIF in Photoshop and turn some heads on the web, grab a video from our library, open up Photoshop, and follow this short and sweet tutorial.Ĭhoose Video Footage How to Make and Edit GIFs in Adobe Photoshop Step 1. There are many different ways to create a GIF, but nothing gives you complete control like Photoshop.
If you’re not familiar photo and video editing programs and the process of how to make a GIF, it can be a little overwhelming and cause you to do one of these:
They’re a great way to spark engagement, grab attention, and score some points on social media-in other words, GIFs make people feel like this: No matter how you pronounce it, GIFs are the internet sensation that never fail to get a laugh.