Home > Others > Useful Adobe Fireworks Resources: Extensions (Part 1)

Useful Adobe Fireworks Resources: Extensions (Part 1)

July 18th, 2014 Leave a comment Go to comments
Multi-Border Rectangle auto shape: controls explained.

Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze1 it back in 2013 and (at the same time) did not offer any replacement tool to its users. Nevertheless, since Fireworks runs fine today on the latest Mac OS X and Windows OS, and since it still offers a solid UI-design feature set, many designers continue to use it and rely on it daily.

For those of you who are searching for a similar tool, Sketch 3.02 seems to be a pretty good alternative to Fireworks, but it’s still not quite there yet; it’s Mac-only, and while its vector tools are very good and it now has artboards, pages, symbols and styles, it lacks a few of the basic features available in Fireworks. (I’ll talk more about possible alternatives to Fireworks in Part 2 of this series.)

So while we’re looking for alternatives, many of us also have to continue to use Fireworks3, and, as every designer out there knows, Fireworks works best with extensions! This article features some of the most useful (and free) Fireworks extensions that will help you work faster and be more effective with Fireworks; I have tested many of them myself, to be sure that they work flawlessly. In an upcoming article, I’ll be covering many articles and tutorials which I highly recommend that involve UI design and Fireworks, as well as a few freebies, such as editable Fireworks PNG files, templates, styles, Fireworks resource libraries, and so on.

To make the content of Part 1 better organized (and for easier navigation), I have grouped the extensions (commands, command panels and auto shapes) into the following main sections:

John Dunning’s Extensions

Lorem Ipsum1410 Auto Shape

Fireworks is a very good UI prototyping tool (we’ve covered this topic in previous articles such as “Developing a Design Workflow in Adobe Fireworks11,” “Interactive Prototypes and Time-Savers With Adobe Fireworks12” and “iOS Prototyping With TAP and Adobe Fireworks13”). Without a doubt, another very important part of the prototyping process is working with text.

When working with prototypes, placeholder text is often used. There are many ways in which you can add some placeholder text to your Fireworks PNG files, but the problem starts when you need to adjust the amount of text (perhaps the layout has changed, or the font size was increased so the text is now too long). This is when the Lorem Ipsum1410 auto shape (created by John Dunning676459524844393530252015) can help you.

Whenever you create a new placeholder text block, the auto shape will add just the right amount of text that will fit the shape you’ve created — no more tedious copying and pasting (or deleting) text to fit the space! Resizing the auto shape (using one of the yellow control handles) or changing the font size will also automatically adjust the amount of text, so you will always have exactly as much text as you need. This auto shape has many basic and advanced settings and could save you some serious amount of time.

The advanced options of the Lorem Ipsum auto shape. (Source16)

(Note: We have covered the use of the Lorem Ipsum auto shape in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Lorem Ipsum17“.)

Smart Resize1918 Auto Shape

Working with UI prototypes… again? Smart Resize1918 (by John Dunning676459524844393530252015) is a really smart auto shape that could be a real time saver during your next project! Basically, this auto shape helps you resize a group of elements without distorting any of them or disrupting your layout.

Let’s suppose you need to “smart resize” a group of objects. Select this group and use menu Commands ? Smart Resize ? Attach; the command will convert your group into a special smart object with the typical yellow resize handles. You can then use these handles to resize the group in any direction, and Smart Resize will resize only elements that extend across more than 50% of the group’s size, and retain the rest of the elements in position relative to the closest edge of the group.

For extra control over how elements in your Smart Resize group scale or are being repositioned, you can set anchor points for each individual object (for example, elements that have their X anchor set to the left will only scale on the right side; the left edge will stay fixed in proportion with the rest of the group).

Smart Resize auto shape
The Smart Resize auto shape in action. (Source112111105104553121)

(Note: We have covered the use of Smart Resize auto shape in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Smart Resize22“.)

Multi-Border Rectangle2423 Auto Shape

