Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
So we know that in Illustrator, in order to create what looks like an animation, we need to have frames and we can basically take our layers and turn those into frames. However, there is yet another way to create frames for an animation and that's using a feature inside of Illustrator called Blends. I actually find that somewhat ironic because blends predate gradients. Back in the day when Illustrator first came out and you wanted to create a gradation of color, say from yellow to blue, you would take a yellow and a blue object and blend them into each other. Now when creating interactive content for the web, we can use that same Blend feature to create an animation. Let's take a look at how that's done. I'm going to take this shape right over here, which is right now a symbol, this surfer dude. I'm going to hold down the Option key or the Alt key on Windows and create a copy and drag it somewhere over here.
So now I have two of these particular symbol instances. I'm going to hold down the Shift key and now I'm going to click to select both of them. So now I have both instances, the one over here and the one over here selected. I'm going to go to the Object menu, I'm going to choose Blend and then I'm going to choose Make. In doing so, Illustrator automatically adds the individual steps that appear between these two shapes. If you're using Flash, you may know of a term called a tween. Basically, these are the steps that appear in between the start and the end point of a blend. In this way, I can easily establish the points that I need in order to create an animation inside of Illustrator.
Now, once I've created by blend, there are a couple of things that I can do with it. For example, I have the ability to go to the Object menu here and I'll choose Blend and I'll choose Blend Options. Now it's important to realize that a Blend itself is made up of three separate objects. I have the start object, the end object and then a line that gets created automatically. That line is what we refer to as the spine of the blend. Basically, Illustrator makes sure that the artwork follows along the path as it creates the blend. Now right over here where it says Spacing, it's set right now to Smooth Color. But I can change that and choose Specified Steps. For example, say I want that to be ten steps of my blend.
Now in the case of working with Illustrator and creating animations, the more steps that I create, the smoother my animation will be. But at the same time it could slow down performance and how that plays back on a computer screen. Since I'm working with symbols here inside of Illustrator, I really don't have to worry about adding to file size but just by adding more steps. I'll go ahead and I'll click OK. Now as you can see, the surfer basically is going to start from this point and then slowly animate towards this side of the banner. But I want to make it look like there is some motion in the waves here. Let's make the surfer kind of bobbing up and down on the waves. So what I can do inside of Illustrator with a blend is rather than using just a straight line, I could actually substitute that straight line for a curve line.
In fact, in this file over here if I open up the Surfer layer, I can see that there is a path here which I've turned off basically. I'm going to turn that on right on and you can see the path that I created right over here. I use my Regular Selection tool to select that path and I'll hold down the Shift key to select the blend. With those two objects selected, I can choose Object > Blend, and then I could choose Replace Spine. In doing so you can see that right now this surfer follows that path that I just used. At this point, we have created a blend but we haven't turned them into layers yet.
But now that you know how to create your blends, you understand the basic functionality of creating animation inside of Illustrator.
There are currently no FAQs about Illustrator CS4 for the Web.
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.