Transparente Mockups: überall nützlich außer in App-Stores

Ein Mockup mit transparentem Hintergrund lässt sich auf jede Seite, jede Folie, jeden farbigen Abschnitt legen und sieht überall zugehörig aus. Es ist das wiederverwendbarste Element, das du produzieren kannst — und zugleich das Format, das beide App-Stores ablehnen.

Wo Transparenz sich auszahlt

Website-Heroes, deren Abschnittshintergrund im CSS definiert ist. Präsentationsfolien, die von Deck zu Deck die Farbe wechseln. Marketingseiten, auf denen dasselbe Gerätebild in drei Abschnitten erscheint. E-Mails, wo du den Hintergrund nicht kontrollierst. In all dem bedeutet ein transparentes PNG oder WebP einen Export statt einen pro Hintergrund — und es übersteht einen Rebrand ohne neues Rendering.

Das Schattenproblem

Ein Kontaktschatten gehört zum Hintergrund, nicht zum Gerät. Beim Export mit Alpha fällt er entweder weg oder wird als halbtransparenter Fleck eingebacken, der auf dunklem Grund falsch aussieht. Zwei brauchbare Antworten: den Schatten in den Alphakanal aufnehmen und das Bild nur auf Hintergründen nahe dem Renderwert platzieren, oder ohne Schatten exportieren und ihn per CSS ergänzen. Für stark wechselnde Hintergründe ist Letzteres sicherer.

Niemals Alpha an einen Store schicken

App-Store-Screenshots und die Play-Feature-Grafik dürfen keinen Alphakanal haben. Ein sonst perfektes Element scheitert an einer transparenten Ecke, und die Fehlermeldung nennt die Ursache nicht immer deutlich. Halte zwei Exporte pro Element vor: einen transparenten Master für eigene Flächen und eine flache Fassung für die Stores.