Matt Stow

In this interview, we have Matt Stow, a Fireworks extension developer who has done amazing extensions that enhance our workflows in Fireworks. He has more experience than many of us and remains hungry for new experiences. Let's hear his insights on Fireworks.

To begin with, who are you and where are you from?
Hi, I'm Matt Stow, an English expat and self-appointed Fireworks Guru living in Newcastle, Australia, a few hours north of Sydney.

What do you work as in your day job?

I'm the Senior UI Developer and a partner of Izilla Web Solutions. My main role involves taking Photoshop comps and building the HTML, CSS and JavaScript for web sites and web apps, but I also dabble in .NET development, prototyping and design. I'm also the usability and accessibility expert at Izilla.

Firstly, I love your extensions. Tell us a bit about how you got started making extensions for Fireworks.
Thank you, Linus. My first extension was my Frame commands pack in early 2007. During the CS3 pre-release cycle, I was doing a lot of frame-based animation/design, and was frustrated by not being able to easily loop through my frames with the keyboard. John Dunning, Fireworks extension developer extraordinaire, gave me some pointers on getting started with extending Fireworks, and it has snowballed from there.

What motivates you to make extensions and how do you get the ideas?
Most of my extensions are borne from addressing my needs, and my desire to improve the efficiency of my particular workflows. I've also taken requests from members of the community and built extensions for them.

What is the proudest extension you have developed so far?
That's a tough one. For my workflows, my Copy Colour, Opacity, Corner Radius and Space Evenly commands rank highly because I use them all day, every day. In saying that, I was honoured to see my work in copying and pasting attributes between slices get integrated in to Fireworks CS4, and also to see the community and team appreciate the many hours of effort I put in to making CS4's CSS Export feature as compliant and semantic as possible.

Recently you started on CSS3 animation concept using states in Fireworks. Can tell us more about it?
Well, it's in very a early stage, but the proof of concept I posted on Twitter has definitely got people excited. My goal is to use Fireworks to be able to design and create CSS3 animations - all in the one app. Tools like Edge are cool, but they're disjointed to my workflow and I can't easily make design changes after compiling the animation. Edge also favours using jQuery instead of CSS3 so I want to trim the fat, and turn Fireworks in to a lean, web standards design and animation tool.

I'm not committing to anything though. I'll only release it if and when I think it's a robust and usable solution.

Recently you started the Fireworks Pixel Art Swatch Project. Can you tell us more about it and what gave you this idea?

It all started from mucking around with Dave Hogue; it definitely wasn't planned :) Dave was creating a serious swatch set, which I provided feedback on, and I jokingly remarked that the only way it could be improved upon was if it included Super Mario - as I'm a huge Nintendo fan.

Appeasing me, Dave came back with a recreation of an 8-bit Mario swatch, and I had a light bulb moment: if I found it cool, others would too.

So that night, I recreated a classic Mario sprite in Fireworks, converted it to a swatch set, set up a Posterous and Twitter account and the project was born. You can find its blog here: http://fwswatch.posterous.com or follow it on Twitter @fwswatch.

Although it's just a bit of fun, it's actually quite a bit of work. Pixel art is a real skill, so I hope to improve my abilities and learn techniques from each sprite I recreate to continue to provide quality swatches, like the Mona Lisa I've already done, as the project continues to grow.

What can the Fireworks community can expect from this project?
Well, as a massive fan of the 8-bit and 16-bit eras of gaming, I hope to recreate sprites from that period's influential games as Fireworks swatches. It won't just be limited to gaming though; as I plan to recreate famous artworks, cult characters, movie scenes and more. For each swatch, I'll also provide a fully editable Fireworks PNG of the design.

I hope that Fireworks users gain something from this. Not to just learn about pixel art and the history of gaming, but also by actively utilising these swatch sets as inspiration for colour schemes in their designs. Fireworks' default Color Cubes swatch can be very limiting, so these swatches could get the creative juices flowing.

