The Creative Life

How to make an animated GIF

How to make an animated GIF / via www.leysaflores.com

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!

  1. 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!

1. How to make an animated GIF / www.leysaflores.com

2. Open Photoshop. Click File > Scripts > Load Files into Stack.

2. How to make an animated GIF / www.leysaflores.com

3. Click Browse.

3. How to make an animated GIF / www.leysaflores.com

4. Navigate to the image files that you want to use, select all of them, and click Open.

4. How to make an animated GIF / www.leysaflores.com

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.

5. How to make an animated GIF / www.leysaflores.com

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.

6. How to make an animated GIF / www.leysaflores.com

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).

7. How to make an animated GIF / www.leysaflores.com

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!)

8. How to make an animated GIF / www.leysaflores.com

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.

9. How to make an animated GIF / www.leysaflores.com

10. Click “Make Frames From Layers”.

10. How to make an animated GIF / www.leysaflores.com

11. Now all of your image files will appear (in order) within your Timeline window.

11. How to make an animated GIF / www.leysaflores.com

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.

12. How to make an animated GIF / www.leysaflores.com

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).

13. How to make an animated GIF / www.leysaflores.com

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.

14. How to make an animated GIF / www.leysaflores.com

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. How to make an animated GIF / www.leysaflores.com

16. To test how the animation speed looks, click on the “play” arrow at the bottom of the Timeline window to preview it.

17. How to make an animated GIF / www.leysaflores.com

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. How to make an animated GIF / www.leysaflores.com

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. How to make an animated GIF / www.leysaflores.com

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. How to make an animated GIF / www.leysaflores.com

20. Once, you’re happy, click Save, give your animated GIF a file name and click Save again.

21. How to make an animated GIF / www.leysaflores.com

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!

bisous

Previous Post Next Post

You Might Also Like