The Best New Features of Fireworks CS6

Almost every program in the Creative Suite 6 family received an overhaul or a big boost in tools and functionality. Fireworks is definitely no exception. In previous versions, it was hard to find what you were looking for, especially when it came to patterns and  styles. Parts of Fireworks have been completely redone, and Adobe has made several handy additions to increase productivity and make Fireworks an excellent tool for any web designer’s or web developer’s arsenal.

Colors

The entire Color system in Fireworks has been updated to make it more intuitive to make color choices. Hex values are readily available and different colors are broken down into tints and shades. Shades of gray are broken down to create an intuitive interface for choosing colors with Fireworks.

Screen shot 2012-07-03 at 10.28.07 PM

Fill and Stroke

Fill and Stroke have been completely overhauled in CS6. It is completely different, but much better and more intuitive. Everything is broken down and organized so that it makes more sense. Fill, Gradient and Pattern are all divided into their own sections, so that you can easily find what you are looking for, without sifting through a lot of the stuff that you really aren’t looking for.

Fill and Stroke

On a side note, Patterns are scalable, so they can meet your needs. This is really handy, because sometimes it simply isn’t suitable enough to have it scale proportionally. It makes it look generic. However in Fireworks, you can grab the handles and stretch the pattern and even tilt it at an angle to create some interesting results. This makes Fireworks so much more relevant when creating graphics for the web.

patternstretch

Common Library

The Common Library filled with Symbols has been updated and Fireworks has added a lot of new symbols. The symbols vary, but they are much more relevant to web design and development than ever before. You will find symbols such as an iPhone keyboard, a dropdown menu, banner ads, horizontal menus, and more. You will find icons for Twitter, Dribbble, RSS and just about anything else you could image that is relevant.

Screen shot 2012-07-04 at 12.40.58 AM

Templates

Fireworks has updated its template system to include wireframing templates for ipad, iphone, mobile apps, and even grid systems. This will help any designer jump into a project and get started designing user interfaces for their work quickly and effectively. These templates include common items such as menu bars, search bars, menus, icons and much more, helping you to slice your work time down and greatly increase productivity. Below, you can see the template that is available when you choose iphone from the wireframes folder.

Screen shot 2012-07-05 at 11.52.10 AM

CSS Properties

This is one of those features that simply blows my mind and is a huge time saver. Any type of design element that you can think of can be viewed within the CSS Properties Panel. Inside this panel the effects applied to your design is analyzed and replicated as CSS Styles, which you can easily copy and paste within the CSS stylesheet for your website. This includes gradients, drop shadows borders, rounded corners, and other CSS properties that can be a pain to code from scratch.

Screen shot 2012-07-05 at 3.33.54 AM

Screen shot 2012-07-05 at 3.34.04 AM

jQuery Themebuilder

jQuery themes are okay, but many designers would like to create their own themes. You can do that inside Fireworks CS6. Simply go to Commands> jQuery Mobile Theme> Create New Theme. A template opens up where you can create your own custom theme that fits your vision as a designer. Simply highlight the icons that you want to change and edit their colors, and customize their look.

Screen shot 2012-07-04 at 1.00.48 AM

Screen shot 2012-07-04 at 1.01.41 AM

Paths Panel

The Paths Panel received a complete overhaul and is much more intuitive than ever before. You can do things with paths that you never could do before. You now have control over the points you have selected, and how you interact with them. Select inverse points, turn paths or strokes to fills, invert them, and anything else you could think of. It is all organized into this neat little panel, making it easier to complete tough tasks without having to sift through menus.

Screen shot 2012-07-04 at 1.11.16 AM

Styles Panel

This panel now makes much more sense. Not only has the interface been overhauled, but the way that the file structure of your styles exists makes it much easier to find the styles that you are looking for. Also, now you can save styles for later, and they will still be there when you come back.

Screen shot 2012-07-05 at 3.37.20 AM

Screen shot 2012-07-05 at 3.37.57 AM

File Formatting

Adobe fixes an issue with opening certain png files in Photoshop. They way that they have done this is that now you can save Fireworks png files as fw.png files. This does 2 things. The first is that it solves the Photoshop opening bug, and the second is that it identifies .PNG files that were created in Fireworks. This is excellent when trying to determine where something was created.

Screen shot 2012-07-05 at 11.54.24 AM

Conclusion

Fireworks has really been upgraded in CS6. Many things such as colors and styles have been completely restructured, and Adobe has included many industry relevant templates right out of the box. Also, with the inclusion of the CSS Properties panel, you can worry more about how your work looks than how to keep up with all of the coding. Fireworks is a huge time saver for any serious web designer or developer that wants to concentrate on getting their work done quickly and efficiently.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote