Excellence in Design...Opposites Attract: the iPod color story

This is my first post on design. I plan to continue this subject in furture postings here. This is an incredible article about color...particularly the genius of color behind the over-the-top success of iPod. This even includes the steps to take in Adobe Photoshop to create the very design techniques utilized in Apple's campaign.
THE ARTICLE:

Opposites attract
Black. White. One color. One product. One message.

It's so clear! No wonder these machines are flying off the shelves. Here's what we can learn from Apple's brilliant iPod campaign

Its four images were designed together in vibrant visual opposites: red/green, yellow/purple, black/white, girl/boy, right-facing/left-facing.

Apple knows design. Apple knows marketing. And Apple knows that the key to both is simplicity. Take the sensational iPod music player and the equally remarkable iTunes Music Store. Apple has reduced the I'll-take-that-thank-you thievery of the Web and the over-my-dead-body desperation of the music industry to a 99¢ song and a white plastic rectangle that anyone can understand at a glance and enjoy. Apple succeeds because it has done the work, and you don't have to. There is a lesson here. Just look at these images. Black silhouette, white iPod, white name, that's it. The white iPod connects to its white name; both are opposite the black silhouette. It's powerful because it's been reduced to its essence; any additions (including our own captions) will distract. Can we put this visual technique to work? It’s easy.

Expressive body language conveys the experience of the iPod.

The entire image including the product (do you dare?) has been simplified. Result: It is so clear! Bonus: In silhouette, it's easy to visualize yourself with the product!

Black and white have the greatest possible difference.

Type and iPod are the only white Type and iPod are the only white objects, creating an instant visual connection.

Green field is a middle value; this allows both black and white to stand out.


iPOD BRILLANCE IN 5 STEPS
Step 1 Open an image in Photoshop.

Step 2 Set the Foreground color to black (click the box, left). With the pen Tool trace the perimeter, which will fill with black as you go (for better visibility, lighten its opacity), and which will automatically create its own layer. When you're done, hide the layer.

Step 3 Reset the foreground color to white (click the arrow, left), then trace only the model as shown, which will fill with white. Your tracing will create another new layer. Hide it when you’re done. (The nice thing about silhouettes is that you don't have to trace exactly.)

Step 4 Activate the photo layer, then create a new layer (Layer>New>Layer), which will appear directly above it (left). Fill it with any middle-value color (like brown here), then reveal the black and white silhouette layers.

Step 5 Add your type or logo-in white, remember. What typeface? If you have a choice, coordinate it to the image-round with round, straight with straight, and so on. Keep in mind simplicity and boldness; this is not the place for detail. A tagline adds complexity; if you must have one (shown above and below), color it a low-key tint of the background.


This article is excerpted from Before & After, How to design cool stuff, Issue 35, January 2004, Copyright ©2003, Before & After magazine, all rights reserved.