Fingerprint icon speedrun

When viewing my vector icon speedruns, it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education.

This article aims to be a director’s commentary for my fingerprint icon speedrun, noting the techniques used, and why they were chosen. I use Adobe Illustrator for all the icon speedruns, but many of the tips are relevant for other design tools.

My personal best for this icon is around 12 seconds.

Workspace #

One important aspect to working quickly is setting up your workspace. When designing icons, I like having a working area well defined, with the center point marked. Both are locked, so I can’t accidentally move or alter them. The “working area” is typically the target icon size. In this example, I’m using a 16×16px area.

Working to a coarse grid is faster and more accurate. If points need to be placed off-grid, Illustrator’s move window can be used, allowing for precise numeric offsets. Illustrator’s snap to pixel has some behaviour I don’t like, so I use snap to grid instead.

Mac shortcuts are noted below, so please substitute control for command, and alt for option if you’re using Windows.

Step 1 #

Switch to the ellipse tool and draw a circle that’s 20×20px. With the direct selection tool, select the top and left points of the circle and delete them by pressing the delete key, or by cutting them with command-X. I often cut instead of deleting points and objects, because it means my left hand can stay in the same position on the keyboard.

We’re after a 1px stroke and no fill for the path. If your path has a black fill, pressing shift-X will swap the fill and stroke. Open the stroke panel and set the stroke to be 1px wide with a round cap.

Step 2 #

Illustrator’s offset path command creates a new path that follows the perimeter of the selected path, but offset by a specified amount. It’s like creating a stroke, then outlining the stroke.

For our icon, it’ll help turn our quarter circle into fingerprint ridges. Choose Object › Path › Offset Path, and set the offset to be 2px, and the joins to be rounded. Repeat this another two times. There should be three new paths in total at this point. Choose Object › Path › Offset Path again, but this time set the offset to be 1px.

Step 3 #

With the outer ring still selected, switch to the rotate tool, and click the center of the icon area to set the origin, then drag while holding shift to rotate while constraining the angle. It’s also possible to option-click on the canvas to open up the rotate window, so exact values can be typed in.

Switch to the selection tool and drag a marquee across all the paths to select them. In the pathfinder panel, click Outline. This cuts all the paths at their intersection points.

Choose Object › Ungroup, then open the stroke panel and set the stroke to be 1px with a rounded cap. Turn on the dashed line checkbox and set an 8px dash with a 2px gap. We’re almost done.

Step 4 #

Switch to the selection tool, hold shift, and drag a marquee selection around the parts of the icon we’d like to keep. Holding shift toggles the selection — things that were selected will be unselected, and things that weren’t selected will become selected. Press delete or command-X to remove the paths we don’t need.

Switch to the scissors tool and cut a couple of the paths near the ends. This alters the dash start positions, and makes the fingerprint ridges look more unique.

This article is also available as a video: Icon speedruns: Fountain pen and fingerprint.

Published 19 November 2022.