I wanted to create icons that are legible and optimized for mobile screens. After a few days work, the result is a 42 icon collection available to download on The Noun Project.

Sketch’s vectorize stroke tool is essential when exporting icons or logos into SVG format for production assets in the final stage of your workflow. It works perfectly when vectorizing simple shapes like circles and rectangles, but fails with the more complex shapes. In this case, when preparing my icons for The Noun Project, vectorizing the stroke for the wavy flag with an “inside” position creates a less than perfect path for the subtracted shape on the inside. Even though the graphical output of the shape looks normal, the actual shape of the path is jagged and includes erroneous points that are unnecessary. Unfortunately, I found this bug the hard way when physically printing the icons on shirts that, to my dismay, included the triangles and geometric shapes as negative space. Fortunately, I found a work around in my workflow which uses our old, trusty but intricate pal, Adobe Illustrator to easily rectify the bug and roundtrip the shape back into new, simpler friend, Sketch. If you want your designs to be absolutely perfect, love using Sketch for the most part despite some bugs here and there, and oh yeah, happen to have Adobe Illustrator still laying around, then please follow along.

With this icon, there is a 2 pixel border in the inside position of the shape.

Vectorize the stroke (Layer > Paths > Vectorize Stroke) which turns into a filled shape and see the unwanted geometric paths. I have not found a way to easily remove the points in Sketch, so I end up going back to our dear old friend, Adobe Illustrator. With the shape selected, press copy (CMD + C) in Sketch and then paste (CMD + V) in an artboard in Illustrator.

In Illustrator, the shape becomes a “Clip Group”.

Drag the shape outside of the “Clip Group” into it’s own sub-layer and delete the remaining “Clip Group”.

The shape will be be empty with no fill or stroke. Do not be alarmed and press the designer panic button just yet because we’re almost there!

Fill in the shape with a color, in this case #000000 since it is a Noun Project icon that requires full black. Important: Use the Direct Selection Tool (Keyboard Shortcut: A) to select the entire shape. Without doing so will result in an error message in the next step.

In the “Pathfinders” menu (Window > Pathfinder) press the “Merge” button.

Voila! The shape has magically become whole without any geometric paths and unnecessary points. We are now ready to get this baby back into the loving hands of Sketch. Optional: Drag the “Compound Path” outside of the group and delete the remaining path(s) in the group. Copy (CMD + C) the “Compound Path” and delete the remaining path(s). You can actually copy the compound path without doing this but I like to keep my Illustrator clean as can be with my OCD designer tendencies.

Go back into Sketch and paste (CMD + V) the shape in the same artboard. Nudge the shape back into it’s original place.

Drag the shape named “Fill” outside of the group folder and delete folder with “Clip”.

Celebrate now as the shape is as perfect as it should be! Let us rejoice in the combined power of our new friend, Sketch and old pal, Illustrator.

NerdyHippo’s first shirt and hoodie design is here!

Represent the Bay Area with this modern shirt and hoodie! Sport this one-of-a-kind illustration that features iconic landmarks in both San Francisco and Oakland including: Transamerica Pyramid, Bay Bridge, and the Port of Oakland Cranes and more. This shirt does not discriminate and comes in a rainbow of colors.

Be one of the first 200 orders and receive a free NerdyHippo gift for being an early adopter. Order now to get free shipping.

I thought it would be cool to redesign the logo for fictional start-up, Pied Piper, from HBO’s new show, Silicon Valley. The small “P” represents the universal compression algorithm that is the underlying technology behind the company.

I designed a promo page that notified mobile web users of available native apps.

I animated a split-screen interaction flow between the web player and TV experience for the Chromecast feature on JW Player.

The Noun Project has morphed from a great concept into a working business model for sharing and selling icons. It is by far the most inspiring resource for iconography and I never imagined that the first icon I shared on The Noun Project would be the most popular for the search term, “Feedback”. As for the concept, I wanted to create a friendly but proportional chat bubble with rounded corners for every part of the icon. When I originally uploaded the icon, there was no pay-model for designers like it has now. We basically shared icons for free, hoping that it would make the world a better place. Now I get paid for something I had no idea would make any money. It’s sort of like finding that toasty 20 dollar bill you never knew you had after drying your laundry on a Saturday morning. Cha-ching! Score! (Place any other slang term for money here)!