Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 17 2014

15:00
Tags: Fireworks

December 19 2013

10:45

The Present And Future Of Adobe Fireworks


  

Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks. And Adobe is not offering a replacement tool for Fireworks users (at least, not for now.)

What does this mean for you if you use (and rely on) Fireworks to design user interfaces and screens? What are your options?

In this article, we’ll take a close look at Adobe Fireworks, explaining why it is a unique and powerful design tool, how we can continue to use it effectively, and what our alternatives are for the future.

But first, a bit of background.

I have been using Fireworks since the Macromedia days, and I find it indispensable in my daily design workflow. Fireworks is like a small (but powerful) Swiss Army knife, or a superhero. In short, Fireworks is extremely versatile and powerful for screen design.

In fact, I am so passionate about this tool that when Vitaly Friedman asked me to be the editor of the Fireworks section of Smashing Magazine a couple of years ago, I instantly said “Yes!” Fast-forward to today: We’ve published over 20 high-quality articles about Fireworks and received many positive comments from our readers.

The news earlier this year that Adobe is abandoning Fireworks made me very sad. Looking at the over thousand comments on the Adobe Fireworks blog, it seems that I am not alone and that Fireworks will be missed by many.

So, what can you do if you also use Fireworks?

The good news is that we have quite a few options to continue using it, as well as some new apps on the horizon that could take its place. Let’s explore them!


1. Adobe Fireworks: The Current Situation

First, let’s look at the bad news official status of Fireworks. In May 2013, Adobe announced that it was “feature-freezing Fireworks CS6”, meaning that no new features would be added to Fireworks and that Adobe has ceased active development.

Adobe Fireworks
The future of Adobe Fireworks is quite uncertain. (Image: by Ryan Hicks.)

The good news? Adobe has stated that official patches (i.e. minor updates) will be provided from time to time so that Fireworks CS6 continues to work on the latest versions of Mac OS X and Windows — hopefully, for a few more years. The first update (12.0.1) was released in June, and I hope we’ll see a few more in the next year or two. Fireworks CS6 is still available to all Adobe Creative Cloud (CC) subscribers, and it can be also purchased as a standalone version.

(Note: Unfortunately, it is very unlikely that Adobe will ever open-source Fireworks, even if there was a petition with thousands of signatures asking Adobe to allow the community to continue developing and enhancing Fireworks. Fireworks is tightly integrated with software that Adobe continues to develop and sell.)

Now, the better news? While Adobe will not add features to the latest (and last) version of Fireworks, a great community of developers continues to add valuable new functionality to Fireworks through the release of free extensions. For example, SVG export was recently added to Fireworks, then SVG import and many other new features. (We’ll talk about extensions in detail later.)

So, while Fireworks’ future does not look bright, you can continue to safely use it for your work today and at least for some time. Also, alternative apps could replace Fireworks in the future. Within weeks of Adobe’s announcement about feature-freezing Fireworks, several competing tools were announced. Clearly, Fireworks is an important tool for many designers, and there is a clear place for it (and tools like it) in our workflow and processes. (We’ll talk a bit about these alternatives later in this article, too.)

2. Why Fireworks Is So Awesome (Today)?

Designers, especially ones with little or no experience with Fireworks, often ask, “Why should I use Fireworks for UI design and screen graphics? Why not use Photoshop (as most visual designers do), combined with Illustrator? Or why not some other tool?”

Many features make Fireworks an excellent (and even indispensable) tool for screen design. We’ll quickly list a few below.

Focus on Screen Design

Fireworks is a tool to design for screens; thus, it is focused. It has features that help the UI designer work quickly and accurately, and clutter is kept to a minimum (for example, it has no print or 3-D features). It is also intuitive to use and has wireframing and prototyping capabilities. Fireworks is like a Swiss Army knife for UI design.

Powerful Vector Tools

Fireworks has powerful vector tools, too. In this regard, you could easily compare it to Adobe Illustrator — yet Fireworks’ tools are easier to master. You can go from the simplest of wireframes to the most complex of screen graphics, illustrations, icons, and full-page designs and comps, and then export the entire page or just selections as optimized bitmaps or SVG, without ever needing to switch to another app!

Good Bitmap Editing Tools

Fireworks also has full bitmap editing tools, so you don’t need to jump from Fireworks to another app when you want to modify bitmaps (for example, when you have to make a quick color correction on an imported photo, crop an image, apply a vector mask, etc.).

Create Live Prototypes

Create live (i.e. HTML) without ever leaving Fireworks? Yes, that’s possible. We’ve covered this in the past. Fireworks is also invaluable for other types of live prototypes; for example, you could quickly create a prototype of a music player?

Create Live iOS Prototypes

Fireworks can also create iOS prototypes. From wireframes to an iOS prototype to the final polished design — all of these steps can be done without leaving this one design tool!

The topic of iOS live prototyping with Fireworks and TAP was covered in great detail in the three-part article by Shlomo Goltz, “iOS Prototyping With Adobe Fireworks and TAP” (part 1, part 2, part 3).

The (Smart) Fireworks PNG File Format

Fireworks saves to a special editable PNG format, which offers many advantages: small file size (multi-page Fireworks PNG files are usually less than 10 MB in size, while a single PSD file can easily reach a few hundred MB, even for a one-page design!), the ability to embed custom meta data (such as annotations, notes and comments) within the source file itself, the ability to preview files in Finder and Explorer, the ability to make special libraries of symbols (which can be indexed and searched, as in the example of the Evernote and Fireworks workflow) and, last but not least, the ability to view a live preview of a single-page Fireworks PNG in any browser or device.

Excellent Exporting, Opening, Importing and Saving Options

Fireworks can export to the following formats, with excellent compression and quality: PNG32 (i.e. PNG24 + alpha transparency), PNG24 (with no transparency), PNG8, PNG8 + index or alpha transparency, JPG and JPG progressive, selective JPG, GIF and GIF animated, SVG, and ICO (for favicons).

In addition to all of these “flat” file formats (and, obviously, the editable file-name.fw-opt.png), Fireworks can open most Photoshop (PSD) and Illustrator (AI) files, Encapsulated PostScript (EPS) files and most SVG files.

Fireworks saves to the editable Fw PNG (file-name.fw-opt.png) format by default, but it can also save to PSD (file-name.psd) and AI (file-name.ai) formats.

(Note: Support for PSD and AI files has some limitations, especially as the features of Photoshop and Illustrator continue to change.)

Pages and Master Page, Layers, States (and Objects)

Nearly all websites and mobile apps have more than one page or screen, and many pages and even many states (or variations) of those pages have to be designed. One of the most powerful features of Fireworks is its ability to contain many pages in a single file, as well as contain many states for both pages and individual objects in a design (the article “Using Pages, States and Layers in Fireworks” discusses this thoroughly).

Pages, layers and states in Fireworks
Pages, layers and states

Those of you familiar with Photoshop might know about layer comps, but the pages feature in Fireworks is much easier to use and understand; multiple artboards in Illustrator serve a similar purpose, but once again, the concept of pages is more intuitive and corresponds more closely to our mental model of the pages in a website or app. Additionally, the Master Page in Fireworks enables us to create a standard structure (for example, header and navigation) for all of the pages on a website in one place and have it appear on all pages automatically. Thus, if you edit the Master Page, the changes will instantly and automatically appear on all pages.

The text, images and graphics that are placed on pages are organized in layers; layers may contain multiple objects and even sublayers. Because Fireworks is an object-based design tool (that is, each object is independent of the others — you simply click on an object on the canvas to select it), we use the layers primarily to organize our source files. We can share layers to multiple pages (so, editing on one page would change that layer on all pages), control the visibility of layers, and even export the objects of selected layers.

Fireworks also enables us to create multiple states (previously called “frames” because they were originally used for animated GIFs and Flash animations) of pages and individual objects. This is important and very useful for UI design, because many screens and screen elements have multiple possible states (for example, buttons could have hover or focus and down states), and sometimes you’ll design a few options for the same object to show variations to your client. States are also important for symbols (both graphic and animation) and rich (or component) symbols, because we can encapsulate many variations in a single symbol and then reuse that symbol in different states throughout the design and across pages, and we can even share symbol libraries with others to use them across files and projects!

Copy And Paste Attributes

Want to apply all properties of a particular object (colors, stroke, fill, live filters, etc.) to another object (or group of objects)? Easy! The super-powerful command Control/Command + C and then Control/Command + Alt + Shift + V will do it for you!

And what if you want to apply only certain properties of one selected object to another? This is possible, too, with the Paste Selected Attributes extension!

Excellent Tool for Mobile Design

Because Fireworks is (primarily) a vector design tool (which means easy scalability), it can be used equally well for all kinds of mobile design: iOS, Android, Windows Mobile.

Design From A to Z in Fireworks

Fireworks could be the right tool for every stage of a screen design project. You can start with ideas and sketches on paper, move to wireframes, then to (live) prototypes, then to the final polished design (and design assets), without ever leaving Fireworks. No need to constantly jump between tools depending on the task at hand — this workflow could save you quite some time.

Symbols and Rich Symbols

Fireworks has a two types of symbols: graphic symbols and rich (or component) symbols. The value of symbols is that they can be created once and then used multiple times throughout a design wherever needed. Then, if you edit a symbol, those changes will immediately appear in every occurrence (or instance) of the symbol in the document. The key difference between a graphic symbol and a rich symbol is that the former has the same appearance in all instances (for example, icons are typically created as graphic symbols), whereas rich symbols are much more complex, and each instance can be customized (for example, a button might have the same shape, but its text label can be edited and its color changed to indicate alternate states, such as hover and disabled), yet the core design of the rich symbol would be shared by all instances.

While graphic symbols are common to many design tools, rich symbols are especially powerful because they combine graphics, editable properties and even code, so that we don’t need to draw and redraw similar objects repeatedly. Their efficiency alone is great enough, but rich symbols can also be saved in libraries and shared with others, because they use the same editable Fireworks PNG format as all other Fireworks documents. There are even techniques to create cloud-based symbol libraries that can be shared and managed by an entire team!

Here are a few resources to teach you more about using symbols in Fireworks:

Styles

Styles are like CSS for Fireworks files: Define text and graphic styles once, then apply them as needed throughout an entire document. If you edit a style, all instances of that style in the document will be updated. Creating, saving and sharing style libraries with others to ensure design consistency across a team is also easy. Fireworks even enables you to apply a style to an object and change how that instance appears without breaking the link to the original style; then, you can revert to the original, save the modifications as a new style and even use the modifications to redefine and update the original style, with those changes being applied to all instances of the style in the document.

In fact, styles are so much like CSS that an extension exists to export styles as CSS!

Styles in Adobe Fireworks

Styles in Fireworks: Creating, redefining, copying and breaking a link to a style are easy to do.

Here are some sources that you might find useful:

Slicing

Slicing is a common way to extract and save specific graphics from a complete design, such as background patterns, button graphics, icons and illustrations. Fireworks makes it easy to slice multiple graphics quickly. Simply select all of the objects that you want to save as graphics, click Edit → Insert → Rectangular Slice (or right-click and choose Insert Rectangular Slice from the context menu), and choose “Multiple Slices” from the dialog that appears.

Slices will then be automatically drawn around each object individually. Each slice can be named (in the Properties panel) and can have its own optimization settings, so exporting PNGs, GIFs and JPGs all from the same document and all at the same time is possible! Slices remember their name, saved file location and optimization settings, so you can edit the design and re-export the new graphics without having to re-slice and re-optimize.

If you need to slice just a portion of a design or object, rather than the whole thing, then the Slice tool in the “Tools” panel makes it easy to draw borders around exactly what you want to export as a graphic.

Note: While you can easily export slices from a Fireworks PNG design, creating an individual slice for each element that you want to export might be a pain. With the “Generate Web Assets” command, exporting different parts of your document becomes so much easier. Simply specify how you want an object to be exported (i.e. change its name to include an image-based file extension, like header-opt.png or company-logo-opt.png), and then export. Voilà! PNG, GIF and JPG file formats are supported.

Here are some resources that might help you:

Pixel Perfection

Fireworks always works with whole pixels, and objects fall on a pixel-perfect grid. There’s no need to activate any setting to “snap to pixel” because, by default, everything snaps to the whole pixel. In rare cases when an object or a particular object property falls off the pixel grid, such as when scaling a vector object up or down and the nodes fall between pixels, the intuitive command Modify → Snap to Pixel (or Control/Command + K) fixes any problems. If you modify a vector object with anti-aliasing applied to the stroke and/or fill and you notice blurry edges, then just select the object and snap it back to pixel to make it sharp and clear again.

Properties Panel and Direct Interaction

In Fireworks, you interact directly with the objects on the canvas (without having to dig through hundreds of layers in the Layers panel) using the Select and Subselect tools. When an object is selected, the Properties panel (also called the “Property Inspector”) automatically updates to display information about that object and shows nearly all of the properties that may be edited. This makes it easy to draw, select and modify almost any type of object directly: vector objects, text blocks, bitmap objects, vector masks, hotspots and so on. Auto shapes (which are special types of complex vector objects — more on these below) can be modified, too, using the Properties panel, but you can also modify them directly on the canvas by using their control points.

The Fireworks Properties panel.
The Properties panel allows you to intuitively edit (and check) the properties of any object or group of objects selected on the canvas. (View large version)

So, regardless of the type of object on the canvas (text, vectors, symbols, slices, hotspots, groups or bitmaps), as soon as it is selected, the Properties panel will tell you what it is and will enable you to modify it instantly.

As you see in the illustration above, the Properties panel intelligently adapts to the type of object. In the following screenshots, you can see when various objects are selected:

Gradients Made Easy

Creating gradients is easy with Fireworks because they are edited in live mode. You can intuitively control all gradient properties directly from the Properties panel.

Gradients in Fireworks
Gradients in Fireworks are powerful yet easy to use. (Image: “Optimizing the Design Workflow With Fireworks Extensions, Part 3,” Ashish Bogawat)

Also worth noting is that Fireworks offers many more types of gradients than other graphic editors. Here are all of the gradient types supported: linear, radial, rectangle, cone, contour, satin, starburst, folds, ellipse, bars, ripples and waves.

Two free extensions make working with gradients even easier: Gradient Panel and Gradient Direction Editor (both of which we’ve reviewed in detail).

Blending Modes

Believe it or not, Fireworks has more blending modes than Photoshop, and some of these unique blending modes are pretty useful. Blending modes can be applied to any type of object, not just bitmaps, and can be used to adjust an appearance as well as to create special effects.

Fireworks blending modes
Fireworks’ blending modes

9-Slice Scaling Tool

Sometimes when scaling an object up or down, we want to maintain the appearance of some parts of the object so that it does not appear stretched or distorted. If we just made it large or smaller, everything would change in scale proportionally; if we made it just wider or just taller, then it would appear distorted. 9-Slice Scaling enables us to identify which parts of the object should scale (and in which direction) and which parts should maintain their shape and proportion.

For example, buttons often have rounded corners, and these should not be distorted, no matter how wide or narrow a button becomes.

9-slice scaling in Fireworks (example with button).
Maintaining the appearance and proportions of certain parts of an object (in this case, the radius of a button’s corners) is easy with the 9-Slice Scaling tool.

Modal dialog boxes also often have rounded corners as well as a title bar with icons and a text label, but the amount of content in the dialog will vary, so the dialog box will sometimes need to be large and sometimes small, but the corners, title bar and icons should always have the same proportions and scale.

9-slice scaling in Fireworks (example with modal dialog).
Maintaining the appearance and proportions of certain parts of an object (in this case, the title bar with icons and the rounded corners of a modal dialog box) is easy with the 9-Slice Scaling tool.

A Versatile Alignment Panel

With the help of the Align panel, you can align and distribute objects relative to the canvas or to each other. You can space them evenly or specify a precise value (in pixels). The options here are almost limitless.

Find and Replace in Fireworks
The Align panel in Fireworks offers many options.

Live Filters

Fireworks’ live filters can be easily applied to any type of object, and they are non-destructive, which means that you can add and modify filters without altering the original object or image. The stacking order of applied live filters can be changed with simple dragging and dropping; the visibility of an applied live filter may be turned on and off; and multiple filters of the same type may be applied to a single object on the canvas. Live filters can be used for color adjustment, shadows and glows, and blur effects, and even to add and edit Photoshop live effects if you have opened a PSD file.

Fireworks live filters (example)
This simple example shows two “Inner Shadow” live filters applied to the same object.

Linked Images

Other products in Adobe’s Creative Suite support the “smart objects” feature, which lets you import objects from one app to another. When the source object changes, the imported one will update as well. Thanks to the Linked Images panel, achieving almost the same functionality in Fireworks is now possible!

Scale Stroke and Effects

Because Fireworks was built from the ground up as a screen design tool, it has many little things that help the UI designer. One of these is the option to toggle on and off the “Scale Stroke and Effects” option, which is very useful when you’re working on a design that has to be rescaled later (for example, if you’re working on both a Retina and non-Retina design for iOS).

Scale stroke and effects
“Scale Stroke and Effects” is easy to enable and disable.

Auto Shapes Super-Power!

Fireworks’ vector auto shapes are a unique feature and superb! You can easily create (and then later edit) rounded rectangles, stars, polygons, arrows, cog wheels and many other types of objects with only a couple of clicks of the mouse or by using the Auto Shape Properties panel. New auto shape objects can be placed on the canvas from the “Vector Tools” section of the Tools panel and from the Auto Shapes panel. You can change all of the properties of these special objects easily and with numeric precision. Auto shapes may be edited both as special auto shape objects and as vector objects.

Creating custom auto shapes is also possible, and many such objects exists as free extensions — the Multi-Border Rectangle auto shape, the Lorem Ipsum auto shape and the Filter Light Source and Sunburst auto shapes, to name just a few.

CSS Properties

In Fireworks CS6, you can easily extract any CSS properties of a selected object with the help of the CSS Properties panel. Combined with Matt Stow’s excellent free extension, Fireworks CSS Professionalzr, the feature can save you development time and help you read, copy and reuse CSS properties more quickly.

Find and Replace

Find and replace — most applications have this feature, so nothing special, right? Wrong! Find and replace is much more powerful in Fireworks.

Fireworks can search (and search and replace) in Fireworks PNG documents for the following objects and object properties:

  • text strings,
  • fonts,
  • colors,
  • URLs.

You can restrict a search to a particular page, a state, a manual selection of objects or layers, a particular Fireworks PNG document or even a set of closed Fireworks PNG documents located in a particular folder!

Find and Replace is also very flexible. For example, when searching for a particular color, you can target the following: fills and strokes, only fills, only strokes, live filters, or all properties! Similarly, Find and Replace can be adapted to search for text strings, fonts used, etc.

Find and Replace in Fireworks
The Find and Replace panel is powerful and customizable.

Batch Processing

Have you ever had to repeat the same actions over and over again, such as editing, resizing, optimizing and renaming hundreds of photos? Batch processing to the rescue!

Fireworks makes it easy to select multiple files and repeat the same actions on each one. Batch processing allows you to change export and optimization settings, change sizes, perform find-and-replace actions, rename files when saved, and even apply any commands (including custom ones!) that appear in the “Commands” menu (for example, “Convert to Sepia,” applying a “Gaussian Blur,” etc.). Batch actions may be saved and reused, too; simply go to File → Batch Processing, select the files and create your own batch script.

And If All of the Above Are Not Enough, Extensions to the Rescue!

With the help of free extensions made by developers, Fireworks becomes a much more functional, robust and productive tool. (We’ll go over some of the best extensions later in this article.)

Let’s Sum It Up: 1 + 1 = 3 !

So many other powerful features are in Fireworks that we couldn’t mention and describe them all in one article.

The most important thing to know is that, while many of Fireworks’ features are not unique (other graphic design apps have similar features), the combination of features that Fireworks offers in one package is unique. You can work with vectors and raster (i.e. bitmap) images in Fireworks simultaneously; simply select an object, and Fireworks’ UI will automatically adapt to give you the tools, properties and options for that type of object. You can go from paper sketches to rough wireframes to a real live prototype (HTML or mobile) to a final polished multi-page design, with optimized exported assets in perfect quality, without ever leaving the app!

You can do nearly everything in Fireworks. Even better, you can work in Fireworks and import assets from other programs, such as Photoshop and Illustrator.

Fireworks is like a Swiss Army knife for screen and UI design. It has all of the tools one might need in a single lightweight package, offering quite a lot of power and versatility. Don’t forget about speed, too — working with Fireworks is all about efficiency and speed. You could, of course, use this Swiss Army knife in conjunction with other apps, but you’ll be relying on this app most of the time, because it has everything in one place, easily accessible, easily learnable and highly intuitive.

This is why thousands of people use Fireworks today: screen and UI designers, illustrators, Web designers, iOS and Android app designers, front-end developers and more.

Is Fireworks the Perfect Tool for UI Design?

No, Fireworks is not perfect. I have used this app for thousands of hours, and I must admit that.

But what tool for UI design is perfect? Is Photoshop the perfect tool for UI design? Is Illustrator? Or Sketch? Or InDesign? Or Pixelmator?

Is there even such a thing as a perfect UI design tool? I don’t think so.

Photoshop is the elephant in the room most obvious example. It was created for photo editing and print design tasks. A few UI design features were later added to it, yet Photoshop still lacks many features that would make it really useful (and easy to use) for screen design. Still, thousands (if not millions) of users worldwide have been working with this imperfect tool for more than a decade and use it successfully for UI design tasks.

Fireworks, on the other hand, was built from the ground up for UI and screen design, and every single feature in it is intended specifically to help the UI designer. Even though Fireworks isn’t the perfect tool, in my opinion it best meets the needs of UI designers. As I said earlier in this article, 1 + 1 = 3. Like a Swiss Army knife, none of the features in Fireworks is perfect, but when you combine them all, you realize that you’re able to design UIs more quickly than any other combination of features would allow and that you are very efficient in the process.

And yes, Fireworks has a few weaknesses. Its color picker feels a bit old. It cannot use more than 2 GB of RAM (because it’s a 32-bit app). If you work with too many pages or symbols in one document, Fireworks can feel a bit slow. Bugs do appear randomly (and then disappear). And so on. But bugs appear in other programs, too, which doesn’t stop us from using them, right? UI designers need the right tool for the job, not the perfect one, and Fireworks manages to be the right tool most of the time.

Finally, there are probably a few features that Fireworks does not have but that would make it even more useful to designers and developers. While Adobe will not likely add any more features, the great community of developers will continue adding extensions to the app, keeping it up to date for quite some time.

3. A Few Fireworks Designs

Let’s look at some excellent illustration and interface design work, done entirely in Fireworks.


Kawasaki Vulcan 1700 (vector illustration), by Isabel Aracama


Ferrari 288 GTO (vector illustration), by James Parker


Nikon (iOS icon), by Gianluca Divisi


TouchCDJPro (iOS UI), by Gianluca Divisi


Social bar (UI design), by Lorenzo Franchini


Expenses app (UI design), by Lorenzo Franchini


Restaurant navigation (UI design), by Tomas Gajar


Sample navigation (UI design), by Tomas Gajar

More Examples? Sure!

At the end of 2010, I wrote a pretty detailed piece for Smashing Magazine, “The Power of Adobe Fireworks: What Can You Achieve With It?.” In it, I showed many examples of Fireworks being used successfully for UI design, Web design, amazing vector illustrations, logos, elegant icons, digital paintings and comic strips, and even for planning and creating Adobe’s entire CS5 branding. While the article is three years old now, the examples in it are still relevant, and you can take a quick look if interested.

Adobe CS5 branding (made with Fireworks)
Adobe’s CS5 branding can be made right in Fireworks. (View large version)

4. The Power of Fireworks Extensions

One aspect of Fireworks makes it even more powerful and deserves special mention: extensions. Extensions are written in JavaScript, run directly in Fireworks, and add new features to make the app better and more productive. Extensions can be written to do almost anything, making it possible to configure Fireworks to be exactly the tool you need!

We have published an excellent series of articles, by Ashish Bogawat, that cover in depth some of the best extensions for Fireworks: part 1, part 2, part 3.

Personally, I recommend the following free extensions:

Also worth mentioning is Project Phoenix, where many indispensable Fireworks extensions are frequently improved and updated!

Using Fireworks Extensions Yourself?

If you’re using Fireworks with extensions, which are your favorites? Which extensions work the best for you and help you the most? Share them with us in the comments!

5. Recommended Articles and Tutorials

Before reviewing the apps that might replace Fireworks in the future, we’ll recommend some articles and tutorials. These articles could prove very useful to you, and they showcase some powerful workflows in the app.

UI and Icon Design

Interactive (HTML and Mobile) Prototypes

Designer Workflows and Techniques

Reasons to Use Fireworks for UI Design

(Note: There are plenty of reasons to use Fireworks for Web, UI and screen design. While it competes partly with Photoshop, Illustrator, Sketch and other tools, Fireworks is a great tool and still relevant, and it offers a modern, powerful workflow for all kinds of screen design, even today.)

6. Replacing Fireworks: Exploring Our Options For The Future

Many designers will continue to use Fireworks CS6 with their favorite extensions as long as it is stable and continues to run on Windows and Mac OS X. But looking at the alternatives is important because sooner or later we’ll have to move on. Which apps might replace Fireworks today or tomorrow? Let’s take a quick look.

Today

Many people say that Sketch is great, but it still has a few limitations and lacks many of the features of Fireworks. And unfortunately, it runs only on a Mac. But if you’re on a Mac, I strongly recommend trying it! These three fairly recent articles shed more light on Sketch and its features:

Made with Sketch (by Isabel Arakama)
Sketch is quite powerful for UI design. This vector illustration was made entirely with Sketch by the talented designer Isabel Aracama. (View large version)

Antetype is an interesting alternative, as is Pixelmator. Unfortunately, both are Mac-only, too.

Meanwhile, Xara Designer Pro is a UI design tool that runs only on Windows. PC Pro has a quick review of it.

Tomorrow

Alan Musselman (former Macromedia/Adobe Fireworks project manager and developer) is working on a new project, codenamed Project EvolveUI. EvolveUI should address many of our modern screen design needs (such as combined vector and bitmap tools, styles, symbols, the ability to build interactive prototypes, etc.), so this sounds like a promising alternative. Bonus points: The app will be open-source and available on all platforms (Windows, Mac and Linux). The first version is expected at the end of 2014, but if you’re interested, you can sign up to the project’s Google Group and join alpha and beta testing and the discussions.

A new screen (layout) design tool by Tom Giannattasio and Adam Christ is in the works: Project Macaw. A Kickstarter project supports it, and the first version for Mac and Windows should be available in early 2014. This app looks promising, too, but unfortunately, it might not replace Fireworks because it will lack vector and bitmap editing tools, and it will be more like InDesign for the Web than a full-featured screen design app.

As far as I know, Adobe is not working on a replacement. Many of Fireworks’ best features have already been added to its other apps (namely, Photoshop, Illustrator and Edge Reflow), so Adobe recognizes the power of Fireworks’ tools and workflow. However, moving features into other apps is not really a replacement — it just means that designers will be spending more time working across multiple apps.

Last-minute update: It seems that Adobe is working on a new design tool that could replace Fireworks in the future. I’ll update this article once I know more.

A Note to Our Readers

If you currently rely on Fireworks for UI design but have recently discovered an app that suits you better and that might replace Fireworks for you, please let us know in the comments. We’re always looking for alternatives!

7. Conclusion

What are our plans, you may ask? For now, we will keep the Fireworks section open. Many designers out there continue to rely on Fireworks and use it. And, with the promise from Adobe to keep Fireworks available for some time longer, it seems that anyone using Fireworks today is still safe.

Of course, we, too, are exploring alternatives! New tools are emerging every day, and sooner or later a better tool will be created by some talented people who really understand how we design for the screen. (One of those tools might be Sketch, to which we’ll dedicate an article in the near future. Another is Project EvolveUI, which is very promising but still in alpha.)

Finally, thank you to the amazing Fireworks community, a community driven by passion and one that makes Fireworks so much better through the contribution of free extensions, useful articles and tutorials — and love!

