BlogmyQuery – BMQ

We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they're offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won't know that that the online content has changed — causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.

The new Smashing Book #3 has finally arrived—freshly printed, neatly packed and ready to be shipped to you, our dear reader. We believe this is by far the best book we’ve produced so far. We are very proud and excited, and the initial verdict has been thoroughly positive, yet in the end it’s up to you to decide how valuable and useful they really are. Get your books now!

Why The Theme Of “Redesign�?

In recent years, the Web has changed—a lot. The Web designer’s tools are now advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they face new challenges and are embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web. The new Smashing books will change the way you design websites for the better.

But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? The books explain what you need to know in order to create effective websites today, and what you need to know to be prepared for the future. Well-known experts share practical know-how and introduce a whole new mindset for progressive, future-proof Web design.

Smashing Book #3 (Printed & eBook)

With over 40 people having worked on the project, a lot of thorough editing and consideration needed to be done to fine-tune each chapter’s content and order to make the most sense. In the end, 11 of the most outstanding articles made it into the Smashing Book #3, covering topics ranging from the business side of design to mobile approaches and responsive design.

The Smashing Book #3 covers innovative coding, design and UX techniques and discusses the peculiarities of the mobile context and emotional design. It also presents practical HTML5, CSS3 and JavaScript techniques, as well as a bulletproof workflow for responsive Web design. The book challenges you to think differently about your work, your code and your designs.

Table of Contents

