So why is Fireworks so much better? Because it does it all, and it does it well. Fireworks is an application in a category all its own. It is essentially a hybrid of Illustrator (vector tools), Photoshop (bitmap tools), InDesign (master pages and layout tools), and Flash (symbols and animation tools). You can easily import Illustrator artwork or native Photoshop files with filters and layers. It exports working CSS and HTML, integrates beautifully with Dreamweaver, and you can even do round-trip editing of graphics. Fireworks is by far the fastest, easiest and best way to make a clickable prototype, and then later turn that prototype into working CSS and HTML. (Read more about what makes it great)

So why haven’t you heard of it? Unfortunately, Fireworks hasn’t had the PR behind it like other applications have– namely, Photoshop and Illustrator. Most designers are comfortable using tools they already have and know, and so there’s the inertia problem. Also, recent versions of Fireworks, since Adobe took it over from Macromedia, have been plagued with some bugs and instability problems.  But despite all that, I really think it behooves all web designers to give it a try.

Yesterday I taught a Fireworks class to the art department of a large financial services firm here in Dallas. Having worked with them for several years on web projects, I’ve gotten to know their processes pretty well, and have been dying to help them update their workflow. So I was excited when they asked me for help.

This art department had been doing all their mockups in Illustrator, then exporting the files as PDFs to show their clients for approval. It was a tedious process. There were several problems with this method:

• Illustrator is vector-based, not pixel-based, which means that it is very hard to know if your fonts are too small to be legible on the web. You can’t make things pixel-perfect with Illustrator. Inevitably, you think you can squeeze more on the web page than you really can.
• Illustrator doesn’t support multiple pages, so you have to rig up layers to act like pages, and go through a tricky process of turning layers on and off to show and hide certain things. Either that, or you need to have a separate document for each page of your website. Very clunky.
• You can’t export multi-page PDF prototypes from Illustrator. You’d have to export individual PDFs, then link them together manually.

The goal of our first training class was to introduce them to the best tool for the job – Fireworks -  and show them how to make a multi-page prototype with it. I walked them through the basics of how to use the drawing and text tools (most of which are similar to what they already use in other Adobe apps), how to set up pages and master pages, and how to create a clickable PDF prototype using hotspots that link to the pages.

It wasn’t a hard transition for them, having used other Adobe apps. After a couple of hours, they were clicking along at a good pace, and pretty fired up to start building all their pages in Fireworks. We were able to copy and paste lots of page elements straight from Illustrator into Fireworks. (One thing that doesn’t copy well is an open shape with a gradient. You have to close the shape to copy the gradient.) I showed them how to set up a master page template, how to use the HTML components to mimic form input fields, and how to organize the page so that it’s easy to work in tandem.

After we went through the process of designing a prototype, I set them up to use Acrobat Commenting with my server, so that they can gradually get their bosses used to adding their feedback that way. Right now, they tend to have very long phone or in-person meetings, and write all their changes on paper. Ugh. My next goal is to convert them to an Adobe PDF proofing workflow, like I use with other clients. (But that’s the subject for another post.)

If you’re interested in learning more about Fireworks, here’s a short list of free resources:

Rapid prototyping tutorials

• http://www.photoshopsupport.com/photoshop-blog/08/10-cs4/fireworks-cs4-web-design-prototyping-video.html
• http://www.guuui.com/posting.php?id=2112

Miscellaneous tutorials

• http://www.layersmagazine.com/category/tutorials/fireworks
• http://www.adobe.com/devnet/fireworks/
• http://www.adobe.com/devnet/fireworks/?view=gettingstarted

(If your company can spring for a monthly membership to Lynda.com, I’d highly recommend that too. )

Other Fireworks resources

• Fireworks Exchange – has lots of useful free add-ons for Fireworks:Adobe forums - a community of Fireworks users
• Gurus Unleashed
• Fireworks Ning forum
• Why choose fireworks?- a good article covering the benefits of Fireworks

It’s fun introducing people to an awesome tool they never even knew existed. I could see the lightbulbs going on when my client realized how much better it is than Illustrator for website mockups and interactive prototypes.

If you’re in the Dallas area and your art department needs some help in learning Fireworks or making your workflow more efficient, contact me.

A desperate cry for help

