Table of Contents
The mockup you see on screen is only as good as the design file that fed into it. A beautifully placed artwork on a crisp t-shirt template still looks like garbage if the source PNG is 600 pixels wide, has a visible white halo, or uses CMYK colors that shift on export. Most "mockup looks bad" complaints are actually "design file was bad" complaints hiding behind the mockup tool.
This tutorial sets a concrete spec for the files you feed into MockupForge: pixel dimensions, DPI, color mode, transparency, bleed, and the six mistakes that sink listings before they ever go live. Get this right once and you will stop troubleshooting blurry mockups forever.
File Format: What to Export From Your Editor
MockupForge accepts four upload formats: PNG, JPG, SVG, and WebP. You can bring files in by click, drag-and-drop, or Ctrl+V paste. Not all four are equal for POD work.
| Format | Transparency | Best For | Avoid When |
|---|---|---|---|
| PNG | Yes (alpha channel) | Raster artwork, illustrations, anything with transparency | Very large photographs (file size bloats) |
| SVG | Yes | Vector logos, typography, line art | Photoshop-rasterized work, embedded bitmaps inside SVG |
| WebP | Yes | Small file sizes, modern browsers | If your print provider cannot accept WebP upstream (most still want PNG/JPG) |
| JPG | No | Photos with no transparency needs | Any design meant to be cut out — JPG will fill the background with white |
For 90% of POD designs, the correct answer is PNG with transparency. Use SVG when your artwork is pure vector (a logo, a wordmark, a single-color illustration) because SVG scales infinitely and MockupForge renders it crisply at any zoom level. Use WebP only if you specifically need a smaller upload for slow connections; the export from MockupForge is always PNG anyway.
Pixel Dimensions: The Minimums You Cannot Ignore
A mockup exported at 2048×2048 pixels is only sharp if the source design is at least that resolution. Upscaling a 1000×1000 PNG to fill a 2048 canvas produces soft edges, blurred text, and visible pixelation when a shopper zooms in on a mobile screen.
Here is the floor for source design files:
- T-shirt, hoodie, tote, cap designs: minimum 2000×2000 px. Preferred 2500×2500 to leave room for scale-up.
- Mug designs: 2000×1200 px minimum (mugs print on a curved horizontal band, not a square).
- Phone-case designs: 1200×2400 px minimum to match the tall aspect ratio.
- Poster designs: 2400×3600 px minimum at 300 DPI for a 16×20 inch print.
- Sticker designs: 1500×1500 px minimum.
Whatever size you intend to print at, design at 2x. If your chest print is 12×14 inches at 300 DPI, that is 3600×4200 px. Designing at that size means your mockup exports look sharp, and your print provider gets a clean file. It also means you can later downscale, not upscale.
SVG files skip this entire conversation. Because they are vector, you can drop a logo SVG into MockupForge and it will stay sharp at any scale slider value, from 20% to 100%. If you design in Illustrator, Figma, or Affinity Designer, always keep the master file in vector and export a PNG raster only for tools that need it.
DPI and Color Mode
DPI (dots per inch) is a print-side concept. MockupForge does not care about DPI — it works in pixels on screen. But your print provider does, and the file you eventually send to print should be 300 DPI at the physical print size. So design at 300 DPI from the start, even if the mockup export itself only cares about pixel dimensions.
Color mode matters more than most sellers realize.
- RGB is the color mode of screens, browsers, and most POD digital print workflows. Use RGB.
- CMYK is for offset printing and four-color press work. If you export a design as CMYK and then upload it to a browser-based mockup tool, the colors will shift — typically darker and more muted — because the browser renders everything in RGB.
- Indexed / palette color (common in GIF exports) bands gradients and produces flat color breaks. Avoid.
A common symptom of wrong color mode: your red looks vivid in your design editor and muddy in the MockupForge preview. That is almost always a CMYK-to-RGB conversion. Switch the document to sRGB before exporting the PNG.
Transparency and the Alpha Channel
A transparent PNG is not the same as a white-background PNG saved with "transparency" unchecked. A proper transparent PNG has an alpha channel — an 8-bit mask that tells every pixel how opaque it is. MockupForge's smart auto-fit reads this alpha channel to detect the artwork's bounding box and center it on the product.
If your PNG does not have a real alpha channel, two things go wrong:
- The auto-fit engine cannot detect your artwork edges and may center the whole rectangular canvas instead of the actual design, leaving dead white space around the print.
- When you place the design on a colored product, a faint white or off-white halo remains around the artwork edges. Shooters call this a "ring." It reads as unprofessional.
If you inherited a design with a solid background, use MockupForge's built-in background remover instead of re-exporting from your editor. The tolerance slider runs from 2 to 60. Start at 8–12 for clean white backgrounds, 15–25 for off-white or cream, and never push past 40 or the tolerance eats into your artwork edges. Our tolerance settings guide walks through the exact dial positions for tricky backgrounds like neon gradients and dark charcoal.
Bleed and Safe Zone
Bleed is the extra margin of print that extends past the cut line. On a t-shirt, bleed does not apply the way it does on a business card — but the concept of a "safe zone" absolutely does.
For an adult t-shirt chest print, the print area is roughly 12×14 inches. The safe zone — where artwork will definitely appear on the final garment regardless of print alignment — is the inner 10×12 inches. Anything in the outer one-inch ring can be slightly cropped or shifted by the print provider's alignment.
Practical rules when designing:
- Keep important text, faces, and logos inside the safe zone. Do not let a slogan run all the way to the edge of the print file.
- Background colors or patterns can extend to the full print edge — those are meant to bleed, and slight shifts will not matter.
- For mugs, the safe zone is narrower than the print band. Curvature distorts the outer 5mm on each side. Keep key details centered.
- For stickers, add 1/16 inch of bleed beyond the die line so the cut does not nick the artwork.
When you place the design in MockupForge, the canvas drag and zoom controls let you check visually: zoom to 200%, inspect the edges of the artwork against the product shape, and make sure nothing critical is riding a seam or a fold. Use the Offset X and Offset Y sliders in 1-point increments to nudge into position.
The Six Common Mistakes That Sink Mockups
- Designing at 72 DPI. Screen resolution is fine for web previews but not for print. Bump to 300 DPI before export.
- Using JPG for transparent work. JPG has no alpha channel. If you need transparency, export PNG or WebP.
- Text below 14pt. Tiny text that looks crisp in your editor will blur on a printed garment. Keep minimum body text at 14pt at print size.
- No alpha channel, faked with white background. This produces the halo effect. Use the background remover or re-export with real transparency.
- Not naming files. A folder of
design1.png,design2.png,final.png,final-v2.pngis a future you's nightmare. Name by slug:autumn-mountain-03.png. - Ignoring the print provider's spec. Merch by Amazon, Printful, Printify, and Gelato each have slightly different file requirements. Read the spec of your chosen printer before you design the batch, not after.
Build a One-Page Spec and Stick to It
Print the following spec and tape it next to your desk. It is the source of truth for every design file you will upload this quarter:
1File spec card
Format: PNG transparent (or SVG for vector). Minimum 2000×2000 px. Color mode: sRGB. 300 DPI at print size. Text minimum 14pt. Safe zone: 10×12 in for adult tees. File name: {slug}-{product}-{version}.png.
When a new design comes in, run it through the card before it ever touches MockupForge. If it fails a checkbox, fix it in the design editor, not in the mockup tool. The mockup tool's job is presentation, not repair.
Once your files pass the spec, drop them into MockupForge and the auto-fit engine will handle the rest. If you need a refresher on the upload flow itself, our step-by-step t-shirt tutorial walks through every slider. For the marketplace-specific export choices (Etsy vs Amazon), read the transparent PNG export guide.
Ready to Create Your Mockup?
Open MockupForge — free, unlimited, and runs entirely in your browser. No sign-up required.
Open Mockup Generator