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!
16 comments:
What about things like accordion menus etc. (anything that changes the look/size of the design: visually dynamic elements). We can use design elements inside DIVs which can slide up/down/expand etc: check Core 77 http://www.core77.com for a good example with the sliding tab menu. What I'm talking about is AJAX I guess, but my point being—how does Fireworks respond to these elements of the design? My problem with web design—using any of the design software that I have come across—is that it's somewhat impossible to get the feel of what you are doing in the design stage until you have actually coded. The way a dynamic element functions in the live site has implications on the design choices that need to be made in the design stage, but we are stuck using essentially static software tools to somehow make decisions about elements that will be interactive and dynamic. Never mind trying to explain the design choice an accordion menu (etc.) to a client with a jpeg/PDF.
Mordy,
I just upgraded to CS3 Design Premium really in order to get PS-Extended but it came with Dw and Fl as well as an application I knew little about - Fireworks. I learned about using Fw very quickly from the Lynda training site and I love it, especially for some quick Flash type motion graphics.
I love that it can do some things that Illustrator cannot and also PS (but it is nice to be able to use PS plug-ins with it too). I had hoped Xtream path might work with it and have suggested to Valley that it would be a nice addition to Fw. I also note that many of Fw's plug-ins are in fact Illustrator plug-ins so transition or use of other Illustrator plug-ins might be feasible.
I also made suggestions elsewhere that Adobe should come out with a Fireworks Elements version like PS-Elements and give non-designers some simple Vector, Pixel and Motion capabilities.
If you want to cover some Fw tutorials here I am all for it.
Cheers,
Gary.
Mordy,
I just reread your text here. I do not understand when you say you cannot edit an Fw generated file in Illustrator. If I save out as an ai file and open an object in Illustrator (CS3)I can select the anchors, apply a new color, apply 3D extrude and bevel etc., etc.
Please elaborate on what you mean here.
Also there is a great 3D rotate plug-in on the Adobe Exchange that works well in Fw. Just so folks know. Great if that would also work in Illustrator. It works in a much more versatile way than the rotate tools in Illustrator- more like a Transform/Perspective/Rotate/3D tool.
I think there are a lot of uses for Fw and great integration of all three apps-PS, Ill. and Fw.
nous - what you describe is the biggest "hump" that designers need to get over when truly understanding the capabilities of what has become known as Web 2.0 functionality. A designer doesn't design art as much as he or she defines rules for how the design should look under various conditions, considering that the content itself will change.
That being said, Fireworks CS4 does have a library of HTML elements which you can drag right into your design. They look just like buttons, list boxes, text fields, etc -- yet upon export, they become working HTML elements.
Sadly, AJAX functionality, including items like accordion elements, are not there yet. But I was thrilled to see that Flex components were. Your request is a good one -- it's obvious that Fireworks is moving more and more in the direction of fulfilling your request, but it's just not there yet. Sounds like great feedback to send to the Fireworks team at Adobe.
Gary - I edited my post to be more clear. I had meant to say that the object is no longer editable as a LIVE object (meaning you can't just drag to update the parameters like you can in FW). Thanks for pointing that out. Thanks for the tip about the plugin :)
Just a quick note to express my deep happiness in reading this amazing post. When we met last year I knew that it was going to be strange for the new kid in town (Fire) to get to the heart of Mr. Illustrator.
And now, seems like it happened. Welcome to the club! We love Fire (as much as now I love Illustrator!). Can't think going out without them for a job.
What a difference a year makes... and a version release, of course. This one rocks!
About the PDF export: It's very cool. It would be even cooler if the pdf was set to open at 100% instead of 'fit to window'. Apart from that little glitch I'm also trying to learn FW and I think it might be just what I need. Thanks for the insights.
nice blog.
I am having color issues when moving wireframes and mock ups done in illustrator CS3 to Fireworks CS3. I am not sure why but the same hex colors/rgb colors are different when I try to open the illustrator file or paste items into fireworks. The colors are a bit closer when I turn on the windows gamma preview in fireworks, but they are still quite different. I really like using both illustrator and fireworks, but this is definitely annoying.
I mainly use illustrator because my wireframes start out with lots of text callouts describing user functionality in a very static print centric manner, then I export as multipage pdfs from illustrator using a 3rd party plugin. But eventually you want to move all that work to fireworks to finish the production. I think with FW CS4 I may be finally be ready to start all my wireframe development directly in fireworks.
I just bought CS4 and am already having issues. I bought it specifically for Fireworks' "Import from Illustrator" feature. But every time I try to either import or open an Illustrator file in Fireworks, I get an error message saying that the operation couldn't be completed because of an error.
Anyone else with this problem or any ideas how to resolve it?
You're doing better than me, Reggie. If I try to import or open anything more complicated than a simple rectangle from Illustrator into Fireworks, I get a crash. At least you get an error. SIGH. I want to like FW, I really do, but things like this don't make it easy for me to use it. At the moment, I am still doing all my web design work out of AI.
Can anyone tell me if Illustrator has an "export area tool" like fireworks does? I have started using Illustrator because it has better type treatment, it's a strange program though (coming from fireworks that is).
I have my design now, but I need the separate image parts so that I can then build this with CSS and XHTML etc. In Fireworks I typically use the export area tool to slice up my design...what about Illustrator??
Thanks.
i love fireworks a lot. like, A LOT. especially the ability to edit whatever whenever. lately, however, i have been forced to use Ai at school because i don't have access to Fw, and, honestly, i can't get anything done.
you've written a lot about the pros of Fw, but you still like Ai. could you explain what is so good about Ai and why so many people, like you, use it?
Hey Mordy,
I just bought CS4 and I'm something of a newb. Anyway, I've created a vector graphic in AI and want to use it in FW. Sure I can export for Web as a .PNG or .GIF and then open in FW but is there a direct way? Isn't that what Bridge is all about? Is there a way for me to browse in Bridge from FW find and AI file and Open it in my already open FW file?
Thanks for any help. This one has me stumped.
Dale
No need for Bridge, Dale. Just save your .ai file and in FW, choose File > Import and select your AI file.
I'm having the same problems importing an AI file into Fireworks. The error simply says "Could not import the file. An internal error occurred." Are there specific things to choose on the Vector File Options dialog to make it work?
I know that there was a recent update patch to Fireworks CS4 that helped in the area of importing art from Illustrator. Other than that, it should just work. Maybe try with a simple piece of art and see if that imports without error?
I installed the updates to Fireworks, then tried the import again; same error. I then tried to create a simple AI file and was able to import that successfully. The only other thing I can think of is that the AI file was created by somebody else and it contains fonts that are not only my system. Could that be the problem?
Post a Comment