Also, thank you to Smashing Magazine’s authors — and readers, of course! You guys rock! Your constant support convinces us that we’re doing the right thing with the Fireworks section. We’ve done our best to provide the community with the highest-quality, most in-depth articles about Fireworks and all of the excellent workflows that it offers, and I feel very proud of our work.

Special thanks to Dave Hogue (currently UX Design Manager at Google), who helped me with this article and who has been involved in the Fireworks community around the world for many years. Dave has shared his experience with and knowledge of design, workflow and Fireworks in numerous articles, tutorials and videos (and on Twitter, of course), and he helped me to make certain that this article doesn’t overlook any of the great features that make Fireworks so amazing and useful.

(mb, al, ea)


© Michel Bozgounov for Smashing Magazine, 2013.

Tags: Fireworks

November 15 2013

15:05

Blueprints For Web And Print: Specctr, A Free Adobe Illustrator Plugin


  

Have you ever submitted design files to a development team for production and a few weeks later gotten something back that looks nothing like your original work? Many designers and design teams make the mistake of thinking that their work is done once they’ve completed the visual design stage.

A design is more than a simple drawing on a canvas in Illustrator, Fireworks or Photoshop; it is a representation of function. “Form follows function” is a well-known principle, first coined in 1896 by the architect Louis Sullivan. How will the website work? How will that section fold? What happens when you hover over this button? How does that menu function?

Designers also know that the details will make or break a product’s usability. But designers are also responsible for not letting those details fall through the cracks in production. Yes, those 5 pixels do matter! The development or production team also needs to understand how the product will work and what it will look like in every scenario and variation of the product’s use. Annotating all of these scenarios can be a nightmare, but this is where Specctr can help.

Specctr is a plugin for Adobe applications. (Currently, versions are available for Fireworks, Illustrator and Photoshop, the first of which you can read about in “Blueprints for the Web: Specctr Adobe Fireworks Plugin”.) Specctr transitions a visual design to production by enabling you to specify form (spacing, width and height, colors, fonts, etc.) and function (hover states, transitions, user flows, etc.). It automatically generates a specification and creates a blueprint for the design, which saves time.

Specctr logo

Note: The Specctr plugin for Adobe Illustrator has two versions, Lite and Pro. The Lite version is free for everyone but has some limitations. The Pro version is more powerful, is paid and has an “Expand Canvas” feature, and you can change the font in which the specification is displayed. Specctr Pro has other advanced settings that can be configured in the “Spec Options” tab in the panel, including options for the colors in the three types of specifications, the color mode (RGB, CMYK, HSL, HSB), etc.

Overview Of Specctr For Illustrator

Adobe Illustrator is a favorite tool of many designers because of its flexibility and versatility. Whether you use Illustrator for Web, print, identity or packaging design, Specctr may be useful to you, and in this article we’ll show you how. This plugin includes:

  • the width and height of elements;
  • text specifications (font family, font size, font color).


The main tab of the panel, the “Select Details” panel tab and the “Spec Options” panel tab in the Specctr Lite version. (see larger preview)

The width and height of elements as well as the text-specification abilities are most common to a designer’s workflow, which is why we included them in the free version. These two features alone should save you a lot of time. Additionally, the free version has the “Expand Canvas” feature and the option to change a specification’s font.

Requirements and Installation

Specctr Lite can be downloaded for free from our website (search for “Try Specctr Lite”). To use Specctr for Illustrator, you will need:

  • a Mac or Windows machine;
  • a copy of Adobe Illustrator CS5, CS5.1, CS6 or CC (Creative Cloud version).

The installation process is pretty straightforward:

  1. Download the Specctr installer.
  2. Double-click the downloaded ZXP file. The Adobe Extension Manager will open. Click on “Install.”
  3. Restart Illustrator.
  4. In Illustrator, go to Window → Extensions → Specctr in the menu to open the Specctr panel.

Note: If you are using Windows Vista+, you might need to launch the Adobe Extension Manager as an administrator, or else the extension could fail to install (this is a known limitation of the Adobe Extension Manager).

A Quick How-To Guide

After you install Specctr, you can spec a document in a few easy steps:

  1. Adjust your settings in the “Spec Options” tab.
  2. Select the options you want to display.
  3. Make room for your specifications (optional).
  4. Spec away!

The process of working with Specctr Lite and Pro is quite similar. The only difference is in functionality (Lite has fewer features).

1. Adjust Settings in “Spec Options” Tab

First, it’s a good idea to customize how the specifications will look. You can do this in the “Spec Options” tab in the Specctr panel. There, you can do the following:

  • Control how your specifications will look by adjusting font, color, size and line weight.
  • Set the color mode in which you want to spec: RGB (both rgb() and HEX modes are available), CMYK, HSL or HSB.
  • Assign different colors based on the type of specification: type object, shape object, and spacing and dimensions.

2. Select the Options to Display

In the “Select Details” tab in the panel, you can define (using simple checkboxes) which properties of objects to spec.

For example (as mentioned earlier), for shape objects, the following properties (or specification) can be generated by Specctr: fill color, fill style, stroke color, stroke size, opacity. And for text objects, the following properties (or specification) can be generated: font family, font size, font color, font style, text align, line height, letter spacing, opacity.

3. Make Room for Your Specifications

Optionally, you can expand the size of the artboard (or canvas) to make more room for the generated specifications. Use the numeric field next to the “Expand” button to increase the size (in pixels).

4. Spec Away!

Simply select any object(s) on the artboard, and then use one of the specification buttons: “Shape / Text,” “Width & Height” or “Spacing.” Specifications will be generated automatically for the elements selected on the artboard.

You can select two objects (by holding down the Shift key) to spec the space in between them. If only one object is selected and you press the “Spacing” button, then the distance from the object to the artboard’s edges will be displayed.

Here’s a brief screencast of this workflow:

Other Features

For maximum time-saving, you can spec multiple text and shape objects with one click. Simply select multiple (or all) objects and hit the spec button.

For better readability, line endings in Specctr will change depending on what you are spec’ing: a filled dot for text, an outlined circle for shape, and brackets for distance.

Spec line ends
Line endings automatically adjust based on shape, text and distance.

Your specifications are automatically organized and grouped into layers so that you can quickly turn their visibility off or delete them.

Specs in layers panel
Specifications organized into layers.

If many objects are close to each other, then there is a chance that specifications might overlap. To fix this issue, simply move and spread the specifications out. The arm that connects them to their object will always remain connected to the object, no matter where you move them on the artboard.

Please note that if you update an object after you’ve spec’d it, then the specification won’t update automatically; you must spec the object again. You don’t have to delete the old specification, though, because it will update with the new properties and remain in its current position.

A Note About Units

Specctr will use distance-based units based on the user’s settings in Illustrator (Edit → Preferences → Units). For Web documents, Specctr will always use pixels.

Illustrator preferences.
Illustrator’s “Preferences” dialog: Units.

Different Specification Scenarios

Web Design

There are plenty of reasons to use Illustrator for Web design. (Read Vincent Le Moign’s article “Productive Web Design With… Adobe Illustrator?” to hear some of the arguments.) Illustrator is fast, reliable, reusable and especially useful for designers who create both wireframes and final designs.

Specctr was created with Web designers in mind because of the myriad of screens flows that have to be created and spec’d. Although spec’ing is usually a process that only large design teams do, I’ve found the plugin to be helpful on small teams as well. With technology advancing and our capability to create more complex graphics, transitions and animations growing, there is an increasing demand for designers to spec their work. Interactions, responsive design and hover states should become clearer with a few notes and annotations attached.

Here follows an example of a one-page Web design made in Illustrator and spec’ed using the Specctr plugin. The first screenshot shows the large-screen version, and the second shows the mobile-screen version.

Example of a web site design spec'ed with Specctr
Example of a Web page spec’d with Specctr. The artboard contains the large-screen version; below it are shown three states of the same button (normal, :hover and :focus, and pressed). (View larger version)

responsive design spec'd example.
Example of a Web page spec’d with Specctr. The artboard contains the small-screen (i.e. mobile) version. (View larger version)

Note: In Illustrator, you can use multiple artboards to create variants of the same Web page for different screen types; for example, desktop, tablet, mobile, etc.

Make sure to set up your document correctly for Web design work. Create Web documents with the “Align new objects to the pixel grid” option activated; always use whole pixel sizes for all objects; and select the RGB color mode. The “Align new objects to the pixel grid” option is especially important.

Web settings
My recommended settings for Web documents in Illustrator. (View larger version)

Print and Packaging Specification

Unique print pieces (die cuts, special folds, etc.) require detailed instructions. Here is an example of a custom folder that was spec’d using Specctr for Illustrator.

Packaging spec example
A print design example. (View larger version)

Setting up your document correctly for print design is important, too. Here are the settings that I often use:

Print settings
My recommended settings for print documents in Illustrator (View larger version)

Branding Guideline Book

A brand is the public face of the company. It conveys the mood and tone of the company and covers every detail of its communication with the public. A branding book is a vital step in a branding project because it establishes the rules and teaches collaborators how to use the new visual language; a rebranding campaign is only successful if it is used consistently and widely.

A brand book usually includes the logo, fonts, colors, textures and patterns, photographic and image styles, language and tone. The guidelines can get quite detailed and long.

Here is an example of a very brief brand book that uses Specctr for the nitty-gritty details:

Brand Guidlines
Specctr for Illustrator can help you create a brand book.

Here are a few brand guidelines:

To learn more about branding, I recommend Kat Neville’s article “Designing Style Guidelines for Brands and Websites.”

Conclusion

Being a successful designer takes not only creativity and design skills but the follow-through to see a project come alive just as you imagined it. A designer may create a well-crafted website or a beautiful logo or an elegantly packaged product, but chances are they won’t be the one bringing it to life.

Communicating and explaining your design both verbally and visually is a requirement for precise and successful results. This is especially true for large teams spread out over the globe. We hope the Specctr plugin for Illustrator helps you with this important task.

Plans for the Future?

Here’s what the Specctr team is working on next:

  • CSS exporting (the objects you spec will be the ones that are added to your CSS export);
  • Relative (i.e. percentage-based) spacing, to help you with responsive design tasks;
  • More options for iOS and Android design specs.

Please let us know which features you would like to see added to the next version of Specctr’s panels! You can also leave a comment here. We’d appreciate your feedback.

(mb, al, il)


© Chen Blume for Smashing Magazine, 2013.

November 06 2013

10:37

Part Three: Optimizing The Design Workflow With Fireworks Extensions


  

This article is the third part of an article series about improving your design workflow in Adobe Fireworks with some of the best extensions currently available. You may want to check out the first and second parts if you’re not already familiar with them. – Ed.

We have already covered over a dozen brilliant extensions to add to your Fireworks arsenal, just the tip of the iceberg. With all-around great guys such as John Dunning, Aaron Beall, Matt Stow and Linus Lim continuing to support the app (an app that Adobe has finally decided it has had enough of), the power of Fireworks continues to make the lives of designers all over the world easier and more productive.

More on Adobe’s decision in a bit. For now, let’s dive into the extensions:

  1. Export Commands
  2. Lorem Ipsum
  3. Greeked Text
  4. Page Commands
  5. Gradient Panel and Gradient Direction Editor
  6. Keyboard Resize
  7. Generate Web Assets

1. Export Commands

If you find yourself reaching for Control/Command + Shift + X to bring up the “Export Preview” dialog a couple dozen times a day, like I do, then you owe it to your fingers to download this extension. As easy as Fireworks makes it to create designs for the Web and mobile, it is surprisingly dull when it comes to optimizing the exporting process. Why must we struggle with the Optimize panel to change the exporting settings for each page before exporting it? And why can’t we export natively created vector elements to SVG (now one of the most preferred vector formats for the Web)?

Export Commands by Aaron Beall is a set of commands that makes this whole process much simpler — and more!

This set contains the following commands: “Export SVG,” “Export Pages and States,” “Export Slices As Sprites” and “Export Styles as CSS.” Let’s review each in detail.

Export SVG

With high-resolution screens gaining in popularity, the need for scalable images on the Web is ever increasing.

SVG is by far the most popular and best-supported vector image format. However, while you can create vector artwork in Fireworks, you can’t export it as an SVG file. Well, with the “Export SVG” command, now you can!

When exporting to SVG, you can choose whether to export the entire document or a selected element on the canvas.

Note, though, that if any bitmap objects are in your Fireworks PNG image file, they will be exported as embedded bitmap images within the SVG (which pretty much defeats the point of using SVG in the first place). And any custom fonts won’t work, so text will render in the browser’s default font when you view the SVG in a browser. If you have to have the exact font you’ve used and don’t care about search engines not being able to read the text, then you might want to convert the text to SVG paths before exporting the file (go to Text → Convert to Paths).

PNG vs SVG
SVG files are infinitely scalable, making them a good choice for creating Retina-friendly websites.

Note: A couple of months ago, Josh Emerson forked Aaron’s Export SVG command and updated it to optimize the SVG code for the exported files and to give you more precise control over how the resulting SVG is created. His new version of the command, SVG for Web, creates smaller exported SVG files with good quality. If you’d like to try SVG for Web, you can grab it from GitHub. The extension is completely free.

Import SVG in Fireworks?

Aaron’s command, Export SVG, enables you to export your vector artwork in SVG format, but what about importing SVG files, you might ask? John Dunning’s excellent SVG extension makes this possible. With it, Fireworks can both open and import SVG files.

If you work with SVG files a lot and Fireworks is your primary design tool, then you owe it to yourself to download both of these extensions.

Export Pages and States

Suppose you’re done with a design and need to save all pages and states as PNGs to share with the team? Fireworks already lets you save all pages to files and all states to files easily from within the “Export” dialog, but not both at the same time. The “Export Pages and States” command does just that. As a bonus, it even lets you customize how the files will be named before exporting them.

Export Pages
The Export Pages command lets you define how the exported files will be named.

Export Slices As Sprites

If you have a lot of icons that need to go as a sprite to the development phase, copying them all and composing them in a new file is tedious enough, let alone figuring out the measurements for the CSS after that. The “Export Slices as Sprites” command takes the grunt work out of this process by automatically creating a sprite from the selected slices in a document (or all slices if nothing in the document is selected), all neatly aligned. It will even create an HTML file with the appropriate CSS properties, if needed.

Note: If you work a lot with sprites, you may want to look at the CSS Sprite Maker extension, which I covered in depth in an previous article about Fireworks extensions. Also, Fireworks CS6 integrates an “Export CSS Sprites” feature; the article “Working With CSS Sprites in Fireworks CS6” is quite detailed and useful, if you want to learn more.

Export Styles as CSS

Finally, there is an “Export Styles as CSS” command, which will generate the CSS for all of the styles in the current document — styles that you have explicitly created and/or saved. This command is not as powerful as the new “CSS Export” in Fireworks CS6, though — it doesn’t recognize drop shadows, transparency or a few other properties.

So, if you are using the latest version of Fireworks (CS6), go with the built-in CSS panel in Fireworks CS6 (which was recently updated, by the way), and use it with the excellent CSS Professionalzr extension by Matt Stow.


CSS Professionalzr in action with the CSS Panel in Fireworks CS6 (screencast).

Lorem Ipsum

One of Fireworks’ strengths is its excellent UI prototyping capability — be it for the Web, desktop or mobile.

We’ve already covered this topic in detail on Smashing Magazine:

Almost every designer I’ve known prefers Fireworks to Photoshop for prototyping and wireframing. And with wireframes comes the ubiquitous placeholder text, the ever popular lorem ipsum.

For years, I religiously went through the process of opening a text file, copying some random text from it and pasting it into Fireworks. More recently, I’ve been using the Lorem Ipsum command from Aaron Beall’s excellent Text Commands pack, which I talked about in my previous article.

That is, until I came across the Lorem Ipsum auto shape by John Dunning. Apart from giving auto shapes in Fireworks an entirely new dimension, the extension makes adding lorem ipsum extremely simple.

Lorem Ipsum Smart Shape
Change the properties of the placeholder text block using the yellow control points. Easy!

Although the auto shape does only one thing, the amount of control it provides sets it apart. To start with, it adds just the amount of text that will fit the shape you’ve drawn. No more copying and pasting or deleting text to fit the space! Resizing the boxes using one of the yellow handles or changing the font size will automatically adjust the amount of dummy text, so you will always have exactly as much text as you need.

Apart from the resizing handles, there are handles for aligning the text, setting text as a single block or as paragraphs (with the ability to define how many sentences make a paragraph), and changing the case between sentences (title case or uppercase). You can also click the target icon in the middle to set the exact height and width of the text object (which is especially handy because the smart resizing handles don’t do a good job of snapping to guidelines).

Lorem Ipsum Smart Shape Properties
Click the target in the middle of the Lorem Ipsum shape to open this dialog for more advanced settings.

Greeked Text

Sometimes, even lorem ipsum is too distracting. Ever had a reviewer from the client’s team come back saying that hundreds of spelling mistakes are in the design you sent? Me, too! Rather than waste time explaining Latin text to them, try using the Greeked Text smart shape by John Dunning, which makes the text completely unreadable.

This extension lets you define placeholders for blocks of text using flat colored lines or hash marks to depict the position, size and amount of text, without the distraction of “fake” text. You can choose between black, gray or hatched text blocks, depending on how obvious or rough you want the blocks to look. While the commands are for black or gray lines only, you can change the color as you wish once the object has been created.

Greeked Text Smart Shape
The Greeked Text smart shape has a ton of customizable options via these control points.

A few yellow control points are all over the smart shape to let you resize it, change the alignment, line height and line spacing, and show paragraph breaks. For even finer control, click the crosshair in the middle of the shape, and a properties dialog box will pop up in which you can fine-tune every aspect of the shape to make it exactly match your wireframe.

Greeked Text Smart Shape Properties
If you click the target icon, a properties dialog will open up for finer editing.

Page Commands

When working with multiple pages in a Web or UI design project — or when creating layouts for different breakpoints in a responsive design — the Pages feature in Fireworks comes in real handy. You can create Fireworks documents with many pages, each page with its own canvas size and optimization settings.

Note: You can have certain layers shared across pages, kind of like the master page template in PowerPoint and InDesign. Shlomo Goltz has covered this in detail in part one of his excellent “iOS prototyping With TAP and Adobe Fireworks.”

John Dunning’s Page Commands extension packs together a set of commands to supercharge the way you work with pages in Fireworks.

The highlight of the extension is a set of commands to quickly go to a page. Assign keyboard shortcuts to each of the commands, and you’ll have a home-grown set of hotkeys to quickly access a page in your design. Of course, the default PageUp and PageDown keys will take you to the previous and next pages, respectively, but this extension lets you easily jump to any page in the design with a single keystroke.

Then we have a couple of commands to distribute layers or states to their own pages (in Fireworks, “states” were formerly called “frames”). Let’s say you’re working on a set of icons and need to create them on the same page to retain context. Just keep them on their own layers and distribute the layers to pages; you will then be able to export all pages at once. The same is true of states when you’re working on buttons with multiple states. Another neat feature is the ability to crop all pages to the selection at once.

Distribute States to Pages
The command gives you one-click conversion of states to pages.

If you need to work on a set of files at once, you can import them all into separate pages, instead of doing it one by one, with the Import Files Into Pages command. When it’s time to export, Fireworks lets you export all pages at once, but each page might have different export settings attached to it; in these cases, use the Apply Export Settings to All Pages command to apply the settings from the current page to all other pages.

Gradient Panel And Gradient Direction Editor

Gradients are an integral part of any design. While working with gradients in Fireworks is now easier (much progress was made in versions CS4 through CS6), some things related to control could still be improved. You can, for example, add new color stops to a gradient pretty easily, but there is no way to set them accurately with numeric position markers. Changing the gradient direction can also get pretty messy.

Gradient Panel and Gradient Direction Editor are a couple of extensions by Grant Hinkson that greatly enhance our control of gradients in Fireworks.

Once you have chosen a gradient for the selected object, the Gradient Panel lets you add color stops with pinpoint accuracy. Want to place stops very close together? Use the zoom and pan slider to get as close as you need. You can easily get close enough to start seeing the gradient pixel by pixel! Alternatively, use the table (see below) to define the exact position and color values of each gradient stop. You can also quickly switch between a vertical and horizontal gradient right from the panel.

Gradient Panel
The Gradient Panel provides fine control over every aspect of a gradient.

Ever get frustrated when rotating the gradient line on very thin objects? This is especially bothersome when dealing with short wide boxes (such as horizontal rules) because Fireworks insists on making every new linear gradient a vertical one. That’s where the Gradient Direction Editor panel comes in handy. Quickly change the angle of the gradient by using the buttons, or simply drag and drop the start and end points in the panel. But the real power of the Gradient Direction Editor panel lies in its ability to specify precise coordinates for the gradient’s end points. Fireworks can natively change the angle just as easily, but only this panel offers precise numerical control over the location of the end points.

Gradient Direction Editor
The Gradient Direction Editor panel gives you precise control over a gradient’s angle.

Note: These extensions were created almost four years ago and are not being developed or supported anymore, but they run just fine in Fireworks CS5, CS5.1 and CS6. If you are using the latest version of Fireworks (CS6), then you already know that the workflow with gradients has been considerably improved; numeric control over the gradient stops and angles have been added. My only complaint is that gradient presets were removed (although this could be somewhat corrected by using Styles).

Gradient Panel in Fireworks CS6
Handling gradients is much easier in Fireworks CS6. We now have fine numeric control over both angles and gradient stops.

Keyboard Resize

Resizing elements is one of the most fundamental tasks in any visual editing application, and having done this in a certain way for years, I find it hard to imagine that the tools built into Fireworks — or any similar application for that matter — might be hugely deficient.

Let me explain. Say you’ve created a button with a text label inside it. Now you need to increase the width of this button by a few pixels on the right. You select the rectangle and either stretch it to the right using the Scale tool or change its width in the Properties panel. Then, you select the text and repeat the same action, because selecting both and scaling them would have distorted the text and messed up the margins on the side.

Resizing multiple objects
Resizing multiple objects together can be extremely error-prone.

Is there a better way to do this? Select both elements, press Alt + right arrow a few times and voilà! 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. The extension comes with 16 commands that let you resize elements one side at a time.

Smart Resize
Assign keyboard shortcuts to the Smart Resize commands for quick and easy resizing of multiple elements, without any distortion.

To be frank, I never thought I needed this extension until I used it, but once I got used to it, I started wondering how I ever survived without it! The idea is simple: Resize elements using keyboard shortcuts. You decide which side to extend or contract using the appropriate command or shortcut. There are different shortcuts for 1-pixel increments and 10-pixel increments — hence, the total of 16: four sides, two actions (expand or contract), and two modes (1 pixel or 10 pixels).

Apart from making it stupidly easy to resize elements using keyboard shortcuts, the commands are extremely smart about figuring out what the selection is and resizing them accordingly. For text, it resizes only the text blocks, not the text itself, something even Fireworks’ built-in Scale tool is too imperfect to understand.

Note that, as with all third-party commands, keyboard shortcuts will not be automatically assigned when you install the Keyboard Resize commands pack. Either add them manually using the Keyboard Shortcuts dialog in Fireworks (go to Edit → Keyboard Shortcuts), or use the Assign Keyboard Shortcuts command, which is part of this extension. Easy!

A word of caution: The keyboard shortcuts assigned might conflict with your system-wide shortcuts. In my case, Control/Command + Alt + arrow keys were already assigned to changing the orientation of my monitor. I had to disable them from my video settings panel before I could get them to work in Fireworks.

Generate Web Assets

No matter how many extensions you use or how optimized your workflow is, generating assets for the development phase after finishing up your design composites is always a chore. C’mon, by show of hands, who here likes the process of taking each individual design element and exporting it in the right format to be integrated in a website, application or whatever else you’re building?

The Generate Web Assets extension by John Dunning makes this whole process almost trivial, to the point that I’m beginning to wonder how I lived without it for so long! The process is simple: Once you are done with a design, simply 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, define a folder, and presto! All of your assets will magically appear in this folder.

Generate Assets
Exporting background and UI elements is simply a matter of naming them appropriately in the Layers panel.

The file names may be applied directly to objects, groups or layers in the Fireworks Layers panel. The command is smart enough to recognize the names and to include everything in the named element, irrespective of what it is. JPG files are saved with the “Better Quality” setting, PNGs are saved as PNG32 (i.e. PNG24 + alpha transparency), and GIFs are saved as GIF Adaptive-256 with index/alpha transparency.

The Generate Web Assets command will export all named elements to a Fireworks file by default. To export only some assets in a file, select them and use the Generate Web Assets from Selection command.

Note: The command will ask you to select a folder only the first time you use it in a document. After that, it will continue to save files to the same location. If you want to change the folder, run the “Generate Web Assets — Change Export Location” command.

Conclusion

Over the span of these three articles, I’ve covered the extensions that I find indispensable in my daily workflow with Fireworks. The tools extend the already excellent functionality of the application multifold. With passionate Fireworks developers around the world not showing any sign of slowing down their development of new extensions for the app, this list in all probability will only grow, whether Fireworks gets seriously updated in the future by Adobe or not.

Note: For some very interesting up-and-coming work with Fireworks extensions, keep an eye out for the Phoenix Project by Linus Lim.

Finally, Adobe’s decision to cease further development on one of the most useful applications in the Creative Suite is a pity, especially for any designer who designs exclusively for the screen. Adobe has promised to update the current version (CS6) with critical patches when necessary, but there won’t be a major release of Fireworks anymore.

My take is that Adobe failed to tap into the potential of the app, which perennially played second fiddle to that monster of a design application, Photoshop. Only time will tell if Adobe can successfully transition Fireworks’ unique features over to Photoshop or an entirely new application. Regardless, Fireworks will continue to live on all of my computers and relentlessly toil away on all of my for-screen designs for the foreseeable future.

There are rumours that Adobe is working on a new application that will pick up where Fireworks left off, but no specific news as of yet. I’ll be keeping an eye out on what it comes up with, of course. Till then, it’s Fireworks FTW!

(mb, al, il)


© Ashish Bogawat for Smashing Magazine, 2013.

Tags: Fireworks

September 20 2013

10:26

Part Two: Optimizing The Design Workflow With Fireworks Extensions


  

In my previous article on Smashing Magazine, I discussed seven excellent extensions that could fundamentally change your Web design workflow in Adobe Fireworks. The extensions expand Fireworks’ capabilities by adding valuable functionality that could make a huge impact on your overall productivity as a designer.

I have to admit, though, that at the time, I was able only to scratch the surface of what’s possible with Fireworks, so I’d like to add to the list six more extensions. As functionality, they are a bit more “niche” than the extensions in the previous set, but no less valuable in any sense. These are extensions that I always install whenever I set up Adobe Fireworks for myself or anyone on my team and that have proven to be big time-savers over the period that I’ve been using them.

Again, to help you more easily navigate the article, you can refer to the following list:

  1. Text commands
  2. Modify commands
  3. Path commands
  4. Linked images
  5. Adjustments panel
  6. CSS sprite maker

1. Text Commands

Ever wish you could manipulate text in Fireworks like you can in a text editor? Frankly, I never do because I don’t expect Fireworks to offer powerful text-manipulation abilities. (It’s a graphic design app, after all — the usual workflow is to create and edit your text in another program and then bring it into a Fireworks PNG file.)

Turns out, that’s not (always) the case!

Text Commands by Aaron Beall bring a lot of useful functionality to the manipulation of text objects in Fireworks. Below is a brief overview of what the commands do.

Change Text Case

Do you have a a few paragraphs of text with messed-up formatting and would hate having to retype everything in the correct case? This extension comes with commands to change the case of any text — not just to uppercase or lowercase, but also to sentence case (i.e. the first letter in a sentence), title case (the first letter of every word) and small-caps (regardless of whether your font supports them!).

Change text case with Text Commands
Text Commands enable you to easily change selected text to lowercase, uppercase or title case.

Paste Text Attributes

This command brings one of my favorite features from Microsoft Office — copy formatting — to Fireworks.

Simply copy some text to the clipboard, select another text block, run the “Paste Text Attributes” command, and voilà! All properties of the first copied text object are automatically applied to the second one!

Paste text attributes
Copy formatting for text objects in Fireworks? Possible!

Split and Merge Text Boxes