CSS allows a different width and color to be applied to the border on each side of an HTML element, but Fireworks’ vector rectangles are limited to a single border color and border width. The Multi-Border Rectangle2423 auto shape (by John Dunning676459524844393530252015) addresses this limitation, making it easy to mock up CSS-style borders right on the canvas in Fireworks!

Multi-Border Rectangle auto shape
The Multi-Border Rectangle auto shapes makes it easy to mock up HTML-style borders. Here’s a quick example: select the auto-shape (1), drag the blue control point on a specific border (2), and the border’s width will be changed without affecting the other borders (3).

Of course, you are not limited to the width of the borders only — you can also change the color of each border separately. To do so, click the crosshair icon next to a border to open its color picker. You can also change the background color of the Multi-Border auto shape, by clicking on the the upper crosshair icon in the middle of the rectangle. And if you need even more control, you can change the border widths and colors numerically, by using the Multi-Border auto shape’s Properties dialog box.

26
The Multi-Border Rectangle: control points explained. (See large preview27)

Tables Panel2928 Extension

Tables Panel2928 (by John Dunning676459524844393530252015) enables you to quickly mock up HTML-style tables without having to laboriously position each cell or border. Although it’s relatively straightforward to arrange elements in a grid using the alignment and distribution commands in Fireworks, as soon as the table contents change you’ll need to reposition everything manually. The Tables panel automates this tedious process.

Tables Panel extension for Adobe Fireworks
Using the Tables Panel, you can easily build and modify tables in Fireworks. (Source112111105104553121)

The Tables Panel is pretty flexible and has many options; with it, you can even insert a table from a text file (tab-delimited or comma-separated text file — *.txt, or *.csv). You can also import a table from a web page (you’ll just need to convert it to tab-delimited or comma-separated text file — *.txt, or *.csv, before importing it).

(Note: We have covered the use of the Tables Panel extension in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Tables Panel32“.)

Keyboard Resize3433 Commands

Keyboard Resize3433 are a set of 16 commands (by John Dunning676459524844393530252015) which are very useful when you need to quickly “smart resize” objects.

For example, you created a button with a text label. Now when you need to increase the width of the button by a few pixels on the right, you would typically select the rectangle and either stretch it to the right using the Scale tool or change its width using the the Properties panel. Then, you will need to also select the text inside the button and repeat the same action, because selecting both and scaling them would have distorted the text and messed up the margins on the side.

With the help of one of the commands in this set, you can simply select both elements, press Alt + right arrow a few times and now your button is wider, and so is the text block; text is not distorted, and the margins between the text block and the button are intact. This is precisely what the Keyboard Resize commands by John Dunning do (and much more)!

Smart Resize (extension for Adobe Fireworks)
Smart Resize commands allow for quick and easy resizing of multiple elements, without any distortion. (Source36)

Linked Images3837 Extension

When you import an image into a Fireworks document, Fireworks doesn’t maintain any link between the source file and the imported element — if the source file changes, you’ll need to find it, re-import it and then delete the previous image in the document. (Other Adobe products in the Creative Suite support the “smart objects” feature, which lets you import objects from one app into another, and when the source object changes, the imported one updates as well.)

The Linked Images3837 extension (by John Dunning676459524844393530252015) makes this process much easier. Let’s say you are working on a website design, and the client hasn’t finalized the logo yet. Open the Linked Images panel, click the “Insert” button to select the current version of the logo (it can be in any image format, supported by Fireworks), and place it in the layout. Later, when the logo has been updated, simply select the imported image and run the “Refresh” command in the panel to reimport the latest version of the source file.

Linked Images panel (Adobe Fireworks extension)
The Linked Images panel. (Source787740)

The Linked Images panel has many options and supports all image file formats that Fireworks can currently open, including Fireworks editable PNG (*.fw.png), Photoshop PSD (*.psd), Illustrator AI (*.ai), EPS (*.eps), and all standard “flat” image formats, such as PNG8/24/32, JPEG, GIF, BMP and TIFF.

(Note: We have covered the use of the Linked Images extension in “Optimizing The Design Workflow With Fireworks Extensions (Part 2),” section “Linked Images41“.)

