Create Fireworks Files that make your Developers Happy

Some people (like myself) are lucky enough to have a team of developers to write all of their code for them. Its a blessing and a curse. On the upside, I get to concentrate on design and usability while letting others concentrate on the technical aspect of making it all work. On the downside, I’m not gaining as much technical ability as I would if I had to code everything myself, and I don’t see the agony that a lot of developers go through in order to turn our mess of a comp into usable slices for markup.

So I asked some of the members of my development team what they liked and didn’t like in Fireworks comps. I was expecting the usual complaints that you hear from Photoshop files: layers are a mess and unorganized, too many hidden layers, no grouping, etc. A lot of these problems either stem from a lazy or unorganized designer, or even just from a rushed project, but, to my surprise, these weren’t complaints associated with Fireworks files. Probably due to the fact that you can easily click and manipulate layers without digging through the layers menu. Of course an organized document is always the best way to approach any comp, but here are some other tips and suggestions that I hadn’t thought about that I received from my developers.

Grouping Dynamic Content

Want to really impress your markup guy? take all your dynamically generated or html generated content in any given section of your comp and group it together in a group or folder. That way when they go in to slice up a button or background they can just turn off the dynamic folder and get all of that stuff they don’t need out of the way.

Set Canvas Color to Transparent

I’ve always preferred saving an extra layer and setting my document background color to the actual background color of my design, but I’ve now seen the errors in my ways. If you use an object to create the background color instead and lock it to the bottom of your doc (I usually do it in a folder so that when I’m in another folder and ’send to back’ it doesn’t go behind my background), then the dev can just turn that layer on and off when he needs to export a slice with a transparent background. Otherwise they have to turn your canvas color to transparent, export the slice, then undo or remember the correct background color to return it to what it should be.

Don’t Group Layers and Apply Attributes to the Group

I’m very guilty of doing this. I’ll create a complex design element constructed of many different layers and group them together, then add a drop shadow affect, or lower the opacity to my liking. This works fine at first, but if the dev needs to break that group apart to slice it correctly then those filters or attributes that you applied will disappear and they’ll have to figure out how to get it to work again. Examining your filters, opacity and blending modes to figure out what you did or what they just messed up isn’t going to win you any friends.

Don’t Use Opacity and Filters to Change Appearances

Sometimes when I’m in the zone, I’ll make a headline black, then lower the opacity to get the right shade I want. Unfortunately, when the dev goes to write the css, he’s only looking at the hex number for that element. So he’s going to put in a hex number of #000 when really it should have been #333. This results in unnecessary changes later on that could have been avoided. The same is true for any element. If you created a block of color and have it set to #0066FF, then lower the opacity down to a nice 35% to get that baby blue you’re looking for, the dev is going to have a hard time figuring out that #A6CAFF is really the color you were after. The same goes for using filters such as Hue/Saturation to change the color of objects.

Contribute!

Give us your input on the subject. What tips do you have for creating better comps?

Special thanks go out to Scott Wilson and Joshua Kappers for their advice, contributions, and putting up with my comps.