Skip to Content

A Third Way to Use Drawn

An idea posted
about drawn & icons.
As presented by the incredible Fred LeBlanc.
now with 113 reads

Drawn comes with two different uses right out of the box: solid shapes and outlines. However, if you have the vector set, there is a third way that you can use Drawn icons: without the borders. By only taking the insides of the icons, most still look pretty recognizable.

To do this, open up "Drawn - Set 1.ai" in Adobe Illustrator. Find the icon that you want to use. Next, double-click on the icon using the selection tool. This will let you edit individual parts of the icon. Once in this view, click on the black outline and hit delete on your keyboard. (Repeat this step until all of the black lines are gone.) Now what you’re left with is the white icon parts that were between the lines.

The pieces are probably white-on-white at the moment, so — using the selction tool — drag a box around where you think the shapes are. This should select them. Change their color with swatches or the color palette. If the icon had multiple white areas, you can also color each on individually.

The result is something that looks pretty similar to the icon you started with, but a little bit thinner and without a border. You can also use this technique as a way to color your Drawn icons however you’d like while keeping them as vectors.

Recent Fredlines

See More

Fred LeBlanc is trying to make the web a better place. He develops, designs, writes, improves, constructs, invents, and creates (hopefully) interesting content and projects.

He’s reasonably well-known for his jQuery plugin, he co-runs a meet up for web folks and he’s been known to make a TextMate theme or two.

Learn More