BEFORE

Client: Firestone Walker Brewery www.firestonebeer.com – www.nectarales.com

“The company is looking for a new label to broaden Hemp Ale’s appeal and increase its market share among 25- to 35-year-olds who embrace a healthy lifestyle…”

Firestone Walker Brewing Co. in Paso Robles, California, has grown in only a decade from a tiny microbrewery to a mid-sized company that makes award-winning craft ales for craft beer lovers. The brewery makes two types of ale. Firestone is its more traditional brand of British ales that’s made using a process uncovered in England by founders Adam Firestone and David Walker. On a smaller scale, they also produce Nectar Ales that appeal to a younger breed of beer connoisseurs who enjoy more unusual flavors and all-natural ales. One of these is a niche beer called Hemp Ale. It’s a brown ale brewed with sterilized hemp seeds to add subtle flavor and is something of a marketing challenge.

The company is looking for a new label to broaden Hemp Ale’s appeal and increase its market share among 25- to 35-year-olds who embrace a healthy lifestyle that includes organic foods, natural fibers, a focus on well-being, outdoor activities, environmentalism, and grass-roots politics. “We want to market the lifestyle through the beer,” says Jamie Smith, marketing manager of Firestone Walker.

The current label focuses too much on hemp leaves, he points out, and the company wants to downplay any association with marijuana. In fact, there’s no THC (the active ingredient in marijuana) in the beer. They’d also like to update the label’s clip-art look and artificial colors. “We’d like the label to have a natural, earthy look. Our goal is to emphasize the natural aspect, but we want it to be fun too,” he says.

All of Firestone Walker’s labels, including the one for Hemp Ale, are die-cut and have an oval-shaped top. For this project, the brewers asked the designers to create a 3-1/8×3-1/2″ label for a 12-oz bottle. The art is important because it goes on everything related to the beer: six-pack packaging, posters, advertising, and the bottles too. The brand should also correspond to what the customer expects it to look like. “Sometimes we’ll advertise a beer on the radio and later someone will tell us they couldn’t find it at the store. They didn’t connect the packaging with what they heard,” says Smith. “Successful packaging also draws new customers. If they like the way the package looks, they may try the beer.”

AFTER

DESIGNER: Kimberly Graham

“I knew from the beginning I wanted to include the font FF Erik Right Hand somewhere on the packaging, because it has a natural, earthy look to it.”

When I first began this project, I wanted to find out what other products in the same category looked like. I did a Google™ search for images using keyword phrases such as “organic beverages” and “hemp ale” to get an indication what kind of packaging already existed for this target market. I needed to visualize how this label could stand out from those of other products in the category, but also look as though it belongs with the other beers.

The challenge for this project was to give the label the natural look the company had asked for but still create a complex design. I knew from the beginning I wanted to include the font FF Erik Right Hand somewhere on the packaging, because it has a natural, earthy look to it. I used Matrix Extra Bold for the word “hemp” and made it smaller to deemphasize the relationship between the ale and marijuana. I created the background in Photoshop, showing hemp fabric in its natural state blending down into beer bubbles. I then masked it to the appropriate label size and shape in Illustrator and added the text.

ABOUT THE DESIGNER: KIMBERLY GRAHAM

Kim Graham graduated in 1991 from the Graphic Design and Advertising Program at Conestoga College of Applied Arts and Technology in Kitchener, Ontario, Canada. Since then, she’s worked for a variety of companies, including a design studio, a kitchen-product manufacturing company, a greeting-card company, and St. Jacobs Printery in St. Jacobs, Ontario, where she’s been employed for the last 11 years. She likes the challenge of creating new concepts that take into account both the client’s wishes and the reality of the market. Aside from graphic design, her other passions include poetry and psychology. She credits her son, Nicholas (her greatest influence), with reminding her that it’s okay to be silly once in a while.

APPLICATIONS USED: Adobe Photoshop CS2 and Adobe Illustrator CS2

AFTER

DESIGNER:Alicia Markey www.atomic17.com

“…I was influenced by the flowing curves of henna tattoos. I wanted the curves to flow throughout the design and blend into the background at times as smoke would.”

When I thought about the design for Hemp Ale, I kept in mind the very narrow demographic the company is reaching out to. I wanted the label to speak to them and match the clothes and jewelry they wear, the art on their walls, and the music they listen to. When these laid-back 25- to 35-year-olds see the label, it should make them feel comfortable, as if they were already familiar with it.

I began my design with the color palette—natural earth tones with a hint of energy. For the background, I used an image of burlap, but adjusted the colors to fit my design. For the drawn design superimposed over the burlap, I was influenced by the flowing curves of henna tattoos. I wanted the curves to flow throughout the design and blend into the background at times as smoke would. The type has a rustic feel to it. I used Times for the name of the beer, but gave it a heavily textured feel to make it worn and tattered-looking. In contrast, I used Myriad for the subheadings for a cleaner look. I didn’t want them to stand out as much, so I used type in the same color family as the background. Overall, I wanted the design to be edgy, yet reflect a laid-back lifestyle.

ABOUT THE DESIGNER: ALICIA MARKEY

Alicia Markey received a B.S. in Graphic Design from Drexel University. She has been a graphic design specialist at Cecil Community College in the marketing department since 2002. Before working at the college, Alicia held an internship at the Philadelphia Museum of Art where she was part of a team that designed and installed the Honami Koetsu Exhibit—shown for the first time in the United States. Alicia also does various freelance projects for clients, including the New York City Classical Guitar Society. Currently, she’s pursuing her graduate degree at Wilmington College in IST, specializing in Web/Internet design. Alicia’s interests also include swimming (far distances…too far for most to think sane), coaching, and spending time with her husband, Shawn.

APPLICATIONS USED: Adobe Illustrator CS2 and Adobe Photoshop CS2

AFTER

DESIGNER: Loredo Rucchin www.rucchin.com

“I used the picture of a young woman to suggest a holistic, active lifestyle among people in their twenties and thirties who do yoga and embrace physical, mental, and spiritual well-being.”

My overall design concept was to make the label convey something fresh, unique, and modern, yet give it an organic, natural feel, thus appealing to the target audience. I wanted to go with an earthy look, incorporating the unkempt trail pathway—with its wildflowers and dirt—against a clear blue sky. I used the picture of a young woman to suggest a holistic, active lifestyle among people in their twenties and thirties who do yoga and embrace physical, mental, and spiritual well-being.

The subtle background border shows the Hemp Ale color in all its golden glory. I also wanted to make the name “Hemp Ale” unique by using different fonts—Suburban and Triplex condensed—detailed with fine vertical lines.