Underlining is an antiquated holdover from the typewriter age. Before we had computers, underlining was the only typographic tool we had to give text emphasis. But now we have so many better options: italics, bold, a different font, size, or color. Not only are these other options better looking; they are also better for readability.

The problem with underlines

There are several very good reasons to avoid underlines:

• Underlines introduce another element into the design – the line -  which draws attention to itself at the expense of the other more important items on the page. This is especially problematic when you underline an entire headline rather than a couple of words. The strong horizontal line shrieks for attention and drowns out the other “voices” on the page.
• It indicates a lack of sophistication. Underlines are long, loud, artless and clunky, and reek of low budgets and amateurism.
• It looks low-tech. If you’re going for a retro look, fine. But if you’re trying to look clean and modern, don’t use underlines.
• On the Web, underlines indicate hyperlinks. When you underline for attention, it only serves to confuse and annoy your web visitors when they try to click and nothing happens.

But I want my text to really stand out. What should I use instead of an underline?

You’ve got several good choices, depending on how you want the text to sound. It’s best to use only one text attribute to differentiate it from the surrounding text. You don’t need to use bold and italics and all caps. Pick one: it looks better and has exactly the same effect.

Italics
If you use italics, that slows down the reading speed of the sentence, which gives it extra emphasis. But it doesn’t make it louder. It’s like leaning into a microphone, making eye contact with your audience, and saying something important.

Bold
Bold text is “louder” than italics, like a firm, confident voice. It has the advantage over italics of being instantly scannable. If you scan down a page, the bold will jump out at you first. (Just make sure not to overdo a single paragraph with too much bold, or you’ll hurt legibility and make none of it “pop.”)

ALL CAPS
Capital letters shout loudest. All caps in a short headline can be quite sophisticated, as long as you use a good typeface that behaves nicely and doesn’t overwhelm. But using all caps in the middle of a sentence is harder to pull off: it looks casual, so it’s not recommended in corporate materials. Using all caps in the middle of a sentence is equivalent to ANIMATEDLY RAISING YOUR VOICE, LIKE AN EXCITABLE TEEN!!! It can come across as amateurish and not very credible. Don’t set long sentence in all caps: it is very hard to read.

Color
Color is another way to differentiate text. But be careful: 5% of the overall population suffers from some form of colorblindness, so make sure that you’re not too dependent on color for your message. Visicheck is a useful website to see what your design will look like to a person with various types of colorblindness.

Extra space.

Giving a headline more air above and below makes it appear more important, and also more confident. It doesn’t need to shout, because it knows it is important enough to be heard. (Watch for a future post on the importance of white space in design.)

L E T T E R S P A C I N G
When you put extra space between each letters and set them in all caps, it can makes your text look quite elegant. And rather than shouting, as close-set letters do, it gives your text more of a stately, important look.

You’ll be surprised how much better your design will look when you stop using underlines. There’s really no excuse for it to exist in the modern world, outside of website hyperlinks (and even then, underlining text may not always be the best idea.) So don’t commit a typographical faux pas: ditch the underline.

Unfortunately, it doesn’t work that way. What you can see on your screen and what you can print are totally different things. Your monitor is showing colors in the form of light, and print is showing colors in the form of physical ink on paper. When you print your identity materials, it’s important to understand a few basic things about color, so that you always know what to expect.

It is inevitable that colors will look different depending on the medium.

It’s extremely important to spend time selecting the colors that work best for each usage. Our purpose as designers is to help you select colors that are going to look more or less the same, whether you’re printing on paper, plastic, fabric, using embroidery threads, or viewing it on the web. I say “more or less” because it is physically impossible to make a color look the same across the board. There are simply too many physical differences between the various types of media.

And to complicate matters even further, what you see on your monitor may be very different from what someone else sees on their monitor… it all depends on the “gamma” (brightness and contrast) of the particular make and model of your monitor, not to mention your specific monitor’s settings, the brightness of the room you’re in, your own ability to perceive color (did you know that some form of colorblindness affects up to 10% of the overall popuplation?)… you get the idea. There are many factors that go into color perception.

Printing has a ton of variables which affect color perception, too. If you print on grey or cream-colored paper, that will change the color. if you print on coated (glossy) paper, your colors tend to be brighter. Uncoated (matte) paper will absorb more ink and make the colors look a little bit duller. And when you print on vinyl, plexiglass or plastic (like for signage), the inks are totally different because they are thick and viscous, as opposed to the watery translucent inks typically used for printing on regular paper.