Fill With Background4342 Extension

Fill With Background4342 (by John Dunning676459524844393530252015) can save you quite a bit of time, when you’re working with screen mockups. Usually, when creating mockups, you may need to take a screenshot of an existing dialog box or web page and then modify it. You’ll probably also have to paint over existing elements in the screenshot (like a button label, for example, to replace it with new text). So you select a portion of the background pixels in the screenshot, copy them, paste them, stretch them over the element you want to replace, and then flatten the pixels with the original image; it’s quite a tedious process. The Fill With Background command does all of this in just one step!

Fill With Background (Adobe Fireworks extension)
Fill With Background command (example A): Select the areas of the bitmap that you’d like to fill with background pixels (1), run the Fill With Background command [menu Commands ? Objects ? Fill With Background] (2), and the selection will be automatically filled with a column of pixels copied from just to the left of the selected area (3).
Fill With Background (Adobe Fireworks extension)
Fill With Background command (example B): Select the areas of the bitmap that you’d like to fill with background pixels and run the Fill With Background command (1); the selection will be filled from left to right — which doesn’t work for a vertical gradient — so leave the selection and simply run the command again (2); the command will then switch to filling the selection from bottom to top (3).

There are a few different ways of using the command, and generally it works very well for background patterns that repeat either horizontally or vertically.

Create Symbol From States4745 Command

Rich symbols are a powerful feature of Fireworks46, but creating them can be quite a complicated process. The Create Symbol From States4745 command (by John Dunning676459524844393530252015) lets you create basic rich symbols containing multiple states in just one step and with no scripting required! The symbols created by this command can switch between displaying different states, controlled by a State menu in the Symbol Properties panel.

Create Symbol From States extension
An example: When a symbol instance is selected, the Symbol Properties panel will display a single State menu control; you can change this menu to choose which state of the symbol to display. (Source49)

Insert Grids5150 Command

The Insert Grids5150 command (by John Dunning676459524844393530252015) lets you set up a grid for your design in no time; simply set all the parameters — the column width, gutter width, number of columns — and the command then will create a locked layer with the columns, rows and guides spanning the height of your canvas. You can even create “Grid presets” for the layouts that you use most often and later re-use them with a single click of the mouse!

Insert Grids command53
Insert Grids example: A setup for a 12-column grid. (See large preview54) (Source112111105104553121)

(Note: We have covered the use of Insert Grids command in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Grids56“.)

Generate Web Assets5857 Extension

No matter how optimized your workflow is, generating assets for the development phase after finishing up your design composites is always a slow task — who likes the process of taking each individual design element and exporting it in the right image format, later to be integrated in a website, application or whatever else you are building?

The Generate Web Assets5857 command (by John Dunning676459524844393530252015) can make this whole process much, much easier and simpler: once you are done with a design (or even while working on it), change the names of the objects that you want to export to the file names you want for them (including the file extensions), then run the Generate Web Assets command (menu Commands ? Export ? Generate Web Assets), define a folder, and presto! all of your assets will magically appear in this folder, with correct file names and in the correct formats.

Generate Web Assets (Adobe Fireworks extension)
Generate Web Assets process. (Source60)

(Note: We have covered the use of Generate Web Assets command in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Generate Web Assets61“.)

TweetFire6362 Extension

TweetFire6362 extension (by John Dunning676459524844393530252015) is a cool gadget for all Fireworks + Twitter fans out there. It lets you tweet the image you are currently working on in a few seconds without ever leaving the Fireworks canvas!

TweetFire (Adobe Fireworks extension)
TweetFire is very easy to set up. Install the extension and authorize it with Twitter (1), then post your first Fireworks tweet (2); once the tweet is successfully posted, TweetFire will show you a “Success!” message (3). You can even use multiple Twitter accounts.

TweetFire is very easy to use and the authorization step is done only once, when you add a new Twitter account to the TweetFire panel. After that, posting your current image you’re working on in Fireworks (be it a complex vector illustration or a UI design or simply a photo which you have retouched a bit) is only a click away. You can also decide if you’d like to post the full image or the current selection.

