The secret of graphic design, or secrets rather, are four tried-and-true principles brought down the mountain by Robin Williams, a brilliant author who published them in a book called The Non-Designer’s Design Book in 1994. I bought the book when I went back to art school, and I still refer to it every now and then to refresh my ever-fragile (and aging) neural pathways.

If you’re a seasoned pro, then prepare yourself to be refreshed. If you can’t remember driving past an art school—much less going to an actual design class—you’re about to learn some really cool stuff which will enable you to create layouts both visually pleasing and easy to read.

We’ll cover each of Ms. Williams’ principles—proximity, alignment, repetition, and contrast—then put them to use on plain-old text, a business card, and an ad.

Proximity, Part 1

Principle number one is that of proximity: Group related items together. Bits of information that have nothing to do with each other should not appear close together on a page. Use spacing to visually convey what information is related and what is not. This helps create structure and organization, and gives the reader a visual clue as to where one piece of information stops and another starts.

To illustrate, let’s take a flyer I designed for Apple, Inc. a couple of years ago to promote their User Group program. Without proper spacing, the text is a mess and really tough to read. However, by adding a little extra space above each subhead, the relationship between subhead and body copy becomes clear at a glance.

CREDIT: LESA SNIDER KING
Credit for the photo on the left in the top row: SARAH FRIEDLANDER

Proximity, Part 2

Now let’s take a business card designed by a local print shop. At first glance, how many times do your eyes stop? Mine stop five times: once in the middle and once at each corner. Because there’s information in the top two corners (why do they always do that?), the natural reaction is to check if there’s something in the other corners as well.

When I apply the rule of proximity and group related information together, the design improves (even though I centered everything). How many times do your eyes stop now? Three times max.

Alignment

The act of aligning items in a like manner creates a visual connection for the reader, and when done properly, gives readers a hard edge for their eyes to follow. This edge forms an invisible line that connects the items on a page, making them stronger, cleaner, and more dramatic. With alignment, each item on the page has a visual connection with another item on the page.

In her book, Ms. Williams states that, “The strength of the edge is what gives strength to the layout.” Maybe you’ve never thought about it that way before, but it’s true. To illustrate, let’s use the same business card and apply a right alignment to the information that’s related. The design is better still, but we’re not finished.

Now let’s apply all this to a truly uninspiring cat clinic ad. It’s not the worst ad I’ve ever seen, but it’s close (use of proximity is its only saving grace). [on left]

By applying a left alignment to the text, we introduce a bit-o-harmony in the design. It’s also easier to read because instead of following text on a curve, our little eyeballs have a single hard edge to follow. Suddenly the ad seems a bit stronger.

Repetition

Repetition is a fun one; just find an element in your design and repeat it throughout the entire piece. It can be as simple as a text style, font, color, or a graphic element. Repetition does wonders for creating a feel of consistency through a design.

On the Apple flyer, I picked up the teal color from the color blocks at the bottom of the page and incorporated that into the subheads. On the business card, I duplicated the star from the logo, enlarged it, screened it back slightly, and floated it off the bottom right of the card. I also incorporated the blue from the logo into key pieces of text.

In the pet clinic ad, I repeated the font, sampled the orange from the cat art, and used it for the phone number. Finally, I duplicated the curve in the cat’s tail, enlarged it, screened it back, and floated it off the bottom right of the page.

As you can see, repetition gave all three designs a more cohesive feel.

Contrast

Contrast is my favorite of all the design secrets. Ms. Williams states that if two elements are similar, then they should be different—very different. Contrast is really important because not only does it create visual interest, but it draws readers’ eyes. Think about it: In almost every ad situation you have approximately five seconds to catch readers’ attention. If you don’t, they’ll never read your copy. Be brave!

Back to the pet clinic ad. We have a few choices for introducing contrast. One idea would be to pick out a word and make it really big and bold. Because I really want to make a statement, I scaled down the cat illustration and added a really big close-up of an angry cat face.

Adding contrast isn’t all about adding stuff either; you can also introduce contrast by taking something away. For example, in this version of the pet clinic ad, I moved the text to the bottom right of the page and introduced a huge area of white space, along with the repetitive paw element. The negative space coupled with the rather small block of text creates contrast.

Final Word

So there you have it: four little secrets that have the power to make or break your designs. Sure there are other things to think about when creating a design, but these principles of proximity, alignment, repetition, and contrast lie at the very heart of everything you create. They are the foundation upon which your entire design will be built. Commit them to memory straight away and be sure to pass “the secret” along to others. They’ll be glad you did.

To download the images from this tutorial, click here

At the hotel, my challenges included:
• photographing clear ice against a snow background
• getting detailed pictures of the soft ice and snow
• dealing with strong contrast between the elements in the scene
• shooting in the tight conditions of the relatively small rooms
• getting colorful pictures of white subjects
• reducing reflections on the ice and snow, inside and outside of the hotel
• keeping my cameras warm so as not to lose battery power
• avoiding having people in my pictures, because I didn’t want to get model releases
• keeping myself warm.

Before we continue, I’m sure many of you have a question: “What was it like sleeping in the Ice Hotel?” Well, with no heat and a “mattress” placed over an ice slab, the rooms are extremely cold, especially at 2:30 a.m. when the outside temperature is below freezing. That’s why I stayed in the cozy lodge next door, unlike a young couple I met the next day that, indeed, braved the chilly conditions in their rooms.

At the hotel, I shot with my Canon EOS 5D, keeping my four extra batteries warm inside of my coat. Outside, I used my Canon 17–40mm lens with a polarizing filter, which helped reduce the glare on the snow and ice. Inside, I used my Canon 14mm lens, which let me get super-wide shots of the rooms.

After the shoot, in the comfort of my toasty lodge room, I downloaded the images and worked on, and played with, them in Photoshop. It was an enjoyable experience.

On these pages, I’ll share with you some of my before-and-after Photoshop CS3 images, as well as some of the most important techniques I used on each image, in the event that you find yourself in similar challenging conditions.

Create drama

Here’s the RAW file of the image that opens this article. Following are the techniques I used to create that more dramatic version of the image.

• In Adobe Camera Raw 4, under the Basic tab, I reduced the Exposure, increased the Contrast, and increased the Blacks.
• The new Vibrance control was then used to add, that’s right, more vibrance to the image.
• The next step was to open the image in Photoshop and sharpen only the sky using Unsharp Mask. That was easy, thanks to the new smart filter feature in Photoshop CS3, which works like an adjustment layer with a layer mask—letting you selectively apply an effect to any area of an image.
• To apply a filter as a smart filter, you have to first convert the layer to a smart object (Filter>Convert for Smart Filters). Then choose your filter (Filter>Sharpen>Unsharp Mask in this example), make adjustments for whatever part of the image you want to affect (here, I sharpened the sky), and click OK.
• Next, click on the Smart Filters layer mask in the Layers panel, choose the Brush tool (B), make your Foreground color black, and paint away the effect where you want it removed from the image.

Speaking of dramatic, here’s a black-and-white version of the same image created with the new Camera Raw 4. To convert an image to black-and-white, go under the HSL/Grayscale tab, check Convert to Grayscale and play around with the sliders. If you’re into black-and-white images, you’ll definitely want to experiment with this new and improved CS3 feature.

High Dynamic Range images
This is one of my favorite images from my Ice Hotel shoot. It’s the result of combining five images using the High Dynamic Range feature (File>Automate>Merge to HDR). High Dynamic Range automatically combines various exposures—each one at a different brightness level in the scene—into an image with a much greater dynamic range (ratio between dark and bright regions). The merged image here shows both the interior and exterior of the hotel, as well as some detail in the flame. This shot would be impossible with a single exposure. Now that’s cool!

Here are some shooting tips for getting the best HDR results: mount your camera on a tripod; use a cable release or the camera’s self-timer to further help prevent camera shake; shoot at a low ISO setting; reduce noise (in camera or in Camera Raw or other noise-reduction program); take more exposures at different settings than you think you’ll need (at least three); keep the aperture constant and adjust the exposure via the shutter speed; and choose a nonmoving subject (although moving water may look nice).

Warmer and cooler
Looking at a picture of one of the Ice Hotel rooms, I decided to just have some fun—and take some artistic liberty. For the gold-tone image, a Hue/Saturation adjustment layer (Layer>New Adjustment Layer>Hue Saturation) was added and the Saturation was boosted to +44. For the more romantic blue-tone image, I went back to my original image, added a Color Balance adjustment layer, and boosted the blue and cyan in the midtones by moving the slider knobs all the way to Blue and Cyan.

original image above

warmer version above / cooler version below

A chilly experiment
For the final image in this pair of pictures of the Ice Hotel’s church, almost all of the adjustments and enhancements were made in Camera Raw, including using the Straighten tool to level out the image. I wasn’t interested in creating a true-to-color image; instead, I wanted to create a fantasy of what I thought the scene might look like had it been lit differently.

Under the Basic tab, the Contrast and Blacks were boosted, and then the Temperature (color temperature) was changed to 4300, which cooled off the image, color temperature-wise. While still under the Basic tab, the Saturation and Vibrance were increased just a bit. Under the Detail tab, the Sharpening was set to 100, and the Luminance and Color Noise Reductions sliders were both set to 30 (increasing them more can make a picture look mushy).

If you look closely, you’ll see that the enhanced image looks as though it were taken with a 15mm fisheye lens, instead of the 14mm lens that was actually used. The Warp feature in Photoshop CS3, was used to create this effect. To duplicate this technique, choose Select>All then choose Edit>Transform>Warp and pull out on the left and right anchor points.

It’s important to note that as a travel photographer, photography is a 50/50 deal: 50% image capture and 50% digital darkroom work. When you shoot, always keep the result that you want—and Photoshop—in mind.

BEFORE

CLIENT: Priva Inc. www.priva-inc.com

“…the current fonts, color choices, and photos are starting to look tired and could use some freshening.”

Priva Inc. manufactures specialty textile products that meet real human needs, not just the whims of fashion. Among their product line are adult bibs for those whose dexterity isn’t what it used to be; smokers’ aprons to protect against burns from dropped ashes; children’s art smocks to keep paint and other substances off kids’ regular clothing; and anti-allergen bedding. They also make a line of products for children and adults struggling with incontinence, including the Waterproof Sheet Protector that’s the subject of this issue’s “Makeover.”

The Waterproof Sheet Protector is intended for anyone who suffers from incontinence during sleep. The product is sold worldwide in large drugstores and, according to company representative Natasha Pietramala, is one of the only reusable sheet protectors available. “Our only competitor would be a disposable sheet protector that slips out of place on the bed and can be very costly for someone on a fixed budget,” she says.

The current package design dates from 1994. Pietramala praises its clean and uncluttered layout and the way it clearly communicates the product benefits. “How to use the product is clear and easy to understand, and it shows that the pad covers the central bed area from shoulder to knee.” Nevertheless, Pietramala says the current fonts, color choices, and photos are starting to look tired and could use some freshening.

The way the product is displayed in a store puts some restrictions on a redesign. Depending on the store, the product might be placed on a shelf or hung on a peg, so the package needs to be able to accommodate both options. (One problem with the current package is that it doesn’t stand up on its own very well.) The other restriction is that it can’t be wider than 10″, because that’s how much shelf space most stores are willing to give the product. With these guidelines in mind, our designers set out to give the Waterproof Sheet Protector a package that will stand out (and up) on the shelf.

AFTER

DESIGNER: Phillip Alig www.flickr.com/photos/67347266@N00

“I wanted the copy to outline the benefits of the product in an easy-to-read hierarchy.”

I started the redesign process by researching similar products at local stores. They seemed to blend in with one another, all using similar colors and packaging choices. So I proceeded to brainstorm ideas for a kind of package that would be distinctive but still maintain the current size and address the issue of standing versus hanging. I came up with the idea of a light cardboard box with a projecting tab that could be used to hang on a peg.

Once I decided on the kind of package, I got to work on the design and layout and decided to focus on the idea of “secure comfort.” I put the Priva logo and a confident woman pictured with the product on the front panel, along with an entrapped close-up of the quilted texture of the product. The background texture of water droplets and ripples reflects Priva’s 25 years in the manufacturing of waterproof textile products.

I wanted the copy to outline the benefits of the product in an easy-to-read hierarchy. The front panel lists the primary two features of the sheet protector, and the back panel gives plenty more room for a bulleted list of further benefits and Priva’s unconditional guarantee, showing the company’s confidence in the quality of their product. I felt the original package’s very bold sans serif font seemed almost harsh, so I set the headers in Baker Signet BT to soften the overall appearance. I used Helvetica for the body copy for contrast and because it’s easy to read for short items like bullet points.

ABOUT THE DESIGNER: PHILLIP ALIG
Phillip graduated with honors from the Art Institute of Pittsburgh in 2002. He currently has an Associate’s Degree in Graphic Design and is weeks away from receiving a Bachelor of Science Degree in Graphic Design. Phillip works as a freelance graphic designer as well as a full-time designer in a firm out of Pennsylvania.

Phillip strives to grow as a designer and to become a successful name in the design industry. He takes his inspiration from various sources, including postmodern artwork, pinup and vintage art, amateur and professional designers, and old punk rock music. But most of all, when he’s not designing, he enjoys spending time with his beautiful wife and son, and aspires to be a successful father and husband.

APPLICATIONS USED: Macromedia Freehand, Adobe Photoshop 7

AFTER

DESIGNER: Carole Maugé-Lewis
www.kennesaw.edu/visual_arts/Personnel/Mauge-LewisC/index.shtml

“The product is portrayed as being comfortable and worry-free, as the customer enjoys a dreamy sleep.”

The original package looked dated to me—today’s women and men in their thirties, forties, or fifties lead different lifestyles than they did 20 years ago. To update it, I started by keeping some hint of the original color but making it bolder and surrounding it with blue for a touch of tenderness. The product is portrayed as being comfortable and worry-free, as the customer enjoys a dreamy sleep. Clouds are incorporated to give that “cloud nine” feeling. The product becomes part of the overall sleep experience, so that too fades into the clouds. The unique selling points of the product are immediately seen and placed in an inviting context. The back shows the entire product and lists its added benefits.

I also thought Priva’s logo needed to be modernized to make it look more “today”—fresh, lively, and somewhat carefree. I set it in the flowing Scriptina script font and placed it on both the back and front. (I moved the barcode to the bottom of the package so as not to interfere with the design.)

I didn’t want to enclose the package totally, so I used a sideless box around the clear plastic sleeve that wraps the product. That way the customer can still see and feel the product. The folded cardboard sheet provides a sturdy base that enables the package to sit on a shelf, while a die cut at the top allows it to also hang from a peg.

ABOUT THE DESIGNER: CAROLE MAUGÉ-LEWIS

Carole took her MFA from Howard University and has been an Associate Professor of Art at Kennesaw State University in Kennesaw, Georgia, since 1995. She has also taught at the Art Institute and at the American Intercontinental University, both in Atlanta, Georgia. In 2006 she received the Distinguished Teaching Award at the College of the Arts at KSU and the Educator of the Year Award at AIU.

Carole says, “I’m very passionate about teaching and design. I constantly try to remind my students of their importance as image-makers, and the responsibility they have as visual communicators to deliver meaningful messages that work. I see my classroom as an exploratory lab where students are encouraged to push the envelope at every opportunity.”

APPLICATIONS USED: Adobe Photoshop CS2 and Adobe Illustrator CS2

AFTER

DESIGNER: Eric P. Mullen www.epmullen.com

“I decided to focus on creating an appealing and comforting look to help lessen the embarrassment from having to purchase incontinence products.”

When I looked at the original packaging for the Priva product, my first impression (other than it was completely outdated) was how unwelcoming it felt. I decided to focus on creating an appealing and comforting look to help lessen the embarrassment from having to purchase incontinence products.
I chose natural earthtones for the color palette and opted to use the Futura font family to provide a sleek, elegant, and legible typeface. The existing logo treatment for the Priva name was too sterile and corporate-feeling, so I tweaked Jennifer Dickert’s script font Luna Bar to tie together the whole organic, earthtone feel.

The original’s photo selection aimed the product at a very specific demographic. Part of setting a new mood and direction was selecting a lighthearted and timeless lifestyle shot. The series of the happy couple reinforces the comforting reward that the product promises to deliver, while avoiding any gender- or age-specific suggestion.

The main challenge here was trying to solve the problem of the existing package’s lack of stability on store selves. I decided a fully enclosed box would be most beneficial. It provides both a durable footing for shelf placement and a secure hook for hanging. In addition, by concealing the product inside, the package provides a more intimate and less vulnerable purchasing experience.

ABOUT THE DESIGNER: ERIC P. MULLEN
A graduate of Temple University in Film and Media Arts, Eric brings a trained and contemporary look to the design department at V2 Creative, an advertising agency in Las Vegas, Nevada. He has led the concept and design of numerous websites, ranging from political to corporate to restaurants. His experience also includes the concept and design of national, regional, and local ad campaigns; corporate branding; and directing and editing television spots and corporate media projects. In his off hours, he has written and produced two short films, with two more currently in preproduction.

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

The three sites featured in this article were selected from sites submitted by Layers’ readers as great examples of photography sites. Thanks to all who contributed.

Editor’s Note: The new Jeremy Cowart site that we have previewed in this article is now live. Click on the link below the image and check it out

JeremyCowart.com

Pushing the Web Envelope

Jeremy Cowart is trading a website that most photographers would covet—an ultra-cool, Flash-intensive site that comes at you like a music video—for the next step in Web design. The new site is truly Web 2.0, using the latest technologies, including AJAX, Ruby on Rails, and RSS. It’s all about functionality; about allowing art directors and clients to find what they want quickly and easily, and then share it with others with the click of a button.

“I want clients and art directors to love this site,” Cowart said. “I want it fast, even with large images, and I want it searchable, sortable, easy to navigate, and capable of being viewed from a mobile browser.”

It’s an ambitious goal, but after looking over the preliminary design and testing the site’s functionality, it seems he may just pull it off. Although his new site was not yet launched at the time of this article’s writing, he gave Layers magazine a sneak preview and permission to feature pictures of the new design.

“We’ve been working on this new site for over a year now,” he said, “and I really believe—and I know this is a bold and cocky statement—but I really believe this new site is reinventing the photography site.”

One of the most powerful features of the dynamic site is that everything is “taggable.” As Cowart adds new images, he identifies them with keywords, or tags, such as “beauty,” “entertainment,” or “music.” If you’ve ever used a tool such as del.icio.us (a social bookmarking site) you should grasp the power of this right away. If you’re new to the concept, Cowart’s site works like this:

Everything in the site is organized by the tags Cowart creates as he adds photos to the site, even navigational elements. The result is a highly customizable site that can be easily rearranged to feature different collections of images, or different specialties, simply by selecting the corresponding keywords or tags.

“We’re doing a lot of things with Folksonomy,” said Jeremy Pinnex, owner of Pixelgrazer, the design firm that’s building the site. “The idea is that you can categorize things with multiple terms, so we’re able to categorize any of the types of elements he [Cowart] wants to portray.”

Because navigational links are based on the tags selected, Cowart, and any of his clients, can easily create a mini site within the site, complete with corresponding navigation.

“All the time, clients tell me, ‘Hey, I just did screenshots of these images of your website and sent them to a co-worker,’” Cowart said.

Now clients can search for keywords, select the tags they want to include, and create their own special version of Cowart’s site that they can easily share with anyone else. Not only does that make it easier for clients to pass on his images, it means Cowart has more control over the quality of the images they pass on and how they’re displayed.

“There is much more to me than my current site displays,” he said. “I think I’m losing a lot of clients because of that. There’s a lot of beauty work out there, but because my site features so much of my cool music work, they don’t get to see the bulk of the girls that I’ve shot. On the new site, I want to showcase the different types of photography—music, editorial, beauty, travel—I want the client to know right away that I’m not just a music photographer.”

As part of the redesign, Cowart is also building out the personal side of the site. “People are going to get to know me a lot more,” he said. Instead of his “generic, stupid bio,” he’s creating a section that “gives people more insight into the way I think.”

He’s also integrating his Twitter blog and creating a section where he’ll post a daily camera phone picture. “It sounds cheesy, but it’s a fun thing to keep people coming back. I want to make the site great for art directors, but I also have a lot of fans, and I’m trying to make the site fun for fans to come and visit.”

Will the new site have music like the old site did? “Maybe,” Cowart said. “We found that even with a lot of the artist sites we do, people like the music the first time, but the second time they turn it off, and the third time they really want to turn it off. More than anything, I want this site to be a tool for art directors, and they are not there to be entertained.”

“I’m kind of over all the bells and whistles,” Cowart said. “Just because you can have a feature doesn’t mean you should. For this site I wanted to dream up the most insanely perfect, functional website with a focus on the needs of the client.”

How they DID it

The Web design company, Pixelgrazer, deserves credit for Cowart’s old and new websites. “I guess you could say I very heavily art directed the site and the guys I work with produced it,” he said. Cowart founded Pixelgrazer but turned the company over to Jeremy Pinnix in 2005 when he left to become a full-time photographer

The new site combines several cutting-edge technologies, including CSS, RSS, and Ruby on Rails. “Everything scales,” Pinnex said, explaining that the site is designed to look good on everything from a cell phone to a PlayStation Portable. “The pages can be dynamically created for visitors,” he added. “So if the browser doesn’t have certain capabilities, we provide them with smaller graphics.”

“The site is 100% CSS driven,” he said, “the only images on the site are the photos. All the navigation and everything else is CSS. We also have an RSS feed to notify clients when there are more features or new photos added.”

The goal was to build the client’s dream website so if a client is looking for an old vintage effect with a country setting they can find similar photos quickly.

“The most beautiful thing about this new CSS site is that it’s just so dang fast.”

Photographer: Jeremy Cowart
Email: Jeremy@jeremycowart.com
Website: www.jeremycowart.com
Representation: Caryn Weiss/WeissArtists, Inc. (www.wreps.com)
Website Design: www.pixelgrazer.com

Bio
Jeremy Cowart is a graphic designer turned photographer from, and currently living in, Nashville, Tennessee. As a full-time photographer for only two years now, Jeremy has spent that time shooting mostly for the music and TV entertainment industries. His clients include ABC, FOX, A&E, FX, Universal Music, Sony Music, and Warner Bros. Records. Jeremy also released his first book in 2006 called Hope in the Dark. The work in the book was shot on his first trip to Africa and proceeds go to African relief organizations. 

MATTHEWMAHON.COM

Matthew Mahon Throws His Photos at the Web

Matthew Mahon’s website looks like a petulant three-year-old knocked a stack of his photos onto a linoleum floor—and it’s made him a small fortune. The jarring postindustrial look and feel has entranced creative directors who have emailed the link to friends and clients, turning MatthewMahon.com into a certified viral marketing hit. Here’s how it works:

Mouse clicks make you zoom dizzingly around a page strewn with small images—a layout that violates the basic ironclad rule of photography websites, which mandates that the images appear huge. Intrigued, users poke around and find that most of the images can be flipped over to reveal hand-scrawled details on the back. Seemingly random, Matthew and his assistant magically appear hovering over the photos in a clever effect that integrates video into the still image, bringing the photographer to life as he humorously describes how and where the images were shot.

When the site launched in 2005, it created a sensation on the Web, attracting the attention of designers and Web enthusiasts who were intrigued by the innovative design and the clever effects.

“In the first few months after it went live, the phone was literally ringing off the hook,” Matthew said. “I was turning down work.”

“It completely changed my career,” he said. “I have a rep now, I’m getting ad campaigns, I’m getting calls to shoot covers…I’m getting interviewed.”

Mahon credits the site with bringing him more than $100,000 in new business the first year, including a cover shoot for Atlantic Monthly and several shoots for a major ad agency.

“I wanted people to not only know my photography, but to get an idea of what it would be like to work with me,” Mahon said. “I wanted people to see that I’m fun, engaging, creative. I didn’t become a photographer because I wanted to be worked into the ground, I did it because it’s fun.”

Most visitors to the site take a few minutes to find their way around. There are no instructions for how to zoom in and out, and if you’re looking for Matthew’s biography, you’ll find it spread over a series of ID tags mixed in with the other images. If you were a busy creative director trying to find his contact information, you might get frustrated with this design, but that hasn’t stopped Matthew from getting a ton of new business from the site.

“I’ve had people tell me that it’s hard to navigate,” Mahon said. But any business he’s lost because the site is tricky to use has been more than made up for by the viral marketing power of the site’s entertainment factor.

Matthew’s website was created by the talented and irreverent duo of Jordan Stone and Martin Hughes of www.WeFail.com. Dedicated to originality, the pair has a reputation for creating unique designs and demanding control of the projects they work on—even if a client objects.

“We nearly made Matthew cry during the creation of the site,” Stone said. “I still have the recording on an old answering machine, which is a mechanical device from the early ’90s.”

Matthew is more politic, allowing that “We didn’t see eye to eye on everything.” At one point, Mahon said, he was having trouble with the video and suggested maybe they should leave out the “talking parts.”

“They insisted and offered to refund my deposit. That’s when I realized these guys were truly visionary—they didn’t want to put something out there that was diminished. They had worked on it for two and a half months, but they were willing to walk away rather than compromise.”

“Quite honestly, they were right. We’ve become very good friends now and they’ve gone on to do sites for the Dixie Chicks and Eminem. I paid them a fraction of what they’re making now.”

Mahon spent about $12,000 on the site, an amount that seemed like a lot to him at the time, but far less than what WeFail charges these days.

“Man, Matthew got a steal,” Hughes said when reminded of the final bill. “The site took us around three months to put together based on an engine that took six months to make, so if you spilt that fee between the two of us, full time for the duration, well you’re looking at two destitute [beep!]. We’re not too dear but we instantly turn down the village idiots.”
           
How they DID it
To create MatthewMahon.com, WeFail used a combination of programs and design techniques. The initial site design was done in Photoshop, while the effect that flips over the photos was created using 3D Studio Max and Flash.

To create the video, Matthew and his assistant took the low-tech approach and filmed themselves against a white wall. Next, he photographed them standing against the same white wall with their arms stretched out in different poses. The team at WeFail then dropped the video of their heads into the image and animated the photos, creating a kind of puppet effect.

