Ten secrets to attract clients and increase your income

When it comes to small businesses and freelancing, there’s no shortage of business books on the market. They cover all the traditional, important stuff about business plans and tried-and-true marketing campaigns. That’s not what this article is about. Instead, this is a collection of key ideas about street-smart marketing and good ways to make money. And even though these ideas were intended for designers and photographers, they should work for all kinds of small businesses.

As the Executive Director of the National Association of Photoshop Professionals (NAPP), I talk to lots of freelance photographers and designers who are just getting started or who are having tough times. Many of them ask for advice. This article is based on some of the things I share with these folks, and I know these things work because I’ve been there and I’ve tried them.

On the surface, you may have heard of some, if not all, of the following ideas, but make sure you read beyond the titles because there are secrets hidden in each of the ten that people often miss.

1. Decide where you want to be in the marketplace: And then design your materials, packages, and your attitude to fit that image. Also consider basing your image on the kind of clients you’d like to have.

The obvious, easiest place to position yourself in the marketplace is to compete on price, but this introduces a couple of major problems. The first and biggest problem is that you have to do a lot more work to match the income of someone working at higher prices. And when you’re not working on a paid project, you’re usually scrambling to find more work. You simply won’t have the luxury of time to ever give your clients an extra photo treatment they didn’t ask for, or one or two additional logo options. Those extras make clients happy and loyal.

The other big problem is that it’s hard to ever raise your prices. If your clients view you as the low-price provider (because that’s how you’ve marketed yourself) then anyone with a lower price is going to take your business. There’s very little loyalty when a client makes decisions based primarily on price. And there’s no shortage of people willing to do what you do for less money.

2. Offer something truly unique: Special services, unique products, and cutting-edge design will help you stand out from the crowd. The added bonus is that if you’re doing something no one else is doing, you set the price for it. Maybe your special something is a type of graphic border you do on your work. Maybe it’s one of your output offerings (like photo books, wall clings, canvas wraps, printing on crystal, etc.). The point here isn’t what you should be offering, but that you should make yourself fully aware of all the latest looks and trends, and stay ahead of the pack. And you’ll need to constantly research your industry to stay in the lead, because your competition is sure to start copying what you do as soon as they learn how.

For example, if you’re a photographer, there are some popular “looks” that can put you out in front of your competition. One of those looks (though it’s coming to the end of its cutting-edge status these days) is high dynamic range (HDR) photography or even simulated HDR. Most people buying photography think HDR looks amazing. They’re even willing to pay a premium for it. If you’re a photographer or designer who uses photography, and you don’t offer HDR or simulated HDR, do it today while there’s still time!

3. Be seen as an expert and get out there: Make presentations at the chamber of commerce, Kiwanis and Rotary lunches, business clubs, the local library, or wherever you can find an audience.

This should not be a sales pitch. In fact, many clubs even prohibit or strongly discourage sales pitches at their meetings, so don’t talk price or packages. Your presentation should be an informative overview that tells people what you do and gives them some insight into your craft. Try to make it interesting. Funny and self-deprecating is good too. Your primary goal is to be seen as an expert so that anybody who might be looking for your services will think of you. And if you’re shy about public speaking, start by joining a local Toastmasters to get used to being in front of people, and then do some presentations at middle schools until you’re comfortable talking to a crowd.
Next, make sure you’ve got a compelling topic and title. Something like, “The Secrets of Good Design” is kind of lame and folks will fall asleep just reading the title. But if your program is “The Top Five Things Designers Never Tell their Clients,” you’ll hook them. The added bonus of having a list of five or ten things is it’s unlikely that the host will cut you off because the meeting is running over a couple of minutes.
And if you want to add that extra punch to your presentation, hand out a nice, professionally designed card that has the main points of your presentation, along with blank lines for them to take notes during your talk. People who follow along and write things down on the card are much more likely to take that card when they leave than if you just passed out business cards. And, of course, you have all your contact information strategically on your lecture card.

4. Do some charitable work, both strategically and altruistically: Most people understand right away why they should do strategic charitable work. Everybody wants to be seen giving to charity and lots of corporate folks who make purchase decisions also participate in charitable work as volunteers. If your charitable gift is a designed poster or a large, meaningful framed photograph you shot, you have strategically given in a way that your gift is potentially both a tax write-off and an advertisement.

But you should give altruistically as well. Pick a charity you believe in and give monetarily, volunteer time, or donate your professional work—or all of these. In my decades in business I’ve discovered that almost everyone prefers to do business with people they like. There are exceptions, but they’re rare. Truly giving, when you expect nothing in return, can quite possibly open some doors you never expected to walk through. And the worst that could happen is that you’ll actually help someone in need.

5. Work really hard, work really smart, get really busy, then dump some clients: Okay, you don’t really dump them but hand them off to someone else.
If you pick up almost any book on business, you’ll find a reference to the “80/20 Rule.” Essentially, it says that 80% of your income will come from 20% of your clients. This means that you should work extra hard to keep those special clients happy and well served. One of the best ways to do this is to pass some of your least income-producing, most time-intensive clients off to others in your industry. If you do the handoff right, both your former clients and your competitors (who now have new clients, thanks to you) now like you, and you have more free time to chase and serve better income-producing clients.
And it usually turns out that most of the clients who pay a little more for professional work tend to treat you more like a professional. In my experience, 80% of my headaches and complaints came from the bottom 20% of my clients, and all too often, those were the clients I got as a result of being a low-price bidder. It’s good to put those clients behind you whenever you can.

6. Have a great website (but remember, not everyone sees your site the way you do): These days, if you’re a freelance designer or photographer and you don’t have a great Web-based portfolio, you’re immediately cutting your potential market in half, or worse. No excuses, you’ve got to have a great portfolio online. All your competition does.

The problem with an online presence is that everybody has one (so you’re not unique) and an even bigger issue is that the computer your prospective client is using to view your website, often stinks. Most cool portfolios are Flash-based and I have yet to see a Flash-based portfolio that runs as fast as a busy ad agency exec would like to flip through the images.

Remember that thing earlier about offering something extra or unique? It applies here too. Imagine that the typical ad agency exec in charge of hiring photographers has just a few minutes to look at your work. Sure, they’re used to looking at websites, and if that’s what they prefer, you should have something for them to view. But if you also had a coffee-table-style hardback book of your images to give to your possible client, now you stand head-and-shoulders above the crowd. Not just a portfolio with prints shoved in sheet protectors; I’m talking about a thoughtfully designed book with subtle marketing messages and all your contact information on the cover. The book will sit on their desk after you leave, even when they’re reviewing other portfolios online. It might even go home with them one evening.
These books can be created affordably at Mpix, Apple, Blurb, or any of a dozen places online, and they add a dimension and presence to your work that a website alone can’t touch. This might just be the extra advantage you need.

7. Enter contests so you can be an award-winning designer or photographer: Don’t enter for the prizes, because the goal is to win awards; the prizes are just a little bonus.

People want to hire proven experts. Ironically, it doesn’t matter if your awards are local or from some industry-related magazine or website. The point is that you’ve won awards for your work. This puts clients at ease because they know your work has been recognized by industry experts. Do you think clients would rather hire Angela Harrison, Designer, or Award-Winning Designer, Angela Harrison?

And if you want to take this a step further, join a national association, take a couple of classes and some tests, and then add some abbreviated credentials to your business card and marketing materials.

8. Hang out with professionals (in other industries): Sure, if you’re a designer, you might join the local advertising or PR club. If you’re a photographer you’ll probably find yourself attending some rubber-chicken dinners at the local photography club. That’s almost a given. But there’s an equally large benefit to joining a group or two of local professionals outside your industry. They might become prospects, or they might not. But if you have a couple of business-smart friends, you can ask them for their views on things happening outside of your industry—a lot of times you can use this information to get ahead of people that have become “stuck” in your industry. There’s definitely value to these professional meetings, as they keep your finger on the pulse of more than just your industry.

9. Use templates, actions, and any other tools you can get your hands on to streamline your workflow: The key is getting the maximum possible work done in the least amount of time.

I often talk to people who want to learn how to do various effects directly in Photoshop without using any plug-in software. That’s fine if your goal is the knowledge itself. But if the goal is to save money so you don’t have to buy the plug-ins in the first place, let’s consider the time saving of the plug-in vs. the investment cost.

For instance, there’s a great plug-in on the market for softening and smoothing skin called Portraiture from Imagenomic (www.imagenomic.com). I found a setting that does exactly what I want and it does it consistently in just 10 to 20 seconds. I know how to do this in Photoshop but it takes me about 10–15 minutes, depending on the image. Even if you’re really fast at something like this in Photoshop and this plug-in only saves you around four or five minutes per image, it can still pay for itself in no time at all.

And it’s not just plug-ins. There are full-blown design templates, special effects, and collections of actions that can all speed up your workflow. Consider what you spend most of your time doing repetitively, and then see if there’s a template or an action that can do it for you.

10. When it comes to business advice, take what you want and leave the rest: This is one of the best pieces of advice I was ever given. If some of the advice you just read doesn’t make sense to you, ignore it. Do what works for you.
The important thing to remember is that very few people actually have an entrepreneurial mind. I can’t tell you how many times I shared business ideas with friends and family and they responded with all the reasons it wouldn’t work, only to discover later that I was right and my ideas actually did work.

Don’t get me wrong, your friends and family are the people who really want you to succeed. They have your best interests at heart and they don’t want to see you get hurt or be disappointed. They’re just telling you that they wouldn’t do what you have in mind because they don’t understand it. Don’t be discouraged and don’t get angry. In fact, it’s not always a good idea to try to explain things fully and try to convince them. Sometimes you just have to go ahead and show them that you can do it.

There are three kinds of dashes: hyphens, en dashes, and em dashes. The first two of these are often used incorrectly as stand-ins for minus signs, so we’ll draw that math operator into the discussion as well.

Dashes are nearly always set “closed up”; without any space before or after. A couple of exceptions are noted below, but in other cases you’re free to adjust kerning before and after dashes.

What does a hyphen do?
Hyphens play two roles: They link words in compound constructions and mark the division of single words at the end of a line. That’s all! The only time you see a hyphen followed by a space is in construction such as “pre- and post-manufacturing waste.” A hyphen should never appear at the beginning of a line, although you often see this on webpages because browsers have such poor type composition engines.

There are two kinds of hyphens: hard and soft. A hard hyphen is one you type from the keyboard and it’s a permanent part of the text stream. A soft, or discretionary, hyphen appears only when needed; for example, when your word processor or typesetting program is composing type, it inserts soft hyphens where words have to be divided at the end of a line. If the text re-rags, those hyphens disappear.

If you want to coax a line to break at a certain point—to create a better rag, for example, or to hyphenate a word your program doesn’t recognize—you can insert a soft hyphen yourself. In InDesign, the keyboard command for a soft hyphen is Command-Shift-– (PC: Ctrl-Shift-–). Note: You can also choose Type>Insert Special Character>Hyphens and Dashes to place a soft hyphen, but that’s too much work.

Don’t use a hard hyphen to force a word to divide because if the text reflows, that hyphen will reflow with it, appearing someplace you don’t want it. This is a very common mistake.

