Using Fonts to Create Custom Graphics

Drawing of components to building an online business

The Concept

This week’s eLearning challenge used a technique that I hadn’t used in the past- converting fonts (specifically icon fonts) to vector images. Once the font icons have been converted, you can customize them by tweaking the shapes, combining them together, or changing colors. For my entry, I chose this free font I found called PeaxDrawnIcons, which have a hand-drawn look.

Icons representing common components of e-commerce

The Method

To create the graphics, I followed the procedure shown in Tom Kullman’s video here.

Process of changing font into vector image

Most of the icons were pretty easy to convert over. There were a couple (the man and woman), that needed to have some shapes added in order to color them correctly. For that, I added ovals and then edited the shapes’ points to make it match exactly.

Since a lot of the icons had a money/shopping theme, I chose to make my interaction about building an online business. To compliment the hand-drawn look of the icons, I found some scribbled circle vectors and another font called Kalam.

Scribbled circle icons and links to font and background image

The Result

Click here to view the interaction.

Click here to download the .ppt file with the graphics and mockup. Click here to download the Storyline 360 source file. Note: due to a bug with some fonts displaying incorrectly when previewing & publishing in Storyline 360, the titles are all images.

Leave a Comment