If you have differently styled blocks of text contained within one text object, and you need to separate them later for ease of composition, the Split Text Boxes command can do that automatically.

Let’s say you have a text object that contains a headline and some paragraph text below it. If you need to split these so that they can be positioned independently, simply select the text object and apply the command. The command will analyze the block of text, check which portions of the text have different properties, and then split them into separate text boxes.

Split text
Split a text box into multiple boxes, based on text properties.

Alternatively, you can also merge multiple text objects into a single object with flowing text. When merging text objects, the command figures out the sequence based on the positioning of the objects relative to each other. You can also choose to include text (such as a non-breaking space) between objects when they are merged.

Merge text boxes
Merge text boxes in Fireworks.

Replace All Text

Sometimes you want to apply a change to multiple text blocks in your design — say, to add a ™ (trademark symbol) to all instances of a brand name, or maybe even to change a bunch of button labels at once.

To do this, simply select all of the text boxes that you want to modify, apply the “Replace All Text” command and specify what the changed text should be.

To retain the existing text and only add to it (say, to wrap quotation marks around a sentence, as in the example below), substitute {T} for the original text.

Replace All Text
Adding quotation marks to multiple text boxes the easy way.

Sometimes you’ll need to change multiple instances of a label or paragraph. Instead of selecting each instance individually and making the change, select all of the text objects, hit the “Replace All Text” command, and enter the new text. Done!

Lorem Ipsum

No more copying and pasting from a text file every time you need some dummy text for a mockup. Simply create a new text box where you want it, hit the Lorem Ipsum command, and a paragraph of random text will be added. If nothing is selected on the canvas, then the command will create a new text object and apply the last used font properties to it.

You can also easily customize the dummy text generated by the extension, by opening the command’s Lorem ipsum.jsf file (located in ../Fireworks/Configuration/Commands/Text/) and replacing the Lorem Ipsum text lines with your own. (JSF is a special JavaScript Fireworks extension file. It can be easily opened and edited with a simple text editor, just like any normal JavaScript file.)

Even better, the Lorem Ipsum command is quite smart. Each time you run it, the first paragraph of the text will not be “Lorem ipsum…,” but a random paragraph selected from all of the paragraphs available in the extension!

Note: Alternatively, you can try John Dunning’s Lorem Ipsum auto shape. It offers more advanced functionality and control over the particular amount of text you need in a text block. I plan to cover this extension in more detail in another article soon.

2. Modify Commands

Fireworks already provides a ton of ways to modify objects, both vector and raster. Getting a certain look is often an exercise in combining these settings for the object, and results will vary drastically according to your expertise with Fireworks and the time you have at hand.

Aaron Beall’s Modify Commands offer a series of modification presets that reduce the number of steps involved in applying multiple settings to objects to a single click! These are not meant for every occasion, but they can be invaluable in certain instances.

Here’s a look at what the extension packs.

Randomize Properties

The title of this collection of extensions says it all. If you need to create a series of objects with random properties such as size, color and opacity, use the Randomize commands in this extension pack.

One use of this command would be to create a bokeh effect for a background. You can randomize the size, color, opacity, blur, position and rotation of the selected objects based on certain criteria. You can also apply random styles to selected objects, from those already set in the document.

Randomize properties
Randomizing the properties of the objects selected on the canvas.

Explode And Scatter

Need to scatter a shape around the canvas to create visual chaos? You can use the Scatter command to automatically spread clones of an object over or around another object, or use the Explode command to create a more dynamic effect.

Both commands come with variables you can set to get the desired effect.

Explode and scatter
The Explode command in action.

Flatten and Smooth

Although vector objects have many advantages, sometimes you’ll need to convert a few vector objects to bitmaps (i.e. rasterize them). The “Flatten Objects to Bitmaps” command lets you do just that. Select the objects to rasterize, and the command will convert each one into a single bitmap oject. Note that this is different from the “Flatten Selection” function in Fireworks (accessed in the menu via Modify → Flatten Selection), which will convert all selected objects into a single bitmap object.

You can also smoothen the edges of objects with the “Smooth and Flatten” command, which scales up the selected objects, flattens them, and then scales them back down.

Paste Selective Attributes

You can paste the attributes of a copied object to any other object in Fireworks (a super-useful feature!), but what if you want to use only the live filters from the copied object and not its color and stroke? The “Paste Selective Attributes” command lets you select which attributes to paste and leaves the rest out.

Paste selective attributes
Paste selective attributes.

With the help of this command, the “Paste Attributes” feature in Fireworks (usually accessed with the shortcuts Control/Command + C and then Control/Command + Alt + Shift + V) becomes even more useful and powerful!

Seamless Tile

This is one of my favorite commands from this extension. If you use a lot of background patterns, then you’ve probably attempted to create seamless patterns at some point. This command automates the process by blending the edges of the pattern to a specified extent.

In a recent article on Smashing Magazine, Ivo Mynttinen mentioned this feature, too:

“Download and try the Modify Commands pack, by Aaron Beall. It includes “Seamless Tile” — a very useful command for seamless textures. It does not work equally well for all types of textures, but for the most types it can help you create a seamless pattern in Fireworks really easy. The command creates seamless textures from selected objects on the canvas, by blending their edges automatically (based on a specified percentage).”

3. Path Commands

Next up from Aaron Beall is the excellent Path Commands extension, which adds superpowers to Fireworks’ handling of vector paths and objects. If you are one of those who miss Adobe Illustrator for the powerful control it gives you over paths, wait till you try these out!

The commands take existing object-manipulation techniques and add a few twists that are extremely helpful if you create a lot of vector artwork in Fireworks — which designers of illustrations and icons certainly do.

To be honest, I don’t use every command in the set, so this is not a comprehensive review, but rather a list of the Path Commands I use most.

Manipulate Objects

With this command, you can arc the bottom of a shape outward or inward as much as you need, apply a fisheye lens effect to any object, or deform a shape based on a selected path. This can be a huge time-saver when you want to make some complex changes to the shape of an object. The image below shows a text object being made wavy.

Deform to path
Deform to Path command.

Deform to Path can be a powerful command on its own. Using it, you can invert a shape relative to the canvas, similar to how “Invert Selection” works in Photoshop.

Deform to Path can be useful in a couple of other situations:

  1. You can distort a narrow ellipse object to a curved path to create a path that tapers at both ends (something like the custom stroke feature in Illustrator), or use an ellipse along a curved path to create a “swoosh” (à la Nike).
  2. You can distort an arrow vector shape along an S-shaped curve to get a curved arrow that zig-zags around other objects on the canvas.

Combine Paths

With this command, you can blend two paths and their properties by adding a specified number of steps between them; distribute clones of an object over each point in another path; or trim multiple paths to create separate objects from overlapping parts of the shape.

Combine paths
Combine Paths command.

Manipulate Individual Paths

These commands allow you to divide paths in multiple ways according to their position and z-index, to open or close any path, and even to measure the total length of a path in pixels.

There’s also a “Convert Stroke to Fill” command that will come in very handy if you do a lot of illustration work in Fireworks and need to treat outlines as filled objects so that they scale properly. “Convert Stroke to Fill” also provides a way to simulate gradients on a stroke (similar to how it is done in Adobe Illustrator). The workflow is simple: select an object with a stroke and run the command; then, on the new object with a solid fill, you can easily add a gradient.

Convert strokes to fills
With the “Convert Stroke to Fill” command, you can 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 resulting object (right).

A Word on Paths

All commands in this set will work only if applied to paths. Shapes drawn with the regular shape tools, such as Rectangle and Ellipse, are not paths by default but special vector objects, so you will need to ungroup them before using these commands. The same goes for Auto Shapes as well — you will need to ungroup them before using these commands on them.

When you need to work with text, simply convert it to regular vector paths (select the text object, then Text → Convert to Paths).

4. Linked Images

A great feature of Illustrator, InDesign and some other design applications is the ability to link external images within a design, so that changes to the external files are reflected in your design without the need to reimport them manually. (Smart objects in Photoshop provide something similar, although it is not exactly an elegant solution.)

Fireworks, on the other hand, does not provide any way to link external images to a design for on-the-fly updates.

John Dunning to the rescue, again! John’s Linked Images extension provides this very ability in Fireworks.

Let’s say you are working on a website design, and the client hasn’t finalized the logo yet. Fire up the Linked Images panel, click the “Insert” button to select the current version of the logo from your hard drive (it can be in Fireworks PNG, Photoshop PSD, Illustrator AI or any other supported image format), and place it in the layout.

Later, when the logo has been updated, simply select the imported image and run the Refresh command to reimport the latest version of the source file.

Or, double-click the linked image’s name in the panel, edit the logo image that opens up, go back to your design and hit “Refresh.” Voilà! The latest version of the logo will appear in your file, without your having to mess with deleting or replacing anything in the design.

You can even update the image everywhere it appears in the document — including on multiple pages — with the “Refresh All in Document” command in the Linked Images panel.

Linked images panel
The Linked Images panel.

When inserting a linked image, you can also add it as a Fireworks symbol if you are going to use it in multiple instances.

If you have resized the image in your artwork, there is also an option to retain the size of the object when refreshing so that any changes to the source image don’t mess up your design in any way.

For the many options that Linked Images offers, check the detailed documentation on John’s website.

The Linked Images panel supports all image file formats that Fireworks supports (but see note below), including:

  • Fireworks editable PNG (.fw.png);
  • Photoshop PSD (.psd);
  • Illustrator AI (.ai);
  • EPS (.eps);
  • All standard “flattened” image formats, such as PNG8/24/32, JPEG, GIF, BMP and TIFF.

Note: When importing Fireworks PNG files, Linked Images offers 100% file compatibility. When importing Photoshop and Illustrator files, some limitations will apply; for example, if Fireworks doesn’t support a particular object or feature in a PSD or AI file (such as gradient meshes in Adobe Illustrator files), then those objects will simply be ignored upon being imported. Keep this in mind when working with linked PSD and AI files. For best results, then, work with Fireworks PNG files whenever possible.

5. Adjustments Panel

You will often need variations of a color in a design — perhaps a slightly darker or slightly brighter variant. This is usually pretty easy to do in Fireworks: select an object, go to the Mixer panel, and change the hue, saturation or brightness value.

But when a change is applied to a group of objects with different colors, Fireworks ends up applying the same color value to all objects, irrespective of their original colors — which we don’t want.

Enter the Adjustments Panel by John Dunning. It lets you change the color properties of multiple objects while retaining their individual identities. Here’s how you would go about it:

  • Select all of the objects you need to edit.
  • Open the Adjustments panel, and choose whether to alter their fill color, stroke color or both.
  • Choose what to change — hue, saturation, brightness, opacity, stroke width.
  • Use the number buttons at the top of the panel to reduce or increase the selected property in increments of 1 or 10.

Adjustments panel
The Adjustments panel in action.

The adjustments apply to gradients as well as to flat fill colors, so this is a great time-saver when creating variations of buttons and other UI elements, either for the same design you’re working on or when creating various color options in general.

6. CSS Sprite Maker

Adobe Fireworks CS6 introduced quite a few Web design-friendly features, including automatic CSS sprite creation. CSS sprites have long been favored for enabling Web designers and developers to consolidate a set of images into a single image, with portions being made visible as necessary. The problem has always been that the tediousness of creating these increases with the number of elements and of variations in size.

Note: To learn more about CSS sprites, read the excellent articles “The Mystery of CSS Sprites: Techniques, Tools and Tutorials,” by Sven Lennartz, and “CSS Sprites Revisited,” by Niels Matthijs.

While you can now create CSS sprites directly in Fireworks CS6, not everyone has the latest version. For the rest of us, there’s the CSS Sprite Maker extension, which you can get from Adobe Exchange.

Note: The developer of the extension seems to have gone missing from the Web. His website and blog are offline, and the extension is not being updated anymore. Fortunately, it still works just fine in recent versions of Fireworks, including CS5.1 and CS6.)

This extension is actually made up of two panels, “CSS Sprite Maker” and “Tools.” The former enables you to create sprites, while the latter provides some nifty tools to help with the process. Let’s look at each.

CSS Sprite Maker

The core feature of this panel is to help you create CSS sprites. The process is simple.

  • Create a new document (the canvas’ size doesn’t matter), and pull in all of the images needed for the sprite. The size of the images doesn’t matter, nor does the layout — you can even leave them all in a stack, as they appear after being imported.
  • Next, choose a name for the sprite image, add padding between the objects if needed, define class names, and hit a button.
  • The icons will be automatically laid out and the canvas resized accordingly, and you’ll have an image, a CSS file and an HTML file with all of the details on using the sprite!

CSS Sprites panel
The CSS Sprite Maker panel in action. (The icons in this example are from the free icon set Crystal Project by Everaldo).

There are two options for creating a sprite:

  1. The first, a general CSS sprite, neatly packs the images together based on how much padding you want between them, and fits them into a rectangular shape of the correct size.
  2. A second option, a diagonal CSS sprite, has the advantage of hover and disabled states.
  3. You will first need to rename the elements using the “Utility” section of the Tools panel (see the description below) before creating the diagonal sprite, otherwise you’ll run into an error message. Once you’ve figured out that part, though, being able to create hover and disabled states is quite nifty. The extension will automatically duplicate all elements, group them and apply appropriate styles to each one — creating a slightly higher brightness for the hover state and a grayscale conversion for the disabled state (you can change these settings by editing the filters yourself, if you prefer).

    Note: The extension does not automatically write the CSS code for hover states to the images. Instead, it creates different classes for each state by appending a modifier (that you can specify) to the class name of the normal state.

    The workflow is quite simple. Create (or import) a few icons, place them on the canvas, and name each individual object in the Layers panel. Next, open the CSS Sprite Maker panel, and in the “Diagonal CSS Sprite” section, give the export a name, a prefix and a primary class, and set the padding. Then, click the “Export” button. Done!

    Making diagonal CSS Sprites
    Settings for diagonal CSS sprites. Notice that the “hover” and “disabled” styles are optional (with a little checkbox beside each).

    (You can also watch a screencast, saved from the author’s website before it went down.)

    Tools

    The Tools panel has a few features to help you prepare images for the sprite. If your images are all of different sizes, just select them, set a size, and hit “Create.” The extension will add a transparent box behind each image and group it with the image so that each one has objects of the same size.

    You can also change the objects’ names en masse. Simply define the name and the extension will apply it, along with a numeric sequence for all selected images. Lastly, to arrange the icons in a grid exactly the way you want, just enter the grid values under the Guidelines section and hit the “Create” button to add the horizontal and vertical guides accordingly.

    CSS Sprite tools panel
    CSS Sprite Maker panel: Tools

    So, Which Should I Use?

    Comparing the CSS Sprite Maker panel with the CSS Sprites feature available in Fireworks CS6, I have to admit that I prefer this extension simply because there’s no need to create slices before exporting. Besides, the grouping and naming tools in the extension make preparing the sprite much easier as of now.

    But it’s a matter of preference, of course, and if you’re using Fireworks CS6, you can try both options for CSS sprites and see which one suits you better!

    Wrapping Up

    The Fireworks community has contributed many powerful commands and panels. In my my last article, I reviewed the following extensions: Grids Panel, Guides Panel, Smart Resize Auto Shape, Tables Auto Shape, Placeholder Auto Shape, Orange Commands and QuickFire.

    Today, we’ve looked at another set: Text Commands, Modify Commands, Path Commands, Linked Images, Adjustments Panel and CSS Sprite Maker. All of these extensions I use often and are powerful enough to warrant discussing at length. They should help you work faster and better in Fireworks, just as they’ve helped me.

    I am planning one more article on the subject, so stay tuned!

    Further Reading

    Fireworks Extensions

    (mb) (al) (ea)


    © Ashish Bogawat for Smashing Magazine, 2013.

August 26 2013

11:17

Part 1: Mojo Motors Responsive (Re)Design With Adobe Fireworks: UX And Interaction Design Stage


  

Thanks to strong mobile Web adoption worldwide, we have seen the launch of even more responsive designs in 2012 and 2013. Most of these have been in the publishing category, but lately we are starting to see complex transactional websites, such as Currys UK, take a brave step into this new world.

For very well thought out reasons, Mojo Motors (a startup created in 2010 to provide shoppers with a better way to buy used cars) also just launched the first responsive website in the automotive market space.

When I joined Mojo Motors in May 2012 as head of UX, it had only a desktop website — but 21% of its total Web traffic was already coming from mobile devices. Of that number, 64% were from iOS devices and 34% from Android devices. It was quite clear to me that we had to think carefully about our mobile strategy when redesigning the new website. After carefully assessing the situation, we ended up adopting the responsive design approach, for the following reasons:

  • We were planning to redesign the entire website from scratch.
  • Our content lends itself well to this approach, and we did not have to deal with ads like our competitors.
  • A large number of our users were already viewing, sharing and linking to retargeting emails on mobile devices.
  • It was the fastest point of entry to mobile for us, and the cost of development, management and maintenance was lower compared to building separate websites and native mobile apps alongside a desktop website.
  • Our UX and development teams are very small, agile and nimble — a key ingredient to helping a small startup such as ours get a minimum viable product to market quickly.

In this article, I’ll shed some light on the whole process and on how Adobe Fireworks fit into it.

mojo-front_mini

Our Design Process And Adobe Fireworks

As any team that has taken on a responsive design project recently will tell you, the process is different and challenging, and it stretches the limits of what traditional Web design tools such as Photoshop, Fireworks and OmniGraffle are capable of accomplishing. So, to get things done, our design team adopted a hybrid approach of designing in visual tools and directly in the browser. For us, Adobe Fireworks became the workhorse visual tool that we depended on to get things done.

I’ll share the whole process that we used to craft our responsive website and the role that Adobe Fireworks played in it. To keep the content easy to digest while still providing enough detail, I will present it in two separate articles:

  1. Part 1: UX and interaction design stage;
  2. Part 2: Visual design and front-end development stage.

UX And Interaction Design

In this first article, I’ll share our interaction design process, the role of Adobe Fireworks and some of the other design tools that helped us bring our vision to life.

Research

Naturally, we began the process by doing user research to understand how people engaged with our non-responsive website. Armed with this information, we came up with design principles, product principles, personas, scenarios and so on to help us determine and prioritize the project’s requirements.

We came away from this process with a core set of features that would provide a consistent user experience across all platforms. The key for us was to quickly go through discovery so that we could move into the iterative design process.

Designing From the Content Out

We decided earlier in the project that we would adopt a content-first approach by allowing the website’s content to shape the grid’s structure and layouts.

Why? On a responsive website, you have very little control over content because it scales across varying device widths — and because users explicitly zoom the viewport. In addition, some content, such as images, video and ads, can wreak havoc on the layout and affect overall performance. Identifying the different types of content, their value to users and the constraints they present early on is important. It will help you to avoid headaches later on in the process.

Mojo motors search and details page image

The old Mojo Motors website, showing photo placement. (Large version)

In our project, the image dimensions, aspect ratios and placement drove the overall layout because these needed to be flexible. The reason is that, on most automotive marketplace websites such as ours, car photos are one of the primary drivers of the user’s initial engagement, next to the selling price. Furthermore, these photos are typically consumed from a feed in formats and sizes that are uploaded directly to the dealer’s system.

Another thing we decided up front was to use real content wherever we could and to avoid placeholder copy like “Lorem Ipsum” and image placeholders with unknown dimensions. We were able to rise to this challenge early on by engaging our copywriter as soon as we identified missing copy throughout the project.

Breakpoints and Grids

Before diving deep into design exploration, we knew that determining the screen widths we would support was important. For us, a healthy range between 320 and 1024 pixels was practical, based on our analytics data. We settled on three major breakpoints to support desktop and the most popular mobile and tablet device resolutions of current users. But this is not always optimal — why?

Because device specifications frequently change, as in the case of the recent taller iPhone 5 (which would be wider in landscape orientation). To mitigate this, we planned to introduce minor breakpoints and even adjust our three breakpoints as needed later during the HTML prototyping iteration stages.

Mojo motors final responsive grids

Mojo Motors’ responsive grids, via the Gridset app. (Large version)

To aid in the creation of our grids, I played with a bunch of responsive grid systems from the endless choices of frameworks in the wild. We narrowed our choice to Gridset, by Mark Boulton’s team, and Gridpak, by the good folks at Erskine. Both of these apps provide a grid image file for designing in Fireworks (or Photoshop) and an HTML framework for prototyping.

One of the factors that influenced our choice of grids was the need to accommodate the “vehicle listing module” image across breakpoints. Because we had sketched out the mobile “vehicle listing module” first, we wanted to find opportunities for reuse as we scaled up to the desktop.

In the end, we went with a 12-column grid for the desktop, a 12-column grid for tablets, and a 6-column grid for mobile in portrait orientation, via Gridset. This grid choice enabled us to reuse the module from the mobile layout proportionally across the three main breakpoints. For instance, the mobile and desktop modules are exactly the same dimensions, except that we display three modules side by side for desktop.

Sketching Mobile First

I can’t stress enough how important it is to resist the urge to jump into your favorite visual tool during the initial phase of generating ideas! Trust me, this stuff is hard enough — the last thing you need to worry about at this point is setting up the technical layouts and pixel perfection. So, if you must, work in your favorite wireframing tool — just solve the problem at hand.

For me, making a few sketches of the website’s key pages at the three major breakpoints — starting with the mobile layouts and working my way up to the desktop version — and then iterating between them made sense. I personally found designing for mobile first to be an effective way to identify problems and resolve constraints presented by touch and small-screen devices.

Initial sketches for mobile screens
Initial sketches for mobile screens.

To aid in creating your layouts, you might want to consider the Responsive Design Sketchbook by App Sketchbook, or the Dot Grid Book by Behance.

Creating Wireframes And Prototypes

Before discussing in more detail why we used Adobe Fireworks in our project, I’d like to be clear that I find the endless debates about which design tool is better and whether to just code the darn thing to be fruitless banter.

In the end, a good designer is a creative problem-solver, and the tools are just a means to an end. Remember that users and clients don’t really care what tool we’ve used to create the final product. With that out of the way, I will focus the rest of these articles on why Adobe Fireworks made sense for our project.

High-Fidelity Wireframes in Fireworks

The great thing about creating products at a startup is that you have no external client, so you can avoid artifacts that do nothing to move the ball forward. On the other hand, the clock is winding down as your competitor tries to get the next best thing out before you can launch yours. With this in the back of my mind, the choice of using Adobe Fireworks came down to speed, familiarity and capabilities.

Hi-fidelity homepage wireframes for desktop, tablet and smartphones
High-fidelity home page wireframes for desktop, tablet and smartphones.

Because we needed to create a clickable prototype for user testing quickly, we decided to skip lo-fi wireframes and go straight from sketches to high-fidelity grayscale wireframes. Below are a few other reasons why we used Fireworks to create wireframes:

  1. Compared to other tools I had considered, Fireworks has the best vector and bitmap features suitable for creating both low- and high-fidelity wireframes, detailed visual UI designs and clickable prototypes, without having to switch between multiple tools.
  2. It offers a built-in set of symbol libraries, suitable for functionality that made our work quicker.
  3. The native Fireworks PNG file format is at least three to five times smaller than a comparable Photoshop PSD file and is easily sharable with stakeholders without requiring any software other than a browser or simple image viewer.
  4. The Pages and States features work really well for creating multi-screen layouts within a single file.
  5. I was in the process of hiring the rest of my team when the design phase began, and I needed to work pretty quickly.

Multi-Page vs. Multi-Breakpoint File Set-Up

In the past, I would have advocated setting up a single file with multiple pages and a master page for this project. But due to the constraints of creating responsive layouts, I decided that using the Pages functionality for different breakpoints of the same page was more efficient. I found this to be the best way to quickly switch between breakpoints during the iterative process. This method also allowed us to keep the file sizes small and made it easy for my team to share files and work concurrently on different screens.

Adobe Fireworks Pages panel

Adobe Fireworks Pages panel (example)

Adobe Fireworks Pages panel (example)
The Pages panel in Adobe Fireworks is used for different screen sizes of the same page.

Adobe Fireworks Layers panel
The Layers panel in Adobe Fireworks is used to manage layout elements.

Adobe Fireworks States panel

Adobe Fireworks States panel (example)

Adobe Fireworks States panel image (example)
The States panel in Adobe Fireworks is used to show different states of the same screen.

The other benefit was that we could still use the States panel to document interaction states associated with each breakpoint independently. The final file structure consisted of a “Page” for each breakpoint, a Web layer, a grid layer and other layers for the website’s content. In our template file, the grid layer was placed between the content and Web layer, as shown.

Creating Reusable Modular Elements Using Symbols

In a design like this, thinking in terms of modular reusable components that can be converted to symbols is really helpful. Doing this saves a lot of time and makes it easy to update as you iterate.

One element that benefited from this approach was the car listing module. As illustrated below, it is composed of a few different elements, including a photo with a non-destructible saturation filter applied, heart and camera icons from the library, as well as styled text. Elements such as headers, branding, navigation and footers are good candidates for symbol conversion as well.

To create a symbol in Fireworks, all you have to do is select the objects and go to Modify → Symbol → Convert to Symbol, or just right-click on the selection and choose “Convert to Symbol.”

Car-Listing module
Car-listing module symbol.

Another neat thing about the symbols feature is its nesting capability. You can include symbols inside a module that you want to convert to a symbol using the same process as above. We took advantage of this feature to make it easy to vary the listing photo and flags during prototyping and in preparation for user testing.

Creating a unique module to show a different car or flag was as simple as swapping the embedded symbol within the new main symbol variation. To do this, follow these steps:

  1. Select a copy of the main symbol and go to Modify → Symbol → Break Apart.
  2. While it’s still selected, save it as a new symbol variation.
  3. Double-click the new symbol to enter symbol-editing mode. Then, select the embedded symbol to update.
  4. Go to Modify → Symbol → Swap Symbol in the menu bar, choose the replacement symbol from the “Swap symbol” dialogue box, and you are done.

Symbol swapping illustration
Photo symbols embedded into car listing module symbol

Symbol swapping process
Swapping embedded photo symbols to create other similar modules.

Visual Scaling During Design and Live View

Another thing that is quite disorienting when creating mobile screens is mapping resolutions as you lay things out on your large monitor. Without careful planning or knowledge of best practices for things like touch target sizes and legible text sizes, you could end up creating layouts that are hard to use.

One tool that I cannot live without and I highly recommend is the Live View App. It is available for the Mac, iPhone and iPad. All you have to do is place the app window over your Fireworks layout and it will let you see how things scale on a real device such as an iPhone or iPad.

Preparing and Sharing Wireframes for Design Review

Clear and frequent communication between stakeholders, developers and designers was essential to the successful completion of our project. It ensured that everyone understood the implications of design decisions and were able to ask questions.

To prepare screens for our design reviews, we just exported Fireworks PNG files directly from Fireworks into a folder. During the review, we simply dragged the PNGs into multiple tabs of the browser and discussed things. I personally prefer this method of testing desktop screens because the width of the wireframes is rendered closest to how a user would see them (compared to testing with PDF files).

“Export Responsive Prototype” Extension to the Rescue

While the method described above also worked for showing mobile and tablet screens, it was sometimes difficult for the team to visualize the scale, context and fixed viewport constraints of real devices. This is where the Export Responsive Prototype extension for Fireworks (by Matt Stow) came in handy.

Creating the quick prototype using the existing wireframe file was really easy. The first thing I needed to do was define which areas of the wireframe would be fixed width and which would be flexible widths using slices. By default, areas that have not been given slices are converted to percentage-based widths. To make a sliced area fixed width or absolutely positioned left, right or center, I assigned keywords in the “Target” attribute of the Property Inspector (PI) panel (or Properties panel). Note that slices without “Target” keyword assignments are also converted to percentage-based widths.

Visualizing responsive design wireframes using Fireworks extension
Visualizing responsive design wireframes using Fireworks extension.

Assigning attributes in the Property Inspector panel
Slices are assigned “Target” attributes in the PI panel.

Once I was done setting up the file, all I had to do was go to Commands → Prototype → Export Responsive Prototype and export as “HTML and Images” files using the default settings. These files were then uploaded to a Web sharing folder on my computer or a Web server where it could be hosted. Next, we shared the URL with everyone, and from there anyone could view the mockup on any desktop, smartphone or tablet browser. For more details on using the extension, watch the screencast on YouTube.


A screencast by Matt Stow that explains this workflow.

Exported prototype files in finder window
“HTML and Images” exported files.

Note: The prototype that is created is not a responsive HTML production framework. It is only illustrative and to be used during the wireframe review process.

To keep the distraction down in a larger group, you could also mirror your iPhone or iPad onto a projection screen using Reflector.

Projecting mobile screen using Reflector app
Projecting a mobile screen using the Reflector app.

Creating the Prototype for User Testing

Putting together a clickable prototype in Fireworks is easy and flexible because Fireworks will accept almost any graphic file format and all HTML embeds such as videos, maps and social plugins.

For us, the first step was to plan the scenarios and determine what screens would be needed to simulate the tasks that we are asking our users to perform. In our case, we used some of the wireframes that we created and modified existing screenshots for others.

To complete the prototype, each existing wireframe and screenshot was imported as a page into a new Fireworks file and given an appropriate page name. Making edits to screenshots was a snap with the help of the bitmap tools, the vector tools and the “Fill with background” command (by John Dunning). Using these, we removed elements before compositing to reflect our own data.

Once assembled, all we needed to do was add hotspots to each page and select a destination from the PI panel. On some pages, elements were added to the States panel to simulate things like hover states.

(You can check “Creating Interactive Prototypes With Adobe Fireworks” by André Reinegger and “Interaction Design and Rapid Prototyping With Fireworks” by David Hogue for more in-depth exploration of the prototyping features available in Fireworks.)

Finalizing the prototype just required exporting the file using the “HTML and Images” option, and the project was ready to be hosted on the testing machine.

Note: The purpose of the prototypes at this stage was to test the website’s flow and structure. As such, we opted for this method to export separate non-responsive prototypes for each breakpoint to get initial feedback quickly. You may also decide just to use an HTML prototype framework such as Bootstrap or Foundation if your timeline and resources allow it — we opted for the quickest way to maintain our project’s velocity.

In The Next Article

Well, that’s it for this article. I know that so many workflow options are out there, which you may want to consider when designing responsively. I hope some of the ideas and workflows discussed in this article will come in handy and inspire you to consider Adobe Fireworks for your next project.

In the next article in this series, I will share our transition from the UX and interaction design phase of the project to the visual design and front-end development iterative cycle. Stay tuned!

Note: Even with the recent announcement by Adobe that it no longer plans to add new features to Fireworks, the tool is still very powerful and offers some of the best UI design features. Also, since Adobe plans to continue to sell Fireworks (version CS6) and provide updates to support the next major releases of both Max OS X and Windows, it is still worthwhile considering Fireworks for your next project, because of its workflow efficiency, lightweight file size and many other advantages.

Further Reading and Resources

(mb al ea)


© Olawale Oladunni for Smashing Magazine, 2013.

Tags: Fireworks

May 09 2013

13:34

The Fireworks Lament [IMHO]


  
fireworks-cs6

A few days ago Adobe caused an outcry with its announcement to not develop Fireworks, their web design prototyper, further. Though they did not really call it quits, instead promised to make sure Fireworks would receive necessary updates in terms of security or OS adaptation, furious users started their campaigns to „save Fireworks“ from oblivion. Even a petition has been started to try and force Adobe to release Fireworks as Open Source or in the alternative at least promise to not stop development. These things are nothing new. Softwares come and go.

May 02 2013

18:36

Freebie: iOS Grid System, A Free Extension For Adobe Fireworks


  

I’ll come right out and say it. I think the grid is the unsung hero of a good design. It gives structure and lets the design fall perfectly into place on the canvas. With a grid, adapting and building something new into your design is easy. Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along.

Today, we’ll share iOS Grid System, which I’ve been using when designing apps in Adobe Fireworks. The extension is free for both personal and commercial use, and it works with all iOS devices as of March 2013.

Installing and using the iOS grid extension in Fireworks is pretty easy. We’ll explain the process in detail, but you can jump to the download section and try the extension right away.


Why Are Grids Useful?

Before we continue, a bit about grids.

I like consistency. It helps me feel like I can trust whatever I’m using at the moment. At a deeper level, users appreciate consistency because it builds trust — trust that you aren’t going to pull the rug out from under them in the middle of whatever they’re doing. They know what they’re going to get, and they’ll be more comfortable with you if everything lines up just right, rather than if elements look like spaghetti thrown against a wall. In the end, consistency improves trust and credibility through better design quality, and it improves usability by making a website or application more understandable, predictable and findable.

As a designer, I like figuring out a system that makes updating easy for me. Grids help here because I don’t always have to worry about how a particular element should align with another; I’ve thought ahead and done that work already.

Learning about grids helps you put out better designs. Grids — specifically, how to apply them so that a design can be consistent and grow into itself — are an essential topic for designers.

Actually, they’re only essential if you want an interface that is:

  • consistent,
  • easy to update,
  • polished even after you’ve finished working on the interface. (I guess we needed to make that clear first.)

Whether you work with clients or are on an internal team, grids are especially useful when those last-minute “Hey, can you just add this little button in somewhere? It’ll take only a second, I swear!” changes come in. Accommodating that request becomes much less trouble simply because a good grid is in place. Just pick the appropriate column (or columns), and boom — you’re done. Happy client, happy you!

I like what Khoi Vinh has to say about grids in this short (but great) interview:


Khoi Vinh: On the Grid,” from The Color Machine

“The grid is a tool for me to impose order and logic and law. There’s a framework. If you remove all subjectivity, then you get some essential truth, some core idea that’s not clouded by inaccuracies or approximations or subjective feelings.”

Why Make An iOS Grid Extension For Adobe Fireworks?

The easy answer is that most of my designs these days are for iOS, and a grid system is essential to every design I craft. I start using it early on in the design process, and having a solid grid in place when I design makes sense for me.

I decided to build it after noticing how much time I spent making decisions that I could have easily automated. With this extension, I don’t have to spend time tediously clicking and dragging around to make sure my grid’s shapes and guides are pixel-perfect. This extension allows me spend more time on other important parts of the process (such as how the design works and looks).

Now, I just open Adobe Fireworks, create a new project, and then select what iOS device I’ll be designing for and the number of columns I’ll need. Then, the grid appears on my canvas, along with some nicely sized gutters, which help my design breathe a little easier.

Here’s what it looks like (notice the green overlay):

iOS Grid System Overlay
The iOS grid in practice. (Large version)

About The iOS Grid Extension

The extension is made for Adobe Fireworks and is optimized to help you create designs for all of Apple’s mobile devices (in both portrait and landscape modes) as of March 2013. It will be updated as new iOS devices and resolutions arrive.

Grid on the canvas: shapes and guides
iOS Grid System will build your grid automatically on any page in Adobe Fireworks. (Large version)

Here’s what’s included in the extension package:

  • Non-Retina iPhone (3GS) grid command
    Grid size: 320 × 480 pixels
  • Retina iPhone (4, 4S) grid command
    Grid size: 640 × 960 pixels
  • Retina iPhone (5) grid command
    Grid size: 640 × 1136 pixels
  • Non-Retina iPad (1, 2, Mini (2012)) grid command
    Grid size: 1024 × 768 pixels
  • Retina iPad (3, 4) grid command
    Grid size: 2048 × 1536 pixels

Note: Apple doesn’t allow designers to specifically target the screen of the iPad Mini. To work on a design for iPad Mini, you can simply use the non-Retina iPad resolution, which is 1024 × 768 pixels.

You’ll notice that all of these grids have a few things in common:

  • Both the landscape and portrait versions of the grid for each device share the same column and gutter widths.
  • On each side of the grid is a mini-column that helps your layout align with the leftmost and rightmost icons in the status bar. What good is a grid if everything doesn’t align properly, right?

For the iPhone, each column is 30 pixels wide, with a 10-pixel gutter (the Retina iPhone is 60 and 20 pixels, respectively). The iPad versions use 44-pixel-wide columns with a 20-pixel gutter (the Retina iPad is 88 and 40 pixels, respectively).

These exact dimensions make it easy for you to have adequate space between each column, while giving you flexibility in structuring the design. This is the best combination I’ve found from experimenting with different column and gutter sizes, because I’m able to keep the same dimensions while adding or subtracting columns as I change device orientations.

How iOS Grid System Works

When a command from iOS Grid System is run, it automatically creates two things: “guides” and “shapes.”

Here's how to find iOS Grid System in your Commands menu.
Here’s how to access the iOS Grid System commands from the “Commands” menu.

1. Guides

A set of guides will be placed directly on the page.

You can lock them (in the menu, View → Guides → Lock Guides); you can activate snap-to-guides (View → Guides → Snap to Guides), which can make moving and resizing objects on the page easier; and you can temporarily hide or show the guides (View → Guides → Show Guides).

2. Grid Layer

The shapes (which will serve as columns) will be placed on their own locked layer in the page, named “Grid,” and combined into one symbol. Because the shapes are added as a symbol, reusing them anywhere else in the document is easy, if that’s your thing.

Layers panel, a symbols with the grid inside.
After you run a command from iOS Grid System, in the Layers panel you’ll notice that a new layer with the grid on it (contained within a single symbol) has been added. The “Grid” layer is initially locked, to prevent you from accidentally making changes to it.

The columns in the “Grid” layer have 33% transparency, and objects in your design placed on layers underneath it will be visible. But you can move the “Grid” layer to the bottom of the stack, if you prefer.

And when you don’t need the “Grid” layer to be visible, simply toggle its visibility in the Layers panel.

Further Notes

Can the Commands Be Run on Pages With Existing Content?

Yes, absolutely!

When the extension is used on a page with existing content, it will create a new “Grid” layer, move it to the top of the layers stack, lock it automatically, and then return focus to the original layer on which you were working. Smart!

It will also resize the canvas automatically (read more about that in the next section).

Size of Canvas and Cropping of Objects

Here’s another thing to keep in mind. When running a command from the set on a page that already has some objects placed on the canvas, and if the canvas is larger than the iOS device you are designing for, then some of the objects may be cropped or deleted when the canvas is made smaller. This won’t happen in all cases, though, because in Fireworks there’s a setting (in Edit → Preferences → Edit) that controls the behavior of canvas cropping:

  • If “Delete objects when cropping” is checked, then the objects will be cropped with the canvas.
  • If “Delete objects when cropping” is unchecked, then all objects will be preserved when cropping the canvas.

Preferences - Edit - Delete objects...
The “Delete objects when cropping” preference can be toggled on and off by going to Edit → Preferences → Edit.

When you run the command on a page with some existing artwork on it, this preference is important to remember!

Running the Commands Multiple Times

You can use any of these commands multiple times in one document. Just create a new page and select the command you wish to run, and a new set of guides and grids will be created.

(Just be careful when you try to run them multiple times on the same page. This is not recommended — things can get weird.)

Download, Install And Use iOS Grid System

Want to try iOS Grid System for yourself? Follow these simple steps:

  1. Download the iOS Grid System extension (the ZIP contains an MXP file and is around 20 KB). Alternatively, you can download it from its GitHub page, because this project is also maintained there, if you’re that kind of geek.
  2. Unzip and then run the MXP file, and it’ll launch Adobe Extension Manager. Follow the on-screen instructions, and you’ll be ready to use it in Fireworks! (For general information on installing and working with extensions in Fireworks, I highly recommend the article “Optimizing the Design Workflow With Extensions”.)
  3. Open Fireworks and create a new document. As mentioned, the size of the canvas doesn’t matter, because the command will resize the canvas automatically.
  4. Go to Commands → iOS Grid System and select an iOS device. Then, iOS Grid System will go to work building your grid!

Alternatively, you can apply the extension to existing pages as well. But keep in mind that, while existing artwork won’t be touched, the canvas will be resized (unless, of course, you run a command that matches the dimensions of the current page).

Roadmap And Final Thoughts

You’ve probably already figured out that I love grids and find them very useful. If you use Adobe Fireworks for iOS design, I hope that this grid system will help your design grow as you maintain it.

I’m also curious to see how and where you use it. Share a link to your app or mobile website. We’d love to see it in action!

Now let’s open it up to your suggestions for improvements. This idea has existed (mostly) in a vacuum up until now, and these kinds of things always benefit from other people’s suggestions. For example, I’m curious if anyone would prefer to use templates, instead of commands that run on a per-page basis. Or perhaps you’ve found a bug somewhere.

I would greatly appreciate all kinds of feedback!

Of course, any questions about how to use this extension are welcome, too. Just leave a comment — I’d be happy to help.

Further Reading

(mb al)


© Joshua Mauldin for Smashing Magazine, 2013.

Tags: Fireworks

April 04 2013

14:25

Create Demo: An Easy Way To Present Adobe Fireworks Design Prototypes


  

With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding.

The Create Demo extension addresses some of these issues. It automatically converts your Fireworks documents into portable presentations, which can then be easily presented in any browser — desktop or mobile.

Overview

Why Is It Needed?

This extension makes the process of preparing and exporting your Fireworks PNG files as presentations quick and painless. It can be used to show multi-page website prototypes, designs and sets of slides.

The only thing you will need to think about is where to upload the presentation (i.e. whether to present it online or on your iOS or Android device). The generated slideshows will render identically on all devices, with automatic thumbnail navigation.

A Bit Of Background

The “Demo Current Document” used to be a great feature in Fireworks that I often used to show off website concepts and designs to clients. Unfortunately, its reliance on Flash and the success of the iOS and Android platforms means that, today, it cannot be used to reliably present your ideas on every screen and in every situation. We needed to move from Flash to a pure HTML solution if we wanted to have full cross-browser and cross-platform support.

Having read Viktor Goltvyanitsa’s excellent article about the making of the original extension and knowing what can be achieved today with the capabilities of modern browsers, we knew it was time to accept the challenge. This is how the Create Demo extension was conceived (you can read more on our blog).

Installation And Requirements

The extension works with Adobe Fireworks CS3 or later and has been tested extensively on both Mac and Windows platforms.

  1. Download Create Demo from Adobe Exchange. The extension is free, but you’ll need an Adobe ID in order to download it (if you’ve ever downloaded Adobe software — Fireworks, for example — then you likely already have an ID).
  2. When download is complete, simply double-click the CreateDemo2.0.5.mxp file.
  3. Click on “Accept” when the Adobe Extension Manager opens.
  4. If installation was successful, you’ll see Create Demo listed in the Extension Manager list.

Create Demo installation steps
Installation steps.

Advice to Windows 7, Windows 8 and Vista users: run the Adobe Extension Manager as Administrator to prevent any errors during installation.

Supported Browsers and Platforms

The exported demo files generated by this extension have been tested on a variety of platforms and browsers, including iOS, Android, Windows, Linux and Mac OS X. Tested browsers include Safari, Firefox, Chrome, Opera and Internet Explorer.

How Much Does the Extension Cost?

The extension is absolutely free for everyone and is licensed as “donation-ware”; the only limitation of the free version is a small credit that appears at the startup of every presentation. If you decide to contribute, you’ll have the option to remove this screen, and we’ll personalize the interface with your name (you can choose how much — or how little — to donate, starting from only £5).

licensed version interface (personalized)
Licensed version (personalized).

Last-minute note: If you are a CS6 user, you should know that the process of obtaining and managing your extensions is currently being overhauled. To ensure that we can continue to support and provide updates in the future, we have put the extension in the new Adobe Exchange panel. For detailed information on installing the extensions using this panel, see our detailed blog entry about it.

Create Demo: How To Use It

Basic Use

Once the Create Demo extension is installed, you can access it from the menu: Commands → Web Engineer → Create Demo.

The extension’s interface is grouped into two key sections: settings and pages. Settings can be customized on a per-document basis, so if you change them, you will need to save your Fireworks document to ensure they are not lost.

Settings and Pages tabs
The key sections of the Create Demo extension: settings and pages.

Settings section

The settings panel groups the common general options for exporting your demo. The current version (2.0.5) gives you the following options:

  • Stage
    The color of the area outside your slide.
  • Highlight
    The color of the highlight applied to the selected slide’s thumbnail.
  • Max thumb size
    The width and height of the bounding box within which your slide’s thumbnails will be sized to fit. The thumbnail’s size is not limited, however, for best results, use a thumbnail size that fits your target device.
  • Auto-hide thumbs
    An option to hide thumbnails automatically (handy for slideshows).
  • Click left side to go back
    Navigate both forwards and backwards through the slideshow depending on where you click. When not enabled, a click always advances you forward.
  • Shadow
    Adds a CSS-based shadow to your slide (ideal for presenting photos).
  • Show splash screen (licensed version only)
    Removes the splash graphic on launch.
  • Use export settings
    This will respect the export settings specified in your Fw PNG document. If unchecked, the slides will be exported as high-quality JPEG files.
  • Use HTML5 cache
    Enables your slides to be cached for offline browsing.
  • Enable gestures
    An option to use gestures (flicks) on mobile devices to advance the slides and to show and hide the thumbnails. This works well on touchscreen devices that support it, but the feature is optional and not enabled by default. If you want to experiment, an explanation of the handling of gestures is featured in the third example.
  • Auto-advance
    When set to a non-zero value, this is the delay in milliseconds before the next slide is shown (note that an interaction will restart the timer). 1000 milliseconds equals 1 second, so be sure to input a large enough value.

Pages section

The pages section shows which pages will be exported from your Fireworks document. Simply clicking on a page name will toggle its inclusion.

Fireworks Pages panel (left), Create Demo page selection (right)
Fireworks’ Pages panel (left), and Create Demo page selection (right).

One of most valuable Fireworks features for Web and mobile designers is pages. Pages essentially enable you to capture your design concepts in one document, with the help of shared layers, states and symbols. The Create Demo extension relies on the pages feature in Fireworks when it prepares your design for exporting as a multi-page presentation.

The Pages panel is usually located to the right of the Fireworks workspace, docked with the Layers panel. If it’s not open, press F5 or go to Window → Pages.

A Note on Locations (for Exported Presentations)

  • If you create a new Fireworks PNG file, save it somewhere in your computer, and run Create Demo, then the extension will suggest to save the presentation in the same location where the Fw PNG file is currently located.
  • If you create a new Fireworks PNG file, save it somewhere in your computer (let’s call it location “A”), export it via File → Export… or File → Export Preview… (location “B”), and run Create Demo, then the extension will suggest to save the presentation to location “B” (and not where the Fw PNG file is located).

This is by design and could save you a few mouse clicks as you prepare your presentation!

Practical Examples

The following series of examples demonstrate the key features of Create Demo. The first slide in each example also shows the settings that were used to create it.

Create Demo (view demo 1)
Example 1: This is a demo of a website prototype. The page shadow has been turned off, and the background is set to “match.”

Create Demo (view demo 2)
Example 2: In this demo, the images have been framed with a shadow; large thumbnails have been chosen; and the “auto-hide” option is enabled (i.e. if you don’t interact with the mouse, the thumbnails will be hidden after a short delay).

Create Demo (view demo 3)
Example 3: This example demonstrates some of the features added in the 2.x release, focusing on HTML5 enhancements (including caching and better device support).

Touch, Keyboard Keys and Mouse

Featuring keyboard control, mouse control and gesture support (iOS only), Create Demo makes navigating your pages both swift and smooth.

keyboard control mapping
Keyboard controls (overview).

You can show and hide thumbnails of your pages for quick navigation. Images are handled with care, with a focus on presenting them efficiently and elegantly. Thumbnails are centered in the view, giving quick access to adjacent pages (making it similar to how Flickr’s navigation works). With a few clicks you can flip through a large number of slides, if the size you selected for the thumbnails is reasonable.

Create Demo: In More Detail

How It Works

The slideshows are created using nothing more than HTML and JavaScript. Create Demo produces configuration files, a manifest file (if the content caching option has been enabled), images, and the script required to create a versatile presentation that will run on a wide variety of devices.

Manifest is part of the HTML5 standard:

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

Simply put, it gives the browser the complete list of resources that are required to store pages locally. It is associated with the presentation in the HTML by adding the manifest attribute to the document. For example:

<!DOCTYPE HTML>
<html manifest="cache.manifest">
…

The manifest file itself contains the list of resources, which might require you to configure your server to add the manifest MIME type. For those using Apache, a configuration file is automatically exported with your files.

To learn more about the application cache, HTML5 Rocks has a good introduction. To ensure that users see your latest presentation when the content cache is enabled, clear the browser’s cache or upload the presentation to a new URL.

You can also link to specific pages directly in your presentation simply by adding #X to the end of the URL, where X is the page number that you want the presentation to jump to. This can be extremely useful when you want to email a series of links and annotations to a client to explain a prototype in more detail.

Adapts to the Device

The presentation will adapt to the device (whether desktop or mobile) on which it is being viewed. Depending on the capabilities of the device, the presentation will make the best use of what is available. On the desktop, the fixed positioning helps to keep the thumbnails placed nicely at the bottom of your slideshow, and by adding a margin to the bottom of the page, none of your presentation images will be obscured.

When viewing the presentation on a mobile device, the thumbnails are moved to the top of the screen for easier navigation. The pages are not downscaled to fit the size of the screen, since mobile browsers usually have excellent zoom and pan functionality.

Mobile (left) versus desktop (right)
Mobile view (left) versus desktop view (right).

iOS Application Mode

The presentations created by the Create Demo extension fully support iOS’ application mode. By simply supplying a page with a given name and dimensions, you can automatically export icons and the startup screen directly from your Fireworks file. For icons, simply set the page name to the icon size in pixels, prefixed with @ (currently, 57, 72 and 114 pixel sizes are supported). For the startup page, name the page @startup, and it should match the standard startup image size of 320 × 460 pixels. For a full explanation and example of this in action, see the third practical example.

Known Issues

The extension has had a number of updates. I plan to develop and improve it further in the future.

Currently, only a few limitations are known:

  • If Google Chrome is your default browser on OS X, then when you launch the presentation as an export from Fireworks, the browser ends up with an extra / in the URL. I believe this is a known issue with Fireworks (and will hopefully be fixed in a future release by Adobe).
  • Gesture support for Android has been removed due to issues with scrolling. Touch and gesture support will likely be reviewed and updated in future releases of the extension.
  • The current exporting format is not suitable for large presentations (i.e. large images), but whether this should be supported at all is questionable.

Download A Fireworks PNG Template For iOS

I have created a simple template containing icons and a startup screen. It contains four pages and provides a handy starting pointy for creating your presentations. The icons all share the same symbol, so they can be edited in one place, with the rest updating automatically. The icons and startup images are named and sized correctly and will automatically be converted on export (although that they won’t be shown as pages included in the output of the final presentation). This demo does not include a design concept because it’s meant to be a starter file.

Download a Fw PNG demo
Download the template Fireworks PNG file (ZIP, 650 KB).

After downloading, simply unzip the file, and open it in Fireworks. You can then assemble your presentation, add and edit pages, and customize the icons. This template is not required by the extension; it’s intended merely to save you a little time when you want to quickly create the full set of iOS icons and a startup screen.

Note: You’ll need to first add pages to the Fw PNG template; after that you can run the extension.

If you no pages are in your document (other than the icons and the splash screen) and you try to export the demo, you’ll see a warning, and a blank index.html file will open.

If the document misses pages, a warning will be shown
This message will appear if you try to create the presentation without having actual pages in the Fw PNG document.

Quick Demo

This very simple example of a presentation was automatically created with the help of the iOS Fw PNG template. It contains three content pages, navigation with thumbnails, an iOS startup page and three icons.

Click or scan to view demo
Click the link (or scan the image using your mobile device) to view the demo.

Conclusion

I’ve attempted to keep this extension robust in order to solve a simple problem, which is to quickly and reliably present multi-page Fireworks designs on any device. The key was to make it easy to use; it shouldn’t leave you puzzled and desperately looking for a manual. We’ve found this extension to work well for our team, and I hope it works well for you, too.

You can follow the Adobe Fireworks Exchange for update notifications. I’d also love to see how this is being used, and we welcome feedback and comments. You can also follow me on Twitter for the latest updates.

Feedback

Have an idea for improvement or a new feature? Found a bug? Don’t hesitate to contact us or leave a comment here.

(al) (mb)


© Craig Lawson for Smashing Magazine, 2013.

Tags: Fireworks

August 28 2012

15:04

Optimizing The Design Workflow With Extensions // Adobe Fireworks


  

I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I want to focus on one of its other biggest strengths — its extensibility.

As a platform, Fireworks gives its users a lot of freedom, when it comes to extending it. Because of that, Fireworks has a thriving ecosystem of add-ons (extensions) that add a lot of valuable functionality with newer options.

In this article, I’ll try to list some of my top extensions for Fireworks. These are not necessarily the most complex or powerful extensions, but rather those that have helped me be more productive with my Fireworks workflow over the years. Also, all of these are free to test and use, so you can even try them right away!

My article is pretty detailed, so to help you navigate it, you can use the following list:

  1. Grids Panel
  2. Guides Panel
  3. Smart Resize Auto Shape
  4. Tables Auto Shape
  5. Placeholder Auto Shape
  6. Orange Commands
  7. QuickFire

Working With Extensions In Fireworks

Fireworks can be easily extended, but the extensions are installed and maintained via the Adobe Extension Manager — a tool that must be run separatey from Fireworks.

Before we review in detail the extensions that I can personally recommend, I would like to share a few general tips and suggestions on how to work with extensions in Fireworks. Although these tips are mostly geared towards Fireworks CS5 and CS5.1, there are actually only a few minor differences if you are using version CS6.

Easy fix for issues with Windows Vista / Windows 7

If you are using Fireworks on Windows Vista or Windows 7, the Extension Manager may give you strange errors when you attempt to install an extension. The easiest solution to this problem is to run the Extension Manager as administrator. Simply right-click the “Extension Manager” shortcut and select “Run as administrator”.

Note: The reason why the EM needs to be run sometimes with administrator privileges in Windows Vista and Windows 7 is simple — some extensions specify installation locations in the Program Files folder, and Windows requires administrator approval to install anything in this area, for security reasons. Usually older extensions (that were not recently updated) are installed into the Program Files folder, while new extensions are installed into the User Application Data folder. Fireworks can run extensions from either the Program Files folder or from the “User Application Data” folders in order to maintain backward compatibility with older extensions.

Where are the installed extensions located?

If you are installing Fireworks extensions for the first time, keep in mind that:

  • Commands will usually appear in the Fireworks Commands menu.
  • If an extension also installs a panel, you will find it in the Window menu.
  • If an extension installs an auto shape, it could be found in the Auto Shapes panel.

Extension descriptions

The best way to learn how an extension is supposed to work, or in which menu / submenu you’ll find it, is to look for the extension description in the Extension Manager. However, please note, that the Extension Manager lets extension developers link to descriptions online, which means that if you are not connected to the Internet, you will see empty description boxes in the Extension Manager. If you do come across these, know that a missing internet connection might be the cause.

Using shortcuts

If there are some commands that you find yourself using very often, you may want to assign keyboard shortcuts to them for gaining more productivity.

To do so, go to menu EditKeyboard Shortcuts, duplicate the default shortcuts set, then select your command from the list and add a shortcut combination of your choice. Fireworks will let you know if the shortcut you want to assign is already in use. Then, depending on what it already does, you can either choose to replace it with the new one, or select a different key combination.

Updating extensions

Updating extensions in Fireworks is pretty straightforward — you just have to open the Extension Manager every once in a while. If an extension has an update available, you’ll see a notification in the list of extensions. Then, simply select the extension and click “Update”.

Updating Extensions Using the Adobe Extension Manager
Process of updating extensions.

Please note that not all Fireworks extensions have the “Automatically Check For Updates” option built-in. So alternatively, you can simply download a newer version (if there is one available, of course) from the website where the extension was originally posted, and then run the Extension Manager. The EM will ask you if you’d like to replace the old version with the new one — select “Yes”, and the process will complete automatically.

Now that we’ve covered the basics, let’s move on to the list of extensions!

1. Grids Panel

John Dunning is a legend in the Fireworks community, and his growing list of powerful extensions often compete with themselves for the top spots as valuable and useful. His grids extension is unquestionably the first one I reach out for every time I start a new project.