What’s an en dash?
The en dash is one en—that is, half an em—wide. Its job is always to connect. Use en dashes for a range of numbers, such as “pages 46–52” or “the years 1227–1308.” They’re also used like hyphens in compound constructions that would otherwise need multiple hyphens. For example, instead of “pre-Revolutionary-War years,” you’d use a single en dash to indicate the compound modifier: “pre–Revolutionary War years.”

To set an en dash, type Option-– (PC: Alt-0150 using the numeric keypad).

En dashes, like hyphens, are always set closed up. And while an en dash can end a line, it shouldn’t start one. Most text-processing software takes care of this automatically, but you can run afoul of the rule when breaking lines manually.

And the em dash?
Em dashes are a full em wide, and as such, many people find them too big. Nevertheless, they have a specific role to play—to separate—and this explains their size. They’re used in a manner similar to parentheses, to separate one thought from another or to insert an aside into the middle of a sentence, as in the previous sentence. Despite their grammatical role of separating, typographically speaking, they’re often referred to as “joining em rules.”

To set an em dash, type Shift-Option-– (PC: Alt-0151). Em dashes can end or start a line.

In most text typefaces, em dashes have no side bearings, which make them appear very close to the words they separate. If this bugs you, feel free to add some kerning space around them, but don’t add too much. (To judge if the em dash in a given typeface has side bearings, place the text cursor next to the dash and see if there’s a small gap between the cursor and the dash.) The maximum space I’d recommend in these cases is a hair space (Type>Insert White Space>Hair Space). Or you can just manually kern open a small gap before and after the dash.

Note: An en dash flanked by word spaces isn’t a good substitute for an em dash. It does create a break between words that’s an em wide (a word space being a quarter of an em wide) but the dash looks too wimpy floating in all that space.

There’s also a character called a “punctuating em dash” that’s slightly shorter than a normal em dash and with generous side bearings. Unfortunately, it’s rarer than hen’s teeth; it deserves to be more popular. True type maniacs can fake a punctuating em dash by adding two hair spaces before and two after an em dash and then using the Horizontal Scale tool in the Character panel to decrease the em dash’s width to 75%.

Here’s an example of a typeface where the em dashes have no side bearings, so they hew closely to the characters around them. For more generous spacing, you can use—or, more likely, create—a punctuating em dash. Make sure you select only the em dash to avoid resizing the hair spaces as well. Nice effect and a major hassle, this is only for the devout type lover.

Minus signs
The minus sign is a distinct character with its own width and weight. There’s no substitute for a proper minus sign. In our example, the top sample uses a hyphen—too short; the middle one uses an en dash—close, but badly spaced; and the bottom one—just right—is the hyphen character.

The hyphen exists in nearly all text fonts, including old PostScript Type 1, but Adobe applications make it hard to access. To find it, open the Glyphs panel (Type>Glyphs), and in the Show pop-up menu, select Math Symbols. You can’t miss it—it’s the only one that looks like a minus sign.

If you don’t see the hyphen there, it doesn’t exist in that font; but you can make sure it displays in the rank of Recently Used glyphs across the top of the panel from a font that does contain that glyph. Alternatively, you can add it to a custom Glyph Set that you can create from the Glyphs panel menu. Having a custom glyph set of similar, hard-to-find characters will save you lots of time later on.

Problems on the Web
Websites tend to use lowest–common denominator (note that en dash) HTML code for compatibility with all browsers and all computers. For this reason, webpages may display many so-called “special” characters incorrectly. Unfortunately, this includes en and em dashes as well as minus signs.

Most Web designers have come to avoid these troublesome characters, so it has become standard, sorry practice in text destined for the Web to substitute hyphens for en dashes and to use double hyphens (–) for em dashes. Minus signs are typically faked using hyphens. These are old typewriter conventions, dating to the days when the only characters you could type were those printed on the keyboard (plus lowercase letters a–z [another en dash!]).

Some day this will get squared away—when all computer systems are Unicode savvy—but that day hasn’t arrived yet.

People are consuming information much differently these days and it’s your responsibility to make sure your content is available for the most popular forms of consumption. Here, we’ll take a look at distributing content through everything from Zinio to Amazon’s Kindle to Apple’s iPhone.

Personally, I’ve been a fan of the “digital movement” for years and I believe that Adobe has realized that while print is king, the future is digital. Some will argue that paper will never go away and I’m not going to get into that debate. But if you take a look around, you’ll find a growing trend of content moving more to electronic delivery—as opposed to print.

The move to digital began with the Worldwide Web in 1993. Every company that mattered scrambled to get their websites up so they could put their information, brochures, product information, etc. on the Web and customers could just go there to get it. In theory, this meant less printing. For example, look at tradeshows today: There was a time when you could go to a vendor’s booth and pick up literature; now, at best, you’ll get a postcard-sized document that points to all the Web resources.

Today, it’s all about mobile devices but it’s estimated that in just a few short years, more people will be using mobile devices, such as cell phones, rather than using computers to access the Internet. This has a tremendous impact on the way we design our content for the Web. And it means that content needs to be designed for other forms of delivery, too.

eBook readers

Let’s take a look at the successes and failures of eBook readers. I remember when eBook readers first hit the scene. They were all the rage; but like most new technology, if no one steps up and creates a standard that everyone can adopt, consumers don’t feel comfortable investing a lot of money or time into something that could be obsolete within a year. So eBook readers fell off the map for a while after the initial introduction.

Then Amazon introduced the Kindle. Being the largest online retailer in the world carries a lot of weight, which meant that, whether we want to believe it or not, Kindle’s format became the “standard.” The question really boils down to: Which format is going to last the test of time? Amazon isn’t going away anytime soon, so if I buy a Kindle, I can feel pretty comfortable that I’ll be able to enjoy my book collection in this format for years to come.

Amazon also realized that while they have a popular eBook device, it’s really a one-trick pony: You have to be really committed to buying one of these devices because all the device will do for you is allow you to read the books you download or the PDFs you put on it. Sure you can get newspaper subscriptions and such, but this device isn’t going to replace other devices that you already carry.

It was smart of Amazon, therefore, to make a Kindle app for the iPhone. There’s no arguing the success of the iPhone; just take a look at the ever-increasing number of users. This helps convince people like you to publish in eBook format, because there will be a potentially larger audience if the format can be read on more devices than just the Kindle.

Using eBook readers

I’m the first to admit that I’m not a book reader. I don’t buy novels; however, I do read how-to books, such as Scott Kelby’s Digital Photography Book series. I love them and have read them from cover to cover. But that doesn’t mean I’m going to remember all of the techniques that Scott covers. I like to use the books for reference but I don’t want to carry around the physical copies; instead, I have them in Kindle format on my iPhone using the free Kindle app. When I’m shooting and thinking, “How did Scott say that I should set my camera for this?” I can pull out my iPhone and go right to the bookmark for that page.

Now address this same concept for magazines. You know there was a technique or an article that really interested you last year in Popular Photography & Imaging. Do you still have that issue? Do you know where it is? Do you remember which one it was? Zinio.com aims to put all of this info at your fingertips by allowing you to buy subscriptions to your favorite magazines online. Then, not only will you be able to read them, you can also search them for topics. Zinio is Flash-based and offers a reading experience that I like. Rather than reformatting the publication in boring black-and-white text (like Kindle does), it represents the publication exactly the way it looks, or would look printed.

Where does Adobe fit?

All right, now it’s time to talk about Adobe’s answers to this “going-digital” transition and what makes sense for you. For the last decade, Adobe has been working on solutions for going digital, starting with the Adobe PDF format back in 1993. Think about this: PDF is already the standard for electronic delivery of information and has helped us toward going paperless already.

With each new version of the PDF format, we can do more to provide our clients or customers with engaging experiences. With Acrobat 9, for example, you can even do Flash inside PDFs. So if you’re making PDFs today, you’re already on your way.

Amazon recognizes that customers want to read their PDFs on as many devices as possible so, with the introduction of the Kindle DX, they’ve included PDF support. In addition, you can view PDFs on your iPhone and iPod touch and many of the Sony eBook readers also handle PDFs.

When PDF isn’t enough

Adobe also has another reader called “Digital Editions,” and supports a file format known as EPUB, designed specifically for the distribution of books and other protected content. Adobe Digital Editions is a free, lightweight, eBook reading application for Mac and Windows. EPUB (created by the International Digital Forum, to which Adobe belongs) is a reflow-centric XHTML-based eBook format.

If you’re scratching your head and wondering why EPUB and not PDF, think about it this way: In the Zinio.com example mentioned above, I liked the fact that the magazines look exactly like the printed version, and that’s how a PDF works. It looks exactly like the original document from which it was created. If, however, layout is less important than the content (text), especially on a portable device, that’s where EPUB fits. EPUBs reflow to fit the screen on which they’re being viewed, while PDFs have to be zoomed and panned on small screens to be read effectively.

In addition, although you can certainly secure a PDF with a password, that’s not enough for content or book publishers who are selling their work electronically. You don’t want someone buying your book online and then simply posting the password on a website for the world to see (and perhaps pirate your work). Through Adobe Content Server 4 (www.adobe.com/products/contentserver), EPUBs can be tied to a specific account via Digital Rights Management.

You can even electronically “share” your book with others, although, while it’s being shared, you can’t read it. Once the sharing expiration date has passed, the person you shared it with doesn’t have to “return” your book; they just can’t read it anymore.

As you can see, the EPUB format offers many advantages over PDF, depending on the content that you’re publishing and your intended audience.

It’s all about the tools, man

Now that we’ve talked about the trends and the technology, let’s talk about the tools you’ll need to publish in these formats. The good news is that you can probably use the tools you’re already using. In InDesign CS4, for example, you’re already there: You can export to PDF as you always have and you can also export for Digital Editions (.epub) right from the File menu. At this point, anyone with Adobe Digital Editions can read your EPUB file. In addition, anyone with a mobile device that uses the Adobe Reader Mobile 9 SDK, can also read your files. (For a list of these devices, visit www.adobe.com/products/digitaleditions/devices.)

Well that was easy. But what about Kindle’s format? Although InDesign doesn’t export directly to Kindle’s eBook format, you can download a free conversion utility called Calibre at http://calibre.kovidgoyal.net/download that will convert your InDesign exported EPUB files to MOBI files, which can then be imported and read on a Kindle device.

Digital Editions

Let’s take a closer look at exporting your files to the EPUB format by running through the settings in the Digital Editions Export Options dialog. If you’re working with a long document with an expected final file size more than 300 KB that you intend to display on a device, you’ll first want to separate each chapter into a separate InDesign document. To export all the chapters into the same EPUB document, start by creating an InDesign book (File>New>Book). From there, add the individual chapters using the Book panel (which automati¬cally appears when working with a book), and then select Export Book for Digital Editions from the Book panel’s flyout menu.

General category

We’ll start with the options in the General category, then make our way through the Images and Contents options.

Include Document Metadata:
With this option turned on, metadata from the document (or the style source document if an InDesign Book file was selected) is included with the exported file.

Add Publisher Entry:
Use this field to specify the publisher information that appears in the eBook metadata. You may want to specify a URL for the publisher so that someone who receives the eBook can visit the webpage and purchase the eBook.

Base for CSS Styles:
This option determines which text formatting is included in the eBook stylesheet. If you specify Local Formatting, local text formatting is retained in the style, in addition to defined paragraph and character styles. If Defined Styles is selected, the stylesheet includes the defined paragraph and character styles without local formatting. If Style Names Only is selected, the stylesheet contains empty styles.

