Making the NetNewsWire 4 App Icon

| By John Marstall

With the release of NetNewsWire 4 Public Beta, we wanted to overhaul and modernize NetNewsWire’s app icon as much as the rest of the app. We didn’t throw out everything — the color scheme and satellite metaphor stayed — but the design is completely new.

Our CEO, Dan Pasco, has actually worked on satellites. That was great on the one hand, because he was able to point me to useful references like the Mars Climate Orbiter — which in turn led me to the Nozumi Mars Satellite seen below. On the other hand, I knew his standard for accuracy was going to be a bit higher because of it.

mars.png

There’s a lot of the Nozumi satellite in the new icon.

As always, it’s important to start with a detailed sketch:

nnw-clean-sketch.png

Then onto modeling a satellite in 3D. My first attempts were obviously models of satellites…

nnw-old-satellites.png

…but used the icon space carelessly — as became clear whenever one was scaled down to typical OS X Dock size.

nnw-in-dock.png

The Dock is the bane of every Mac icon designer, because you never know the exact size at which your icon will be presented. The key is to fill as much of the space as possible, with a silhouette as simple and distinctive as possible, and with key edges contrasted from their backgrounds as much as possible. That usually means edge highlights backed by deep drop shadows.

With the Dock as my harsh mistress, I simplified and adjusted until I arrived at something more like this:

nnw-nearly-there.png

This turns out to be a solid design, because its simplified composition — really just one large circle and two narrow rectangles — is easy to distinguish at any size, all the way down to 16 by 16 pixels. There was a lot of feedback on the angle of those panels. Once I’d flattened the perspective on them, everyone was much happier with the result.

And I should credit Dave Wiskus for bugging me to fix the “sad” expression seen on those earlier vessels. See why the dish was rotated?

You can see how the panel and body foil textures evolved between these snapshots. The panels grew more stylized, while the foil grew more realistic. Capturing those intense, luminous reflections that gold foil seems to catch was key for me, while I designed the panels to convey something of both “spaaaaace” and forward motion.

nnw-foil.png

Even at this point there was a lot left to be done. Color, contrast and texture can all be played with extensively “in post.” What I like to do is render the key parts of the icon into separate, very large images that can be scaled and tweaked in Photoshop. The structure of the final icon is something like this:

nnw-layered.png

Put it all together and you have this:

nnw-final.png

I hope you enjoy NetNewsWire 4! Please go try the public beta today.