FlickrFire6665 Extension

FlickrFire6665 (by John Dunning676459524844393530252015) is very similar to TweetFire and (as its name suggests) lets you upload the image you are working on directly to your Flickr account without leaving Fireworks. It has many options — you can set the title of the photo, the description, the tags, if the photo should be public or private, etc. — and again, the authorization process with Flickr is only one step.

Personally, I have tried both TweetFire and FlickrFire and found them very easy and fun to use!

FlickrFire (Adobe Fireworks extension)68
Posting an image with FlickrFire. (See large preview69)

Aaron Beall’s Extensions

Export70 Commands

Export Commands71 (by Aaron Beall7672) is a set of commands that allows you to export pages and states to files at the same time, export slices as a single image (or each slice as a separate image), export all styles in one document as CSS styles, and export a selection (or a whole Fireworks PNG file) to SVG file format. (In my opinion, the “Export to SVG” feature is the most important one in this set.)

Export Commands
Export Commands.

(Note: We have covered Export Commands in detail — and specifically, the “Export to SVG” feature — in the article “Optimizing The Design Workflow With Fireworks Extensions (Part 3),” section “Export Commands73“.)

Path7574 Commands

The Path7574 set of commands (by Aaron Beall7672) is a very helpful set if you create a lot of vector artwork in Fireworks — which icon designers and illustrators certainly do. There are more than ten commands in this set, among them: Blend Paths, Convert Strokes to Fills, Deform to Path, Distribute To Points, Divide Paths, Exclude Paths, Fisheye Effect, and a few others.

Deform to Path — with this command, you can arc the bottom of a shape outward or inward as much as you need, or deform a shape based on a selected path:

Path commands: Deform tto Path command (Fireworks extension)
Deform to Path command. (Source787740)

Convert Stroke to Fill — this command that will be very useful if you do a lot of illustration work in Fireworks and need to treat outlines as filled objects. Convert Stroke to Fill also allows you to simulate gradients on a stroke (similar to how it is done in Illustrator)!

Path commands: Convert Stroke to Fill command (Fireworks extension)
Convert Stroke to Fill command: select an object with a stroke (left), run the command, and the stroke on the object will be converted to an object with a fill (center). You can then apply a gradient to the new object (right). (Source787740)

(Note: We have covered the use of some of the Path commands in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 2),” section “Path Commands79“.)

Matt Stow’s Extensions

Copy Color To Clipboard8280 Commands

Fireworks CS5.1 and older versions support all types of screen color spaces81, incl. RGB/RGBA, HSL and HSV. However, when you need to quickly access and copy a specific color value, it’s easy to do so only for RGB colors in #HEX format. Copy Color To Clipboard8280 (by Matt Stow9083) amends that issue and allows you to copy easily the color value of any object in #HEX or rgb()/rgba() format, with a couple of clicks of the mouse or with easily customizable shortcuts.