If your InDesign document contains local formatting (a manually bolded or italicized word without a character style applied to it, for example), make sure you select the Local Formatting option. Local Formatting export is supported in the latest version of InDesign CS4 (v. 6.0.3). If you’re using InDesign CS3, only character styles, paragraph styles, and object styles are preserved during the export.

Bullets:
Select Map to Unordered Lists to convert bullet paragraphs into List items, which are formatted in HTML using the < ul > tag. Select Convert to Text to format using the < p > tag with bullet characters as text.

Numbers:
This determines how numbers are converted in the HTML file. Map to Ordered List converts numbered lists into List items, which are formatted in HTML using the < ol > tag. Map to Static Ordered List converts numbered lists into List items, but assigns a < value > attribute based on the paragraph’s current number in InDesign. Convert to Text converts numbered lists into paragraphs that begin with the paragraph’s current number as text.

Include Embeddable Fonts:
This option includes in the eBook all fonts that are allowed to be embedded. Fonts include embedding bits that determine whether the font is allowed to be embedded. In general, all fonts used in the document will be embedded in the resulting EPUB file. Note that although EPUB supports font embedding, the MOBI format as displayed on the Kindle does not. Consequently, you’ll see the standard Kindle font in your final document when displayed on a Kindle device. In EPUB, OpenType fonts are supported during the export, as are most TrueType fonts—but you should always test to ensure you see the results you expect.

View eBook after Exporting:
Launches the Adobe Digital Editions Reader, if present on your machine. An alert message appears if your system doesn’t have a reader configured to view EPUB documents.

Images category

The Images section of the Digital Editions Export Options dialog includes the following options:

Copy Images:
This drop-down menu determines how images are exported to HTML. Original exports the original image to the eBook. When this option is selected, all other options in the Images category become unavailable. Optimized lets you change settings to determine how the image is exported.

Before entering the Digital Editions Export Options dialog, you’ll want to anchor your images to the relative area to which they belong in the text, or else they may all end up at the beginning or the end of the document. To achieve perfect image positioning, you may need to manually style the EPUB file after export.

Formatted:
Preserves InDesign formatting, such as rotation or scale, as much as possible for Web images. If the Formatted option is checked on, the exported images will be reformatted to the size to which you have scaled them in your InDesign docu¬ment, reducing the file size of the final EPUB file.

Image Conversion:
Lets you choose whether the optimized images in your document are converted to GIF or JPEG. Choose Automatic to let InDesign decide which format to use in each instance.

GIF Options—Palette:
Lets you control how InDesign handles colors when optimizing GIF files. The GIF format uses a limited color palette, which cannot exceed 256 colors.

Choose Adaptive to create a palette using a representative sample of colors in the graphic without any dithering (mixing of small spots of colors to simulate additional colors). Choose Web to create a palette of Web-safe colors that are a subset of Windows and Mac OS system colors. Choose System (Win) or System (Mac) to create a palette using the built-in system color palette. This choice may cause unexpected results.

JPEG Options—Image Quality:
This determines the tradeoff between compression (for smaller file sizes) and image quality for each JPEG image created. Low produces the smallest file and lowest image quality.

JPEG Options—Format Method:
Determines how quickly JPEG graphics display when the file containing the image is opened on the Web. Choose Progressive to make the JPEG images display gradually and in increasing detail as they’re downloaded. (Files created with this option are slightly larger and require more RAM for viewing.) Choose Baseline to make each JPEG file display only after it has been completely downloaded; a placeholder appears in its place until the file displays.

Contents category

The Contents section of the Digital Editions Export Options dialog includes the following options:

Format for EPUB Content: Specify whether you want to use the XHTML or DTBook format.

Include InDesign TOC Entries: Select this option if you want to generate a table of contents on the left side of the eBook. From the TOC Style drop-down menu, specify the TOC style you want to use in the eBook. In InDesign, you can choose Layout>Table of Contents to create a special TOC style for your eBook.

Suppress Automatic Entries for Documents: Select this option if you don’t want the document names to appear in the eBook’s table of contents. This option is especially useful when you’re creating an eBook from the Book panel in InDesign.

Now that you’ve gone through all the settings in the Digital Editions Export Options dialog, you’re ready to click the Export button. Once the EPUB file is ready, simply use the Calibre application mentioned above to convert it to a MOBI file for Kindle. For even more on converting your InDesign files to EPUB and MOBI, plus distributing your eBooks on Amazon.com, visit www.adobe.com/products/indesign/pdfs/indesigntokindle_wp_ue.pdf.

The future of electronic books and magazines
It’s uncertain how long we’ll have paper around, but one thing is for sure: More content is being viewed electronically than on paper. And this trend will only continue with devices like the Kindle and iPhone.

It won’t happen overnight. After all, it’s already been 16 years in the making. I’d dare predict that our kids will have less paper than we did growing up and that their kids may not have any paper documents at all when they’re our age!

Would you like to gain exposure by having your work featured in an international design magazine?
 Of course you would!

The staff at Layers magazine appreciates the time and effort involved in the creative process, no matter how large or small the project. With this in mind, we offer you the opportunity to display your work within the pages of Layers.

Please submit your print, Web, or packaging design (in PDF, JPEG, or EPS format) to Cmain@LayersMagazine.com for consideration. Be sure to include the name of the piece, client name (if applicable), the applications you used, and a Web address where our readers can view more of your work. What are you waiting for? Submit your best work for consideration today!

In the meantime, here are some pieces that we’ve published in past issues of Layers magazine for your enjoyment.

From the January/February 2010 Issue:

Would you like to gain exposure by having your work featured in an international design magazine?
 Of course you would!

The staff at Layers magazine appreciates the time and effort involved in the creative process, no matter how large or small the project. With this in mind, we offer you the opportunity to display your work within the pages of Layers.

Please submit your print, Web, or packaging design (in PDF, JPEG, or EPS format) to Cmain@LayersMagazine.com for consideration. Be sure to include the name of the piece, client name (if applicable), the applications you used, and a Web address where our readers can view more of your work. What are you waiting for? Submit your best work for consideration today!

In the meantime, here are some pieces that we’ve published in past issues of Layers magazine for your enjoyment.

From the November/December 2009 Issue:

Would you like to gain exposure by having your work featured in an international design magazine?
 Of course you would!

The staff at Layers magazine appreciates the time and effort involved in the creative process, no matter how large or small the project. With this in mind, we offer you the opportunity to display your work within the pages of Layers.

Please submit your print, Web, or packaging design (in PDF, JPEG, or EPS format) to Cmain@LayersMagazine.com for consideration. Be sure to include the name of the piece, client name (if applicable), the applications you used, and a Web address where our readers can view more of your work. What are you waiting for? Submit your best work for consideration today!

In the meantime, here are some pieces that we’ve published in past issues of Layers magazine for your enjoyment.

From the July/August 2009 Issue:

Sometimes it’s necessary to use both Illustrator and Photoshop to get a particular effect. There’s some feature in one application that doesn’t exist in the other. And even if it does appear in both, it might work better in one than the other. Take the Warp function for example: In Photoshop you’re limited to four points, eight handles, and three rows and three columns; on the other hand, Illustrator allows you to set the number of rows and columns you need, thus greatly enhancing the amount of distortion you’re capable of producing.

The new 3D functions added to Photoshop Extended allow you to create and alter a variety of incredible shapes but one function that’s lacking is a “lathing” tool—allowing you to create a cross section of a shape and have it revolve to form an entire shape. In Illustrator, that feature exists and it’s aptly named Revolve. For example, in Photoshop it’s quite difficult to create a simple oblong disk—like an M&M.

Cook up some M&Ms in Illustrator

Two giant billboard screens in Times Square display animations to whet onlookers’ appetites for something sweet to eat. These animations switch between little M&M characters in various situations to thousands of M&Ms swirling, flying, and falling around. In the Times Square painting I’m working on, I have an M&M character in one and a bunch of M&Ms falling in the other. Let’s take a look at how to create an avalanche of M&Ms.

Step One: In Illustrator, start by creating half the shape of one M&M with the Pen tool (P), then choose a green Stroke and Fill color in the Options Bar. This will determine the color of the object being rendered.

Step Two: To turn the shape into a piece of candy-colored chocolate, call up the 3D function (Effect>3D>Revolve). In this dialog, you can set the viewing angle of the object by spinning the cube in the Position section of the panel or entering specific degrees for the X, Y and Z axes. You can add Perspective too, but in our example, perspective will only add an unwanted distortion. Try using the settings shown here as a starting point (be sure to set the Offset: From drop-down menu to Right Edge to get the proper shape).

To set the lighting controls, click the More Options button (the button changes to Fewer Options once it’s been pressed) and you’ll be able to create, position, and modify multiple light sources to give your object the appearance you desire. We set the Surface to Plastic Shading to simulate the candy coating of the M&Ms. Click OK when you’re finished.

Step Three: To duplicate your M&M, press-and-hold Command-Option (PC: Ctrl-Alt) and then click-and drag the shape. To alter the viewing angle of each duplicate and make it appear to be an individual morsel, go to the Appearance panel and click on 3D Revolve. This brings up the 3D Revolve Options dialog where you can alter the current shape without having to re-establish the lighting.

Note: Once your shape has been turned into a 3D object, you cannot change its shape from the Effect>3D>Revolve menu, as it will override the previous effect and start from scratch.

Step Four: Choose Select>All and press Command-C (PC: Ctrl-C) to copy all of the shapes to the Clipboard. Then click on the Create New Layer icon at the bottom of the Layers panel and press Command-V (PC: Ctrl-V) to paste the shapes into the new layer. With all the shapes still selected, click on Fill and change the color of this batch of new M&Ms to blue, and then change the Stroke to blue, as well. As our M&Ms are “falling in space,” no two will be in exactly the same position, so use the Selection tool to reposition them. Then modify the viewing angle in the 3D Revolve Options dialog for each again to add more variety to your candy bits. Tip: This needs only the slightest turn of the shape within the 3D panel. Repeat this step to create a set of red M&Ms and a set of orange M&Ms, each on their own layer.

Bring each color into Photoshop

Once all the different colors have been created, it’s time to bring them into Photoshop.

Step Five: You should have four layers in Illustrator, one for each color: green, blue, red, and orange. (Note: For expediency, we’re only showing blue and green in our examples.) We want to bring each color into Photoshop separately so, in the Layer’s panel in Illustrator, click on the box (now you’ll see a little padlock) to the right of the Eye icon beside three of the layers to lock them. The layer that isn’t locked is the one we’ll copy to Photoshop. Choose Select>All, then Edit>Copy to copy the contents of the unlocked layer to the Clipboard.

Step Six: In Photoshop, make a new blank document (File>New) where you’ll assemble the falling bits of candy. Then Edit>Paste the contents of the first layer into your Photoshop document—the paste function automatically places the contents into their own layer. In the dialog that appears, choose Pixels, then press Return (PC: Enter).

Switch back to Illustrator. Lock the layer we just copied and unlock the next one to be copied. Follow the steps above (selecting, copying, and pasting) until all four layers have been copied to the Photoshop document.