Long story short: the color you see on your laptop screen when you’re approving your final logo is merely an approximation (and sometimes, not a very good one) of what your logo will look like in the real world.

Okay, now that we understand that the closest you can get is “pretty close,” , here’s a brief explanation of the different kinds of color that we designers will help you specify for your logo:

Spot Color (for print)

(a.k.a. “Pantone” or “PMS” – stands for “Pantone Matching System”). This refers to a specially mixed ink that is used on things like letterhead and business cards. Typically, whenever you are printing your identity materials at a local traditional printshop, they will print with spot color.

Spot color is the most accurate kind of color for printing, because the printer specially mixes the inks according to an exact recipe as specified in the Pantone book. To pick your spot color, you need to look at a printer’s Pantone swatchbook that matches the type of paper you will be printing on– either coated (glossy) or uncoated (matte). The printer’s job is to make sure that the color they print matches the color in the Pantone book as close as possible.

Your paper color and paper brightness will have an effect on what the PMS ink looks like. So if you’re printing on a colored stock, it’s a good idea to get a sample first.

Pantone colors are typically specified like this: “PMS 109″.

Side note: did you know that the 2009 color of the year is a gold called “Mimosa”?

Process Color (for print)

(a.k.a. “CMYK” – “Cyan/Magenta/Yellow/Black”) – a simulated color of ink composed of 4 colors printed with tiny transparent dots of ink. (If you look at a magazine through a “loupe” or magnifying glass, or with the naked eye (if you’re under 35!) , you can see the tiny individual yellow, cyan, magenta and black dots that overlap to create the appearance of a specific color.

Your office inkjet or laser uses CMYK to simulate ink colors, and magazines and other publications use CMYK when they print. You will use this format to send your logo to publications.

CMYK color is not nearly as accurate as spot color at representing your logo. Cyan, Magenta and Yellow try their best to represent the colors (Black is generally for darkness rather than color), but those 3 inks can only go so far. If your logo has any bright orange in it, for example, expect it to come out more of a muted pumpkin. It’s impossible to make anything coming close to a bright neon color.

RGB Color (for web)

(stands for “Red Green Blue”) – this is for colors you see on a video monitor. These colors are made up of 3 main colors of light that mix to form other colors. You will use RGB colors whenever your logo is intended to be viewed on a monitor– a Powerpoint presentation, a website, etc.

Different monitors may display your RGB logo drastically different. When you are projecting a Powerpoint version of your logo onto a wall or screen, for example, it may look totally different than what you expect, based on the type of projector you’re using and what computer you’re viewing it with.

You just have to accept the fact that your logo is going to look different depending on the equipment you’re using. What I see on my monitor and what you see on yours aren’t the same. And you will never know what other people will see on their monitors. So you just get as close as you can.

Color conversion resources

Color Codes Matching Chart – shows an approximation of the Pantone color and its RGB equivalent

RGB to Pantone tool – displays the closest Pantone number to your RGB numbers.

Before I explain the various file formats, I need to explain something extremely important:

Vector vs. Bitmap

Notice the visible pixels (squares) in the enlarged bitmap.

These are the basic 2 flavors of file formats. Vector formats are “resolution independent”:  that means it can be scaled as big or small as you want, and the lines will always be crisp and sharp. Bitmap formats are “resolution dependent,” meaning that you can’t scale them larger, or they will start to look choppy.

A vector file is created with flexible points that use math to shape the lines. Think of the lines as stretchable rubber bands. If you increase the size, it’ll keep its shape but just get bigger. A bitmap file, on the other hand, is like a mosaic of tiny squares, called “pixels.” If you zoom way in, you will see the squares even bigger, and it won’t look good.

You should ALWAYS keep a copy of your logo in a Vector format, because there will often be occasions when you need your logo to be printed at a very large size—on your storefront sign, on tradeshow banners, etc.

Also, your printer and web designers will always need a vector version of your logo for anything they do (letterhead, business cards, websites, etc.).

Okay, now that you understand the difference between vector and bitmap, onto the file formats:

File Formats

1. WMF or EMF

(”Windows Metafile”) or EMF (”Enhanced Metafile”) – either of these formats are what you’ll use in Office applications like Word, Powerpoint, or Excel if you want to show them on screen or print them on your office printer. Characteristics are:

• Scalable vector. You can make them as big as you want and they won’t get blurry.
• Can support transparent backgrounds.
• Color type: RGB

What’s the difference between WMF and EMF? EMF tends to display curves more smoothly, and is generally the better choice for office applications. But WMF is most commonly supported.

2. EPS

(”Encapsulated Postscript”) – Use this format for sending to a commercial printer, a sign maker, a publication, or anyplace else that needs a professional-level file. Confusingly, EPS can come in 2 different flavors: “vector” or “bitmap.” The EPS files I provide you are always vector. Characteristics of vector-format EPS files are:

• Scalable vector.
• Can be any type of color (RGB, CMYK or Spot) – I will give you CMYK and Spot for your logo.
• Can support transparent backgrounds.

Don’t try to use EPS in Office applications– they tend to have trouble, and make non-postscript printers–the type you most likely have in your office–choke.

3. GIF

(“Graphics Interchange Format”) – Use this format for web logos with solid colors. Characteristics of GIFs:

• NOT scalable (bitmap format).
• Can support transparent backgrounds… BUT the transparent background has to be “antialiased” (smoothly transitioned in an art program like Photoshop) against whatever the background is that it will sit on top of, or you’ll see unattractive jaggies around the logo
• Flat, solid colors look crisp and compress to a tiny file size without “artifacting” (showing chunks of color in the solid areas), which is why this is best for web use
• Color type: RGB
• Can support animation

4. JPG (JPEG)

(“Joint Photographic Expert Group”) – Use this for the web when your logo has gradations, or on miscellaneous applications that don’t support WMF/EMF or GIF. Characteristics of a JPG:

• NOT scalable (bitmap format).
• can’t support transparent backgrounds
• RGB format (also supports CMYK but that’s not really relevant here)
• Best format for photographs or things with lots of shades of color, but not ideal for flat, solid colors like your logo, because you will sometimes see “artifacting” (chunks of color)  in the solid areas.
• “Lossy” format – meaning that the more you open it up and save it, the more quality it loses.

5. PNG

(“Portable Network Graphics”) – This is like the next-generation lovechild of GIF and JPG.
Characteristics of a PNG:

• NOT scalable (UNLESS it’s a vector-format PNG which, confusingly, happens to be the native file format of Adobe Fireworks)
• Supports transparent backgrounds and also semi-transparent colors like dropshadows
• Color type: RGB
• It supports more colors than a GIF, supports transparency, but its transparency isn’t supported by Internet Explorer 6 and earlier. So if you have an audience using old technology, that could be a problem.

I usually don’t deliver the png format because it’s not 100% supported on all browsers. However, that will likely change during 2009 as Explorer 6 gets phased out, and I’ll probably start shipping PNG files in place of GIF an JPG.

6. TIFF

You probably never need to use a TIFF for your logo when you have EPS at your disposal. This is intended for hi-res printing, but it’s not as good as EPS for logos because it isn’t vector. Characteristics of a TIFF:

• NOT scalable (bitmap format)
• Can support transparent backgrounds through alpha channels or clipping paths (added in Photoshop)
• Color type: RGB or CMYK

You should never have a need for a TIFF file for your logo, so I don’t deliver this format to you.

I hope this summary helps you to know which format to use for which purposes. I’ll be explaining the color type differences in another post. Leave me a comment below if you have any questions!

For all you designers out there who are getting tired (like I was) of always creating the same document over and over for your website design, here’s a Photoshop template to make things a little easier. This document has a layer group which includes white masks for all the most common monitor resolutions, organized in descending order of popularity. You can enable visibiity of each layer to make sure that your background images show up properly at the most popular resolutions.

Instructions:

1. Download the Monitor Resolutions Guide (Photoshop format)
2. Copy the Monitor Resolutions layer to the top layer of your Photoshop document. (Or if you’re starting your design from scratch, create a new layer in this document below the Resolutions layer.)
3. Enable the layer for each resolution size that you want to check. Depending on your design, you may want to create a mask with a gaussian blur on the edges so that your design gradually fades into your background page color.

Another helpful tool: If you want to see how your site appears in various resolutions, check out the Web page Screen Resoution Simulator.