In a nutshell, the extension lets you set up a grid for your design. You set the parameters (the column width, gutter width, number of columns, etc.) and it then creates a locked layer with the columns, rows and guides spanning the height of your canvas. Since there are a couple of setups that I usually prefer to work with, I’ve saved them as presets, so it’s simply a matter of opening the panel and selecting an existing preset.

For responsive designs, what I typically do is create a few grid setups for different viewport sizes. Then I simply create a new page for each breakpoint and apply the appropriate grid before pasting the content in for realignment.

Insert Grid Panel
Insert Grid Panel: Typical setup for a 12-column grid. Large preview.

The features of the grid panel are evident from the screenshot, and make it easy to control columns, gutters, and baselines as wells the appearance of the overlay (and whether or not guides should be created). If you have ever tried to set up a grid in Fireworks without this extension, you’ve wasted a whole lot of time!

Useful tip: Using Photoshop and need something similar? The GuideGuide panel might be something worth giving a try.

2. Guides Panel

As awesome as the grid panel is, it’s probably not suitable for every situation. Sometimes you may need to just create a set of guides without all of the other grid structures (e.g., if you are creating individual assets such as banner ads, rather than entire pages — grids are great for entire pages and screens, but they can be an overkill for specific components).

Also, for those of you who work extensively with guides, it often seems much easier to quickly set up the grid precisely with guides. If you are like me, and addicted to the fine control that guides offer in Fireworks (or any other design application for that matter), you most certainly would like to check out the Guides panel by Eugene Jude.

The panel gives you several options to add guides to the canvas with precise numerical control: you can set margins on either (or all) four sides, create columns and rows, or add individual guides at specific coordinates.

Guides Panel — General
Guides Panel (with the “General” tab selected in it).

You can copy entire collections of guides and paste them into another page or document, or even save sets to retrieve later (this feature is pure gold if you have a setup that you work with often, and want to reuse).

But where this panel really shines is in its ability to work with selected objects. Lets say you need guides all around and through the middle of that image you just placed in your design, so you can align objects around it. Simply select the object, go to the “Selection” tab in the Guides Panel and select the appropriate boxes. You can even set an offset value between the object and the guides.

Guides Panel — Selection
Adding guides through the center of a selected object.

Finally, there’s the ability to delete all guides, or at least only the vertical or horizontal ones (oh, how I wish I had this panel a little earlier — this would have easily saved me a couple of precious weeks every year!).

3. Smart Resize Auto Shape

Since Adobe Fireworks is used extensively for UI design, a very common use case is to create an interface element by grouping a few objects together — rectangles, text fields, buttons, etc.

Fireworks’ object-based workflow makes this an easy task (compared to Photoshop’s predominantly layer-based structure). The problem though is that once you have created such a group, resizing it can be difficult. You can’t just select the group and change its width or height, since Fireworks will simply stretch everything in the direction specified, and deformations to the individual objects will occur.

That’s where John Dunning’s Smart Resize comes into play.

Once you’ve selected a group that you need to resize, use menu CommandsSmart ResizeAttach, and the command will convert your group into a special smart object with the typical yellow resize handles.

Smart Resize: Saving Time When Resizing Groups of UI Objects
Smart Resize: Saving Time When Resizing Groups of UI Objects.

You can use these handles to resize the group in any direction and witness the magic in action. The extension will resize only elements that extend across more than 50% of the group’s size — which is typically your background boxes — and retain the rest of the elements in position relative to the closest edge of the group.

Smart Resize in Action
Smart Resize in action.

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: Selecting Anchor Points
In this example, the X anchor was set to the left, then the group was resized.

Text boxes will be resized while maintaining their text properties intact — the height and width of the text box will change, but not the text itself. John demonstrates the extension’s usefulness when working with a mock-up of a dialog box on his website. But of course, there are many more cases where you can save time with this extension. Personally having used it for a couple of months now, I’ve found my workflow immensely optimized, especially when creating wireframes where quick changes to try out variations become the “need of the day”.

4. Tables Panel

If there is one extension in this list that I would award as the “Most Underrated”, it would have to be the Tables Panel from John Dunning.

It does something that seems very simple but is actually much more complex and tedious: building and editing tables (painlessly!) in Fireworks. It can also be an indispensable tool for editing many other design elements, including buttons, styled boxes, and placeholders.

We’ve all been there, haven’t we? Every designer knows that often the task of mocking-up a table inside a Web design (or a Web design prototype) can come up. Unfortunately, it is rare for a graphics editor to provide a decent level of support for building tables, and Fireworks is no exception. Everything from deciding whether to use rectangles for rows or individual cells, or aligning things manually every time there’s a change in the design, tables in Fireworks can be a pain.

But things change a lot with the introduction of the “Tables” extension!

Tables Panel: Easily Build Tables in Fireworks
Tables Panel: Easily build and modify tables in Fireworks.

To create a table, you simply lay out the content of the table roughly on the canvas, in the sequence you want. Select all objects, and hit the “Create” button in the Tables Panel. The extension will add individual boxes for each element and lay them out with the height and width of the biggest element that appears in a row or column. You can change the padding, decide whether you want to see the table outlines (or not), and so on — and what’s better, everything always remains editable. Lets say you changed some text in the table, and now it’s too long for the cell that contains it? Simply press the “Update” button and the table will auto-adjust accordingly!

Apart from the obvious goal of creating tables and grids, one can use the extension in a few other scenarios. For example, you could use it in adding a background and border to text boxes for pull-quotes, so that the box always adapts to the size of text.

I often find myself using it for buttons when creating wireframes. It has always been very annoying to me that I have to keep managing a rectangle and a text field every time I need a button. With this extension it’s all taken care of, and I never have to manually change the width of a new button to fit the text inside it! Besides, you can even have borders of different widths around the button by changing the border widths in the Tables Panel.

Tables Panel: Creating Dynamically-Sized Buttons Quickly.
Tables Panel: Creating dynamically-sized buttons quickly.

The Tables Panel is pretty flexible and has many other options. You can even insert a table from a text file (tab-delimited or comma-separated text file — .txt or .csv). After you select the file, the contents of the table will be inserted at the upper-left corner of the document (you can later drag the table around and position and style it in any way that you want). You can also import a table from a Web page — you’ll just need to first convert it to tab-delimited or CSV format.

Tables Panel
Tables Panel: it provides you with a high level of customization and with various options.

As you can see, the possibilities for working with tables are almost unlimited. All of this is possible again thanks to the power of Fireworks and the talented extension developers that give so much to the community!

5. Placeholder Auto Shape

If you use Fireworks extensively for wireframing, you are no doubt aware of the frustration of maintaining placeholder boxes and the necessary information contained within. I usually draw gray boxes for my images and include a descriptive label, the height and width co-ordinates within the box. The problem is, this metadata often needs to change with the size and position of the placeholder. Updating this information manually and re-aligning the text so that it is always in the center can be a pain.

John Dunning to the rescue again, with his Placeholder auto shape extension.

To create an image placeholder, pick this auto shape from the Tools panel (instead of the standard Rectangle tool), and it will draw a box with the necessary data already filled in. Every time you resize and reposition the placeholder, the coordinates will automatically update as necessary.

Placeholder Auto Shape: Dynamic Placeholders that Always Stay Up-To-Date
Placeholder auto shape: Dynamic placeholders that always stay up-to-date.

It’s interesting to mention that the Placeholder tool can be found in the Tools panel. But also, this extension installs a Placeholder auto shape, which can be found in the Auto Shapes panel. Both the tool and the auto shape do the same thing, and the difference between their use is very minor (you can select the Placeholder tool and drag it to any size on the canvas, while the Placeholder auto shape should be first dragged and dropped to the canvas, and then resized).

As you can see in the screenshot above, you can decide what information gets displayed in the placeholder. The choice is between showing a custom label for the placeholder (like “logo”, “screenshot”, “banner”, etc.), and the coordinate of the image (height, width, x & y coordinates). Clicking the crosshairs in the middle of the placeholder opens up a dialog box where you can turn these details on or off. You can also change the size and position of the paceholder precisely right from within this dialog box and change (or remove) the fill color.

Placeholder Auto Shape: Choose What Content You Want on the Placeholder
Placeholder auto shape: choose what content you want on the placeholder.

Useful tip: If you have multiple placeholder shapes in your file, you can select them and resize them all at the same time. Neat!

6. Orange Commands

If there’s anything I would call a Swiss Army Knife for Fireworks, it would have to be Orange Commands by Ale Muñoz.

Unlike every other extension in this roundup that focuses on a single task or a group of tasks, Orange Commands aim to bring efficiency to tasks across your entire Fireworks workflow. 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. And what’s more, they’re not only free, but are also open-source, letting anyone with enough know-how to tweak and extend them even further!

Here are a few of my favorite commands from the 100+ that this extension comes with:

  • Most designers don’t know this, but there is a way to change the alpha / opacity of a stroke in Fireworks CS5.1 as well as earlier versions. Unfortunately, to change it you will need to go into the “Edit Stroke” panel and then inside “Advanced” to get to this control — the feature is pretty much buried. Orange Commands bring this ability right up to a single click with the Stroke Alpha set of commands under Alpha.

    (Using Fireworks CS6? You’re lucky! A few new options were added in the Properties panel, which include independent control over the opacity of both stroke and fill!)

  • If you like to number your pages so they appear in a specific sequence after being exported, just set them in the right order in the Pages panel. Then hit Numberize under Pages, which adds a number in front of the name for each page. Need to change the order? Reorganize the pages and hit the command again. There is also a De-Numberize command that will let you get rid of those numbers, if needed.
  • Need to swap the position of two objects in your design? Select them and hit the Swap command under Position. Easy!
  • Fireworks has shortcuts for aligning multiple objects to each other, but you still need the Align panel if you want to align something in reference to the canvas. That’s where the Center on canvas set of commands under Align comes into play.
  • You can use the Space horizontal and Space vertical commands under Align to distribute selected objects with a specified distance between them.

This is just a small part of what Orange Commands can do. You can check out the detailed documentation for more details on what’s available.

Since Fireworks lets you assign keyboard shortcuts to all menu items, you can assign them also to your favorite commands, converting any series of steps into single, keyboard-driven actions. Although I have a few favorite ones, virtually every one of the commands has contributed to “shaving” precious seconds off my workflow, which amount to hours saved every month.

Useful tip: Did you know that Orange Commands come with their own keyboard shortcut sets that pair perfectly with the commands themselves? If you’d like to use one of them, simply copy the shortcut XML files to the “Keyboard Shortcuts” folder (see “Installation” for reference), restart Fireworks, and then select one of the “+ Extras” sets. Of course, you can can further customize these shortcut sets, as well.

7. QuickFire Command

With the large number of useful extensions available for Fireworks, it doesn’t take very long before your “Commands” menu becomes overcrowded with items. At this point it could be really difficult to get to the command you need right at that moment. On the other hand, remembering countless shortcuts for quick access of all the commands, panels and menu items in Fireworks can also be difficult.

And that’s where QuickFire comes into play. This extension is again from John Dunning, and it is a fitting tribute to the power and flexibility of Fireworks. QuickFire is similar to Quicksilver on Mac OS and Launchy or Colibri on Windows. It is a super simple, keyboard-driven interface for getting to the Fireworks command you need, without all the slow digging through various menus and sub-menus.

Once you’ve installed QuickFire, assign a keyboard shortcut to it and restart Fireworks. Then, when you hit the QuickFire key combination, you can start typing what you need. It will instantly list everything that matches what you are typing, with various icons to easily differentiate between panels, commands, auto shapes, pages and more! The most relevant item will be at the top of the list and ready to be run once you press Enter. The icing on the cake is that QuickFire works with everything in Fireworks, and not only the custom commands that you have installed.

QuickFire: Access any Command, Panel and Auto-Shape in Your Fireworks Set-Up with a Few Keystrokes.
QuickFire: access any command, panel and auto shape in your Fireworks set-up with a few keystrokes.

Let me take a real-life example to demonstrate how I use the QuickFire panel to increase my productivity in Fireworks on a day-to-day basis. Let’s say I need three lines that I need to align to each other, position them with even spaces from one another and add vertical shadows to each one. Here’s how I do it (without ever touching the mouse) once I’ve drawn and selected one of the lines:

QuickFire: Lightning Fast Editing Workflow.
QuickFire: lightning fast editing workflow.

Useful tip: When you open QuickFire and search for a specific command in the list, pressing Enter normally executes the selected command and closes the dialog, while pressing Shift + Enter runs the selected command but keeps QuickFire open — this will allow you to run several commands in a row (and save a few more keystrokes).

QuickFire offers many more productivity enhancements. It will let you:

  • Open panels quickly.
  • Insert Symbols from the Common Library.
  • Insert Auto Shapes.
  • Access standard Fireworks menu commands.
  • Apply textures and patterns to selected objects.
  • Open recent files or create new files from templates.
  • Select layers and pages, and also move or copy selected objects across layers and pages.

Again, you can check the detailed description of QuickFire and its common uses on John’s website.

Conclusion

As you have probably already guessed, I’m a huge fan of extensions and use them quite regularly in my design workflow with Adobe Fireworks. The list of extensions I use on a daily basis is much longer than what I can include in just one article — what’s covered here are just a few of them that address critical areas in Fireworks, to make a designer’s life a bit easier. And please note: in a possible follow-up to this article, I’ll try to review in detail a few more extensions that address several more specific areas within Fireworks.

Also, with the sheer number of extensions available for Fireworks, I’ve only scratched the surface of what’s possible. If you feel I missed any important ones, do let me know in the comments — I would love to learn about those and try experimenting with them myself.

(In)complete List Of Useful Resources

Finally, I think that this article should end with a list of places to get (or to learn about) the best extensions for Fireworks:

  • Fireworks Interviews
    The idea behind this project is to interview designers all around the world who use Adobe Fireworks on a daily basis. You’ll also see there are quite a few recommended extensions (with tips and tricks) by many skillful designers, such as: Keith Lang, Nick Myers, Benjamin De Cock, Jonathan Snook and many others.
  • Extending Fireworks
    is all about articles on Fireworks extensions and commands, interviews with their authors and helpful tips. The website is relatively new but already has a few valuable resources posted on it.
  • Fw Police
    Brings many free resources to people using Adobe Fireworks — extensions, Fireworks PNG files and other freebies (by the way, the same FwPolice guys are now working on a new project that will relate to Fireworks extensions, as well).
  • Adobe Fireworks: The Most Awesome Extensions
    Designer Mikko Vartio talks about his favorite extensions and what they do.
  • Favorite Adobe Fireworks Extensions
    A long list of Fireworks extensions, prepared by UX designer Dave Hogue.
  • John Dunning’s extensions
    John Dunning’s extensions for Fireworks. Make sure to check all of them out!
  • Aaron Beall’s extensions
    Aaron Beall (who is an experienced user and developer for both Fireworks and Flash) has some pretty useful extensions, too.
  • Matt Stow’s extensions
    Matt Stow has a few extensions that will help any professional Web designer and developer.
  • Fireworks extensions | Adobe Exchange
    List of all Fireworks extensions published on the Adobe Exchange website.

(mb) (jvb)


© Ashish Bogawat for Smashing Magazine, 2012.

Tags: Fireworks

July 23 2012

08:36

Simulating The Letterpress: From Live Filters In Fireworks To CSS Code


  

One of the visual effects that is a mainstay in my Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background. Think of what a home appliance marquee or a professional business card looks (and feels) like, and you’ll know what I’m talking about.

I’ve developed a simple workflow for creating a letterpress text effect in Adobe Fireworks that, with the advent of CSS3, can be applied directly to HTML text — no images needed. Here’s the best part: it doesn’t use any Bevel or Emboss Live Filters.

What Is Letterpress?

Letterpress is a venerable technique of printing that involves “pressing” a plate of movable type onto a sheet of paper to produce an effect that is impressed (where the text is pressed down onto the paper) or embossed (where the text is raised above the surface of the paper).


An example of a letterpress business card with impressed text. (Image: Audimas Adomavicious)

The classic charm of letterpress found its place in digital design once designers were able to emulate its effect on screen. To accomplish that, designers observed the effect of light and shadow on the dents on paper that had gone through the printing process. Imagine a light shining down at an angle on a sheet of letterpress text. Impressed text will appear to have a sliver of highlighting at the bottom edge of the letters and a thin shadow at the top edge. Embossed text is just the opposite: highlights on top, shadows on the bottom. These properties create the effect of raised or sunken areas along the surface, and this can be translated using effects made possible by both Fireworks and the CSS3 specification.

Why Not Just Use Bevel or Emboss?

Fireworks’ Bevel and Emboss Live Filters are a bit primitive for my tastes. The refinement controls are unwieldy — for example, you can’t set highlights and shadows independently — and the result is subpar. It works OK for straight edges and sharp corners, but it gets rough around curves. I suspect this is because the effect is raster-based, so that it can work with any object (shape, text or embedded image); a vector-based tool would have allowed for a smoother and more precise effect.


The letterpress effect using the Outer Bevel Live Filter. Notice the roughness of the curved edges.

Letterpress Text In Fireworks

A better way to recreate the effect would be to use the Drop Shadow Live Filter, because it produces smoother edges. This solution hinges on a basic setting: a shadow and a highlight, offset exactly 1 pixel up or down, relative to the text object. For this tutorial, we’ll start with two text objects of different colors, set against a colored background.


Start with two text objects.

Embossed Text

