EDITOR TEST · OCTOBER 8, 2026
Roblox Shirt Template Logo Off Center? Check Uneven PNG Padding
Check the invisible space on both sides of your source PNG. A logo can be centered by its file rectangle but still sit to one side on a Roblox shirt template. In our two-file test, the same red mark shifted 28 exported pixels right when we moved it within a 300 × 300 transparent source, even though we used the same Image size setting and the same drag.
This measures saved PNGs from this site's editor. It does not predict the 3D appearance of a Roblox avatar.
Why the visible mark moves
The image's draggable center belongs to its full rectangle, transparent pixels included. If a 100-pixel mark sits at x 100–199 in a 300-pixel source, its center matches the file center. Move that same mark to x 200–299 without changing the file size, and the visible center is now 100 source pixels to the right. Dragging the file to a target point carries that offset with it.
Roblox's Classic clothing guide identifies a 128 × 128 FRONT square on the Shirt template. In this editor's 585 × 559 Shirt export, the front guide spans x 128–255 and y 191–318. Those coordinates describe this editor's flat canvas; a Studio test is still needed for garment appearance.
Our two-file placement test
We generated two original 300 × 300 transparent PNGs. Each contained the same solid red 100 × 100 square. One square began at x 100; the other began at x 200. In each fresh editor run, we imported the file, set Image size to 15%, dragged the image from the canvas center toward the front guide center, downloaded the PNG, and counted red pixels. Both exports were 585 × 559, and both marks retained 784 solid red pixels after placement.
| Source mark within 300 × 300 PNG | Before drag: red bounds | After identical drag: red bounds |
|---|---|---|
| Centered: x 100–199, y 100–199 | x 279–305, y 266–292 | x 178–205, y 241–268 |
| Right-shifted: x 200–299, y 100–199 | x 307–333, y 266–292 | x 206–233, y 241–268 |
Equal file size, unequal visible position
Exported x 178–205
Exported x 206–233
Original schematic. Checkerboard means transparent pixels; the measurements come from decoded exports, not the drawing.
The horizontal difference was 28 pixels at both stages. This is about 22% of the front guide's 128-pixel width. After the drag, the centered mark had 50 pixels of space to the guide's left edge and 50 to its right. The shifted mark had 78 pixels on the left and only 22 on the right. Neither mark crossed the guide boundary in this test, but the second was visibly off center. Mark size and red pixel count did not change, so the experiment isolates position rather than scale.
Place the visible logo, not just its file box
- Inspect the PNG on a checkerboard. Compare the empty margin to the left and right of the visible mark. Do the same vertically. A centered file preview can hide unequal transparent space.
- Trim or rebalance its canvas. Crop transparent pixels to the mark, then add equal intentional margins if needed. Include any faint outline or shadow in what you treat as visible content.
- Reimport the corrected file. Choose Classic Shirt in the editor, choose the corrected PNG, and adjust Image size while looking at the visible mark inside TORSO FRONT. Slider percentages are relative to the whole source rectangle.
- Drag by eye, then inspect the export. Aim the visible mark near the front guide center at x 192, y 255. Download PNG and check the visible left and right margins. If one side is tighter, move the image and export again.
- Test the garment in Studio. Roblox recommends a Block Avatar rig with a Shirt object and ShirtTemplate property before upload. Use the exact exported image, because flat canvas placement alone does not verify the 3D result.
Quick diagnosis
| What you see | Useful next check |
|---|---|
| Same slider value, logo shifts sideways | Compare transparent margins in the two source files; equal outer dimensions do not imply equal visible centers. |
| Logo is centered but unexpectedly small | Trim large transparent borders, then use the size comparison. |
| Faint shadow touches the panel edge | Include the shadow in the visible bounds and leave more margin before exporting. |
| Flat export looks correct, avatar looks wrong | Check the exact file on a Studio Block Avatar and inspect the shirt from multiple angles. |
Test limit: We used hard-edged red squares and one editor scale setting. A soft shadow or partially transparent edge may require a different way to judge the visible boundary. We did not test a Roblox Studio rig or a Marketplace submission.
Sources and method
- Roblox Creator Hub: Classic clothing — primary source for the Shirt front-panel size and Studio test procedure.
- Avatar Shirt Maker editor — first-party October 8 import, drag, and Download PNG experiment with two newly generated source images.
The test script and decoded measurements are retained in the project audit folder. The controlled comparison, original schematic, margin calculation, and correction sequence were produced for this article.