In July of 2011, I presented a Fireworks session at D2WC called Wireframing and Prototyping for Mobile using Adobe Fireworks. I was so pleased to see a very full room of attendees. Even happier to note that many were not current Fireworks users.
Yes, I did say happy. The reason is simple. I want people to know what they’re missing out on. As you might be noticing, I’m a big Fireworks fan. Huge, even.
My original goal with this session was to focus on some sample prototypes and wireframes, but based on the crowd and many of the questions fired at me, I changed the slant slightly and talked more about how many of the Fireworks built-in features are designed to save you time, without sacrificing quality. Time is money as they say. Projects are quoted on estimated number of hours, so the sooner you can complete a wireframe or a prototype, the sooner you can move forward to actually wiring up the actual application, and the happier everyone is.
The sooner students can learn how to achieve optimum results in less time, the more employable they are.
As usual, I had way more content than I needed or had time to use, so I’ve posted the files (including brief slide deck, a couple tutorials and LOTS of assets) on my web site.
Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.
A couple things I really wanted to get to in my session but ran out of time were:
- Exporting layers to files
- Batch processing for mobile
In this tutorial we’ll look at exporting layers to files. I’ll also be releasing a new tutorial that will cover batch processing the new files created from this tutorial.
Design Elements for Mobile
Let’s say you’re not building a mock up. Let’s say you’re focused on application icons for that mock up. Or other common visual elements like logos. How can Fireworks help?
Layers or Pages can definitely help. In my example I’ve used layers to place different icons for a variety of D2WC speakers.
Figure 1 - Completed icon file
But it all started with a single icon design. In this case I created an icon for my good friend and fellow speaker/educator, Tom Green. As you can see from the final version above, the icon went through some design changes, but the general look and feel remain the same.
This simple design consists of 4 objects:
- Outer rounded rectangle with gradient fill and inner glow (for depth)
- Inner rounded rectangle for stroke accent
- 2 text blocks, one for each letter. I used separate text blocks so I had complete control over positioning of each letter.
It took me longer to decide what I was going to do than it took to create the icon.
Creating New Iterations
- Once the first icon was built, I went to the Layers panel and dragged the entire layer to the New/Duplicate Layer icon at the bottom of the panel, to duplicate all the contents of the layer in a brand new layer.
- Holding down the Shift key, I tapped the right arrow key several times until the contents of the new layer were positioned away from the contents of the original layer.
- Then I deselected the objects by clicking outside the canvas area. With nothing active on the canvas, the Properties panel displays a button called Fit Canvas.
- I clicked on that button and Fireworks automatically resizes the canvas to fit both icons.
- I repeated this process of duplicating and moving layers until I had 8 layers, visually separated from each other.
- Then one more click to fit the canvas to the images on the canvas.
Pretty cool! Also note that if you scale an object or objects on the canvas smaller that the original size, you can use the Fit Canvas button to shrink the canvas as well.
Then, once I had all those duplicates, I selected the various vectors and change the gradient colors, stroke colors, text colors from the Properties panel. Now that’s all well and good, but all those icons are in ONE file. I needed 8 separate files, and I wanted to keep my editable version, too. No problem.
Exporting Layers to Files
Using this export workflow, I can export flattened versions of each icon as a separate graphic.
- First I went to the Optimize panel and changed the global optimization settings from the default GIF format to PNG32. (When the canvas is transparent, exporting as PNG32 from Fireworks creates a flattened bitmap with a transparent background – handy if your graphic is not a rectangle.)
- I saved the file as a Fireworks PNG file for future editing.
- Then – the cool part – I chose File > Export.
- I selected a destination folder from the main Export window, not worrying about the file naming.
- From the Export list, I chose Layers to Files.
- I clicked on the Options button and made sure that the File Type is set to Use document optimize settings.
- Back in the main Export window, I pressed the Export button.
A few seconds later, I had a folder containing eight flattened PNG files with transparent backgrounds. But my editable versions of all those files still resided in a single file. Cool, in my view.
You might be wondering why I used layers instead of pages. Basically, this method worked for me because I could see all the icon iterations at the same time, making it easy for me to compare and tweak the designs. Using pages instead of layers would have given me a smaller Fireworks PNG file in terms of dimensions, but I would have had to switch from page to page to check icons. That said, if you’re more comfortable using pages for this type of work, there is no reason not to. Fireworks does, after all, include an export workflow for Pages to Files.
Batch processing adds even more power to this workflow, because I can create custom Batch processing scripts to export the original files in multiple sizes. In the next tutorial, we’ll dive into Batch Processing in Fireworks.