To include an outer stroke while keeping a game asset’s PNG dimensions unchanged, reserve space for the stroke inside a fixed-size artboard. In Affinity on Mac, fit the complete outlined artwork within that boundary, then export the named artboard at the required pixel size.

This workflow is for someone preparing a small vector game asset, such as a 32 × 32 px geometric icon. It uses the current Affinity desktop Help Center’s controls. Affinity Designer 2 has a separate export workspace called Export Persona; current Affinity documentation calls it Slice Studio. The main workflow below uses the current desktop Export dialog. Current Affinity export documentation, Designer 2 Export Persona documentation.

What can stay unchanged when you add an outer stroke?

Separate three measurements before editing: the shape’s dimensions, the visible artwork including its stroke, and the exported image’s pixel dimensions. Affinity’s Stroke panel places a stroke centered on, inside, or outside the object’s edge. Those alignment choices determine where the outline occupies space. Stroke panel.

An outside stroke needs room beyond the original shape. If the shape already fills the output boundary, keeping the whole stroke requires a change somewhere: reduce or reshape the artwork, use available transparent space, or scale the complete composition into the required output size. Keeping the original edge positions, full outside stroke and identical output bounds is geometrically impossible when the stroke crosses those bounds.

Affinity documents a firm boundary for artboards: objects extending beyond an artboard are clipped at its edge. An artboard can therefore hold the export size steady, but it cannot preserve stroke content left outside that boundary. About artboards.

The official export documentation describes choosing an export area and changing output width and height. It does not document a switch that includes overflowing outer strokes while preserving both the original artwork scale and a fixed image boundary. The supported approach is to fit the visible artwork within the chosen export area. Export dialog, Export Settings.

Your requirement Suitable approach What changes
Keep a true outside stroke and exact PNG dimensions Inset the shape within a fixed artboard Shape size or available padding
Keep the existing shape boundary as the visible outer boundary Use an inside-aligned stroke, where appropriate Outline placement and visible fill area
Keep the complete composition’s proportions and force a target output size Resize the exported image Artwork scale in the exported pixels
Keep the full artwork at its original scale with no room available Increase the output area Export dimensions; this does not meet the fixed-size requirement

How do you fit an outside stroke inside a 32 × 32 px export?

The following worked example uses an illustrative, axis-aligned square with a uniform 2 px outside stroke. It deliberately avoids effects, variable-width strokes and projecting corner details so the space calculation is clear.

For this square, the visible width is the shape width plus one stroke width on each side. Therefore, a 32 px output allows a shape width of 32 − 2 − 2 = 28 px. The same calculation gives a 28 px height. Centering that shape leaves 2 px between its underlying edge and each artboard edge; the outside stroke occupies that space.

1. Establish the fixed output area

In Vector Studio, choose File > New. Set Document units to pixels, Page width and Page height to 32 px, and enable Artboards. Enable Transparent background if the asset needs transparent surroundings. For this example, use 72 DPI, then click Create Document. These document controls are documented in Affinity’s new-document help. Creating new documents.

If you are adding a dedicated export artboard to an existing document, the Artboard Tool provides W and H controls for a new artboard, followed by Insert Artboard. Enter the required pixel dimensions explicitly rather than sizing the artboard around the selected artwork. Artboard Tool.

2. Size the underlying shape and set the stroke

Create or select the square. Open Window > General > Transform and enter W: 28 px and H: 28 px. The panel supports exact dimensions and an anchor point for transformations. Position the square centrally, with its underlying edges 2 px inside the artboard. Transform panel.

Open Window > Vector > Stroke. Choose a solid stroke, enter Width: 2 px, and choose Align Stroke Outside. For this simple example, use a round join. Affinity documents the alignment, width and join controls on the Stroke panel. Stroke panel.