AUTHOR	CHAPTER	DETAILS
Elliot Jay Stocks	Preface
Elliot Jay Stocks introduces the new Smashing Book #3 by making us think about our workflow, the quality of our work, our industry and our community. Working in an industry that evolves at an incredible speed takes a lot of effort—at the same time, it’s what keeps us going.
Paul Boag	The Business Side of Redesign
A redesign is the best thing that a Web designer can experience. Yet before leaping head on into a project, we must consider the business behind the redesign. By its nature, a redesign has the potential to make a website successful, but it also has the power to destroy a perfectly good idea. Important considerations to keep in mind before engaging in a redesign project include common dangers, required research, the working process with the client and testing. Paul Boag leads you through this process step by step. Chapter keywords: business model, redesign timing, scope of redesign, redesign considerations, realignment, project pitfalls.
Rachel Andrew	Selecting a Platform for Redesign
Once you have understood the business side of the redesign project, the next step is to choose the right platform. Understanding all of the requirements of a project will save you valuable time in aligning the new functionality with the technological circumstances. Take stock of existing structures such as the CMS, e-commerce system and payment gateway. Beware of the project constraints, including the budget and wishes of the client. Only then will you be able to concentrate fully on the project, without encountering unpleasant surprises ahead. Chapter keywords: technical requirements, CMS, eCommerce, payment gateway, refactoring, platform choice, redesign project constraints.
Ben Schwarz	Jumping Into HTML5
Ben Schwarz takes away the fear that many Web developers suffer when confronted with a new technology—by encouraging experimentation. The chapter guides you through the new HTML5 elements and discusses the possibilities that come with the adaptation to these elements. This is a practical, compact guide to HTML5, with everything you need to know today in order to create flexible and maintainable websites for the future. Chapter keywords: HTML5, semantics, semantic outlining, ARIA, client-side storage.
Lea Verou, David Storey	Restyle, Recode, Reimagine With CSS3
Some CSS workarounds that have hung around from earlier days prevent us from becoming better, more efficient designers. Learn how to recode CSS to reduce the number of images, HTTP requests, presentational JavaScript and wrapper divs on the page, while making the style more flexible and maintainable. Learn about the rem unit, Flexible Box Layout, source-order independence with flex order, multiple backgrounds and gradients, background clipping, border images, transforms, transitions, box sizing and new CSS3 selectors. Restyle, recode, reimagine: because CSS3 is here to stay! Chapter keywords: CSS3, techniques, Flexbox, multiple backgrounds and gradients, transforms, transitions, box-sizing, selectors, layout.
Christian Heilmann	JavaScript Rediscovered
Even though jQuery is written in JavaScript, it is not the same; nor is it native to browsers. The large jQuery library abstracts away a lot of issues that Web developers face, yet sometimes it’s used without a real purpose. Christian Heilmann takes us back to its origins and shows us how to implement simple JavaScript solutions without resorting to jQuery, achieving the same result in a slimmer and less process-intensive way. Chapter keywords: JavaScript, jQuery, CSS selectors, classlist, localStorage, tutorials.
Dmitry Fadeyev	Techniques for Building Better User Experiences
User experience means good design, and the central aim of design is not to decorate, but to solve problems. Whether that means getting more sign-ups, inviting users to post more content or making the interface easier and faster to use, this is ultimately the sort of design that delivers a great user experience. This chapter features powerful UX techniques that you can easily apply to your products and websites. Make sure users stay on your website for the right reasons, and get an edge over the competition by improving user-targeted processes. Also, explore experimental approaches and avoid some misleading design techniques. Chapter keywords: UX design, forms, good defaults, customer service, copywriting, storytelling, experimental techniques, design pitfalls.
Marc Edwards	Designing for The Future, Using Photoshop
Because good design and user experience are almost mandatory for success today, the lines between desktop software, mobile software and the Web are increasingly blurry. We have to continually change our tools and techniques to meet new requirements. Marc Edwards addresses some of the challenges that Web designers face today and will in the future when using Photoshop. Realism, scale, screen sizes, resolutions, formats, techniques—this chapter touches on all of it. There is no reason to surrender to scaleability and liquid image requirements when using Photoshop! Chapter keywords: Photoshop, screen sizes, pixel density, scale, gradients, shapes, color profile, mobile, Retina display.
Aaron Walter	Redesigning With Personality
Any design that does not effectively establish a connection with its audience has missed its goal. Getting to know your user is just as important as knowing yourself and the personality behind the brand; this will set you apart from competitors. This chapter describes how to develop your own design persona and define the key characteristics to guide your project’s path. New technologies and techniques are not what build connections with users, but rather the empathy evoked by the personality behind them. Aaron Walter explains how to bring out the personality at the heart of your work. Chapter keywords: personality, brand sympathy, engagement methods, design persona, voice and tone.
Aral Balkan	Mobile Considerations in UX Design: Web or Native?
The native vs. Web debate is meaningless and counterproductive. All products nowadays have high demands for UX design. Web designers turn into UX designers by gaining specialized knowledge of the Web and by mastering auxiliary frameworks and their components. Not only do the aesthetics of an interaction object count, but also how the object behaves upon contact. Designing documents and designing applications requires knowledge of basic responsive design principles and progressive enhancement. This chapter helps you understand your medium, explains what exactly it means for an application to be “native,� and goes over how to choose the right tools and technologies for the job. Chapter keywords: mobile, user experience, native applications, native as culture, interaction design principles, responsive Web design.
Stephen Hay	Workflow Redesigned: A Future-Friendly Approach
Web design changes quickly. In multiplatform design, where websites and apps are used on many and varied devices, we are confronted with multiple destinations. How do you go about integrating as many devices as possible? Is targeting as many different platforms as possible really important? In this chapter, Stephen Hay suggest a new design workflow for responsive Web design. A new way of thinking leads to a new way of design—the sooner you get the hang of it, the sooner you will be ready to discover what works best for your projects. Chapter keywords: responsive Web design, device-agnostic approach, content inventory, future-friendly approach, breakpoint graphing, designing in the browser.
Andy Clarke	Becoming Fabulously Flexible
There are significant upsides to responsive Web design for designers, especially in workflows that embrace flexibility. Responsive Web design still asks more questions than it answers, and it challenges the working relationships and interactions between everyone involved in every process. Andy Clarke gives you some insight into the techniques that helped him become fabulously flexible when developing responsive designs. Learn his approach to designing atoms and elements of a design first and see if it works for you. It might enable you to create many facets of the same experience within a single workflow. Chapter keywords: Responsive Web design, design challenges, style tiles, design atmosphere, flexibility, designing components first.

Well-respected professionals have poured their heart and expertise into these contributions. To ensure quality, every chapter of this book has been thoroughly reviewed by experts, including Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Josh Clark, Anders M. Andersen, Bryan Rieger, Joshua Porter, Ryan Carson and Elliot Jay Stocks.

Technical Details

