Mockups

Place your design onto a real photo (a poster on a wall, a record sleeve on a table, a shirt, a phone screen) and have it bend to the surface and pick up the photo's light and texture. The whole thing runs in your browser, and the placement is plain geometry and image math, so the same settings always give the same result.

Opening the mockup tool

In the Studio, click the shirt icon. It appears in two places, both labelled place artwork on a photo:

in the top bar, next to the project name
at the end of the floating toolbar at the bottom of the canvas

The place artwork window opens and renders your current page as the artwork. This takes a moment on heavy pages, so you may briefly see preparing your design....

Note: The mockup tool needs WebGL2, which every current desktop browser supports. If yours doesn't, the window says artwork placement is unavailable.

Step 1: choose a photo

You have two options:

upload a photo to place your artwork on: pick any image from your device. A wall, a storefront, a laptop, a folded flyer on a desk, anything with a flat or gently curved surface.
Pick from the catalog: below the upload button, Bitgrain shows a grid of ready-made mockup photos. Click one to use it. Catalog photos come with their surface already marked out.

Choose a photo where the surface is clearly visible, well lit and not heavily blocked by other objects. The better the surface reads as a four-sided shape, the better the automatic detection works.

Step 2: surface detection

As soon as you pick a photo, Bitgrain looks for a four-sided surface in it. It finds strong edges and straight lines in the photo, then picks the combination of four lines that best forms a plausible quad.

If it finds one, the four corners snap onto it and the message under the photo says found a surface, drag any dot to adjust it. hold shift to keep an edge straight.
If it can't, the corners start in a square in the middle of the photo and the message says could not find a surface here, drag the four dots onto its corners.

For catalog photos the saved surface is used first, then detection runs on top of it. Detection is a starting point, not a final answer, so always check the corners.

Step 3: adjust the quad

Your artwork is drawn inside the four corner dots with full perspective. Drag any dot to move that corner.

Zoomed corner view: while you drag, a magnified view of the area around the active corner helps you place it on the exact pixel.
Hold Shift while dragging to slide the corner along its current edge, which keeps that edge straight.
Snap to edges: when on, corners are pulled toward nearby edges in the photo, such as the rim of a frame or the edge of a page.

A row of buttons sits above the settings on the right:

Button	What it does
find the surface again	Runs detection again on the photo. Useful after you have dragged the corners somewhere odd.
snap corners to edges in the photo	Toggles edge snapping. On by default.
show perspective guides	Draws guide lines toward the quad's vanishing points, so you can check the perspective against lines in the photo.
rotate artwork a quarter turn	Rotates the artwork 90 degrees inside the quad.
mirror artwork left to right	Flips the artwork horizontally.
mirror artwork top to bottom	Flips the artwork vertically.

If the artwork looks sideways or upside down after detection, rotate it here rather than dragging the corners around.

Choosing what to place

Under place you choose the artwork:

Option	What it uses
whole design	The entire active page. This is the default.
Selected layer (shows the layer's name)	Just the layer you had selected on the canvas when you opened the tool. Greyed out if nothing was selected.
an image	An image file from your device, for placing something that isn't in the Studio.

Placing a single layer is handy for putting just a logo on a mug, or just the record label on a vinyl photo, without the page background.

Shading, displacement and grain

These settings are what make the artwork look printed on the surface rather than pasted over it.

Setting	Range	Default	What it does
keep artwork proportions	on / off	off	When on, the artwork fits inside the quad without stretching. When off, it fills the quad exactly.
surface shading	0 to 100%	85%	How much of the photo's light and shadow falls on the artwork. Folds, wrinkles and uneven lighting show through. At 0% the artwork looks flat.
ink opacity	0 to 100%	100%	How solid the artwork is. Lower values let the surface color and texture show through, like thin ink on paper.
surface follow	0 to 100%	15%	How much the artwork bends with bumps and folds in the surface. Higher values make it follow fabric creases or a crumpled page.
follow detail	1 to 16	3	The scale of detail that surface follow reacts to. Low values follow fine texture, high values follow broad folds.
edge bleed	0 to 4	0	Softens the artwork slightly, like ink spreading into paper.
grain	0 to 40%	5%	Adds fine noise over the artwork so it matches the grain of the photo.

Shading works by comparing each point of the surface to the surface's average brightness. Darker parts of the photo darken the artwork and brighter parts lighten it, so a poster on a wall keeps the wall's lighting falloff.

Tip: For fabric, raise surface follow to around 30 to 50% and follow detail to 6 or more, then drop ink opacity a touch. For glossy screens and glass, turn surface shading down so reflections don't muddy the artwork.

Output

When you're happy, choose one of the two buttons at the bottom right:

add as page: adds the finished mockup to your project as a new page named "mockup", placed to the right of your existing pages. The page is the size of the photo. From there you can add text on top or export it along with the rest of the project.
png: downloads the mockup straight away as bitgrain-mockup.png. On Pro it comes out at the photo's full resolution. On the free plan it carries the small bitgrain.app watermark and is scaled down so the long edge is at most 1500 pixels, like every other free export.

add as page keeps the photo's full resolution inside your project on every plan. The watermark and 1500 pixel cap are applied later, when you export the project from the studio on the free plan.

Use the back arrow in the top left (pick another photo) to try the same artwork on a different photo without losing your settings.

Tips for good mockups

Use photos at least as large as the size you want to post. The mockup is built at the photo's own resolution, and free downloads are then capped at 1500 pixels.
Photos taken straight on, or at a gentle angle, look more natural than extreme angles.
If your design has a solid background and the surface is a colored object (a shirt), place just the artwork layer instead of the whole page.
Add a little grain and a small edge bleed when the photo itself is grainy. A perfectly clean design on a noisy photo is the giveaway of a fake mockup.
Combine with the print finish and halftone effects on the artwork first for a printed look.