Static mockup editor guides

Photo mockups in the browser: drop a design in, export a picture.

Static mockup editor

Photo mockups in the browser: drop a design in, export a picture.

Open the editor
The Composition menu with the 1:1 preset selected, the 1:1 ratio button above it, the phone on the canvas and the Copy and Export buttons beside itThe Composition menu with the 1:1 preset selected, the 1:1 ratio button above it, the phone on the canvas and the Copy and Export buttons beside itChange canvas aspect ratioSwitch your mockup from a landscape composition to a square canvas in three simple steps.1 minA textless green ring design on the iPhone screen, with its thumbnail filled in the Media section of the right panelA textless green ring design on the iPhone screen, with its thumbnail filled in the Media section of the right panelCreate your first mockupChoose a scene, add your design, and download your first mockup as a PNG.2 minThe Linear color picker next to the canvas, where a blue-to-orange gradient has handles on the backdropThe Linear color picker next to the canvas, where a blue-to-orange gradient has handles on the backdropPaint a gradient backgroundTurn a flat backdrop into a gradient. Switch the fill to Linear, set the end color and drag the handles on the canvas.2 minThe open Category menu with Branding Mockups and Devices Mockups, next to the search field and the Free only switchThe open Category menu with Branding Mockups and Devices Mockups, next to the search field and the Free only switchFind the right mockupSearch 3,800+ scenes, narrow them by category, and show only the free ones.2 minA phone with an orange frame and a design on its screen, with three color swatches above the canvasA phone with an orange frame and a design on its screen, with three color swatches above the canvasChange the mockup colorSwitch a phone to another color version with the swatches above the canvas, then add your design.1 minThe EU and US switch above the canvas with US selected, next to the 4:3 button and the right panelThe EU and US switch above the canvas with US selected, next to the 4:3 button and the right panelSwitch between EU and US sizesSome print mockups come in regional sizes. Switch between EU and US, then add a design that fits the size you chose.1 minThe Adjust media window with the Tile tab selected and a repeating pattern in its preview, over a billboard that already shows the patternThe Adjust media window with the Tile tab selected and a repeating pattern in its preview, over a billboard that already shows the patternTile a pattern on a screenRepeat a small image across a whole surface instead of stretching it. Add the picture, switch to the Tile tab and set the size of each repeat.2 minThe Effects section with Grain set to 0.08 and Vignette set to 0.7, beside a grainy orange scene with darker cornersThe Effects section with Grain set to 0.08 and Vignette set to 0.7, beside a grainy orange scene with darker cornersAdd grain and a vignetteGive a clean render a film look. Add grain for texture and a vignette to darken the edges, compare the result with the original, and reset it in one click.2 minThe laptop mockup on a pink background, beside the Change color row showing the hex F2C4B8The laptop mockup on a pink background, beside the Change color row showing the hex F2C4B8Recolor the backgroundMatch the backdrop of your mockup to your brand with a hex color, and reset it with one click.1 minA candle mockup with a small focus ring on the flame: the flame and rim are sharp, the leaf, label and table are soft, and the Blur row reads 120A candle mockup with a small focus ring on the flame: the flame and rim are sharp, the leaf, label and table are soft, and the Blur row reads 120Blur with a focus pointKeep one spot of your mockup sharp and blur the rest for depth. Place the focus, drag it onto your subject and raise the blur.2 minThe Curves graph bent into an S shape with two added points, beside the high-contrast watch scene it was applied toThe Curves graph bent into an S shape with two added points, beside the high-contrast watch scene it was applied toTune tones with CurvesBrighten, darken or add contrast with the Curves graph. Add points to the line, drag them, and reset the graph when you want to start over.2 minThe Media section with two design thumbnails, next to the envelope mockup showing the first designThe Media section with two design thumbnails, next to the envelope mockup showing the first designAdd designs to several screensPut a different design on each screen of a mockup, replace one later, or take a design off to bring back the empty screen.2 minThe Color balance panel on the Highlights tab next to a mockup whose light areas turned warm cream while the denim stayed blueThe Color balance panel on the Highlights tab next to a mockup whose light areas turned warm cream while the denim stayed blueBalance colors by toneWarm the highlights and cool the shadows with three sliders. Color balance tints each tone range of your mockup on its own.2 minA mailer with purple and aqua rings on a red-orange background after Hue 60 and Saturation 40, beside the Hue / Saturation panelA mailer with purple and aqua rings on a red-orange background after Hue 60 and Saturation 40, beside the Hue / Saturation panelAdjust hue and saturationShift every color in your mockup, make it more or less vivid, or tint the whole picture in one hue.2 minThe Export Image window with PSD selected over a matchbox mockupThe Export Image window with PSD selected over a matchbox mockupExport a layered PSDDownload your mockup as a layered PSD to keep editing in Photoshop, or as an SVG for vector work.2 minThe Export Video dialog with MP4 selected, over two iPad screensThe Export Video dialog with MP4 selected, over two iPad screensPlay a video on a screenPut a video clip on a device screen, scrub the timeline, and export the result as an MP4 or WebM video.2 minThe Adjust media window with the design zoomed to 150% inside the screen frame, with the rotate buttons and the Scale fieldThe Adjust media window with the design zoomed to 150% inside the screen frame, with the rotate buttons and the Scale fieldCrop, rotate and scale mediaZoom in on your design, move it inside the screen, and turn it a quarter turn, all from the Adjust media window.2 minAdjust media next to Adjust Backdrop with Paddings, Round Corners, Shadow and the wallpaper presetsAdjust media next to Adjust Backdrop with Paddings, Round Corners, Shadow and the wallpaper presetsFit a design on a backdropShow your whole design on the screen with padding, rounded corners, a shadow and a wallpaper behind it.2 min