• 340 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
• Download a free sample (.zip, in PDF, EPUB and Kindle)
• Quality flexibound cover, with stitched binding and a ribbon page marker.
• Delivery from Berlin, Germany, only via air mail (3 to 15 working days).
• $5 worldwide shipping (check worldwide delivery times).
• Also available as an eBook (PDF, EPUB, Kindle).
• Get your Smashing Book #3 today!

Our new books: the Smashing Book 3 and Smashing Book 3⅓—The Extension. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Smashing Book #3⅓ — The Extension

With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platform. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy—which is an important process, often underestimated, and dependent on many factors.

Smashing Book 3⅓, otherwise known as “The Extension,� presents practical applications of storytelling to Web design, reviews emerging navigation design patterns and helps you understand how to meaningfully employ content strategy on your websites. A case study of Smashing Magazine’s responsive redesign illustrates how this approach could look like in practice.

Table of Contents

AUTHOR	CHAPTER	DETAILS
Iris Lješnjanin	Preface
The Smashing Book #3 was limited to a certain size and format, making it impossible to include all of the chapters without compromising the book’s overall integrity. The Smashing Book #3⅓ is a challenge: explore the possibilities that modern technology and our design legacy have in store for us Web designers.
Denise Jacobs	The Missing Element of Redesign: Story
Today’s Web audience is on the search for more than just information. Consumers expect to be engaged and want to be drawn in by a website, one that makes them feel something and manages to inspire. While changing the look and feel of a website used to be somewhat easy, it is time to reconsider the fundamentals of our approach to a redesign. Learn how to successfully capture attention by using copywriting and storytelling, and understand the important relationship between emotion, design and story. Chapter keywords: storytelling, invisible design, literature, narrative devices.
Christian Holst and Jamie Appleseed	Rethinking Navigation: Techniques and Design Patterns
Navigation is what lends a page interactivity, connecting otherwise isolated pages into a logical order. Still, its design must fit the content and purpose of the website, not the other way around. Organic content calls for new and adaptive navigational elements. But how do we go about that? This chapter gives you useful insight into rethinking your approach to navigation. Chapter keywords: navigation, design patterns, filtering, mega menus, checklist.
Colleen Jones	Rework Your Content So It Works for You
If you invest much time and effort in the design of your website, but not the content, you’re taking a big risk. Don’t disappoint your users with the same old content after raising expectations with an impressive design. This chapter takes a strategic approach to content and explains the basics of formulating the right content strategy for your website redesign. Chapter keywords: content strategy, content inventory, audit, context, maintenance, results assessment.
Vitaly Friedman	Responsive Smashing Redesign: A Case Study
Redesigns usually introduce unexpected changes and are rarely applauded; moreover, a large-scale redesign is a tough and risky game to play. Smashing Magazine faced a long list of technical and UX changes in July 2011, and the team decided to act. This chapter presents a detailed case study of the whole redesign process, from A to Z, as it happened, and it sheds some light on the design, UX and technical considerations that actually led to the redesign. Chapter keywords: redesign trap, responsive Web design, advertising constraints, design persona, typography-out approach, designing in the browser, redesign manifesto.

Technical Details

• 160 pages, 14.0 × 21.0 cm (5.5 × 8.3 inches).
• Quality flexibound cover, with stitched binding and a ribbon page marker.
• Delivery from Berlin, Germany, only via air mail (3 to 15 working days).
• $5 worldwide shipping. The book will be shipped separately, starting from 15 May 2012. (Check worldwide delivery times.)
• Also available as an eBook (PDF, EPUB, Kindle).
• Get your Smashing Book #3â…“ alone for $14.95 or as a part of a bundle.

Cover Design by Veerle Pieters

The Smashing Book series has gotten a rather eye-catching facelift. The well-respected Belgian artist Veerle Pieters has taken on the significant task of putting together an innovative, bold cover design. And the result is bold indeed. Veerle’s styling of Smashing Magazine’s “S� reflects the many aspects that make up a Web designer’s workflow today.

An excerpt of Veerle’s final cover design for the Smashing Book #3.

Veerle’s final sketches for the cover of the Smashing Book #3.

Exclusive Artwork by Kate McLelland

If you have the Smashing Book 2, you’ll know that animals play a distinct role—forming almost a tradition for the series. This time, we have asked the talented young illustrator Kate McLelland to illustrate the introductory pages for all of the chapters. Kate has been impressively creative in her designs; the theme of redesign has obviously shaped the tone of her artwork. Each chapter begins with an elaborate drop cap.

