Close
One second...

Teetorials: Simple Animated Gifs

by jesshanebury / None /

image

Teetorials are tips and tricks for adding those special touches to your designs. They're brought to you by our very own Threadless staff designers, Alex, Jillian & Speedy Joe. Check out Jillian's Teetorial on creating GIFs in Photoshop.

Animated GIFs! If you have a video you want to turn into a simple gif, there are plenty of links online to upload and generate a GIF pretty quickly. However, if you’re the doodlin’ type and want to make your own gif, here’s how to do it in Photoshop.

Threadless Teetorial - Animated Gif from Threadless.com on Vimeo

1) Have your files and layers prepared. I drew/assembled each frame like I would a flipbook and prepared them on separate (transparent) layers. The bottom layer, which won’t change, is just that green background.

I’ve arranged my layers in the order that I need them (when I want to turn them on and off). You don’t have to do that but you’re going to be hella confused if you don’t.

2) Go to Window > Timeline. Click “Create Frame Animation”. image

3) Turn on the first layer you want to see. As I mentioned before, I am leaving the green layer at the bottom ON throughout so that you always see it. The transparent layers on top of it are going to toggle on/off.

4) Create a new timeline frame by clicking that little paper icon. This icon duplicates your previous layer, which is why you will want to turn that layer off in the next step.

5) Turn off the layer you want to hide, and turn on the next one. Easy.

6) Create another new timeline frame, hide that previous layer that duplicated and turn on the next one that you want to see.

7) Keep doing that with all of the layers until you’ve reached the end of your timeline.

8) PRESS PLAY and check it out.
There are a number of extra things you can control in the Timeline panel, like frame delay (speed) and looping.
If you want it to loop forever and ever, change the looping setting from “Once” to “Forever”.
You can edit the delay of each individual frame by clicking on the number at the bottom of it (choose an option or enter your own), or select all of the frames at once (like I did in the video) and edit all of them. I have mine set to a .2 second delay. Keep hitting play/stop until you’re like, "AWE, YEA THIS LOOKS GOOOOOOD."

9) Once you’re happy with everything, go to File > Save for Web and save as a GIF.

10) Post it in the comments section.


image

Leave a Comment

merkinspurlock
merkinspurlock profile pic Alumni

Maybe I should have used this one as an example.

PeculiarTiffany
PeculiarTiffany profile pic Alumni

Awesome and easy to follow tutorial! :-D That video is sorely in need of some music though, ahaha.

JaymeArt

I miss that version of PS. Its a bit harder in PS10

YaaH
YaaH profile pic Alumni

^_^

Manupix

Cool tuto, thanks Jillian!

There's no need to duplicate the layers like it looks you did, the backward move frames can use the same layers as the forward move. Just keep creating new frames with previous layers in them: frame 8 (rebound) = layer 8, frame 9 = layer 7, frame 10 = layer 6 etc.

Even easier for simple anims: select the frame you want to be duplicated before clicking the 'new frame' icon and you should have the correct layers already picked.

The frames + layers thing in PS is often confusing for beginners who think each frame needs its own layer anyway, but this doesn't have to be the case at all. Indeed it's where the software power lies: you can create unlimited frames from a handful of layers.

More tips (all of this being valid in CS2):

  • There is a preview in browser option: use it! Do not blindly trust the PS play as things can look really different in the finished product.

  • Saving the psd file saves all of the anim information: if you need to edit your anim later, opening the psd should bring back all the frames and options from the last save, without having to redo all the frames (for some reason this was not obvious to me when I started doing anims, possibly because CS2 is split between PS and ImageReady).

  • Because gif is an indexed-color, 256 colors only file format, getting the colors right can be pretty tricky at first. Find the color table and use it; look into the optimize palette options.

  • An interesting thing about frame delays and browsers. A bit dated but still mostly valid as I understand Chrome is bad at this. In short: beware of very short frame delays (below 0.1"); never ever use 0 or 0.01"!

nikoby
nikoby profile pic Alumni

Made this one a while ago in Photoshop :) This thread makes me want to do more!

Christina.A.art
nikoby said:

Made this one a while ago in Photoshop :) This thread makes me want to do more!

Awesome gif nikoby!!!! :)

SteveOramA
SteveOramA profile pic Alumni
1 design submitted -

nice and easy!

MadKobra
MadKobra profile pic Alumni

great teetorial!

NDTank
NDTank profile pic Alumni
2 designs submitted - Score now!

[Say fish...]2

AnthonyMoore
NDTank said:

[Say fish...]2

Haha, Nice!

No account?
Join Us