Tuesday January 8, 2008

Enterprise Fire-Flow

by Nathan Smith in Article

21 comments

IT Workflow + Fireworks

Fireworks - Legacy Icon If you mention the term “design,” especially in the context of visual design using a computer, people undoubtedly think of Photoshop, the popular image editing software from Adobe. In our culture, the word Photoshop has become sort of like the word Google. Originally proper nouns, they are now commonly used as slang — “You should google for the answer,” or “This image has been photoshopped.”

Though I use it as a verb, I rarely run Photoshop unless absolutely necessary. You might be wondering how an Information Architect who does design manages to live without. Simply put, Fireworks.

Suspend judgment and disbelief while I explain what I love so much about this unsung graphics application. Also, be aware that the purpose of this article is not to down-play the usefulness of Photoshop, but to accentuate the oft overlooked benefits of its equally capable cousin. It is my assertion that Fireworks makes an excellent choice for designers and developers working in an enterprise environment, helping to streamline work-flow and expedite collaboration.

PNG Pong

If Photoshop is the tool of master photographers, Fireworks is the instrument of web professionals.

One of the immediate benefits of Fireworks is that it saves images natively in the PNG file format (prounounced “ping”), which stands for Portable Network Graphics. It is a lossless compression format, supporting alpha transparency and millions of colors. You might be thinking: “What about layers? Isn’t the PNG format only for flattened files?” Normally that would be the case, but Fireworks automatically retains the layers you create, just like Photoshop.

For whatever reason, this allows for a significantly reduced file size compared to the equivalent Photoshop document. In fact, after doing a few non-scientific tests – saving layered files as both PNG and PSD – it turns out that the Fireworks file is typically 61% smaller. Another key benefit of Fireworks is compatibility, when it comes to sharing your work with others.

Share the Love

As a general rule of thumb, anything that can read JPEG or GIF files will most likely support PNG as well. Unlike the PSD format used by Photoshop, PNG files are readable by a variety of freely available applications, the most important of which are web browsers. Working as an Interface Designer at a Fortune 500 company, I saved my work on a shared network drive.

The user experience team had full access to our own files, whereas all other stakeholders in the company (of which there were many) had read-only rights. This allowed us to go about working in typical fashion. When the time came to get sign-off for our designs, rather than do a batch export of hundreds of PSD files to either JPG or GIF format, we would just email…

Here are the project comps — http://10.10.10.xx/uxd/project/

The approvers could then peruse the interface mockups at their leisure, without us having to do anything extra special to make that possible. Cooler still: being on a conference call, with businesspeople looking at my PNG file in the browser, while I made edits to the design in real-time based on their feedback. I cannot even begin to estimate the amount of time saved.

Former coworker Cody Lindley, now Lead Client-Side Engineer at Fluid, said thusly…

When Adobe acquired Fireworks and enhanced PSD support, they improved workflow for everyone. Fireworks is what ImageReady tried to be. If Photoshop is the tool of master photographers, Fireworks is the instrument of web professionals.

Rapidotype

Another strength of Fireworks has always been rapid prototyping. This is even more true with the latest CS3 version. It now features pages, enabling you to make master templates from which other subsequent layers can descend. These essentially work like canvases do in OmniGraffle. The difference being, as you are creating prototypes in Fireworks, you have the rich graphical capability to be simultaneously designing the final look and feel of your web application.

From there, you can easily export to HTML for a quick and dirty client walk-thru (never do this for production code). Likewise, because of the tight integration with Flash, stemming from the days of Macromedia, you can seamlessly import your PNG design in Flash as a FLA vector interface. Not only that, but Fireworks can directly create functional SWF animations as well.

Industry Grade

When slicing up images for production use in XHTML and CSS layouts, no other program beats Fireworks in terms of compression. As of yet, Photoshop does not feature the algorithm originally patented by Macromedia. These minutia add up when considering the amount of images in large sites. This has implications for page rendering and monetary savings in bandwidth.

Fireworks can also export MXML, the native interface format for the Adobe Flex platform. Flex powers database driven RIA sites. In this regard, Fireworks is to Flex as Expression Blend is to Silverlight. Essentially a visual design tool, Blend generates XAML, Microsoft’s application interface file format for Vista. It can then be used in conjunction with their .NET Framework.

