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.
When it comes to web design, there are many designers who like to use a program called Fireworks. In fact, Fireworks is a great application that's dedicated specifically to creating web graphics. If you want to find more information about Fireworks, then you should definitely check out Fireworks CS5 Essential Training by Jim Babbage, here in the lynda.com Online Training Library. But whether you use Illustrator or Fireworks, there could be plenty of times when you want to take some artwork that was created inside of Illustrator and use it inside of Fireworks.
So, in this movie, I want to speak specifically on how to do that, how to find some best practices and ways to take artwork that already exist inside of Illustrator, and move that into Fireworks. Now, of course, there could be a variety of different reasons for why you're trying to do that. You may be using Fireworks, and you may have gotten a file from somebody else that was already designed inside of Illustrator, or maybe you're using Illustrator for some design work, and you want to take advantage of some of the specific features that Fireworks has. Well, one of the great things about CS5 is that Adobe has really made integration between these applications a whole lot better than what it used to be before.
You can notice that right now I have Illustrator opened, and I'm looking at this file. It's called monthly_specials. And I want to bring this artwork in to Fireworks. Now, one thing that I can do is I can actually copy and paste some information. We'll do that shortly, but for now, I want to show you probably the most efficient and probably preferred method of doing this, which is to simply open up an Illustrator file directly inside of Fireworks. So, I'm going to switch over to Fireworks, and I'm going to go to the File menu and choose Open. I'm going to open up a regular Illustrator file. I'm going to choose monthly_ specials.ai, and choose Open.
I get this dialog box called Vector File Options. We can choose to scale, but I really want to keep it the same size that I designed this inside of Illustrator, and in fact, my artboard was set to 300 pixels x 250 pixels, which was picked up here by Fireworks. I'm also setting my document to be a resolution of 72 pixels per inch, and I can choose whether or not I want to anti-alias paths and text, which is always a nice thing. One thing to note, which I think is interesting about what's going on between Illustrator and Fireworks, is that we've already spoken about Illustrator that you have the ability to have different anti-aliasing settings for text.
Well, it happens to be that when you're working inside of Fireworks, we also have a variety of different ways to anti -alias our text, using something called Smooth, Strong, Crisp, and then something called System. Now, Illustrator has a few different names for this. Illustrator does have Crisp and Strong, but instead of Smooth, Illustrator refers to that as Sharp. However, I found that the anti- aliasing methods are not really perfectly in sync, meaning that just because I set certain settings inside of Illustrator doesn't mean that those anti-aliasing settings actually make it through into Fireworks.
They don't translate perfectly. So really, what happens here is that Fireworks takes over the anti-aliasing. It looks at all your artwork, and it anti-aliases it as best as it can. Now, if I look towards the bottom part of this dialog box here, if I do have several artboards inside of Illustrator, I can choose which of those artboards to open up here inside of Fireworks. I can also choose whether or not I want layers inside of my file, or I can even have the option to convert layers to states. For now, I'm actually going to choose to remember the layers that I created inside of Illustrator.
I can even choose to include invisible layers as well. Finally, I come down to the bottom over here to an area called Render as images. Many times inside of Illustrator, you create some artwork that's made up of many, many different vector objects. When you're bring them into Fireworks, it may not look that great, or more importantly, it may just be difficult to work with all those different objects. So, you have the ability to say, well, any group that has over a certain number of objects, for example, you can type in maybe 100 objects, then that group instantly becomes rasterized whenever it gets brought into Fireworks.
However, I like to do that on my own on an individual basis. So, what I'm going to do is I'm actually going to leave these boxes all unchecked. This way now when I click OK, Fireworks does its best conversion and brings in your artwork. Now, here are some of the nice things. Notice the artwork came in nice and clean in these cases here. The text came in, and the text is also editable. So, if I double-click here, you can see that I can actually select this text. All the styling that I actually created inside of Illustrator has now been preserved as well. In fact, both Fireworks and Illustrator now share the same underlying text engine.
However, you'll note that this tag didn't really come in so cleanly. First of all, there is some text missing here. If I go back to Illustrator, you can see that the words "Find Your Tour" is here. If I use my Direct Selection tool, this is just regular text over here, it's little bit on an angle, but for some reason, Fireworks did not bring that in. Additionally, this graphic has a soft drop shadow applied to it. It's actually just a whole bunch of grouped objects that have a drop shadow. You can see that if I switch to my regular Selection tool and select the entire group, there is a drop shadow here in the Appearance panel.
But when this comes into Fireworks, this actually turns into a mask. Now, Fireworks does have a nice soft drop shadow feature. So, it'd be a little bit better, if I knew that I wanted to apply a drop shadow, to actually apply that filter directly here inside of Fireworks. So, what I want to do is I'm just going to touch up a few things here. Once I've imported my artwork, I'm going to switch over here to my Selection tool. I'm going to take this tag, and actually just delete it. Now I'll go back into Illustrator, and I'll take this group, and I'll just take the drop shadow and throw that into the garbage. So now, all I have is a tag with the text here.
I can copy this, switch over to Fireworks, and paste. Notice that now when I paste it, it's in much better shape. The text comes in really nice, and the object itself does not have a shadow on it, but if I come down here to where it says Filters, I can choose to add a drop shadow, which looks a lot nicer now here inside of Fireworks. Now, there may be times when you specifically want to bring just one piece of art, maybe a logo or some other art treatment that you have inside of Illustrator, and bring that into a composition that you've already started working on inside of Fireworks.
Well, you can do the same method, by just going to the File menu here, choosing Import, and then choosing a native Illustrator file. That also can be brought directly inside of Fireworks, with the same results that we've been doing until now. So, if you have some artwork that you have already created inside of Illustrator, and you need to use Fireworks for some web-based tasks, you can easily bring your artwork from Illustrator directly into Fireworks.
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.