From Photoshop to Fireworks and back. Part 2. Wireframing.

A while ago I’ve started series of posts that should help Photoshop (PS) users to get advantage of Fireworks (FW) features with minimum discomfort of mastering an unfamiliar tool and use PS as a booster for it. Check Intro and Part 1. Setting up. Here is the next one — wireframing. In fact, all the following can be applied to the final graphic design process too, but wireframes are the stuff we usually start with, right?So, let’s assume that all use cases and stories are sorted out, all paper and whiteboard doodles are done and you are ready to go digital. But first, let me explain why we are going to do it in FW instead of PS.

Why Fireworks is better for UI wireframing?

Photoshop is a photo editing and graphic design tool and was never developed to cover UI designer needs. So, the simple answer is — the Fireworks software is made for it. Basically, there are two main advantages, but those are crucial:

Pages and States

Most of the time your project consists of quite a few different screens (pages) and each screen can have different states depending on the situation. In PS, you can use layer comps for this, but since layer comps are never meant to be used this way, they are far from convenience that FW has to offer.

Pages and States. Ruby on Rails design Pages and States. Ruby on Rails development


In the wireframing process, you constantly re-use a set of standard interface elements such as boxes, input fields, scroll bars, buttons e.t.c. PS users usually keep a separate file with a set of such bits and pieces, which is not very handy, and there is no way to scale them quickly, which makes wireframing too time-consuming. With FW you don’t need that workaround — it has symbol libraries functionality built-in.

Libraries . Ruby on Rails developers Libraries. Ruby on Rails designers

Actually, let’s start from setting one up for you.

Setting up a library

There are several ways to start wireframing using FW libraries:
  • Use built in Common Library
  • Create your own library using your old PS library file
  • Use a 3rd party library
  • A combination of any of above

Common Library

Common Library. RoR consultingFW has some interface elements that you can use “from the box”. Just open your Common Library tab and browse through the folders and see what you can use in your work and may be delete something that you never will. There are some icons, form elements and other stuff. When you drag an item to your document, it goes to the Document Library where you can modify it to suit your needs. Those changes will apply to all items used in the document.

Creating Custom Library items

If you already have a set of spare parts that you use in PS — why not to make a FW library from them? Do it once and it will enhance your design process dramatically. Here is how:
  • Open your PS file in FW:

    Custom Library. RoR programming

  • Convert element to symbol:

    Custom Library. RoR design

  • Give it a name, set properties, save to an appropriate folder:

    Custom Library. Product design
    Custom Library. Product development

  • Now you can find it in the Common Library:

    Custom Library. RoR company

  • Drag it to your document, double click it and define scale area:

    Custom Library. RoR team

  • Go back and scale using simple transform. No distortion!

    Custom Library. RoR team

3rd party libraries

You can use libraries created by your colleagues, downloaded for free or bought online. There are 3 types of such libraries:
  • Extensions (example)
    In the fist case you just install the extension:

    From Photoshop to Fireworks. Design services.

    and that’s it, it’s in your Common Library:

    3rd party libraries. Product Design.
  • Converted to symbols (example)
    You can import symbols from it to your Document Library:

    3rd libraries. Design and Development

    or open it and save symbols to Common Library:

    3rd libraries. RoR Design and Development
  • Not converted to symbols (example)
    It’s similar to the one you may used to have in PS and consists of a lot of elements sorted by type using pages or layers. Just convert elements from it to symbols when you insert them to your document.

    3rd libraries. RoR product Design and Development

Working faster and smarter

OK, now you have your toolbox right, ready to rock and can just follow your usual wireframing routine in a more effective way thanks to the library symbols. Great, but let’s not forget about some more cool FW features:


FireWorks features. Ruby design The main difference between FW and PS styles is that FW styles can keep font properties. Treat styles as a part of your Document Library and save all typography stuff there. It will save you a lot of time.

Master page

FireWorks features. Rails design Most of the time, a lot of your screens (if not all of them) will have something in common, like logo, header, browser frame or mobile phone body e.t.c. Use master page for that kind of things and if, in the end, you decide to change your iPhone body color, browser type or your project will change title — you can save yourself a lot of dull copy-pasting.

Layer sharing

FireWorks features. Rails design It’s a common case when you should add something to several, but not all screens of your project. FW has the “Share Layer To …” functionality where PS has nothing to offer but wasted time and frustration. Features like this make a huge difference.


Bring some life to your interface by making your prototype interactive. You can add hot-spots to your clickable areas and link to pages in the project:

FireWorks features. RoR design

or create behaviors and swap images in hot-spots or linked slices:

FireWorks features. RoR design

You can better understand how your project would work when you save it as HTML and click it through.

More to come

I hope you found this post useful. Next time I’m going to tell you about some DOs and DON’Ts regarding PS and FW compatibility, must-have extensions and more. Stay tuned!