Step Seven: The four layers fall in position directly over each other, so they tend to hide each other in the Photoshop document. Determine their actual positions by selecting each individual candy and positioning it within the canvas to its final place in the scene. (Note: To select an individual piece of candy, just draw a loose selection around it with the Lasso tool and then drag it with the Selection tool.) You may have to scale some (Edit>Transform>Scale) to give the appearance of being closer or further back within the mass of candy bits.

You may also want to duplicate a few here and there to add more candies. I suggest using Layer>New>Layer Via Copy, as this will send your duplicate to a new layer where it can be manipulated without disturbing the other candy bits. This is helpful when you have two overlapping same-color bits and you decide to move one slightly over the other, then you won’t damage the one below.

Adding the M

You could apply the “M” that’s stamped onto each candy as a texture map to the object. Clicking the Map Art button in the 3D Revolve Options dialog allows you to take any Illustrator element that’s been converted into a Symbol and apply it in any specified position onto the surface of the object. For my M&Ms, however, I wanted every M to look slightly different from the others because real M&Ms have slight variations to the way the letters are stamped onto the surface of the candy.

Step Eight: So, create your “M” in a separate document and add it to the candies within the Photoshop document by placing your “M” layer above the candy shape that will contain it. Then use the Warp command (Edit>Transform>Warp) to distort it into position. Finally, press Command-E (PC: Ctrl-E) to merge each “M” layer down into the layer with the candy shape.

Get the shapes a’movin’

To make the M&Ms appear as if they’re falling together, we need to add some motion blur and shadows.

Step Nine: To get the effect that this image is a moving animation, select the candy bits toward the top of the image and choose Filter>Blur>Motion Blur, choose your settings, and click OK. Use different Angles and Distances in the dialog to make the top candies appear to be falling faster than the ones below.

Step Ten: One final touch to make the M&Ms appear to be falling together is to add shading. Create a New Layer above each colored candy layer to contain “shadows.” With this layer active, select a soft black Brush (B) and apply strokes above the individual candy bits. Then add an inverted (black) Layer Mask to this layer and use a soft-edged white brush to reveal and refine the strokes. We added a Filter>Blur>Gaussian Blur using different amounts to make them seem to be at different distances from the candies they’re casting the shadows onto. You can clip the shadows to the candies below by holding the Option button and clicking between the shadow layer and candy layer.

Step Eleven: For the final figure, we filled the Background layer with black (Edit>Fill, then select Use Black, and click OK) to complete the sense of depth to the image.

I hope you’ve learned a few tricks (without causing you to break your diet by downing a few bags of M&Ms). Bon appétit.

Click here for our list of Photoshop Plugins.

You probably know that there’s a plethora of plug-ins available for Photoshop, but did you know there were just as many available for Illustrator and InDesign? Well, we thought we knew until we started the research. Originally, we were going to show illustrations demonstrating each plug-in, but as the list grew, we threw that idea into the Trash (PC: Recycle Bin). We were also going to list all of the Photoshop plug-ins, but those alone would have taken up the next six pages. So we decided to focus on Illustrator and InDesign and bring some of the lesser-known plug-ins to your attention. (We didn’t want to leave Photoshop out completely, though, so we do have a list of developers at the end of this article, and we have a more complete list of Photoshop plug-ins available online at www.layersmagazine.com/psplugins.)

Finally, to keep our list manageable (read less than 30 pages), we had to set some rules. First, we’re only focusing on commercial plug-ins—no freeware here. Second, we’re not including anything such as brushes, actions, or templates. Third, the plug-in must have a host application to work (no standalone apps). And fourth, they have to work with CS4. This turned out to be one of our biggest challenges. Some websites had “All of our plug-ins work with CS4” in big bold letters on their homepage (thank you!), while other sites had this information buried in their FAQ pages (or worse yet, in their Read Me files after downloading the software). Thinking back on it, we should have added a five-second rule: If a typical user can’t determine if a plug-in is compatible with CS4 in less than five seconds, then it’s off the list.

And now for the moment you’ve all been waiting for (no, not the actual list of plug-ins, but our disclaimer). Even though we tried our best, this list in no way should be considered a complete or comprehensive (or even accurate) list of all available CS4 plug-ins (that goes double for the prices). Heck, by the time you read this, some of these companies could be out of business and 50 new plug-ins could have been announced (welcome to our world). Also, this list should not be considered an endorsement for all of the plug-ins that appear on it. Yes, we’ve tested a lot of them, but we’d have to quit our day jobs if we had to test all of them. To help you help yourself stay better informed, here are some resources to learn about current and new plug-ins: the Adobe Marketplace & Exchange (www.adobe.com/cfusion/exchange) and www.pluginsworld.com. And now for the moment you’ve really been waiting for…

Illustrator CS4 Plug-Ins

AppliCraft

www.applicraft.com/zdragon/index_e.html

ZDragon—Work with high-quality 3D models, including VRML and 3dm files. (Inquire for price); Windows only; Illustrator CS–CS4.

Artlandia

www.artlandia.com
All Artlandia plug-ins are Mac and Windows compatible and work in Illustrator 10–CS4.

SymmetryWorks 5—Enables textile designers, interior decorators, stationery developers, Web designers, illustrators, etc. to make repeating patterns quickly and imaginatively. ($249 Download; $275 Box)
LivePresets—Companion to SymmetryWorks to create live pattern swatches or symbols. ($125 Download; $134 Box)

Astute Graphics

www.astutegraphics.com

Phantasm CS, Designer & Studio—Range of plug-ins providing color adjustment tools, vector halftones and duotones, print production previews including separations and ink coverage, embedded image editing, and more. (Approx. $40 for CS, $80 for CS Designer, and $140 for CS Studio); Mac and Windows; Illustrator CS–CS4.

Avenza Systems, Inc.

www.avenza.com

MAPublisher 8.1—Cartography plug-in offering more than 40 GIS tools to help you create the maps you want. ($1,249); Mac and Windows; Illustrator CS3 & CS4.

axaio software

www.axaio.com

MadeToPrint for Illustrator—Optimizes exporting, archiving, checking, and printing of Illustrator documents, including fully automated output. ($6,490 Auto; $5,790 Desktop); Mac and Windows; InDesign CS3 & CS4

BABY UNIVERSE

www.baby-universe.com
All BABY UNIVERSE plug-ins are Mac and Windows compatible and work in Illustrator 10–CS4 (Mac) and Illustrator 8–CS4 (Windows), except where noted.

BPT-Pro3—Enables Illustrator to be a highly functional 2D CAD tool. ($90)
EXDXF-Pro3—Allows users to import CAD-standard DXF files to Adobe Illustrator, and to export AI files to CAD so data is compatible in both applications. ($90)
DB Palette—Image database plug-in that can bundle images together (including linked files, such as EPS) and export them to one folder to take the finished work to the printer. ($110)
DDCSV—Auto-pagination plug-in that uses a CSV tag to enable drag-and-drop placement. ($999); Mac (Illustrator CS3 & CS4) and Windows (Illustrator CS2–CS4)

CoCut

www.cocut.com

CoCut 4X4—Adds high-end sign-making features, such as plot and job managers, for color printing, and automates the print-and-cut process. (Approx. $870 Professional; $435 Standard); Windows only; Illustrator 8–CS4.

CValley, Inc.

www.cvalley.com
All CValley plug-ins are Mac and Windows compatible and work in Illustrator 8–CS4.

Xtream Path 1.3—Drag anywhere on a path to edit it, without being constrained by control points. ($139)
FILTERiT 4.3—A variety of effects for creating simple to complex images quickly, from basic distortion to 3D transform. ($129)

Digital Graphic Solutions

www.flexocase.com

Flexocase—Flexographic tools including box and case templates, repro tools, ink guide, and borders. (Approx. $145); Mac only; Illustrator CS3 & CS4.

Enfocus

www.enfocus.com

Instant Barcode—Allows creative professionals to create, verify, fix, and read barcodes in Illustrator. ($299); Mac and Windows; Illustrator CS2–CS4.

EskoArtwork

www.esko.com

EskoArtwork provides numerous plug-ins for prepress and packaging design covering everything from creating barcodes, improving design productivity, preflighting, and everything in between. Illustrator plug-ins include barX, viewX, Instant Trapper, boostX, checkX, imageX, Dynamic Content, seamlessX, stepX, trapX, Studio, and Studio Toolkit for Boxes. (Prices range from $259–3200); Mac and Windows; Illustrator CS2–CS4.

Free Soft s.a.

www.freesoft.be

Silhouette—Convert black-and-white or color bitmap images into ready-to-use vector designs. (Approx. $290); Mac and Windows; Illustrator CS–CS4.

Graffix

http://rj-graffix.com

Productivity Pack—Set of five Illustrator plug-ins, including Cocatenate, Nudge Palette, Square-Up, Cutting Tools, and Trackplan Tools. Proof Block is also included for Mac. ($45; $10–20 for individual plug-ins); Mac (Illustrator 10–CS4) and Windows (Illustrator 10–CS3).

GraphicXtras

(Andrew’s Vector Plug-ins for Illustrator)
www.graphicxtras.com
All GraphicXtras plug-ins are Mac and Windows compatible and work in Illustrator 10–CS4.

Andrew’s Vector Plug-ins Collection, volumes 1–25—Collection includes 25 volumes of plug-ins that produce a wide range of effects, plus symbols, brushes, styles, pattern swatches, gradient swatches, and more. ($90 Collection; $15 each for individual volumes)

Hot Door

www.hotdoor.com
All Hot Door plug-ins are Mac and Windows compatible and work in Illustrator CS–CS4, except where noted.

CADtools 6—Sixty-two tools for 2D drawing, editing, and dimensioning; labeling; and isometric drawing and dimensioning. ($279)
MultiPage 4.1—Create and export or print multiple pages easily in Illustrator. ($99); Illustrator CS3–CS4
Perspective 2—Work with isometric, oblique, and perspective drawing tools. ($179)

NCS

www.magisign.com

MagiSign 2.3.3—Produce signs and transfer any selected paths to one of more than 300 compatible cutting plotters. ($599); Mac only; Illustrator 10–CS4.

Nineblock Software

www.nineblock.com
All Nineblock Software plug-ins are Mac and Windows Compatible and work in Illustrator 10–CS4.

BetterHandles—Create and edit Bézier curve handles. ($19 Personal/nonprofit; $29 Commercial)
SnapMeasure—Measuring tool that can snap to points, handles, and paths and set the constrain angle. ($14 Personal/nonprofit; $24 Commercial)

North Atlantic Publishing Systems, Inc.

www.napsys.com

CopyFlow Gold for Illustrator—Exports text to a computerized translation system, and then batch imports the translated text back into its original location, preserving text formatting. ($395); Mac and Windows; Illustrator CS3 & CS4.

Shinycore

www.shinycore.com

Path Styler Pro 1.5—Apply and edit live raster effects directly to paths and text objects. ($99); Mac and Windows; Illustrator CS–CS4.

Stephen Vincent’s Plug-ins

http://members.shaw.ca/spvincent/plugins/default.html
All Stephen Vincent plug-ins are Mac and Windows compatible and work in Illustrator CS3 & CS4.

Kimbo 3—Adds 11 tools in two tool groups to the Toolbox that make it easier to create difficult, time-consuming designs. ($40)
Mesh Utils 3—Provides seven commands in the Object menu, one effect, and one tool to create, color, and manipulate gradient meshes. ($30)
Tessella 3—Allows for pattern creations—such as rhombics, hexagons, and triangles—that you can adjust using Escher Edit mode. ($40)
Point Tweaker 2.5—View and finely adjust the coordinates of path points. ($28)
Curvius 3—Adds Crenellate, Roughen, Roulette, Straighten, and Arrowhead effects. ($25)

