SynthMock
Black space is not always the same problem. Diagnose the source image, the screen crop and the surrounding scene separately so you fix the right layer.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Identify where the space lives
Start from Fold 180° and a near-frontal camera for the inner display, or Fold 0° for the cover. This makes it easier to see whether a margin belongs to the uploaded image or is part of the device’s physical bezel.
A dark strip outside the display is not repaired by stretching the app image. A strip inside the artwork may already be present in the screenshot. A partially folded display can also soften or darken through fold optics; compare the fully open or closed pose before changing sources.
| What you see | First check |
|---|---|
| Bars inside the app image | Open the original source file |
| Missing left/right interface | Compare source and screen proportions |
| Dark area beside the phone | Check scene framing and background |
| Softness only during folding | Compare Fold animation on and off |
Correct the source before the camera
Prepare the cover at 1291 × 1878 px and the inner artwork at 2670 × 1878 px, or use larger proportional files. Duo’s display compositor fills its screen surfaces; a mismatched screenshot may lose content at the edges.
- Open the source file outside the mockup and remove baked-in margins or an existing device frame.
- Rebuild the layout at the appropriate proportions instead of stretching its text and icons.
- Replace only the affected screen card.
- Inspect the repaired source at the corresponding closed or open fold endpoint.
- Return to the final camera angle and verify that the overall scene crop still has enough room.
Avoid compensating in the wrong control
Zoom changes the size of the device in the final canvas. It does not add missing UI back to an incorrectly cropped source. Likewise, increasing export resolution cannot reconstruct detail lost in a low-resolution screenshot.
If your wide interface cannot fit the cover without losing meaning, create a dedicated cover layout. Keep real bezel and rounded display edges intact. For an optics-related transition, decide whether to retain the Fold animation effect; turning it off preserves the physical fold angle.
Final pass
Before you call it finished
- The original source contains no unwanted margins.
- Its proportions match the intended Duo screen.
- Physical bezel and fold optics are not mistaken for source errors.
Make the next version yours.
Explore Duo templates ↗