Furfox Design Process

Posted in Guides

You heard it here first: there is no, there has never been, and there will never be a standard design process; each and every designer has his own. The steps detailed below describe roughly the process I followed to design Furfox.

Step 1: Sketching

Furfox Sketch
Sharp pencil sketch of the concept.

Many designers can't do without the good ol'pencil and sketchbook, and I happen to be one of them. Out of the few concepts I had jotted down, this one seemed to be a good starting point.

Step 2: Vector Tracing

Furfox Step 2
Manually drawn vector shape.

I then proceeded with scanning the sketch and tracing it in Adobe Illustrator. This step is optional, but I often resort to manual tracing when I can't get away with basic shapes.

Step 3: Adding Vector Details

Furfox Step 3

Drawing vector fur using Illustrator.

This step is all about adding details to the vector shapes obtained during the previous step. I admit that drawing vector fur can be irritating at times, but I got used to it thanks to my ephemeral experience with character design.

Step 4: Adding Colors

Furfox Step 4
Adding color to the vector shape.

This is my personal favorite. Nothing beats the joy of playing with colors, shadows and effects. I obviously had to cope with a pre-determined color palette (orange and blue predominantly) to preserve the visual identity of Firefox, and that's often the case in professional design.

Step 5: Adding Raster effects

Furefox Step 5
Adding various raster effects using Photoshop

I then exported the icon to Photoshop for the finishing touches. I added some layer effects, adjusted the contrast and changed the beach ball angle and colors. I also had to manually tweak the 16px version of the icon for a sharper and more contrasted result.

Although I could have switched to raster right after step 3, I tried to delay this transition as much as possible in order to preserve scalability and "editability". You gotta love them those vectors, they never fail you.

Step 6: Icon Packaging

Furfox Step 6
Exporting the icon and adding metadata.

Once the icon is ready, I exported it to CandyBar to edit the metadata and re-export it as an iContainer. I have previously used IconBuilder, a Photoshop plugin for building icons, but I recently noticed that the combination of the two above-mentioned apps can do exactly the same, with style.