This was one of the top 20 blog posts on The Creative Edge from 2013! Don’t miss out on the rest.
Many of us are familiar with GIFs — we see them all over the web in forms of viral cat clips or those obnoxious flashing banner ads on the side of our screens. And in 99designs’ contests, their most common form is that of an animated banner ad.
A GIF, or “Graphics Interchange Format”, is a compressed image file format. They have wide support and portability, and the ability to compress files effectively and be easily transmitted across different internet platforms. However with this they tend lack the color range of high quality photos because their palette is limited to around 256 colors.
The primary purpose of the GIF file is to create a simple, compressed file, with the illusion of a video animation without needing the viewer to press the “play” button, or deal with a huge video file that takes longer to load. In this tutorial, we are going to show you how to make a GIF in Flash and Photoshop CS5.
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.
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. ;)
Have any questions or tips about creating GIFs?
Master the “grunge” look with this step-by-step Photoshop tutorial
Adobe tutorial tips in tweets: April, 2012
Create your own pattern swatch: an easy 5-step Illustrator tutorial
Adobe Illustrator tutorial: clipping mask and compound path