Fountain pen 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 fountain pen 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.

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 #

Start by selecting the polygon tool and creating a hexagon with a radius of 4px. There’s a couple of ways this can be done. Clicking once on the canvas with the polygon tool lets you type in specific values. Or, click and drag to set the radius. While dragging, the up and down arrow keys can be used to increase or decrease the number of sides in the polygon.

Switch to the direct selection tool, then drag upwards while holding the option and shift keys. This will create a copy of the hexagon directly above.

Step 2 #

Select the bottom two points of the new hexagon with the direct selection tool. I often prefer dragging a marquee selection around points to select them, rather than clicking and shift-clicking to add the points needed. It can be fewer clicks, but the main benefit is accuracy — it’s harder to make mistakes because the hit zones can be larger.

Switch to the scale tool and drag the right point outwards a bit over 1px. When some points of a path are selected, Illustrator’s scale, rotate and other transform tools operate just on those points. In this instance, the scale tool moves the points only along the X axis, because they both have the same Y position. The scale tool is a great way to make mirrored adjustments. This is common trick I use when designing.

Please note that Illustrator’s bounding box must be turned off when points are being transformed like this. If you’re seeing a bounding box around the selection, choose View › Hide Bounding Box.

Step 3 #

Switch back to the direct selection tool and select the top two points. Choose Object › Align › Horizontal Align Center to move both points to the center of the shape (the button in the align panel can also be used).

Because there’s two points on top of each other, the live corner widget can’t be used to round the corner. This can be fixed with a bit of a hack. Open the pathfinder panel and click Unite. The resulting shape will look the same, but there’s only one point at the top now. Select the point and drag down to form an arc by using the live corner widget.

Pathfinder’s unite function is a great way to clean up paths, especially when Remove Redundant Points is enabled. This setting can be found in pathfinder options, in the menu in the pathfinder panel.

Step 4 #

Switch to the direct selection tool and click on the lower hexagon to select it. Choose Object › Path › Add Anchor Points to subdivide the path, providing enough points to finish the tip of the pen.

Drag a marquee selection over the bottom 5 points. Then, switch to the scale tool, click in the center of the hexagon to set the origin, and drag down and across until the tip of the pen is narrower and 1px outside the bottom of the icon area.

Step 5 #

Switch to the direct selection tool and drag a marquee selection over the lower left and right points. Then drag out the live corner handles to form arcs for the sides of the pen tip.

Step 6 #

Switch to the pen tool and draw a line from 1px below center of the tip to the center of the lower shape. In the stroke panel, set the weight to 0.25px, then choose Object › Path › Outline Stroke.

Switch to the ellipse tool and draw a 1×1px circle near the center of the lower shape. Given grid snapping is turned on, the shape will have to be nudged 0.5 on the X and Y axis. Switch to the selection tool, press enter to open up the move window, and type in the adjustment required (maybe 0.5 in the horizontal field and 0.5 in the vertical field).

Drag a marquee over the 3 bottom shapes that form pen tip, then click Minus Front in the pathfinder panel. This will remove the top two shapes from the underlying main pen tip shape.

Step 7 #

The last step rotates the icon into place. Switch to the selection tool and drag a marquee over both paths. Switch to the rotate tool and click the center of the icon area to set the origin. Drag to rotate, while holding shift to constrain the angle to 45º.

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

Published 17 November 2022.