Log in
Get started

Your first mockup

Showoff puts your screenshots on real devices in 3D. All you need is a current browser and an account. No design tool, no 3D skills, nothing to install.

Create an account#

  1. Sign up under Create account.
  2. Create an organization if you do not have one yet. You do that in the account menu at the top right. Your projects live in the organization, even if you work alone.
  3. You land on “Meine Projekte”, the overview of your organization.

Create a project#

On “Meine Projekte”, click “Neues Projekt” (new project). The dialog asks how you want to start.

Choice What you get
Vorlage wählen A finished scene to start from, see Starting from a template.
Standbild An empty stage for a still image. No timeline, no motion, no sound.
Film An empty stage with a timeline. Devices move, the camera travels, sound runs underneath.

Heads up

Still or film is decided when you create the project and cannot be switched later. A still exports an image, a film exports a video. If you need both, create two projects.

Add a device#

  1. In the editor, choose EinsetzenGerät … at the top left.
  2. Narrow it down by type on the left or search at the top, for example for Pixel.
  3. The right side shows the device, its dimensions and the recommended screenshot size. If it comes in several colors or bands, pick one right there.
  4. Click the button with the device’s name at the bottom right, for example “iPhone 17 Pro einsetzen”. Double-clicking the tile does the same.

Put your screenshot on it#

  1. Click the device. On the right, in the “Objekt” tab, you find the “Screenshot” section.
  2. Click “Hinzufügen” (add). The media library opens with the device as its target.
  3. Drag a file in or pick one through “Dateien”. It goes into the project’s library and straight onto the display.

Above the section you see the recommended size, for the iPhone 17 Pro that is 1206 × 2622 px. Other sizes work too. If the aspect ratio does not match, the image is fitted rather than cropped. More under Screens and media.

Set up the scene#

Turn the device, move the camera, pick a background. How the editor is laid out is explained in The editor at a glance. Colors, light and shadow are covered in Background, light and shadow.

Export#

Click “Exportieren” at the top right. For a still you pick PNG or JPG and the resolution, for a film the video format and frame rate. Rendering happens in your browser and the file lands directly on your computer. The details are in Exporting images and Exporting video.

Note

There is nothing to save. Every change goes to the server immediately, and the top of the right-hand column then says “Gespeichert” (saved).

And then?#

Devices Every model, color and band, and how to place them. Animation Devices fly in, float and fly back out. Templates Finished scenes that only need your screen. Teamwork Invite people and work on one scene at the same time.

Related topics