Copy color values to clipboard [#HEX or rgba()] is one click away in Fireworks CS6.84
In Fireworks CS6, it’s easy to copy color values to clipboard, in either #HEX or rgba() format. (See large preview85)

In case you didn’t yet upgrade to Fireworks CS6 (where the option to copy color values with one click was added to the new Color Selection box), this extension could be a nice little helper in your daily design tasks!

You can copy the color values in #HEX or rgb()/rgba() format; the color value can be copied from the color picker, or directly from the fill or stroke of any selected vector object. You can also assign shortcuts to the Copy Color commands, which will make working with them faster.

Copy Color to Clipboard extension86
Copy Color commands: You can easily copy any color in either #HEX or rgba() format (toggled via preference). (See large preview87)

CSS Professionalzr8988 Extension

CSS Professionalzr8988 (by Matt Stow9083) is a great extension that complements the CSS panel in Fireworks CS691. If you’re using the CSS panel in Fireworks, you should also get CSS Professionalzr!

CSS Professionalzr v1.1 (Fireworks extension).
CSS Professionalzr.

Other Extension Developers

Orange Commands9392 Set

Orange Commands9392 (by Ale Muñoz94) is a collection of commands for Adobe Fireworks that can make the life of a web designer easier. They are completely free and open source95, and are regularly updated. From aligning objects, to setting guides around selected objects, to combining two text objects into one — Orange Commands are a collection of small tasks that you would typically perform through a series of steps.

Orange Commands for Adobe Fireworks.
Orange Commands for Fireworks.

The latest version of Orange Commands is 1.7.2 and is available for Fireworks CS3, CS4, CS5/CS5.1 and CS6.

(Note: We have covered the use of Orange Commands in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Orange Commands96“.)

Texture Panel97 Extension

Currently in Fireworks, you can apply textures (which are pulled from your “Textures” folder) to any vector shape on the canvas. However, the way Fireworks works with textures isn’t very intuitive: you are presented with a simple list with all your textures, and when you mouse over a texture name, a small preview of that texture pops up next to it; but there is no easy way to get to your most commonly textures nor organizing them into groups.

Selecting and applying textures in Fireworks
Selecting and applying textures in Fireworks, using the Properties panel.

Here the Texture Panel98 extension (by Matt Curtis) comes to the rescue! This panel:

  • Sorts textures into lists (groups them),
  • Displays the textures as thumbnails (plus, you can change the size of the thumbnails),
  • Allows you to add your own textures easily and refresh the current list, and
  • Allows you to search for a specific texture, using the built-in search option!

You can get the Texture Panel from Sourceforge99 and read all the details about its use in our article (written by the author of the panel himself), “Using The Texture Panel In Adobe Fireworks100“. If you work a lot with textures in Fireworks, this panel is an absolute must-have!

Texture Panel (Adobe Fireworks extension)
Using the Texture Panel in Fireworks, you can easily organize and use your textures, and more. (Source101)

Guides Panel103102 Extension

One extension which can help you immensely in the task of managing guides, is the Guides Panel103102 (by Eugene Jude), which allows you to add guides to the canvas with precise numerical control.

Guides Panel extension
The Guides panel: “General” tab. (Source112111105104553121)

The panel also gives you the ability to work with selected objects — for example, if you need to place guides through the center of a selected object or around its edges (so you can align objects to it), you can simply select the object and create the guides with the help of the panel.

Guides Panel extension - a selection example.
The Guides Panel: An example of adding guides through the center of a selected object (“Selection” tab). (Source112111105104553121)

(Note: We have covered the use of the Guides Panel extension in detail in “Optimizing The Design Workflow With Fireworks Extensions (Part 1),” section “Guides106“.)

Gradient Panel & Gradient Direction Editor107 Extensions

Gradient Panel108 and Gradient Direction Editor109 (both created by Grant Hinkson110) are a couple of extensions that greatly enhance the control over gradients in Fireworks.

Gradient Panel extension (example)
The Gradient Panel provides fine control for manipulating gradients. (Source112111105104553121)
Gradient Direction Editor panel (example)
The Gradient Direction Editor panel can edit gradients’ angles with precise numeric control. (Source112111105104553121)

Touch Application Prototypes (TAP) for iOS113 Extension

Touch Application Prototypes (TAP)114 for Fireworks is an excellent free extension — in fact, it’s more like a full-featured iOS prototyping framework than a simple extension.

Latest iPhone and iPad models.
TAP + Fireworks allows you to build prototypes for all modern iOS devices.

While its very powerful and allows you to build great iOS prototypes for all modern iOS devices (including the latest iPhone 5/5c, iPad Retina and iPad Mini), the use of the TAP frameworks is a bit complex. Luckily for you, we have covered the use of TAP + Fireworks in the following series of articles by Shlomo Goltz from Cooper115:

  1. iOS Prototyping With TAP And Adobe Fireworks, Part 1116
  2. iOS Prototyping With TAP And Adobe Fireworks, Part 2117
  3. iOS Prototyping With TAP And Adobe Fireworks, Part 3118

This series covers everything you need to know about TAP and Fireworks: from starting to build your wireframes, then moving to the fully-developed design, and then how we can convert the design to a working iOS prototype. There are many solutions out there that help you create an iOS (or Android/Windows 8 Mobile) prototypes, but this is the only one which will allow you to do everything from A to Z inside one application — Fireworks!

TAP + Fireworks example (screenshot)119
TAP and Fireworks: working with hotspots and hotspot properties. (See large preview120) (Source121)
A TAP + Fireworks on an iPad.
A TAP + Fireworks demo being tested on an iPad. (Source122)

Tapotype124123 Library

While we’re still at the subject of making iOS prototypes with TAP and Fireworks, I should probably also mention Tapotype124123. Tapotype (currently at version 1.01) is a free reference library of transitions which was created specifically for the TAP + Fireworks prototyping workflow. It can help you in the task of making iOS prototypes with the TAP extension and is available for free download125 and use.

Tapotype library
Tapotype is free reference library of transitions for TAP + Fireworks.
TAP Tapotype example
Cubeleft/Cuberight transition example from the Tapotype 1.01 library. (Source126)

Fireworks Annotations Panel128127 Extension

Fireworks Annotations Panel128127 extension (by Mariano Ferrario129) will help you increase the efficiency of quickly annotating wireframes and designs, all inside the Fireworks document you’re working on. The panel allows you to add numeric bubbles to your document and associate a corresponding message with each annotation. In addition, you can export your annotated document in multiple file formats: images, HTML, Adobe PDF, TXT, CSV, or XML.

Annotations Panel (Adobe Fireworks extension)
The Annotations Panel extension.

The current version of the Annotations Panel supports Fireworks CS4, CS5/5.1 and CS6. (Please also note that unlike all of the extensions reviewed here, it’s not free but costs only $5.99.)

Specctr for Fireworks130 Extension

The Specctr plugin for Adobe Fireworks131 can help both designers and developers during the process of producing specs. Specctr is not free (I think it currently costs $49.00) but there is a completely free Lite Version of it available, too.

Specctr panel (Adobe Fireworks extension)
The Specctr extension for Adobe Fireworks. (Source132)

Open In Fireworks133 Firefox Add-on

Open In Fireworks134 is a nice little add-on for all Mozilla Firefox135 and Adobe Fireworks users out there. As its name suggests, it allows you to simply right-click on any image inside a web page, choose Open In Fireworks option from context menu and the selected image will then instantly open in Fireworks. “Open In Fireworks” is simple and yet it can save you a few extra minutes every day. Personally, I find it quite useful.

Open In Fireworks, a Mozilla Firefox add-on136
Open in Fireworks, a simple Firefox add-on.

Project Phoenix For Adobe Fireworks

Project Phoenix141138137

And last, but not least, I should mention Project Phoenix141138137, which is a personal project by Linus Lim139. Linus gathered there many extensions that he’s trying to “re-boot” (update) and the list if growing every week! So far, there were released: Font List panel, Super Nudge panel, Auto Save panel, Transform panel, Alignment Guides panel, Perspective Mockups panel, Retina Scaler panel, Used Fonts panel, and many more!

Keep an eye on Project Phoenix because now that Adobe is not planning to add new features to Fireworks, having new features added to this app with the help of commands and panels is even more important.

Project Phoenix (free extensions for Fireworks, all updated)140
Project Phoenix141138137 website.

Project Phoenix is a must-visit place for extensions, if you rely on Fireworks every day!

Conclusion

This was an attempt to provide an overview and list some of the best extensions for Fireworks. (Did I miss any indispensable ones? Let me know in the comments!)

In my next article, I will include some of the best tutorials and articles, but also many freebies (styles, templates, resource libraries, etc.) available for Fireworks. All of these can teach you how to save time and use Fireworks for UI design in a more optimal way. Stay tuned!

(mb, il)

Footnotes

  1. 1 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  2. 2 http://medium.com/amazing-article/what-is-new-in-sketch-3-4b92d8b25f3
  3. 3 http://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  4. 4 #ext-johndunning
  5. 5 #ext-aaronbeall
  6. 6 #ext-mattstow
  7. 7 #ext-various
  8. 8 #ext-phoenix
  9. 9 #conclusion
  10. 10 http://johndunning.com/fireworks/about/LoremIpsum
  11. 11 http://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  12. 12 http://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  13. 13 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  14. 14 http://johndunning.com/fireworks/about/LoremIpsum
  15. 15 http://twitter.com/fwextensions
  16. 16 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/
  17. 17 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#loremipsum
  18. 18 http://johndunning.com/fireworks/about/SmartResize
  19. 19 http://johndunning.com/fireworks/about/SmartResize
  20. 20 http://twitter.com/fwextensions
  21. 21 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  22. 22 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#smartresize
  23. 23 http://johndunning.com/fireworks/about/MultiBorderRect
  24. 24 http://johndunning.com/fireworks/about/MultiBorderRect
  25. 25 http://twitter.com/fwextensions
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/07/multi-border-rectangle-controls-explained-large-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/07/multi-border-rectangle-controls-explained-large-opt.png
  28. 28 http://johndunning.com/fireworks/about/Tables
  29. 29 http://johndunning.com/fireworks/about/Tables
  30. 30 http://twitter.com/fwextensions
  31. 31 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  32. 32 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#tables
  33. 33 http://johndunning.com/fireworks/about/KeyboardResize
  34. 34 http://johndunning.com/fireworks/about/KeyboardResize
  35. 35 http://twitter.com/fwextensions
  36. 36 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#keyboardresize
  37. 37 http://johndunning.com/fireworks/about/LinkedImages
  38. 38 http://johndunning.com/fireworks/about/LinkedImages
  39. 39 http://twitter.com/fwextensions
  40. 40 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  41. 41 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/#linkedimages
  42. 42 http://johndunning.com/fireworks/about/FillWithBackground
  43. 43 http://johndunning.com/fireworks/about/FillWithBackground
  44. 44 http://twitter.com/fwextensions
  45. 45 http://johndunning.com/fireworks/about/StateSymbol
  46. 46 http://www.adobe.com/devnet/fireworks/articles/enhancing_rich_symbols.html
  47. 47 http://johndunning.com/fireworks/about/StateSymbol
  48. 48 http://twitter.com/fwextensions
  49. 49 http://johndunning.com/fireworks/about/StateSymbol
  50. 50 http://johndunning.com/fireworks/about/Grids
  51. 51 http://johndunning.com/fireworks/about/Grids
  52. 52 http://twitter.com/fwextensions
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/2014/07/grids-command-large-opt.png
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2014/07/grids-command-large-opt.png
  55. 55 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  56. 56 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#grids
  57. 57 http://johndunning.com/fireworks/about/GenerateWebAssets
  58. 58 http://johndunning.com/fireworks/about/GenerateWebAssets
  59. 59 http://twitter.com/fwextensions
  60. 60 http://johndunning.com/fireworks/about/GenerateWebAssets
  61. 61 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#generatewebassets
  62. 62 http://johndunning.com/fireworks/about/TweetFire
  63. 63 http://johndunning.com/fireworks/about/TweetFire
  64. 64 http://twitter.com/fwextensions
  65. 65 http://johndunning.com/fireworks/about/FlickrFire
  66. 66 http://johndunning.com/fireworks/about/FlickrFire
  67. 67 http://twitter.com/fwextensions
  68. 68 http://www.smashingmagazine.com/wp-content/uploads/2014/07/flickrfire-large-opt.jpg
  69. 69 http://www.smashingmagazine.com/wp-content/uploads/2014/07/flickrfire-large-opt.jpg
  70. 70 http://fireworks.abeall.com/extensions/commands/Export/
  71. 71 http://fireworks.abeall.com/extensions/commands/Export/
  72. 72 http://twitter.com/AaronBeall
  73. 73 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#exportcommands
  74. 74 http://fireworks.abeall.com/extensions/commands/Paths/
  75. 75 http://fireworks.abeall.com/extensions/commands/Paths/
  76. 76 http://twitter.com/AaronBeall
  77. 77 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  78. 78 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/
  79. 79 http://www.smashingmagazine.com/2013/09/20/optimizing-the-design-workflow-with-extensions/#pathcommands
  80. 80 http://mattstow.com/#ccc15
  81. 81 http://en.wikipedia.org/wiki/List_of_color_spaces_and_their_uses
  82. 82 http://mattstow.com/#ccc15
  83. 83 http://twitter.com/stowball
  84. 84 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-hex-rgba-dialog-large-opt.png
  85. 85 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-hex-rgba-dialog-large-opt.png
  86. 86 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-color-commands-large-opt.png
  87. 87 http://www.smashingmagazine.com/wp-content/uploads/2013/01/copy-color-commands-large-opt.png
  88. 88 http://mattstow.com/css-professionalzr.html
  89. 89 http://mattstow.com/css-professionalzr.html
  90. 90 http://twitter.com/stowball
  91. 91 http://helpx.adobe.com/fireworks/learn/tutorials/how-to/extract-css-properties.html
  92. 92 http://orangecommands.com/
  93. 93 http://orangecommands.com/
  94. 94 http://twitter.com/bomberstudios
  95. 95 http://github.com/bomberstudios/fireworks
  96. 96 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#orangecommands
  97. 97 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  98. 98 http://sourceforge.net/projects/texturepanel/
  99. 99 http://sourceforge.net/projects/texturepanel/
  100. 100 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  101. 101 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  102. 102 http://www.adobe.com/devnet/fireworks/articles/guides_panel.html
  103. 103 http://www.adobe.com/devnet/fireworks/articles/guides_panel.html
  104. 104 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  105. 105 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  106. 106 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#guides
  107. 107 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#gradientpanel
  108. 108 http://www.granthinkson.com/2007/01/23/fireworks-gradient-panel/
  109. 109 http://www.granthinkson.com/2008/05/15/new-fireworks-panel-gradient-direction-editor/
  110. 110 http://www.granthinkson.com/
  111. 111 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  112. 112 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  113. 113 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  114. 114 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  115. 115 http://www.cooper.com/
  116. 116 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  117. 117 http://www.smashingmagazine.com/2013/01/25/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  118. 118 http://www.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
  119. 119 http://www.smashingmagazine.com/wp-content/uploads/2014/07/tap-fireworks-prototype-screen-large-opt.png
  120. 120 http://www.smashingmagazine.com/wp-content/uploads/2014/07/tap-fireworks-prototype-screen-large-opt.png
  121. 121 http://www.smashingmagazine.com/2013/01/25/ios-prototyping-with-tap-and-adobe-fireworks-part-2/
  122. 122 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
  123. 123 http://tapotype.com/
  124. 124 http://tapotype.com/
  125. 125 http://tapotype.com/download-tapotype/
  126. 126 http://tapotype.com/
  127. 127 http://www.3revolutions.com/public/fw_annotations.php
  128. 128 http://www.3revolutions.com/public/fw_annotations.php
  129. 129 http://www.3revolutions.com/public/bio.php
  130. 130 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  131. 131 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  132. 132 http://www.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/
  133. 133 http://addons.mozilla.org/en-US/firefox/addon/open-in-fireworks/
  134. 134 https://addons.mozilla.org/en-US/firefox/addon/open-in-fireworks/
  135. 135 https://www.mozilla.org/en-US/firefox/new/
  136. 136 http://addons.mozilla.org/en-US/firefox/addon/open-in-fireworks/
  137. 137 http://projectphoenix.io/
  138. 138 http://projectphoenix.io/
  139. 139 http://twitter.com/chunwui
  140. 140 http://projectphoenix.io/
  141. 141 http://projectphoenix.io/

The post Useful Adobe Fireworks Resources: Extensions (Part 1) appeared first on Smashing Magazine.

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.