A detail of a chapter illustration, designed by Kate McLelland.

Each illustration employs a different metaphor that relates to the accompanying chapter. See what they all are once you get your hands on the book. Appropriately enough, when strung together, the drop caps spell out “Redesign the Web.� The composite style of the illustrations points to how so many components have to come together for a successful redesign.

Reviews and Testimonials

We’re looking forward to honest, objective reviews of the brand new Smashing Books. Please share your photos, opinions and feedback on Twitter using the hashtag #smbook3. The first feedback has been throughout positive and, in fact, we’ve discovered the first reviews of the books as well:

“The entire book is wonderfully balanced between theoretical and practical, with each author contributing a strong point of view on their area of expertise as well as a thorough explanation of how to execute it in a way that is useful. [...] curating the most cutting edge perspectives on the Web and offering the tools and information that the rest of us need to build upon them. If you’re into that, check out this book.”

— Christopher Butler, Book Review: Smashing Book #3

“This book is worth buying and reading for yourself. It really covers many aspects of modern website production in eleven in-depth chapters. There will likely be a few you don’t care for—we all have our own tastes—but I’d be surprised if any genuinely leave you disappointed given the chance. I was quite prepared to write something less positive, the first Smashing Book didn’t excite me, but this one very much did.”

— David Bushell, Smashing Book #3

“The Smashing Book #3 is an invaluable resource for Web designers, regardless of skill level or experience and we highly recommend it.”

— Cameron Chapman, Review: Smashing Book #3

“[...] not only is this a good book and an enjoyable read, but it is an important book that really can change the way we design, or redesign, for the Web.”

— Jeremy Girard, Reviewing The Smashing Book #3

Please feel free to submit a link to your review in the comments to the post and we’ll add your testimonial into this article. Feel free to provide criticism or praise: we’d love to hear your honest opinions!

A quick peek into the Smashing Book #3. Yes, we do like animated GIFs.

The Smashing Anthology

If you haven’t purchased Smashing Books #1 and #2 yet, we’ve prepared a couple of complete bundles for your convenience. Even though the first two books were published a couple of years ago, they remain relevant and valuable, because they were designed by our editorial team to be timeless. Save 20% off the price and get yourself the Smashing Anthology, a collection of all of our books as of today:

• complete Printed Smashing Books Bundle with all printed books for $84.90 (i.e. 20% off the price) or
• complete Digital Smashing Books Bundle with the digital versions of the books for $44.90 (i.e. 15% off the price) .

Frequently Asked Questions (FAQ)

We want to make it as easy as possible for everyone to buy the new Smashing Book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the Smashing Books #3 and #3â…“:

Questions
What’s the difference between Smashing Books 1, 2 and 3?
The first two books covered best practices in modern Web design. Although they had similarities, the two books covered different areas of Web design. Smashing Book #3 has a particular theme: redesign. It covers the redesign process per se, as well as cutting-edge approaches to Web design on a broader scale. It focuses on the most recent developments and current demands of today’s rapidly changing environment. Smashing Book #3 gives professional advice on the what, when and how of responsive and bulletproof Web design, according to the requirements of today’s Web.
What’s this extra Smashing Book #3⅓?
Our authors have turned out to be much more productive than we anticipated, coming up with more exciting chapters than one book could handle. Adding these chapters to the book would have increased the size and weight—and, hence, shipping cost—substantially. Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present the Smashing Book #3â…“: The Extension, four extra chapters of quick quality reading. Buy it as part of a bundle and save!
Will the book be available in other languages?
Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath.
Are the Smashing Books #3 and #3â…“ available as eBooks?
Yes, the books are available in PDF, EPUB and Mobipocket formats, and you can order an eBook bundle right now.
What are the costs for shipping to my country?
The shipping cost for one book or a bundle is $5—wherever you are in the world. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay!
How long will delivery take to my country?
All books are shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.
What payment methods are accepted?
We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate.
Is there a money-back guarantee?
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it.
I have a question that is not covered here.
Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can!

Please Spread The Word!

