CONTROLLED PNG EXPORT TEST · OCTOBER 14, 2026
Roblox Shirt Template: Fix a Padded Logo With Measured Image Size
Crop transparent space first; if you keep it, increase Image size and inspect the saved PNG. In our test, a 100 × 100 red logo inside a 300 × 300 transparent file needed 45% Image size to appear 84 pixels wide on the Shirt front. The same logo in a tightly cropped 100 × 100 file reached 84 pixels at 15%. The threefold slider difference came from the threefold source-canvas width in this controlled square example.
These are results for this editor's flat PNG export, not a recommended percentage for every image or a claim about Roblox avatar rendering.
What we imported and measured
We generated a 300 × 300 transparent PNG with a fully opaque red 100 × 100 square centered inside it, leaving 100 transparent pixels on every side. We imported that exact file five times, set Image size to 15%, 30%, 45%, 60%, and 75%, dragged it to the editor's TORSO FRONT center, then decoded red pixels in each downloaded 585 × 559 PNG. For a comparable tightly cropped 100 × 100 source, we used the prior four-setting export test. Roblox's Classic clothing guide documents a 128 × 128 FRONT panel; this editor's visible FRONT guide spans x 128–255 and y 191–318.
| Padded Image size | Saved red bounds | Visible width | Margin inside 128 px FRONT |
|---|---|---|---|
| 15% | x 178–205; y 241–268 | 28 px | 50 px per side |
| 30% | x 164–219; y 227–282 | 56 px | 36 px per side |
| 45% | x 150–233; y 213–296 | 84 px | 22 px per side |
| 60% | x 136–247; y 199–310 | 112 px | 8 px per side |
| 75% | x 122–261; y 185–324 | 140 px | 6 px beyond each edge |
All five exports were 585 × 559 pixels. The visible mark stayed centered at x 191.5 and y 254.5. At 45%, the padded logo's 84-pixel width matched the tight source at 15% in our earlier run. At 60%, its 112-pixel width matched the tight source at 20%. At 75%, the visible square extended 6 pixels beyond each FRONT edge, just as the tight source did at 25%. This is an observed 3:1 slider ratio for these equal visible marks and 3:1 source widths; it is not a formula for arbitrary aspect ratios, blurred edges, or offset art.
Bar lengths represent the measured red widths on a common 140-pixel scale. The dashed bar is wider than the 128-pixel front panel.
How to correct your own padded logo
- Inspect the source file. Find the visible art's bounds inside the PNG. If the file is much larger than the art, decide whether you need the extra transparent space for a shadow or layout.
- Prefer a tight crop when possible. Trim empty transparent pixels around the visible art and reimport. This makes the Image size setting more useful and avoids spending slider range on invisible canvas.
- Keep intentional padding when needed. If you must retain it, start at a smaller Image size and increase while the visible artwork remains inside TORSO FRONT. For our centered 300-pixel file, 45% reproduced the 84-pixel logo that the cropped file made at 15%; your source may differ.
- Download and inspect the PNG. The panel guide is only an editor aid. Check the visible bounds in the saved 585 × 559 file. For a centered square, calculate one-side margin as (128 − visible width) ÷ 2. An 84-pixel mark has 22 pixels; a 140-pixel mark has −6.
- Test the exact saved file on a Block Avatar. Roblox recommends adding a Shirt to a Studio Block Avatar rig and setting ShirtTemplate before uploading. A flat pixel-fit check does not establish the 3D result.
Which choice is safer?
Crop when the transparent area is accidental and the art should fill more of the imported image. Keep padding when it protects a deliberate shadow or preserves alignment with other assets; then measure the saved visible edges. Recenter the art when padding is uneven: a larger slider setting can amplify an offset rather than fix it. The uneven-padding test shows that position problem separately.
Limit: This experiment used synthetic, centered, hard-edged red squares and a controlled pointer drag in headless Chrome. The exact 3:1 relationship belongs to this square geometry and editor run. We did not test text readability, a soft alpha shadow, physical touch, Studio appearance, or Marketplace acceptance.
Sources and reproducibility
- Roblox Creator Hub: Classic clothing — primary source for panel dimensions and the Studio test procedure.
- Avatar Shirt Maker editor — first-party October 14 import, slider, drag, export, and pixel-decoding test, compared with the October 13 tight-source run.
The project's audit folder retains both test scripts and JSON output. The five-row table, proportional visual, matching-width comparison, margin arithmetic, and correction workflow were independently produced for this page.