I created the Hemp Ale logo and the Natural Ale banner in Illustrator and then placed them in Photoshop. But the majority of the work was done in Photoshop using layer masks and layer positioning.

ABOUT THE DESIGNER: LOREDO RUCCHIN

Loredo Rucchin lives and works in Vancouver, British Columbia. A self-taught designer with more than 12 years’ experience, he has worked with a wide range of mostly American clients—from gaming companies to pharmaceutical firms. He specializes in Web and print design and also does photography. Influences: director and producer Peter Jackson (love his knack for detail). Design likes: clean, modern, urban design. Design dislikes: tacky clip art and designs obviously executed in Corel Draw. His creativity is inspired by his wife and new baby, Lucas, who was born while dad was working on this makeover. Loredo, an Ironman competitor, loves pushing himself to the limit. He works an average of 16 hours a day on what he calls “fun projects.”

APPLICATIONS USED: Adobe Illustrator CS and Adobe Photoshop CS

Gather your images in Adobe Bridge

Adobe Bridge is the tool of choice for gathering, viewing, and sorting your images. Here are some tips for taking full advantage of Bridge’s capabilities:

STEP ONE:
In Bridge, create and name a folder (File>New Folder) to hold the images that you’re considering for review (we named ours Presentation_Alaska Images). Move this folder to the Favorites tab (File>Add to Favorites) so you can quickly locate it during the re-view process. Option-drag (PC: Alt-drag) to place copies of the image files you want to re-view into the new folder in the Favorites tab.

STEP TWO:
Label and sort through your images using Bridge’s star rating and/or color la-bels (in the Label menu) and filtering system (the pop-up menu near the top right of the Bridge window). Drag-and-drop the files to manually sort the order in which you’d like to have the images processed in Bridge. Note how the filtered image set shown here has TIFF, JPEG, EPS, and even PSD images of varying resolutions and encompassing both RGB and CMYK color spaces.

Create Photoshop sharpening action

Although this step won’t happen until later, you’ll want to sharpen your images once their dimensions have been altered. To be able to automate this process, you should create a Photoshop action now.

STEP ONE:
Open any image and activate your Actions palette (Window>Actions). Click the Create New Action icon at the bottom of the Actions palette. Name the action “RGB_Lab_USM_RGB.” Click Record.

STEP TWO:
Choose Image>Mode>Lab Color and select the Lightness channel in the Channels palette. Next, choose Filter>Sharpen>Unsharp Mask (or Smart Sharpen if you pre-fer). Enter your settings and click OK. Select Image>Mode>RGB Color. Click the Stop Play-ing/Recording icon at the bottom of the Actions palette.

Note: You’re converting to Lab and applying sharpening to the L channel to prevent the creation of any color shifts along high-contrast edges. You’ll return to this action shortly.

Control image characteristics in the Image Processor

One of Photoshop CS2’s great productivity-enhancement tools is the Image Processor, which allows you to address many characteristics in one dialog. And even better, you can access this tool through Bridge.

STEP ONE:
Through the use of Bridge’s filtering tool (here the five-star label), make visi-ble only the images you want to include in your presentation. Alternately, you can Com-mand-click (PC: Control-click) on just the images you want included, but I suggest filtering your view. Press Command-Shift-A (PC: Control-Shift-A) to deselect all the images. This will inform Bridge to automatically process all the images visible in your Bridge window.

STEP TWO:
Select Tools>Photoshop>Image Processor. In the Image Processor dialog, check that all images (we had 10) are set for processing, and then turn off the option to Open First Image to Apply Settings. In the next section, click Save in Same Location. This will cause the Image Processor to place the processed images in a subfolder within the current folder. In the File Type section, check Save as JPEG, set the Quality to 10, and turn on Con-vert Profile to sRGB (for consistency with Web viewing). Next, check Resize to Fit and set Width and Height to 800 pixels. This sets the largest image dimension, whether landscape or portrait orientation, to 800 pixels, so you need not process portrait and landscape images separately. In the Preferences section, check Run Action then select the RGB_Lab_USM_RGB action you created earlier. This instructs the Image Processor to con-vert and sharpen each image after resizing. Add your Copyright Info and check Include ICC Profile. Click Run and your images will be processed and converted into consistently sized, formatted, color space controlled, and sharpened images and placed in a subfolder labeled JPEG.
Note: If you get an error message, go to Edit>Color Settings in Photoshop and select Off in the RGB pop-up menu in the Color Management Policies section and try again. [For more on the Image Processor, see Taz's article in Layers Jan/Feb 2006.—Ed.]

Create your collaborative document

Your document format of choice for collaborative view and commenting is PDF. Once again, you can access all the tools you need through Bridge.

STEP ONE: Access the JPEG processed image folder created above. Don’t select any im-ages, so Bridge will automatically include them all.

STEP TWO:
Select Tools>Photoshop>PDF Presentation. Configure the PDF Presentation Dialog to create a Multi-Page PDF, rather than a Presentation, as you expect your collabora-tors to view and comment on you images at this point. Note: Acrobat provides a complete set of Presentation controls that you can apply later.

STEP THREE:
Name your PDF document and save it in the same folder as your images. In the Save Adobe PDF dialog that appears, choose Compression from the list on the left. Set Options to Do Not Downsample and Compression to None (you’ve already controlled these characteristics in Photoshop). Next, choose Output from the left and set Color Conversion to No Conversion (again, you’ve already controlled this in Photoshop). If you like, you can choose Security and configure it to allow commenting on, but not editing to, the PDF. Be sure to record any passwords you use. Click the Save PDF button to create your PDF.

Note: If you intend to often create these types of custom PDFs with these settings, you might consider creating an Adobe PDF Preset with these settings to speed up their selection and ensure consistency.

Document collaboration in Acrobat

Open your PDF document in Acrobat and click on the Pages tab on the left. You can now sort your images by dragging them around this panel. Your PDF is ready for you to add in-structions and/or comments and to send on to your collaborators.

In Part 2 of this tutorial, we’ll cover using the collaboration tools in Acrobat to comment on the document and share feedback. Click here to begin reading Part 2 now.

There are many ways we see color. We see colors reflected off of magazine pages and billboards; we see colors in light emitted from television screens, monitors, and cell phones; and colors are “seen” and “re-represented” by capturing existing objects with our digital cameras and scanners.

With all these mediums, the definition of a “color” changes depending on the device. And by “definition,” I mean how the color is perceived by our eyes, not the digital settings that define the color.

So if you have a color you’re trying to reproduce, you can play around with the color settings and eventually you’ll get one device’s color to look exactly like another device’s color. The problem is, who has that kind of time?

Why colors “change”
Each manufacturer has a different way their devices represent color. Two different digital cameras set side-by-side to take the same shot will still represent the subject differently. One brand may have a greater sensitivity for capturing color, while another brand is better at capturing detail and tonal range. The same is true for printers, monitors, and televisions, even though we can feed these devices the exact same colors.

In addition to manufacturers and devices, there are also two color spaces to keep in mind. Our eyes see and process colors in RGB. This is the same color model for all devices that emit light. However, for any printed surface, we see reflected light. Unfortunately, after colors are reflected from a surface, the color properties do not mix the same way anymore; meaning red and green no longer make yellow. The four-color process was developed as a way for us to re-represent colors we see in the natural world. This color model, CMYK, is the standard by which we mix colors on surfaces (remember blue and yellow making green in grade school?).

Lastly, we have colors that are premixed, just like getting a custom gallon of paint at your home improvement store. In commercial printing, there are a few manufacturers widely used such as Toyo (www.toyoink.com), Pantone (www.pantone.com), and TRUMATCH (www.trumatch.com) to name a few. However, these colors still need to be represented using reflective color properties.

RGB is what our eyes see and the color model for devices that emit light.

CMYK is used for the printed page—the color properties in reflected light do not mix the same as colors in emitted light.

Swatches show examples of premixed colors.

The fact that we design and develop our files on a computer means that all colors we specify are represented in RGB on the monitor, even if the color is representing a CMYK color. Scanners and digital cameras also need to use the RGB color space because they are capturing light, the same way our eyes do. This means that all workflows involving printing on physical surfaces must involve RGB as well as CMYK.

Setting up your project
The solution to changing colors is called “color profiles.” Most devices have a color profile that describes how that particular device represents a series of colors. These profiles typically follow a format provided by the International Color Consortium (ICC) as a way for manufacturers to define how their device represents color. These profiles are used in conjunction with your color management software to create a set of “rules” for how colors are supposed to behave. Adobe’s color management software, built into the Creative Suite 2, uses these profiles along with its own color settings files (CSFs) to create workflows for you to choose from.

The easiest way to choose a color management workflow is to use Adobe Bridge. When you select the Bridge Center in the Favorites tab, you’ll see the Color Management button in the bottom center. You may also notice that this button will give you instant feedback on whether the applications in the suite are synchronized, meaning, they are all set to use the same CSF files. If they are synchronized, Bridge will tell you so. If not, that means at least one of the applications is set to use different color settings.

The Bridge Center lets you know immediately if your Adobe applications are synchronized or not.

To make a selection for color management, click the Color Management button, and you will see a list of predefined color setting files. These predefined settings include brief descriptions to help you decide which settings are best for your project. Adobe has provided a list of the most commonly used settings in the publishing industry. In addition, if you select the option for Show Expanded List of Color Settings Files, you’ll see even more settings.

And, of course, you can make your own color settings as well. To create your own color settings file, start with any Creative Suite application and choose Color Settings from the Edit menu (in Acrobat, select the Color Management category in Acrobat>Preferences [PC: Edit>Preferences]). Once you create and save your custom settings, you’ll see this new CSF option available in all of the other Creative Suite applications. What’s more, you can use Bridge to deploy these settings to all of the other applications, as well.

The “anatomy” of a color settings file includes your Working Spaces and your Color Management Policies. A Working Space tells the Creative Suite how you would like the different color models to look both onscreen and when printed. In the top option of the Working Spaces is the RGB setting. This will control how the monitor represents your colors. Adobe recommends using sRGB for Web graphics and Adobe RGB for printing (since it includes some printable colors in its gamut). The CMYK settings are used when printing your documents. These settings are supplied based on standard commercial print conditions.

Color Management Policies are set to represent files that were created before you started with color management—files from cameras, scanners, or from other people. When you’re using Color Management and you get a file that has no profile, or a different profile, you can tell the Creative Suite applications how you would like to represent the colors in that file. Your options include converting the colors to your settings, preserving the settings in the file, or preserving the numbers and ignore linked profiles. This process will give you more consistent color representation across a wide range of files and sources.

Evaluate your colors and begin management
Now that we have chosen some settings, now what? Well, it’s important to realize that these settings do not change the information in your files. You can think of color management as “stylesheets for color.” The actual numbers that represent a color in a file are constant; however, the color settings you choose affect the way that color is represented onscreen and on paper. It’s the same idea as changing the font used for a headline; the actual words in the headline remain the same, just the display looks different. In the example shown below, we have a color we would like to be represented both onscreen and on paper, and to be accurately captured from our scanner. As we discussed earlier, each device is representing the same color a little differently.

After choosing a color workflow that best represents the equipment you’ll be working with, you can start to see how the device profiles are taken into account when applying your color management settings. In the example, we are still replicating the same color; however, the settings for each device have changed as they attempt to replicate the desired color. Again, the original color has not changed from the previous example; but the color combinations for each device have changed.

You can make a few test prints and screen adjustments to fine-tune your settings if you wish, and use Bridge to set the rest of the applications. It’s also a good idea to talk with anyone you share files with, such as your commercial offset printer, video production house, or Web development company, and see if they have specific color profiles or color management in place that you can take advantage of when preparing files for their equipment.

Apps without color management
Sometimes you may need to use applications that do not have their own color management component. For example, the current version of Flash doesn’t support color management—directly. If you have color management activated at your system level, you can successfully translate colors by making sure the operating system is set up with the same RGB profile that you’re using in the Creative Suite. On the Macintosh, use the Color tab located in the Displays pane of the System Preferences; for Windows use Adobe Gamma in the Control Panels.

Once these settings are consistent, you can save a file from Photoshop, Illustrator, or from GoLive as a SmartObject and import the resulting image into Flash. The display of the colors in Flash will match the display of the same colors in the rest of the Creative Suite. This will be the case for most applications that support color settings provided by the operating system.

When you get a new piece of equipment, such as a new color printer that supports RGB, or a new fancy widescreen LCD monitor, how do you add the device into your workflow? When adding a new device into a color management workflow, the device will be treated as if it supports the current profiles. So for example, a new monitor and printer by a manufacturer who already has established profiles will most likely have built the same color management into their device. If you find, however, the device does not “plug-and-play” nicely into your color workflow, there are a few things you can check.

1. Check with the manufacturer about their support for ICC profiles. Find out which profiles they support.

2. Refer to the ICC website at www.color.org to see if the device is listed.

3. Check Adobe.com (www.adobe.com/support/downloads) for updated ICC profiles that may include your new device.

If you still need to tinker with the device’s performance, you may have to create your own custom CSF. From any of the Creative Suite applications, go to the Edit>Color Settings (for Acrobat, go to Preferences>Color Management). Under the RGB and CMYK pull-down menus, make alternate selections based on similar devices or color spaces. For the Gray and Spot options (for printers), choose dot gain amounts that will correct your test prints. When you select Save, name your profile; it will then be available to all other applications in the Creative Suite. You can even use Bridge to set all applications to your new color settings at once.

Dealing with fonts is a complex puzzle when you add in all the variables. On any given day, you have to deal with different computer operating systems, multiple font types, conflicting font names, corrupt fonts, type reflow, and the list goes on and on. Keeping your fonts organized and checking for any corrupted or damaged fonts goes a long way to keeping your design workstation happy and healthy.

Let’s take a look at some of the things you can do to keep your fonts under control and improve your productivity. We’ll start by figuring out what types of font formats you are likely to encounter, work our way through organizing and managing your font library, and check out some options for dealing with damaged and corrupt fonts, too.

A rainbow of font flavors
Over the years, several font file formats have emerged. Knowing which type you can use, and where, helps prevent headaches and hair pulling. Here’s what we’re up against:

TrueType: There are actually two versions of TrueType: One for the Mac and one for Windows. The Mac version of TrueType is compatible only with the Mac, although Mac OS X can use Windows TrueType fonts. Windows is limited to its version. At least on the Mac, TrueType is something of a cross-platform format.

TrueType fonts are sometimes called bitmap fonts because each type size is built pixel by pixel—in essence, a bitmapped image. Since it would take an insanely long time and make massively huge font files, TrueType fonts tend to be limited to only a few type sizes. For example, a specific version of Times Roman may come in 9, 10, 12, 14, 18, 24, 36, and 72 point sizes. If you want to use 42 point, your workstation has to take a guess at what the type size should look like, and you often end up with something that’s jagged and not at all like what you intended.

If you use TrueType fonts, stick with the included type sizes. Straying outside the available type sizes is likely to cause output problems later in your workflow. A lot of direct-to-plate and direct-to-film output devices will change your nonstandard type sizes to Courier.

PostScript Type 1: For years, PostScript fonts were the preferred standard in the design industry. Most professional and high-end output devices, such as laser printers, film and plate output systems, and proofers use the PostScript language to process your print jobs at the device instead of in your computer.

PostScript fonts have the advantage of not requiring specific type sizes in the font file. Instead, they use vector information, much like Adobe Illustrator, to scale your type to near infinite sizes without quality loss. They also have the disadvantage of being limited to either Mac or Windows. PostScript fonts are not cross-platform.

This font format includes two files for each typeface. One is the screen font, which represents your typeface on your computer display; the other is the printer font, which the printer uses when you output your file. Lose either one, and your document looks wrong either onscreen or when it prints.

OpenType: OpenType is the new emerging standard in font technology. This file format is truly cross-platform, so your documents look the same on a Mac or Windows workstation. They can contain far more typeface and typestyle information than their TrueType and PostScript counterparts, including ligatures, true fractions, multiple languages, and more.

Adobe co-developed the OpenType standard with Microsoft, and all of the Creative Suite applications are fully OpenType compatible. Stray from the Adobe fold, however, and you may run into problems. Some design applications are not fully OpenType compatible, so you may not have access to all of the characters in the typeface.

Outputting documents with OpenType fonts shouldn’t be a problem, but some older output devices may choke on them. If you haven’t been working with OpenType yet, be sure to run a few tests with your output house, service bureau, or print provider before running a real job. It’s always better to uncover potential problems before you get a paying job on press.

Font management, or the art of typeface juggling
Unless you work in a totally isolated environment, never exchange documents with other people, and are limited to using a small handful of fonts, you need a font management application. Without one, there are too many places where problems can crop up, and they always happen at the worst possible time: like when a client or your boss is looking over your shoulder.

It’s almost as if fonts breed. No mater what you do, there always seems to be more and more fonts on your computer every week. Keeping track of where they come from and which jobs they are for can become a nightmare. Because there’s no real control over font names, you can end up with several versions of a font with the same name. This one is easy to check: Ask other designers how many versions of Helvetica or Times they have. Without a font manager, it’s almost impossible to tell them apart.

Most of the fonts that end up in your ever-growing library tend to have a shady past. Because you have no way of knowing where a font really came from, or if it’s damaged before you get it, a font manager may be your only line of defense against the dreaded crash. Corrupt or damaged fonts can cause stability problems with the Creative Suite, and in some cases, they can cause system stability problems. To Mac users, that potentially means the gray kernel panic screen; to Windows users, that’s the dreaded blue screen of death.

I’ve noticed that software developers lean a little more toward the Mac side when it comes to marketing font management applications. Although there are several shareware font managers for Windows, there’s not much available in the commercial market. Mac users, on the other hand, have quite a few commercial offerings along with a substantial number of shareware picks.

Some people believe it’s okay to manually add fonts to your system so they are always loaded and available to all of your applications. If you only have a couple of extra fonts, that’s probably okay. In the design world, however, that’s almost never the case. Without a font manager, your library will soon grow to an unmanageable level, you’ll start to see fonts with similar names conflicting, and it will be almost impossible to be sure you’re using the correct font for any given project.

Instead of running through a long list of all available options, let’s take a look at a couple of the commercial offerings, and what they can do for you.

ATM (R.I.P.): For the strong commitment Adobe has made to designers, it certainly is lacking in its font support. The company axed the Mac version of its font manager, Adobe Type Manager Deluxe, when Apple transitioned from Mac OS 9 to Mac OS X a few years ago. It followed suit and discontinued the Windows version about a year ago. Adobe offers no support for the product, so if you still use it, you’re on your own.

Translation: It’s time to move on. There are options available for both Mac and Windows that offer better compatibility, more features, and better performance.

Suitcase: For the Windows crowd, your commercial options are pretty much limited to Suitcase 9 from Extensis (www.extensis.com). It’s compatible with Windows 98SE and higher, and includes a free copy of FontDoctor for Windows. If you’re using Windows 98SE, you also need to install the included copy of ATM Light 4.1 for PostScript fonts to display properly onscreen.
Mac users can take advantage of Suitcase Fusion. This new version was released at the beginning of the year, and is a blending of features from Suitcase X1 and Font Reserve. At one time, Font Reserve was a competing font manager for the Mac, but was acquired by Extensis a few years ago.
Suitcase supports auto-activation of fonts in InDesign and Illustrator, but not in Photoshop. Auto-activation lets Suitcase find the correct version of a font in its database and open it for you. If there’s more than one font with the same name on your computer, it will do its best to match the correct version to your document. You can also create sets to better organize your font library.

Suitcase Fusion for the Mac (left) may have more features, but its Windows counterpart, Suitcase 9 (right), is still a capable font management tool.

Font Reserve: As mentioned above, Extensis purchased DiamondSoft’s Font Reserve a few years ago, and blended some of its features into Suitcase Fusion. The Mac version of Font Reserve has been discontinued, but the Windows version is still available. Its days are certainly numbered since Extensis is working to add Font Reserve features to the next Windows version of Suitcase.

FontAgent Pro: Insider Software’s FontAgent Pro (www.insidersoftware.com) is available only for the Mac, and it lets you auto-activate your fonts, create sets, and check for conflicts like Suitcase does. It’s a powerful and capable font manager, and has an easy-to-use interface. Mac users have the luxury of trying both applications and deciding which works best for them.

FontAgent Pro’s flexible viewing options let you list your fonts the way you want. List all of your fonts (left), and see which sets they are assigned to. Viewing by sets (right) hides the fonts you aren’t interested in.

Making fonts work for you
It doesn’t matter what font management tools you have if you can’t use them effectively. Because there’s no single answer to address every creative professional’s work style, you need to find a procedure that works best for you and stick with it. Look at these tips as guidelines to help you forge your own font workflow:

• Choose a location on your hard drive for font storage. This can be a directory dedicated to project fonts, or it may be a location in each client’s job directory.
• Group fonts in Suitcase or FontAgent Pro in a way that makes sense to you. If that’s by typeface or font style, great. Or maybe grouping fonts by client or project works better for you.
• Only activate the fonts you need for the job you’re working on. Activating every font in your library isn’t really any better than loading them into your operating system manually. There will be too many to easily work with, which impacts productivity, and you may accidentally select the wrong font for the project you’re working on.
• Deactivate fonts when you aren’t using them. If you finish a project that uses one version of Helvetica, then start a second project that uses a different version before shutting off the fonts you are finished with, you run the risk of unintentionally using the wrong font version. Using the wrong font version can lead to type reflow, leading and tracking problems, and unhappy clients.

Share and share alike
If you work alone, it’s easier to keep track of the fonts that belong with each job. But if you’re part of a larger group, shuffling fonts from machine to machine costs time, and someone is bound to mix them up. That’s where font servers come in: These specialized applications sit on a computer that acts as a font babysitter, keeping a central repository of your agency’s font library. Users can access the fonts and font sets that the server manages, ensuring everyone uses the same fonts for each project they collaborate on. Each workstation still needs to have its own font manager application; otherwise, it can’t talk with the server.

Both Extensis and Insider Software offer font server packages, although Suitcase Server is the only cross-platform option at the moment. Suitcase Server is not compatible with Suitcase Fusion, and instead relies on Suitcase 9 for Windows, and a special version of Suitcase X1 for the Mac on client machines.

FontAgent Pro Server is compatible with FontAgent Pro; and in smaller workgroups, FontAgent Pro’s Workgroup Edition may meet your needs. The Workgroup Edition lets each Mac share its fonts with the other workstations on your network, but your font library is distributed amongst each computer instead of centralized.

When good fonts go bad
Just because a font is working for you today doesn’t mean it will tomorrow. Other times, a client or another designer may provide you with fonts that just don’t work. Luckily, Extensis and Insider Software both offer utilities to help straighten out your problem fonts. Suitcase includes FontDoctor with the boxed version of the application, but Insider’s Smasher is a separate product.
FontDoctor is fairly good at repairing damaged and corrupt fonts on both Mac OS X and Windows. Mac users, however, may want to take a closer look at Smasher. This utility also lets you get inside font suitcases and reorganize typefaces, compare the contents of multiple suitcases, convert Mac OS X system dfonts into TrueType fonts, and more.

Keep in mind that font repair utilities aren’t magic bullets to take away your font woes. If a font is beyond repair, your only option is to try and find an undamaged version, which often means tracking down the original font file.

FontDoctor ships with Suitcase and helps you track down missing, corrupt, and otherwise defective fonts. It’s available for Mac OS X and Windows.

Smasher can pull typestyles out of suitcases, convert dfonts to TrueType, display font permissions, and more.

On the road to font organization
Keeping your fonts under control is more than just buying the right applications to help out. It also involves weeding out irreparable fonts, organizing your library, and a healthy dose of self-discipline. If you’re starting with a tangled mess of fonts, the road may be long and full of headaches, but the payoff is well worth it: a faster, more stable workstation; a streamlined workflow; and the happy, warm feeling of being in control.

Glyph notes
The distinction between the terms “character” and “glyph” became important when Unicode was adopted by Apple, Microsoft, and the world’s font vendors to identify all the characters in a font. Before Unicode, Mac OS used one numbering scheme and Windows used another. Fonts for non-Western languages used the same numbers for other characters. Cross-platform, cross-border communications were nightmarish.

Unicode assigns unique numbers to more than 100,000 characters used for typesetting the world’s languages. Unicode distinguishes between characters (a capital E, for example) and the symbols, or glyphs, that represent them. So Unicode’s number for an E (0045) is the same for an italic E, a swash E, or an engraved E. No matter what computer system character 0045 appears on, it’s always a recognizable E.

So now when we talk about what’s inside a font, we talk glyph sets, not character sets. This also explains Adobe InDesign’s and Adobe Illustrator’s Glyphs palette’s curious name.

Font exploration
Finding the glyphs you want is a headache because today’s fonts have no standard glyph set. PostScript Type 1 fonts contained only 228 printable glyphs, but almost all text faces conveniently contained the same glyphs. TrueType and OpenType fonts can contain over 65,000 glyphs, but there are no standards for what a font might contain. Even Adobe’s “Standard” OpenType fonts don’t all have the same glyph set (although most do): Poplar Standard contains about 250 glyphs; Minion Standard, more than 350. The same goes for Adobe Pro fonts.

This is a typical glyph set for an Adobe “Standard” OpenType font, although some fonts with the “Standard” moniker don’t follow suit. It only has as handful of characters more than a PostScript Type 1 font.

The Mac’s Character Palette (found in Font Book under Edit>Special Characters) and the Character Map in Windows (Start>All Programs>Accessories>System Tools) are handy tools for exploring fonts and copying glyphs into your documents, but Adobe’s Glyphs palette (found in the Type menu) is better. The default view, set in the Show pop-up menu, is Entire Font, but if you click on this menu you see which subcategories of glyphs lurk within your chosen font. Note that what are often called “standard” ligatures may be anything but.

If a square for one of the characters in the Glyphs palette grid has an arrowhead in the lower right, that character has alternate forms. Click-and-hold the mouse button over the arrowhead and these forms appear.

The Glyphs palette shows that the Adobe Garamond Pro 4 has nine possible forms, most of which share the same Unicode number, or code point. Only three have unique Unicode IDs: small caps (upper right), superior (center), and inferior (center right).

To get a glyph into your text from this palette, double-click on the glyph. To insert an alternate form of a glyph from its pop-up submenu, hold down the mouse button, drag the cursor until the character’s frame is highlighted, then release. In both cases, the glyph will appear at the active cursor position in your text.

Getting organized
If you have a font management program, use it to round up fonts with similar glyph sets. A font management program can include a single font in multiple font sets, so the same font could be filed under “old style numerals,” “fractions,” and “small caps.” The time you spend classifying your fonts will be repaid many times over.

A powerful tool in InDesign (but not Illustrator) is the ability to create custom glyph sets: a sort of glyph bulletin board so you never have to search for the same obscure glyph twice. To create a new set, Control-click (PC: Right-click) on any glyph in the palette and choose New Glyph Set from the pop-up menu. Name it when prompted and click OK. Now select a glyph in the grid by clicking on it once. Control-click (PC: Right-click) again and drag the cursor over Add to Glyph Set. A list with all existing glyph sets appears. Click on the one you want to add the glyph to, and you’re done.

You can create sets combining glyphs from any number of fonts: font-specific sets, job-specific sets, whatever. (Mac users note: Popular keyboard symbols such as the Command, Shift, and Return are found in the Chicago font.)

To get a glyph out of a set and into your text, select the set from the Show pop-up menu. A double-click on the glyph of your choice copies it into the text at the active cursor position.

If you use both InDesign and Illustrator, glyph sets are a good reason to set complex type in InDesign and then export it to Illustrator. You can move your text using copy-and-paste or drag-and-drop.

Automatic glyph substitution
Sometimes you’ll want to make wholesale insertions of unusual characters. Fortunately, OpenType fonts allow for the automatic substitution of one glyph for another. For example, if your chosen font supports it, the keystrokes 1/8 can be turned automatically into a true fraction.

To find out which of these automatic substitutions are supported by a font, select the font in the Character palette, click the palette’s flyout menu, and drag the cursor to OpenType. All automatic glyph-substitution options are listed, whether or not the font offers them. Those not supported appear in brackets (e.g., [Swash], as shown). Clicking on one activates it.

An OpenType font’s automatic glyph-substitution options are revealed in the Character palette menu. For Adobe Garamond Pro, shown here, all options except Swashes are available.

Warning: Virtually all fonts include the fractions 1/4, 1/2, and 3/4, and when most OpenType fonts claim to be able to create fractions automatically, they are only referring to these three. To create other fractions, a font must contain a full set of numerator and denominator glyphs, and most OpenType fonts don’t. So while 1/4 may be converted, 5/8 will stay 5/8. To check for fraction-building characters, use the Glyphs palette.

Because OpenType glyph substitutions are activated through the Character palette, it’s easy to build them into character styles, which is, in fact, the best way to use them.

PostScript Type 1 & the Glyphs palette
One last thing: Don’t let old habits handcuff you. Adobe’s Glyphs palettes let you access characters that used to be off-limits in PostScript Type 1 fonts. Mac users can now get at those 1/4, 1/2, and 3/4 fractions, not to mention real multiplication and minus signs, and Windows users can finally get their mitts on fl and fi ligatures.

In this example, we’ll use the new Premiere Pro 2.0 to solve your problem. You can correct a range of a specific color in a clip by using the Secondary Color Correction controls. For example, to change the color of a yellow piece of paper without affecting any other colors in a shot, you narrow the range of the color correction to only the yellows of the paper.

Here’s the original image that needs to be color corrected.

STEP ONE:
If necessary, click the Project panel tab to bring it forward and drag your video clip to the Video 1 track in Sequence 01.

STEP TWO:
Move the current-time indicator to the point where the paper is unfolded and centered. In the Program panel, note how the paper looks washed out and has a slight blue tint. We’ll give it a strong orange-yellow color without affecting other colors in the shot.

STEP THREE:
Drag the Three-Way Color Corrector from the Effects panel to the clip. In the Effect Controls panel, click the triangle next to Three-Way Color Corrector to expose the effect settings.

STEP FOUR:
Scroll down to the Secondary Color Correction options and click the triangle to expose the controls. Select the Eyedropper tool next to Center and click the yellow paper in the Program panel.

STEP FIVE:
In the Effect Controls panel, scroll up and set the Output pop-up menu to Mask. This setting creates a black-and-white mask, where white indicates areas to be color corrected, as determined by the color you selected with the Eyedropper tool.

When working with a mask, it’s the white areas that will be color corrected.

STEP SIX:
Select the Add Eyedropper tool, which you’ll use to increase the area to be corrected. Note that the mask is turned off temporarily. Select another yellow area of the paper. Repeat until all of the yellow areas appear as white in the mask.

STEP SEVEN:
If you need to remove white areas from the mask, select the Subtract Eyedropper and then select the areas to remove.

STEP EIGHT:
Set the Tonal Range pop-up menu to Midtones. Adjust the color of the paper by setting the midtones. This adjustment setting will completely depend on your video clip and the object you’re color correcting. However, here are the values that were used in this example: set Midtone Balance Magnitude to 58, Midtone Balance Gain to 50, and Midtone Balance Angle to –139˚.

STEP NINE:
In the Effect Controls panel, set the Output pop-up menu to Composite to view the color correction. The paper should now be a color that really stands out, and the skin tones and background colors should remain unchanged.

Here’s the original image along with the final color correction. Notice how the color of the paper is changed while the skin tones and background stay the same.

Tip: Would you like to do the exact opposite of this technique? If you want to color correct everything in the clip except the yellow paper, then choose Invert Limit Color, the last option in the Effects Controls panel.

Planning in advance, or “seeing,” what can be done to an image in Adobe Photoshop CS2 is an important part of the photography process. To illustrate my points, I’ll use a photograph (RAW file) that I took on a once-in-a-lifetime Antarctica expedition in December 2005.

How do you “see” the end result? Well, having lots of experience taking pictures and working and playing in Photoshop helps. Talking to yourself, or rather asking yourself when you’re photogra¬phing if a particular technique would look cool, is another method—but don’t talk out loud if you’re with other photographers because someone might think you’re losing it!

Some of the following techniques, admittedly, are quite simple. However, oftentimes, when you keep it simple, that simplicity unlocks a new way of seeing—and thinking.

My vision

The iceberg photo was taken knowing that lens flare, created by direct light falling on the front element of the lens, was dominating the upper left of the frame, ruining, in my mind, a full-frame image. However, my goal was not a full-frame shot. Rather, I envisioned a panoramic-type image of the dramatic iceberg with much less sky. Using my Canon 17–40mm lens set at 17mm on my EOS-1Ds Mark II (with full-frame image sensor), I had to compose the scene in this manner from a bobbing Zodiac to get the very wide-angle effect I envisioned.

What’s more, I saw a black-and-white image rather than a color image. Why? Because I like the look of black-and-white images and monochromatic landscape scenes, and all the blue in this scene created somewhat of a monochromatic image anyway. Naturally, getting a good exposure was essential. So I checked the histogram and the overexposure warning on my camera’s LCD monitor to make sure I was not losing any highlights. My ISO was set at 100 for the cleanest possible (least amount of digital noise) image.

STEP ONE:
The first order of business is to remove the lens flare and create a panoramic image, which is accomplished with the Crop tool (C). Click on a point in the image where you want your crop to begin and drag diagonally across the image. You can fine-tune your crop with the arrow keys. Press Return (PC: Enter) to commit the crop. Hey, I’m talking about using Photoshop here, and not Camera Raw. Of course, it’s better to crop and make exposure and color adjustments in Camera Raw. In fact, you should make as many image enhancements as possible in Camera Raw before opening an image in Photoshop. We’re working in Photoshop here for those JPEG shooters who may not have totally converted to shooting RAW files, yet.

STEP TWO:
It’s good technique to use adjustment layers for nondestructive editing. To create the black-and-white image, click on the Create New Adjustment Layer icon (half-black, half-white circle) at the bottom of the Layers palette and choose Hue/Saturation from the pop-up menu. In the Hue/Saturation dialog, drag the Saturation slider all the way to the left (–100) to desaturate the image and click OK.

STEP THREE:
After desaturating the image, it looked a little flat. So, we boosted the contrast by clicking the Create New Adjustment Layer icon at the bottom of the Layers palette and choosing Brightness/Contrast. Drag the Contrast slider a little to the right (we used to give the image more dimension.

This is the image that I saw in my “mind’s eye” when I first observed the magnificent natural ice sculpture. I actually thought about Ansel Adams, perhaps the best-known landscape photographer of all time, and his use of black-and-white techniques to remove some of the reality of the scene. When we remove color from a picture, we remove some of the reality.

Same image; another view

Let’s take a closer look at the same iceberg. I envisioned a tighter shot—actually a tight, square image. This is a picture within a picture, and training our eyes to see that picture within a picture offers us additional creative possibilities.

STEP ONE: For the second version of the iceberg image, open the original file, choose the Crop tool, and crop a square frame around the picture within a picture. Press Return (PC: Enter) to commit the crop.

STEP TWO:
The image looks a bit flat, so click on the Create New Adjustment Layer icon and choose Brightness/Contrast. Drag the Contrast slider to the right a bit to boost the contrast (here it’s 12) and click OK. Overall, the picture looks better.

STEP THREE:
As opposed to the opening picture in this article, the goal here is to maintain a full-color image; however, we’re not satisfied with the color. Click on the Create New Adjustment Layer icon and choose Hue/Saturation. Drag the Saturation slider to the right to boost the Saturation (ours is 19) then click OK.

STEP FOUR:
To further increase the saturation and make the image darker, click the (you guessed it) Create New Adjustment Layer icon and choose Curves from the pop-up menu. To achieve the desired effect, we pulled the Curve down a little from the center point. Click OK when you’re satisfied with the result.

Compare this image to the original. You might agree that this picture has more impact. Whatta ya think?

So, I leave you with an important, although not-too-original thought: Think before you shoot.

Flash Video is becoming an increasingly important topic in design. If you want to use Flash to put your video on the Web, odds are (to save file size) that you’ll want to stream the video rather than embed it into the SWF. That being the case, you’ll need to learn how to hook your Flash files into Flash Media Server 2 (FMS2). You’ll need to do a little coding; but the code is quite simple and can be easily reproduced in almost any situation.

In this simple tutorial, we’ll set up the media server on your local machine, convert a video to an FLV file, and then add some controls for the video.

One word before we begin. Unfortunately, Flash Media Server 2 is only available for the Windows and Linux environment. However, if you’re a Mac user (or you don’t want to purchase FMS2) and you subscribe to a service that uses FMS2 for streaming media, such as VitalStream, you can use this technique.

STEP 1 Download Flash Media Server 2
The first step (if you’re using a Windows or Linux machine) is to download Flash Media Server 2. You can find it at www.macromedia.com/downloads. It’s an easy download at about 7.5 MB. And it’s self-installing. While it’s installing, you will be prompted for a username and password. Choose any you want.

It will install in the directory: C:\Program Files\Macromedia\Flash Media Server 2. This will be important in a bit. (Don’t forget that if you want the benefits of Flash Media Server but don’t want to set up and maintain streaming servers, you can use a streaming service like the one mentioned above.)

STEP 2 Create New Flash Document
Start a new Flash document and save it in the directory of your choice with the name of your choice.

STEP 3 Select Video
For this tutorial, you can either use your own video or, if you don’t have one, you can download a sample video at www.footagefirm.com. This is a great company for stock footage. I chose the San Francisco sample clip, which is about 53 MB and AVI in format.

STEP 4 Import Video
Before you can use the video in Flash you must convert it to an FLV format. This is easy to do. Just select File>Import>Import Video. Browse to the location of the video you want to convert.

STEP 5 Choose Deployment Method
After clicking Next, select the Progressive Download from a Web Server option to use the Flash Media Server. If you use a streaming service, such as VitalStream, select Stream from Flash Video Streaming Service. The other two options assume you’re going to use the older Flash Communications Server (which Flash Media Server 2 replaces) or embed the video in the SWF file.

STEP 6 Choose Compression Rate
Select Next again and you’ll see a preview of your video. This is also where you can set the compression rate for the output. If you set it too low, you lose some quality; if you set it too high, your file sizes become too large. I find that the default setting of Flash 8-Medium Quality (400kbps) works fine for most situations. You may want to experiment with different settings on your own.

STEP 7 Select a Skin for the Player
After clicking Next, you can select a skin for the controls around your video. Select any one you want. Note: If you want to customize the controls, you should select None and then add the controls manually using Video Components in the FLA file. Click Next and Finish. This will allow On2 compression to convert your video to an FLV file and compress it.

STEP 8 Compress Video and Preview
When it completes, several remarkable things have happened. First of all, the Flash FLVPlayback component is on stage and ready to roll. You can preview your video now. (Note: When you preview, you may need to enlarge the window to see the controls—you’ll not have this with a full publish.)
Even more interesting, go to where your new FLV file is created. In the San Francisco video, the original file was about 53 MB. But the compressed FLV file is only 858 KB. The On2 VP6 compressor does a remarkable job at making your video files smaller with a minimum of quality loss.

STEP 9 Create Folders and Copy File
It’s now time to get your video on the Flash Media Server and modify your Flash file to find it. In the following steps, it makes no difference if the server is local to your machine or not.
Copy your new FLV file and go to: C:\Program Files\Macromedia\Flash Media Server 2\applications. Under applications, create a new folder using any name you want (I used “test” in this tutorial). Under test, create a folder called “Streams”; and under Streams, create a folder called “_defInst_”. Paste your FLV file into this folder. (In a live environment, you would probably FTP the FLV file to wherever the server is.)

STEP 10 Delete FLVPlayback Component
Unfortunately, it’s not easy to use FLVPlayback component with the Media Server. Here’s an easy way to fix it: Return to your Flash file and delete the FLVPlayback component from the Stage. Open the Library panel. Select the Library menu and select New Video. In the Video Properties dialog, select Video (ActionScript-controlled) for the Type option.

STEP 11 Drag Video to Stage; Create New Layer
After selecting OK, your video object, Video 1, is in the Library. Drag it to the stage, use the Transform tool to resize it, and give it an instance name of your choice (for this exercise, I called it myVideo). Also, in preparation for some programming, create a new layer called Actions as the topmost layer.

STEP 12 Set Code for Server Connection
Select Frame 1 of the Actions layer and enter the following:

This is the pipeline that will carry your video. I called this connection “nc”; but you can call it whatever you want.

The second line of code calls the URL of the Media Server using rtmp:// instead of http://. I’m using localhost because I’m running Media Server locally. In a live environment, I’d enter the actual URL of the server. The last part of the URL is the name of the folder that was created under the applications folder earlier. I called mine “test”.

STEP 13 Set Code for Stream
Now enter the following line of code:

Think of the NetStream as what flows through the pipeline we created in the last step. Here we are telling the stream, “ns”, to flow through the pipeline “nc”. I think you can easily see that we could have multiple pipelines and multiple streams as needed.

STEP 14 Set Code to Attach Stream to Video
Our last step simply needs to attach the stream, going through the pipeline, to the video component we put on the stage and tell it to play.

We declare the name of the video component we put on the stage, attach the stream to it, and tell it what video to play.

All you need are those 6 simple lines of code. You’re ready to roll. Give it a test. The steps I presented here can be followed generically and should produce a trouble-free connection every time.

But for $99 they can’t do everything, including print to the edges of the sheet (a full bleed). Most leave a white border, which is often irregular and differs from printer to printer. This border can be a big distraction. Its real problem, however, is that the border is undesigned and undesignable. So what to do? Instead of fighting it, join it. Amplify the white space, and make it part of your designs.

Make more white

The surest way to eliminate the white border is to make more white. Reducing your live matter visually disconnects it from the edge of the page. Note that to maintain equal margins on all sides, the image has been cropped (it’s skinnier), and the result is more focused on the descriptive coastline, and more dramatic.
The proximity of image to edge (left) creates a visual connection, so the eye perceives a border. Reduce the image far enough to disconnect it from the edge (middle), and the border effect disappears. The image is now like a gallery piece hanging alone on a white wall (right).
This smaller size has big benefit: You can crop and move the image around and actually design the page.

Get moving

Moving the image to eye level creates three different margin widths, so a frame never forms. Segmenting the image vertically moves the eye down the page.
Borders are static, so what you need is movement. The image at eye level yields more natural viewing plus three different margin widths – arrow (top), medium (sides), and wide (bottom) – which eliminates the border effect. Segmenting the image in columns creates activity within it and moves the eye down the page. Above, middle, is one image divided vertically. You can also create a collage of two or three images (right). Mix-and-match colors, shapes, and textures until you have a strong composition.
From one image you can pull out three or more column- or rowshaped areas. Pick the most descriptive parts and eliminate the rest.

Coordinate the type

Typestyles and sizes that correspond to elements on the page will unify the design. Similarities convey harmony; contrasts convey energy.

Straight/round
A straight, uppercase typeface contrasts beautifully with the round logo. But since the page and image are also rectangular, adding this heavy block would overwhelm the light logo (inset).

All round
A round, lowercase typeface (same height, similar weight) mirrors the round logo. Now seen as a group of four circles, the line contrasts beautifully with the rectangular image and gives the page two strong shapes.

Make a landscape

A horizontal image can be quite large. It has the energy of contrasting direction and still appears borderless because of its varying margins and side-to-side movement.

Same proportions

Unify image and page easily by using the same proportions for both; just rotate 90 degrees and reduce to about 60%.

Eye level
A letter-size page is about the same size as the human head. Result: Eye level is the strongest and most comfortable place for a focal point.

Varying margins
Eye-level placement results in three different margin widths, which adds visual activity and keeps margins from “connecting” and forming a frame.

Create a focal center

A single line of type sustains the horizontal movement and is a powerful and sophisticated focal point. The small logo completely controls the open space around it.

Contrasting zones

Small is definitely powerful. Here, the gallery effect-one image alone on a wall-is working to the max. The page has two zones: dark and light. Centered in each zone is a focal point- the headline in one at eye level, the logo in the other. Each controls its space. This subtle treatment is classier and more effective than SHOUTING-yoohoo!-for attention.

Engergize the page

Cousin to the landscape format is the banner, an extremely panoramic shape whose total contrast to the vertical page creates real energy.
You’ll almost always be surprised by how little it takes to convey the heart of an image. Here, one thin slice shows coastline, inlet, estuaries, and wet and dry land masses. That’s the whole story!

Extreme contrasts Tall/wide, fat/thin, up/down, side-to-side

Dull space The beauty of the panoramic shape is that it’s so different from the page. It works for many images, but in this case we’re seeing a little more uninteresting space than we’d like, so we’ll crop it to half a page.

Align right

With image and text aligned to the right and at eye level, the white space-normally thought of as empty-is controlling the page. This is a very active design.

Border? What border? There is very little on the page but it’s really designed; it has a strong focal point and a lot of movement. Both text and logo are colored gray to recede, leaving the image center stage. The irregular left edge (right) keeps unwanted lines from forming.

What size should the type be, and where does it go? Work with what’s in front of you and nearby. In this case, the penisulas and inlets (above) become our rulers and govern type size, line spacing, and logo size. This creates visible relationships that unify the design. Similarly, the extended typeface echoes the horizontal shape of the image.