How To: Create Simple Animated GIFs(Photoshop)

[Zeron]

Table of Contents

• What I'll Teach
• Animated GIFs(what they are)
• Supplies
• To Start
• Layer Setup
• Frame Setup
• Finalization
• Related Tutorials

What I'll Teach

In this tutorial I will teach you how to make a simple animated GIF that switches between to pictures back and forth forever. This technique can be used for more complex GIFs witch use 10, 20, 50 pictures. This technique Can be used to make signatures, avatars, forum banners, advertisement, or just for fun.

Animated GIFs

They are found throughout the web. They are particulary common in forums
and blogs. Animated GIFs are most commonly seen as avatars or signatures like seen below.
Animated GIF signature

(I created this)

Animated GIF avatar

(found on the hive)

...Now don't you want to be able to create your own custom avatar or signature like all the other big names you see out there do? Just complete this tutorial and I will teach you how to make a simplistic Animated GIF.

SUPPLIES

• Adobe Photoshop CS2+ (I am using CS3 Professional Extended)
  
• Less Than 30 Minutes Time
• This Tutorial

To Start...

Hit Ctrl+N(to create an image from scratch or Ctrl+O(to open an already existing image). Create any image you would like, or to make it simpler save my image and open it up.

(I know it looks stupid im going simple so you can understand)

Now create another picture. The picture you want last created picture to switch with, or use mine.

Open the first picture we created.

Now select window>animation.

This should pop up...

Layer Setup

We now need to work the layers....
Double press the lock to unlock the layer and press "ok".

Now "Right Click" the layer and duplicate it. Hide the bottom layer by pressing the eye.

Go to File>place and select the 2nd picture. Expand/Resize it to make it fit the frame. "Right Click" and select paste. A new layer appeared, now hide it(you should see the first picture).

Frame Setup

Go to the frame window or the animation window we opened earlier and make the display time .5 seconds.

Make sure the "Dropdown" below it is set to forever and not once.
Now select the frame and press the "Duplicate Frame" button.

Select the second frame and go back to the layers menu and make the middle layer hidden and the top one visible(you should see the 2nd picture).

Finalization

Now go to File>Save for Web and Devices. A window will appear press the play button to make sure your animation is player properly.

If its not playing fast or slow enough press cancel and go back and adjust the frame speed that we set to .5 to .2. Go back to File>Save for Web and Devices and press save. Name it and your done.

Related Tutorials

• How To: Create Advanced GIFs With Video(Photoshop+Imageready)Comming soon...
• http://www.hiveworkshop.com/forums/...awing-flames-in-the-gimp-or-photoshop-133264/
• http://www.hiveworkshop.com/forums/2d-art-tutorials-281/create-a-basic-signature-on-photoshop-89047/
• http://www.hiveworkshop.com/forums/2d-art-tutorials-281/basic-photoshop-tutorial-37027/

Notice:GIF files are the only animations files using frames and such. GIF files also are terrible for using transparent backgrounds and will cause your picture/animation to have a white fuzzy background. So don't use transparent backgrounds for GIF animations if you want high quality work.

This tutorial is under construction and awaiting heavy scrutiny and criticism to become its potential.

 

[dab]

Works fine, and this is new knowledge to me, so ill vote for approval. You might wanna make a table of contents, and then make [GOTO] tags, since i got abit confused when you just like "PUF" started(Mostly of all it was the images which i felt was abit confusing(as you've choosen something that says "BOOM! IM HERE!" in my head). Second, why cant i click on your images? Reall fustrating, as i would like to could zoom with my vector zoomer. Oh well, overall a good tutorial, and i'd vote for approval

 

[Zeron]

IDK how to do that but thanks ill try to work on it. I want to make it very good an not just approvable but as if a directors cut you know like with maps... I want to make it really high quality that crams info... so the more advanced one will be even better. I was the first to make the "Play WC3 in a Window TUT" but i think i didn't word things proper or something and they took it down and ralle did one... kinda made me mad cuz i didn't even know i did something wrong. but thanks for criticism I'll work on it!

 

[Zeron]

*bump---pyritie criticism?

 

[dab]

He's in thailand i think

 

[Zeron]

well is there anyone else to approve it? and hasn't he been there awhile now? when is homecoming lol

 

[Dreadnought[dA]]

How many people have a legal copy of Photoshop?

 

[Zeron]

um im one,,, lol but i will say UTorrent is awesome.

 

[manstie]

Zeron, you wouldn't want to say that you are using a torrent downloader for unauthorized sharing of illegal copies of files.
You don't just TELL THE WORLD that you are a thief. Right?
Torrent downloaders are for people who have bad internet and have to pause downloads for games that supply torrents for the game.

 

[Zeron]

Torrent downloaders are for people who have bad internet and have to pause downloads for games that supply torrents for the game.

... ok so u saying i have bad internet, slow internet. okay.
And every one has searched either torrent or lime wire or used it in there life or some exquisition there of like frost wire and bear share. those are torrent files aswell, also i didnt anounmce to the world i am a thief i simply said that i love utorrent... what if i actauly bought my own copy of photoshop and i am expressing my feelings towards a program.... anyways this is not the spot to post and acusation....

 

[breebree123]

nice tutorial, i will try it

 

[Elfsilver Lord]

The tutorial is waaaay to simplistic. An animated gif is not a flashing banner. That is not animation, that is a three-year old playing with illegal copies of PhotoShop. If you were serious, you'd buy the program, not bitTorrent it, then make a tutorial that is worth reading.

 

[dab]

Now, first of all, your only posting that comment because you SUSPECT he has a illegal copy of photoshop, and i don't see any real criticism in there, except you just think your possibly better than him for owning a real copy. And by the way, then this photoshop illegal or in-illegal thing is OFF-topic. I would like you not to mention it in this thread as i don't believe its nice to be accused for illegal actions.

 

[Zeron]

yes elfsilver this tutorial ight be to simplistic to you. Also it might not be animation it just shows peopole how to make an animated GIF. It shows the idea and concept so the can make them on there own. The only thing they have to do is add more frames. So why dont you actualy criticize how i can make it better then accuse me of havving an illegal copy of photoshop.

*edit- and i do believe the name of my thread is "How To: Create Simple Animated GIFs(Photoshop)" ... speaks for its self. Also in the tutorial in i said i am working on a more complex one.

 

[Pyritie]

I'm kinda confused... why do we need a "how to make crappy flashing gifs" tutorial on a WC3 modding forum? D:

 

[Ghost4942]

You can make flashing and/or animated gifs on the Loading Screen. .

 

[Zeron]

well i thought it would be helpful to peopole who wanted to make there own avatar or signature. If you dont want to approve okay we dont need it just thought i would put it in here.

 

[dab]

You can make flashing and/or animated gifs on the Loading Screen. .

Good try mate, but thats inside the model file.