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.

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.

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.

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.

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

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.)

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.

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.

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.

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.

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.

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.

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.

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.

Any software professional with an internet connection probably sees at least a hundred icons a day. They’re small and they’re everywhere – icons, not software professionals – little visual morsels of meaning sewn into the digital terrain like jewels on a robe. As a result, I think most of us tend to take them for granted, but the fact is that a surprising amount of work goes into the good ones. That crisp and shiny final image is, more often than not, the descendant of a dubious lineage of awful, mediocre, or just-not-quite-good-enough ideas, all of which get left on the cutting room floor.

What is, theoretically, a linear transition from idea to execution…

…is usually something a little more convoluted:

What you see above is what goes into making the sausage. A lot of experimenting, a lot of trial-and-error, and ultimately something more akin to survival-of-the-fittest than let-there-be-light.

In this case I was trying to create an icon that looked like a holographic display. I’ve always loved the challenge of rendering “special effects”: glowing things, iridescent things, things bristling with electricity. These are the kinds of images that require obsessive adjustments of color and transparency in order to get from “cheesy” to “wow”.

After the first quick digital concept, I actually went back to my sketchbook:

I won’t be the first or last to emphasize the value of sketching by hand. The obvious advantage is that most basic shapes are just quicker to draw (albeit roughly) than to create in Photoshop or Illustrator. The less obvious advantage, paradoxically, is that sketching out more complicated forms is usually slower – an almost meditative process which allows you to come up with a second idea half-way through drawing the first.

Then I jumped back into Photoshop and got to work creating some rough drafts of different designs. Since I felt pretty confident about the holographs themselves, I started out by focusing on the design of the projection device. Experience has taught me that the ideas I like initially will not necessarily be the strongest candidates, so I try not to get too attached to anything. One of the things I wanted to make sure to get right was the “technology” of the projection screen. My first idea, a grid of glowing bulbs set beneath glass, eventually gave way to a matrix of glowing pixels contained within glass:

But the element that ended up giving me the most trouble was the base of the device. The original concept was to make it very futuristic, like maybe something Apple would be selling in the year 2050. I wanted it to imply a whole aesthetic of product design in whatever future world or alien spaceship it existed in. However, at some point during the course of my experimentation I had created a simple cylindrical disc, and the more I looked at it, the more I realized that all the detail I was putting into the others was going to crowd out the focus – the luminous glow of the projection and the holograph itself.

I shared a couple of the more developed ideas with my coworkers and I wasn’t too surprised when most people favored a shallow, slightly tapering metal base. It needed more personality, but it was clearly the strongest design.

I tweaked the color and shape, added some subtle (but essential) details to the metal and the projection grid, and spent the rest of the time refining the look of the holograph. I was careful at this point to make sure that whatever treatment I came up with was something I could duplicate with multiple shapes. The final product is a set of icons featuring the same device but with different holographic projections depending on the hard drive:

I’m pretty happy with the results. If you want to check them out, the icons are available for download.

A couple weeks ago we held a Black Pixel design summit. Dan Pasco, Dave Wiskus, Phil Letourneau and I came together in historic Downtown Las Vegas to bond, and to brainstorm about the Black Pixel design team.

As an overall goal, the get together was intended to be very conversational to allow the four of us to simply get to know each other better. While this low-key style interaction was a constant thread throughout our time together, we wanted to share a few of the more concrete points we discussed; believe it or not the time wasn’t all spent on gambling, drinks and shows. And… we’re excited to share what we go through as we grow. The good and the bad.

We’d like to encourage questions/ideas/comments/dialogue around these points, as well as anything else folks would like to throw out there. We like talking wit’cha!

State of the Design Union

We talked about where Black Pixel has been on the design front and where we think we’re at. Some of the points we want to keep working on are things like processes and efficiencies. We also talked a lot about the role of “design” as it applies to every piece of the project lifecycle and every member of the Black Pixel team.

Direction

Branding. Craftsmanship. Care-invested design.

We want our brand to deliver products with undeniably EXCELLENT user experience.

Our mission is to ensure this standard is reflected in everything from our website and scope documents, to our product interfaces, visual design, development and quality assurance; and of course, what the folks who work with us feel post-project.

