How to make and frame a VTT token

Crop, pan, zoom and border — the four moves that decide whether a token reads clearly at the size it is actually played at.

Free · No signup · Everything stays in your browser

Upload a character portrait
Click here, drag a file onto this box, or paste an image with Ctrl+V

Zoom · drag the preview to reposition

Border

Export size · transparent PNG

Preview at table size

1 inch

2 inch

Zoomed

Step by step

1 Load a portrait. You start with any image of a character — a photo of a painted mini, a piece of digital art, or an AI-generated portrait — and you finish with a square PNG in which the artwork is cropped to a circle and bordered, ready to drop onto a map.
2 Upload it. Upload the image by clicking the drop zone, dragging a file onto it, or pasting from your clipboard with Ctrl+V (Cmd+V on a Mac). Drag inside the circular preview to move the framing, and use the zoom slider to pull the face in or out until the composition sits right. Then pick one of the eight borders along the bottom of the workbench, choose an export size, and press download.
3 Frame the face. The circle crops away the corners of your image, so a portrait where the head sits low or off to one side will lose part of the face if you leave it centred. Pan the image until the eyes sit a little above the middle of the circle and the shoulders fill the lower third — that is the framing that reads clearly at the small size a token is usually displayed.
4 Export. Drag it straight onto a Roll20 or Foundry map, or into a character sheet’s token field, and it is ready to play.

Choosing a size, and why it is a PNG

Export	Pixels	Use it for
Small	512 px	NPCs and monsters — crisp at normal table zoom
Medium	1024 px	Player characters and bosses, keeps detail when zoomed in
Large	2048 px	Handouts and printed close-ups, well beyond grid needs

Transparent corners, every time. The circular crop leaves the square’s corners untouched, and PNG stores that emptiness as full transparency — so the token carries no background onto the map. That is also why there is no background-colour setting: there is nothing to set.

Why the border sits inside the circle

The eight borders are drawn by the tool as vector shapes rather than loaded as image files, which is what keeps the whole page a single self-contained HTML file with no external requests and no copyright-encumbered assets. Each one is a different rim treatment: a plain gold ring, a doubled ring, a ring studded with rivets, a dashed rune band, a scale pattern, a toothed gear, a vine-studded wreath, and a starburst. They are drawn at export time at the full output resolution, so a border on a 1024 pixel token is crisp rather than upscaled.

Because the crop is circular and the border sits inside the square, the corners of the exported PNG are left untouched and therefore fully transparent. That single design choice is what makes the token usable on any map: drop it on grass, stone or parchment and only the circle shows. It also means the file does not need a background colour option — there is simply nothing to set.