How to Make a Dot

A non-definitive guide on how to make a strokes-intact dot for outline style icons.

Jory Raphael
Prototypr
Published in
4 min readJan 2, 2018

Sometimes you need to make a dot in Adobe Illustrator. And sometimes it takes you so long to figure out how to make said dot that you begin to contemplate the benefits of giving up design entirely and living as a hermit in the woods. To save others from this path of existential angst, here’s a quick tutorial.

Intact Strokes vs. Outlined Strokes

If you follow me on social media, or live within a thirty mile radius of me, then you’ve heard about Symbolicons Pro — my new icon family with three unique styles: solid, line, and color. The solid style is available now, and I’m hard at work on the line style. Unlike standard solid glyph icons which rely on filled shapes and negative space, line (or “hollow”) icons are characterized by their use of strokes.

An upload icon in Symbolicons Pro Solid and its counterpart in Symbolicons Pro Line.

There are two ways strokes in line icons are typically dealt with. They are either left intact, or outlined. Outlining results in more vector points, but ensures that the final icons remains exactly as you designed them.

That said, one of my goals with the line style in Symbolicons Pro is to make it as flexible as possible, which is the reason I’m including strokes-intact versions of all icons. End-users will have the ability to scale the icons to whatever size they’d like and still have control over how thick (or thin) the lines appear.

Which brings us to the problem…

The icons in Symbolicons Pro Line are all being built on a 24px grid, so space is limited. One design element that recurs throughout these icons is the use of single dots. Little circles to convey meaning.

With the original stroke weight of 2pts, each dot occupies two points on the pixel grid.

If using outlined strokes, this is no problem. The dot can simply be created using a circle shape. But if the strokes are to remain intact, it becomes a little trickier.

It seems logical that a stroke could be applied to a single dot, or node. A node with a 2pt stroke would appear as a 2pt dot.

But in reality, at least in Adobe Illustrator, this doesn’t work. Single, unconnected, nodes are treated as strays and ignored. The reason for this is simple: vector shapes and lines in Illustrator all have a width and height, but a single dot has neither.

The Workaround

Since Illustrator ignores single nodes, the workaround solution is to treat the dot itself as a very, very short line. To achieve the desired result, simply create a stroked line of any length and move one of the nodes so that it overlaps the other. If you have ‘Snap to Grid’ turned on in Adobe Illustrator, this is quite easy. You can also accomplish this using the transform palette (simply give the line a width of 0 and a height of 0. The two nodes will now occupy the same X/Y coordinates and essentially be stacked on top of one another. The end result is the elusive dot. Important note: you’ll need to have the “cap” setting in the stroke palette set to rounded.

A hyper zoomed-in view of two nodes. By visually overlapping the end-points, you get the desired result.

But there’s a minor catch, especially if you plan on using your strokes-intact icons in Sketch. Just as Illustrator ignores single nodes, Sketch seems to ignore single, overlapping nodes. To account for this, simply adjust the length of your line by a very small amount (example: width of 0 and height of 0.01). The end result may not be a perfect circle, but the difference is so small as to be almost imperceptible.

And there you have it! Just a minor work-around I’ve discovered to simplify my process and that allows my icons to work in both Illustrator AND Sketch. Hopefully it can help others who may stumble across the same issue.

You can get Symbolicons Pro here.

If you have any icon-related questions, let me know by responding to this story. I’ll do my best to answer them. And if you have a better solution to the above problem, I’m all ears!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Responses (8)

What are your thoughts?

When I first saw the title of this I laughed.

--

Solution to a problem I never knew existed :D

--

It’s also worth considering how it’s being rendered in SVG or icon font formats.

--