Making Illustrator and Fireworks Fit

Me love Illustrator long time. I use it for many many things, including web design. I even have an entire video training title dedicated to creating pixel-based graphics with Illustrator.

At the same time, I have always been aware of another application called Fireworks, which admittedly, I've ignored somewhat. Ok, so that isn't really fair. When it was originally released, Fireworks was touted as a crossover application -- it was like one of those vanilla and chocolate swirl soft ice cream cones (yum) -- handling both vector- and pixel-based graphics. Back then, I can't say that I was doing enough web design to care, especially considering that back then, it was also easy enough to use Photoshop and ImageReady (remember that sweet app?) to handle my needs. Fireworks also lacked a sophisticated user interface or advanced text features. I also had trouble adjusting to the drawing tools, again, coming from an Illustrator perspective.



When Adobe and Macromedia merged and Creative Suite 3 was released, there was no FreeHand, but there was a Fireworks and there was an Illustrator. I took another look at Fireworks, considering that I was now doing much more web work. There was some cool stuff to find in Fireworks, but the barriers were still there.

A few months back, Adobe released public betas of some of the CS4 products -- and Fireworks CS4 was included in that. Since then, I've played a lot with Fireworks. Now, with the rest of the CS4 apps on the horizon, I thought it might be a good time to take a closer look at what Fireworks has to offer.

For the first time since I've looked at Fireworks, I can say that I now "get it". I grok FW. Especially when you consider not only the kind of work I do on a daily basis that involves web graphics, but when you also consider that it isn't just about graphics anymore. Web 2.0 standards have given reason for designers to think carefully about how they create content. And it isn't just web stuff either. Designers also work on user experiences and other interactive elements.

First, let's take a look at some of the stuff that Adobe packed into Fireworks CS4:

- A new user interface. If you haven't already seen it, you should take a look at the new user interface in Fireworks CS4. Why? Because it's the new user interface that Adobe has integrated across all CS4 applications. With this new interface, I now feel comfortable in Fireworks. Yeah, it's a small thing, but sometimes these small things mean a lot.

- The Adobe Text Engine. Illustrator, Photoshop, and After Effects all share the same underlying text engine code. Now, Fireworks joins the party, making it possible to move text easily between these Adobe apps.

- PDF Export. It's now easy to create a PDF of your design to send off to a client for review. Sending JPEG files were always a pain, especially for multiple-page designs. Uploading content to a server meant clients couldn't access or review content off-line (or required logins, etc).

These items have certainly removed the barrier -- I can now find my way around Fireworks and using it isn't the frustrating experience it once was. But I'll admit that I was still wondering why I would want to do all my work in Fireworks when I was able to accomplish just about the same stuff in my far more comfortable environment of Illustrator. After all, I could crank stuff out MUCH faster from AI than I ever could in FW. The lightbulb went on when I began to understand the significance of some of the other features that are new in Fireworks CS4:

- CSS and Images Export. As I understand more and more about how the web works, and what Web 2.0 really means, I have come to understand the importance of CSS. One of the key concepts of CSS is being able to understand that content and structure are two very different things (traditional designers always combine the two). To contrast, when you draw a rectangle in Illustrator, you get an image on export. Draw that same rectangle in Fireworks and on export, you get a "div". Even more amazing, Fireworks can even write CSS for auto-expanding elements that stretch to fit content. With Illustrator, I'd design something, slice it into bits and then try my hand at coding it in Dreamweaver. In FW, it just happens. This is SIGNIFICANT. One could argue that Illustrator should have such functionality built in. I for one would love to see it. But at the same time, Fireworks CS4 has it, and I LOVE it. Now I can design stuff and have the code written for me. Isn't that the way it was always supposed to be?

- AIR Authoring. OK, I can hear you all snickering now. Mordy has gone off the deep end. AIR authoring is for developers, not designers. Why would a designer even THINK about writing an AIR application? And the answer is, never. For the same reason as I stated above. Because Fireworks just does it for you. It's literally a mouse click. And so you ask why you'd ever want to create an AIR app. And the answer is that Fireworks has the ability to build interaction into a design. I'm not talking about Flash animation stuff -- I'm talking about building a prototype. Maybe it's a 4 page website. You want your client to see a design mockup and you want it to WORK so that when they click on the buttons, the pages turn, etc. You want rollovers to work. Well, Fireworks was always able to do that. And now, when you need to show the client a comp, you create an AIR app and send it to them. AIR apps run right on the desktop. No need for a browser. No need for an internet connection. Mac, Windows, it's all good. And the comp WORKS. Again, it would be totally awesome if Illustrator could do something like that. But it can't even come close. And FW not only does it, it does it really well.

OK, so after all this, I'll admit I was still not totally sold on Fireworks. After all, I need to repurpose my art all the time. When you're in Illustrator, you can go to the web, to print, to video, and practically to ANY app with no barriers. Fireworks is a one-trick pony -- it's great for designing something specifically for the web, but what do I do if I need to move something into InDesign? Besides, I'm too reliant upon Illustrator.

Well, two things have since caught my eye.

1. Fireworks now does a really awesome job on importing art from Illustrator. In fact, you can use Fireworks CS4 to open native Illustrator files directly. Layers are maintained, text is completely compatible. It's awesome. Basically, I can create my initial designs in Illustrator and bring them right into Fireworks when I'm ready to take it to the next step. So my initial problem of not being comfortable with the drawing environment is a non-issue. I can create art in AI and bring it into FW as needed.

2. Speaking of the drawing environment, Fireworks DOES have some really sweet drawing tools, which are LIVE editing tools. Unlike Illustrator, where once you let go of an object, it becomes a static path, objects created in Fireworks are editable. For example, you can click and drag on a star to change the number of points. You can draw arrows and adjust them as needed, at any time. What a concept. WHY Illustrator can't do this is beyond comprehension, but I have found inner peace. Fireworks has a command in the Edit menu called Copy as Vectors. And wouldn't you know, you can move content from FW right into AI. Of course, the object isn't live once it gets to AI, but it's just as easy to readjust in FW and repaste it into AI again. Go figure -- now I'm using FW to create art that I'm using in Illustrator!

At the end of the day, even beyond the anti-aliasing issues that Illustrator has, I've found reasons to look to Fireworks. Especially when working on designs that require Web 2.0 compatibility. Hopefully, this post will be helpful to those who find that they are at the limits of what Illustrator can do in regard to web and interactive design. If you haven't looked at Fireworks CS4 yet, it's worth heading over to Adobe Labs for a look. At the very least, you'll get some experience with the new CS4 user interface. At the very best, you'll have found a new application in your design tool box.

Got additional comments about Illustrator or Fireworks? Discussion is ALWAYS encouraged!

Facebook Comment

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks