Makin GIFs in Photoshop CS6
How had I never made a GIF before? I just hadn't. Because I get intimidated by stuff and if no one ever asks me, then I tend to be too shy to try.Â
Well that's no way to improve as a designer! I recently read Allison Grayce's New Year's Resolution: Become a Better Designer article and was inspired to both try things I've been meaning to try and share my learning experiences.
So. Today my supersmart amazing gif expert coworker held my hand through making a GIF in Photoshop CS6 and that's the new thing I learned today!
GIFs (obviously) are a series of still images. So set up your layers with this in mind. You can have as little as two and as many as you want. Each of your layers should represent a different stage in the GIF animation. If all you're doing is changing the color of one thing (as in my case- see below) then each layer should be exactly on top of one another. If you're showing a position change, then this should be reflected as you turn on and off that particular layer.
2) Open up the timeline feature.
In the bottom left of your Photoshop CS6 window, beneath where it says 'Doc 16k....etc' you should see a Timeline button. Click until it opens. Go ahead and pull this area up to give yourself room to work.
3) Arrange your layers in the timeline
If you have any experience with video editing programs, the rest will come as second nature. Once you open the timeline, your layers will automatically load up, except they will all be stacked on top of one another and as the GIF is concerned- all happening at once.
So what you have to do is set the duration that you want each frame to play and arrange them as you would like them to play.
I set mine to where each frame lasts a second and they sequence through the colors of the rainbow.
4) Save with correct settings
Once they're arranged to your satisfaction, go to File > Save for Web and choose any of the GIF options. (I don't at this point know what the difference is. Feel free to enlighten me, this is all in the name of learning!)
The crucial thing about this save is to choose 'Forever' under Looping Options in the Animation section of the save window. This will ensure that your GIF will keep on going!
5) Go forth and give the world your GIFs!
Upload to blogs, Dribbble, wherever you feel your GIFs are most valued.Â
Let me know how it goes and if you have questions or there's a big hole in my directions, please let me know. We're all in this together.