Transparent mockups: useful everywhere except app stores

A mockup exported with a transparent background can be dropped onto any page, any slide, any coloured section, and it will look like it belongs. It is the most reusable asset you can produce — and it is also the format both app stores refuse.

Where transparency earns its keep

Website heroes where the section background is a gradient defined in CSS. Presentation slides that change colour between decks. Marketing pages where the same device image appears over three different sections. Email, where you cannot control the surrounding background. In all of these, a transparent PNG or WebP means one export instead of one per background, and it survives a rebrand without re-rendering.

The shadow problem

A contact shadow is part of the background, not the device, so exporting with alpha either drops the shadow or bakes a semi-transparent smudge that will look wrong on a dark background. Two workable answers: export with the shadow included in the alpha and only place the image on backgrounds close in value to the one you rendered against, or export without a shadow and add one in CSS. For anything reused across very different backgrounds, the second is safer.

Never send alpha to a store

App Store screenshots and the Play feature graphic must have no alpha channel. An otherwise perfect asset with a transparent corner will fail validation, and the error message is not always specific enough to make the cause obvious. Keep two exports of every asset: a transparent master for your own surfaces, and a flattened version for the stores.