Smashing Fireworks is an extended section of Smashing Magazine which has been created to provide you with more articles and tutorials on Adobe Fireworks. It is curated by Michel Bozgounov and will be updated frequently. .
Every designer has their own workflow when starting a new project, even if it’s only loosely defined in their head. A typical Web project goes through a variety of steps from inception to launch, with a lot of moving parts throughout the cycle. Photoshop, Illustrator, Fireworks and even Web browsers themselves are available to aid us in our work. But with so many choices, how do we determine the right tool to move from concept to functional design?
Over the years, I have come to rely on Adobe Fireworks as the main workhorse among my design applications. It’s built from the ground up to create screen-ready graphics; it’s object-oriented by design; and it’s lightning fast for creating UI elements. While Photoshop has made great strides lately by adding some vector support, it simply has not been able to match the speed and reusability of Fireworks for production work. Read on to get a glimpse of my project workflow (sketches → wireframes → graphic comps → export) and to see how Fireworks fits into these different stages.
There is an aspect to Web design that no one likes to talk about: spec’ing. We all do it, we all hate it, but we also understand that specs are vital to both designers and developers.
For those who aren’t familiar with the term in this context, “specs” is short for specifications—in the case of design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development.
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 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.
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.
Adobe Fireworks is the Swiss Army knife for many developers and Web, UX, UI and graphic designers. The application is known for its versatility, excellent blend of vector and bitmap tools and powerful built-in wireframing and prototyping options. Also, according to the SoDA 2010 Digital Marketing Outlook survey, Fireworks has become an important tool for many digital agencies.
It now has the same standing as other core Adobe products, such as Flash, Flex and Dreamweaver (to the question "Which technical skill sets, if any, will you look to hire or contract in 2010?", approx. 12% of the survey respondents replied "Fireworks", and to the question "Which tools/products will you or your organization use in 2010?", more than 44% of the survey respondents replied that they will be using Fireworks).
None of the official Adobe pages actually answer the question that so many design professionals are asking in the first place: is Fireworks CS5 really better? Will it save you time and effort? Are the new features worth the upgrade price? This article gives detailed answers to these questions. We'll present a neat list of Fireworks CS5's new features and improved workflows, along with examples of how they will make your work much more efficient.
Fireworks was originally created as an image editing and web design application by Macromedia, for quick web mock-ups, and optimizing images for the Web. It has since been transformed into a powerful environment for designing and prototyping applications that integrates easily with Dreamweaver, Flash and Photoshop &ndash making it, perhaps, the most powerful (that's controversial) and versatile graphic editor.
Fireworks has always had the reputation of being Adobe Photoshop's little brother and a graphic editor for amateurs. The truth is, some Photoshop users have underappreciated the power of Fireworks, misunderstood its purpose, and seem to be reluctant to move their design workflow to Fireworks.
In this post, you will learn how powerful Fireworks can be and you will see how easily it can be used for any design project, whether you are a graphic designer or web designer. Would you consider changing from Photoshop?
Adobe Fireworks is the industry leader for prototyping and rapid site building. Some of you may not be aware of this, as you may be using Photoshop for each phase of web-site production. The articles, tutorials, and resources gathered here will convince you of the power of this application.
For rapid prototyping and site layouts Adobe Fireworks is definitely an option worth considering.
Fireworks is an optimal tool for quickly prototyping and building web-sites. It is more intuitive and more light-weight compared to other titans of the industry. It is also included in the Adobe's Creative Suite 3. Below you'll find Fireworks tutorials which will help you to improve your skills and become more efficient when designing web-sites. Hopefully, they'll also help you to produce professional and maintainable results.
You might also want to take a look at the following tutorials round-ups which we've presented in our previous posts:
- Adobe Photoshop Tutorials: Best of
This article provides professional Adobe Photoshop tutorials which can enrich your design skills and improve the quality of your works.
- Adobe Illustrator Tutorials: Best Of
A collection of excellent Adobe Illustrator tutorials for beginners and advanced designers.
- Adobe Flash Tutorials: Best Of
Hand-picked professional Adobe Flash tutorials.
- Tutorials Round-Up