Strata

www.strata.com

Enfold 3D CX—Use Photoshop graphics applied to 2D Illustrator art, then define die-cut lines and folding scores to create professional folded 3D designs. ($695); Mac and Windows; Illustrator CS3 & CS4.

Worker72a

www.worker72a.com
All Worker72a plug-ins are Mac only and work in Illustrator CS3 & CS4.

Scoop—Collects copies of font and placed image files, extracts embedded raster images, and places them in a new folder. ($47)
SepPreview—View and print Illustrator documents as color separations, in color. ($47)
QuickCarton—Quickly build complete corrugated carton layouts for regular and half-slotted cartons. ($47)
Point Control—Provides path- and point-editing functions in one easy-to-use panel. ($10)
Zoom to Selection—Zooms view based on selected art and adds three new commands to view menu: Zoom To, Zoom From, and Fit Selected. ($7)
Tag72a—Automatically tag and update documents with user name, document name, file path, print time and date, and save time and date. ($25)

Zevrix Solutions

www.zevrix.com

ArtOptimizer 2.2—Eliminate excessive image data to automatically reduce the size of images linked to an Illustrator document. ($129.95); Mac only; Illustrator CS–CS4.

InDesign CS4 Plug-Ins

65Bit Software

www.65bit.com

EasyCatalog CS4 4.0.2—A database publishing plug-in that can import something as simple as a text file or directly from an ODBC-compatible database via the optional ODBC Data Provider module. ($1,299; optional modules range from $199–599; $299 Lite); Mac and Windows; InDesign CS–CS4

aextra software

http://aextra.de
All aextra software plug-ins are Mac and Windows compatible and work in InDesign CS4, except where noted.

Clever TextLink 2—Quickly and cleverly threads and unthreads text frames in various ways. (Approx. $75); InDesign CS–CS4
InDihyph Pro 6—Provides professional hyphenation for more than 40 languages using five hyphenation quality steps. (Approx. $250)
InDitect Pro 6.0.1—Provides professional spell checking and dictionary management for InDesign. (Approx. $210)

AiEDV.ch

www.aiedv.ch

BatchXSLT for InDesign—Creates a flip page eBook website with a mouse click, including full text search, active clickable links, images export, osCommerce shop connections, and more. (Approx. $845); Mac and Windows; InDesign CS2–CS4

axaio software

www.axaio.com

MadeToPrint Standard—Optimizes exporting, archiving, checking, and printing of InDesign documents, including fully automated output. (Approx. $505); Mac and Windows; InDesign CS2–CS4

Badia Software

www.badiasoftware.com
All Badia Software plug-ins are Mac only and work in InDesign CS4.

BigPicture 4—Provides instant access to detailed image information, complete picture lists, a unique search and relink engine, plus tools for updating, revealing, opening, renaming, replacing, and moving multiple links. ($129)
Exportools 3—Automates exporting individual pages into separate files, plus extracts text, exports pages as images, and exports selections of items. ($119)
Printools 6—Provides printing tools for error-free output, including batch printing, rename at print, print to file in different formats, custom slugs, and preflighting. ($129)

Cacidi Systems

www.cacidi.com
All Cacidi Systems plug-ins are Mac and Windows compatible, and versions are available for InDesign CS2–CS4.

Extreme CS4—Optimizes production of tedious and repetitive tasks such as copy-and-paste, text formatting, and importing and scaling images and barcodes for catalogs, brochures, etc. ($4,900)
LiveMerge CS4—Efficiently lays out any kind of data-based InDesign document. ($1,360)
BarCodes CS4—Creates barcodes directly in InDesign. ($399)
LiveBrowse CS4—A visual file browser, this plug-in makes locating text files and images faster than before. ($125)
Contact Sheet Pro CS4—Creates high-quality contact sheets and picture packages with all the creative features of InDesign. ($399)
Batch CS4—Automatically converts QuarkXPress and Adobe PageMaker files into InDesign files. ($85)
Cropmarks CS4—Applies cropmarks, bleedmarks, and guides to individual objects. ($36)

Chris Paveglio

http://chris.paveglio.com
All Chris Paveglio plug-ins are Mac and Windows compatible and work in InDesign CS3–CS4.

InDesign Font Catalog 2.1—Creates a sample of each font family available and makes smaller listings for other styles such as bold, italic, etc. ($15)
InDesign Image Catalog 3.3—Takes a folder full of images, creates a file with a specified number of image frames, places the files, and places image information below it in a text frame. ($20)
PDF Bee 3.2—Uses a watched folder to output InDesign documents as PDFs, checking for image links and fonts. ($90); also requires Adobe Acrobat Distiller 8–9

Codeware

www.codeware.de
All Codeware plug-ins are Mac and Windows compatible and work in InDesign CS4.

Xactuell 5—Database publishing tool that connects to almost any number of SQL databases. (Starting at approx. $1,450)
Opi Swapper—Manages low- and high-resolution data, allowing low-res images to be swapped for high-res images (and vice versa) from a single picture frame to all open documents. (Approx. $145)
PictureXTracker—For image files whose locations have changed, this plug-in makes it easy to search for and reassign folders or volumes of picture files related to one or more documents with a few mouse clicks. (Approx. $145)

Creo Print On-Demand Solutions

www.creo.com

DARWIN VDP Software 3—Easily produces VDP (variable data publishing) jobs, allowing personalization of documents for delivering the right message to the right customer. (Inquire for price); Mac and Windows; InDesign CS3 & CS4

Croptima

www.croptima.com

Croptima InPlate—Professional imposition plug-in for creating perfect bound, saddle stitched, step and repeat, and incremental imposition schemes. (Approx. $75); Mac and Windows; InDesign CS3 & CS4

Ctrl Publishing

www.ctrl-ps.com
All Ctrl Publishing plug-ins are Mac and Windows compatible and work in InDesign CS3–CS4.

CtrlChanges—Keeps track of all text changes, including who made the changes and when, plus displays added and removed text in Layout view. ($60 Light; $229 Standard; $549 Pro); Mac and Windows; InDesign CS3 & CS4
CtrlLayers—Expands the power of layers by allowing the creation of new InDesign documents from visible layers and importing layers from other InDesign documents. ($229); Mac and Windows; InDesign CS3 & CS4

DATAform developer

www.gassenhuber.de

DATAform Add-on 6—Full-featured database publishing tool that features the ability to create boxes with more than 70 specific properties, create text frames with any formatted content, and create anchored text and picture boxes or lines. (Approx. $1,600); Mac and Windows; InDesign CS2–CS4

DTP Tools

www.dtptools.com
All DTP Tools plug-ins are Mac and Windows compatible and work in InDesign CS–CS4, except where noted.

Cross-References PRO 1.1—A modular system that responds to every referencing need, including pointing across different documents and live updates. ($139); InDesign CS2–CS4
History 2.3—Provides a History panel similar to Photoshop allowing users to see all available redo and undo steps and to save versions. ($55)
Layer Comps 1.1—Similar to the same Photoshop feature, this plug-in can store multiple snapshots of current layer states. ($40)
Layer Groups 1.2—Brings another Photoshop-like feature to InDesign for organizing and controlling layers. ($40)
Page Control 2.2—Creates different page sizes and both vertical and horizontal spreads inside the same InDesign document. ($85)

Em Software

www.emsoftware.com
All Em Software plug-ins are Mac and Windows compatible and work in InDesign CS2–CS4.

Xtags 4/5/6.1.2.9—An import and export text filter for building text with full styling, anchor and fill picture and text boxes, size boxes to content in various ways, translate text and tags on input, etc. ($400)
InData 4/5/6.1.4.3—A document-building tool that brings the full layout and design power of InDesign to data-driven repetitive publishing tasks. ($400)
InCatalog 4/5/6.2.6.3—A bi-directional linking tool that creates transparent links between InDesign documents and databases for automatically updating data. ($800 Standard; $1,200 Pro)

Foldfactory.com

www.foldfactory.com

FOLDRite Template Master 2.0.3—Provides a quick-and-easy way to choose from 85 folding styles, customize them to specific needs, and build production-ready InDesign templates instantly for folded brochures, flyers, etc. ($299); Mac and Windows; InDesign CS3 & CS4

Gluon

www.gluon.com

Cropster ID 8—Sets up crop marks for bleed, trim, safety, folds, and page gutters. ($109); Mac only; InDesign CS–CS4
Greeker ID 8—Temporarily obscures live copy so clients can focus on the design and not the copy. ($79); Mac only; InDesign CS3 & CS4
ColorBreaker ID 8—Places tags that contain pertinent color information, and accurately points to items and text blocks with smart arrows, providing information that print providers need. ($219); Mac only; InDesign CS2–CS4
ProScale ID 9—Resizes selections or entire documents nonproportionally without distorting text or pictures using IntelliScale technology. ($149); Mac only; InDesign CS–CS4
Slugger ID 8—Places crucial document information on a page or margin (such as signoffs and color usage) that automatically updates every time a page is printed. ($219); Mac only; InDesign CS2–CS4

i.t.i.p.

www.itip-gmbh.eu

InMath 1.8—A plug-in for real mathematical typesetting that depicts mathematical expressions solely using characters—no graphical element or anchored or linked frames needed. (Approx. $720); Mac and Windows; InDesign CS2–CS4

In-Tools

http://in-tools.com
All In-Tools plug-ins are Mac and Windows compatible and work in InDesign CS2–CS4, except where noted. These plug-ins also require the most current version of APID ToolAssistant to be installed.

World Tools—Enables the use of right-to-left text without purchasing the ME (Middle Eastern) version of InDesign. ($49); Mac and Windows; InDesign CS4
AutoFlow Pro—Provides extensive automated flowing and reflowing capabilities of entire InDesign documents. ($99); Mac and Windows; InDesign CS3–CS4
Column Flow—Flows text in variable number of columns based on paragraph style. ($59)
Formatting Tools—A set of utilities for making formatting text easier. ($29)
Proper VJ—Creates vertical proportional justification based on space before settings. ($44)
Reflective Objects—Adds the ability to set non-anchored objects and guides to spine-relative positions. ($39)
Running Headers—Creates page reflective headers with many unique options. ($59)
Side Heads—Extracts text and creates anchored text frames, as well as returns extracted text frames to the main text flow. ($39)
Story Tools—Gives the ability to assign a logical and physical order to stories. ($24)
Drop Words—Creates the “drop words” common in Hebrew typesetting. ($39)
Multi-Lingual Tools—A set of utilities for laying out multilingual documents. ($29)

InDesign Imposition Plug-in

www.impositionsoftware.com

InDesign Imposition Plug-in—With one click, this plug-in takes any InDesign document, converts it into a PDF and imposes the PDF onto a new InDesign document. ($39.99); Mac and Windows; InDesign CS2–CS4

InfoLogic

www.mathmagic.com

MathMagic Pro 6.7 for Adobe InDesign—A multipurpose equations editor for mathematical equations and symbols. ($695 with two-year free upgrade; $499 with limited free updates); Mac and Windows; InDesign 2–CS4

Kitchen Wisdom Publishing

www.wiskit.com/indesign

Recipe Design Wizard—A plug-in that assists in the design and layout of food recipes in InDesign. ($99.95); Mac and Windows; InDesign CS–CS4

Markzware

www.markzware.com
All Markzware plug-ins are Mac and Windows compatible and work in InDesign CS3 & CS4.

Q2ID v4—With a single click, converts all elements in a QuarkXPress document into an InDesign document, including text, images, and fonts. ($199)
PUB2ID v.2.1—With a single click, converts all elements of a Publisher document into an InDesign document, including text, images, and fonts. ($199)

Meadows Publishing Solutions

www.meadowsps.com

AutoPrice—Streamlines the production and versioning of catalogs, price flyers, and financial documents by providing sophisticated linking to external databases. (Inquire for price); Mac and Windows; InDesign CS–CS4
DesignMerge Pro—Creates personalized (VDP) 1:1 marketing documents by linking to a database file. (Inquire for price); Mac and Windows; InDesign CS2–CS4
CopyFit—Detects and fixes overset (or underset) text conditions in any InDesign document. ($225); Mac and Windows; InDesign CS3 & CS4

MetaDesign Solutions

www.metadesignsolutions.com
All MetaDesign Solutions plug-ins are Mac (InDesign CS3 & CS4) and Windows (InDesign CS2–CS4) compatible, except where noted.

SpellPlus—Enhances spell check in InDesign, augments the list of supported languages, and provides thesaurus and typesetting hyphenation support. ($89)
BrowsePlus—Integrates real-time, tab-based Web browsing right inside InDesign. ($49); Windows only
IndicPlus—Provides support for typography involving bidirectional complex scripts such as Indic scripts. ($69 for CS2 & CS3; $25 for CS4)

North Atlantic Publishing Systems, Inc.

www.napsys.com

CopyFlow Gold for Adobe InDesign—Exports text to a computerized translation system, and then batch imports the translated text back into its original page location, preserving text formatting. ($495); Mac and Windows; InDesign CS2–CS4

Recosoft

www.recosoft.com

PDF2ID 2—Converts PDF documents into fully editable InDesign files, re-creating the intended construction and layout of documents. ($299 Standard; $399 Pro); Mac and Windows; InDesign CS2–CS4

Rorohiko

(also know as Lightning Brain)
www.rorohiko.com
All Rorohiko plug-ins are Mac and Windows compatible and work in InDesign CS–CS4, except where noted. Most of these plug-ins also require the most current version of APID ToolAssistant to be installed.

FrameReporter—Adds new navigation features to InDesign (jump to named stories or frames) and displays nonprinting info labels next to selected page items. ($29)
MagnetoGuides—Magnetizes one or more guides to help laying out structured, repetitive documents, automatically adjusting to the size and position of multiple page items. ($59)
Spreadulator—Allows for the editing of page items all at the same time. ($29)
SudokuGenerator—Generates Sudoku pages directly in InDesign. ($49)
StoryTweaker—Allows text edits of a master InDesign file by multiple users without the need for a copy of InDesign. ($99); InDesign CS3 & CS4

Slendro Solutions

www.slendro.com
All Slendro Solutions plug-ins are Mac and Windows compatible and work in CS2–CS4.

StyleReporter—Places style name labels for each story in InDesign for both paragraph and character styles. ($89.95)
GeometryReporter—Generates and displays measurements for any box within an InDesign document, including text, picture, and unassigned boxes. ($96.95)
PictureReporter—Places image attribute labels for each placed image in InDesign. ($59.95)

Soft Horizons

http://chartbot.com
All Soft Horizons plug-ins are Mac and Windows compatible and work in CS–CS4.

Chartbot Barcodes—Creates barcodes of all types without using any barcode fonts. ($495)
Chartbot Charting—Turns out large quantities of charts of all types from InDesign. ($995)

Teacup Software

www.teacupsoftware.com

TypeFitter—With a single click, this plug-in fixes overset text, widows, imbalanced columns, and more. ($99 Classic; $199 Pro); Mac and Windows; InDesign CS3 & CS4
DataLinker—Links data anywhere on an InDesign page, or merges data into documents and tables. ($299); Mac and Windows; InDesign CS2–CS4
BarcodeMaker—Creates up to 27 different types of barcodes using a single user-friendly panel. ($169); Mac and Windows; InDesign CS–CS4
ImageSwapper—Automatically rotates and scales high-res images when replacing low-res FPO images. ($199); Mac and Windows; InDesign CS2–CS4

Triple Triangle

www.tripletriangle.com
All Triple Triangle plug-ins are Mac only and work in InDesign CS3 & CS4.

Mechanical Cubed—Efficiently creates, resizes, preflights, and routes mechanicals through all stages of the process. ($326; $199 Slug Cubed only; $149 Crop Cubed only)
Color Spec Cubed—Quickly and accurately creates callouts that identify fonts, colors, and linked graphics in InDesign documents. ($149)

Virginia Systems

www.virginiasystems.com
All Virginia Systems plug-ins are Mac and Windows compatible and work in InDesign 2–CS4.

Sonar Bookends InXref 7.5—Generates cross-references for a single file or hundreds of files using the book capabilities in InDesign. ($195)
Sonar Bookends InSeq 8.2—Automatically numbers figures, tables, paragraphs, etc. along with any references in text to those figures and tables. ($195)
Sonar Bookends InFnote 7.2—Automatically numbers, sorts, and assigns style sheets to footnotes and endnotes. ($195)
Sonar Bookends InDex Pro 7.1—Generates indexes based on word frequency, proper nouns, subjects of sentences, lists of words and phrases, marked items, or any combination thereof. ($395; $195 Standard)

vjoon professional publishing

www.vjoon.com
All vjoon plug-ins are Mac and Windows compatible and work in InDesign CS4.

Overset Manager 6.01—Gives complete control over text length and text overset, enabling users to count, display, edit, and print overset text. (Approx. $105)
Notes Manager 4.01—Enhances the notes feature in InDesign with filters for displaying notes and various options for displaying search results. (Approx. $105)

Woodwing

www.woodwing.com
All Woodwing plug-ins are Mac and Windows compatible and work in InDesign CS2–CS4, except where noted.

Smart Styles 6.0.1—Provides the ability to drag-and-drop styles for tables, objects, and text, plus table sorting and spreadsheet-like calculations and formulas. (Approx. $290)
Smart Image—Automatically adds caption and credit text frames when placing images. (Approx. $215); InDesign CS3 & CS4
Smart Layout 6—Provides article functionality for efficient newspaper layout. (Approx. $725)
Smart Speller 6—Improved spell checking for InDesign. (Approx. $435 for one language)
Smart Hyphen 6—Improves hyphenation and text flow in InDesign. (Approx. $435 for one language)

Zevrix

www.zevrix.com
All Zevrix plug-ins are Mac only and work in InDesign CS–CS4.

LinkOptimizer 4.0.7—Reduces file sizes by automatically reducing image resolutions, scaling and cropping images in Photoshop according to their dimensions in InDesign, and reimporting them to InDesign at 100%. ($239.95)
BatchOutput 3.5.3—Automatically prints and exports multiple and single InDesign documents to various formats. ($119.95; $699.95 Server edition)
InPreflight Pro 2.6.11—Quickly checks document fonts, colors, and links, and locates potential problems based on user-defined preflight presets. ($139.95; $99.95 Studio)

The brochure has to convince the prospective client that All Pets offers great medicine and phenomenal customer service.

The All Pets Dental Clinic was founded about ten years ag ao by Dr. Jan Bellows, one of only about a hundred board-certified veterinary dentists in the U.S. The clinic is a state-of-the-art facility, with the latest in dental technology. “The second you walk in, you know you’re in a special place,” says Practice Administrator, Paul Camilo.

The clinic also tries to make it a special encounter for their clients. The waiting room provides Starbucks coffee along with snacks and has a big-screen TV. The doctors don’t wear lab coats and they introduce themselves by their first names. The treatment areas are scrupulously clean—“it looks and smells like a plastic surgeon’s office,” says Camilo.

Most of the clinic’s patients are household pets—dogs and cats—but they also sometimes treat exotic animals from local zoos. The clients generally come through referrals from other practitioners. The clinic produces a brochure that they provide to other veterinarians, who then give it to their clients when referring them to All Pets Dental. Other vets have to be aware of three things, according to Dr. Bellows: “One, the client will have a great experience here; two, the doctor knows what he’s doing; and three, I’m not out to steal their clients.” The brochure also has to convince the prospective client that All Pets offers great medicine and phenomenal customer service.

The current brochure is a simple trifold printed on matte white paper. They like the clean appearance of the front flap, but there’s a lot more they don’t like. They worry that it looks too busy on the inside. “We wanted to cover all the treatment areas,” says Camilo, “but clients may be overwhelmed by too much information. I’m into pictures, but I don’t know if the busy-ness of it conveys how clean we are.” And Dr. Bellows thinks the typeface for “All Pets Dental Clinic” is too “tough” and “military-looking,” where they’d prefer a warmer feeling.

AFTER

For me, everything starts with the logo; that sets the tone and feel for the entire brochure.

DESIGNER: Ihor Gernaga www.coroflot.com/1kreator/portfolio

My impression of the original brochure is that it misses the mark in presenting a professional image: there’s sameness of color, font selection, and usage throughout the brochure. The information feels like it was placed haphazardly, which is very confusing and unappealing.

Since this brochure is used as a referral that other veterinarians would give to their clients, the challenge was to create a design that would appeal to professional veterinarians and at the same time have it look nonclinical and inviting for potential clients.

For me, everything starts with the logo; that sets the tone and feel for the entire brochure. I decided to keep the overall format of the logo—two lines of centered text—because it was a good start for an identity and just needed some work to bring it front and center. I set the clinic’s name in Adobe Immi 505, which has a playful feel without being too juvenile or unprofessional. Instead of a tooth (which is somewhat overused for dental services), I decided to focus on the “all pets” part of the name. I incorporated paw prints of various animals as part of the logo and picked them up as an ongoing theme throughout.

I played around with the idea of using a different format instead of the trifold, but the existing format won out. It’s portable, easy to store, and provides just enough space to get your message across. I filled some of the panels with a background gradient that goes from blue to earthy brown because that color combination lends a calming and grounded feel, which works well with this particular brochure.

The next order of business was to organize the information into palatable bits. I used panels with a color background to highlight important aspects of the business, and I left the rest of the space white to focus on the specific services, location, and directions. I chose Dante MT and Myriad fonts for their subtle differences from more typical serif and sans-serif fonts. Those nuances give the whole brochure a more updated feel.

ABOUT THE DESIGNER
Ihor Gernaga www.coroflot.com/1kreator/portfolio
Ihor was born and raised in northeast Ohio, where he showed a keen interest in drawing and other creative activities from an early age. He eventually graduated from the University of Akron with a dual degree in photography and commercial art. His original goal was to design cars, but that all morphed into a whole different direction.

In his 15 years of designing, he has worked for in-house design departments in various industries. He started as a production artist setting up food containers and worked his way up to senior designer. Along the way he created a wide variety of corporate collateral, logos, brochures, event posters, and retail advertising. In addition, he has freelanced and worked as a contractor for local companies, nonprofits, and small businesses.

Ihor resides in North Royalton, Ohio, with his wife and three cats.

APPLICATIONS USED: Adobe Illustrator CS4, Adobe InDesign CS4, and Adobe Photoshop CS4

AFTER

They had mentioned that the client had a “Disney-like experience,” so I made the logo into a small cartoon with a slight professional style.

DESIGNER: Jeff Carpenter www.whitewolfgraphics.net
The original design for the All Pets Dental Clinic brochure is very cluttered and unorganized, and the haphazard placement of the medical photos on the interior is distracting. It lacks the personal feel that they wanted to communicate to potential clients. There’s also a lack of color throughout, except for the photos. I believe that if a client is willing to spend the money on full-color brochures, a designer should use plenty of color.

My redesign started with the logo. They had mentioned that the client had a “Disney-like experience,” so I made the logo into a small cartoon with a slight professional style. The original tooth is subtly retained in the new mark.

After that, I moved on to font choice. I used Myriad Bold Condensed and Myriad Regular for the titles and body copy throughout the brochure. Myriad communicates a sophisticated, professional appearance, but it has a softer edge to it, which makes it more playful than Helvetica or Arial. Next, I wanted to give the brochure a comforting feeling and selected imagery of people enjoying their pets. The range of images also communicates the idea that all animals are welcome, including rabbits.

Choosing a color was more difficult. I wanted to use a refreshing, clean color and ended up using a green with a little blue in it. I also decided to go with full color throughout, mostly because having the full color helps to communicate the message.

Ultimately, my hardest decision was whether or not to keep the medical images. Having them there was helping to clutter the design, but do the images help the consumer decide whether or not to go to this dentist? My answer was yes, but I also felt that having so many of them was not the way to go. Therefore, I made them small and only used one per service.

ABOUT THE DESIGNER
Jeff Carpenter www.whitewolfgraphics.net
Jeff has always had a passion to be creative, and has dealt with many different types of clientele: construction, pond equipment, government, and the entertainment industry. He started his career as a graphic artist in a community arts organization and then moved on to an advertising agency. His dream of having his own business began with White Wolf Graphics in Saginaw, Michigan, in February 2004.

White Wolf Graphics has been meeting the needs of their clients in many different types of media: logo design, brochures, direct mail, multimedia presentations, and websites. Jeff has also served as a design instructor at a local community college, helping students to learn the field of graphic design and new software programs. One of his hobbies is learning new software, and he always gets excited when Adobe comes out with a new version of their software.

APPLICATIONS USED: Adobe Illustrator CS4, Adobe InDesign CS4, and Adobe Photoshop CS4

AFTER

I eliminated the before and after photos in the original in favor of softer, friendlier photography showing doctor and patient interaction.

DESIGNER: Chris Owens www.dpicreativeservices.com
The image that the existing brochure projects is that of a business not nearly as renowned and professional as All Pets Dental Clinic. I felt that it was important for the redesign to convey those qualities, and that effort started with a new logo. I eliminated the detached tooth image and incorporated a simple, strong font with silhouettes representing a selection of the various types of animals they treat at the clinic.

The new cover retains the white space of the original brochure, but I added the summary of services at the bottom, which allows the reader a quick overview of the services All Pets provides.

I divided the interior of the brochure into two sections: one for the explanation of services and the other for Dr. Bellows’s bio. The vertical rules with the headers running along them and the use of initial caps draw the reader’s eye to each section. I eliminated the before and after photos in the original—frankly, I found them somewhat off-putting—in favor of softer, friendlier photography showing doctor and patient interaction.

An updated Location panel, also designated by a new vertical header, presents clearer directions to the office. I also included a photo of the building’s exterior as a visual reference for the customer driving to the office for the first time.

The color palette was chosen for its medical feel and subtlety, which will help the brochure to maintain a contemporary look for many years. I used Myriad Pro in the logo to project a feeling of stability and longevity, and I carried that font into the brochure’s headers. I chose Caslon for the body copy because it’s straightforward and readable, and as a classic face it also won’t go out of date any time soon.

ABOUT THE DESIGNER
Chris Owens www.dpicreativeservices.com
After graduating from Pensacola Christian College in 1996 with a Communications degree, Chris spent time as a member of the inaugural class at Virginia Commonwealth University’s AdCenter, studying copywriting before turning his attention to the world of graphic design. His career path has taken him from production artist to creative manager for national automotive retailer CarMax, where he leads a team of three art directors in producing a wide spectrum of both print and digital graphic design projects.

Concurrently, Chris is principal of dpi creative services, a burgeoning photography and graphic design business. Chris’s photography has appeared in local and national publications such as WORK magazine and Fortune online, and he has graphic design clients throughout the southeast.

Chris resides in Richmond, Virginia, with his wife and their new baby girl.

APPLICATIONS USED: Adobe Illustrator CS4 and Adobe InDesign CS4

How much is too much?
One thing that’s hard for beginning Web designers to learn is moderation. Once people learn how to create some cool animation or interactive technique, it’s only natural that they want to show the world their new skill, regardless of whether or not it’s appropriate for the content they’re creating—we’ve probably all visited sites that have made gratuitous use of interactive technology. In fact, Flash has received a bad rap because of this type of over-interactivity. In this article, we’ll discuss the various types of interactivity available to you when using the Creative Suite to design for the Web and, most importantly, what types of content are appropriate for each technique.

As you venture away from traditional Web interactivity and introduce more cutting-edge content into your site, there are some important trade-offs that you need to be aware of. Let’s start with arguably the most important: search engine optimization (SEO). Nothing can beat static HTML content when it comes to finding your way to the top of search-engine rankings. Rich Internet Application (RIA) technologies, such as Ajax, Flash, and Flex, will enhance the interactivity of your site but will also make it harder for search engines to index your content. Adobe is working with both Google and Yahoo!, however, to make Flash SEO much better, but it will likely never be on a par with regular old HTML.

Another thing that you should keep in mind is that the vast majority of Internet users are used to the traditional Web model of interaction. If you introduce new interaction types, you can run the risk of either confusing or irritating your users. The choice of how far to take interactivity most often comes down to the type of content you’re creating. A website for an upcoming horror movie or Flash games can really push the envelope and can employ the latest and greatest forms of interactivity. A corporate or ecommerce website is typically a place where you’d want to be a little more conservative with the type of interactivity you choose.

With these trade-offs in mind, let’s take a look at the many options you have available for adding interactivity to your projects.

JavaScript and Ajax
JavaScript together with Ajax (asynchronous JavaScript and XML) enables you to add a wide variety of interactivity to your content, ranging from simple animation to dynamic content updates to a whole slew of user interface (UI) components. Dreamweaver CS4 contains extensive support for these technologies and also includes Adobe’s own JavaScript library named Spry, which contains accordion panels, tooltips, and menus in addition to a set of form-validation controls. All of these can be dragged directly into your HTML content from the Spry section of the Insert panel in Dreamweaver CS4.

