Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
In Chapter 07, we learned how to create an animated SWF banner right out of Illustrator. However, there may be times when you need to create an animated banner but using the GIF file format. One of the nice things about the GIF file format is that it supports animation. The way that you define the animation is you create separate frames for the GIF, and then the GIF just plays them in succession. Unfortunately, Illustrator does not have the ability to export an animated GIF file. It can only export static GIF files. However, we also know that we can easily move information from Illustrator into Photoshop, while retaining our structure, things like layers, for example, and Photoshop does have the ability to export an animated GIF file.
So if you need to take some artwork from Illustrator and turn it into an animated GIF, here is a great way to do that. I have this document here created inside of Illustrator. It's called animated_banner, and I already have some layers created. Each of the layers defines different parts of the animation for that banner. I now need to create an animated GIF. So what I'm going to start off doing is going to the File menu here, choosing Export, and I am going to export this as a PSD. So I am going to choose here Photoshop (psd), and we'll call it animated_banner.psd, and I will check the Use Artboards option because I want to make sure that it crops perfectly to the size here of 468 x 60, and then I'll choose to export this file.
I want to make sure that Write Layers is turned on, and I am going to set it to 72 pixels per inch and click OK. Great! Now let's move over to Photoshop. Let's choose File > Open, and I will open up my animated_banner file that I just created. Notice over here in my Layers panel that all three layers here exist. I am actually going to turn on just the bottom layer over here, Backpack Cali, and from the Window menu, I am going to choose to open up my Animation panel here inside of Photoshop. Now at the bottom of the Animation panel, I am going to click on this button here to create a second frame.
I'll now turn off the Backpack Cali layer, and turn on the California Calm layer. I'll add an additional frame here as well, and turn on the Desert to Sea layer. So now I've created three different frames with my Animation panel: the first frame, the second frame, and the third frame. There is a setting over here called Forever. That means that this is going to loop forever; although if I wanted to, I can have it maybe display three times and then stop, but I am going to let it set right now at the Forever setting, and you'll see at the bottom of every frame it says 0 seconds.
That's the timing, or duration, for each of the frames. Now I wanted to pull as after each of these for a little bit, maybe about 2 seconds each. So I am going to click on this little arrow here, and specify that it should pause for two seconds after each of these frames. Great! Let's see how this works. I am now going to go over here to the File menu. I am going to choose Save for Web & Devices; the same feature that you have inside of Illustrator is also available here inside of Photoshop. I am going to choose GIF as my file format, and then let's go ahead and preview this in our web browser.
I'll click on Preview in Browser, and now I can see how that GIF animation actually plays back inside of a web browser. So let's go back to Photoshop here. So we can see how easy it was to take some artwork that started out inside of Illustrator, export it as a PSD, and then bring it in and build the GIF animation right here out of Photoshop. Of course, I could also go back and forth between Illustrator and Photoshop by bringing Smart Objects here instead of kind of exporting one PSD file, but in this case here, it was much easier to just get one PSD and get it done.
If you need to, however, you can always go back to Illustrator, copy and paste the information to set your Smart Objects, and use the same method here with the Animation panel to create your GIF animation.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.