Ever since I made my first animated blog post graphic, I thought there would be others out there who would appreciate a (hopefully) easy-to-understand guide on how I did it. It’s really quite easy, so don’t be put off by the numerous screenshots! It’s just to step you through it thoroughly so you don’t miss anything. Here we go!
- First, create and have your image files ready that you want to use in your animation. You should start with one main graphic, and then Save As as different file each time you move / edit it, thinking of each Save As as a new frame. Your images must all be the same size and dimensions. I like to number them in the order I want them to appear – strongly recommend this!
2. Open Photoshop. Click File > Scripts > Load Files into Stack.
3. Click Browse.
4. Navigate to the image files that you want to use, select all of them, and click Open.
5. Your files will appear listed underneath “Files”. It doesn’t matter if they don’t appear in order here (but mine do) > Click OK.
6. Your files will appear in the “Layers” window. You need to make sure you order them into descending order – that is, the first file (the one that will begin the animated GIF) should be at the bottom, and your last file should be at the very top.
7. Click Window > Timeline. The Timeline window will appear docked at the bottom of your screen. (I’m using CC. If you’re using CS5, click Window > Animation).
8. In the timeline window, click on “Custom Frame Animation”. (Not the drop-down arrow, but the actual words. If you click on the drop-down arrow you will only have a different option for “Create Video Timeline” – you don’t want this!)
9. Just one image will appear in the Timeline window – that’s ok. Click on the hamburger menu (yes – that’s what they are called!) in the top right-hand corner of the Timeline window.
10. Click “Make Frames From Layers”.
11. Now all of your image files will appear (in order) within your Timeline window.
12. Each image is listed with the amount of time it will be shown when the animated GIF is playing. To change the amount of time on an individual image, click the drop-down arrow next to where it says “0 seconds”. To change them all at once to be the same time, select all of the files and click the drop-down arrow on any of the image files.
13. The options will appear for how many seconds you want your frames to be shown. Click the option you’d prefer. I chose 0.2. (Or, you can also click on Other if you want a custom time frame that is not shown in the list. Just type in what you want and click OK).
14. A tip: Set your final image for 3 or more seconds if you want your animation to pause before the GIF starts replaying. Otherwise, leave them all the same.
15. In the bottom left of the Timeline window, change ‘Once’ to ‘Forever’, if you want your animation to loop, well, forever (as long as the viewer is looking at it) and not just stop after it’s played through once.
16. To test how the animation speed looks, click on the “play” arrow at the bottom of the Timeline window to preview it.
17. Once you’re happy with your animation, click on File> Export > Save for Web (Legacy). (Earlier versions of Photoshop click on File > Save for Web).
18. To keep the file size down, make sure you have the ‘Optimized’ tab selected (which should appear as default) and not the ‘Original’ tab. This automatically converted my file from 4.96MB down to 454.2K – big difference. Also, obviously, you should have the GIF file format selected.
19. If you want to decrease the file size even more, you can experiment by choosing a lesser number of colours used in the Colour Table.
20. Once, you’re happy, click Save, give your animated GIF a file name and click Save again.
You’re all done! Upload your file to your blog and enjoy your masterpiece!
I hope you enjoyed the tutorial and that it was easy to follow. If you have any questions please ask in the comments section or shoot me an email and I’ll be happy to help!