Musings
October 3
Designing the NetNewsWire 3.2 icon
Here’s the process I went through making the NetNewsWire 3.2 icon. Everyone knows it’s tradition for 0.2 releases to get a new icon, so when Brent asked me to make him one I was excited.
It all started off with some sketches on the free paper I got from the Pickwick Hotel at WWDC. I decided early on that I didn’t want the icon to have a planet. I wanted to change the shape and make it more unique.
Note about first sketches:
RSS logo maybe? Nah.
Brent with a Pilsner glass? Nah.
This is me playing with other shapes. All I’m trying to do here is get the idea floating around in my brain. I’m trying to find a good outline.
I decided on this design. I was happy at this point, but Brent seemed to think it needed a little more work (O rly? Grayscale 3D vector art isn’t good enough?). At first I was going to have it pointing down, but quickly changed direction — it felt impotent and sad pointing down. I did these outlines in Adobe Illustrator using 3D rotate and revolving an outline. Once the shapes were made I could twist and turn them any way I wanted.
I ended up deciding it was best to have it pointing up. I liked the shape better and it felt happier. Here’s me exploring that icon shape a little more. This is what I ended up with in Illustrator, before turning it over to Photoshop.
This pic has most of the shapes complete, but without all the love added. Brent’s only requirement was for it to look cool, so I worked with a lot of textures, shading, and light. Every little object and surface has some bit of texture in it, even if its just a little bit of noise.
Around this point, I decided to also start working on the iPhone version. So they could both be floating around in my head at the same time. I took the idea of the blue solar panel grids and threw it into an icon. A fine background for something, but not an icon by itself.
This was the point I decided to do those cool swirls. It started out as the RSS logo, then departed slightly. I enjoyed working for different platforms while creating these icons. It gave me a new set of constraints and made me think about the problem differently. I could take some of those things and put them back together with the desktop icon to make them both better.
I made a 2D satellite that complimented the desktop icon and threw it on the icon I made earlier.
The solar panel was too busy, so I put it in an orbit around the earth.
I went back in and made the big version of the iPhone icon, and made all the littler versions of the desktop icon. Each one gets massaged a little, layers get thrown away, things are redrawn. It eventually gets down to the 16 X 16 pixel ones. They’re so cute and little! This is where good color choice and shape pay off the most.
If I had just shrunk down the 512 version of the icon it would have looked like the mini icon on the right. While it’s technically an accurate scale of the bigger icon I made, it blurs and confuses the shapes I’m trying to get you to understand. The one on the right is much easier to look at, and looks cooler at that size.
The last step was to create a version without the orange signal for when a badge is displayed on the icon. The clash of orange and red was atrocious, this makes it much better.
Many thanks to Brent and the rest of the Sheep for their advice throughout the process. If anybody has questions or comments, email (address in website footer) or tweet at me: @BradEllis
