bonus: fireworks cheatsheet notes

So the designers at my work use a lot of Adobe Fireworks. It's a cool program. Its raw format is .png, but a cranked up .png that holds lots of stuff like layers, alpha transparency, and even vector information. For enginerds like me who tend to think in terms of pixels only (and maybe diving into crazy complexities like "layers") it's a lot to wrap our heads around... and watching a skilled artisan use it, and its ability to treat text and lines and pieces part as objects, even when they're not explicitly set on a different layer... it's eye-opening.

So, as notes to my future self, I thought I'd write out just what I had to go through to make up the basic white-rectangle-with-drop-shadow images... in particular, how to use Fireworks to slice it into the top,middle, and bottom the final example used.

Here are those notes:

• make a new image: ctrl-n, 500x500...
• On toolbar stroke would be null (red line X, fill to white...), fill would be white
• on the toolbar under vector, make the shape tool do rectangles not ellipse tool
• draw the shape then handfix the W and H under Properties at the bottom (mostly the width)
• Under Properties|Filters, Shadow and Glow | Drop Shadow
• This pulls up some Filter properties. (By default the dropshadow is to the Southeast)
• so Filters is a list of effects added to this selection, you have to be careful not to make extra ones...
• the arrows is distance, how far away the center of the shadow is from the center of the item... I want this at zero, centered, not off to one side
• (which means I can ignore the angle for which direction it should go)
• I set the fuzziness bigger than 4, like 10 or so
• you don't see changes applied 'til you close the filter mini-properties box
• Make sure the canvas itself has the null background selected (indicated with the red line) and you can see the gray and white boxes
• Here I could select the rectangle with the selection tool, ctrl-c copy, ctrl-n (which autodefaults to the size of the thing in the clipboard), paste, then save. But of course I wanted my 3 slices...
• now we need to use the slicing tool. You draw bounding boxes (including the dropshadow) and rely on the AI thing to find the right edges for you... I draw one for the top, bottom, and middle. At my first attempt I tried to close-crop the top and bottom without interior padding, but that messed up the shading of the corners, and I had to redo it.
• Then I go to Export... the settings are QUITE a bit fiddly, what the helpful designer helped me figure out I wanted was "Export:Images Only" "HTML: [None]" "Slices:Export Slices" "Pages:Curent Pages" and "Include Areas without Slices" left unchecked

And that was it!

Sometimes I dispair of ever deeply learning Adobe stuff. It seems like such a different, non-engineery, don't-try-to-understand-everything-we're-doing / intuitive system... or maybe the designers are just more used to. (GIMP. in contrast, is pure-Engineer, we-don't-give-you-any-convenient-defaults, no matter how logical it might be.)