Making the MoneyWell App Icon

By John Marstall

12/20/2011

MoneyWell (by No Thirst Software) wanted a spiffy new icon for its version 2.0, and we were happy to oblige. This is how we went about it.

MoneyWell has consistently been represented by a well bucket full of money, and we didn’t want to stray from that metaphor. The trick was to find a balance between the rustic look you’d expect from a handmade well bucket and a polished design that conveyed the app’s professional quality. Striking this balance would prove to be the biggest part of the challenge throughout the project.

First, it’s always good to start with a detailed sketch.

And before drawing anything semi-realistic I like to collect a few photo references—not in order to copy them slavishly, but because objects in real life often present interesting details we tend to forget when we recall things from memory.

A Bucket

With some idea of the bucket’s form in mind I moved into Cinema 4D to build it there. I tend to prefer Illustrator for small icons, but you can better approximate Apple’s photo-illustrative style in a 3D app. In fact, “de-rendering” the icon in Photoshop becomes an important part of the process—the rendering output is too “3D-looking” on its own.

I can’t explain everything that goes into building something like this in Cinema 4D, but I’ll try to provide the highlights.

While Cinema 4D will indicate the portion of the viewport that will be included in the final render, I like to make this safe area very explicit. I designed a frame graphic at 640×640 with a 512×512 transparent area and loaded this as a texture on a foreground object. I also set the rendering output to 640×640 so everything would line up consistently.

Safe Area

One also needs to be aware of the effects of color correction on the final output. I’ve settled on using “Load from Monitor” in Preferences > View > Display Color Profile as producing color that’s pretty consistent with other apps. Still, I recommend selecting “Use the embedded profile” when opening Cinema 4D’s output images in Photoshop. (You can always convert to sRGB on export.)

I built the bucket by using a cloner to arrange copies of a tapered rectangle in a circle. The taller planks are an extrusion of a curved spline, angled to match the arrangement of the other planks. The handle is a sweep NURBS, while the metal bands and coins are lathes. Really, the modeling is very simple.

Bucket Modelling

Filling the bucket with the coins could have been tricky, but Cinema 4D made this easy. Put the coin in a cloner, assign them some physics, and drop them in. In fact, the shape they fall into and collide with is an invisible funnel—not the bucket itself. By reshaping the funnel, I could adjust how the coins fell until I got the look I wanted for the coin pile.

Falling coins physics

My first instinct for the bucket was to go all-in on metal to get as far away from a rustic look as possible.

Metal bucket

And if it’s all metal, maybe the bucket is not made up of planks but machined from a solid block. (Around this time, Michael Shepard contributed the revised insignia design that would persist through to the final version.)

Solid bucket

It’s a bit one-note, and the client asked us to go back to a wooden bucket approach. I was able to get a nice, rough look for the wood using displacement maps, and we moved the “MW” insignia to a medallion rather than lose it entirely.

Rustic wood bucket

That’s looking pretty good! But I’d gone too far in the “rustic” direction. The client asked for a darker, more polished look; and suggested the planks bend with the metal bands holding them together—as they would in a real well bucket.

Smooth wood bucket

Getting closer. You’ll notice I experimented with (but ultimately decided against) a ridged texture on the coin edges; and at this point we’d decided to eliminate any overflow coins from around the bucket.

The wood’s gotten a bit dull, so we polish it up. Notice the coin edges have yet to be completely smoothed—that’s a side-effect of the displacement used to achieve the engraving on the coins.

Polished wood bucket

We’re close enough that it’s time to start playing with the pieces in Photoshop. I use compositing tags in Cinema 4D to hide certain objects without eliminating their shadows or reflections. Then I render to a “multi-pass” layered image which allows me to adjust those effects individually.

Multi-pass image

Reflections and specular highlights get toned down or masked out. Edges are softened with inner glow to flatten the overall look and reduce it’s rendered-ness.

Reducing rendered look

This is now very close to the final result, but the wood still wasn’t quite there. The client sent over examples of something that might be more along the right line, and I dug up a similar texture in a high enough resolution to work for the larger icon sizes. Thanks to the multi-pass output, colors can be played with “in post” until they’re just right.

Final MoneyWell icon

You’d think we were done at this point, but this icon has to work at every size from 1024×1024 (no, I don’t know why that resource exists either) to 16×16. You can’t just scale down and expect good results. As the image gets smaller, it needs to get brighter and sharper in order to be legible. Components may have to be resized or masked out to better conform to the pixel grid. (It helps if you cut your teeth on icons in Classic Mac OS.)

Here are some of the smaller sizes. Note that reflections and highlights have been toned down, contour lines are introduced and certain details (like the “MW” insignia) have been removed. Edges are sharper and the overall look is brighter and more saturated.

48x48 MoneyWell icon32x32 MoneyWell icon

By the way, I really like Icon Slate for building and testing Mac app icons. It’ll let you preview an icon against different backgrounds or even right in the dock with a single click. Unfortunately it doesn’t support the 1024×1024 icon resource, so you’ll still need Apple’s Icon Composer to add that resource.

From Our Blog

KaleidoscopeRegistrationWindowMASReceipt.png MASReceipt Validation for Direct Sale Apps

July 8, 2013

License validation of applications purchased through the Mac App Store is achieved by requesting and validating MASReceipt files. It's a...