When resizing existing artwork, check how its stroke scales. Scale with Object controls whether the stroke width changes with a closed shape. The Transform panel also has Scale Override, which can force properties including stroke widths to scale. After resizing, verify the intended 2 px width again rather than assuming it stayed constant. Stroke scaling controls, Transform Scale Override.

3. Check the complete visible extent

The 28 px square plus its outside stroke now occupies 32 px in each direction. That is a geometric calculation for the stated example, not a measured export result. If you want a transparent margin around the outline, reserve that space too: a 1 px margin on every side reduces the allowable square to 26 × 26 px.

Do not apply the same subtraction blindly to every asset. Affinity’s miter joins can project at sharp corners, while caps affect line ends. A complex silhouette needs inspection of its complete outline, especially at corners and endpoints. The simple width calculation is a starting point for regular shapes. Stroke joins and caps.

How do you export the artboard without changing its dimensions?

Choose File > Export > Export, then select a PNG preset. Set Area to the named artboard. Affinity distinguishes this from Selection Area, which includes overlapping layers, and Selection Only, which excludes overlapping deselected layers. Choosing the named artboard makes the intended export area explicit. Export dialog.

Check the output width and height: both should be 32 px for this example. Affinity permits alternative dimensions and provides Lock aspect ratio. Avoid changing the output size to compensate for artwork that still extends beyond the artboard; fit the outline inside the boundary first. Export Settings.

Inspect the export preview before saving. On Mac, ⌘1 shows the preview at 100%; ⌘2 shows 200%. Check all four edges for clipped outline sections and confirm any intended transparent margin. Then choose Ask for Location, click Export, name the file, choose its destination and click Save. Export dialog and Mac preview shortcuts.

As a final practical check, open the saved PNG and inspect its pixel dimensions and complete silhouette. A correct width and height alone do not establish that the stroke fits: a clipped image can still be exactly 32 × 32 px.

Can slices preserve the same fixed-size result?

Yes, provided you define the export area deliberately. Affinity documents two different slice behaviors: a slice created from an Export Layers panel item automatically sizes to that item’s extent and exports its layer content; a manually drawn slice includes content from all visible layers within its area. Exporting using the Slice Studio.

For a fixed export region, select the Slice Tool in Slice Studio and drag an area around the prepared artwork. Use the supporting Transform panel to set the slice’s precise size and position. Choose PNG in the slice’s export options and export the required slice. Keep the complete stroke inside the slice rectangle, just as you would inside an artboard. Exporting slices.

Check the displayed export resolution rather than assuming 1x always means the document’s pixel dimensions. Affinity documents a relationship between slice scaling and document DPI: its 64 × 64 px example exports at 64 × 64 px at 1x with 72 DPI, but at 32 × 32 px at 1x with 144 DPI. This is a separate size-setting issue from stroke placement. Slice dimensions and DPI.

What should you change when the result still fails?

Use the symptom to choose the next edit:

  • The PNG has the correct dimensions but its outline is cut off: move or reduce the artwork until its complete stroke fits within the artboard or slice.
  • The PNG dimensions vary as the artwork changes: check whether you are exporting a selection or an automatically sized object slice. Use the named artboard or a precisely sized manual slice for a fixed boundary.
  • The outline thickness changes after resizing: check Scale with Object and Transform’s Scale Override, then reset the intended stroke width.
  • The outline fits but the asset appears smaller: check whether export width and height were used to scale a larger composition into the target size.
  • Only sharp corners are clipped: inspect the join style and miter extension before changing the whole composition’s size.

These checks follow the documented distinctions between artboard clipping, slice extents, stroke scaling and export resizing. They address different causes; changing stroke alignment alone will not resolve every export-size problem. Artboard boundaries, Slice behavior, Stroke controls, Export dimensions.

For a repeatable game asset workflow, establish the required pixel boundary first and budget the outline within it. Keep the outside alignment when that appearance matters, adjust the underlying artwork to make room, and export the fixed region. That preserves the requested file dimensions while giving the full stroke space to render.

Sources