Shaping the Page
Moving from Photoshop to Fireworks (Part 1)
(The following is Part 1 of 3 in a series of articles.)
Raise your hand if you’re a long time Photoshop user, have always been curious about Fireworks, but have never had the time to give it a fair try. That was me until earlier this year. Over the last ten years my design projects have moved from mainly print-focused to almost 100% interactive in nature. And despite my love for Photoshop as a photo-manipulating, special effects powerhouse, it’s apparent that Photoshop was never intended to be the interactive layout and design tool that so many of us force it to be. At best the web tools included in Photoshop are handy patches that have allowed me to scrape by for years, giving me just enough to get the job done.
But earlier this year my workflow involving Photoshop started to wear on me. I began to casually look elsewhere, wondering why in 2011 there wasn’t a “Photoshop for interactive design” out there somewhere. I was familiar with Fireworks, but never made time in my schedule to actually use it in a true production environment. And rather than continue to wait for that non-existent “next generation” web design app we all dream about, I decided to download the Fireworks CS5 trial. I made a commitment to use it in place of Photoshop for 30 days, no matter how difficult it might be. And after 30 days I was hooked. Where had this application been all my life? And why had it taken me so long to give it a serious look? Now after months of use I feel it’s time to document some of my experiences and observations in making the switch from Photoshop to Fireworks. Some of this will sound like a software review. That’s OK, it kind of is. But mostly I want to give long-time Photoshop users a taste of what’s in store, the good and the bad (it’s not all good), should you decide to make the jump.
Multiple Pages
Multiple pages is one of the most freeing features of Fireworks. I no longer have folders and folders of PSD files to keep track of for a single project. I can now manage an entire site or application design within a single document. Or I can choose to use one Fireworks document for each screen of the design, but include every version of that screen within the same Fireworks document. So no more “project-home-5a-revised-updated-2.psd” files to keep track of.
Each of the pages (or “screens” as they could be called) in Fireworks can also have their own custom sizes. So it’s easy to accommodate utility pages, popups, login screens, etc., each with their own dimensions in the same document. I’ve also found it handy to include a “slicing” page in the document whose only purpose is to isolate graphics that otherwise might be too difficult to slice in their native context.
Master Pages
Something I couldn’t live without in the print world, Fireworks makes available to me in the interactive world. Imagine dedicating a page in your project to the common elements of your layout. For example, the header, logo, body background, perhaps the main navigation, are all typically the same across each screen of your project. Throw those items onto a master page and updating them there updates them everywhere. Isn’t this how we work when it comes to development, with template includes and embeds? It’s nice to have that same power in my design application.
Styles
Yes, I know Photoshop has a “Styles” palette. And it works just fine for saving your favorite builds of buttons and such. But the styles in Fireworks are more like your traditional style sheets, and as a result much more powerful.
For example, let’s say your project uses three different types of buttons, depending on how they’re used in the context of your layouts. Each of these button types has their own unique attributes (color, stroke, border radius, etc.). Now imagine these buttons are used in hundreds of places across the many screens of your project, and you suddenly realize one of the button types needs an attribute change. If that button is attached to a style, you simply edit the style and the button updates itself across every screen of your project. Styles can also define text attributes which really comes in handy. We certainly depend on this power when it comes to CSS; we depend on it in the print world; and after using this feature in Fireworks you’ll grow to depend on it in your interactive design application too.
Libraries
Libraries behave in a similar way to styles, but instead of being limited to the attributes of a single object, an item in the Library can be a group of multiple objects. For example, if you have a complex graphic that’s composed of several objects, and it’s used in multiple places throughout your project, you might want to put that graphic into the Library. If that graphic needs to be updated you only need to update it once and it updates itself across every screen of your project. I’ve even gone to the extreme of putting an entire site footer in the Library just so it’s easier to manage from screen to screen. My rule of thumb is put it on a Master page if the item never moves in the layout; put it in the Library if the item might move from place to place in the layout. The Library can also be used for simple things like symbols or custom shapes. You can also decide whether or not you want an item in the Library to be available to all of your Fireworks documents, or only the current document. Is your imagination running wild? It should be.
Stability
Coming from Photoshop, things could only get better in this category. I know people have mixed experiences regarding the stability of Photoshop, but it’s no secret that a good portion of users are always prepared for the worse. For me Photoshop would crash at least once a day on average, and it didn’t matter what version I was running or what model of Mac I was on.
After switching to Fireworks I got through my first day without a crash. The second day, no crashes. I started to get nervous, convinced that a major crash must be right around the corner. It was at least a month of daily use before I experienced my first crash. But guess what? Waiting for me on my desktop was a copy of the most recent state of my file before the crash! Slick. That recovery feature doesn’t seem to work every time, but I’ve now been using Fireworks daily for months and it’s crashed maybe 5 or 6 times. Compared to what I was used to I’ll take it.
Vector Tools
If Photoshop is a bitmap app that just happens to have vector tools, then Fireworks is a vector app that just happens to have bitmap tools. Get used to doing almost everything with vector tools if you make the switch to Fireworks. The things I previously made in Illustrator and pasted into Photoshop I now just make directly in Fireworks. Complex shapes, paths, lines, arrows, and illustrations are all handled with ease. Strokes can be aligned to the outside, center, or inside of a shape’s outer boundary, just like in Illustrator. Heck, you can even make dashed and dotted lines! (A dotted line seems like a silly thing to get excited about, but Photoshop users will understand what the fuss is about.) Fireworks also has it’s own pathfinder palette to help combine, intersect, and manipulate shapes and paths.
It’s not quite as powerful as Illustrator’s, but it gets the job done most of the time. In fact, except for very complex illustrations or projects that need to go to press, I’ve actually grown to prefer doing my vector work in Fireworks instead of Illustrator. But I should point out that although you’re using true vector tools, Fireworks still makes the assumption you’re designing for the screen, and therefore pixelates anything that’s viewed closer than 100%. This is how Photoshop also handles its vectors, as opposed to Illustrator where you can zoom in on an object and it remains razor sharp on your screen.
Layers
My layers used to be so organized in Photoshop (most of the time). In Fireworks they’re a mess. I still can’t wrap my head around the Layers palette in Fireworks. What it calls a “layer” is actually a “folder” containing multiple “objects.” So when you choose “Duplicate Layer” in the Layers palette, instead of duplicating the object that’s selected it duplicates the entire folder of objects.
It took me a while to figure out that copy/paste was Firework’s equivalent of Photoshop’s “Duplicate Layer.” And you know how in Photoshop you can select multiple objects in the Layers palette and choose “New Group from Layers” which puts all of the objects in the same folder in the Layers palette? That’s super handy. Well you can’t really do that in Fireworks. Instead you can select multiple objects and “Group” them, but that combines the objects to a single item in the Layers palette which can’t be expanded like a folder can. But thankfully Fireworks makes it so easy to select and interact with objects directly on the page that you can all but ignore the Layers palette for most things if you want to. Still don’t like the mess though.
Color Palette
Some really weird things going on here. You see, Fireworks actually has a decent (but not great) Color palette. It has your typical color models to play with, and also some unique features like a color mixer and a color blender interface. But here’s the problem. Let’s say you have an object selected on the page and you want to change its fill color. As expected you’d click the “Fill Color” icon. But instead of getting the Color palette you get this cheesy, 1998 web safe swatch palette. Why? I have no idea.
As a result the decent Color palette remains buried in the interface untouched for the most part. You can at least add colors to the cheesy swatch palette, but still. The only saving grace is when changing the color of an object you automatically activate the Eyedropper tool. So after you establish your project’s color palette you can basically ignore the cheesy swatch palette if you want and just sample colors from your existing objects.
So obviously layers and colors aren’t my two favorite things about Fireworks, but hopefully you’re starting to get a small taste of what to expect when making the move from Photoshop. I think that’s a healthy start for Part 1 of this series. Stay tuned for Part 2 where I’ll discuss among other things layer styles, text rendering, and compatibility issues. Until then, happy designing!
Tweet