Open the app

Halftone dots

Fine-tune, Shape (with Halftone dots picked), Size field and Fill shape

Halftone dots sit on a regular grid and change size across the artboard: largest at a peak, shrinking to nothing at the edges. Two extra groups appear in Fine-tune when you pick them: Size field and Fill shape.

The Shape group with Halftone dots picked

Spacing

The distance between dot centres, in pixels. Closer dots read as a smooth tone; wider spacing makes each dot visible.

8 px
12 px
20 px

Screen angle

The angle of the dot grid. The buttons set the classic print angles: 0°, 15°, 45° and 75°. 45° is the least noticeable to the eye.

0°
15°
45°

Packing

Square grid puts dots in rows and columns. Hex grid offsets every other row, the way most print screens look.

Square grid
Hex grid

Dot size

The smallest and largest dot, as a percentage of the spacing. Above 100% neighbouring dots overlap and merge into solid areas, which gives the look of a heavy print.

0% to 60%
0% to 95%
20% to 130%

Drop dots under

Dots smaller than this percentage of the spacing are left out, so the edge of the fade has no specks. The hint under the slider shows the size in pixels.

0%
15%
35%

Dot shape

Circle, square or diamond dots, or Lines: a line screen of bars along the screen angle, whose thickness follows the size field.

Circle
Square
Diamond
Lines

Size follows

Diameter makes the dot's width follow the field. Area makes its area follow the field instead, so a fade looks even in tone rather than dark in the middle.

Diameter
Area

Size field

The size field decides how big each dot is. Choose its type first.

The Size field group, with a radial field
RadialUp to 8 peaks. Dots are largest at each peak and shrink with distance.
LinearA line between two end points: largest dots at the start, smallest at the end.
EvenEvery dot is the same size.
ImageA traced image sets the size: dark areas get the largest dots, the classic photo halftone. The design keeps a small greyscale copy, so share links and project files reproduce it.
Radial
Linear
Even

Peaks: position and radius

X and Y place the selected peak, as a percentage of the artboard. Radius is a percentage of the artboard's shorter side, so a peak stays round on any shape of artboard. With the Peak tool (P), click the canvas to move the selected peak, Shift + click to add one, and drag the dashed ring to resize it.

Radius 40%
Radius 80%
Radius 150%

Peak strength

How big the dots get at the peak. Above 100% the largest dots spread out into a wider core before the fade starts.

50%
100%
200%

Where peaks meet

With more than one peak, Largest wins keeps the bigger dot where two peaks overlap. Add up adds them together, so the dots between nearby peaks grow.

Largest wins
Add up

Falloff

The shape of the fade from the peak outwards. Smooth eases at both ends. Linear shrinks at a steady rate. Ease in keeps dots large for longer and drops off late. Ease out drops quickly near the peak and fades gently. For an image field the same setting works as a tone curve.

Smooth
Linear
Ease in
Ease out

Invert

Swaps large and small: the dots are smallest at the peak and grow toward the rim.

Off
On

Fill shape

Limits the dots to a shape: the whole artboard, an ellipse, a rectangle (with rounded corners if you like), a polygon you draw on the canvas, or a custom SVG path. Drag it with the Select tool (V); the square handles resize it and the round handle rotates it.

The Fill shape group, with Ellipse picked
Whole artboard
Ellipse
Rectangle, rounded

Edge

What happens to dots at the outline. Shrink to nothing makes them shrink across a soft band, set by Feather. Whole dots only keeps the dots that fit entirely inside. Cut through dots keeps their size and lets the outline slice through them.

Shrink to nothing, feather 40%
Whole dots only
Cut through dots

Exporting halftones

Halftones can contain thousands of dots. By default each dot is drawn as a path, which matches the preview exactly but can make a large file. Where the design allows it, Use on my site offers a compact version that draws every dot with an SVG filter and stays a few kilobytes whatever the dot count. If it is not offered, the dialog names the first thing to change. See Use on your site.