I want the community to join in and have some fun aswell. If you'd like to help create swatch sets, contact me and I'll give you some guidelines and pointers, and hopefully we can expand the reach of the Fireworks Pixel Art Swatch Project. Hopefully you'll contribute too, Linus :)

What type of projects do you work in Fireworks and are there any challenges you faced that Fireworks have helped you?

(download)

As I touched on before, I mainly use Fireworks at the HTML build stage of websites. Mobile web site development is really starting to take off for me now too, and being able to prototype the various screens and interactions in Fireworks is a major bonus. Have you seen the TAP prototyping system? It's very impressive.

I've just made a jQuery mobile website for the Greater Building Society, and also did the UI for their new mobile banking service, which I designed in Fireworks.

There isn't a single project I've worked on where I couldn't have used Fireworks. Admittedly, I'm not great with Photoshop, but some of the things I do in Fireworks, I either would have no idea how to do in Photoshop, or would take me 5 times as long.

I recently worked on a shop project where every product image was absolutely positioned and had various z-indexes that were defined with HTML5 data-attributes. I could have done it manually, but I wrote an extension to navigate every page of my Fireworks document, extract all of the file names, X & Y locations and the z-index from the layer order to build the markup. Try doing that in Photoshop!

How long have you been using Fireworks?

I first started playing with Fireworks MX, but it wasn't until Fireworks 8 was released in 2005 that it really grabbed my attention and became my primary design tool.

Why should a designer use Fireworks?
Why shouldn't you?! Seriously, it's amazing. For some reason, Fireworks has a certain stigma attached to it, and I really don't understand why. If you design for the web, then you owe it yourself to give Fireworks a chance. You're likely to produce better quality work, which is more easily translated to CSS and at a fraction of the cost of using Photoshop. That sounds like no-brainer to me.

Fireworks excels as a rapid prototyping tool. How does Fireworks helps you in your daily design workflow?
For CS3, Adobe realised a gap in the market for rapid prototyping of web projects, and Fireworks already had plenty of features to take on the challenge. But Alan Musselman, Fireworks' product manager at the time, was instrumental in taking it one step further by adding the concept of pages and a common library of rich UI symbols.

Using pages, and (the now renamed) states, I can easily prototype and demonstrate the flow of an entire application, and its interactions. I've learnt a lot from Dave Hogue, a much respected member of the Fireworks community, who really embraces Fireworks for rapid prototyping and has made some great presentations on the subject for Adobe TV and Fire On The Bay.

John Dunning is also working on an extension for an entirely new concept for prototyping that hopes to address some of Fireworks' current limitations. I'm really looking forward to seeing how this develops.

What is your favorite workflow in Fireworks and why?
This may sound weird, being such a Fireworks evangelist, but the improvements Adobe made to opening Photoshop PSDs in CS4 has had a massive impact on my workflow. I can now import fully editable PSDs, and retain most of the fidelity. Where some of the appearance is lost, I can tweak the import settings, and keep this other version on a separate page. I then create new pages for all of my slice formats, and take the various elements from the PSDs and optimise them individually. Photoshop designers are notorious for producing blurry-edged shapes, so I can easily fix them or redraw them in a matter of seconds too.

If you can only list 5 favorite best features in Fireworks, what will they be?
Only 5? Hmmmm.

1. Fireworks' core - The hybrid of pixel perfect vector and bitmap editing in one app can not be beaten for web layouts and icon creation.

2. Intuitive editing model and the Property Inspector - See it, click it, edit it. It's just too easy.

3. Pages - Not only does it allow me to keep a consistent design across an entire project and contain it within one document, It allows me to take 15 PSDs and create a 15 page Fireworks document of each design.

4. Extensibility - Fireworks is an absolute powerhouse out of the box - but if you add a talented extension developer to the mix as well, you have almost limitless possibilities.

