Designing the Capo Icon

I’m proud to announce Capo 2 is officially out. Get ready to rock because the latest update is insane.

Capo lets you learn your music. You can drag a song from iTunes into Capo, slow it down, loop difficult sections, hide vocals, and mark up certain verses. With some practice you can actually learn to play entire songs from your favorite artists. Capo received quite a lot of buzz on its original release, but it’s about to get a whole lot more.

Capo 2 takes a huge step forward. You can now automatically detect the chords inside a song and mark them up in real time. As well as (get ready) generate the entire tablature. By simply drawing atop the spectrogram, Capo will generate tablature automatically for you. “It really doesn’t get much easier than this!”

The application was developed by Christopher Liscio, a master of audio applications. The interface was designed by Brandon Walkin Fortunately, they contacted me to make a new icon for Capo 2. Here’s a little behind the scenes.

Capo’s original icon (left) wasn’t exactly ideal. It gave a clear idea of what the application did, but it was far from pretty. Strange perspective and combination of photos and illustration looked horrible in the dock. So I did a major overhaul (right) for Capo 2.

The new icon shows the recording of music from a CD. One of the main reasons for the hand-written note was because of Capo’s awesome new tablature feature. Now you are literally copying the notation from the CD. This wasn’t my first idea though, I went though several concepts.


Concepts

The first concept was similar to the final icon, except instead of a yellow notepad I used a hand-held chalkboard. This became very close to the next stage, but I decided that a notepad seemed much more practical then a small chalkboard. It also allowed for an awesome document icon.

There were also many alternate styles for each of these. I tried a waveform on the chalkboard, instead of an eighth note but then it looked like Activity Monitor. I originally used a purple/blue disc but then it looked like a notepad was burning DVDs.

Another concept was the sheet music peeling off a compact disc. I really loved this idea, but there are already so many application icons using large discs, something more unique would be better. If you imagine this icon as a silhouette with no detail, it’s just an oval. Basic shapes and masks are important in icon design. Also, different icon sizes for this would have been tricky.

And finally, I tried using the same metaphor as the original icon except cleaned and simplified.

Here’s how my PSD transformed in the process. (It always starts out bad)

So after many hours, the Capo 2 icon was born. So far it’s gotten great feedback, but I’d love to hear what you have to say.

If you’d like to comment on this article, send me a message on Twitter.

Learn more about Capo!

  1. mortgages-uk reblogged this from graphicpeel
  2. free-software-downloads reblogged this from graphicpeel
  3. rock85 reblogged this from graphicpeel
  4. graphicpeel posted this