These new books took seven months of production time, from brainstorming to delivery; 43 people worked on the content, design, layout, editing and proofreading of the book; 623 animals are hidden in various places in the Smashing Book #3; and the production costs for initial circulation, excluding marketing costs, required a six-figure budget. That’s what it took us to ensure that our Berlin warehouses are stocked with these new valuable books, waiting to be shipped right away as soon as you place your order.

The authors of the new Smashing books. We’ve donated over $5000 on behalf of the book contributors to Doctors Without Borders.

Here at Smashing Magazine, we do our best to support and enrich the design community. Yet we also rely heavily on community opinion—in fact, the magazine would not be what it is today without the constant feedback of the community. That’s where you come in: we now pass the book onto you. Use it, enjoy it, test it, read it, rate it, evaluate it, criticize it or praise it—and share your honest opinion of it with the rest of the world.

Feel free to take as many pictures of it as you like and to use the Smashing Book #3 media kit (.zip, 9 Mb), which is full of interesting facts, figures and images related to the book. Be one of the first to give the community a critical view of the book; stir the discussion, and encourage feedback on your website.

Your criticism helps us further improve future projects, shapes the selection of topics and enables us to stay close to the pulse of the community. We sincerely appreciate your support.

---

© Smashing Editorial for Smashing Magazine, 2012.

There are many photographers who aim for vibrant explosions of color in their work. Using these bright hues to connect with and move the viewer. Though there are some who take a different path for reaching their audience, however color still plays a part. They actually process the photos to lower the saturation of color and thereby enhancing the mood and tone of the pictures.

By fading the images in this way, some truly breathtaking and inspiring results can take shape. Which is what we are hoping to accomplish for our readers today. In this showcase of low saturation photography we hope to inspire our readers with the glorious, emotive imagery these talented pros have created. Enjoy!

Faded Glory

Petal Dance by Jean Fran

Vintage book… by aoao2

Boudoir by Ophelias-Overdose

Blossom by EliseEnchanted

Fog by Tamerlana

untitled by oprisco

Disappear by duchesse-2-Guermante

Somewhere Back In Time by oO-Rein-Oo

:old tale: by candymax

Keep my distance by xxchange

Kangaroo by Lady-Tori

Veiledly yours by INeedChemicalX

Softness Time by Rave15

Suicide by NadirSiddiqui

The Offer by nairafee

Wedding day… by Khomenko

Chrystal palace by aoao2

Daze by EliseEnchanted

Between cats by Tamerlana

infinity by oprisco

I have to go by duchesse-2-Guermante

Ballerina Dreams by oO-Rein-Oo

:lost in freedom: by candymax

remember the times by xxchange

Miss Elegance by Lady-Tori

Life in Red by Rave15

Tea Time by nairafee

Hush, but the heart beating by Khomenko

les jours tristes by Pink-Promise

(SP)bRING me to Life. by JoanaSorino

The Long road. by Squirrelondope

its tea time by brenditaworks

Vintage Cupcakes by fiegga

muse by oprisco

Ode to Summer by duchesse-2-Guermante

Absent Mindness by oO-Rein-Oo

Spring Chronicles by nairafee

haiku by Pink-Promise

Selfportrait. 2 by JoanaSorino

macarons by fiegga

What Did You Think?

That concludes the showcase. So now we want to hear from you. What did you think of the photographs that we shared? What was your favorite? Do you know of any other wonderful examples of low saturation photography that we missed? Just drop us a few lines in the comment section and let us know.

(rb)

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.

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.

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:

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 will help us get a better-looking stroke.

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

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:

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.

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.

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:

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:

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:

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 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 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 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:

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

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 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 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.

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 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:

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.

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 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� (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:

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 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:

The settings for the drop-shadow live effect on a Mac. Again, notice the “cut� edges of the shadow.

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.

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:

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.

Folder icon

UI for a date picker

“Free� icon

Icons for an FAQ

Envelope icon

Monochrome icon set

Kickoff teaser icon

Email account icons

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

• Video tutorials, Rogie King, Komodo Media
• Fw PNG Week (Fireworks PNG files for downloading and learning), Craig Erskine
• “I Didn’t Know Fireworks Could Do That!â€� (video presentation and tutorial), Dave Hogue, from Adobe’s MAX 2011 conference
• “Design Learning Guide for Fireworks: Using the Path Panel,â€� Tommi West, Adobe Developer Connection
• Rapid Fire (Fireworks tutorials), Jose Olarte

(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.