To create an embossed effect, apply two Drop Shadow Live Filters to our first text object:

  • Apply a “Shadow” (distance: 1; color: #000000; opacity: 60%; blur: 0; angle: 270;) to the bottom of the text, and
  • Apply a “Highlight” (distance: 1; color: #FFFFFF; opacity: 90%; blur: 0; angle: 90;) to the top of the text.


Embossed effect applied to the “Smashing” text object.

The opacity of the Drop Shadow filters will depend on how light or dark the background is in relation to the text’s color. Tweak these values according to how pronounced you want the letterpress effect to be.


Adjust the opacity value in the Drop Shadow Live Filter.

Impressed Text

To create an impressed effect for the second text object, just switch the angle values of the “Shadow” and “Highlight” Drop Shadow filters shown in the previous step, so that the shadow is on top of the text and the highlight is on the bottom. Adjust the opacity values to maintain contrast against the darker text object’s color.


Impressed effect applied to the “Magazine” text object.

Note: These effects work best with text and background color combinations that aren’t black and white, as in our example. If you’re working with black text or black backgrounds, you’ll want to skip the “Shadow” effect, because it will do little for the text. Similarly, for white text or white backgrounds, forego the “Highlight” effect.

Save as Style for Reuse

Now that our letterpress effects are in place, we can save them as Fireworks Styles so that we can use them again later without having to apply each filter manually.

To create a Fireworks Style:

  1. Select the “Smashing” text object with the Pointer tool (V);
  2. Bring up the Styles panel (Control/Command + F11, or in the menu Window → Styles);
  3. Click on the context-menu icon in the top-right corner of the panel, and click on “New Style”;
  4. In the “New Style” dialog box, let’s give our style a descriptive name, like “Letterpress Emboss.” Uncheck all properties except for “Effect,” and click OK.
  5. Repeat steps 1 to 4 for the “Magazine” text object.


Styles panel and context menu


“New Style” dialog box

You should now see two new items in your Styles panel. The next time you want to apply the emboss or impress effect to a text object, just select that object, and click on the new style that you created.


Styles panel with two new styles

Additionally, you can save these new styles as a Style Library file (*.stl), to share with other designers or to back up your styles before reinstalling Fireworks.

To save a set of styles as a Style Library file:

  1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
  2. Click on the context-menu icon in the top-right corner of the panel, and click “Save Style Library”;
  3. In the “Save As” dialog box, enter a descriptive file name for the STL file, and then click “Save.”


The Styles panel, again.


“Save As” dialog box

To import a previously saved Style Library:

  1. Bring up the Styles panel (Control/Command + F11, or Window → Styles);
  2. Click on the context-menu icon in the top-right corner of the panel, and click “Import Style Library”;
  3. In the “Open” dialog box, browse to and select the STL file, and then click “Open.”

Hint: Need a good library of Letterpress Styles for Adobe Fireworks? Why not check this 16 Letterpress Styles set by Mikko Vartio?

Translating Into CSS

Option 1: Translate the Values of the Live Filters Manually

Aside from the downsides of the Bevel and Emboss filters that I mentioned earlier, the other reason I use Drop Shadow filters is that they readily translate into CSS3’s text-shadow property. Consider this basic syntax:

text-shadow: [x-offset] [y-offset] [blur] [color-alpha];

Let’s break this down:

  • [x-offset] is set to 0, and [y-offset] is either 1px or -1px, depending on whether the shadow or highlight is at the top (90°) or bottom (270°);
  • [blur] is set to 0, to keep the shadow and highlight effects crisp;
  • [color-alpha] is set using an RGBa value: rgba(r, g, b, a).
    • The first three values (rg and b) correspond to the decimal red-green-blue values of the color itself (for example, #FFFFFF in hexadecimal is equal to 255, 255, 255 in decimal);
    • The last value (a) determines the transparency of the color (where 0 is completely transparent, 0.5 is half-transparent, and 1 is completely opaque).

Let’s apply our effects to the following HTML markup:

<div class="embossed">Smashing</div>
<div class="impressed">Magazine</div>

Our CSS for the embossed effect would be:

div.embossed {
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 -1px 0 rgba(255, 255, 255, 1.0); /* highlight */ }

And for the impressed effect:

div.impressed {
   text-shadow:
      0 -1px 0 rgba(0, 0, 0, 0.8), /* shadow */
      0 1px 0 rgba(255, 255, 255, 0.5); /* highlight */ }

Here, I have slightly adjusted the opacity values in the text-shadow property (relative to the original values in the Drop Shadow Live Filter in Fireworks) to better suit the way fonts are rendered in the browser.


Screenshot of the HTML and CSS output in Mozilla Firefox. See an HTML sample.


Screenshot of the HTML and CSS output in Apple Safari. See an HTML sample.

Option 2: Use the CSS Properties Panel in Fireworks CS6

Writing CSS code by hand is what we Web professionals usually do. But in some cases, tools can help us, too.

Fireworks CS6 (which was recently released) has a new feature that could help you when you want to quickly (yet reliably) translate the properties of a visual element in the design to CSS3 code. The CSS Properties panel can extract CSS3 code for virtually any object selected on the canvas, including text objects and live filters.

Let’s see how this could help us in practice when working with the letterpress effect!

If you have a copy of Fireworks CS6 (a trial version would do, too), open the letterpress-effect.fw.png file provided with this tutorial (see the Downloads section further below), and then with the Selection tool, select the first text object.


Open the letterpress-effect.fw.png file, and select the first text object.

Next, open the CSS Properties panel (in the menu, Window → CSS Properties, or Control/Command + F7), and while the first text object is selected, notice how the CSS panel instantly shows the object’s properties.


The CSS Properties panel shows the properties of the selected text object as CSS code. Highlighted here is the code that translates the two Live Filters into CSS.

In this case, we’re interested only in the Live Filters applied to the text object, so let’s copy this bit of code from the CSS panel and see how it looks:

text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,255,255,0.9);

As you see, we’ve got results similar to what we achieved earlier with the manual method. Fireworks CS6 has automatically translated the Live Filters that were applied to the “embossed” text object into clean and valid CSS!

Similarly, you can extract and copy the CSS for the Live Filters applied to the “impressed” text effect.

And if you strive for perfection (as many of us do), along with the CSS Properties panel, you can use CSS Professionalzr, an excellent free extension by Matt Stow that can further optimize the code produced by the CSS Properties panel.

Of course, even if you’ve already switched to Fireworks CS6, you can always opt to translate the properties of Live Filters to CSS code manually. But when you’re dealing with a lot of objects, the CSS Properties panel comes in really handy and can save you precious time.

Tips on Using the Letterpress Effect

  • Use the effects sparingly.
    Text effects are the last thing you want to abuse, because they could impair readability, especially for people with vision problems. Restrict them to headings and interactive items (such as buttons and menu links).
  • Enable them to degrade gracefully.
    While most modern browsers already support CSS3 to some extent (see the note below), Internet Explorer 9 still doesn’t recognize the text-shadow property. In an effort to make things look consistent, you might want to look for a workaround, but I highly recommend that you gracefully degrade the effect in browsers that don’t support the property. Effects should be enhancements, not vital features.

Please note: Browsers that fully support the text-shadow property (with multiple shadows) include Firefox 3.5+, Chrome 4+, Safari 4+ and Opera 9.5. As of version 9, Internet Explorer still does not support the official text-shadow definition; instead, it has a proprietary filter that achieves a similar effect.

Examples

Here are a few real-world examples of the letterpress effect in action.

Veerle’s Blog
The letterpress effect — applied to the (image-rendered) logotype and headings — creates a bit of contrast against the background here, while still keeping everything subtle. Notice the use of both embossed and impressed effects in the column headings.

Stunning CSS3 (teaser page)
Coupled with @font-face declarations for custom HTML fonts, the letterpress effect on the different heading levels makes for a sophisticated look, previously feasible only with image-based text. (Note that the teaser page we’ve linked to here is an archived version.)

Janko at Warp Speed
The use of only one text-shadow effect, and only on the headings, exemplifies Janko’s restraint in order to maintain contrast and readability. Also notice the 45° offset in the highlight effect, which you can achieve in CSS by adding a 1-pixel x-offset to the text-shadow.

Downloads

The samples (i.e. the Fireworks PNG and Style Library) should work fine in any recent version of Fireworks (CS4, CS5, CS5.1, CS6).

(al) (mb)


© Jose Olarte for Smashing Magazine, 2012.

Tags: Fireworks

May 07 2012

16:24

Refining Your Design In Adobe Fireworks


  

While certainly not as well known as Photoshop, Adobe Fireworks is a great tool for creating user interfaces, website designs and mock-ups, wireframes, icons and much more. However, most designers who have been using Photoshop for years may find Fireworks a bit awkward at first. Fireworks does have a slightly different workflow and requires a slightly different approach than you may be used to.

In this article, I’ll share some tips that I use in my work in Adobe Fireworks that could help improve the quality of your designs and workflow. Some of these tips are just quick explanations of features that you might not be aware of, while some are techniques and methods to improve the default visual results. Let’s begin!

Improve Fine Strokes

Fireworks’ stroke feature gives the user quite a lot of options. But one of the most important is missing: the ability to add a gradient to a stroke. Also, the effect from the Stroke tool isn’t always elegant — for example, when using an inset border with rounded corners.

Default stroke render in Adobe Fireworks
Native stroke rendering in Fireworks. The rounded corners look a bit too thick.

Fireworks lets you specify the stroke’s position: outside, centered or inside. But the best results are when the stroke is outside.

Three possible stroke alignment options in Fireworks
Stroke can be set to different alignments in the Properties panel. Outside (example 3) looks better for fine strokes than centered or inside.

But in such cases, I recommend a composite path instead of a stroke to get better control of the result and to be able to apply a gradient to it.

Start by drawing two rectangles with rounded corners, one of them 2 pixels taller and wider than the other. Put the smaller rectangle above the larger (you can verify that it’s above in the Layers panel), and make its border radius smaller by several pixels, as shown here:

Two vector shapes for making a custom stroke
We’ll need two vector shapes to create our custom stroke.

The purpose of the smaller shape (the one with the yellow-orange background) is to cut out (or “punch”) the interior of the red shape, resulting in a 1-pixel-wide object that can be used in place of a stroke. To achieve this, select the two rectangles and hit the “Punch Paths” tool icon in the Path panel:

Punch paths command in the Path panel in Fireworks
Punch Paths will help us get a better-looking stroke.

Alternatively, you could select the two rectangles and go to Modify → Combine Paths → Punch.

Composite path (custom stroke)
The stroke is now a composite path that you can easily edit and even apply a gradient fill to.

Bonus tip: Should you later decide that you need to resize this shape (without distorting its perfectly rounded corners), the “9-slice scaling tool” can come to your rescue:

9-slice scaling tool in Fireworks
Distortion-free scaling is easily achieved with the 9-slice scaling tool.

Draw Better Triangles

Triangles are everywhere in user interfaces: arrows in buttons, breadcrumbs, pop-over indicators and so on.

While Fireworks provides built-in arrow and polygon vector drawing features, I recommend going the customized route and drawing those vector shapes yourself.

Arrow autoshape
The Arrow vector autoshape in Fireworks. The yellow control points allow for easy customization of width and height, thickness, type of head, roundness, arrow size and more.

Smart Polygon autoshape
The Smart Polygon vector autoshape in Fireworks. You can easily transform it into a triangle!

To illustrate our new workflow, let’s draw a simple arrow like the one in Kickoff’s download button:

kickoffapp download button
Kickoff’s download button

Let’s start by drawing a nice triangle. Most of the time, you’ll want an odd number of pixels for the triangle’s base so that its middle falls on a half-pixel, resulting in a sharp arrow:

Full pixel, half pixel
On the left, the triangle with an odd width. On the right, the triangle with an even width.

To create a triangle like the one on the left, we start by drawing a simple 7 × 7-pixel vector square using the Rectangle tool (found in the Tools panel, or simply press U). To delete its bottom-right point, use the Subselection tool (press A, or use the white arrow in the Tools panel), select the bottom-right node, then hit the Delete key; Fireworks will remind you that you are trying to change one point of a rectangle primitive and that it must be ungrouped for the change to occur; so, click “OK” to turn it into a vector, and delete the point. After deleting the corner, you’ll end up with this:

Square with bottom right vector point deleted
Our square with the bottom-right point deleted.

We now need to place the bottom-left point exactly at the center, which is located at 7 pixels ÷ 2 = 3.5 pixels from its current position. When you use your keyboard’s arrows, Fireworks moves the elements by full pixels only and aligns them perfectly to the pixel grid. This is convenient in most cases but not in this one. Luckily, Fireworks gives us a “Move Points” feature (in the Path panel) that lets us specify numeric values:

Moving an object by an exact numeric value
Moving horizontally by 3.5 pixels will center our bottom point.

If the triangle is now a bit too tall for our arrow, use the Subselection tool to select the center point again, and press the up arrow key twice to move the node up a couple of pixels.

We’re almost done! We just need to draw the 3 × 5-pixel rectangle part of our arrow and then use the “Union Paths” command (Modify → Combine Paths → Union, or press Control/Command + Alt/Option + U) to combine our two paths into one final single vector shape:

The perfect vector arrow!
The separated shapes are on the left, and the unified shape is on the right.

Draw Better Ellipses

For some reason, Fireworks has difficulty drawing elegant circles (especially small ones), and the circles tend to have too straight an edge:

A circle? Almost.
A default circle in Fireworks. Note that the top, right, bottom and left edges aren’t rounded enough.

We’ll use the “Numeric Transform” window (Control/Command + Shift + T, or in the menu Modify → Transform → Numeric Transform) to make the circle just a tiny bit smaller:

Using Numeric Transform
Decreasing the circle’s size by a bit will make it appear more rounded.

Compare the two circles
The original on the left, and our result after the transform on the right.

You will notice that the right circle is more elegant; that’s because we have fewer “full” pixels at the edges:

The perfect circle
The original on the left, and our perfect circle (after the transform) on the right!

Fillet Points

One great feature of Fireworks that few people seem to know of is the Fillet Points path tool. Basically, it rounds any angle you select by a value that you specify. To use it, select any vector shape, and in the Path panel in the “Edit Points” section, choose “Fillet Points”:

Fillet Points in the Path panel
Fillet Points rounds all of your angles.

Let’s use the built-in vector Star autoshape as an example. Note that you need to ungroup autoshapes and rectangle primitives before using Fillet Points; then you can either select the entire vector shape to round all corners or use the Subselection tool to select certain points to round.

Results of using Fillet Points
The original shape on the left, and with Fillet Points applied on the right.

This can be a huge time-saver when you want to modify complex shapes with many filters and effects. Now you won’t have to redraw shapes over and over again just because the radius is a few pixels off.

Inset Paths

Another useful vector tool many designers are unaware of is the Inset/Expand Paths feature.

Inset/Expand Paths
Inset/Expand Paths is also accessible via Modify → Alter Path → Inset Path.

As you’ve probably guessed by its name, this tool enables you to alter a vector path and make it either smaller (inset) or larger (expand) without losing its proportions.

Let’s say we want to make our Star autoshape from above 10 pixels smaller:

Inset/Expand dialog
The Inset/Expand Paths prompt.

This dialog can be confusing if you do not know what all of the options and abbreviations mean. The third parameter (“Corners”) is the least obvious, because the meaning of “BE, RO, MI” is not defined. The letters are actually abbreviations of “Bevel,” “Round” and “Miter.” You can’t use those abbreviations in the text field, so you need to know the terms they represent. “Bevel” creates squared corners, “Round” creates rounded corners, and “Miter” creates pointed corners; the “Miter limit” specifies the maximum length of the pointed corners before Fireworks replaces them with clipped (or square) tips. We’ll use “Miter” in our example because we obviously want to keep our straight lines.

Star autoshape after applying inset/expand paths command
And voilà!

Gradient Dither

Adding a gradient between two similar colors (i.e. colors close in hue) in a big shape often produces an unsightly banding effect, as shown here:

Banding in gradients
Banding is visible in this gradient (especially on LCD screens of the common “twisted nematic” type, which display only 6 bits per pixel, not 8).

To prevent this, Fireworks introduced in CS5 a Gradient Dither option that can be used if the edges of the object are set to “Anti-alias” and if you use the “Radial” or “Linear” type of gradient fill.

Gradient Dither option
“Gradient Dither” (found in the Properties panel) makes gradients look better.

The result is a smooth, unified linear gradient, similar to what you would get with CSS browser rendering:

Gradient with Gradient Dither applied in Fireworks
With the “Dither” option applied, the gradient becomes much smoother.

Similarly good results can be achieved by dithering radial gradients.

Avoid Large Shadows

Fireworks isn’t very good at rendering large shadows (if you use the “Drop Shadow” live filter). If you’re curious about the subtleties involved, a detailed article on WebDesignShock compares shadow and glow effects in Fireworks, Photoshop and Illustrator.

Instead of a beautiful shadow that slowly fades to a transparent value, the edge of the shadow might look like it has been cut off before fading to full transparency. The issue is particularly noticeable on the Mac version of Fireworks:

A large drop shadow effect in Fireworks
A shadow effect created with the Drop Shadow live filter. Notice the edges (in Fireworks CS5 on a Mac)—yikes!

Here are the settings to use to get this drop-shadow effect on Windows and Mac:

A large shadow live effect in Fireworks (on Mac)
The settings for the drop-shadow live effect on a Mac. Again, notice the “cut” edges of the shadow.

A large shadow live effect in Fireworks (on Win)
The settings for the drop-shadow live effect on Windows. The settings are the same, but the edges of the shadow are almost perfect.

So, instead of using a live filter, I usually duplicate the shape (the white rectangle in this example), set its edge to “Feather” and fill it with black.

A shadow using feather edge
Possible settings for the “shadow” vector shape behind the object.

Putting this shape behind the white rectangle produces a better-looking large shadow than the built-in method:

A better drop-shadow!
The original shadow on the left, and the “Feather method” on the right.

Practical Examples

A picture is worth a thousand words.

Fred Barnard

Talking about gradients, fills, strokes, vector autoshapes, rounded rectangles, pixels and half-pixels is exciting, but a few real examples would be even better. Below are some illustrations, icons and UI designs that I made exclusively with Fireworks. The tips and tricks covered above made the results more elegant and refined.

A Dribbble shot by Benjamin De Cock
Folder icon

A Dribbble shot by Benjamin De Cock
UI for a date picker

A Dribbble shot by Benjamin De Cock
“Free” icon

A Dribbble shot by Benjamin De Cock
Icons for an FAQ

A Dribbble shot by Benjamin De Cock
Envelope icon

A Dribbble shot by Benjamin De Cock
Monochrome icon set

A Dribbble shot by Benjamin De Cock
Kickoff teaser icon

A Dribbble shot by Benjamin De Cock
Email account icons

A Dribbble shot by Benjamin De Cock
Toolbar with navigation icons

As you can see, it’s all about pixel-precision, and Fireworks delivers great results!

Conclusion

Adobe Fireworks is a powerful tool, offering both vector- and bitmap-editing capabilities and even hiding some gems. Yes, it imposes different workflows, and some of its default effects are disappointing, but the advantages outweigh the little quirks here and there.

Having to change one’s work habits is always frustrating. Perhaps actions that you once did in a few minutes with your old design tool will now feel incredibly slow. Getting used to a different workflow takes time, and you might not see the benefit of using Fireworks immediately. The best thing you can do is commit to designing an actual project from start to finish using only Fireworks. Choose a small project or a personal side project for this purpose. Get your hands dirty for a few hours (or a few days). It’s the only way to be able to judge whether Fireworks really suits your needs. If you’re into UI design, I’ll bet it does!

If you’re interested in learning more about Fireworks, I highly recommend watching the great screencasts produced by Rogie King. They offer many more tips and tricks for refining designs and achieving more polished results than this article.

Also, the work of others can be a good source of inspiration and knowledge, so have a look at the Fw PNG Week series by Craig Erskine, and download and deconstruct his free source PNG files.

Happy experimenting with Fireworks!

Further Reading

(mb, al)

Note: A big thank you to our fabulous Fireworks editor, Michel Bozgounov, for preparing this article.


© Benjamin De Cock for Smashing Magazine, 2012.

Tags: Fireworks

April 23 2012

03:49

How to Create a Color-Inspired iOS Icon for Retina Displays

Advertise here via BSA

Creating an icon for iOS presents a variety of challenges to designers — challenges such as the size constraint. The purpose of this tutorial is help you create an icon for iOS that not only looks good, but also gives you a feel for what actually goes into creating icons for iOS. For this tutorial, we’ll be using Photoshop and Fireworks as well Cocoia’s iPhone 4 Icon PSD which you can download here.

Part One: Starting in Fireworks

In this part, we’ll be actually creating the content of the icon. The icon will look like a blend of colors so Photoshop may be considered overkill for this, while Fireworks does the job easily and efficiently.

1. Fire up Fireworks and create a new document that is 512 x 512px with a white background (don’t worry, this will be changed later).

Screen Shot 2012-04-22 at 09.18.38

2. Select the Ellipse tool from the left-hand sidebar or by pressing U and draw a reasonably-sized circle on your canvas whilst holding down the Shift key to constrain the circle. Select your circles and change the width and height to 210px – you can do this by changing the dimensions in left of the Properties window.

3. Now, on the right-hand side, right click the layer called Ellipse and click duplicate layer, do this three times so you have four circles on your canvas and spread them out.

Screen Shot 2012-04-22 at 09.22.26

4. Select a circle and in the Properties section (at the bottom) change the color to something strong – in this example I will be choosing Red (#FF0000) to be the shape’s fill color.

5. Repeat this step for each of the circles, each having a strong color – I am using Red: #FF0000 Blue: #0000FF, Green: #339900 and Orange: #CC6600.

Screen Shot 2012-04-22 at 09.26.04

6. Now, select all the circles on your canvas and select the opacity slider in the Properties window at the bottom and change the opacity to something substantial such as 60%.

7. Now, align all the circles that are on your canvas in the center and then select the top-most layer and in the bottom left corner (the left side of the Properties bar) change the Y position to 221 and, providing you’ve done everything correctly, it should read as: H: 210, W: 210, X: 151 and Y: 221. Now, select your second layer and change the Y position to 81. Select the third layer and change the X value to 221 and then the final layer’s X value should be 81 and it should be aligned in the center of the canvas.

8. Now, select all of the shapes and select the free transform tool from the sidebar (Command + T) and increase the size of the circles whilst constraining them by holding down Option (alt) and Shift and then press enter to accept.

Screen Shot 2012-04-22 at 09.42.29

9. Save your document as a PNG in your desired location.

Part Two: Making the Icon in Photoshop

Now, we’ll be moving from Fireworks to Photoshop and actually creating the icon along with a slight tint.

1. If you haven’t done so already, download Cocoia’s iPhone 4 Icon PSD template and then open it in Photoshop — for this tutorial, we’ll be creating an icon that is for the iPhone and for the retina display, so with the template open, right click the folder within the layers area entitled “114 Pixels (iPhone 4 home screen)” and select Duplicate Group and under document, select New and give it a name and press OK.

2. You should now be left with the icon on your canvas, select the Crop tool and crop around the icon template – the document size should end up being 114×114px once cropped. This is the standard size for a retina display icon.

Screen Shot 2012-04-22 at 10.03.45

3. Within the group (in the Layers section) we’re going to delete some layers, so delete the layer called Sample Shape copy 2, this should remove the star and also delete the layer called Stripes and you should be left with a clean, clear icon.

4. Select the color next to the layer entitled Base Shape copy 2 and change it to white and then navigate to your saved PNG file from part one and drag it to your canvas and then resize the icon (again, constraining it using Shift and Option) to a size that you believe looks good.

5. Right click the layer that you just created by dragging the new shape onto the canvas and select Create Clipping Mask.

6. Now, this is where you use your own discretion — you can alter the opacities of the tint and fill of the icon to make it look like you want. You can also change the background color from white to another color. In this example, I have used a dark shade of blue (#196088).

Photoshop

7. Once you’ve finished changing the opacity and tint of your icon, you’re ready to save it. The standard naming convention for retina display icons is Icon@2x.png so save your file with that name as a PNG file.

That concludes this tutorial – the purpose of this tutorial was to help you get to to grips with some basic color-blending techniques in Fireworks as well as to allow you to get to know the world of creating icons for iPhone and iPod Touch in Photoshop. In the source files I have included the Fireworks and Photoshop document along with the source code for an Xcode document if you want to test the new icon out on your retina device.

IconOnDevice

Icon@2x

Click here to download the source files.

January 20 2012

16:59

Extracting Logos Using Levels In Adobe Fireworks


  

In all the years that I’ve been using Adobe Fireworks, I have always had to perform one task in every project: remove the background from a logo. Most of the time, it’s because the client doesn’t have the original raw file that their previous designer used to create their company’s logo, or because I need to work with a bunch of affiliate logos that I downloaded from the Web and not all of them have transparency information.

With a rectangular or elliptical logo, I just trace over it with a shape and turn it into a mask. But when tracing a mask is impractical (as with complex shapes or text-based logos), I used to follow a method that I devised for extracting logos in Adobe Fireworks that doesn’t rely on the dreaded Magic Wand tool. This method took advantage of a few Live Effects to remove the background and retain the logo form. It was simple, but also primitive: it worked perfectly only when the contrast between the logo and background was already ideal and the logo form had only one color. Otherwise, I ended up with jagged edges.

I have since much improved the process of handling multi-colored logos and non-white backgrounds; it works best on solid-colored text and shapes with clear outlines. Because it involves Fireworks’ awesome features and tools, this method is a quick and easy solution that you can incorporate in your Web and interface design workflows.

And yes, still no Magic Wand tool.

Let’s Begin!

To start off, fire up Adobe Fireworks and load your logo image on the canvas. In the example below, I created a three-color logo text, surrounded by a blu-ish hue, on a canvas with a transparent background.

Create a back-up of the image by selecting it using the Pointer tool (V on the keyboard), cloning it (Shift + D, or in the menu Edit → Clone) and hiding it (L, or View → Hide Selection). You will need this back-up near the end of the process, but for now, keep it hidden.

Logo image on canvas
Place the logo image on the Fireworks canvas.

Tip: You can also use Duplicate (Ctrl/Cmd + Alt/Opt + D, or Edit → Duplicate) instead of Clone to copy the image. The difference is that Duplicate offsets the position of the copied object by 10 pixels down and 10 pixels to the right, whereas Clone creates the copy in the same exact position as the original object.

Original image and hidden backup in the Layers panel
The original image and hidden back-up in the Layers panel.

Step 1: Breakdown

To be able to deal with the different colors of the logo separately, we first need to break the logo down into “pieces,” one foreground color per piece. Use the Pointer tool to select the logo image, and use one or more bitmap selection tools (Marquee or Oval Marquee (M), Lasso or Polygon Lasso (L) — set the Edge to “Hard” in the Properties panel) to select a piece of the logo. Make sure the piece you select has only one color (not counting the image’s background). Cut and paste the selected piece (Ctrl/Cmd + X, and then Ctrl/Cmd + V) to separate it from the rest. Do this for each piece; cancel the Marquee selection (Ctrl/Cmd + D or Esc, or in the menu Select → Deselect) and switch back to the Pointer tool (V) if you need to select the logo image again.

Tip: Double-click on an image object to quickly switch from Pointer tool to Marquee tool.


Select a piece of the logo.

In our example, I’ve used a (rectangular) Marquee, but you can use the Oval Marquee for circular or elliptical selections, and the Lasso or Polygon Lasso for irregular shapes.

Cut up the logo into pieces
Cut up the logo into pieces.

If your logo has only one color, skip this step and treat the whole image as your only piece.

Step 2: Desaturate

Select all of the pieces of the logo image using the Pointer tool, and apply a Hue/Saturation filter (in the Properties panel, go to Filters: [+] → Adjust Color → Hue/Saturation…). Drag the Saturation slider all the way to the left (-100) to reduce the logo to grayscale. Make sure that Lightness is set to 0 and that Colorize is unchecked before clicking “OK.”

Desaturate all pieces
Desaturate all pieces.

A Note on Filters

Adobe Fireworks features two almost identical sets of filters: one in the application menu and another in the Properties panel (the Live Filters).

Filters menu vs. Live Filters
Filters menu vs. Live Filters in the Properties panel

Filters applied using the application menu are “destructive,” in that they can’t be undone by any other means except Undo (Ctrl/Cmd + Z, or in the menu Edit → Undo). Furthermore, target vector objects (shapes and text) need to be converted into bitmap objects before they can work their magic, which makes editing the original object harder. To adjust the effect of the filter that you just applied, you will need to undo that step and reapply the filter.

To maintain the ability to easily edit an object and its filters’ properties, always use the Live Filters in the Properties panel. This way, you can make changes to the original object, and the filters will adjust automatically. You will also be able to change a filter’s settings at any time, or disable or remove the filter, without adversely affecting the other filters.

Step 3: Levels

What makes this newer method different is the use of the Levels filter (as opposed to the Brightness/Contrast filter of the older method) to push the dark grays into pure black and the light grays into white, while maintaining the smooth edges of the logo’s curves.

Select one piece of the logo image using the Pointer tool, and apply a Levels filter (in the Properties panel, go to Filters: [+] → Adjust Color → Levels…). In the Levels dialog, set the Channel drop-down to “RGB” (which is the default). Below the histogram under Input Levels, move the left and right arrow sliders to change the intensity of the dark and light areas of the image piece, respectively. Make sure that the Preview checkbox is checked, so that you can see your changes in real time. Move the left arrow slider just enough to the left to get the logo part to show up completely black, but not so far left that the edges of the logo become jagged. The same goes for the right arrow slider: move it right to get a pure white background. You can leave the center slider untouched. Click “OK” to apply the filter.

Levels filter applied to first piece
Apply the Levels filter to each piece.

You can check the accuracy of your filter values by bringing up the Info panel (Shift + Alt/Opt + F12, or in the menu Window → Info) and hovering over the black area to obtain its RGB color value. The RGB values should all be set to 00; otherwise, go back to the Levels dialog and readjust the slider.


Use the Info panel’s RGBA reading to check the color values.

Do the same for the white area, this time setting all three RGB values to FF in the color reading.

You can further fine-tune the levels by changing the number values in the left and right text boxes in the Input Levels dialog, which correspond to the left and right sliders in the visual graph. Increase the value of the left text box to darken the dark-gray areas until all three RGB values are set to 00 in the Info panel; decrease the values if the edges of the logo become too jagged. The inverse is true for the right text box. This allows you to get pure black and white colors, while keeping the edges of the logo as smooth as possible.

Repeat the whole process in step 3 for all other image pieces.

Pieces with different Levels settings
Pieces with different settings in the Levels filter. Notice the same rightmost value across all instances, corresponding to the same background color.

Bonus side effect: If your original logo image has compression artifacts, this step could greatly reduce them.

Step 4: Alpha Transparency

Once all of your image’s pieces have been “leveled” into black and white, use the Pointer tool to select an image piece and apply a “Convert to Alpha” filter (in the Properties panel, go to Filters: [+] → Other → Convert to Alpha). Doing this step separately per piece is important because each piece has a different setting in the Levels filter. If you were to apply a new filter to all pieces at once, Fireworks would equalize the settings for all of the other filters present.

Convert to Alpha filter
Apply a “Convert to Alpha” filter to each piece.

In this step, you will again be able to check for the accuracy of your settings for the Levels filter; if the black area of an image piece is not completely black, it will show up as slightly transparent once the Alpha filter is applied. (This is where the checkerboard background of the canvas comes in handy.) Also, if the background is not completely white, you’ll see it faintly after converting the image piece to alpha.


Applying the “Convert to Alpha” filter to all pieces.

Step 5: Recolor

At this point, you have successfully extracted the logo form from its background. The next step is to bring back the original colors. To do this, open the Layers panel (F2, or in the menu Window → Layers), and look for the object that you hid at the beginning of this tutorial. Click on the visibility box at the left end of that object to make it visible again. Nudge it down so that it’s below the processed logo pieces and in clear view. Use the Pointer tool to select an image piece and apply a Color Fill filter (in the Properties panel, go to Filters: [+] → Adjust Color → Color Fill). In the Color Fill settings, click on the color swatch, and sample the corresponding color from the original logo image. Do the same for all other image pieces.

Color Fill filter applied to first piece
Apply a Color Fill filter to the first piece, picking the color from the original logo image.


To sample a color for the Color Fill filter: 1. Click on the color swatch in the filter dialog, 2. Click on the part of the image whose color you want to sample, 3. The color swatch will update with the new color.

Step 6: Convert To Symbol

Once you have recolored all of the pieces, select the original logo image with the Pointer tool and hide it (Ctrl/Cmd + L, or in the menu View → Hide Selection). You can also click on the eye icon of that object in the Layers panel to hide it. Select all of the image pieces using the Pointer tool, and convert them into a symbol (F8, or Modify → Symbol → Convert to Symbol…) before using it in your layout, so that new filter changes affect the new logo as a whole.


The Convert to Symbol dialog.

If you wish to make changes to the objects inside the symbol, you can do one of the following:

  • With the instance of the symbol selected, go to Modify → Symbol → Edit Symbol;
  • Right-click on the instance of the symbol, and select Symbol → Edit Symbol;
  • Double-click on the instance of the symbol.


All logo pieces recolored and converted into a Symbol.

Taking It Further

You now have a version of the logo that you can set against any type of background: solid, gradient, textured or tiled. You can even use it as a bitmap mask over a photo, pattern or gradient if you want a different look. To do this, you’ll need to flatten the logo symbol first (Ctrl/Cmd + Alt/Opt + Shift + Z, or in the menu Modify → Flatten Selection), but you can always bring back your final logo by dragging an instance of the symbol from the Document Library panel (F11, or Window → Document Library) onto the canvas.

Extracting Logos Using Levels in Adobe Fireworks: the final result
The final result.

If you are feeling adventurous, you could try turning it into a vector object using the Magic Wand tool first (W) and then running the “Convert Marquee to Path” command (Select → Convert Marquee to Path). Your mileage may vary, though: “Convert Marquee to Path” doesn’t always play well with complex shapes, but you can always tweak the vector paths that are created by that command until they match the logo.

(al) (mb) (vf)

Downloads

Need a sample to study? Download the sample archive for this tutorial (ZIP file, 57.6 KB), containing the Fireworks PNG (created in Adobe Fw CS5).

Further Reading


Smashing Is Looking For Experts On Fireworks, Photoshop & Illustrator

As our crafts mature, so do our tools. Fireworks, Photoshop and Illustrator are powerful tools that we, as designers, use on a regular basis. Fireworks is surely more flexible for Web at times (and UI/screen design in general), since it is dedicated specifically to the Web designer’s needs. And yet, it is underrated by many. We should all indeed be more open to try out new and different tools and share the techniques and our experiences with the community.

We look forward to hearing from you!

We’d love to cover more articles on Fireworks, Photoshop and Illustrator explaining useful techniques, tips and “lessons learned” from professional designers. So, if you:

  • Have a solid knowledge of at least one of these tools,
  • Have a solid experience in design (especially Web/screen/mobile),
  • Have a couple of articles published on any of the tools mentioned,
  • Or perhaps have even released some extensions or tools for Fireworks, Photoshop or Illustrator…

Then please drop us an email at ideas@smashingmagazine.com. Please include details about your experience, examples of your work, links to your articles and your article ideas (at least two). Of course, all authors get paid :-)

We look forward to hearing from you!

— Smashing Editorial Team


© Jose Olarte for Smashing Magazine, 2012.

Tags: Fireworks

October 03 2010

10:00

Functionality of Adobe Fireworks in your Design Workflow

Many web designers work exclusively with the Adobe Creative Suite to get work done. Adobe Photoshop is the most common tool for graphics creation and manipulation along with Illustrator for freehand drawings. Fireworks doesn’t get as much of the attention, but this doesn’t mean the software is also useless.

In fact Fireworks can be used hand-in-hand with Photoshop to create seamless mockup designs, wireframes, interface icons and so much more. We’ll be taking a look into how you can incorporate Adobe Fireworks seamlessly into your design workflow.

What is all the Excitement with Fireworks?

Many of you may be asking why there is so much excitement for this tool. It’s still very under-utilized software within the design community but has been growing more popular since Adobe acquired Macromedia in 2006.

The software itself is both bitmap and vector based. Fireworks is a powerful graphics editing tool initially created for the purpose of designing high-quality icons and graphics for the web. These could include icon sets or UI graphics on buttons. Frequently though designers are switching over to Fireworks for its potential in creating powerful mockup designs.

The true power of Adobe Fireworks comes with its 2 development states – vector and bitmap. The main difference between the two formats is how your computer renders each image. Bitmaps are created using pixels each shaded a different color while vectors use lines and curves to match up complex shapes.

Each has their own pros and cons list which represent their main use. Bitmaps are the images you’ll see around the web – .jpg or .png are examples. Vectors are mostly used for logos or drawn artwork since there are no hard edges. The entire image is rendered using complex mathematical formulas which determine how vector lines should smooth or curve.

Rolling both of these formats into Fireworks is where we can start to see some major benefits to web designers. The tools and palettes are also very similar to Illustrator and Flash, so it’s not difficult to pick up and learn.

Fireworks Wireframing and Mockups

The true beauty for us web designers comes from Firework’s ability to create stunning website wireframes. A wireframe is a type of design mockup which contains all of the major elements needed to display a website’s core features without getting bogged down in the finer details.

A wireframe doesn’t require special software to design. You could just draw it with pencil and paper if you were inclined to do so. However the major benefits Adobe Fireworks brings to the table when discussing wireframe mockups are staggering. One advanced feature is the possibility of creating Master Pages to implement features easily throughout a mockup.

For example if you were creating a wireframe for 5 pages of a website you wouldn’t create 5 separate documents (well you could, it would just take longer). Designing a Master Page which contains all the elements common to every page in the site (navigation, header, footer, content area) and expanding it throughout your other pages is the simplest way. Fireworks features this functionality right out of the box and even allows for deeper customizations when it comes to the Master/Regular page relationship.

Interactive Web Design Prototyping

Creating a beautiful website prototype is no harder to do in Fireworks than a simple wireframe. With a prototype you’d be designing all of the major elements such as navigation links, buttons, search boxes, and everything else the user interacts with. By giving design and shape to these objects in a graphical setting it makes transferring code into HTML that much simpler.

The great thing about Fireworks is how you can apply behaviors to elements found in your documents. This means you can set a button to change state or replace text when clicked on. You can also import graphics from other software suites into a prototype mockup – meaning any logos or vectors created in Photoshop or Illustrator can still carry over.

Fireworks does have an export feature which allows you to directly convert an image mockup into HTML/CSS code. It’s not the greatest code when it comes to efficiency and generally isn’t worth using in my opinion. Run Fireworks for what it does best – digital graphics placement and manipulation.

Designing Mobile Applications

iPhone and Android-powered devices have seen enormous growth over the past few months. It’s an area of the web not yet explored and it’s continuously evolving each day. Fireworks is the perfect software for creating an iPhone app prototype and plays well with many other operating systems.

The main benefit is how quickly other designers caught on to using Fireworks for mobile prototypes. This means there are many readily-available packages and toolkits for download to help ease the process of mobile app development.

A quick query into Google for “iphone GUI fireworks” brings up plenty of interesting results. Scanning through some blogs on the topic you should stumble into plenty of resources for mobile app mockups.

And these are only a few things Fireworks can help with! Having such powerful functionality at your fingertips means finishing design work that much quicker. With Adobe frequently releasing new updates to Fireworks and the entire Creative Suite we can see changes being made almost instantaneously.

The software is really exciting and it’s a new area for designers to break into. This has been an introduction into the world of Adobe Fireworks but it’s by no means a complete guide. There is so much information about web design and prototyping in Fireworks it’s a simple skill to pick up. Although it may not stand out right away, utilizing Fireworks as your mockup creation tool can save loads of time and frustration during complex projects.

September 17 2010

10:57

The Power of Adobe Fireworks: What Can You Achieve With It?

Smashing-magazine-advertisement in The Power of Adobe Fireworks: What Can You Achieve With It?Spacer in The Power of Adobe Fireworks: What Can You Achieve With It?
 in The Power of Adobe Fireworks: What Can You Achieve With It?  in The Power of Adobe Fireworks: What Can You Achieve With It?  in The Power of Adobe Fireworks: What Can You Achieve With It?

Our recent article covering the new features of Adobe Fireworks CS5 provoked a very interesting and intense debate. But because comments ranged from “Fireworks is the best tool for screen design!” to “What exactly is Fireworks?”, we thought that another article on this topic might be very useful to Smashing Magazine readers.

However, this time the article will not focus so much on the tool itself, but rather on what can be achieved with it, and more specifically — what can be achieved with its visual/graphic design capabilities. We also hope that the following showcase of inspiring illustrations, created entirely in Fireworks, will not only be interesting to our readers, but will also help put an end to the common misconception that Fireworks is mostly a prototyping tool – and – that for “serious” design you must switch to other tools, namely Photoshop or Illustrator.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

…What Exactly Is Fireworks?

Finding the answer to this question is not so easy. Is it a prototyping or wireframing tool? Or is it a powerful graphics editor? Is it a Photoshop competitor, but for Web design only? Is it none of these, or all of the above?

Fireworks-cs5-splash-screen Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Perhaps presenting you with a quick overview of some of the key features of Fireworks will help you decide the answer to that question yourself.

What is it?

Fireworks is a bitmap and vector graphics editor formerly developed by Macromedia and since 2006 developed by Adobe. The main purpose of Adobe Fireworks is for creating expressive, highly optimized graphics for Web, screen and various devices (it should be noted that because of its main purpose, Fireworks has certain limitations: it supports only RGB/RGBa colors and the maximum canvas size of its files is approximately 10,000×10,000 pixels).

What is it good for?

With Fireworks you can make websites, user interfaces and rich Internet application (RIA) interfaces which are editable in both vector and bitmap modes. Fireworks has Pages/Master Pages, Layers, States and Symbols – all features that considerably speed up development of Web designs. You can also use it to create wireframes and interactive prototypes — you can apply behaviors to objects to simulate interactivity; you can add text, symbols, images and also import Illustrator and Photoshop assets; and once ready with the design you can export the files as clickable PDF mock-ups for approval.

Fireworks can turn a graphic design project instantly into an interactive Web prototype — simply export a Fireworks single-page or multi-page PNG file as HTML, CSS and images. You can then send such an interactive prototype to a client for approval; or you can further edit the exported code (which is almost standards compliant and uses an external style sheet) in Dreamweaver, Coda or any other code editor of your choice.

Export features

Fireworks can export to JPG, GIF/GIF-animated, PNG8/24/32, TIFF and a variety of other graphic formats. The Fireworks compression algorithms are on par with, or even better than, Photoshop’s. Not only this but Fireworks can also export graphics directly to PNG8 alpha+index transparency format with true cross-browser compatibility (this means the exported PNG files will display correctly even in Internet Explorer 6 and 7). This is one of the areas where Fireworks excels and Photoshop still lags behind. Fireworks also shows excellent compression options for the iPad and iPhone PNG formats.

You can also export Fireworks PNG files as Adobe AIR applications or FXG 2.0 files for development in Flash Catalyst and Flash Builder (FXG 2.0 also allows a much better integration with Illustrator and Photoshop). You can create skin components such as buttons, menu types and form elements for use in Flash Builder (previously known as Adobe Flex Builder).

Formats support

Because the native file format of Fireworks is editable PNG (it simply stores additional metadata for layers, animation, vector data, text, effects) and Fireworks is primarily a vector application, development for the iPhone is easy and effective in Fireworks. There exist a variety of toolkits and rich symbol libraries for Fireworks iPhone development and they can speed up your work measurably.

Fireworks can open/import native Photoshop (.psd) and Illustrator (.ai) files with high fidelity of layers, effects and blend modes; you can also import native Adobe Flash vector objects (you may first need to convert them to .ai, though). And from Fireworks you can readily transfer graphic assets back to Illustrator and Photoshop. You can also take your design into Adobe Flash Professional and preserve layer states and symbols for animation interactivity development.

Highly extensible

Fireworks is also highly extensible — this makes possible the developing of amazing extensions (such as TweetFire, which lets you instantly tweet the image/design you’re currently working on without leaving Fireworks), complex panels, commands and auto shapes.

The Showcase Of Fireworks Illustrations

So now that we know what Fireworks is capable of, let’s see what designers across the globe are actually doing with it!

The following selection of vector illustrations, logo and icon designs – created in Fireworks – is limited to 19 designers. To make the most of this article, we have made available some Fireworks editable PNG files (.fw.png) which you are welcome to download and deconstruct.

1. David Hogue

Dave Hogue is the Director of Information Design & Usability at Fluid, a design and development agency located in San Francisco. His areas of interest include user experience design, usability, interaction design and information design. Dave speaks regularly at the Web Experience Forum and Adobe MAX. He is very active in the Adobe Fireworks community and he regularly posts useful Fireworks tips and tricks on his Twitter account.

{01} Golden Compass illustration

Compass Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors, and inspired by this tutorial made for Adobe Illustrator (download editable PNG).

{02} Quartz Watches illustration

Quartz-watches Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors, and inspired by a photo of a real quartz watch (download editable PNG).

2. Matthew Inman

Matthew is a designer and illustrator who runs the highly successful comics, The Oatmeal. He lives in Seattle, Washington, and uses Adobe Fireworks to draw all the comic strips.

Fireworks is intended for web design, but it’s also a very capable vector editing tool and it works beautifully if your work is going to end up on a website. …I don’t use Photoshop and I’m actually pretty terrible with it. I also have Illustrator and I was using it for a few months, but I ended up going back to Fireworks simply because I’m more comfortable with it and it’s better for creating web content.

Following here is a very short selection of only 5 comic strips — all made with Fireworks (but of course you’re welcome to explore the full Oatmeal collection):

{03} 15 Things Worth Knowing About Coffee

Theoatmeal-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{04} 20 Things Worth Knowing About Beer

Theoatmeal-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{05} How a Web Design Goes Straight to Hell

Theoatmeal-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{06} Why working at home is both awesome and horrible

Theoatmeal-4 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{07} Duck in Coffee illustration

Coffee-duck Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Matthew does not use Fireworks only for drawing his comic strips — for example, see this beautiful “There’s a duck in my coffee” vector illustration, created entirely in Fireworks (see screenshot from the process). Check Matthew’s portfolio if you’d like to see more of his works.

3. Ryan Hicks

Did you ever wonder what happens behind the closed doors of Adobe? How their design teams are working? What applications are creating the icons and splash screens of the various Adobe apps? Ryan could tell us a lot about this subject, since he’s currently working at Adobe as Design Manager, and prior to that he was Senior Experience Designer at Adobe and Experience Designer at Macromedia. His list of clients also include Polygram Music, Wired Magazine and many others (see Ryan’s portfolio).

Let’s take a look at some of his design and illustration work.

{08} XD Brownbag Poster series

Xd-fwcs3-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

After posting it to the Adobe Developer Connection | Fireworks website, Ryan shared the following about this illustration:

This illustration is just one example of a series from the XD Brownbag seminars at Adobe (XD is the Experience Design team at Adobe). The poster art is drawn up at screen resolution and later scaled, because this enables me to build up the shapes more quickly and get into the “drawing light,” which is where the real magic of Fireworks comes in. Its incredibly intuitive gradient opacity controls and the Ellipse gradient’s multi-handle directional controls allow a drawing approach that mimics the real behavior of light. Solid objects have a primary base color and separate slices of cast light, bright highlights, and shadows to build up volume and surface.

After the illustration is completed, it is scaled up to print resolution in Fireworks (eat a snack during this process, as big resolutions is one thing Fireworks isn’t entirely happy with). This large Fireworks PNG illustration is then taken through Adobe Photoshop to output a transparent PSD, and finally into Adobe Illustrator for layout, typography, and output for the final, print-resolution 24″ x 36″ poster.

Download the Fireworks PNG file.

{09} XD Lunchbox poster

Xd-lunchbox Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{10} XD Beet poster

Xd-beet Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{11} XD Mackerel poster

Xd-mackerel-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{12} XD Salad poster

Xd-salad-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{13} XD Brownbag poster

Xd-brownbag-poster Th in The Power of Adobe Fireworks: What Can You Achieve With It?

4. Rogie King

Rogie King is the guy behind Komodo Media. He is a web designer, illustrator and blogger. Lately Rogie started a series of tutorials on Fireworks that are becoming more and more popular every day.

{14} rogieking.com personal site illustrations

Rogie-king-redesign Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Composed entirely of vector artwork in Fireworks, this is a piece of art for the new and upcoming tumblog for rogieking.com.

{15} Logo for rainboxx.de

Rainboxx-logo-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Rainboxx-logo-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Rainboxx-logo-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created for Matthias Dietrich for his PHP development shop, Rainboxx, this logo was created entirely in Fireworks as vectors. Matthias wanted an evolution to his brand and a professional 3D icon evolution of his current Rainboxx identity. You can view more info about the process, the related dribbble shot, and you can learn more about the particularly interesting brushed metal effect in this video tutorial.

{16} Mad Mimi Illustrations

Mad-mimi-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mad-mimi-2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mad-mimi-3 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

These are just a couple of illustrations from a series created for the redesign of Mad Mimi. The illustrations are composed entirely of vectors with the additional use of Fireworks symbols for repeating shapes (such as the boxes).

{17} Adaptive UI icons

Adeptiv-ui-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

A custom icon set designed entirely in Fireworks for andCulture who wanted an icon set that was smooth, silky and that fit in with the aesthetic of their Flex web application (see a screenshot from the work in progress).

5. Xiao Cai

Xiao currently lives and works in Melbourne, Australia. He’s currently building his portfolio and preparing for the RMIT University. He does not have a personal website but you can check his profile in deviantart where he posts some of his works.

Xiao shared with me a bit more details concerning his very interesting technique, which he uses in Adobe Fireworks:

During my free time, I looked through a lot of online tutorials on the use of software like Fireworks, Photoshop and 3DS Max. It is quite amazing that you can learn pretty much anything yourself as long as you put theory and practice together. At the beginning, I created a few simple wallpapers using Fireworks, to get familiar with its tools and options. Then I read an article about creating Chinese painting-like pictures in Adobe Fireworks. I tried a few times and then came up with a style of my own, something like Digital Chinese Painting, and was quite happy with the results. Since then I went deeper and deeper with Gongbi (a meticulously detailed painting style) and Shuimo (a water color style) paintings and re-created them with Fireworks. I was trying different tools and effects to get the right one, then compared these pictures with real Chinese painting reference photos and modified them, until I was satisfied with the end result.

Sometimes, I am also using Fireworks to create icons and other design elements.

Next, you’ll see four of Xiao’s digital drwaings, each one has a short description added by the author.

{18} DCP2 Fireworks illustration

Dcp2-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“My first complete painting by using Fireworks. I did everything piece by piece, from background to stamen, with the pen tool, then adjusted the colors and effects. Not really a technical one, but did take me a lot of time. This painting is also featured in “2 Faces Apart”, Vol.1, published by King Ink (ISBN: 978-91-85807-05-5).”

{19} DCP3 Fireworks illustration

Dcp3-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“Created in Fireworks, in a bit different style. And with the experience from the previous one, it was finished easily.”

{20} DCP4 Fireworks illustration

Dcp4-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Dcp4-novelekehe-element1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Dcp4-novelekehe-element2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“Here I tried to focus on the flower, and at the same time combine two different styles together (Gongbi and Shuimo). However, I think I still need to work on the composition.”

{21} DCP8 Fireworks illustration

Dcp8-novelekehe Th in The Power of Adobe Fireworks: What Can You Achieve With It?

“One more illustration in the same style; it also has a night version.”

6. Jon Hicks

Jon Hicks (hicksdesign.co.uk, @hicksdesign) is a designer we need not introduce. Among other things, he is the maker of the Firefox, Thunderbird & Mailchimp logos and lately he was Senior Designer at Opera Software, before returning to freelance work this year.

{22} Mozilla Firefox logo

Firefox-logo-in-fireworks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Firefox-logo-screens Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The logo of Mozilla Firefox, one of the leading modern Web browsers, was originally created in Macromedia Fireworks in 2004. (Note: Later Jon Hicks re-created the logo also in Adobe Illustrator, so that it could be transferred to print more easily).

Currently, Jon Hicks admits that he both loves and hates Fireworks, one of the reasons for which was apparently Fireworks version CS4, which initially proved to be very unstable on MacOS X and Adobe were quite slow to release two stability patches for it.

When I e-mailed Jon a couple of days ago, he was kind enough to share the following with me:

Apart from the first version of the Mozilla Firefox logo, I do all my illustrations in Adobe Illustrator, rather than Adobe Fireworks. I would often use Fireworks for small icons and mocking up site designs, but anything larger and more complicated would be done in Illustrator. The next higher res [resolution] version of the Firefox logo was created in Illustrator — that’s not to say it’s impossible in Fireworks, but I find Illustrator easier for that kind of thing, and it’s then simple to create high res CMYK versions for print, as well as screen.

7. Fabio Sasso

Fabio is a graphic and web designer from Porto Alegre, Brazil. He’s the founder of Abduzeedo, a blog about design, and he and other designers have published there many tutorials on Fireworks. Fabio acknowledges that Fireworks is his favorite and most versatile tool for Web design with its amazing vector capabilities and good bitmap editing options as well.

{23} Apple Air banner

Apple-air Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks.

{24} Light Effects illustration

Abduzeedo-lights Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Done entirely in vectors; there’s also a related tutorial as to how it’s done in Fireworks.

{25} The Abduzeetles Rockband website design

The-abduzeetles Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Hilarious — this tutorial will teach you how to create a colorful and funny website design for the Abduzeetles Rockband — all with the power of Fireworks vectors! ;)

8. Lucian Dragomir

Lucian Dragomir from 2313 Studio is a 20-year-old freelance branding and web designer who is currently studying art and visual technology in Virginia. Graphic design is his passion and Fireworks is what feeds his hunger for design. He likes Fireworks for its user-friendly interface and advanced vector engine which, combined, create good results for fast prototyping, Web design and occasionally even print.

Lucian also loves to share his work at deviantart.

{26} Vectorizer illustration

Vectorizer-color-powered Th in The Power of Adobe Fireworks: What Can You Achieve With It?

This is an illustration that won first prize at the 2009 Fireworks Wallpaper Contest, organized by Adobe and FwZone. It was created in Fireworks CS4 and is 100% vector work. To see the full complexity of this illustration, you can download the Fireworks PNG file.

{27} Anger Management illustration

Anger-management-1 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Experimental 3D render of a fire extinguisher and a lighter using only vectors (Fireworks 8).

{28} iCry illustration

Icry Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Experimental characters and lighting/shadow/reflection simulation, 100% vector work in Adobe Fireworks.

{29} TakeOFF illustration

Takeoff Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks 8 with the help of the Alien Skin Splat plugin.

9. Fred Michel

Fred Michel is 30 years old and a freelance graphic and web designer, currently living in Montréal, Canada. He first made his way into the graphic design world through being inspired by Fireworks. An interesting fact is that he is color blind. So how does he manage to put the colors together? He says that this is a secret!

{30} Porsche Carrera illustration

Porsche-carrera Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Originally created in Fireworks in 2004 and is all vector work (download Fireworks PNG).

{31} Cadillac illustration

Cadillac Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks, all vector work (download Fireworks PNG).

{32} Mercedes SLA concept car illustration

Mercedes-sla Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Mercedes SLA concept car — originally created in 2005 in Fireworks, all vector work (editable PNG is available for download). A curious fact is that the concept of the Mercedes SLA car is as old as the year 2000, however, Mercedes did not yet create such a car — it only remains a concept till now.

{33} VW Tiguan illustration

Vw-tiguan Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, in 2010, and is all vector work (you may download the editable PNG). One of Fred’s most complex vector illustrations made in Fireworks.

10. Mikko Vartio

Mikko Vartio is a visual web designer from Helsinki, Finland. He uses Adobe Fireworks as a primary tool for creating websites, illustrations, for UI Design and wireframing. When he’s not working with Fireworks he’s reading old sci-fi books and cruising the streets with a longboard.

For Mikko, Fireworks is the perfect tool for delivering ideas destined for screen because of its extensibility, native .ai/.psd support and pixel-perfect accuracy. Mikko can be found on Twitter and Flickr (where he often posts Fireworks illustrations).

{34} Bears illustration

Bears Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{35} Sealife illustration

Sealife Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{36} Longboard illustration

Longboard Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{37} Surprise illustration

Surprise Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{38} Darth Android illustration

Darth-android Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Made in Fireworks CS5 in less than an hour, this funny Darth Vader + Google Android mashup can be also seen as a live design session recorded at 5x speed. Worth watching!

{39} Magic Mushroom illustration

Magic-mushroom Th in The Power of Adobe Fireworks: What Can You Achieve With It?

All 100% Fireworks vector work — the original Fireworks PNG file will be available for download as a freebie later at Mikko’s personal blog.

11. Angelo Sabal

Angelo Sabal works and lives in the Philippines. He’s been an avid freelance graphic designer since 2002, specializing in logos, layouts, digital art and multimedia presentations. Fireworks is his design tool of choice.

{40} Colt gun illustration

Colt-gun Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

{41} Candle illustration

Nice-candle Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vectors (download editable PNG).

{42} Dragon shield illustration

Dragonshield Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG)

{43} Iron Man 2 helmet illustration

Ironman2-helmet Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors (download editable PNG).

12. Craig Erskine

Craig Erskine was born, and is still working, in Green Bay, Wisconsin. He has a passion for designing and building standards compliant, stylish and accessible websites.

Craig is using Fireworks on a daily basis and has also published quite a lot of Fireworks tutorials. You may find him on dribbbble and Twitter.

{44} Mac Mini illustration

Mac-mini Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

{45} Apple remotes illustration

Apple-remotes Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS4, all vectors (download editable PNG).

13. Pete Lacey

Pete Lacey is an English graphic designer and artist based in Copenhagen, Denmark. He’s working in the field of graphic design, illustration, photography, video editing, motion-graphics, web development, art direction and even audio recording. When it comes to Web design, Fireworks is one of his programs of choice.

When not working with a computer, Pete can often be found behind a drum kit or a guitar instead. And on Twitter, too.

{46} Fireworks icons

Chopeh-fireworks-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks for a client, 100% vector work.

14. David Brooks

David is a UX designer at Fellowship Technologies and also a photographer. He currently lives and works in Dallas, Texas (USA). You can find him on dribbble and Twitter.

One of his tools of choice is Fireworks.

{47} Camera-Phone illustration

Camera-phone-a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks for pure fun; all vectors.

{48} Northward Compass website illustration

Northward-compass-site Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Everything (except the map, which is an imported bitmap), is done as vectors in Fireworks.

15. Tomas Gajar

Tomas Gajar is a senior user interface designer. He has been using Fireworks in his daily work for about 7+ years. All designs that you’ll see in his DigitalLabs Portfolio has been made in Fireworks. You can also find Tomas on Twitter and SofaSurfer.

{49} DigitalLabs website design

Digital-labs Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{50} Beck’s design concept

Digital-labs-becks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{51} SofaSurfer website design

Digital-labs-sofasurfer Th in The Power of Adobe Fireworks: What Can You Achieve With It?

16. Vincent Tremblay

Vincent Tremblay is currently studying computer programming at Bois-de-Boulogne College in Montreal, Canada. He spends most of his free time coding desktop applications, but he also loves working with his favorite web design software, Adobe Fireworks. Vincent can also be found at deviantart.

{52} Neos Carbon 2 logo prototype (neOS Sapphire logo)

Neos-carbon2 Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors.

{53} iCompanion logo prototype (iTunes Companion logo)

Icompanion Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS5, all vectors.

17. Mike Taylor

Mike Taylor is a very active member of the FireworksGuru forum and he also runs a personal blog dedicated to Fireworks.

{54} Twitter icons

Twitter1a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Twitter2a Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Twitter icons, all re-created in Fireworks vectors.

{55} The iPhone, in Fireworks PNG (.fw.png) format

Iphone-in-vectors Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The idea to fully vectorize the iPhone is not new — for example, you may check this excellent tutorial on how to create the iPhone frame in Adobe Fireworks.

However, Mike went one step further and offered the iPhone in Fireworks full vector format for free download (download iPhone in editable PNG format). It should be fully compatible with Fireworks versions CS4/CS5 (and even lower).

18. Nick Isenberg

Nick is a Web and graphic designer who lives and works in Boise, Idaho (USA). You may check his portfolio and deviantart profile, where he publishes some of his illustrations made with Fireworks.

{56} Spiral Notebooks illustration

Spiral-notebooks Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vector work (download the Fireworks PNG).

{57} Le Petit Porcelet illustration

Lepetitporc Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, all vector work (download the Fireworks PNG).

{58} Safari Dock icon

Safari-dockicon Th in The Power of Adobe Fireworks: What Can You Achieve With It?

Created in Fireworks CS3, almost 100% vector work (download the Fireworks PNG).

19. Adobe CS5 Branding

Next you’ll see more details about the whole Adobe CS5 branding, which — it shouldn’t be actually a surprise — was not made in Photoshop, but mainly in Fireworks.

{59} The Adobe CS5 branding

Adobe-cs5-branding Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{60} The Adobe CS5 branding — the icons

Adobe-cs5-branding-icons Th in The Power of Adobe Fireworks: What Can You Achieve With It?

{61} The Adobe CS5 branding — the splash screens

Adobe-cs5-splash-screens Th in The Power of Adobe Fireworks: What Can You Achieve With It?

The Adobe CS5 Branding work was conceived and executed by Ryan Hicks (lead), Shawn Cheris and Dave Nelson. There’s a very interesting article at Veerle Pieters’s blog dedicated to the “making of”. I highly recommend reading this as well as Ryan’s thoughts on the matter too:

Producing assets for nearly a hundred separate software products takes enormous discipline. Discipline in what a few people can commit to executing in terms of fancy design, and discipline in coordinating and scheduling a hundred separate engineering development cycles and their deadlines. And to keep things interesting, Dave bails just before our production schedule was set to kick off. Shawn and I are now an army of two.

Our survival was dependent on the carefully-hewn master files we created for all the hand-built primary assets such as app icons and splash screens. The files leveraged clever layer structures and the attributes management Adobe Fireworks does best.

We have become, in so many words, an outrageously efficient icon factory, pumped up on caffeine, razor sharp pixels, and a couple AIR apps.

CS5 is my third iteration of Adobe’s product identity system. The project was one of the most enjoyable and satisfying I’ve had in my nearly seven years of working at Macromedia/Adobe.

All splash screens and many of the icons of the CS5 apps were made in Fireworks — and most of them exist in various formats including .fw.png and .ai.

So, how good is Fireworks for Web design?

Fireworks is a solid application for creating Web graphics and as John Nack from Adobe Photoshop team says: “Photoshop’s vector shapes & layer effects (strokes, gradients, etc.) are mainstays of Web & mobile design work, but they haven’t gotten updated in a while. If the Photoshop team were to improve this area of the app, what improvements would you find the most important?”

John then lists all features that could probably be added to the next version of Photoshop (CS6?). Let’s take a look at his list — I have marked the features that are proposed to be included in the next version of Photoshop but already exist in Adobe Fireworks (version CS5 or even lower) in italics.

  1. Enable “real” vector shapes (stroke & fill directly editable, without reliance on layer effects or a dialog box).
  2. Support dashed— and dotted—line strokes.
  3. Enable smart shapes — preserve corner roundness when scaling rounded rectangles; support other parameterized shapes (e.g. stars with an adjustable number of points; lines with arrowheads).
  4. Make various layer effects enhancements — apply effects at the layer group level?; re-order effects; duplicate effects (e.g. apply multiple strokes per layer); enable panel-based editing of effects (instead of relying on a dialog box); add/edit effects on multiple selected layers at once; make graphical styles “live” (i.e. if edit the style definition, all styled objects update).
  5. Enable layer search (i.e. type to filter by layer name or attributes).
  6. Improve snap-to-pixel behavior.
  7. Improve text rendering (this is possible in Fireworks with the ClearType Styles extension).
  8. Export text & graphical styles as CSS* (this is already partially possible in Fireworks – it can export a Web graphic design as HTML/CSS code and also can quickly “translate” some objects’ properties into CSS via extensions such as “Copy CSS Dimensions to Clipboard”).
  9. Support guide sets (e.g. for grid layouts).
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs).

