How to use the online editor
Pick a mockup.
Drop in your design.
The online editor puts your design on a mockup right in your browser. No Photoshop, no downloading, nothing to install. It uses the same scenes as the PSD files. Prefer Photoshop? Here’s how to use mockups in Photoshop.
No Photoshop neededNothing gets uploadedFree to try
The editor. Your mockup on the left, the panel on the right. You work in the panel from the top down.
01Open
Open the editor
On a mockup page, look for the Edit online button, right next to Download PSD. Click it, and the editor opens with that mockup ready to go.
Not every mockup has the button yet. I’m moving them into the editor one by one, by hand, so new ones show up all the time.
For now the editor works on a computer, not on a phone.
02Your design
Add your design
Everything happens in the panel on the right, from the top down.
Click the empty box at the top of the panel and pick your file. You can also drag the file straight onto its place in the mockup, or paste a copied picture with Ctrl+V (Cmd+V on a Mac). PNG and JPG both work.
Click the empty box, drop your file on the mockup, or paste it.
03Fit
Fit it in its place
If your design has different proportions than its place on the mockup, part of it gets cut off. Drag the preview at the top of the panel to choose which part shows. Scale makes the design smaller or bigger in its place.
Next to Scale there are two small tools:
- Clear white makes the white of your design see-through. Handy for a logo saved on a white background.
- Frame shows only what’s inside the frame. Drag its sides on the preview.
The easiest way to avoid cutting is to save your design in the same proportions as its place on the mockup.
Drag the preview to choose what shows. Scale, Clear white and Frame sit right below.
04Colours
Match the colors
Under Colours you can change the colors of the scene: the background, the edges, the product itself. Pick the ones that go with your design.
What you can change depends on the mockup. A simple card may have one color, a box scene a few more.
05Several designs
More than one design
Some mockups have room for more than one design: two business cards, or a can and its box. Their names show above the preview. Click a name to work on that design.
Each one takes a file of its own. A place that’s still waiting for your design is outlined with dashes, so you can see at a glance what’s left.
Names above the preview. A dashed outline means that place still needs a file.
06Download
Download your image
Download image saves the picture on your computer. The ••• button next to it lets you choose the format and the size.
You can download for free. The image then has a watermark and is medium size, and you can still use it anywhere, even commercially. For a clean, full-size image there’s full access: 7 days for $6 or 30 days for $12. One payment, no subscription. More in the FAQ.
07Privacy
Your files stay on your computer
Nothing gets uploaded. Your design stays on your computer, and the picture is made right there, in your browser, like in a program on your own machine.
Handy when you’re working on something for a client that isn’t public yet.
08Adjustments
Fine-tune it
Adjustments are for fine-tuning. Every mockup opens set the way I made it, so you only need them when something looks off. Not every mockup has every setting. It depends on how it was built.
Blend. Design blend and Colour blend set how your design, or the colors of the scene, mix with the surface under them. In Photoshop terms, these are blend modes.
- Normal is Multiply. Natural colors, sometimes a little faded and flat.
- Deeper is Linear Burn. Richer colors and more contrast, but dark colors can sink into black.
On some mockups the difference is small, on others it’s big. Just try both.
Highlights. The light on the surface: sheen, reflections, the grain of paper or fabric, laid over your design. On some designs 100% is a bit too strong. Turn it down until it looks right.
Contrast. How much punch the picture gets: Off, Normal or Strong. Every mockup starts at Normal. Applies to lets you choose where the contrast goes: on the whole scene, or only on your design.
Adjustments. The same things you would change in the Mockup group of the PSD.
09Problems
Something looks wrong?
Every mockup in the editor is a PSD I rebuilt by hand, one by one. I’m sure a few mistakes slipped through.
If something looks wrong, write to me. Send the link to the mockup and a screenshot. “It doesn’t work” helps a lot less 🙂 If the problem is on my side, I’ll fix it, and the fix helps everyone who uses that mockup after you.