5. Optimize panel and individual slice settings - Having the ability to set export properties (format, colours etc) per page and per slice, and able to preview changes live is incredible.

Many people compare Photoshop with Fireworks. What is your viewpoint in this?
To me, there's no real comparison. Sure, at their most basic level they do the same thing in allowing you design and export, however, the differences become apparent with all of the features I've mentioned thus far to make Fireworks the ideal tool for design intended for the web.

Fireworks work even better with extensions. What are your favorite extensions from other developers and how do you use them in your work?
Without a doubt, the two most talented extension developers are John Dunning and Aaron Beall.

John's Keyboard Resize command is quite possibly the best extension ever created. If you're still manipulating objects with the scale tool or directly in the Property Inspector, stop it now! Install Keyboard Resize and be amazed. They maintain properties such as corner radius and intelligently scale multiple objects at once. I even extended it to create a Math Resize extension, allowing you to use arithmetic to resize objects.

Aaron creates amazing Auto Shapes and panels. Without his FWAPI Inspector panel, I wouldn't have created half of my extensions. Giving a user editable access to practically every feature of Fireworks' DOM makes extension developing a breeze.

Another extension I use regularly is Super Nudge. It's a really old panel, but for moving objects and nodes at a sub-pixel level, it can't be beat. I know I said before about blurry-edged shapes in Photoshop, but sometimes, you do need to break free of the pixel grid.

I love your Export Responsive Prototype extension as I am now able to simulate responsive designs in Fireworks. Can you share with us what inspired you to create this extension? What plans do you have for future releases?

Thanks, Linus. Responsive design is the new buzzword and a really valuable technique in modern web design, but I - and others - realised that unless you're designing in the browser, that there was no easy way of demonstrating this technique to the client.

It occurred to me one night that, at its simplest, all one needed was a simple method of showing different screen comps for each breakpoint in the browser.

View screencast

So, my Export Responsive Prototype extension basically takes the pages you have in Fireworks, and, through applying a series of slices allows the designs to intelligently scale and switch between the various breakpoints automatically.

This means that you can provide a client with a link to the exported prototype and they will be able to preview and see how it behaves on a phone, tablet or desktop browser - or at whatever breakpoints you define in your Fireworks document.

As far as future releases go, I know you have a few ideas, but I'd first like to implement giving the user the ability of specifying the orientation for a breakpoint and allowing a click-through prototype of an entire site, as opposed to just single pages.

Following that, I'd like to investigate exporting real text in the prototypes so that resizing in a desktop browser, for example, reflows the text instead of scaling it. I'm not sure how feasible this will be though.

Do you have a Fireworks tip for the Fireworks community?
Continue to evangelise the product and demonstrate to Adobe that Fireworks is relevant in today's market, and is an essential tool to a lot of web professionals.

Are you involved with any communities on the web?
Unfortunately, not a great deal any more. I used to frequent the Fireworks Guru forum and occasionally the Adobe Fireworks forum, but I don't really have the time these days. I still consider myself an active part of the community though, and if people ask me question via Twitter or email, I'm happy to respond and assist in any way I can.

Do you have a blog? Where can we find you online?

I have a semi-blog where I release Fireworks and Dreamweaver extensions, and other tutorials and articles at http://mattstow.com. You can also find me on Twitter @stowball

Thanks for the opportunity to talk you, Matt. Last question, any advice to the designers out there exploring Fireworks?
Just take the plunge. I'm the epitome of the uncool web professional these days; what with using Windows, Fireworks, Dreamweaver and Android, but if you just take the chance to look elsewhere than what's considered the accepted standard, then you may be pleasantly surprised.

If you have a question, ask. Ask me, or any of the other gurus in this Fireworks series. Or ask on Twitter using the #AdobeFireworks hashtag, and I can assure that you will get a response; there's a large, passionate community of Fireworks evangelists out there that are ready to help.

28 October 2011
Views
Permalink
Tweet

Matt Stow

Connecting the World with Fireworks