As can be seen, almost all future features for Photoshop proposed by John Nack are actually existing features in Fireworks and are used by many designers today. It’ll be certainly interesting to keep tabs on how Adobe develops both Photoshop and Fireworks in the future – and what designers will then achieve.

Conclusion

Adobe Fireworks is a powerful graphic design application that is used by many professional Web and graphic designers, UX designers, illustrators and visual artists. In the right hands, it can produce beautiful results with remarkable speed. You have seen some complex vector designs, various drawing techniques, logos and icons and simply cool illustrations.

Perhaps what is the nicest thing about Fireworks is that if you plan to create artwork in Fireworks, your project development is not limited to Fireworks only. You can easily import multi-layered .psd files, .ai files with multiple artboards and even visual assets from Flash. And then in the other direction, from Fireworks, you can transfer graphic assets to Photoshop, Illustrator, Flash Professional and Flash Catalyst. You can combine the Fireworks speed, vector power, Pages/Master Pages, Symbols and ease-of-use together with the options of both Photoshop and Illustrator and achieve all-round results, faster and with great flexibility.

In my personal opinion, there exists much more than 7 reasons to prefer Fireworks to Photoshop. While Fireworks may be not better than Photoshop, when it comes to designing for the Web and screen, it is faster, easier and can produce results as good as those that can be achieved in Photoshop, Illustrator, and other modern graphic design programs. Fireworks is very close to the real Web design application that Jason Santa Maria was discussing not long ago (although for this to happen, Fireworks would need much more intensive development from the part of Adobe).

{62} Adobe Photoshop CS5 splash screen

Photoshop-cs5-splash-screen Th in The Power of Adobe Fireworks: What Can You Achieve With It?

And there you have our final illustration. Next time you start Photoshop CS5, you may ponder that the “blue fish” splash screen you see was actually created in Fireworks — the lightweight, versatile design application that is responsible for most of the artwork across the Adobe CS5 suite.

If you think that I may have missed someone’s truly great (Fireworks) work, please let us know in the comments, thanks!

(afb)


© Michel Bozgounov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: adobe, fireworks, illustrations, Inspiration

June 26 2010

11:00

Become Master of Text Effects With 40 Adobe Fireworks Tutorials

Adobe Fireworks is a bitmap and vector graphics editor. It is aimed at web designers for rapidly creating website prototypes and application interfaces. It is designed to integrate easily with other former Macromedia products, such as Dreamweaver and Flash.
While Fireworks CS5 packs a lot of new features, it is still possible to achieve completion of these tutorials listed below.

