Creating The Carousel Icon

I thought I’d wrap up Carousel’s anniversary week with a post about creating the icon. It was definitely one of the highlights of working on Carousel over the past year.

It was important to me that the icon feel at home on the Dock next to icons I appreciated and used every day. At the time there was a string of games that were iOS ports popping up in the Mac App Store. The icons for those games were all pulled right out of the iOS bundle and recycled for their OS X counterpart. The thought of anyone filling their Dock with round rects was petrifying so I was very committed to making the icon for Carousel feel like it belonged on the Mac.

Once the direction was set for the Carousel icon I started working up a few sketches before moving into development on the main form.

Once I had a few decent thumbnails it was time to gather up some photos of authentic samples to work from. My main sources of inspiration were these three Kodak projectors:

I chose later versions of the projector because while wonderful in their own quirky way, Kodak’s early Carousel projectors from the 60’s were a little clunky looking. As time passed the revisions to the projector cleaned up the form quite a bit and leaned closer toward the plasticky aesthetic I was hoping to capture. These photos of the hard-shelled mid-70’s Carousels did the trick. They almost looked like toys which I thought would translate wonderfully to a Mac icon. After getting all the source material together it was time to get to work. The only issue? I’d never made an icon for the Mac before.

Usually I go right from sketches to Photoshop when I work up an iOS icon. This time, however, the forms involved in what I was envisioning were too complicated to whip together out of shape paths. That meant it was time to turn to an old friend. I have quite a bit of experience from a past life modeling in Maya so I was able to build a simple wireframe pretty quick.

Hrm. While proportional to a real-life unit, there were quite a few issues with the first render. It was squat, looked like it was hovering and the materials left quite a bit to be desired. Furthermore, the perspective was off. After a few conversations and a little playing around it became apparent that the solution was to make it look more like a toy. There were a few things that worked. The body color was on the right approach, implying a connection with Instagram’s icon and the purple lens tied in to Apple’s new affinity with space themes in OS X. I ended up removing the bezel frame to reduce visual complexity, made the whole model taller and made the lens, adjustment knobs and handles almost comically large. Another key to getting the model to feel right was adjusting the camera angle of view from the standard 35º to roughly 12º. The net effect was that the model gained a lot of character and stature.

It still lacked depth, though. The color was pale. The lens had no life to it. The slide carousel reflections weren’t strong enough. From here I did a final render boosted to production settings and jumped over to Photoshop. A few blend layer effects really brought out the detail in the slide carousel and it didn’t take much to liven up the body color and the lens. Next up were the fine details, like the casting lines, Carousel embossment (in Futura Bold, of course) and the lens lettering. Finally, a multi-depth shadow lifted the model off the surface and completed the look.

I had a lot of fun making the Carousel icon. The icing on the cake was being asked to have it in The Icon Handbook by Jon Hicks late last year. It was quite a thrill getting to see my icon on its own page opposite the icon for Unison, an icon that I absolutely love. Hopefully I’ll have to opportunity to craft up more Mac app icons in the future.

  1. corrugatedbox reblogged this from jeffrock
  2. jeffrock posted this