Dan started an internal conversation with our design team proposing some ways we can change up current methods with the goal of opening up project-idea-contribution earlier on to create more learning opportunities, introduce more ideas earlier on and push foundational ideas further throughout the design cycle. We are learning from our past, learning from our friends and inspirers, and reworking ourselves to make noticeable, beautiful growth. We want to push ourselves and see what happens.

Creative team – Growth & Development

All of us here at Black Pixel come with a range of experience under our belts, so finding some stride in how we’ll push the boundaries of our creative brains is something we will continually work on. For our team members, we simply want to help people pursue the areas they’re passionate about, and also expose them to roles outside of their normal responsibilities.

As mentioned in the direction paragraph above, we’re going to try some different ways of approaching projects on the creative side. We’re proud of the people who’ve joined forces to become Black Pixel and we want to cultivate taste company-wide.

Evangelism

While we discussed a range of things from promotion, sponsorships, marketing, philanthropy and events, we resolved that the best evangelism method for us right now is putting everything into our people and our work. We have a good number of folks on staff that speak, write, teach and do a lot of traveling just to learn and connect with other folks in addition to the things called “their job.” We find these to be some of the best means to spread the word on who we are and what we’re passionate about. AND of course, we want our work to speak for itself. So for the immediate future, that’s our plan.

That’s the recap!

We updated our website this week, and as a part of that operation I spent quite a bit of time tweaking the iPhone- and iPad-specific stylesheets we use for our site.

One good way to do this was using the iPhone Simulator, but you typically get at that by launching Xcode with an appropriate project. I’ve been using Alfred ever since I was introduced to it at SecondConf by Phillip Bowden, and I realized it’d be really convenient if I could kick off the simulator using just a couple of keystrokes.

Here were the steps I used:

1. Find the path the iPhone Simulator. I did this by launching the sim from Xcode, then right clicking on the Dock icon and selecting Options->Show In Finder. Once I had that, I right clicked on the Applications folder showing at the top of the Finder window’s toolbar. This showed me the full path to the current folder.

2. The next thing to do was add the path to Alfred so it knew where to find the sim’s executable. I did this by hitting option-space bar, and then clicking on the gear icon in the upper right hand corner of Alfred’s popup window.

1. You can add the path by selecting the Features tab from the Alfred UI, then hitting the plus button at the bottom of the Search Scope area.

After that, you’re done. Invoke Alfred by hitting option-space bar again, then type ‘io’

Boom:

Our design group—consisting of a variety of artists and designers and elite ninja assassins—gives us a great team for working on our internal projects, but it also allows us to offer design services to our customers in addition to our a-list development team:

Strategy — Some of our favorite projects have been ones where the client approached us with the spark of an idea, looking to us for guidance. We sit down with the client’s team, talk through their needs, advocate for their users, and develop that idea into a functional blueprint, often with sample wireframes or even full-color mockups.

Wireframing — Usability is everything from how fast the app launches to the color of a button. We all stress on this, and we all take responsibility if something doesn’t feel right. But happily, we have someone on the team whose job it is to make sure that the blueprints account for all of the possibilities.

Visual Design — This is what people typically think of when they refer to design, and it’s easy to see why. Most of what we process consciously about an app’s presentation is what we see. Making software pretty is one of our favorite things in the world, so naturally it’s very important that we consider every pixel.

Production — When we hand a finished design over to developers, we give them a complete set of assets (including @2x for iPhone projects) and style guide, which includes annotated and documented full-resolution mockups. We don’t like leaving anything to guesswork.

Iconography — To ensure that even the tiniest details in our apps looked great, we hired a guy whose username is “Iconmaster“. Talk about focus. We also have a passion for creating app icons, because they’re often the user’s first experience with an app.

Design Reviews — Because another set of eyes can make all the difference, every project we touch at Black Pixel goes through an internal review process. Even if you have your app designed elsewhere, we’re happy to offer our perspective.

We provide these services à la carte, and we’re excited to work on interesting projects with anyone who is passionate about good design and making their users happy. If that’s you, get in touch.