Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Of course with Illustrator you don't even need to go and use the Flash application in order to create a SWF file. You can actually save a SWF file directly out of Illustrator and publish it directly to the web. One way to do that is to use a feature called Save for Web & Devices. Now I know we have already used this to create GIF, JPG or PNG files out of Illustrator, but as we will soon see, you can also use it to create Flash files. I will go over to the File menu and I will choose Save for Web & Devices. In the resized window, just a little bit here to make it appear much nicer. Now I can see the banners directly on my screen.
Now I am using the 2-Up version right here, so I am comparing the original banner with what I would like to see when it gets exported. So I come over here where I can choose different file formats and rather than GIF, JPG, or PNG, I will scroll down lower to where it says SWF. Now I will see a preview of what that looks like when it gets rendered as a SWF file. I also have several important settings that I can choose from here in this dialog box. First of all I can choose what version of Flash Player I want my graphic to be compatible with? Now Adobe publishes different versions of the Flash Player every once in a while. For example, currently the latest version is Flash Player 10. The newer the version of the Flash Player, the more capabilities it has. For example it might have better performance or the ability to playback video, so on and so forth. But it also means that a fewer people out on the Internet actually have that plug-in installed. So what you are always looking for is a happy median, a version of Flash Player that's compatible that most people have installed. I find that many people choose the Flash Player 8 version.
You can also choose to have your entire Illustrator file converted to one static SWF file, or you can choose to convert your Illustrator layers to Flash frames. We will explore that option in another video when we talk about animation out of Illustrator. For now I will just choose Illustrator file to SWF file. I can choose to compress the file to make a little bit smaller. I can choose to protect it, this way other people now will take that SWF file and open it up inside of Flash to make changes to it. I also can convert any text in that particular file to outlines to ensure that my text appears correctly.
Finally there are two options down here on the bottom. I can either choose to preserve Appearance or preserve Editability, and this is here because there are several constructs or things that you can create inside of Illustrator that may not translate perfectly into the world of Flash. So I could either have Illustrator preserve the editability, meaning I can make changes to it if I open up that file inside of Flash or since this is going right upon to the web, I might choose the Appearance option. In fact, take a close look at the text that appears right here in this button. Right now the text looks really nice.
When I choose Editability, notice the text does not look that great at all. In this particular case here by choosing Appearance, it does look nicer, but that also means that this text will not be exported as live text, but rather will be converted to outlines to preserve its appearance. If I really want to see what this file looks like when it gets displayed inside of a web browser, I will come down here say for web dialog box and I will choose to Preview in Browser. In this way I see exactly what it's going to look like when rendered in a browser. Plus I also have access to the actual HTML content that I can copy and paste right into my webpage.
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.