One of the most impressive and popular JavaScript frameworks is the YUI library from Yahoo!. (The entire library of components and features can be downloaded from http://developer.yahoo.com/yui.) With YUI, you can add enhanced interactivity in the form of color pickers, sliders, and carousels, just to name a few. You’ve probably already interacted with many of the various YUI components, as they power much of the interactivity on Yahoo!’s homepage and mail sites. For a great introductory tutorial on how to use the YUI library in Dreamweaver CS4, go to the Adobe Developer Connection website at www.adobe.com/devnet/dreamweaver/articles/using_yui_widgets.html.

Contextual tooltips are a great example of the kind of interactivity that Ajax can add to your Web content. One of the best examples of this can be found on the Netflix website (www.netflix.com). When you hover over a movie on the site, you’ll see a large tooltip appear that contains such information as the movie’s description and ratings. Doing this type of dynamic data retrieval means that they don’t have to embed all of that information into the page when you first load it.

The next version of the HTML language, HTML 5, allows for a lot more interactivity and performs many Flash-like features; for instance, you can play video directly using HTML rather than using a plug-in like QuickTime or Flash. The animation capabilities of HTML 5 are also very impressive, although they don’t come close to matching the potential of Flash. Note: HTML 5 is currently only supported in certain browsers, such as Opera and Safari.

One of the major drawbacks of using JavaScript and HTML for your interactivity is that you’re relying on the various browser manufacturers to implement the technologies in the same way. Those of you who are experienced in Web development know that this is rarely the case. Using a browser plug-in, such as Flash, ensures that your content will run the same way on all platforms and browsers.

Forms of Flash interactivity
When most people talk about new and innovative forms of interactivity, Flash is usually involved in some form. The Flash community is legendary for coming up with trendsetting design concepts, and with the ever-increasing power of the Flash Player, it’s exciting to wake up every day to see how people are pushing the interactive envelope.

Since Flash essentially allows you to throw out the rulebook and do whatever you want, it’s important to know where to get ideas and inspiration. Luckily, there’s only one site you need to visit to see the latest and greatest innovations coming out of the Flash world: The Favorite Website Awards site (www.thefwa.com). Usually referred to as simply the FWA, it contains a listing of the coolest interactivity found on the Web. Every day a new site is added and there are also awards for the site of the month and site of the year.

The range of interactive options available when using Flash are mind-boggling and you’re truly only limited by your imagination. Now, let’s take a look at how you can use Flash to “blow the hair off” your users.

Navigation
Building creative and unique methods of navigating a site’s content is one of the areas where we’ve seen some of the most innovative uses of Flash. One site that completely blew my mind a few years back was for creative advertising agency Leo Burnett (www.leoburnett.ca). The site features a click-and-zoom interface that you navigate using a black pencil. Every section you click on zooms the whole interface in to focus on it. It has an amazing smooth and organic feel to it.

It’s also very common now to see 3D interfaces showing up in Flash sites, thanks to open-source community projects like Papervision3D. As with everything else in Flash, moderation is always the key. In my opinion, the site that uses the perfect amount of 3D is the portfolio website for Whitevoid (www.whitevoid.com/portfolio.html), which is an interactive agency based out of Germany. Its navigation is one in which sections and content are stacked in 3D space. Clicking on a section of the site causes everything to slide away from the camera along the Z-axis. The interaction is so enjoyable to use that you may find yourself repeatedly clicking through their site just for the sake of it.

Interactive video
Without question, the majority of Internet users have viewed Flash video at some point in their travels. Sites like YouTube serve millions of videos every day and have made video an integral part of the Web experience. With the continued spread of high-speed broadband networks, users will be able to consume greater amounts of video and other forms of rich content.

The possibility of using video in Flash goes far beyond the traditional video player with which most people are familiar. Many sites are using video as the primary way of delivering their site’s content. One great example of this is the Philips Bodygroom site (www.shaveeverywhere.com). Seamless, high-quality video clips deliver all of the information about the body razor, and it contains very little text. The video is also interactive, as you can click on the various parts of the model’s body to receive more information about shaving that particular region. Here, video is used not just as an accompaniment to the main content on the site; the video is the main content on the site.

Another interesting use of Flash video was Burger King’s Subservient Chicken micro-site (www.subservientchicken.com). The concept of this site was very simple: You type a command into the text box and the chicken obeys. For instance, you could type “sit down” or “fly” and the chicken would obey you. Nothing is quite as viral as making new and interesting use of video content.

Augmented reality
By far the hottest new form of interactivity on the Web is known as “augmented reality” (AR). This technology allows the user to hold up a certain pattern (known as a marker) in front of their webcam. The software will then detect the marker and display some kind of content that moves wherever the marker moves. There have been many interesting and creative uses of this technology in the Flash world. One of the first sites I saw that made use of augmented reality was the GE Ecomagination site (http://ge.ecomagination.com/smartgrid). The site first prompts you to download and print a PDF file that contains the marker pattern. You’re then taken to a Flash application that displays the video stream coming from your webcam. Then, all you need do is hold the marker up to the webcam. What you’ll see is a 3D scene that was created in Papervision3D. As you move the marker around, the 3D will follow your movements. Want to see the model up close? Simply move the marker closer to the webcam. [For more on AR, see “How’d They Do That?” Layers magazine, Sept/Oct 2009, p. 30.—Ed.]

This technology has already seen some really cool uses. MINI released a print ad that contained a marker pattern. When users visited their site, they could view and manipulate a 3D version of their cars. Topps released a set of baseball cards that, when held up to a webcam, would allow people to see an interactive 3D model of the player. This is just the beginning of taking interactivity outside the bounds of our computer displays and into the real world. If you’d like more information about how to create augmented-reality applications, visit www.gotoandlearn.com/play?id=105 where you can view a video tutorial that I created on the subject.

Go play
As you can see, there are many types of enhanced interactivity that you can add to your Web content, ranging from subtle Ajax enhancements all the way up to game-changing technologies like augmented reality. Whatever you decide to use, just make sure that it’s appropriate for the content—making people hold something up to their webcam to read your company’s latest sales figures probably won’t garner you a raise anytime soon!

Each cell is effectively its own text frame. Adjoining cells are stuck to each other (you can’t open up gutters between them, as in traditional typeset tables) but they have no “knowledge” of the typographic specs applied to their neighbors. Each cell is an “island,” and one cell’s leading isn’t related to or dependent on that of cells above or below it. It can become a huge hassle to control—even to know the value of—the leading between text in one cell and the text in cells above or below it. Ditto for rules added between rows. When Adobe decided to model its tables on spreadsheets, it made managing leading a headache.

Take it from the top

To control the leading between the first text line in a cell and the cell’s top border, go to the Table>Cell Options>Text dialog. Here, in the Offset drop-down menu under the heading First Baseline, you can position that first baseline in several ways: according to its Leading, Cap Height, Ascent (ascender height), x Height, or an arbitrary Fixed value. Only the Leading and Fixed options allow you to know what the leading is between the first line and the top of the cell. Stick to one of these two.

The leading between the bottom of the cell and the last text line in it can only be managed via the Bottom field under the Cell Insets heading in the same dialog. If you choose zero, the last text line’s baseline will coincide with the bottom of the cell. Any descending characters—y, for example—will dangle into the cell below. This is weird, but at least you know exactly what the leading is between cell border and text: zero.

When leading isn’t leading

Let’s take a look at the practical consequences of this hybrid approach to vertical spacing: half managed with leading values, half with cell insets.

If you use no rules between column rows (or no color fills to distinguish one row from another), things are pretty logical. With Leading selected as your First Baseline Offset option and no Top or Bottom Cell Insets, the leading between the last text line of one cell and the first text line in the cell below it will be what you’ve chosen for your text. Simple and sensible. Using leading alone (with no cell insets) to space a table, however, yields odd results, with the last line of type in each cell resting on the lower cell border. And descending characters dangle into the row below.

Example using leading alone to space a table

But if you want to add extra leading between those cells, you can’t do it by adjusting the leading itself, which is a text attribute. Instead, you have to do it by altering cell attributes. Whether you choose to do this by adding an inset or by using the Fixed option in the First Baseline Offset drop-down menu in the Cell Options dialog, you’re applying an object attribute, not a text attribute. As with text frames, trying to add “space before” or “space after” as a paragraph attribute has no effect on the top or bottom line of text in a table cell.

So, while leading is a text spec, inset spacing is a cell attribute. Creating styles to speed table formatting requires you to consider spacing in two different places, and this begs mistakes.

The “law of rules”

Things take a bad turn when you want to set rules between table rows or add colors to them, because this makes the cell boundaries visible. Unless you add insets to the bottoms of all the cells in the table, their contents will appear too low, crashing into the rules or dangling out of the colored row highlights.

InDesign should have a control that says, “Position the lower cell border in proportion to the leading used for the first baseline.” This would add enough space between the last text line in the cell and the lower cell boundary, visually centering the cell’s text block between the top and bottom cell borders.

Instead, you have to manage the spacing yourself. Now, typefaces vary in their vertical positioning characteristics, but a rule of thumb is that if the space between the last text baseline in the cell and the cell border equals half the text leading, the text block will appear vertically centered. Do this manually with cell insets, streamlining things by adding that value to a cell style.

InDesign correctly reckons the leading between the first line of type in a cell and any rule applied to the cell border above it. That is, it measures from the baseline of the type to the baseline of the rule, which is its bottom edge. This is in accordance with the way these things have historically been measured.

But now we collide with a cruel reality of the PostScript imaging model that InDesign uses to set rules. Traditional phototypeset rules act like their original metal versions. They’re construed as solid and, regardless of their thickness, their bottom edges are treated as their baselines. Not so in PostScript Land. There, lines are essentially paths, vectors: expressions of direction that have trajectory but no width. Only when stroked do they become visible on a printed page; so a 4-pt stroke yields a 4-pt rule. But these rules are built outward from each side of the path—like the dotted line that runs down the middle of a street, with the pavement “stroked” outward on either side of it.

This looms large at the bottom of a cell that has rules applied to it because, while InDesign will correctly position the top line of text according to the leading in effect, it won’t do the same for the bottom. That’s because bottom cell insets aren’t measured from the baseline of the type to the rule (or to the baseline of the rule) but from the path underlying the rule. You always end up measuring not to the edge of the rule, but to its center.

So let’s say you had set a 6-pt offset between the last line of type and the bottom of the cell before you specified any cell rules. Now if you apply a 4-pt rule to that cell, your bottom inset will be reduced by half the weight of the rule. The offset to the path of the cell border remains the same, but the visible gap between type and rule is made smaller. You have to manually add 2 points to the bottom offset to compensate.

In the example below, text is leaded at 9 points as usual in the Control panel. Then it’s off to the Table>Cell Options>Text dialog, where the first baseline in each cell gets an extra point of lead as a Fixed First Baseline Offset cell attribute. The last line gets a Bottom Cell Inset of 6.5 points: 4.5 points to space it from the cell border plus another 2 points to compensate for the 4-point rule that bounds the cell. The paths of those rules are shown here.

Simple table, complex leading

The net effect

All of these Byzantine workings can be sorted out and ultimately you can have precise numeric control over the leading of everything in a table. These values, in turn, can be built into character, paragraph, and cell styles to make formatting faster and more consistent. But they can make refining the layout of a table a hair-pulling event, because there’s no one place, no one dialog, where you can specify everything. Careful proofreading is a must. And patience is the order of the day.

Star Wars Miniature Packaging Gets a New Look

Client:
Wizards of the Coast www.wizards.com

Before

Wizards of the Coast LLC, a subsidiary of Hasbro, Inc., is considered the global leader in hobby gaming. Based in Renton, Washington, the company employs more than 300 people. Originally founded in 1990 by Peter Adkison, Wizards rose to prominence in the hobby games market on the strength of the innovative and revolutionary trading card game Magic: The Gathering.

Wizards is the current license holder and publisher of the Star Wars Roleplaying Game (RPG) and Star Wars Miniatures. The first Star Wars RPG product was released in 2000 and the Star Wars Miniatures game started in 2004. A new edition of the Star Wars RPG rules, Saga Edition, was released in June of 2007.

According to Paul Hebron, Art Director for Star Wars Miniatures, most of their products had fallen into the trap of “same carton, just re-skin the graphics.” Everything started to look the same and lacked shelf visibility. With the advent of The Clone Wars animated feature and TV series, Wizard’s Brand team requested a redesign of the packaging for a fresh look. The timing couldn’t have been better, as a full line of new products was being introduced based on The Clone Wars—boosters, a starter set, map packs, and a scenario pack. Objectives for the new packaging included:

• Reduce size of package while maintaining visual size of illustration and logo
• Consider unique packaging shapes to drive visibility
• Improve readability and message hierarchy by placement and color choices
• Show more miniatures on the package
• Create a distinct look for application to Star Wars Miniatures SKUs.

After

DESIGNERS: PAUL HEBRON AND LEON CORTEZ

We invited our Brand and Sales teams to go with us on several market walks to view our original packaging in a real-world environment. We considered placement, package condition, and visibility on the shelf against competitive products. I always try to be on the same page with the team before putting pen to paper, and retail is the best place to begin the process.

For inspiration, we explored beyond toys, games, and hobby items by looking at anything that might stand out. Because of our tight schedule, we chose to eliminate some concepts at the sketch phase. Leon and I tossed ideas back and forth until we developed a concept that resonated with both of us. From there, I provided volume and scale information based on contents, factoring in our sustainable package goals (smaller package).

Leon used Adobe Illustrator to create a die-line to scale. After several paper mock-ups and making adjustments to the die, we passed the information to our vendor for cost estimates and pack-out feasibility. While this was in process, Leon applied graphics to our preliminary design using Illustrator, Photoshop, and InDesign. We used these mock-ups to present to Lucas Licensing and our internal teams for concept approval.

The new booster pack design reduced materials and shipping by 20%. This design also translated successfully for all subsequent Star Wars Miniatures products, including boosters, a starter set, map packs, and a scenario pack. Star Wars Miniatures: The Clone Wars was announced as the best miniatures line at the 35th Annual Origins Awards in June 2009. The packaging illustrations for this series, by Terese Nielsen, were selected for Spectrum 15 and 16 as among the best in contemporary fantastic art.

ABOUT THE DESIGNERS

Paul Hebron Art Director
Paul Hebron started working at Wizards in mid-2003 shortly after moving from Los Angeles. Paul says, “I wanted greener grass and Seattle truly is the Emerald City. Sometimes I miss Los Angeles. There was something insanely comforting about being able to see the air I breathe and the challenge of successfully navigating a 15-mile route in less than an hour through midday traffic.”

In Los Angeles, Paul owned a design studio for nine years specializing in entertainment-related design. His clients included Fox Entertainment, Paramount International, Saban, and Warner Brothers. Prior to establishing his studio, he was Director of Creative Services at Live Entertainment (which later became Artisan Entertainment and was purchased by Lionsgate). Since 2003, he has worked on Star Sisterz, a collectable charm game for girls; Code Name Kids Next Door TCG; D20 Modern RPG books; and of course Star Wars Miniatures.

Leon Cortez Senior Designer
After graduating cum laude from the University of Southern Colorado with a Bachelor of Science; Major in Art degree, Leon Cortez spent the next several years in the apparel industry designing T-shirts and graphics for Tyvek jackets. In 1998, he started at one of the top merchandising agencies on the West Coast as a Senior Designer for their Consumer Products Division designing toy packaging. Working for this fast-paced agency, Leon gained a lot of solid experience, which has allowed him to excel in his current position as Senior Designer for Wizards of the Coast since 2004. According to Leon, “Working at a game company is a dream job. I get to work with a team of top designers, which keeps me learning and attaining new skills. The best part of my job is getting to play all day. I still enjoy being a graphic designer as much as I did fifteen years ago when I started.”