Free Online Mockup Generator

How to Create Your Mockup

1. Upload Background Image:

   Click the 1. Upload Background Image: button and select your main product or scene image (e.g., t-shirt, phone, poster).
2. Upload Artwork Image:

   Click the 2. Upload Artwork Image: button and select your design, logo, or graphic.
   Tip: Images with transparent backgrounds (like PNGs) work best.
3. Position & Basic Scale Artwork:

   Once both images are loaded: Click and drag the artwork on the preview canvas to move it. Use the Scale slider under “Artwork Adjustments” to resize the artwork. This is its base size before any mesh warping.
4. Adjust Artwork Appearance:

   Use the Opacity slider to make the artwork more or less transparent. Choose a Blend Mode (e.g., Multiply, Overlay) to change how the artwork interacts with the background. “Normal” is default.
5. Deform with Mesh (Optional):

   For warping artwork to fit curved or uneven surfaces: In “Artwork Mesh Deformation”, click Enable Mesh Deformation (button turns green). A grid with red handles appears on your artwork. Adjust Rows and Cols for the grid density, then click Apply Grid. The mesh will reset over the artwork. Click and drag the red handles to warp the artwork. Click Reset Mesh Points to revert the current mesh to a flat grid over the artwork. Click Disable Mesh Deformation when done or to turn it off. The deformation remains.

   If you drag the entire artwork (Step 3) or change its main Scale while mesh is active, the mesh will automatically re-align/reset to the artwork’s new state when you release the mouse or after the change.
6. Define Selection Area/Mask (Optional):

   To clip your artwork (meshed or not) to a custom shape: In “Selection Area (Mask)”, click Activate Selection Tool (button turns blue). Mesh handles (if active) will hide temporarily. On the canvas, click to place points. For curves, click and drag to create Bezier handles. Double-click (or click near the start) to close the path (min. 3 points). Artwork is now clipped. Use Undo Last Point or Clear All Areas as needed during drawing. Deactivate the tool to stop drawing. You can then click and drag existing path points or handles to edit the mask.
7. Add Effects (Optional):

   Drop Shadow: Adjust Dist, Angle, Blur, Opacity, and Color in the “Drop Shadow” section. Color Overlay: Use Opacity and Color in the “Color Overlay” section to tint the (masked and meshed) artwork.
8. Download Your Mockup:

   When satisfied, click Download Preview (PNG) to save the final image.
9. Tips & Notes:

   The status bar below the preview provides helpful messages. A magnifier appears automatically near your cursor for precise path or mesh point adjustments (when not dragging). This tool operates in your browser; progress is lost if you refresh or close the tab. Save frequently by downloading. The Order Editable PSD button is a demo feature.