From my own experience, it’s hard to get started learning this program because you will face some obstacles. But take your time and be patient and you will master Fireworks in no time.

1. 3D Water Text Effect in Photoshop CS5

3d-water-text-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to create realistic water text effect in Fireworks CS5.

2. Awesome Floral Type in Fireworks and Photoshop

floral-type-fireworks-photoshop-fireworks-tutorials-text-effects

Make your text look better with floral effect.

3. Creating an amazing Palm Pre icon on Fireworks

palm-icon-fireworks-tutorials-text-effects

Create realistic looking Palm Pre icon in Fireworks.

4. LED Cinema Display in Fireworks

led-cinema-display-fireworks-tutorials-text-effects

Create the new Apple Cinema Display 24 the easy way.

5. Fireworks Quick Tips – How to use QuickMask

quickmask-fireworks-tutorials-text-effects

Learn how to use one of the best functions in Fireworks – QuickMask.

6. Awesome Light Effects in Fireworks

awesome-light-effect-fireworks-tutorials-text-effects

Learn how to create this amazing effect you see in the image.

7. Abduzeedo Job Board banner in Fireworks

job-board-banner-fireworks-tutorials-text-effects

Create job board banner in Fireworks.

8. Colored Lights Header

colored-lights-header-fireworks-tutorials-text-effects

Learn how to create this stylish looking header.

9. Classy personal portfolio in Fireworks

classy-personal-portfolio-fireworks-tutorials-text-effects

10. Grooveshark design style in Fireworks

grooveshark-design-style-fireworks-tutorials-text-effects

11. Amazing Neon Lights on Fireworks

amazing-neon-lights-fireworks-tutorials-text-effects

Title says it all. I followed this tutorial and ended up with a nice looking neon glow text.

12. Creating a cool website header in fireworks

cool-website-header-fireworks-tutorials-text-effects

13. Creating the iPhone Frame on Fireworks

iphone-frame-fireworks-tutorials-text-effects

Create a realistic looking iPhone from scratch.

14. Creating the iPhone Interface on Fireworks

These two tutorials are not same. In the first one you will learn how to create iPhone frame and in this one – iPhone interface.

15. Light Painting in Fireworks

light-painting-fireworks-tutorials-text-effects

16. Apple Air Banner in Fireworks

apple-air-banner-fireworks-tutorials-text-effects

A must tutorial for every apple fan.

17. Creating the IE7 logo effect in Fireworks

internet-explorer-logo-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to make IE7 logo effect for any letter.

18. Twist and Fade Technique

twist-fade-fireworks-tutorials-text-effects

19. Highway Sign

highway-sign-fireworks-tutorials-text-effects

20. Create a Night Scene

night-scene-fireworks-tutorials-text-effects

21. Page Curl in Fireworks

page-curl-fireworks-tutorials-text-effects

22. Create a Digital Collage

digital-collage-fireworks-tutorials-text-effects

23. Scotch Tape Tutorial

scotch-tape-fireworks-tutorials-text-effects

24. Dot Matrix Effect

matrix-effect-fireworks-tutorials-text-effects

25. Gel Cap / Plastic Button

plastic-button-fireworks-tutorials-text-effects

26. Circular Shadows and Highlights

circual-shadows-highlights-fireworks-tutorials-text-effects

27. Reflective Glass Effect in Fireworks/Photoshop

reflective-glass-effect-fireworks-tutorials-text-effects

This is a simple tutorial showing you how to add reflective effect to any text by using Fireworks or Photoshop.

28. Creating Grunge Text Using Adobe Fireworks

grunge-fireworks-tutorials-text-effects

29. Barcode tutorial

barcode-fireworks-tutorials-text-effects

30. Transparent Text

transparent-text-fireworks-tutorials-text-effects

31. Danger sign

danger-sign-fireworks-tutorials-text-effects

32. Crystal buttons

buttons-fireworks-tutorials-text-effects

33. Glossy Web 2.0 button

glossy-web-button-fireworks-tutorials-text-effects

34. Glossy Badge

glossy-badge-fireworks-tutorials-text-effects

35. One Dollar Coin Tutorial

dollar-coin-fireworks-tutorials-text-effects

36. Human Iris

human-iris-fireworks-tutorials-text-effects

37. Simple Orbs Tutorial

simple-orb-fireworks-tutorials-text-effects

38. Text Wrapping

text-wrapping-fireworks-tutorials-text-effects

39. Canned Pineapple Slice

canned-pineapple-fireworks-tutorials-text-effects

40. Recycling Button

recycling-icon-fireworks-tutorials-text-effects

February 24 2010

21:50

How to Design a Website with Fireworks: New Plus Tutorial

In this week’s plus video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4. Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design. Help give back to Nettuts+, and join Plus!

Video Example

Final Design

Final Product

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.


February 01 2010

13:40

An Explosion of Adobe Fireworks Resources


An often overlooked member of the Adobe Creative Suite is Adobe Fireworks. This application software can be used to create vectors, design application interfaces, digital artwork, and create rapid prototypes of websites. Adobe Fireworks can also generate PDF’s, export CSS based layouts, and a variety of other features. However, Adobe Fireworks resources are not easy to find. Resources are scattered among many different websites, blogs, and forums. Since the resources are far and few, some designers forget about all the features and abandon using the software all together.

In this article, renew your love for Adobe Fireworks! Check out the 200+ (mostly) free Adobe Fireworks resources that are gathered and categorized for easy reference. Please remember: since many designers have made these resources free for others, take the time to check out the license agreements before using any resources for personal and/or commercial projects.

1. Common Libraries, Patterns, and Rich Symbols

Common Libraries

Libraries are a great way to enhance the assets of Adobe Fireworks. Collections of symbols and objects save time when creating design elements.

Arrows

50commonlibrary in An Explosion of Adobe Fireworks Resources

Browser Cursors

51commonlibrary in An Explosion of Adobe Fireworks Resources

Stencils

53commonlibrary in An Explosion of Adobe Fireworks Resources

Cursors

60commonlibrary in An Explosion of Adobe Fireworks Resources

Shields

161commonlibrary in An Explosion of Adobe Fireworks Resources

Patterns

A wonderful way to add a final touch or create interest in a design is by using a pattern. Check out some great pattern resources for Adobe Fireworks.

Kaliber Patterns

70patterns in An Explosion of Adobe Fireworks Resources

Free Fireworks Patterns

71patterns in An Explosion of Adobe Fireworks Resources

Flames 1

73patterns in An Explosion of Adobe Fireworks Resources

Free Patterns (158)

72patterns in An Explosion of Adobe Fireworks Resources

Checker Patterns

74patterns in An Explosion of Adobe Fireworks Resources

Carbon Pattern

75patterns in An Explosion of Adobe Fireworks Resources

Free Patterns

76patterns in An Explosion of Adobe Fireworks Resources

Wood Pattern Package

77patterns in An Explosion of Adobe Fireworks Resources

Micro Patterns

78patterns in An Explosion of Adobe Fireworks Resources

Rich Symbols

Rich graphic symbols can be scaled and given attributes with scripts, which saves a lot of time when creating interfaces, websites, or design elements.

A reusable page icon

80richsymbol in An Explosion of Adobe Fireworks Resources

Paper Grams

81richsymbol in An Explosion of Adobe Fireworks Resources

iPhone GUI as Rich Symbols for Fireworks

82richsymbol in An Explosion of Adobe Fireworks Resources

2. Styles

Styles are a great way to apply predefined attributes to an object or text (but not to bitmap objects).

Borders

79styles in An Explosion of Adobe Fireworks Resources

Metal Pack 1

86styles in An Explosion of Adobe Fireworks Resources

150 Fireworks Styles (Gradient Effects)

93styles in An Explosion of Adobe Fireworks Resources

Electronics

87styles in An Explosion of Adobe Fireworks Resources

15 Grunge Colors Styles

94styles in An Explosion of Adobe Fireworks Resources

Fireworks Styles Pack 2

100styles in An Explosion of Adobe Fireworks Resources

Fire and Flames

88styles in An Explosion of Adobe Fireworks Resources

131 Ultimate Web 2.0 Styles

95styles in An Explosion of Adobe Fireworks Resources

NN_Style_03

89styles in An Explosion of Adobe Fireworks Resources

Styles Pack 1-3

97styles in An Explosion of Adobe Fireworks Resources

Drawings

90styles in An Explosion of Adobe Fireworks Resources

15 FIREWORKS CS4 TEXT STYLES PACK 1

96styles in An Explosion of Adobe Fireworks Resources

Web 2.0 Styles 1

91styles in An Explosion of Adobe Fireworks Resources

Fireworks Styles Pack 1

99styles in An Explosion of Adobe Fireworks Resources

Overkill Set 1

92styles in An Explosion of Adobe Fireworks Resources

Stroke Styles for Fireworks MX, Series 1

98styles in An Explosion of Adobe Fireworks Resources

Fireworks Styles Pack 6

101styles in An Explosion of Adobe Fireworks Resources

48 Ultimate Web 2.0 Styles

102styles in An Explosion of Adobe Fireworks Resources

Chrome Gradient Styles

106styles in An Explosion of Adobe Fireworks Resources

The CMX Dash Pack

103styles in An Explosion of Adobe Fireworks Resources

MST Styles

104styles in An Explosion of Adobe Fireworks Resources

Style Pack 1

105styles in An Explosion of Adobe Fireworks Resources

Text Styles Pack

107styles in An Explosion of Adobe Fireworks Resources

Gradients, Blue Light, Charcoal, Chrome, etc. (No Preview Image)

3. Auto Shapes

According to help.Adobe.com, auto shapes are a great tool which “simplify the creation and editing process of common visual elements.” They’re also a great time saver.

Smart Resize

4autoshape in An Explosion of Adobe Fireworks Resources

Basic Pack 2

5autoshape in An Explosion of Adobe Fireworks Resources

Background Rectangle Auto Shape

41autoshape in An Explosion of Adobe Fireworks Resources

Pinwheel Auto Shape

6autoshape in An Explosion of Adobe Fireworks Resources

Crescent Auto Shape

42autoshape in An Explosion of Adobe Fireworks Resources

Ribbon

7autoshape in An Explosion of Adobe Fireworks Resources

Revolve Path Auto Shape

43autoshape in An Explosion of Adobe Fireworks Resources

Auto Shapes with Styles

52autoshape in An Explosion of Adobe Fireworks Resources

Sunburst, Effect Light Source, Geometry Guides, and Grid

8autoshape in An Explosion of Adobe Fireworks Resources

Annotation Auto Shape

39autoshape in An Explosion of Adobe Fireworks Resources

Sunburst

9autoshape in An Explosion of Adobe Fireworks Resources

Enhanced Rectangle Auto Shapes

48autoshape in An Explosion of Adobe Fireworks Resources

Simple Orb Smart Shape

10autoshape in An Explosion of Adobe Fireworks Resources

Puzzle Auto Shape

11autoshape in An Explosion of Adobe Fireworks Resources

Adjustments Panel

12autoshape in An Explosion of Adobe Fireworks Resources

4. Commands, Scripts, and Panels

Commands

Essentially, commands are shortcuts for automating repetitive tasks. Find out how the following commands can reduce the time of your next design process.

Copy Merge

13command in An Explosion of Adobe Fireworks Resources

Harmonia Color Schemer

14command in An Explosion of Adobe Fireworks Resources

Canvas Squeezer

15command in An Explosion of Adobe Fireworks Resources

Copy Paste WHXY

18command in An Explosion of Adobe Fireworks Resources

Watermark 1.0

16command in An Explosion of Adobe Fireworks Resources

Color Palette 1.25

17command in An Explosion of Adobe Fireworks Resources

Smart Punch

20command in An Explosion of Adobe Fireworks Resources

Box Templates 1.0

19command in An Explosion of Adobe Fireworks Resources

Demo Current Document 1.0

21command in An Explosion of Adobe Fireworks Resources

Calculator

22command in An Explosion of Adobe Fireworks Resources

Snap Objects 1.0

26command in An Explosion of Adobe Fireworks Resources

Mac Button

23command in An Explosion of Adobe Fireworks Resources

Smart Knife

24command in An Explosion of Adobe Fireworks Resources

Rounded Bitmap Corners

25command in An Explosion of Adobe Fireworks Resources

Copy Merged

27command in An Explosion of Adobe Fireworks Resources

Spiral

28command in An Explosion of Adobe Fireworks Resources

Objects, Pattern and Texture, and Text Commands

29command in An Explosion of Adobe Fireworks Resources

Chrono 1.0

45command in An Explosion of Adobe Fireworks Resources

Level Horizon

30command in An Explosion of Adobe Fireworks Resources

Batch Import 1.0

31command in An Explosion of Adobe Fireworks Resources

Interpolation Panel

32command in An Explosion of Adobe Fireworks Resources

Utility Set One

47command in An Explosion of Adobe Fireworks Resources

Brush, Document, and Effects Commands

33command in An Explosion of Adobe Fireworks Resources

Flash Slide Show 1.12

34command in An Explosion of Adobe Fireworks Resources

Campus Tools

35command in An Explosion of Adobe Fireworks Resources

Add Web Guides, Group, Mask, Modify, 3D Rotate, Rename, and Paths Commands

36command in An Explosion of Adobe Fireworks Resources

Duplicate, Offset, Rotate

37command in An Explosion of Adobe Fireworks Resources

Save Paths as Actionscript

38command in An Explosion of Adobe Fireworks Resources

Super Nudge 1.0.3

46command in An Explosion of Adobe Fireworks Resources

Batch Complete Alert

40command in An Explosion of Adobe Fireworks Resources

Extrude Paths

44command in An Explosion of Adobe Fireworks Resources

Shape Shifter Set 1

49command in An Explosion of Adobe Fireworks Resources

Scripts

Fireworks to XAML Exporter

83scripts in An Explosion of Adobe Fireworks Resources

iPhone Application Prototype

85script in An Explosion of Adobe Fireworks Resources

Panel

Gradient Panel

84panel in An Explosion of Adobe Fireworks Resources

5. Automation and Effects

Automation

A simple way to save time is through the use of Adobe Fireworks automating tasks. Check out a few examples of some true saving auto tasks.

FW CS4 Workspace Manager

Auto Vector Mask

54automation in An Explosion of Adobe Fireworks Resources

Effects

Effects (or Live Filters) are a great way to enhance vector objects, text, and bitmaps. Check out some fantastic ways to add effects to your designs.

Oldie Effect

55effect in An Explosion of Adobe Fireworks Resources

Metallic Gold Effect

56effect in An Explosion of Adobe Fireworks Resources

Old Paper Effect

57effect in An Explosion of Adobe Fireworks Resources

String of Pearls

58effect in An Explosion of Adobe Fireworks Resources

Twist and Fade

59effect in An Explosion of Adobe Fireworks Resources

6. Templates

Save valuable time with predesigned templates ranging from websites to iPhone prototypes.

Fireworks Toolkit for Creating iPhone Mockups

108templates in An Explosion of Adobe Fireworks Resources

Free Template #4 – Travel Site

116templates in An Explosion of Adobe Fireworks Resources

Adobe Fireworks Template for Android by UNITid

109templates in An Explosion of Adobe Fireworks Resources

FotoGallery 1

111templates in An Explosion of Adobe Fireworks Resources

FotoGallery 2

110templates in An Explosion of Adobe Fireworks Resources

Prebuilt CSS Templates in Fireworks CS4

113templates in An Explosion of Adobe Fireworks Resources

Free Template #3 – Restaurant Website

117templates in An Explosion of Adobe Fireworks Resources

Web Studio

112templates in An Explosion of Adobe Fireworks Resources

Super Guides 1.0

114templates in An Explosion of Adobe Fireworks Resources

Blueprint – Sample Web Template

115templates in An Explosion of Adobe Fireworks Resources

Template #5 – Writing Website

118templates in An Explosion of Adobe Fireworks Resources

Fireworks 975PX Grid Systems (6col and 12col)

120templates in An Explosion of Adobe Fireworks Resources

Free Template #6 – Business Website

121templates in An Explosion of Adobe Fireworks Resources

Free Website Template 7

122templates in An Explosion of Adobe Fireworks Resources

Free Template #2 – Funky Website

119templates in An Explosion of Adobe Fireworks Resources

Free Website Template 1

123templates in An Explosion of Adobe Fireworks Resources

Emote Template

125templates in An Explosion of Adobe Fireworks Resources

Free Website Template 8

124templates in An Explosion of Adobe Fireworks Resources

Prototyping for the iPhone

126templates in An Explosion of Adobe Fireworks Resources

7. Textures

Adding custom textures to fills and strokes gives artwork a “more organic look” and adds depth to your design.

20 Fireworks Seamless Texture Pack 1

132textures in An Explosion of Adobe Fireworks Resources

FTG Textures

127textures in An Explosion of Adobe Fireworks Resources

Wood Textures (61)

133textures in An Explosion of Adobe Fireworks Resources

MB Texture Pack 1

128textures in An Explosion of Adobe Fireworks Resources

Metal Textures (28)

134textures in An Explosion of Adobe Fireworks Resources

50 Pack

129textures in An Explosion of Adobe Fireworks Resources

Smoke (registration required)

137textures in An Explosion of Adobe Fireworks Resources

Cracked Paint

144textures in An Explosion of Adobe Fireworks Resources

Brick Textures (65)

135textures in An Explosion of Adobe Fireworks Resources

InkySmoke (registration required)

138textures in An Explosion of Adobe Fireworks Resources

Pave Textures (203)

136textures in An Explosion of Adobe Fireworks Resources

Fabric Patterns 0003 (registration required)

139textures in An Explosion of Adobe Fireworks Resources

Fractal

130textures in An Explosion of Adobe Fireworks Resources

Cracked Earth 0010 (registration required)

140textures in An Explosion of Adobe Fireworks Resources

Welcome Mat

145textures in An Explosion of Adobe Fireworks Resources

Splatter Round 0039 (registration required)

141textures in An Explosion of Adobe Fireworks Resources

Horizontal Lines

131textures in An Explosion of Adobe Fireworks Resources

Various 0224 (registration required)

142textures in An Explosion of Adobe Fireworks Resources

Zoom Starburst

146textures in An Explosion of Adobe Fireworks Resources

Rock Rough 008 (registration required)

143textures in An Explosion of Adobe Fireworks Resources

Further Texture Resources

BittBox has “Free Texture Tuesdays”

Free Macromedia Textures (379)

CG Textures

Mayang

880 Odd Textures

Textures from FireworksGuru Forums Gallery (must register)

8. Objects and Vector Objects

A “shape defined by a path” is a vector object. One can edit vector objects and use them in a variety of design applications. Some resources are Adobe Fireworks .jpg files labeled “Objects.”

The Complete (Almost) Vectorized Webding Catalog

61objects in An Explosion of Adobe Fireworks Resources

Shiny Shapes

62objects in An Explosion of Adobe Fireworks Resources

Web 2.0 Navigation

69objects in An Explosion of Adobe Fireworks Resources

Box

63objects in An Explosion of Adobe Fireworks Resources

More Buttons

65objects in An Explosion of Adobe Fireworks Resources

Glossy Country Flag Buttons

66objects in An Explosion of Adobe Fireworks Resources

Firefox Using Fireworks

64objects in An Explosion of Adobe Fireworks Resources

CMX Black Line Master Graphics 3

67objects in An Explosion of Adobe Fireworks Resources

Hourglass

149vectorobjects in An Explosion of Adobe Fireworks Resources

Fireworks Vector Pack by Pete

151vectorobjects in An Explosion of Adobe Fireworks Resources

Valentine’s Day Heart

152vectorobjects in An Explosion of Adobe Fireworks Resources

Shiny Basic Icons

153vectorobjects in An Explosion of Adobe Fireworks Resources

Project Icon Set

155vectorobjects in An Explosion of Adobe Fireworks Resources

Vector Goodies

156vectorobjects in An Explosion of Adobe Fireworks Resources

Bitmap Buttons

154vectorobjects in An Explosion of Adobe Fireworks Resources

12 Free Quality Logos

157vectorobjects in An Explosion of Adobe Fireworks Resources

iPhone Hardware Translated into Vectors

159vectorobjects in An Explosion of Adobe Fireworks Resources

2Experts Icon Set

160vectorobjects in An Explosion of Adobe Fireworks Resources

Free RSS Buttons

158vectorobjects in An Explosion of Adobe Fireworks Resources

Badget Fireworks

163vectorobjects in An Explosion of Adobe Fireworks Resources

Adobe Fireworks Logos

162vectorobjects in An Explosion of Adobe Fireworks Resources

Adobe Fireworks Tutorials

40+ Striking Adobe Fireworks Tutorials

FireTuts

23 Amazing Tutorials for Adobe Fireworks

20 Useful Fireworks Tutorials for Designers

Top 20 YouTube Adobe Fireworks Video Tutorials

Tutorials at Layers Magazine

Maa Graphics Fireworks Tutorials

200+ Must Know Adobe Fireworks Tutorials for Designers

20 Tutorials for Professional Effects in Fireworks

ITM Design

Basic Fireworks

Qrayg Fireworks Tutorials

TW Design Fireworks Tutorials

Community MX Fireworks Tutorials

Imajine Fireworks Tutorials?

Fireworks Zone

Entheos Adobe Fireworks Tutorials

Joe DaSilva Blog

In Conclusion

Adobe Fireworks is a great tool for designers which deserves more attention and definitely more resources. If you’re new to Fireworks, give the software a try and discover the power of this forgotten resource. On the other hand, if you haven’t launched Fireworks in some time, what are you waiting for? There’s a nice big box of Fireworks (resources) just waiting to light up your desktop!

Excellent Overall Resources

Adobe Fireworks Exchange
A super resource of Fireworks source files, tutorials, and resources.

Senocular
Great resource for Fireworks Source Files, Extensions, and Tutorials.

John Dunning
A super collection of Fireworks commands, auto shapes, and resources.

FW Extensions
Adobe Fireworks Plugins Directory.

CommunityMX
Fireworks articles, tutorials, and extensions.

FWKit
Fireworks extensions, styles, and templates.

Aaron Beall
Fireworks commands, panels, auto shapes, and concepts.

Phireworx
Various Adobe Fireworks tools.

Heathrowe
Auto Shapes, Commands, Automate, and other resources.

Matt Stow
Fireworks tutorials and resources.

FireworksGuru Forum –> Gallery
Templates, PNG’s, icons, textures, patterns (must register first).

UltraWeaver
Over 277 Fireworks Resources.

Fireworks Designer

IDUX

Further Reading

40 High Quality Adobe Fireworks Tutorials, Resources, & PNG Files

70+ Adobe Fireworks Resources – Is there a future for Fireworks?

Adobe Fireworks Tutorials and Downloads – Best of –

The Ultimate Round-Up of Fireworks Tutorials and Resources

75 Powerful Adobe Fireworks Extensions

About the Author

Melissa Scroggins is a freelance graphic designer at PeachPoPs. She loves designing icons, creating vector illustrations, and playing survival horror video games. Follow her design adventures on Twitter.

December 30 2009

13:54

Stunning Fireworks Photos

Smashing-magazine-advertisement in Stunning Fireworks Photos
 in Stunning Fireworks Photos  in Stunning Fireworks Photos  in Stunning Fireworks Photos

Spacer in Stunning Fireworks Photos

It is a most beautiful experience — the sounds and colors of fireworks in the silence and darkness of night. Words alone cannot describe such an experience. The sky comes alive with so many vibrant hues, starbursts, and showers of light along with ribbons of smoke, making us happy and awestruck. Photographing fireworks, however, is not an easy task.

To celebrate the beauty of fireworks, we present a showcase of beautiful fireworks photography. Each image is linked to the original photographer’s page with their profile names — so you can view more of their work or even thank them for their contribution. And finally, remember to have a camera handy this coming New Year’s Eve!

Beautiful Pictures Of Fireworks

Citizens Bank Park Fireworks

Fireworks-photos-156 in Stunning Fireworks Photos

Dailyville

Dailyville in Stunning Fireworks Photos

fireworks on Flickr – Photo Sharing!

Fireworks-photos-144 in Stunning Fireworks Photos

Seattle New Year

Fireworks-photos-113 in Stunning Fireworks Photos

4th of July fireworks

Fireworks-photos-146 in Stunning Fireworks Photos

heartreef

Heartreef1 in Stunning Fireworks Photos

Fireworks at festival in Hella

Fireworks-photos-118 in Stunning Fireworks Photos

Blue Explosion on Flickr – Photo Sharing!

Fireworks-photos-117 in Stunning Fireworks Photos

United Kingdom fireworks at the celebration of light

Fireworks-photos-128 in Stunning Fireworks Photos

Daniel Avilés

Daniel in Stunning Fireworks Photos

New Year’s Eve fireworks

Fireworks-photos-114 in Stunning Fireworks Photos

4th of July

Fireworks-photos-111 in Stunning Fireworks Photos

Waikiki Fireworks

Fireworks-photos-102 in Stunning Fireworks Photos

Japanese Fireworks

Fireworks-photos-103 in Stunning Fireworks Photos

Fireworks!!!

Fireworks-photos-105 in Stunning Fireworks Photos

New Years Eve Sydney 2008 Fireworks

Fireworks-photos-106 in Stunning Fireworks Photos

Its all about the view

Fireworks-photos-107 in Stunning Fireworks Photos

Epcot 2009 2 Fireworks

Fireworks-photos-108 in Stunning Fireworks Photos

14 juillet en couleur

Fireworks-photos-115 in Stunning Fireworks Photos

Bridge to Next Island

Fireworks-photos-119 in Stunning Fireworks Photos

Fireworks

Fireworks-photos-120 in Stunning Fireworks Photos

New trial … View large!!

Fireworks-photos-122 in Stunning Fireworks Photos

South Africa Night

Fireworks-photos-123 in Stunning Fireworks Photos

The Big Bang (?)

Fireworks-photos-124 in Stunning Fireworks Photos

Quincy Fireworks

Fireworks-photos-129 in Stunning Fireworks Photos

Milton, VT Fireworks ‘08

Fireworks-photos-133 in Stunning Fireworks Photos

Eiffel Tower

Fireworks-photos-135 in Stunning Fireworks Photos

Fire & Sea

Fireworks-photos-136 in Stunning Fireworks Photos

Starburst Frailty

Fireworks-photos-137 in Stunning Fireworks Photos

Fireworks at Otsego Lake

Fireworks-photos-145 in Stunning Fireworks Photos

Tumblr

Fireworks-photos-154 in Stunning Fireworks Photos

(via helloocsem)

Fireworks-photos-159 in Stunning Fireworks Photos

mikeintokyo

Mikeintokyo1 in Stunning Fireworks Photos

U. Rain

Rain in Stunning Fireworks Photos

Jeremy Snell

Jeremy-snell in Stunning Fireworks Photos

tunatoss

Tunatoss in Stunning Fireworks Photos

chalee-80

Chalee-802 in Stunning Fireworks Photos

Nick Tan

Nick-tan in Stunning Fireworks Photos

Piero Sierra

Piero-sierra in Stunning Fireworks Photos

brewskizzlr

Brewskizzlr in Stunning Fireworks Photos

Passion flower

Fireworks-photos-109 in Stunning Fireworks Photos

Souvik_Prometure

Souvik Prometure in Stunning Fireworks Photos

Fireworks

Fireworks-photos-141 in Stunning Fireworks Photos

Things to keep in mind for your Fireworks photos this year

To make some truly stunning fireworks shots, you need keep a couple of things in mind. First, a normal camera can’t handle such high levels of light. Although you’re shooting at night, using your flash won’t make any difference. Also, the light produced by fireworks is more than enough to capture a decent shot. For more dramatic results, you may choose longer exposure. And to ensure a high-quality result, always be ready for initial explosions when there’s less smoke in the atmosphere.

Other things to keep in mind are to use low ISO, set focal length to infinity, use a tripod and of course use manual mode. Some cameras have “Fireworks Mode” which saves you the trouble of having to adjust a lot of different settings. Just set the camera to “Fireworks Mode” and you’re ready for action!

And, of course, Happy New Year’s Eve!


© vailrodrigues for Smashing Magazine, 2009. | Permalink | 10 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: fireworks, photos

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl