The designer is the first person to get blamed when a website is sludgy. The engineers start asking about the rounded corners, the product manager wonders about the choice of fonts, and the client starts noticing a dip in sales or retention. A designer who isn’t armed with knowledge about performance can often fall into the trap of blaming the rounded corners—they remove important design elements or engaging features, just hoping the site will get faster.

With clients demanding more video, Flash, and interaction from our websites than ever before, how do we fit in all that functionality and have a fast site that users will love? After reading the 10 tips in this article, you’ll know what matters to performance (and what doesn’t!) and be ready to design fast websites.

Speed Tip #1: Create library of smart objects
Duplication can happen in any project when we lose sight of the designs we’ve already created and add new features that are just too similar and don’t add value. The rule of thumb is that if two designs are too similar to be used on the same page, they are too similar to be used on the same site. Choose one. [Insert Image_01] CAPTION: Rounded corners from Yahoo! Personal Finance are too similar. Most users aren’t sophisticated enough to notice the subtle variation. Each rounded corner module requires additional images and CSS, which slows the page.

A library of smart objects can be used to design new pages in your website. The goal is that new designs should only be created when the existing objects are insufficient. Perhaps you’re wondering what I mean by objects? Imagine that all the different parts of your designs were like LEGO bricks that you could mix and match to create new and interesting pages. If contours, backgrounds, block headers and footers, tabs, drop shadows, and lists could all be combined in different ways, it would allow tons of flexibility in page layout and design. The library allows you to quickly find out what objects already exist, and how they were intended to be used. Rather than hunting around in multiple Photoshop and Illustrator files on different designers’ computers, a library is a one-stop-shop where you can store these building blocks as smart objects.
The library should be something like a style guide, but less formal, and the objects should be stored in such a way that we can quickly grab an existing rounded corner box, stretch it to a different height and width, and pop it into a mockup for a new page. New objects should be added to the library when the design has stabilized, and stale objects should be removed so they aren’t inadvertently used. A library can help you avoid unnecessary duplication.

Speed Tip #2: Use consistent semantic styles
When a new site is born, the style goals are usually clear. As the site evolves, things tend to get a bit muddled as more people touch the design and the client changes direction multiple times. The more consistent your styles, the leaner the code will be. Explain to developers not only what something looks like, but when and how it should be used (semantics), and the code will be much more efficient.

A Web developer might call a title “bigGrayHeading,” then a few months later, the client prefers blue. If the developer understands your intentions, she can call it “section” or “product,” which will be very clear to people building new HTML pages. Naming layers is helpful, but your thought process won’t always be obvious from the PSD. Nothing can replace good communication.

Speed Tip #3: Separate contour and background color
Photoshop naturally makes modules that are transparent on the outside. You choose fill and stroke colors, and it does the rest. On the other hand, you can achieve truly fast websites only if you separate contour from background and content. The goal is to be able to combine any contour with any background color, header, footer, image, or other content.

The same basic glow combined with a transparent (left), blue (middle), and gray striped (right) background. A contour that’s transparent on the inside requires careful selection of pixels and progressively enhanced PNG8 to keep the curve as smooth as possible.

The same contour can also be combined with different headers, footers, or even content and images. Because it’s transparent on the inside, the design has loads of flexibility and is very fast.

Unless you’re willing to have square corners in Internet Explorer, you can’t have a module that’s simultaneously transparent on the inside and outside. A module that’s above a variable background like an image, gradient, or text won’t be as flexible and the site may be slower.

Speed Tip #4: Optimize images and sprites
Most designers know about the Save for Web feature in Photoshop, but you may not know that you can make images even smaller using techniques that cause absolutely no loss in quality. Pixel for pixel, the image is exactly the same, except the file size is smaller. First, choose a reasonable quality via Save for Web. Next, upload images to http://smush.it, and any wasteful image bloat will be removed. Most sites can remove between 10–40% of the total weight by putting their images on a diet!

Speed Tip #5: Avoid nonstandard browser fonts
One of the main complaints I hear about designing for the Web is the lack of typographical control. You want beautiful fonts, but for the moment, the Web makes that impossible. As a workaround, designers often create headings, buttons, and other elements with the text baked into the background graphic.
This can slow the site to a crawl. Even good ideas, like combining background images into CSS sprites, can have unintended consequences when we make seemingly innocuous design decisions. Sprites grow and grow as more text and background color combinations are created. Text should be real HTML text, not images. This is one of the first things to check when a site is exceptionally slow.

Amazon sprites include text as images, a practice that makes their sprites larger.

Speed Tip #6: Avoid height alignment
Height alignment with CSS alone isn’t really viable, and still requires expensive JavaScript. Every time your script jumps through the elements on an HTML page, the site will get slower. The more times it happens, the slower it will be. Height alignment requires a lot of these jumps. Insofar as it’s possible, avoid designs that require height alignment.

Speed Tip #7: Choose your bling carefully
Every site tries to have something special—a design element or feature that sets it apart from other sites in the same space. Unfortunately, if you add too many special touches, frustrated users will only notice how slowly the site loads. Most of the design should use shared elements that are common and consistent across the entire site. Save the exceptions—the bling—for high-impact situations that really make your site stand out.

Avoid large images or Flash below the fold and in secondary tabs, few users will make it that far, particularly if your site is slow. Every time you consider adding bling to the site, ask yourself how that particular element will impact the user experience? Is it worth making the site slower?

Keep in mind that tolerance for both latency and visual decoration are often market dependent. Users don’t always distinguish Web and desktop applications, so their expectations will be higher. They may also be more or less tolerant of slow pages depending on their motivation for visiting the site, for example, PBS Kids versus Mint.com. Be aware of market constraints, and avoid one-size-fits-all bling.

Speed Tip #8: Be flexible (height and width)
Output from tools such as Photoshop is fundamentally different than webpages, and in some cases, this makes it more challenging to design for the Web. In Photoshop, you create a box, set its stroke, choose the radius of its rounded corners, and specify a height and width of, say, 393px. On the other hand, for the Web, most container objects should be height and width agnostic. Why is that?

Changes in module width, background color, or background image are an excellent example of module reuse on Yahoo! Personal Finance. The module can even contain a carousel.

Setting height or width in pixels limits the ways that you can reuse an element. Reusing the same element in different ways is great for performance; the user already downloaded the images and CSS, so it’s very fast. Grids should control the width and content should control the height. That way, when you add another paragraph, the rounded corner box will grow taller to accommodate it. More about grids in the next tip.

Speed Tip #9: Learn to love grids
Website performance is all about abstracting reusable elements. Grids are a great way to do just that. Familiarize yourself with the grids used on your websites. Sometimes a few pixels larger or smaller means your element will fit an existing grid and you can avoid slowing the site with custom code.

Grids may be used to divide any area into subsections. Gutters are sometimes included.

When choosing a grids system for a new site, it can be tempting to choose fixed pixel widths, but consider using percentages as they respond better to changes in overall site width when, for example, the number of columns varies or a redesign widens the overall layout. Try the liquid grids from my Object-Oriented CSS open source project to see this effect in action (http://wiki.github.com/stubbornella/oocss).

The same thirds grid divides the main column of the page and arranges the content, in this case, photos of sweaters on La Redoute. Using grids consistently throughout a design helps the page load faster as the CSS file stays lean and efficient.

Speed Tip #10: Count your suitcases
Weigh them, too. Part of figuring out how to make your websites faster is accurately assessing how bad things have become. This is easier than it might seem. There are two simple things that are responsible for most performance problems:

• Too many components is kind of like arriving at the airport with four pieces of checked luggage and three carry-ons. Each JavaScript, CSS, image, Flash, sprite, etc. counts as one component. Having around 50 components is normal, but if you want to fit more functionality into a faster page, you’ll need to bring this number down.
• Out-of-control page weight is like the traveler who arrives at the airport dragging suitcases so heavy that the baggage handler can’t even get them onto the belt. Websites that are too heavy will always be slow; keep in mind that most of our users don’t have the fancy computers and fast connections that we take for granted. Page weight is usually measured in kilobytes (which can be abbreviated KB or K). The average site is around 350K, but with the techniques in this article, you can do far better than that.

First, install Firebug (http://getfirebug.com), a free extension to Firefox. In Firebug, click on the Net tab, make sure All is selected, and scroll to the bottom. You’ll see total weight and number of components listed in the last row. Compare with industry averages or competitors’ websites to know where you stand. Dreamweaver shows file size and estimates download time, but components aren’t measured properly, so it’s best to use Firebug.

Firebug lists total components (called requests) and page weight (KB) for the Yahoo! search results page.

The designers I’ve been fortunate enough to work with have been amazing user advocates, relentlessly focused on creating a more interesting and valuable experience. After reading the 10 tips in this article, you’re ready to make lightning-fast speed and interactivity part of that user experience.

(Editor’s Note: The current Layers Back Page Design Contest is based on the following article from the Sept/Oct 2009 issue of Layers magazine. But if you want a chance to win a 1.5-TB Guardian MAXimus quad interface hard drive and $200 in credits from www.fotolia.com, you better hurry because the deadline is November 16, 2009. Click here for more information.)

In a recent issue of Layers magazine, we asked readers to submit their favorite print, Web, and video designs currently in the marketplace. In turn, we promised to track down the original creators and force them to tell us their secrets (as it turns out, all we had to do was ask politely—everyone we spoke to was very nice and accommodating).

Anyway, after going through all the submissions, there were two that really captured our attention: the GE Smart Grid Augmented Reality (AR) website and the Black Day to Freedom video by Rob Chiu. In fact, we asked so many interview questions about these two projects that we ran out of room for any of the print submissions. But don’t worry, we’ve sent all the print submissions to Corey and RC over at Layers TV and have asked them to cover “How’d They Do That?” in a future episode. So after you read this article, be sure to keep an eye out on www.layersmagazine.com/layers-tv.

CHANGING YOUR REALITY

AR will have you seeing things in a different way

When the GE Smart Grid Augmented Reality website was brought to our attention, our productivity took a major hit for a good 25–30 minutes. If you haven’t seen AR in action, then you’ll have to check this one out for yourself. So before you read any further, launch your Web browser and head on over to http://ge.ecomagination.com/smartgrid/#/augmented_reality. Follow the instructions for Getting Started on the right side of the screen, because you’ll first need to print a page to use for the demonstration and you’ll need a webcam. Don’t worry, take your time. You’ll find that magazine pages can be very patient.

(What’s taking you so long?)

Oh, there you are. Welcome back. Pretty mind-blowing stuff, eh? AR has actually been around for some time now, but it’s a technology that hasn’t quite made it into the mainstream yet, so it’s still new to a lot of people. But as we were working on the story, AR seemed to be popping up in the news everywhere we turned.

According to the GE website, they used FLARToolKit (FL for Flash and AR for augmented reality). FLARToolKit—developed by Tomohiko Koyama (a.k.a. Saqoosha) and Ryo Iizuka—is an ActionScript 3 version of ARToolKit, which is the original C version of the application. ARToolKit was originally developed 10 years ago by Hirokazu Kato, a Professor at the Nara Institute of Science and Technology in Japan, and then commercially licensed by ARToolworks (www.artoolworks.com).

Armed with this knowledge, we decided to start with ARToolworks and trace the path that AR took to end up on the GE Smart Grid website. (By the way, if you find yourself wanting to venture into the world of augmented reality, ARToolworks offers commercial licenses for both versions of the ToolKit. [You may want to link to the opensource sites]For the open source download of ARToolKit for noncommercial use, visit http://sourceforge.net/projects/artoolkit.)

In the Beginning: ARToolworks
For the first stop on our journey, we’ll speak with Mark Billinghurst from ARToolworks. Mark is one of the founders of ARToolworks and was also involved with developing ARToolKit with Hirokazu Kato when they were both at the Human Interface Technology Laboratory at the University of Washington in Seattle.

Layers: So, Mark, would you define the term “augmented reality” for us?

Mark: Augmented reality is technology that overlays computer graphics onto the real world in real time to create the illusion that three-dimensional virtual images are part of a user’s real environment. Computer scientist, Ron Azuma, says that augmented reality has three key characteristics: It combines real and virtual images; it’s interactive in real time; and the virtual images are registered in 3D.

Layers: How did the concept for augmented reality first come about and how was it developed?

Mark: Augmented reality has a long history, beginning with early experiments with head-mounted displays by Ivan Sutherland over 40 years ago. Since then a lot of interesting research has been done by the military and in university and industry laboratories—but using very expensive, specialized technology. However, in the last 10 years, AR has become cheap enough and easy enough to use that it’s getting far more widespread. A key part of this was the development of ARToolKit by Hirokazu Kato 10 years ago. That software uses computer vision to track the user’s viewpoint and overlay virtual images over live video of the real world. For the first time, this made it easy for programmers to create AR applications. Now, people can have an AR experience through their game console, personal computer, Web browser, or mobile phone, so millions of people can easily have access to the technology.

Layers: What kind of hardware and software is needed to create and view augmented reality?

Mark: To view AR content, a user needs a camera, computer processor, and display. For most people this means plugging a USB camera into their desktop or laptop computer, but other devices such as mobile phones can also be used. To create an AR experience, people can use low-level tools such as ARToolKit, in which case they’ll need to be comfortable with computer programming. However, the development of FLARToolKit means that people with Flash programming experience can build their own AR websites. Most recently, tools such as BuildAR by the HIT Lab NZ (www.hitlabnz.org/wiki/BuildAR), also based on ARToolKit, can be used by nonprogrammers to easily create AR scenes.

Layers: Where do you currently see augmented reality being used and how do you see it being used in the future?

Mark: Augmented reality has many possible applications. Currently, it’s being used as a fantastic marketing tool, and also in computer games and certain niche areas such as medical visualization and industrial manufacturing. In the future, mobile phone-based AR will become more common and used for activities such as personal navigation or location-based social networking. [See “AR Goes Mobile.”—Ed.] I think the technology also has great potential for educational applications that teach in entirely new ways.

Let There Be Flash: FLARToolKit
Now it’s time to move on to the Flash version of ARToolKit. We think this is the version that most of our readers will be interested in. As mentioned earlier, one of the developers of the FLARToolKit was Saqoosha, CTO of Katamari Inc. (http://katamari.co.jp)—a Web creative company in Japan. He also has a blog at http://saqoosha.net/en.

Layers: When did you first learn about ARToolKit, and why did you feel there was a need for a Flash version?

Saqoosha: I read an article on ARToolKit in June 2007 [http://kougaku-navi.net/ARToolKit.html]. That was my first contact with ARToolKit. The original C version of ARToolKit required you to download and install the application to experience AR. Most people don’t want to bother with a procedure like that.

But I was very interested in AR technology and intended to tell a lot of people about ARToolKit. Flash Player is widely installed, so I thought that if ARToolKit could be use on Flash Player, many people could easily experience AR.

Layers: What kind of projects have you used FLARToolKit for?

Saqoosha: My first project using FLAR was Desktop Fireworks [http://vimeo.com/1634128]. This was very experimental and a very simple example of how to use FLAR. I recently did another FLAR project for a campaign that supported the Japan National Soccer Team with messages from supporters. The messages input at the stadium fly out from the marker [http://vimeo.com/5012399].

And North Kingdom Said It Was Good: GE Smart Grid
The GE Smart Grid site was developed by North Kingdom (www.northkingdom.com), a Swedish interactive design firm founded in 2003. According to North Kingdom’s mission statement, “Our talented team of artists have a single, unified vision to push brands to new places, bringing every facet to life through interaction, imagination, and innovation—it’s what we call our design DNA.” They’ve proven this with their creative use of AR. In addition to GE, they’ve also done work for Coca-Cola, Toyota, and Vodafone. We’ll speak with one of North Kingdom’s co-founders, Roger Stighäll.

Layers: When Goodby Silverstein & Partners/GE first approached North Kingdom about the Smart Grid project, was AR already part of the grand scheme? How did the AR portion of the project progress from beginning to end?

Roger: Goodby were the ones to bring up AR as a potential ingredient for the campaign. For a long time we had been curious about AR, but never actually got our hands really into doing it. Since the field was quite unexplored to both us and Goodby, we got a couple of weeks to do R&D, to figure out what was achievable. We had a lot of fun (and certainly also frustrating times) trying to make the most out of the AR experience.

We had a very organic and open approach to the development of the AR experience. We set out with the idea that the object should come out of the marker and somehow be interactive, and then we added new features along the way. Some ideas were tested and canned, the ones you see survived. The simplicity of FLARToolKit is its main feature, so the implementation of the kit was very fast—basically the first thing we did.

Layers: How advanced does a Flash developer need to be to really take advantage of FLARToolKit?

Roger: You don’t need to be a star. It’s very simple if you have a basic understanding of 3D graphics. There are loads of very good tutorials that any AS programmers could wrap their heads around.

Layers: Does North Kingdom have any future plans for AR?

Roger: Certainly, this is a fun and eye-catching area, so we’ll continue to play with this as long as we think we can create interesting experiences in this field. We are concepting some interesting AR ideas that hopefully will come to life this fall.

AR goes mobile

Want to see some really cool AR applications for mobile? Then check out the Wikitude AR Travel Guide (www.mobilizy.com). Developed for the Android platform, this app is based on Wikipedia, Qype, and Panoramio. Through the use of AR, digital information about landscapes and landmarks is overlayed on the live view image of the cell phone.

SPRXMobile also just recently announced their first mobile AR browser at http://layar.eu. Just like Wikitude, Layar uses a combination of the phone’s camera, GPS, and compass to overlay real-time digital information on top of the mobile device’s screen. Layar can help you find ATMs, houses for sale, hotels, etc. Be sure to watch the cool video demo. Currently, this app is also only available for Android devices, but we can’t imagine that the iPhone would be too far behind now that the new iPhone 3GS has a digital compass.

Practical applications

See how BMW is putting augmented reality to work. Visit www.bmw.com/com/en/owners/service/augmented_reality_workshop_1.html and check out the demo video under Related Topics.

Some not-so-practical, but really cool, applications

If you’re a Star Trek or Transformers fan like we are, then you’ll get a kick out of these AR experiences from Total Immersion (www.t-immersion.com). You’ll probably need to install the plug-in for your browser, but it’s worth the effort.

EMOTIONS IN MOTION

How video can help us better understand our world

The Layers’ reader who recommended Rob Chiu, recommended his entire body of work, so we spent the better part of an afternoon reviewing all the pieces Rob had available at http://theronin.co.uk/Motion. From the technical beauty to the eye-catching, seamlessly integrated effects to the strong emotional impact, we found ourselves completely engaged in every single video.

Based in London, Rob has worked in the field of short film and motion design since 2000. Under the working alias of The Ronin, he has produced narrative-based works for clients such as Leica Camera, BBC, Greenpeace, EMI Records, Nokia, Channel 4, and 20th Century Fox. His short films have been featured in a number of film festivals including Edinburgh, onedotzero, RESFEST, and Clermont-Ferrand. In 2005, his three-minute, animation-based documentary on psychosis for Channel 4/APT Films won the award for best animated short in Canada. His short films Black Day to Freedom and Things Fall Apart have toured extensively as part of the festival circuit, winning numerous awards along the way.

In fact, it’s Black Day to Freedom that we’re going to focus on here. According to Rob, the film was “created as a fictional back-story to the global problem of the displacement of peoples. It portrays a city in turmoil with the loss and tragedy of a young family at the center of the tale.” After we recovered from some the very powerful imagery contained in the film, we learned that Rob animated it entirely in After Effects—he hadn’t used any 3D applications at all. It was time to ask Rob some questions.

Layers: Let’s begin with a little bit about you. You originally started out as a print designer. When did you first know that you wanted to be a filmmaker?

Rob: I’ve always wanted to tell stories whether through music, design, or film. I started in print design, as that was the easiest route back then. I was heavily influenced by the likes of David Carson, Neville Brody, and Attik and was drawn into the world of Photoshop. I naturally moved into After Effects after discovering that it was relatively similar to Photoshop with the added bonus of a Timeline. The first version I used was 3.1, so it’s going back a bit now. While I was working in a design agency, I studied for a BA degree in Graphic Design and used the course as an output for my personal work. After teaching myself the basics of After Effects, I submitted a short AE-based film as my final piece, and then used that to launch my career in moving images. I’m now slowly moving away from pure motion design and moving into live action film directing—but it basically all evolved from a love of print design.

Layers: You’re also a photographer. Does your photography play a factor in any of your productions?

Rob: Mainly, I use photography as a tool to experiment with framing, lenses, depth of field. I then take away what I’ve learned from taking stills and apply it to my film-based work. It allows me to get on the same page with a DoP [director of photography] really quickly and definitely allows me to be more confident when directing something. Secondly, I use my photography for storyboarding and style frames. When I boarded the Webbys intro, I used a series of photos that I had taken over the years as a reference for the client as to how I intended to shoot and grade the piece. Lastly, I occasionally do the odd illustration for magazines such as .net or Computer Arts and I base my designs on photographs that I take.

Layers: Can you give us a short list of the equipment that you use, including cameras and software?

Rob: It all depends on the production. I don’t own that much kit and the stuff I do own is used mainly for personal projects, as it’s not professional gear. I recently shot a short film on two RED cameras—one hand-held, the other on steadicam—but there’s no way on earth that I could afford to actually own this kind of gear. As far as my own gear, I own a couple of Macs—a MacBook Pro and an older G5 tower, which I’m soon getting rid of for a new iMac due to the space limitations at home. Cameras I have include a Canon HV20 HDV camcorder with a Letus adaptor with Nikon lens mount. This allows me to put prime lenses on the front of the Canon so that I can get some depth of field. I shot Left Unsaid entirely with that setup. I also own a Nikon D200 with a few lenses. Installed on my Macs are CS4 Master Suite, Final Cut Pro, and some font-management programs but that’s about it really.

Layers: Where did the concept for Black Day to Freedom come from and what was your ultimate goal for the film?

Rob: Way back in 2004, The University of Huddersfield approached me about filming some computer training sessions they were putting on for asylum seekers in the UK. I ran around following these courses and quickly realized there was little point to the film and it was going to end up being a missed opportunity. I proposed that we should talk to the asylum seekers, find out why they were here, and have them write some poems and stories on what had happened to them that made them leave their homes. I then took all this material and collated it into one story, which became Black Day to Freedom. The name came from one of the poems; it’s actually incorrect, as it should be Black Day for Freedom, but as that was what was written on the paper I kept it, as it felt right.

My ultimate goal at the time for the film was to show people what was happening overseas with the whole invasion of Iraq and the mass displacement of people. At the time there was a lot of negative press about asylum seekers taking all the money and housing, but no one really gave much thought to why they were even here. We packaged it all up as a DVD with a book that featured over 30 illustrators and designers worldwide and then sold it online for a short while. The film did pretty well in short film festivals and really helped cement me as a motion designer and short filmmaker. Even to this day when I talk at conferences, this is the most well-received piece out of everything I’ve done. I’m really proud of it!

Layers: Why did you decide to use only After Effects to animate Black Day to Freedom?

Rob: Mainly because I had no other way of achieving the epic scale of the film with any other tool. It was impossible to film something like this, and at that time I had no idea how to even go about doing that. The other reason is that I have absolutely no working knowledge of any 3D program, so I decided to do it in AE, which was a challenge, but I think gives the whole piece a very unique look and tone.

Layers: Could you briefly run us through how the film was created?

Rob: After writing out a rough treatment, we shot friends and ourselves for the characters; in fact, anyone we could get to stand in as a reference. My brother, who is an illustrator, then hand drew each character and created the illustration style. These were then individually scanned and cut out in Photoshop. I created the buildings using textures and line drawings—a bit of a mixture of the two really. Everything was built as a three-dimensional object in After Effects, so if you look at it properly, it’s basically just loads of boxes etc., but it worked out okay by using textures and trying to push AE as far as I could.
I even managed to just about pull off some helicopters! There was one scene where the helicopters are flying above the buildings; it’s a 10-second clip and it took forever to render out because of the complexity of the buildings. In hindsight, I would have created some low-res proxies of the buildings, but at the time I was still learning how to do it and kind of making it up as I went along, so I put the camera really high up and used the full-size buildings, which were something like 6000 pixels high each. Crazy!

Layers: In certain sections of the film, the scene switches to color for a brief second and jumps around. How does this technique, as well as your general use of color throughout, add to the overall impact of the film?

Rob: I came up with that effect by mistake. I had rendered out a clip of the scene with a sky and one without, as I was trying to decide whether to go with a sky or without. I was turning one off revealing the other and back on again and thought that it looked pretty cool. So when the moment of violence really starts to get crazy, this whole glitch-type effect occurs, jolting the viewer momentarily. I think it worked pretty well when combined with the audio dropping out except for the sound of a reporter’s voice. It’s actually my favorite scene in the film and the one people usually ask me about. Throughout the rest of the film, there’s very little color, which is why it works so well, I guess.

Layers: We were very impressed by the use of shadows in the film. Why does a shadow or silhouette of a person sometimes have more impact than the real thing?

Rob: I had some drawings of soldiers but quickly realized that they didn’t come across as powerfully as I wanted. By only seeing the shadow, we’re not led along a path that says this is a soldier from country A or B. We actually don’t know whether these soldiers, if soldiers at all, are here to help or to kill. The scene at the end with the guy with his hands on his head originally had a shadow of a soldier as if he was being captured. I rendered it out and the shadow didn’t appear, and I realized that without the shadow, you’re either looking at a guy who is being arrested or you’re looking at a guy regretting what he has just done. I liked that it was up to the viewer to decide, and more importantly, it actually says more by showing less.

Layers: How do you think digital technology has helped the independent filmmaker?

Rob: I think it’s now so easy to go out there and make a film without any financial backing or support. You can basically just make a film with a phone camera and a laptop these days. These are good times to be a filmmaker.

Script faces

For example, very few script faces can be set in all caps. Most just weren’t designed to be used this way, and some of the more exotic forms used for script capitals can be unrecognizable without the accompaniment of more familiar lowercase forms to provide some context. Exceptions to the rule are faces such as Impress and Dom Casual, which were designed as advertising faces and derive from the kind of lettering—often in all caps—that you see in hand-painted supermarket signage.

Joining script faces

So-called joining script faces—whose characters actually connect—are the trickiest to deal with, even though they’d seem to all but eliminate the use of most of your typographic armaments, such as spacing adjustments. Roundhand faces, which imitate elegant formal handwriting, are a good example of joining faces. The connections between characters in these faces effectively make the entire word a single ligature, which means that you can’t adjust their tracking very much, if at all. If their spacing gets too loose, the letters disconnect; if you tighten tracking too much, adjoining characters will overlap instead of merely abutting. For the same reason, you can never set joining scripts with justified margins—the stretching and squeezing needed to fill justified lines will make hash out of these faces’ carefully calibrated spacing.

Consequently, there’s no need to kern lowercase characters in joining script faces. On the other hand, you’ll almost always need to kern the spaces between capitals and the lowercase characters that follow them (shown in this album cover). Because all the lowercase characters connect, the gaps after capital letters look extra large, as seen in Prokofiev’s name. Romeo and Juliet were thoughtful enough to have initial caps that have connecting forms, at least in the face used here, Embassy.

Before ©COLORBYTES 1992

after kerning type

The often loopy, flamboyant forms of script faces also oblige you to look for spacing problems in places you’d normally ignore, such as around the ampersand in the album cover type. The swerving shape of the Embassy ampersand makes it appear to lean away from Romeo and reach out to tickle Juliet. Restoring typographic decorum demands kerning the ampersand away from the latter and toward the former. You don’t normally have to worry about kerning against word spaces, but in script settings it happens all the time. Script faces play by their own rules and we’re all obliged to follow along.

Get that calligraphic slant

Most typeset characters are content to contain themselves within the bounds of the normal em square in which they’re constructed, but not joining script characters. To get that calligraphic slant and have all the characters “link hands,” one character has to overlap the next. Here, we’ve selected a single character to highlight the bounding box of such script characters and show how peculiar the spacing of these faces really is.

Snell Roundhand (top) and Lucia (bottom) samples

For a joining script face, the inclined characters have been constructed to overlap each other in order to connect. Because typesetting programs align characters at the margin according to the edges of their bounding boxes, tricky alignment issues arise in flush-left or -right settings. In midline, this overreaching doesn’t have much practical impact for the typesetter, but at either end of the line, this method of constructing characters can affect margin alignments.

Typeface designers have two possible strategies when it comes to accomplishing this overlapping. For example, Snell Roundhand (the top sample) could be called left-handed because the overhanging parts of its characters occur on the left side of their bounding boxes. By contrast, Lucia (the bottom sample) is right-handed: The overhanging parts of its characters extend beyond the right-hand side of the bounding box. Both accomplish the same end, but with the result that Snell will hang out beyond the left-hand margin when it starts a line, and Lucia can be a struggle to align flush-right if a line ends with a character (such as one with an ascender) that leans far out of its bounding box. In such cases, you’ll be obliged to manipulate the horizontal position of such lines using left and right indents to get them to appear properly aligned.

Lastly, most roundhand script faces don’t work well in small sizes. Many of these faces started life as engraver’s faces and were never meant to be used in tiny sizes. In computer settings, they become spindly as their point size decreases, and any kind of competition with the background (tints and patterns, for example) makes them very hard to read. Even in the large sizes used in the sample album cover, I chose to stroke the characters in black to give them some contrast against their busy photographic background. Reversed script type (set white on black) in small sizes tends to break up, as the black ink invades the super thin strokes. In this, they’re like italics, only worse!

What is a logo?

To understand what a logo is meant to do, we should first know just what a logo is: It’s one aspect of a company’s commercial brand or economic entity, and a logo’s shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other noncommercial entities. A logo’s design should make us immediately recognize the company—it should inspire trust, admiration, loyalty, and an implied superiority.

What makes a good logo?

A good logo is distinctive, appropriate, practical, graphic, simple in form, and should convey one message. An effective logo usually has a concept, or meaning behind the logo, that allows it to communicate the intended message. It should be printable at any size and be effective without color.

With these things in mind, it would be safe to say that a great logo usually comes down two things: a great concept and great execution.

The design process

When creating a logo, follow a logo design process that ensures the final design suits the client’s needs (not their wants). Here’s a list of what’s essential to the logo design process:

• Design brief: Start with a questionnaire or interview with the client to get the design brief.
• Research: Conduct research focusing on the industry, its history, and its competitors.
• Reference: Look at logo designs that have been successful and current styles/trends that may be related to the design brief; however, don’t follow trends just for the sake of it. Longevity in logo design is key.
• Sketching and conceptualizing: Develop the logo design concept(s) around the above-referenced brief and research.
• Reflection: Take breaks throughout the design process to allow your ideas to mature. This also helps to renew your enthusiasm and get feedback.
• Positioning: Position yourself as a contractor or build a long-lasting relationship with the client; for example, the client tells you what to do or you guide the client to the best solution. The latter is usually best.
• Presentation: Present only your best logo designs to your client. PDF format usually works best. You may also wish to show the logo in context to help the client visualize the identity.
• Celebration: Drink beer, eat chocolate, sleep, then start on your next project.

Getting the job

Now that you have an insight into the logo process, let’s go through it in more depth, using a recent job as an example. When the CEO of Vero contacted me late last year (he found me through my blog), the company was looking for a complete branding package for a new business they were launching. Not only did they want a logo and identity design, they also required the design of the actual product.

After going through the Vero business plan, numerous emails, and having them fill out a questionnaire (it’s available on my website), I had a good idea of what the whole project entailed. So, I did the math, sent them a proposal and agreement (never call it a contract!), and received a 50% deposit.

The brief

Before walking through the design process, here’s some background information on the project along with the design brief.

Sparked by environmental concerns, many hotels and restaurants have recently stopped selling bottled water and, instead, they’re serving either plain or filtered tap water. Vero offers restaurants, cafes, and hotels an eco-friendly bottled water alternative. The company uses the latest in microprocessor-controlled, water-purification technology to purify, chill, and carbonate (if needed) tap water at the point of use.

Without going into too much detail, the brief was to design a “South Beach chic” glass bottle that made people “feel cool drinking it.” The bottle should scream “practicality,” “environmentally conscious,” and should be something that “a celebrity would be pictured drinking.” The target market would be high-end hotels and restaurants—places where people would expect to pay $7 for a bottle of imported water.

In its purest form, the brief was to create a logo that could be placed on a glass water bottle and portray all of these things.

Research and reference

After the brief was clarified, the deposit received, and the agreement signed, the research began. This included researching Vero’s competitors, the industry, target market, location, other logos, and so on. Only after you’ve carried out a thorough research should you move on to the design development.

Sketching, reflecting, and developing

After the client signed off on the bottle shape and tag line (“Earth’s Purest Drinking Water”), the project’s next phase was to develop the logo. And this is where creativity comes into play. Based on the design brief and research conducted, this is where I let my ideas run wild.

I started by brainstorming and sketching my ideas and then experimented with them on the computer. A crucial part of this process is that I took breaks between these sessions to reflect on the designs and get a fresh perspective on the job at hand. The challenge that I had when creating the Vero logo was trying to incorporate “chic,” “practicality,” and “environmentally conscious” into one logo, while also making the logo look like it was for a high-end market.

Brainstorming ideas on paper

Here’s a page of my original sketches. I know I’m no Picasso but it’s the end result that counts. Remember: There are no bad ideas, just bad decisions.

Original sketches

Computer generation: As you can see, I had the idea of creating a “V” from two “leaves” of water. With a general idea in mind, I experimented with the concept in Adobe Illustrator, creating some rough, vectorized logos.

Experimentation results in Illustrator

Tip: This is a good time to advise that you should always design a logo in vector format to ensure that it can be scaled to any size. And you’ll note that I haven’t yet added any color. That’s because it’s best to focus on the shape and concept of the logo at the start of the process and then add color toward the end.

The concept for my final logo was based around two leaves forming the letter V, not just once, but twice. The middle V in the negative space suggests the shape of a leaf in a creative and clever manner, making it a memorable and identifiable mark. I left the bottom of the letter V open to suggest that the source was renewable—as if the leaves were coming out of the earth.

Typeface: After experimenting with a variety of logos, I then tried out typefaces. Keeping in mind the considerations stated in the design brief, I chose Bauhaus Light for its geometric, clean lines—these type characteristics will give Vero the look of a modern, fresh, and sustainable company. Bauhaus Light is also a very pretty typeface, which makes it great for display purposes and it looks great in both horizontal and vertical formats. The added spacing between each letter gives it a touch of class and luxury.

Bauhaus Light works very well for both vertical and horizontal versions of the logo

Presentation and color

Now that the typeface and logo concept were finalized (though this is never set in stone), I sent through one concept to the client. Why only one? It’s important to show only your best logo design concepts, not a large array of options. You’re the designer and should know best. You’re not there to say, “Here are 20 concepts, pick one.” This may just confuse the client.

The logo was approved straight away and we moved onto color choices. I experimented with a large variety of colors, keeping in mind how the logo would look on the bottle design and what each color would portray (your knowledge of color theory is vital here).

Experimenting with colors

After coming down to a few select colors that reflected the values stated in the design brief, I sent through these options and we agreed that the blue/light-blue variation was the best color for Vero.

The final approved logo

Time to celebrate

The client agreed to the final colors, logo, and tagline and sent the final 50% payment. I then completed a mock-up of the bottle design in MAXON CINEMA 4D. The horizontal version of the logo is featured on the back of the bottle. (As this article is being published, the bottle is being manufactured in China and a website will follow soon thereafter.)

Mock-up of bottle

Getting started in mobile doesn’t have to be rocket science. In fact, using good Web principles and a modern device such as the iPhone is a perfect place to start. By the end of this article, you’ll know how to create a working iPhone app that can be deployed on lower-end devices and be distributed through mobile app stores.

Let me start by making a few assumptions about you, the reader. First, I’ll guess that you’ve had a mobile phone for a few years now—probably some sort of smartphone with a few advanced features, but really a phone with a few extra features bolted on. I’ll guess that you played around with some of the more advanced features, like the mobile Web browser or maybe you downloaded a game or two, but after the novelty wore off you never used those features again and your advanced (and expensive) piece of mobile technology reverted back to its primary purpose, being a telephone.

Now, I’m going to guess that when the iPhone was introduced, your ideas about what mobile technology could do changed a bit. Sure you were a little bit skeptical, but come on, admit it, when you first saw the iPhone you knew it was like no other telephone you had ever seen.
While my powers of perception might have missed about 15% of you, chances are the other 85% know what I’m talking about. Your experience in mobile pretty much summarizes the evolution of the marketplace for the past ten years. While the iPhone is certainly not the alpha and omega of mobile, it stirred something in us that’s having a halo effect on the entire mobile industry—finally consumers are starting to realize that mobile phones aren’t just telephones.

Mobile devices have already outpaced the growth of desktop computers around the world. The research firm Informa predicts that in just a few years 50% of the world’s population will access the Web through a mobile device. By the way, that’s 20% more than people who will access the Internet through a desktop browser.

In 2008, the iPhone and devices similar to it, along with flat-rate data plans, skyrocketed use of mobile devices as information devices, making the U.S. the largest consumer of mobile Web content in the world—something it has never done before.

So how do we, humble designers and developers of the Internet, adapt our designs and content for this incredible new medium? How do we take advantage of the opportunity around the iPhone explosion? And while the iPhone is the shape of things to come in mobile, it’s still a small fraction of the overall market, so how do we make our content available for everyone else?

iPhone first, other devices later
I won’t bore you with the decade of industry history; let me just tell you that the biggest challenge in designing for the mobile Web has been the mass proliferation of shoddy mobile Web browsers made worse by device fragmentation. In other words, there are a lot of devices out there that have a bad Web browser in them that can’t be upgraded.

The WebKit mobile browser, which first appeared in Nokia smartphones and then exploded with the iPhone, has started to change the landscape of the mobile Web. Along with Opera Mobile, a powerful aftermarket mobile browser in millions of handsets, Web standards are finally coming to mobile.

What does this mean for us? We can finally create graceful mobile sites with gorgeously designed experiences, and because we can use standards, we’re assured they’ll look reasonably the same on next generation devices, such as the Android G1 and the newly announced Palm Pre (which both use WebKit as well as their native mobile browser).

So my advice is to focus on creating a great iPhone site or Web app using Web standards. If we do our job right, we won’t need to worry about other devices during design and development. As long as we stick to good Web standard principles, that job will be easily tackled (which I’ll come back to at the end of this article).

Designing for context
Our first task in creating a mobile site or Web app is to understand in what context users will be using our content. Context is the circumstances that form understanding. This could be physical context; for example, the user might be on a bus or train, away from his desk. It could be media context or the type of device he’s using and its limitations (e.g., he may be using a mobile phone and network coverage might be spotty while in transit). And it could be his state of mind or modal context (he might be bored and just wants to read some news).

Context can aid us (or even distract us) in understanding or appreciating the information in front of us, adding value to what we experience and therefore to our lives. Now that might sound a bit overwhelming, improving someone’s life through a mobile website, but it happens every day. We use information to aid us in everything from the small forgettable problems of our lives, such as where to eat lunch, to big decisions, such as buying a house or seeing a doctor about that rash.
Given the constraints of the medium, good mobile experiences begin and end with understanding your user’s context and then somehow addressing it. For our purposes, we’ll start with a simple mobile Web app that grabs the recent articles from www.layersmagazine.com and presents them in a mobile-friendly format for readers who might want to catch up on the bus or train commute. Here are some things we’ll need to think about:

• We’ll need to consider that they’ll not be stable while reading, so we’ll want to use larger text.
• They may encounter dead spots in the network, so we’ll want to load larger amounts of data per page load to decrease the need for paging.
• We’ll also need to consider that they’ll only have a short timespan to read our content, so we might need to keep our entries short and sweet.

There are many more issues of context that we might address, but for now we’ll try and keep it simple.

Designing for touch interfaces
Once we have a basic idea of what we want to take mobile and addressing the user’s context, we need to create how we want to present it. Designing for the iPhone and higher-resolution devices offers a bigger and more flexible canvas to work with, but the downside is that we have to design around bulky fingertips.

Each button or hit area should be at least 40 pixels in height to allow for a nice clear target to touch. We should use larger fonts to not only fill in the event areas, but also to provide our readers a usable type size when held about 8–12″ away from their eyes.

We also want to make it clear that all actions or events on the page are visually connected to parent display or task. We want every actionable item to clearly state its intended purpose. This isn’t just to prevent frustration during time-constrained browsing sessions. When designing for mobile devices, think of each touch or click as an investment of time and money on behalf of the user, as oftentimes it actually is. Many users pay for each page they visit. So if you present a bad label that takes the user to the wrong information, the user has to literally pay hard cash for that mistake. In some cases they’ll have to pay to go back to the original page in which they started. It’s your responsibility to not allow these costly mistakes to occur.

I like to lay down a basic design approach in Adobe Photoshop first, but I only focus on the key design elements that I’ll need to slice up and optimize—the rest I’ll design with XHTML and CSS. This allows me to view my site on devices sooner, which almost always impacts my design decisions and ultimately the final design. As the designer, your challenge will be to think of your design fluidly, how it will stretch and zoom based on the user’s context and device. The tighter you try and reign down on the presentation, the less compatible and less useful it will become to mobile users.

Designing for standards
With our design direction in hand, so to speak, we are ready to start building our markup and styles. If you aren’t familiar with Web standards principles, I suggest reading up on a few of the basics (www.opera.com/company/education/curriculum). I have two easy rules:

1. Is it semantic? Don’t go crazy adding a zillion divs or spanning each with its own classes or IDs. Just use basic HTML elements like headers and lists with structural divs. All your content should live within at least a block level element, such as a paragraph tag.
2. Is it readable? Write your entire markup before you add any styles. Your site should be perfectly usable without a single style (since that’s how most other mobile devices will read it).

We’ll want to keep the layout of our content short and simple; the more complexity we add only makes it more difficult to adapt it to other devices and moves us further away from addressing context. In this example, I mentioned that we want to be able to load more content per page so the user won’t need a persistent wireless connection. So we’re going to create a simple list of entries, starting with the title and followed by the body.

Now I want to hide the body of each entry, giving the user a nicely formatted list of articles that only requires one action to view. The easiest way to do this would be with a JavaScript show/hide event, but we can’t assume that JavaScript will work on all phones; in fact, it only reliably works on a scarce number of high-end devices. So we’ll add a JavaScript target that we can style for our higher-end phones, and all other devices will just ignore it and display the body with the title.

I should probably mention this is why I don’t recommend using design libraries that are meant to emulate iPhone interactions, such as iUI. They rely heavily on JavaScript which won’t work across multiple devices, nor can it be safely downgraded to less-capable devices. These are great tools if you’re just focusing on one device, but can be a serious hindrance if you want to extend out to others.

We should now have nice semantic markup that looks a bit basic—but that’s the point. Our markup is perfectly usable in virtually all mobile devices. But let’s add a little style to it.

Designing with CSS3
The WebKit mobile browser in the iPhone, iPod touch, Android devices, and the Palm Pre supports a great deal of CSS3, which can come in handy when designing for mobile devices. You can check to see what CSS3 is currently supported in various browsers at www.css3.info. Typically, whatever is supported in Safari is supported in mobile Safari and other WebKit browsers.

For the purposes of our app, we don’t need to go too crazy. We’ll use little rounded corners around our content area and a small drop or box shadow to complete the effect. [Insert 06-css3]
You’ll notice the little “-webkit” before our CSS3 declaration. We need to do this since the World Wide Web Consortium hasn’t fully ratified CSS3 yet, but that could change soon. To be safe, you should include both the “-webkit” and the normal CSS3 syntax for support of future non-WebKit browsers. It’s a bit tedious to make sure you update everything twice, so I recommend just copying those styles when you’re satisfied with your stylesheet.

And with just a handful of styles, we’ve made an unstyled block of text into a nice-looking iPhone site.

The technical bit
If you’ve been paying close attention, you’re probably wondering where all the content came from for the Layers magazine mobile site. No, I didn’t cut-and-paste or make a CMS template; I just used the Layers magazine RSS feed and the supersimple PHP library called SimplePie to pull in content and reformat it.

In fact, RSS is the perfect place to start your mobile app. RSS is basically just an XML file, which comes in handy for simple content adaptation since the presentation from our content is already stripped out and our data is structured. By just adding a few lines of code to a single document, we can pull our RSS content into our newly styled mobile site.

Designing for the App Store
Stories of developers making cheap applications that turn them into overnight millionaires might replace your pupils with dollar signs. This isn’t a new phenomenon to mobile; it has happened many times before. Each time, the micro-industry crashed upon itself due to that same problem as before—device fragmentation. The Mobile Web is the only mobile distribution platform that promises to work consistently across all browsers, using the knowledge you already have (as you’ve seen from this article).

Who knows what will happen this time around, but one thing is for certain, it does feel good to be on the user’s desktop. Well, I have a couple of tricks for you.

By adding these few lines to your Web app, your users can bookmark your app to their iPhone or iPod touch home screen, just like a native app. The first section of code points to our app icon file; the second launches your app in its own browser, with no browser chrome, URL bar, or back buttons. Your users will get a seamless mobile app experience that you control.

And if that isn’t good enough for you, try out PhoneGap (http://phonegap.com), an open-source project that can turn your Web app into a native app that could even be sold through the iTunes App Store. Plus, PhoneGap works on the Android and Blackberry platforms as well.

Designing for the other 99.8%
Oh, there’s just one more thing. What about all those other devices? In the U.S., more than two-thirds of mobile Web traffic is coming from the iPhone and other high-end devices like it, but let’s not forget our little flip-phone buddies out there.

Since we coded everything to standards and we didn’t use any tricky JavaScript animations to get users to our content, our site can still be viewed on lower-end devices. By simply using the stylesheet media types available in XHTML, we can point to different stylesheets based on the device.

With a few tweaks in our lowest common denominator or LCD stylesheet, we have a perfectly usable site for everyone else.

I’ve shown you how easy creating mobile sites can be; now the rest is up to you. Get out there and start making cool stuff for this exciting new medium that billions of people never leave home without.

Client: Terry Shaw www.musicpotential.com

Musician and music teacher Terry Shaw has an independent streak. “I like to do things myself if I think I can do them better,” he says. “I’d rather play solo than with lesser musicians.”

That’s why he plays all the instruments on his latest CD, Instrument of Choice. On his website, he describes the CD like this: “It’s plastic, round, 4¾” in diameter, silver on one side with pictures of me on the other.” Obviously, Shaw has a sense of humor; however, he also describes the songs this way: “They’re original compositions covering many styles—bluegrass, swing, waltz, gypsy jazz, Celtic, Latin, contra, and jazz. And if that isn’t enough, I even include my cat singing on his own track.”

“I don’t have ADD, but I like all types of music,” he says, “Irish to Balkan to swing. But it still sounds similar because I wrote it.”

Shaw’s musical career started with playing the trumpet in his school band. He took up stringed instruments when a friend in the fifth grade introduced him to the guitar; he has since expanded his repertoire to include the mandolin, banjo, dobro, and fiddle, all of which appear on Instrument of Choice.

Shaw sells the CD through his website (www.musicpotential.com) and directly at the venues where he performs. When we approached him about a redesign, he said he likes the current cover, though he’s not fond of the lettering. “It’s too common,” he says. “I’d like a font that’s a little less pedestrian—maybe even one that looks like hand lettering.” He also says he’d like to project the same kind of image as Mark O’Connor: that of a virtuoso player who can play multiple instruments. But he doesn’t want to lose the personality and warmth that the current cover captures.

CREDIT: ©2008 DAVE KENNEDY. ALL RIGHTS RESERVED. www.davekennedyphotography.com

AFTER

DESIGNER: Stephen Woltz (designer), Ben Capozzi (teacher) www.svhed.org

Employing images ranging from mandolins set aflame as a nod to Jimi Hendrix to collaged bluegrass fantasies, 19 Halifax County High School students in the graphic arts class at the Southern Virginia Higher Education Center tackled the CD makeover with relish. We bought and listened to the CD, did a heckuva lot of individual and group ideation, and looked at Mark O’Connor’s branded material before beginning our designs. Unfortunately, the photographer’s request that we use the photo in its entirety removed from contention those designs that relied on isolating Shaw from the background (and frustrated those who had looked at Shaw’s website and seen his penchant for inventively placing his photo into improbable settings). Finally, just three choices remained. Two were by outstanding sophomores, but senior Stephen Woltz’s design is our final answer.

Noting that Shaw says his background is primarily in rock, Woltz wanted a “grunge” feel for his design, and to give it some personality without pretension. To achieve that look in Photoshop, Woltz built up layers of marbled paper as a background in warm earthtones and added coffee stains. An unrehearsed placement of instruments against the background gives the cover a handmade feel while suggesting Shaw’s virtuosic range and affinity for craft. The design walks that fine line between country and cornpone and still manages to capture the jazzy feel of Shaw’s music.

Woltz chose an edgy but strong font, Cracked from www.dafont.com, for the CD title. He picked another font from dafont, Joe Hand 2 for the signature and the song titles, and tweaked the paths to refine the handwritten feel.

Woltz simplified the weak layout of the original back cover and focused it on a boldly cropped close-up of a banjo. The final design is homemade without being homespun, a theme that seems to run throughout Shaw’s work and comments.

[ABOUT THE DESIGNER]

Stephen Woltz – Southern Virginia Higher Education Center
Stephen Woltz and his classmates are students in dual-enrollment courses at the Southern Virginia Higher Education Center’s Business of Art & Design program, an innovative curriculum for Danville Community College students and Halifax County high schoolers.

In addition to developing his design talents, Woltz writes and directs his own films, competes for top honors in his graduating class, flings himself at opponents in the Allied Independent Wrestling Federation, and volunteers with the Ruritan Club.

Digital Art & Design curriculum coordinator Ben Capozzi has a degree in Studio Art from Virginia Tech in Blacksburg, Virginia, and worked in the school’s InnovationSpace multimedia center. He’s now pursuing an M.A. in Education & Instructional Technology and works with Woltz and other students five days a week to develop Virginia’s creative professionals of tomorrow in a sweet lab outfitted with Adobe CS4 and Mac Pro towers. His job, like each of his students, rocks.

APPLICATION USED: Adobe Photoshop

AFTER

DESIGNER: Davin Sanchez www.behance.net/DavinSanchez
When I saw the original CD cover, my first thought was, “Whoa!” It feels like a rush project, and the generic font doesn’t live harmoniously with the overall imagery presented on the cover. Certain aspects of the cover are fun—the cat thinking of the song titles—but the execution makes the overall effect seem silly and hokey, miles away from the fun and intriguing nature of the music. But I knew that with a little TLC, Instrument of Choice could be a true eye-grabber.

I didn’t want to use the existing cover image because it tells the viewer nothing about Shaw’s music. I wanted to convey the feeling, emotion, mystery, and storytelling that is Terry Shaw. When I listened to his music, read his blogs, and checked out his website in an effort to familiarize myself with the artist, I realized that this music was far more complex than the cover led his listeners to believe.

I removed Shaw from the cover and focused on a more reflective and intriguing image that matches the breadth and depth of his music. I chose the image of the woods because this image, much like the music, wasn’t easily defined—you could get lost in it, and yet it could be your own backyard. In an effort to convey Shaw’s lighthearted nature, I chose to preserve the image of the cat and the curiosity that cats so readily symbolize.

The cover also needed some organic, hand-wrought imagery to reflect the individuality of this artist and his music. I handwrote the text and drew some illustrations. I thought they would complement the sincerity and uniqueness of Shaw, and I thought they would be fun.

[ABOUT THE DESIGNER]

Davin Sanchez www.behance.net/DavinSanchez
Davin has lived from coast to coast but now lays his head primarily in the City of Angels. He started designing in high school in Florida, laying out flyers for local bands, silk-screening T-shirts, and painting and drawing. Davin took his first major corporate job at a well-established company doing identity branding and Web and print design, as well as working on the side with local bands. The corporate print world became uninspiring after a few years, and he needed to move on.

Davin then came into contact with an Interactive Agency in L.A. He packed his life in his car and left for the Wild West a week later. Davin quickly became an Art Director, creating work for Scion, Budweiser, Bud Light, Pepsi, and Sony Pictures.

Davin has moved on and now does contract work in the Los Angeles area. His most recent work has been (on the Web) for Ford Models, Battle for Terra, and Bank of America; identity work for SanSu Solutions; and clothing for Maroon 5 and Sara Bareilles.

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

AFTER

DESIGNER: Laurie Davidsohn-Bienstock www.davidsohngraphics.com
Terry Shaw is a multitalented instrumentalist and composer with a wide array of music styles. Shaw clearly has a sense of humor, which adds to his personality and spills over to his music. My vision for the redesign of Shaw’s cover was to create something upbeat, magical, fun, fluid, and full of high energy, with a hint of whimsy, all while maintaining a serious side. Wow, that’s not a lot to ask for, is it?

I started with classic music symbols: the treble clef and musical staff. The treble clef serves as an anchor for the cover, and the lines of the music staff also represent the strings of Shaw’s repertoire of instruments. I built upon these elements with fun, colorful, and random string instruments. I created multiple layers in Photoshop with various textures and silhouettes of more instruments and generously included swirls and wavy composition lines for fluidity.

Since Shaw lets his cat “sing” on one of the cuts and has a picture of him on the original cover, I thought it was something personally important to him. I wanted to keep it in my redesign, so I added the singing black cat among the instruments.

For Shaw’s name, I chose Adobe’s Voluta Script, and I used Sam Wang’s free Harrington font for the CD title. Since Shaw’s music style ranges from bluegrass to Celtic to jazz and then some, it seemed fitting that the fonts would be so different from each other but somehow still work well together.

I toned things down a bit for the back cover. While I do like the photo of Shaw with all of his instruments on the original cover, it seems to lack a bit of style. I cropped the photo and gave it a sepia tone to blend in with the overall design. Finally, I added an excerpt from a favorable review on a popular industry website.

[ABOUT THE DESIGNER]

Laurie Davidsohn-Bienstock Davidsohn Graphics





Laurie Davidsohn-Bienstock continued her education in graphic design after receiving a Bachelor of Arts in Journalism in 1985. Over the following decade, Laurie refined her talents and professional qualities while working for some of the most prestigious design firms and advertising agencies on the West Coast. In 1998, Laurie launched her design firm, Davidsohn Graphics, and in March 2007, along with her husband Cion, purchased Town and Country Printing in Agoura Hills, California. Sometimes Laurie feels like a kid in a candy store, only she’s a graphic designer in a print and copy shop.

Laurie has an intense passion for graphic design, and since the purchase of the print shop, a love for different and unique paper and card stock. While she typically uses all three of the main programs in Adobe Creative Suite, her favorite is Photoshop, where she enjoys creating textures using multiple layers, filters, and masks. Laurie and Cion live in Granada Hills with their two daughters. Laurie also has five indoor cats and several outdoor strays.

APPLICATIONS USED: Adobe Photoshop and Adobe InDesign

Linda Zacks can’t be indexed as one particular artistic species: she’s equal parts design, illustration, paint, poetry, zip, and zoom. She graduated from Brown University in 1995, where she studied semiotics and creative writing and spent her junior year at Rhode Island School of Design. Four years prior to launching a freelance career, Linda was Design Director at Vh1.com. Since going solo in 2004, she’s been hunkered down in her creative laboratory in Brooklyn called “extra-oomph,” concocting pieces that churn with a vivacious energy. Some recent projects include a mural in the Paris subway; a national “Back 2 School” campaign for Sony Style; parts of a “crazy A” for an Adobe campaign; funky, colorful characters for Nickelodeon’s teen network The N; and helping birth a new creative social networking website called VOO!

Layers: You use a lot of hand-drawn, painted elements along with computer-generated art. Which do you usually start with and what’s your process for combining the elements?

Zacks: I love working by hand—the messiness, the unpredictability, the accidents, the smells, the textures—I usually start there. I often use the computer as a kind of virtual glue stick: a place to combine hand-done elements and weave them together, but never really as a place to originate pictures. I’m addicted to my scanner. I’ve been known to scan in some crazy things and I think it’s the best invention on earth. I just wish they made them bigger—maybe even desk sized!

Layers: You often mix bright colors in contrast with black and white. How do you choose your colors for a project? Do you start out knowing how the final piece is going to look or does it evolve as you go along?

Zacks: I never really know exactly how something might turn out. The suspense, the twists and turns an image takes as you get in the zone are always surprising and invigorating. I am always open to happy accidents and stream of consciousness. I’ve always been in love with the strength and grit of black-and-white imagery and strong splats of color straight out of the inkbottle. I never really mix paint—love its naked intensity. Choosing colors—it could be as simple as seeing something minutes before I start to dig in, and the impression is burned into my skull and makes it into the picture.

Layers: A lot of your art has a strong emotional impact on the viewer. How personally connected are you to each piece you create? Where does your inspiration come from?

Zacks: I do a great deal of thinking before I start anything. No pen, no paper, no computer. I thoroughly dissect and analyze. It pretty much takes over my brain for a considerable period of time. I make a strong emotional connection to ideas and it carries through from my brain, to my heart, to my hands, to the paper. Inspiration comes from everywhere—mostly from the places you’d never expect.

Layers: What applications do you work with regularly? Do you have a favorite?

Zacks: I use Photoshop all the time and it’s definitely my favorite. I use Illustrator from time to time and it is definitely not my favorite.

Layers: Why did you decide to leave the corporate world and become a freelance designer? What was your biggest challenge in making the transition?

Zacks: As Design Director for Vh1’s website, I was stuck doing Web design for one brand—the commute, the bureaucracy, the headaches. In the evenings and on the weekends, I always found time to work on my own projects, but it was really difficult. I yearned to work with a diverse group of people on all kinds of projects while continuing to churn out personal work. I wanted a life that was less predictable, less 9 to 5. I wanted to be my own boss. Freelancing is full of challenges—marketing, negotiating, discipline, droughts. The lists are endless, but if you can make it work, the rewards are spectacular—the sky’s the limit!

Layers: What are the differences in working with big clients, such as Adobe and Sony, versus working with smaller, lesser-known companies?

Zacks: Big clients usually have bigger contracts to read. But other than that, I’ve worked with some wonderful people from all different kinds of places—and that’s the greatest thing about being a free agent.

Linda Zacks: www.extra-oomph.com

Don’t fear change
Perhaps I was a little off in saying all you need is Photoshop, there’s one other thing you need to create this animation and that’s an image with some coins.

STEP ONE: Start by finding or creating an image that shows both sides of a coin. Using the Elliptical Marquee tool, select one side of the coin (press-and-hold the Shift key to get a perfect circle; press-and-hold the Spacebar to reposition the selection as you drag). Once you’ve made your selection, press Command-C (PC: Ctrl-C) to copy the selection, choose New from the File menu, and click OK. This will create a document that matches the size of the copied selection. Press Command-V (PC: Ctrl-V) to paste the data into your new file. Once pasted in, drag the Background layer to the Trash icon at the bottom of the Layers panel to delete it. This will leave the coin with transparency around its edges. Repeat for the other side of the coin then save the two files with the appropriate names for the front and back.

STEP TWO: Go to File>New and create a new file 8×4″ at the same resolution as your coin files. Click on the Create a New Layer icon at the bottom of the Layers panel. Press Shift-Delete (PC: Shift-Backspace) to open the Fill dialog, choose 50% Gray from the Use drop-down menu, and click OK. This layer will be our 3D coin. Under the 3D menu, choose New Shape From Layer>Cylinder. The flat, gray layer will turn into a gray cylinder.

STEP THREE: The 3D widget that appears when you’re working with your 3D tools allows you to control many of the object’s attributes. This is that little object with the three colored arrows you see located at the upper left of our cylinder. If yours isn’t showing up, select one of the 3D tools from the Toolbox by pressing N or K (if you still don’t see it, make sure that the Enable OpenGL Drawing option is turned on in the Performance Preferences). Each color represents a different plane of the object’s axis: red contains the controls for the x-axis, green controls attributes for the y-axis, and blue denotes the z-axis. Passing your cursor over the various symbols on the 3D widget, and clicking-and-dragging once the point you’re hovering over turns yellow, will activate its specific control. The small box where the three axes converge will control the size of the overall object. Traveling up one of the tiny poles you’ll come across three symbols. The arrow at the top controls the placement of the object within the file window on its plane; the arc rotates the object; and the little box below the arc controls the size of the object in the direction of the arrow’s plane. Clicking on the little box on the blue pole will allow you to shrink the height of the cylinder to resemble an actual coin, as you see here.

STEP FOUR: Using the 3D Rotate tool (K), orient the 3D coin so that it’s facing the same direction as the image of the original coin. Select the Move tool (V) and drag-and-drop one of the saved coin images into the 3D coin file. Select the 3D Scale tool (nested under the 3D Rotate tool in the Toolbox or go up to the Options Bar and click on Scale the 3D Object icon) and resize the 3D coin so that it matches the size of the saved coin image. When finished, drag the saved coin image layer to the Trash icon at the bottom of the Layers panel.

STEP FIVE: Now let’s turn this thin cylinder into a coin! Make sure your 3D layer is selected. Call up the 3D panel from the Window menu. Click the Filter By: Materials icon to access the Materials section of the 3D panel. There you’ll find the three sides of the coin. I know you always hear “there are always two sides to every coin” but in this case we’re also dealing with the edge.

STEP SIX: Click on Top_Material to bring you to the section that contains the attributes for that side of the coin. Click the Edit the Diffuse Texture icon (to the right of the color swatch next to the word “Diffuse”) and choose Load Texture from the drop-down menu. Navigate to the file that contains the face of the coin and click Open. The cylinder will now have the face of the coin appear on the top.

For the bottom part of the coin, choose Bottom_Material and apply the file with the back of the coin to it the same way you applied the top part of the coin.

STEP SEVEN: The edge of our coin requires a little more work. A real quarter has ribbing along its edge. You must create a bump map that will simulate that ribbing. In a new layer, create a very narrow, vertical selection with the Rectangular Marquee tool (M). It should be about the thickness of a single rib on the coin. If you keep the 3D layer visible and turn the coin to its edge, you’ll be able to approximate a thickness by comparing the selection to the 3D coin. Fill the selection with a 50% gray. Don’t deselect the rectangle yet.

Click the Add Layer Style (ƒx) icon and apply a Bevel and Emboss. You’ll have to adjust the Size of the bevel so that you get an even amount of light and dark along the edge. The default setting might be too much to actually see a bevel and emboss within the rectangle.

Using the Rectangle Marquee tool with the Option (PC: Alt) key pressed, drag around the top and then the bottom of the rectangular selection to deselect those areas. This will leave you with a selection that has even tones for the vertical rib (as shown). Choose Define Pattern from the Edit menu, name your pattern, and click OK. You can now drag this layer to the Trash icon and deselect.

Create a new file of any size you want, making sure it has the same resolution as your 3D coin file. Open the Fill dialog again, but instead of using 50% gray, choose Pattern from the Use drop-down menu. Then, click the preview thumbnail next to Custom Pattern to open the Pattern Picker. Click the vertical rib pattern that you saved and then click OK. Save the file with the pattern of the ribbing with the other faces of your coin.

STEP EIGHT: Back in the file with the 3D coin, choose Cylinder_Material in the 3D panel. This time we’ll load the texture in the Bump Strength section: click the Edit the Bump Texture icon to the right of the Bump Strength value and choose Load Texture from the drop-down menu. Find your file with the ribbing pattern and click Open. You can push the Bump Strength number up to about 10 or whatever value looks best for your coin. Here we’ve added a spotlight to accent the edge where you can see the ribbing.

Put your money in motion
Now that our coin is complete, it’s an actual 3D object that can be moved around in three-dimensional space with any of the 3D object and 3D camera tools. It can also be animated, so let’s open the Animation panel from the Window menu.

The Animation panel will display the various layers that your file contains. Choosing the layer that contains the 3D coin and clicking on the small arrow to the left of the layer name will drop down the parameters for the layer’s movement. Click on the Time-Vary Stopwatch next to the 3D Object Position property. This will place a diamond-shaped indicator in the Timeline—this is called a keyframe. Move the Current Time Indicator (CTI; the small, blue arrow at the top of our Timeline) over to the position in time where you want the movement to end. Using the adjustment tools for the 3D object, move it, rotate it, or whatever else you want to do to it. Once you’re done, a second keyframe will automatically appear at the new place in the Timeline. Photoshop will now interpolate between the two keyframes, thus generating the movement.

This is a whole new capability available to the Photoshop user. It’s powerful and far easier than many of the previous ways of achieving these effects. One small caveat is that to properly view the 3D functions it does require a video card with enough power to display it. The world of 3D opens new doors for you to explore and enjoy. Have fun!

Much of the peripheral visual media for a movie is also rich with inspiration. Has your attention ever been captured by a really well-designed movie poster, even if you weren’t interested in the movie? Before you know it you’re examining the logo, the overall image, the colors—and you suddenly find yourself a little inspired. This happens to me all the time and it motivates me to try and re-create the effect.

One of the most visually stunning aspects of these posters is the overwhelmingly creative use of type. For some movies, the logo becomes one of the stars of the movie, and it gets its own star treatment in a way. For instance, let’s consider Steven Spielberg’s film, Jurassic Park (www.jurassicpark.com). (I assume we’ve all seen it.) The posters for this movie were nothing more than the actual Jurassic Park logo on a black background. The logo had a certain theme park feel to it and that was all that was needed. It became an easily recognizable icon. Hence the name became one of the stars. You often see this with big-budget epic films—because these movies are promoted so heavily, they need eye-catching imagery.

Another Spielberg classic that has a recognizable typeface is Raiders of the Lost Ark (www.indianajones.com). This type style has been typecast (pardon the pun) as a standard look for conveying action and adventure, and it’s been mimicked many times. Then there are those films’ titles that are a bit understated, but the appearance of the text still plays a critical role. Take The Matrix (http://whatisthematrix.warnerbros.com), for example. The text treatment on this film used a standard typeface that was broken up and slightly offset in various places for a sort of convoluted effect. The result is a very simple graphic look, yet powerful enough to carry the theme of the movie. Other movies use simple customized fonts with mild type adjustments for a subtle effect. One example would be Spider-Man (http://spiderman.sonypictures.com). This text effect is a line of text in a specially designed typeface with some careful character spacing, which is very effective.

The font that’s chosen has a critical role, as it needs to invoke a feeling associated with the film. A common font used in movie titles is Trajan Pro. In fact, this font has been used so much that it has become sort of an inside joke with working professionals (check out http://typographica.org/001120.php). Why is it so popular? I’m sure different designers have different reasons, but I think it’s because it’s a classy looking and easily readable font. Still, it seems that it’s been overused. My point is this: It’s important that the typeface works with the title it’s portraying. You can see how certain types of movies, especially in specific genres, all have common type effects among them. Big effects movies tend to have really elaborate logos; sci-fi movies tend to have more angular, modern-looking text; while dramas will have more basic and straightforward text with subtle colors. Comedies and animated films tend to be colorful with bolder text, and often have some element of 3D.

For future reference
So with the ubiquity of so many examples on television, on the Web, and of course, in movie theaters, we seem to have an infinite database of images from which to gather ideas. If I see a logo or title that has a cool effect or captures my imagination in some way, I have to try and re-create it. When you’re studying an effect, look at the whole thing but also break it down and look at the parts. You might just see a part of the effect you like. When you do, then it’s time to reverse-engineer it—not to figure out how the original designer did it, but rather how you might do it and incorporate these techniques into your own work.

While it’s obvious that most of us aren’t creating type treatments for major feature films, by engaging our imagination we can use existing examples to help us explore how we might create a certain effect and perhaps come up with a new technique altogether. It’s been proven that you tend to be more creative when faced with a challenge, so start with something you’ve seen. No, don’t steal, but rather use it as a springboard from which to sort out your own technique and style.

Create your own title
Let’s put this into practice. Just recently, DreamWorks Animation released their newest feature Monsters vs. Aliens (www.monstersvs-aliens.com). The type treatment for this movie was designed to carry the theme of the movie, which portrayed the word “Monsters” with a more organic look and the word “Aliens” with a more angular, hi-tech look. Now, one thing was obvious when I first saw this: It was no doubt done in a 3D application. Does that mean we need a 3D app to create this look? Not necessarily. After a little experimenting, I discovered a way to get a similar result, all in Photoshop, with no 3D application at all. We’re going to create our own movie title in order to explore the technique, which would be the case anyway, because you want to use the technique on your own text.

STEP ONE: Start by creating a new file in Photoshop (the one shown here is 12×7″ at 150 ppi) and set your text. We’re going make a logo for a made-up movie called Human vs. Machine. Of course, the name isn’t super-important here; it’s the technique we’re playing with. We set the word “HUMAN” in Gill Sans Ultra Bold and “MACHINE” is conveniently set in a font called BN Machine (available from www.dafont.com). How nice! Adjust the tracking so the two words are the same width as shown here. (Note: To adjust tracking, double-click the type thumbnail in the Layers panel to both select the type and switch to the Type tool, hold the Option key [PC: Alt key], and use the Left and Right Arrow keys on your keyboard.)

STEP TWO: Control-click (PC: Right-click) on the HUMAN text layer in the Layers panel and select Create Work Path from the menu. This will create a vector path for the text. In the Paths panel, double-click on the Work Path, change it’s name to “Human” in the Save Path dialog, and click OK. Repeat this step for the MACHINE text layer. You should have two path layers in the Paths panel.

Select the HUMAN path layer in the Paths panel, grab the Path Selection tool (A), and select all the paths that create the letters on the canvas. Click the Eye icon next to the HUMAN and MACHINE layers in the Layers panel to hide the original text.

STEP THREE: Go under the Edit menu to Transform Path and choose Warp. In the Options Bar, choose Bulge from the Warp drop-down menu. Set the Bend to –15 and the Vertical Distortion setting to 10% (you may have to experiment with these settings depending on the size of your text and resolution of your document). Then press Enter twice to commit the transformation. Repeat this step for the other word in the title. You may need to do some additional scaling of the text after you apply the warp to both paths (just select the letters with the Path Selection tool and press Command-T [PC: Ctrl-T]).

STEP FOUR: In the Layers panel, click the Create a New Layer icon, and then
Command-click (PC: Ctrl-click) on the HUMAN path layer in the Paths panel to create a selection. Click the Foreground color swatch at the bottom of the Toolbox, pick a dark gray color in the Color Picker, and click OK, then press Option-Delete (PC: Alt-Backspace) to fill your selection with the Foreground color. Press Command-D (PC: Ctrl-D) to deselect.

Repeat this step for the MACHINE path and press Command-D (PC: Ctrl-D) to deselect. When done, you should have a result similar to what you see here with each word on its own layer. (Use the Move tool [V] to reposition the layers if needed.)

STEP FIVE: Double-click directly on the name of the first layer that you just created in Step 4 (Layer 1) and rename it “Human 1.” Similarly, rename Layer 2 “Machine 1.” Now Shift-click and drag these two layers to the Create a New Layer icon to duplicate them. Click the Eye icon for these new layers to hide them for now. We’ll come back to them later.

Activate the Rulers by pressing Command-R (PC: Ctrl-R), click the Human 1 layer in the Layers panel to make it the active layer, then drag a couple of vertical guides from the ruler and place them at each side of the text. They should snap right to the edge.

STEP SIX: With the Human 1 layer still active, click the Add a Layer Style icon (fx) at the bottom of the Layers panel and choose Stroke. Set the Size to 3 and the Position to Inside. Down in the Fill Type area, choose Gradient from the drop-down menu. Click on the gradient preview, choose the Copper preset gradient in the Gradient Editor dialog, and click OK. Back in the Layer Style dialog, set the angle to140˚. Click OK. This gradient will play an important roll when we make this look 3D.

STEP SEVEN: We need to rasterize this effect by merging it with an empty layer, so create a new layer and drag it under the Human 1 layer. Reselect the Human 1 layer and press Command-E (PC: Ctrl-E) to merge it down into the empty layer. This will render the layer style to the text (you’ll need to rename the merged layers to “Human 1” again). Then go under the Image menu to Adjustments and select Desaturate.

STEP EIGHT: Now press Command-T (PC: Ctrl-T) to invoke Free Transform once again. Grab the center target point, hold down the Shift key, and drag it straight down to the bottom of the canvas. This will be the vanishing point for the 3D effect. Go into the Options Bar and click the chain icon to lock the proportions, then enter 90% for the Width; the Height should change accordingly. The graphic will scale down toward the center target. Press Enter twice to commit the transformation.

STEP NINE: Now load this layer as a selection by holding down the Command key (PC: Ctrl key) and clicking on the layer preview thumbnail for Human 1 in the Layers panel. Press Option-Command-T (PC: Alt-Ctrl-T) to start a step-and-repeat move (keeping it selected will ensure the repeated items stay on one layer). Drag the center target point to the bottom of the canvas again just like before. Go into the Options Bar and again click on the chain icon to lock the proportions, and set the Width to 100.4%; the Height will set automatically. (Yes, this is a small amount but it’s important for getting the 3D look in the next step.) Press Enter twice to commit the transformation.

STEP TEN: Press Shift-Option-Command-T (PC: Shift-Alt-Ctrl-T) over and over until the edge of the graphic once again touches the guides. What you’ll get is a cool 3D effect that’s enhanced with the addition of the gradient stroke we applied in Step 6. Pretty cool, huh? Press Command-D (PC: Ctrl-D) to deselect and then repeat Steps 6 through 10 for the Machine 1 layer (you may need to reposition the guides to the left and right edge of the word first). Make sure to create a duplicate layer of any other layer to which you want to apply this effect.

STEP ELEVEN: Okay, now that the 3D part is done, let’s finish off the face of the text. Remember those duplicate layers we created? Go ahead and activate the Human 1 copy layer and make it visible. Command-click (PC: Ctrl-click) the layer thumbnail to select that layer, set the Foreground color to R: 0, G: 174, B: 239, click OK, and press Option-Delete (PC: Alt-Backspace) to fill the layer with that color. Click on the Human 1 layer to make it active in the Layers panel and select Hue/Saturation in the Adjustments panel. Click on the Colorize checkbox and set the Hue to 210 and the Saturation to 50. This will apply a blue tint to the 3D edge.

STEP TWELVE: Click back on the Human 1 copy layer to make it active, then double-click on the layer to open the Layer Style menu and choose Bevel and Emboss. Feel free to experiment with these settings to see how they look but the settings shown here work pretty good for what we’re after here. (Note the Gloss Contour has been changed to the Half Round preset and the Shadow Mode color has been changed to a dark purple.) Don’t click OK yet.

STEP THIRTEEN: Activate Pattern Overlay in the list of Styles on the left. Click the Pattern thumbnail preview to open the Pattern Picker and choose the Clouds pattern. (Note: If you don’t see the Clouds pattern, click the flyout menu in the Pattern Picker, choose Texture Fill at the very bottom of the menu, and click Append in the resulting dialog.) Then change the Blend Mode to Hard Light. Finally, activate Stroke. Set the Size to 5 and the Position to Inside. Change the Blend Mode to Overlay. Click OK and then deselect.

STEP FOURTEEN: Now we need to create a pattern to use for the MACHINE text. Press D to set your Foreground/Background colors to their default black/white. Then create a new layer, fill it with white, and drag it to the top of the layer stack in the Layers panel. Using a small, hard-edged brush (B), click a point on the canvas and then Shift-click a second point to draw a straight brush line. Brush up and down, left to right, and at various angles all over the canvas. Also change the brush size periodically to vary the width of the strokes. Once done, go under the Edit menu and choose Define Pattern. Name your pattern and click OK. You can either hide the pattern layer or throw it away.

STEP FIFTEEN:Select the Machine 1 copy layer and make it visible. Command-click (PC: Ctrl-click) the layer thumbnail to select that layer. Set the Foreground color to green (R:57, G:181, B:74), click OK, press Option-Delete (PC: Alt-Backspace) to fill the layer with that color, and deselect.

Now drag the Hue/Saturation layer that you created in Step Eleven to the Create a New Layer icon at the bottom of the Layers panel to duplicate it. Drag this duplicate adjustment layer above the Machine 1 layer. Hold the Option key (PC: Alt key) and click between the two layers to clip the Hue/Saturation layer to the Machine 1 layer. This will add the blue shade to the 3D edge of the MACHINE text.

Activate the Texture option just under Bevel and Emboss in the list of Styles on the left. Click on the Pattern preview to open the Pattern Picker, locate the pattern you just defined (it should be the last one in the list) and set the Depth to about 25%. You can also reposition the pattern by moving the style window to the side and clicking inside the image and dragging; this allows you to move it around to where you like. When done, click OK.

Command-click (PC: Ctrl-click) the layer thumbnail for the Machine 1 copy layer, set your Foreground color to green, and then fill the MACHINE text with the green color.

Now drag the Hue/Saturation layer that you created in Step 11 to the Create a New Layer icon at the bottom of the Layers panel to duplicate it. Drag this duplicate adjustment layer above the Machine 1 layer. Hold the Option key (PC: Alt key) and click between the two layers to clip the Hue/Saturation layer to the Machine 1 layer. This will add the blue shade to the 3D edge of the MACHINE text.

STEP SIXTEEN: Now we need to create a pattern to use for the MACHINE text. Press D to set your Foreground/Background colors to their default black/white. Then create a new layer, fill it with white, and drag it to the top of the layer stack in the Layers panel. Using a small, hard-edged brush (B), click a point on the canvas and then Shift-click a second point to draw a straight brush line. Brush up and down, left to right, and at various angles all over the canvas. Also change the brush size periodically to vary the width of the strokes. Once done, go under the Edit menu and choose Define Pattern. Name your pattern and click OK. You can either hide the pattern layer or throw it away.

STEP SEVENTEEN: Double-click on the Machine 1 copy layer to open the Layer Style dialog and choose Bevel and Emboss. Again, feel free to experiment with these settings or use the settings shown here. (Note: Use Global Light was turned off.) Don’t click OK yet.

Activate the Texture option just under Bevel and Emboss in the list of Styles on the left. Click on the Pattern preview to open the Pattern Picker, locate the pattern you just defined (it should be the last one in the list), and set the Depth to about 25%. You can also reposition the pattern by moving the style window to the side and clicking inside the image and dragging; this allows you to move it around to where you like. The final layer style to activate is Satin. Set the Blend Mode to Darken, the Opacity to 51%, the Angle to 23˚, the Distance to 15 px, and the Size to 13 px. Change the Contour to Linear and uncheck the Invert box. When done, click OK.

As you can see, we’ve achieved something very close to the original, using some relatively simple techniques right here in Photoshop. The most exciting part is that I learned some really cool things that I might not have ever discovered if I hadn’t challenged myself to re-create an existing logo. What I’ve gained are some new techniques that I can use for whatever projects may come up in the future. So remember, when you’re at the movies, or just about anywhere, pay close attention to the world of ideas that surround you. They’re out there; you just have to pay attention.

From the days of the first incised cuneiform tablets, text has been written—then printed—in straight lines. Our whole system of page layout, of text composition, of the shapes of the alphabet’s characters themselves, assumes a straight, horizontal baseline. Computers may have liberated us from the tyranny of the straight line, but they haven’t freed us from the laws of legibility and readability. Getting loopy type to look good isn’t automatic.

The most obvious problem when type goes nonhorizontal—even on a straight baseline—is that you have to turn your head to read it. This turns out to have cultural dimensions, as European readers—who are accustomed to reading the spine type on books in a library from bottom to top—are more comfortable reading type going “uphill” than Americans, whose habit of reading spine type from top to bottom makes them more comfortable reading type going “downhill.”

The greatest challenge
But that’s really a design issue. From a typographical point of view, curving baselines mount the greatest challenge, because in addition to head-craning readability issues, curving baselines wreak havoc on the spacing between characters. In the InDesign Type>Type on a Path>Options dialog, you can control how a line of type cleaves to a path. Here you can do a lot of clever and mostly useless things—tricks you may use once but that generally don’t bear repeating. These include all of the choices in the Effects pop-up menu, except for Rainbow, which is the one we’ll talk about here. When using Rainbow, the effect is like bowing a normal baseline, with the stems of the characters rising from it at right angles.

Stick to Align: Center for decent character spacing

The most important choices in the Type on a Path Options dialog are in the Align and To Path drop-down menus. In Align, you can opt to have your type stand up on the path (the Baseline option), hang down below the path (Ascender) or above the path (Descender), or have the path pass right through the centerlines of the characters (Center). Characters standing on the path have normal spacing where they meet the baseline, but their tops get bunched up on concave baselines and spread too far apart on convex baselines. When you choose to have the ascenders align with the path, spacing at the baseline of the characters closes up on convex baselines and spreads apart on concave baselines. The results in all of these cases are bad. You’ll get the most natural character spacing if you select Center from the Align menu and, if necessary, Center from the To Path menu.

Here, the top sample shows type that’s set base-aligned to an elliptical path. In the sharpest parts of the curve, character spacing is badly distorted. The middle sample is set top-aligned with the curve, which badly pinches the bottoms of the characters in the tight convex curves. At the bottom is the happy medium: vertically centering the type on the curved path. Using baseline shift to raise the text a couple of points relative to the path improves spacing even more.

Note: The To Path menu only comes into play when the path your type is following has been stroked, that is, given width and color; otherwise, it has no top, center, or bottom to align to.

Better overall spacing
Even if you use Align: Center, you’ll still have to do some hand kerning—and possibly some tracking adjustments—where the curves of the path are the sharpest. But there will be far less mopping up to do than with any other alignment option.

Another trick to assure better overall spacing is using the Baseline Shift control in the Control panel to make micro adjustments to the type’s alignment relative to the path. Just make sure you have all of the text selected before adjusting this value. Raising the type a couple of points above where the Center command places it can provide substantially more natural spacing, even in tight corners.

It’s inevitable that in tight bends, your type will get looser or tighter, depending on whether the bend is concave or convex. In these places, use your tracking controls to tighten or loose the overall spacing of words or phrases to establish an even spacing feel throughout the whole text passage. Even after adjusting tracking, some hand kerning will likely be needed.

Choosing the typeface
Lastly, the typeface you choose for arcing type makes a big difference in its final look. In general, sans-serif faces fare better than serif faces; all caps text (because the letters have a consistently blockier profile) fare better than caps and lowercase; and condensed or compressed faces tend to look better than those with a wide set width. Script faces may work on gradual curves, but those with interconnecting letters can either become disconnected or have their connection points overlap—not a pretty thing. Brush faces fare best because their characters are generally not designed to connect, and their calligraphic style gives you more flexibility with their spacing—every little kern isn’t as crucial.

Brush faces and nonconnecting scripts work particularly well on curved baselines, as shown here. Their irregular geometry hides some spacing flaws, and this sample needed only light kerning. Serif faces in particular need more kerning to get character spacing to look something like normal.

Layers: Before we jump into the volleys, can you provide just a little background about yourselves, including what inspires you and what type of design you specialize in?

Hubacek: I’m a designer living and working in the Twin Cities (Minneapolis specifically). I’m freelancing currently, but I’ll be starting as a Senior Designer at Space 150 in Minneapolis by the time anyone reads this. I’ve kind of always wanted to be a designer, and I’ve never really looked back. It was a bit of an easy decision for me. It’s a long story as to how I got here but I don’t think I’ve ever really thought that I shouldn’t be doing what I’m doing.

I don’t really specialize in anything—I try to take on a wide range of projects. It’s most interesting for me to be constantly learning and expanding, doing something I haven’t done before. Right now I’m working on a music video, a couple identity systems, a website, some apparel, print work—the balance is what keeps it exciting and fresh. It’s what makes me wake up and put on some coffee in the morning.

Inman: I received a degree in Graphic Design at the Savannah College of Art and Design. I’m a self-taught client- and server-side developer. I also dabble in iPhone game development. I’m originally from the Boston, Massachusetts, area; spent a few years in Baltimore, Maryland, after graduating from SCAD; and currently reside in Chattanooga, Tennessee.

I’ve been self-employed since the launch of Mint in 2005. Since then I’ve been designing, developing, and selling my own Web-based products under the novel moniker “Shaun Inman” (which appears as “Shaun Inman Design & Development, Inc.” on tax forms and customer credit card statements).

Oddly enough, CD packaging, especially the early Nine Inch Nails singles and EPs (Sin and Broken immediately come to mind), is what inspired me to get into design. That and a high school art teacher who proclaimed that my work was very graphic. The next day (or not long after) a representative from SCAD visited the school to promote their various programs including graphic Design. One naïve internal game of connect the dots later and my fate was set. (Looking back on my high school art now, I think “graphic” was just a nice way of saying that I needed to work on building volume in my pencil drawings.)

Order inspires me: systems, hierarchy, attention to detail, grids. I have a tendency to rebuild the systems I use daily that don’t work for me. Mint and Fever are both products of examining existing data-heavy systems (Web stats and feed readers respectively) and regimenting an ordered, modular design for ergonomic data consumption.

I’d have to say my specialty is system design. I see myself as a jack-of-all-trades (and as a result, a master of none): design, development, music composition, copywriting, customer support. My penchant for pixels of the big blocky variety has also become notorious on the Layer Tennis circuit lately.

Layers: How do you think Layer Tennis resonates with the design community?

Hubacek: I think there are a lot of people who follow it for entertainment value, and there’s something great about getting to watch people do something live. The experience of being a designer is somewhat universal as far as being under pressure and having short timelines. Layer Tennis just exaggerates that and puts it under a microscope, so it’s easy to see why it would attract other designers.

Inman: Working in the creative industry is stressful with its tight deadlines, a surprising lack of creative flexibility for all but brand-name designers, and very little extra-industry praise for what we do. Layer Tennis is a celebration and parody of all these things and a nice respite for a Friday afternoon—as long as you’re not the one playing.

Layers: How did you prepare for this season’s matches? Did you have any overarching strategy going in?

Hubacek: Every match was different; you don’t prepare the same way for every match. For some matches I had a selection of tools available, for others I was more prepared. The match against Shaun was very spontaneous. I don’t think either one of us played our best game, but it was in the true spirit of Layer Tennis. I had a few typefaces and some other things ready to go but for the most part it was a pretty responsive match for me.

Inman: I didn’t actually participate in this most recent season until the postseason playoffs. Because I launched Fever the same week the playoffs started, I didn’t have much time to prepare for anything. Unless firing off scores of support replies per hour in the days leading up to each match counts. Generally, my fallbacks include puns, word or style association, and exploring the bounds between volley and the page that contains it. And more recently, references to 8- and 16-bit video games.

Layers: What Adobe tools did you use in the final? Were there any features you used that helped save time?

Hubacek: Flash, After Effects, Photoshop, Illustrator. I think that was it.

Inman: I stuck to Photoshop for the majority of my volleys, occasionally using Flash to animate flattened frames exported from Photoshop and add audio loops. As far as features go, gimme the Marquee tool and Opacity and Multiply layer effects and get out of the way.

Layers: So Inman, how does it feel to be the champ?

Inman: That’s a hard one to answer. Mr. Miyagi is the real champ. He taught Daniel-san everything he knows. He took a skinny little kid and made a World Champ out of him. If Daniel-san had any other instructor or trained any other way he wouldn’t have been able to defeat Cobra Kai.

Volleys

Tools used: Click image for animation

Volley 1

Layers: Do you think there’s an advantage to going first in Layer Tennis, and why did you start with such a subtle serve?

Inman: The obvious advantage is having a little more time to think about and work on your serve. Rather than use that time to overproduce an elaborate design, I opted to create something simple that encouraged viewers to interact with their physical displays to bring them into the game. I also thought the largely white-on-white design would allow us to focus on the layers part of Layer Tennis. Besides, everyone loves spot varnish.

Tools used: Click image for animation

Volley 2

Layers: Why did you decide to play along with Inman? Did you think Tiffany would get stuck in your opponent’s head?

Hubacek: Honestly, how do you return a volley like that? I was hard-pressed to do anything after wasting half my time trying to figure out what Shaun’s layer said. Once I realized what it was, I just sprang up with the first response that I could think of. Shaun hadn’t given me much to work with, so an equally minimal response seemed fitting. The Tiffany reference is continuing off of his “Are the New Viewers Gone Yet?”, as in “Yes, I think we’re alone now” (you’ve scared off all the first-timers) “the beating of our hearts is the only sound.” I totally missed his Mr. Show reference. The heart was really the only new piece I left him with; that and the curse of having Tiffany stuck in his head.

Tools used:

Volley 3

Layers: Does the remaining half heart straight out of Nintendo’s Zelda video game represent how you feel about your opponent or about Tiffany?

Inman: The half-a-heart remaining was definitely a taunt in response to what felt like a halfhearted return. I just couldn’t muster a pixilated parrot (“Polly want a layer?”) within the 15-minute time limit. Too bad I fell prey to the same thing I was mocking the previous image for: not moving the conversation forward.

Tools used:

Volley 4

Layers: What the heck is wrong with this Boy Scout?

Hubacek: Nothing’s wrong with the Boy Scout. He’s faceless; I guess that’s weird. But that’s really harsh of you to judge him for that. He obviously has larger issues to deal with, like his loss of his left hand, which seems to be the result of a wood-whittling accident. It’s a bit of an outside shot at the ideas of having an opportunity to make something but instead causing irreparable harm to oneself. Like opportunity lost.

Tools used:

Volley 5

Layers: How did you come up with this type trick on the fly?

Inman: I noted the shared characters in “devil’s” and “details” while brainstorming my serve the night before. When Greg replied with the inattentive whittling Boy Scout, I knew exactly what to do. The “TA” ligature and custom “V” are just a modified reversed “N.” Initially, I didn’t overlap the text. As a result, the observation I was trying to make ended up being too subtle. Finally, I took a quick photo of our weathered deck for the wood grain texture and had my most successful, least painful-to-birth volley of the postseason.

Tools used:

Volley 6

Layers: A self-mutilating Boy Scout and now evil permeating the universe—is there something you’re trying to tell us?

Hubacek: I really had no idea what Shaun was trying to say with the last volley. It was a nice type trick, but I didn’t really feel like we were finding a rhythm at all. I couldn’t find much conceptual continuity between the last round and this one, and I really wasn’t sure what he was referencing with the line. Curveballs can be the hardest to hit, so I decided to send him one back. If the devil is in the details and there are details everywhere, then the whole world must be evil—and have the same awkward kerning.

Tools used:

Volley 7

Layers: You picked up the word “Evil” and the field of stars from Hubacek’s previous volley. How did these elements inspire the rest of this volley?

Inman: Honestly, the Evil Galaxy had me at a loss so I picked an aesthetic I was comfortable with (late ’90s Web and rave flyer design) and did what I could with existing elements from the previous volley. Prerequisites: Desaturated Images 103, Irrelevant Microtypography 201, and Diagonal Die-cuts 404.

Tools used: Click image for animation

Volley 8

Layers: So did you feel that victory was at hand and you were all geared up to party, or is there a deeper hidden meaning to the word “Ravers” here?

Hubacek: No, actually the raver thing is a reference to the notchy-spacey-rave flyer play of Inman’s seventh round. It was a bit of a sophomoric joke that when coupled with the hour it took to get the video up fell with a bit of a thud.

Tools used: Click image for animation

Volley 9

Layers: It seems that you’re still bitter that Hubacek planted that Tiffany song in your head. What was it about this piece that you thought would deliver the knockout punch?

Inman: This image is a direct response to two things: the final word at the very end of the previous volley—after all those “Ravers,” a single “Ugh”; and the commentators’ early match expectations of more throat-punching designs. Delivered literally. The surly fighters and quirky chiptunes also serve to recall the final volleys of my previous Finals matches.

Tools used:

Volley 10

Layers: Inman just punched your design in the throat. Why did you go “Beyond the Expected” and do what appears to be lending a helping hand to your opponent?

Hubacek: It’s not about who punched whom in the throat. This is the last layer of Layer Tennis 2009. As someone who came into the finals from the back of the field of qualifiers, I’m not mad at the throat punch. The people were calling for it, and I am certainly no stranger to spilling blood for the people’s amusement. I’m honestly just happy to have been here. It was a strange match, and the whole season was beyond what I could have expected from being involved with Layer Tennis. This last one was about just saying that at the end of the day, it’s all just theatre. I have a lot of respect for Inman, Draplin, Glass, and all the other Layer Tennis players from the year. All wounds are bandaged—no harm done—first round of drinks is on me.

I still remember the first column I wrote where readers responded with great enthusiasm and gratitude for what I’d shared. It was the October 1994 issue where I gave tips on specific system resources you could un-install so that you could still run media with 4 MB of RAM, instead of having to upgrade your system to 8 MB or (God-forbid) the unheard of 16 MB of RAM. Either option would cost hundreds of dollars plus an install fee from an approved technician. It’s hard for many people in today’s industry to believe that we were actually creating digital video files with those limited resources back then, but Adobe Premiere was already at version 4 by July of 1994.

But that’s the past; what does the future hold? Obviously, nobody knows for sure, but here are 10 things I think we’ll see in the next 15 years:

1. I think we’ll see video cameras where consumers don’t have to record video to tape or to a solid-state device (hard drive, flash memory) of any kind. Instead, video will be wirelessly recorded to a virtual storage service (think cloud computing) like we’re currently doing with Web mail.

2. Most handheld devices will have a built-in video camera that can wirelessly stream real-time video and record/post it to your website, home TV, or social media profile (Facebook/MySpace) as we can currently do with our cell phone pictures.

3. We’ll also be able to take that same real-time video stream and send it directly to one person or a select group of people, like we currently do with text messages.
4. I think we’ll be able to do most of our video editing directly on our camera or handheld device without having to load it onto a dedicated computer first.

5. Even though people have been predicting it for years, I think mobile video will finally become commonplace and accepted by the masses in the next few years. It seems that every major new handheld device has video playback (both streaming and recorded) as a major component of its feature set.

6. I believe that my friend Philip Hodgetts is right when he states that video will become just another form of literacy in the near future: www.philiphodgetts.com/2009/02/22.

7. I think creating multimedia presentations with video will be as routine for students in the future as typing on a computer keyboard is today.

8. I believe the ability to keyword search a video file to playback a specific word or phrase will be as common as using Google to search for a specific word or phrase on a website.

9. I think after spending hundreds of millions of dollars, companies will finally stop building “destination video sites” to show and share their content and will realize that they need to go to the people rather than expect the people to come to them. All of my work and research for my clients the last 18 months has shown me that syndicating and distributing content to as many places as possible, to be seen by as many people as possible, is the best way to go for most situations.

10. I believe that there’s a teenager today with an idea that he’ll ponder and work on for the next 15 years that will absolutely revolutionize digital video in a manner that I can’t even fathom.

Well that’s a quick look at the past and the future of digital video. As for the present—this is my last “DVS” column in Layers magazine. It’s been an honor and a privilege to appear in every single issue printed in the last 15 years and to work with so many gifted writers, editors, and designers during that time. I want to specifically thank Scott Kelby for the opportunity and support, Chris Main for the brainstorming and excellent technical editing, and Felix Nelson and his team for all of the great design that they have given me and my columns throughout these many years. I’ll still be doing reviews and special assignments for Layers, but you can read any new articles (as well as old archives) at www.rodharlan.com and join in the conversation on my blog at www.dvconfidential.com. I hope to hear from you there!