To integrate the video with the photos, Stone said: “I hate to admit it, but Microsoft SparkleMotion does most of the work for you. It’s a matter of clicking the right button (and oftentimes the left one) in the right order.” (Sparkle was the beta code name for Microsoft’s new Expression Blend.)

When asked what advice they had to offer other photographers, Hughes said “Never go cheap on your site, false economy is serious.”
Stone added: “If you false economonize [sic], you could disappearius!”

Photographer: Matthew Mahon
Website: www.matthewmahon.com
Email: matthewmahon@earthlink.net
Representation: Renee Rhyner and Company
Website Design: www.WeFail.com

Bio
Matthew Mahon studied fine art at Rutgers University in New Jersey. After a disappointing stint in NYC, Mahon moved to Detroit where he found work as a production assistant with an ad agency. Upon attending a photo shoot for Pampers, Mahon fell in love with photography and took several night classes at the International Academy of Design & Technology. His work appears regularly in TIME, Newsweek, Wired, and Forbes. Mahon now lives in Austin, Texas, but still dreams of making it big in NYC one day.

ARTOFGREGMARTIN.COM
Create a Gallery for Your Images
The stark white space and minimalist aesthetic at www.ArtofGregMartin.com evokes the open, light feeling of a high-end art gallery, drawing the visitor’s attention to the images.

“For many designers, the instinct is to do something pretty, something that looks cool, that’s all sparkle and chrome,” said Greg Martin. I’m a sucker for white space, and I wanted the barest, most minimalist navigation. I wanted it to be very pure.”

Unlike the other two photography websites featured in this article, Martin built his site himself, but then Martin isn’t a full-time photographer like the other two, either.

“I’m an interaction designer,” he said, describing the work he does for Ziba, a product and experience design firm. At Ziba, Martin focuses on what he calls “the design experience,” whether he’s working on a new cell phone design or an interactive display for a new condominium.

“We try to add an interactive element to everything we do, and we really think about how people will use it,” he said. “Our goal is to create the best experience, not just use what’s in our bag of tricks. I bring that same sort of approach to the website.”

Martin’s advice to other photographers: Focus on the experience, and if you have to pay someone, make sure you have a good person do it. You’re paying for the website and technical expertise to really work with you. The thing is you have to look at that price tag as an investment rather than an expenditure.”

In one section of the site, Martin takes visitors on a “walk-through” where he shows them how he creates his images on the computer.

“In the past I haven’t always had the lickety-split computer I have right now, so I’ve gotten in the habit of working on an image until I feel good about it, then I flatten all of the layers and try again,” Martin said. “That way it stays really quick and I have something to fall back on. The nice thing about that is that I’ve got these ready-made stages that I can come back to; that’s where those individual pictures came through for the walk-throughs.”

“I try to keep them very general,” he said, “because I’ve written a couple of tutorials and I didn’t like how they were used. The temptation when you have a cookie cutter in front of you is to cookie cut with it, to just follow instructions without thinking. I didn’t like how people were using my tutorials, so now, I try to speak to the broad strokes, even the narration is decidedly informal, almost like you’re standing over my shoulder and I’m muttering crazily to myself.”

How he DID it

“This is a gallery, and the word ‘gallery’ figured into how the site was going to look,” Martin said. “I’m sure you’ve been to art galleries with big white walls and lots of open space so you can focus in on the paintings or photos.”

Martin created the page designs in Adobe Photoshop and Illustrator and then built the site in Adobe Flash, integrating images saved from Photoshop. He then used Dreamweaver to put it all together in a simple HTML shell.

“I used Photoshop to figure out the effects and look I wanted and then moved over to Flash,” he said. “Anything that could be Flash is Flash because it’s faster if it’s vector than pixels. The glow on the front page is all Flash.”

“For me, Flash just seemed like the logical choice. I know among the blogger community, there’s kind of an anti-Flash bias. There are many Web 2.0 issues, but for me, using Flash is about the creating an experience. The upside is that Flash is getting better and better and you can do more and more things with it,” he said. “It’s not the clunky little dancing icon animator that it used to be.”

Photographer: Greg Martin
Website: www.artofgregmartin.com
Email: greg@artofgregmartin.com
Web Design: Greg Martin

Bio
Greg Martin is a semiprofessional illustrator and landscape photographer with a deep appreciation for the Pacific Northwest. He recently graduated from the University of Washington with a BFA in Visual Communication Design. He lives in Portland, Oregon, working full-time as an interaction designer.

Deconstructing Photography Sites: The Technology of Web Design

Here’s a quick look at some of the technologies and applications being used to pioneer the future of the Web.

Ruby on Rails: One of the hottest new Web development options on the Internet, Ruby on Rails is an open source Web framework that enables rapid development with the speed of PHP and the structure and power of Java. It’s fully object oriented and very extensible. (www.rubyonrails.org)

AJAX: Asynchronous JavaScript and XML, or AJAX for short, combines a collection of Web technologies to create highly interactive Web applications. One of the advantages of AJAX is that it enables users to make changes to a webpage without reloading the page. For example, you can open and close windows, move elements around a page, and launch new kinds of information using AJAX.

Adobe Photoshop: Not surprisingly, the creators of every website featured in this article used Adobe Photoshop. From image editing to creating page designs, Photoshop is an essential tool for Web designers and photographers alike. (www.adobe.com/products/photoshop/photoshop)

Adobe Fireworks: Designed to create Web graphics, Adobe Fireworks includes many features specifically designed for mocking up websites, slicing images for the Web, and optimizing graphics and animations. Fireworks doesn’t have all of the advanced image editing features you’ll find in Photoshop, but it’s so good at creating Web graphics that Adobe includes Fireworks and Photoshop in its new Adobe Creative Suite 3 Web Standard and Premium editions. (www.adobe.com/products/fireworks)

Adobe Flash: A large percentage of photography websites are created with Adobe Flash. This vector-based design program is ideal for creating complex animations and integrating video, audio, and images. You also get great design control when you use Flash and pages that display consistently across many different kinds of browsers. So why doesn’t everyone use Flash for their photography sites? For one thing, the learning curve is steep (it takes longer to learn Flash than Dreamweaver, for example). But increasingly, photographers like Jeremy Cowart (featured in this article) are redesigning their websites with CSS and database technologies that are faster loading, more flexible, and more search engine friendly than Flash. (www.adobe.com/products/flash)

Adobe Dreamweaver: The most popular Web design program among professional Web designers, Adobe Dreamweaver is a full-featured Web tool that supports XHTML, CSS, XML, and many dynamic technologies, including PHP, ASP, JSP, ASP.NET, and Adobe’s Cold Fusion. (www.adobe.com/products/dreamweaver)

Adobe GoLive: If you’ve been using Adobe GoLive, now’s the time to make the switch to Dreamweaver. Since Dreamweaver has replaced GoLive in the Creative Suite, Adobe recommends that all GoLive users migrate their sites to Dreamweaver. (www.adobe.com/products/golive)

Expression Web: The newest contender in the Web design software arena, Microsoft’s Expression Web is a major improvement over the much-criticized FrontPage. Expression Web supports XHTML, CSS, XML, and ASP.NET. (www.microsoft.com/Expression/products/overview.aspx?key=web)

Expression Blend: Microsoft’s advanced design tool for creating graphical interfaces that blend the features of both Web and desktop applications. Expression Blend allows you to mix video, vector art, high-quality text, animation, pixel images, and 3D content to create user interfaces. (www.microsoft.com/Expression/products/overview.aspx?key=blend)

Expression Design: Microsoft’s new image editing tool combines many of the features you find in Photoshop and Illustrator into one comprehensive tool. (www.microsoft.com/Expression/products/overview.aspx?key=design)

All typographic spaces derive from the em, the width of which equals the point size of the type you’re setting. For example, an em in 12-point type is 12 points wide and in 20-point type, it’s 20 points wide. (Its width has nothing to do with the letter “m,” which can have any width a type designer decides.)

The spaces between characters are expressed in fractions of an em, generally thousandths. If you specify the distance between two characters in points and then double their size, the characters will look too close together. But if you specify that distance in fractions of an em, their relative spacing will remain constant at any size. This is why kerning and tracking adjustments are made in fractions of an em.

A multitude of spaces
Spaces come from two sources: fonts and applications. The width of a word space (or spaceband) is defined in your fonts, and it’s usually about a quarter of an em. Word spaces of faces with wide characters are wider than those of condensed or compressed faces. A key characteristic of the word space is its unpredictability: Its width is subject to change when text is being composed.

Another space that’s built into every font is the nonbreaking space, which has the same width as a font’s word space, but it isn’t a legal place for a program to break a line. Two words linked by a nonbreaking space will always appear on the same line. If you were writing about the poet ee cummings, for example, you might want to link his initials and his last name with a nonbreaking space to prevent the curious morsel ee from ending up at the end of a line by itself.

A space that should be in all your fonts (but usually isn’t) is the figure space. Fortunately, InDesign offers one of these. It’s the same width as a face’s lining numerals (the set of numerals, whose widths are identical in order to line up in tables, as opposed to old-style—or lowercase—numerals, whose widths typically vary). Figure spaces are great for aligning material in numeric tables. In the table shown, the dollar signs align despite the varying number of digits in each entry. The trick: Go to Type>Insert White Space and use figure and punctuation spaces (see below) to fill in for commas and numerals in the shorter tab entries. All numeric values are simply set flush right.

CREDIT: ©ISTOCKPHOTO/KATIV

An ally of the figure space is punctuation space in InDesign, which has the same width as a face’s punctuation marks and can be used as a placeholder for decimal points or commas.

Fixed vs. relative spaces
In “typographese,” all of these are referred to as relative spaces; that is, their width isn’t constant, and your program is free to flex them as needed to achieve various composition goals—most commonly justified margins. Equally important are fixed spaces, such as the em, which are generated by your programs.

Once a fixed space’s point size has been defined, it will maintain its width no matter what. You can force justify a line to stretch its spacing to extremes, but an em space in such a setting will always remain exactly one em wide.

Numerous fixed spaces derive from the em. The en space (again, no bond to the letter “n”) is half-an-em wide. In InDesign, the thin space is 1/8 em wide, and the hair space is 1/24 em wide, although these last two aren’t universal standard sizes.

Spacing tips
All spaces, except the word space, are available in InDesign from the Type>Insert White Space menu. Photoshop and Illustrator don’t offer fixed spaces, so if you need them, you’ll have to fake them: Set en and em dashes (Option-– [PC: Alt-0150] and Shift-Option-– [PC: Alt-0151]), respectively, and strip their color to make them invisible.

To create gaps in a line of type, never use multiple word spaces, because their widths are ambiguous and fluid; instead, use fixed spaces. To keep a series of spaces from being divided at the end of a line, select all of them and choose No Break from the Character panel’s flyout menu.

Turning on Show Hidden Characters under the Type menu (Command-Option-I [PC: Ctrl-Alt-I]) reveals the unseen formatting commands and lets you identify the different kinds of spaces in your text, using the shorthand codes shown in the chart below. The chart also shows the codes to use in the Find What field of the Edit>Find/Change dialog when searching for various types of spaces in your text:

To create a rule fill for a fill-in-the-blank effect, such as [Production Note: please create a rule fill in InDesign as described here in the copy and set it in this location], set a series of fixed spaces with a normal word space before and after (to provide potential line-breaking points). Select all the fixed spaces then select Underline from the Character panel’s flyout menu followed by No Break. Underline Options in the same menu let you control the position and weight of the rule.

And don’t forget that spaces have point sizes and leading specs just like any typeset character. If you want one to be a little larger or smaller, you can just adjust its point size.

Answer: I’ve got you covered! I don’t usually do step-by-step instruction in this column, but I’m making an exception this time. You’re part of a growing legion of graphic designers that want to “get their feet wet” in the video production pool. Some do it because they want to expand their skill set, but most just want to accomplish a simple task and then get back to their regular work.
Since it seems like what you want to do most is animate some layers in Photoshop and save that animation as a video clip, we’ll focus on that workflow specifically. Just realize that you could also open preexisting video clips inside of Photoshop Extended and work on those as well. (Note: Before you start working with video in Photoshop Extended, you must install QuickTime 7.1 [or higher]. QuickTime is a free download from the Apple Computer website [www.apple.com].)

STEP ONE:
Create or open an existing multilayer Photoshop file. This is the file you’ll animate and then save out to a video file.

STEP TWO:
Go to the Window menu and select the Animation panel. At first glance it may look like the same Animation panel that has been around since ImageReady shipped with Photoshop. But if you look more closely, you’ll notice a new toggle switch located in the bottom right-hand corner of the panel. When pressed, it reveals a full video editor Timeline.

Notice that in the Timeline you have the same layers that are in your Layers panel (except for the Background layer). Each layer in the Timeline is directly connected to each layer in the Layers panel, so when you select a layer in one panel it’s automatically selected in the other panel.

STEP THREE:
Set the duration and frame rate for your animation. This will set the overall length of time that you want your animation to last. You set all of this up in the Document Settings dialog found in the Animation panel’s flyout menu located just under the “x” in the top right-hand corner of the panel. (See “Video Terms Explained” for more on duration and frame rate.)

STEP FOUR: Set keyframes for your animation. Keyframes are a point in time when you want an action to take place. The cool thing about keyframes is that you only have to set a few of them in your Timeline and the computer will interpolate all of the action that needs to take place in between each set of keyframes. For example, if you want to move a text layer from left to right or from the top of your screen to the bottom, all you have to do is set two keyframes for the Position property of the text layer.
To reveal the Position property, twirl down the text layer in the Animation panel (click on the right-facing triangle next to the layer). Click on the Stopwatch icon located to the left of the word Position to add a keyframe. Next, move your Current Time Indicator (the vertical red line) to a different time in your Timeline, say, at the 5-second mark. Now just move your text layer to where you want your text to end up at the 5-second mark. As soon as you let go of the text layer, a new keyframe is set.
[Insert Step 4]

STEP FIVE: To see your animation working, just click on the Play button in the bottom left-hand corner of the Timeline or simply hit the Spacebar.

STEP SIX: Save your animation. Just like any file, you want to save your animation so you can use it again or update it at a moment’s notice. Just save it as a PSD file and Photoshop will remember all of your layers, settings, and keyframes for the next time you need to use the file. (You could also import the PSD file into Adobe After Effects for more advanced compositing and special effects work.)

STEP SEVEN: Render your video file. This is where you’ll actually create your video file. Go to the File menu and choose Export>Render Video to bring up the Render Video dialog. The options may seem overwhelming at first, but there are only a few settings that you really need to worry about.
Simply name your movie file and select which folder you want to save it to on your hard drive. Click on the QuickTime Export pop-up menu and choose what type of video file you want to create. Whether it’s going to a cell phone, an iPod, or to a full broadcast-quality television show, all of those options are available here. In fact, if you have Flash 8 or Flash CS3 installed on your computer you can save your video out to a FLV file as well. Lastly, if you’ve already set up your document the way that you like (with frame rate and duration) you can skip everything else and just hit the Render button.
[Insert Step 7]

That’s it! You can now add Motion Graphics Artist to your list of accomplishments.
[ENDMARK]

SIDEBAR
Video Terms Explained
Duration is the overall time length of the video clip or of the animation you want to create. By default, if you haven’t imported a video clip, the Timeline will open set to a 10-second duration. However, if you’re working with a 30-second video clip, the document will automatically adjust the Timeline to 30 seconds. One important note: If you reduce the duration of an existing clip, it has the effect of trimming frames (including keyframes) from the end of your Timeline.

Frame rate (or frames per second [fps]), is usually determined by the type of output you plan to produce. For example, NTSC video has a frame rate of 29.97 fps; PAL video has a frame rate of 25 fps; and motion picture film has a frame rate of 24 fps. Depending on the broadcast system, DVD video can have the same frame rate as NTSC video or PAL video, or a frame rate of 23.976. So set your frame rate to whatever type of output you intend to use.