Since Adobe acquired Macromedia, they have worked hard to ensure that each line of products are interoperable with the others. Though Photoshop still cannot recognize layers in PNG documents, Fireworks can read and write in the PSD format. Despite issues with PSD layers and clipping masks, transition is near seamless. In the event of a disagreement amongst designers, peacemakers using Fireworks can mitigate compatibility problems.

Épilogue

If I have accomplished nothing else by writing this article, I hope that you will at least consider Fireworks as an option for improving the way your creative team works. If you own the Web Standard or Web Premium editions of Adobe’s Creative Suite 3, chances are you probably already have Fireworks installed. Do yourself a favor and make time to explore its versatility.

For a jump start on the learning curve, be sure to check out these resources:

Comments on “Enterprise Fire-Flow”

  1. Posted: Tuesday January 8, 2008David Martin said:

    One thing I have always used Fireworks for is batching file saves/conversions, it seems to be much quicker than Photoshop.. When I first entered the web design world Fireworks was my tool of choice. For whatever reason I had strayed from it the past few years, until recently that is. Adobe acquiring Fireworks and committing to improving it has me extremely excited.

  2. Posted: Tuesday January 8, 2008Aaron Alexander said:

    Excellent case for Fireworks. The “Share the Love” section describes one of my favorite “features”. Hopefully, more web designers will walk away from this post with a greater appreciation for it.

  3. Posted: Tuesday January 8, 2008Geof Harries said:

    I too am a happy and loyal user of Fireworks (since version 2, to be precise).

    Fireworks CS3 is open all day on my iMac where I use it for most everything including information architecture, wireframes, image editing and website + application interface design. The ability to export to Flex has been a huge boon to my productivity. While there is still a little bit of code clean-up to do, generally, the Export to Flex feature is a killer feature.

    Given what Adobe already has in Fireworks CS3, the advent of Thermo will make it an even better product for interface/interaction designers. I’m particularly looking forward to the data integration features. Imagine that, real live data to test and tweak your design in. Way too cool.

  4. Posted: Tuesday January 8, 2008Rogie King said:

    I also am a Fireworks only web designer. Until recently, I didn’t know that so many web designers used it and quite honestly, I felt that maybe I had chosen the wrong tool based on the amount of Photoshop users. Coming to learn that so many web professionals do use it makes me realize that it is a tool that can compete with the best of them.

    I am a vector junkie at heart and I love making logos, complete website mocks and art in Fireworks. The fact that illustrator vectors copy directly in (in CS3, not sure about the others) is awesome. I’m not a die-hard in the sense of pushing Fireworks. If Photoshop works for you, great, however I love using Fireworks and I am pleased to see that Adobe continues to better it.

  5. Posted: Tuesday January 8, 2008Ben Carlson said:

    Fireworks is awesome. I too first started web design using Fireworks, and before I knew much about file formats, was always confused as to why Photoshop rendered PNG files as flat images. The built in layering of the standard PNG format is so much more useful than toting PSDs around and having to convert for various uses. Though I haven’t done much designing lately, and don’t have CS3, one day I hope to explore the new Fireworks. =)

  6. Posted: Tuesday January 8, 2008Steve Smith said:

    And How! I haven’t comped in Photoshop in 5 years.

  7. Posted: Tuesday January 8, 2008Anton said:

    I have a high respect for Fireworks, and use it when the case needs it. However, my particular style is different enough that Photoshop appeals to my illustrative nature in ways that I can’t quite adjust to in Fireworks. But I do use it for batch compressing, and some png work (I have a few other freeware tools that help out with that too).

    I think that it’s helpful to stay positive and application-agnostic, because if two people find success in the product of their work, then who are we to judge what methods they used to get there?

    I personally don’t like this war. It’s too negative. Can’t we all just get along?

  8. Posted: Tuesday January 8, 2008Nathan Smith said:

    “I personally don’t like this war. It’s too negative.” — Anton

    @Anton: Hopefully I did not come across as antagonistic. Let me reiterate: “be aware that the purpose of this article is not to down-play the usefulness of Photoshop…” I was simply trying to explain some of the positives of Fireworks, not say negative things about Photoshop. Tools aside, nobody disputes the amazing quality of your work!

  9. Posted: Tuesday January 8, 2008Dave Lowe said:

    Great article, Nathan! Fireworks definitely deserves more face time. I know it’s an indispensable tool for my work. I only open Photoshop when I’m editing photos.

    I had never thought of putting a Fireworks file on the web server to share with clients. That is just awesome!

  10. Posted: Tuesday January 8, 2008Craig Erskine said:

    Great article Nathan… keep on preachin’ like a preacha.

    Photoshop is truly the king of photo editing, but if web design is your bag Fireworks will most definitely serve you well.

  11. Posted: Tuesday January 8, 2008Jonathan Snook said:

    I loves me some Fireworks. I’ve been using it since version 1! Fireworks still isn’t a great photo editing tool but I can’t think of anything better when it comes to web design. It’s the perfect blend of features.

  12. Posted: Tuesday January 8, 2008Andrew Ingram said:

    I have to be honest, I like the simplicity of Fireworks but it does have some things that I find really annoying when coming from Photoshop.

    The first thing is that the import of psd is far from perfect, I’ve had carefully lined up guides and boxes in photoshop which have been several pixels out when imported into Fireworks. No idea why, all the boxes had pixel coordinates rather than subpixel ones. Cause quite a bit frustration.

    Secondly, I just don’t like the colour picker. I really like the Photoshop one whereas Fireworks just gives 256 colours or the option of switching to the system colour picker, and since I’m still on Windows it’s pretty darn unusable (I don’t know what the Mac picker is like).

    That said, I do like the elegance and smoothness of Fireworks and I think I’d be a convert if it wasn’t for the colour picker. So if someone knows a way to get a better colour picker, i’m sold.

  13. Posted: Tuesday January 8, 2008Jonathan Christopher said:

    I’m a recent Fireworks convert and I’ve got to say, once you stick with it (for Web work) you definitely come to realize the benefits in comparison to Photoshop. Great article, Nathan.

  14. Posted: Tuesday January 8, 2008Erik said:

    You are speaking to me (and many others), Nathan. How ever did you know?

    I’ve been a power user of Photoshop since v7 and never gave Fireworks a chance because of the comfortability of PS. In recent years Adobe has spoon-fed PS a bit too much and it’s become bloated and slow (although it being optimized for Intel/Mac helped).

    Matt H. has been trying to get us to use Fireworks over PS for optimal design work flow and for all the reasons you listed above and then some. I’m just a victim of familiarity so switching to another program at this point would be somewhat challenging as I’ve harnessed the “beast” all these years. That and I echo Andrew’s thoughts in that the UI bothers me a bit.

    It doesn’t mean I won’t use it, however, I just need to dive in and learn it. It’s really as simple as that and yet there’s still hesitation on my part.

  15. Posted: Tuesday January 8, 2008Garrett Dimon said:

    I ended up using Photoshop out of habit. I’ve been stuck on it since 2.0, and while I’ve always wanted to explore Fireworks, there’s a lot to be said for having spent a decade memorizing keyboard shortcuts in Photoshop. I guess I need to give it a shot now.

  16. Posted: Wednesday January 9, 2008Craig Erskine said:

    @ #12 Andrew:

    Have you tried the Color Mixer panel that comes pre-installed (Shift + F9)?

    Also, Fw CS3 comes with a Color Palette panel (Window | Others | Color Palette) that might work better for you.

  17. Posted: Wednesday January 9, 2008Gidge said:

    Like Garrett, I just haven’t given it a fair shake because I cut my teeth on Photoshop (too many metaphors?). Really, some of the features you highlight in your article sound very tempting. I can’t imagine it replacing PS for all my web design needs, but I’m certainly more open to trying it out after reading this.

  18. Posted: Wednesday January 9, 2008Andy Rutledge said:

    I agree wholeheartedly, Nathan. I’ve always been a Fireworks user and enjoy its more web-centric features for fast, flexible production work; start to finish.

  19. Posted: Wednesday January 9, 2008Jeff Adams said:

    I just wanted to jump in here and share a great Fireworks extension that automatically creates guides based on properties you’ve set.

  20. Posted: Wednesday January 9, 2008Andrew Ingram said:

    That’s a nice find Jeff, I did a much more basic plugin along the same lines. Now I just need one that combines the best of both. I do like that it’s much easier to write powerful plugins than for Photoshop.

  21. Posted: Monday January 21, 2008brandonrichards said:

    I’ve been using Fireworks since DW 1.2, I quickly saw the advantage of using it within an integrated environment, though the ‘studio’ at that time was simply one way and library files worked best.

    I still use FW today, I can run circles around most photoshop heads doing layout and I’ve put up with enough mocking knowingly that in the end (of macromedia), FW would indeed remain and join Adobe’s family of products. Alas, the only thing its lacking is print skills, but who needs that in a digital arena.