Error getting theme layout

A Designer’s Look at Photoshop and Fireworks

Posted @ 8:04 am by Matthew Tanis | Category: Creative Design, Technology | 0 Comments

My first five years in design were spent in Macromedia (now Adobe) Fireworks. During this time, I learned the core elements of layout, design, and image production. I found Fireworks to be an excellent program with an easy to learn interface and capable vector tools, among other features. As I transitioned into work with more professional clientele, I quickly noticed the ubiquitous place that Photoshop had taken among designers, developers, and clients. In large part due to this, I picked up Photoshop and have spent the last 4+ years learning and exploring its creative potential. Although the feature crossover is quite modest, there is still a world of difference between the two programs and much could be said making light of their similarities and differences. But, rather than debating the various differences between the two, I find both of them useful in my workflow as a designer.

Photoshop has a strong set of features for intermediate to advanced designers to utilize from exploration of layout and concepts to final design comps. It puts a strong focus on the details of a design, including color, shapes, and alignment. It also has a robust set of photo manipulation tools that work well when building texture, lighting, masks, background elements or realism into a design. These tools place Photoshop at the top of the list for maximum creative potential, allowing multiple mediums to be addressed in one application. The main catch is the type rendering and handling Photoshop provides is subpar at best, and requires a bit of savvy to maneuver carefully. Photoshop CS6 addressed some of these shortcomings by adding a styles panel—allowing for global type changes in a design—but this update still leaves it far behind the type capabilities of InDesign, Illustrator, or Fireworks.

photoshop styles

Toward the start of any project, Photoshop is a vital part to the design exploration. Moving from concept to layout and final design is seamless as assets can be carried over from earlier designs. When designing multiple pages for a site, Photoshop’s “Layer Comps” is a great solution for keeping layouts together and in order. Similar to Firework’s Pages panel, Layer Comps is well suited for multiple pages of a design, keeping in mind that file sizes can skyrocket quickly when too many pages are added to one PSD.

comps pages

By pairing layer comps with “Smart Objects” for common UI elements, revisions can be streamlined and site wide changes can be made quickly. Photoshop CS6 has made some significant improvements for UI designers specifically—a full list can be seen here.

bjango improvements

The ability to search layers has become a vital part of my workflow, and vector pixel-snapping has been fine-tuned to provide Photoshop a feature-set more applicable to web designers. Still, a noticeably missing feature of Photoshop is components. In any web design project, numerous UI components are formed, but there is no library where they can be stored for accessing them in the future. An easy way around this is to create a components PSD where all of the latest assets live, but this certainly can’t be the most intuitive way. Fireworks provides a common library of assets that can be accessed either locally by a file or globally by many files. Utilizing smart objects or a component library saves a good amount of time searching for assets and speeds up the creation of additional pages.

libraries

Photoshop follows a similar pattern to Illustrator in that it was created for a single layout workflow such as editing a photo or designing a poster. I’ve found Fireworks to have a very similar feel to InDesign in its multi-page functionality and straightforward interface. The Pages and States panels in Fireworks have become particularly helpful in creating each state of an interaction and keeping files concise as all additional pages/states created are saved within the same file. I recently designed a UI flow using separate pages in Fireworks for each step. By exporting them as separate files, it was quick to create a realistic animation with Apple Keynote to explain a complex UI concept. Examples like the one I created work well because they can help draw feedback much quicker than by just providing a static comp.

Fireworks shines when it comes to exporting graphics for the web, surpassing Photoshop’s native capabilities in this area. To conserve final image size, Fireworks lets you selectively mask a .jpg and apply different quality level settings to the same image—conserving up to 50% space as the foreground image can have a higher quality level than the background.

selective masking

As a tool built specifically for web designers, Fireworks does well sticking to the creation of graphics for the web, but is best left aside when it comes to print, motion graphics, or complex vector artwork as other tools such as Photoshop, Illustrator, and InDesign are much better suited to solving those problems.

Another core feature of Fireworks is its batch capabilities, which can be leveraged to perform tasks such as Scaling, Renaming, Rotation, Applying Filter, Conversion to Grayscale, among others. I’ve fired up Fireworks on multiple occasions to do some heavy lifting—scaling, renaming, or grayscale—on images before uploading to a CMS or sharing with a client.

batch process

In my experience, I found Fireworks to be great for layout, UX, and especially image production. It can be an incredible time saver in batch production, and any designer would do well to explore these capabilities.

In the end, I’ll stick with Photoshop as my tool of choice for design and raw creativity, but I know I would be hard-pressed to find a better production tool than Fireworks.

 

Author: Matt Tanis is a creative designer at SolutionSet. He works with large and small clients to craft digital brand experiences.

Leave a reply

Error getting theme layout