EDITOR TEST · OCTOBER 7, 2026
Why a Logo Looks Tiny on a Roblox Shirt Template
Crop the invisible transparent border around your logo before importing it. This editor scales the whole PNG rectangle, including empty pixels. In our export test, identical 100 × 100 red marks became 84 × 84 and 28 × 28 visible pixels at the same 15% Image size setting: the smaller one came from a 300 × 300 PNG with transparent padding.
These are exported PNG measurements from this site's Classic Shirt editor. They do not establish how a shirt appears on a Roblox avatar.
What invisible padding changes
A PNG can be transparent and still have a large width and height. A logo may fill a 100 × 100 file or occupy just the middle 100 × 100 pixels of a 300 × 300 file. Both show the same original mark, but the second contains a 100-pixel invisible border on every side. Here, the Image size control scales the complete imported rectangle. It does not find the visible artwork and resize only that part.
Roblox's Classic clothing guide specifies a 128 × 128 FRONT square for a Classic Shirt. The guide in this editor spans x 128–255 and y 191–318 on its 585 × 559 PNG. Keep the visible logo inside that square, then inspect the downloaded file. The marked guide itself is not part of the export.
Our two-file export test
We drew a solid red 100 × 100 square. For the tight file, the image was 100 × 100. For the padded file, we placed the same square at x 100–199 and y 100–199 on a transparent 300 × 300 image. We imported each through Choose image, set Image size to 15%, dragged the image center from the whole-canvas center toward the Shirt front center, clicked Download PNG, and decoded the saved red pixels. Both exports measured 585 × 559.
| Source PNG | After import, before drag | After same drag toward front |
|---|---|---|
| 100 × 100, no border | x 251–333; y 238–320 | x 150–233; y 213–296; visible mark 84 × 84 |
| 300 × 300, 100-pixel transparent border | x 279–305; y 266–292 | x 178–205; y 241–268; visible mark 28 × 28 |
Same mark, different visible size
84-pixel exported width
28-pixel exported width
The checkerboard stands for transparent source pixels. The boxes compare measured width proportionally; they are not a Roblox Studio preview.
The tight mark was three times as wide after export. Its measured red area was 7,056 pixels; the padded mark's was 784 pixels, nine times less. This follows from the source geometry: the visible square fills all of a 100-pixel-wide source but only one-third of a 300-pixel-wide source. The 15% slider value alone cannot tell you how large the visible art will be.
The drag placed both visible marks within the Shirt front guide. The tight mark left 22 pixels to the guide's left edge and 22 to its right; the padded mark left 50 and 50. Transparent padding therefore gives a tiny, centered mark in this symmetric example. An off-center mark inside its source PNG can also appear shifted after import.
Fix a tiny imported logo
- Inspect the source file, not just the preview. Open it on a checkerboard background and look for empty pixels around the visible mark. Check all four sides.
- Trim the transparent canvas. Use your image editor's crop-to-content or trim-transparent-pixels command. Leave a small intentional breathing margin for shadows and outlines, but remove large empty borders.
- Reimport the cropped PNG. In the Shirt editor, choose Classic Shirt, use Choose image, and set Image size according to what you can see inside TORSO FRONT. Our 15% result is a test setting, not a universal target.
- Move the visible mark onto the front. Drag it toward the front-panel center near x 192, y 255. Confirm its visible edges stay inside x 128–255 and y 191–318. See the logo placement measurements for the full coordinate method.
- Download, inspect, and test. Check the 585 × 559 PNG for size, transparency, and placement. Then follow Roblox's Block Avatar test procedure in Studio before uploading or selling the Shirt.
If cropping is not enough
| What you see | Next check |
|---|---|
| Logo remains tiny after reimport | Confirm you saved the cropped copy and selected that file. Inspect its pixel dimensions and visible edges. |
| Logo is large but off center | Look for unequal transparent margins in the source; then drag using the visible mark, not the outer file bounds. |
| Outline or shadow crosses the front edge | Treat the shadow as part of the visible artwork when checking margins. Reduce Image size and reposition. |
| PNG looks right, avatar does not | Run Roblox's Studio Shirt test on a Block Avatar. Flat pixel placement does not prove the 3D garment result. |
Test limit: the experiment used a solid square and symmetric padding in the browser editor. Other source shapes and different shadow softness can change the exact visible bounds. We did not test a Studio rig or Marketplace submission.
Sources and method
- Roblox Creator Hub: Classic clothing — primary source for Classic Shirt panel sizes and Studio testing.
- Avatar Shirt Maker editor — first-party October 7 import, scale, drag, and Download PNG test using two original red-square source images.
The reproducible test and decoded measurements are retained in the project audit folder. The paired-source experiment, proportional comparison, area calculation, and repair steps are original material created for this guide.