CREAT A GIF IN PHOTOSHOP

Create a GIF in Photoshop

There’s a lot of things you can do with a GIF in Photoshop, however I’m going to keep this simple and animate some text in a banner ad.

1) Getting Your Files in Order

First, open a New document — I set mine to a common banner ad size: 300 by 250 pixels
Note: Before I opened Photoshop, I prepared a couple of JPG files that will compose the separate frames of the GIF. I made sure they were the same dimensions and put them into a folder together.

Now we can go to File > Scripts > Load Files into Stack. When the “Load Layers” window pops up, click Browse to select & open your image files, and then click OK. This should import the files you selected as individual layers in your document. Rearrange the layers into the correct order, if necessary.

2) Open the Animation window

Now go to Windows > Animation (or Window > Timeline if you have CS6).

3) Make your layers into Animation frames

Making sure all your layers are selected, click on the tab in the top right corner of the animation window, and select “Make Frames from Layers.” Now all your frames will appear in the Animation window.

4) Edit the duration of your frames

Go back to the button in the top right corner of the Animation window and from the drop-down menu click, “Select All Frames”.
Now that all your frames are selected you can edit them with consistency. On each frame is a “0 sec”, click on any one of those black arrows and select any length of time on the list or click “Other” to customize your own preferred time lag. For this one, I’m going to set all the frames at 0.5 seconds except for the last one, which I’m going to set at 2 seconds.

5) Decide how many times you want the animation to loop

In the bottom right corner of the Animation Window, click on the “Select Looping Options” button. A drop down menu will appear and let you decide how many times you want to loop your animation. “3 times” is reasonable for typical banner ads. “Forever”… you should probably think more carefully about that; you’re trying to attract a target audience, not torture them with an infinite loop of redundant information. Since this is a tutorial, I’m setting my banner ad time to “Forever”.
After the animation loops 3 times, it will stop on the last frame in the Animation window, remain there and be a static image. Make sure the stationary image is the one you want you audience to see after the animation is done; here I want the audience to see the first frame so I selected Frame 1 and clicked the “Duplicates Selected Frames” button in the Animation window. Now, drag the new frame you’ve just created and make it the last frame in the sequence.

6) Save!

Once you’re happy with the frame order, timing and loop repetition, you need to click File > Save For Web & Devices. Set the file format to .gif and save!

When it’s posted on the web, the animation will play. If you want to see it in action, drag the file into a browser window and revel your masterpiece.

This is a GIF at its most basic but learning simple skills can eventually lead to more advanced work later! Now, onto making a gif from Adobe Flash.

Create an animated GIF in Flash

Adobe Flash, as well as Photoshop, allows you to make animated GIFs — both programs have their pros and cons. Some recent trends indicate that Flash is becoming obsolete, but a lot of customers on 99designs still prefer to buy animated Flash banners. That can be problematic because our site doesn’t support Flash (except in the handover phase) — as a result designers need to upload GIF files to contests. In this section, I’m going to explain how to Export a Flash file as a .gif file so you can upload it to our contests.

1) Get your files together

Open Adobe Flash >  File > New
Then click on Templates > Advertising > 300×250 Medium Rectangle > OK

Flash has a Pen tool just like Illustrator, so you have the ability to draw characters in Flash and animate them, however for the purposes of this tutorial, we’re going to import an existing PNG file and animate it. We are going to work with 2 elements: the background and the fish.
For both files select: File > Import > Import to Library > Open

Both files will pop up in the Library Window; here my PNG file was converted to a symbol (which is the one you’ll want to drag into the canvas).
Now that you have the files you want to work with, drag both from the Library window into your canvas and adjust the size and placement as needed — make sure you arrange them on separate layers.

2) Create your animation

Now decide how long you want your animation sequence to be. We’ve decided on 5 seconds of animation, or 120 frames.
Make sure the background layer is visible for the entire animation by selecting it, then right clicking on the 120 mark in the timeline and selecting “Insert Frame” from the drop-down menu.
Now, select the element  you want to animate (the fish), go to the Timeline, right click on a frame at a later point in the timeline, and select “Insert Keyframe” from the resulting drop-down menu.

Drag your element to wherever you want it to go next.

Right click on any frame in between the the two stages, and select “Create Classic Tween” from the resulting drop-down menu. Play the resulting animation and you will see Mr. Goldfish move smoothly from the starting point to his new position.

Fish die if they stop moving so we’re going  to make him float up and down a couple more times to make the animation. We’ll repeat what we just did 2 more times every 30 frames: Right click > Insert Keyframe > Right click > Create Classic Tween.
If you want to adjust the timing of the stages in your animation, just drag around the black dots at the edges of the keyframes (a small white square will appear when you’ve successfully selected one).
Press Enter, or click the “Play” symbol to play your animation.

4) Test and edit your animation

Click the Control tab > Test Movie > Test and watch your cinematic masterpiece play in a pop-up window!

5) Export it into GIF format

File > Publish Settings > Click the GIF checkbox > Change palette type to “Adaptive” > Max Colors “99999″ > Publish

If you simply exported your GIF without adjusting the “Publish Settings” you will end up with an extremely grainy, pixelated GIF. Doing this won’t make your GIF super high in terms of resolution but it will improve it a lot. It won’t be perfect, but it will be perfectly suitable for submitting to a GIF banner ad contest for purely presentation purposes. If you win, you can upload the actual Flash file to the handover page.
When you access your file on your computer, it will look something like this:

But when it’s live online, it’ll move like this:

Remember: 99designs’ site doesn’t support Flash, so submit your entries as GIFs instead.
Flash is a good program when it comes to animating vector shapes, but when it comes to photos and other types of images it doesn’t support them quite as well. The GIF format itself only supports 256 colors, therefore you’re guaranteed to lose color and resolution whenever you make a GIF.
However with the great power to create GIFs, you have an even greater responsibility to use it wisely, and not for making neon-flashing, seizure-inducing eyesores. If you can make GIFs at their most basic level, you’re already on your way to more advanced stuff, like making GIFs from viral videos, or even creating cinemagraphs! The sky will never be the limit for you now because you have the power to literally create a sky and animate it. ;)