Is the responsive mockup generator free?

One device on the canvas is free, flat devices included. Several devices on one canvas, the sets and 3D are part of Pro (£45 a year or £5 a month), and every new account gets a free Pro week to try them.

Do I need a separate mobile screenshot?

No. Capture the site from its address and DudeShots fetches the phone layout of that page for the phone in the set. If you drop in your own screenshots, give it a desktop one and a mobile one and each device picks the one that fits.

Which devices can go in a set?

Any of them: MacBooks, monitors, browser windows, iPads and Galaxy tablets, iPhones, Galaxy and Pixel phones, smartwatches, and bare screenshots with no device. Add them one by one under Layers, or start from a set.

Can I change which device is in front?

Yes. Layers lists them front at the top: drag one up or down, or use its arrows. Bring to front and Send to back are in Layout too.

Can I move all the devices together?

Yes. Select all in Layout (or Ctrl-click several), then drag to turn them together, right-drag to move them and scroll to zoom.

Responsive mockup generator

Show your site on a laptop, a tablet and a phone in one picture, each device with its own layout, then style the backdrop and export.

Make a responsive mockup See pricing

Free to start. No signup to try. Nothing stamped on your exports.

The Marram restaurant site on a 3D MacBook, an iPad and a phone, the phone showing the mobile layout, on a dark olive aurora — Laptop, tablet and phone in 3D on a dark olive aurora. Made in DudeShots from captures of marram.kitchen.

What the responsive mockup generator does

A responsive mockup shows one site the way people meet it: on a laptop at work, a tablet on the sofa and a phone on the bus. Put all three in one picture and a client, a case study or a landing page sees at a glance that it works everywhere.

In DudeShots, switch Device to Several, or pick one of 26 ready-made sets: laptop and phone, the whole desk, three phones, tablets, phone and watch, browser windows. Each device takes the screenshot that suits its shape, and when you captured the page from its address, the phone gets the real mobile layout of that page.

Layers lists every device, front at the top. Tap one to change its model or its shot, drag it up or down to change what sits in front, and arrange the lot with Row, Hero, Fan, Turned in or Cascade.

Laptops, phones, desks and watches

The Countroom stock app on a Studio Display, a MacBook and an iPhone on a pale mint studio backdrop, the phone showing the app's mobile layout — The whole desk: monitor, laptop and phone, each showing the layout that suits it.

The Holm & Vester architects' site in a browser window with the phone layout on a phone in front, on a rust blueprint grid — Browser and phone on a blueprint grid.

The Grist training app on a 3D iPhone with an Apple Watch beside it showing a rest timer, on a deep red horizon backdrop — Phone and watch: the app and its wrist screen together.

How to use the responsive mockup generator

01
Add your screenshots
Drop in a desktop and a mobile screenshot, or capture the site from its address.
02
Pick a set
Laptop and phone, the whole desk, phones, tablets or a watch, flat or 3D. Or build your own with Several.
03
Export
Pick a backdrop and a size, then download one picture with every device in it.