Thursday, May 26, 2016


Crte a GIF in There’s a lot of things you can do with a GIF in , however I’m going to keep this simple and animate some text in a banner ad.
1) Getting Your Files in OrderFirst, open a New document — I set mine to a common banner ad size: 300 by 250 pixels
Note: Before I opened , 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 files, and then click OK. This should import the files you selected as individual layers in your document. Rrrange the layers into the correct order, if necessary.

2) Open the Animation windowNow go to > Animation (or Window > Timeline if you have CS6).
3) Make your layers into Animation framesMaking 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 appr in the Animation window.

4) Edit the duration of your framesGo 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 ch 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 loopIn the bottom right corner of the Animation Window, click on the “Select Looping Options” button. A drop down menu will appr and let you decide how many times you want to loop your animation. “3 times” is rsonable 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 . Make sure the stationary 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 “Duplies Selected Frames” button in the Animation window. Now, drag the new frame you’ve just crted 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 lrning simple skills can eventually ld to more advanced work later! Now, onto making a gif from Flash.

Crte an animated GIF in Flash Flash, as well as , allows you to make animated GIFs — both programs have their pros and cons. Some recent trends indie 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 togetherOpen 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) Crte your animationNow 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 frame” 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 “Crte 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 rept what we just did 2 more times every 30 frames: Right click > Insert frame > Right click > Crte 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 frames (a small white square will appr when you’ve successfully selected one).
Press Enter, or click the “Play” symbol to play your animation.
4) Test and edit your animationClick the Control tab > Test > Test and watch your cinematic masterpiece play in a pop-up window!
5) Export it into GIF formatFile > 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 instd.
Flash is a good program when it comes to animating vector shapes, but when it comes to photos and other types of s 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 grt power to crte GIFs, you have an even grter 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 alrdy on your way to more advanced stuff, likemaking GIFs from viral s, or even crting cinemagraphs! The sky will never be the limit for you now because you have the power to literally crte a sky and animate it. ;)

No comments:

Post a Comment