PNG-Icons mit transparentem Hintergrund: ein Werbebanner gestalten

Lade das kostenlose Set mit 48 Icons herunter

Das Set enthält Objekte zu Reisen, Technik, Essen, Finanzen, Bildung, Sport und Gesundheit. Jedes liegt als separate PNG-Datei mit transparentem Hintergrund vor. Wähle zuerst ein Objekt, das zum Angebot passt: ein Flugzeug für Reisen, eine Kamera für Fotos oder eine Geldbörse für Finanzen.

Kostenloses Set auf Yandex Disk öffnen. Der ursprüngliche Beitrag steht im Telegram-Kanal CreoPrompt. Die Materialien sind öffentlich; du brauchst das vollständige Paket dafür nicht zu kaufen.

Beginne mit Angebot und Format

Notiere vor der Hintergrundwahl, was Leser verstehen sollen. Zum Beispiel „Fotoshooting für deine Marke“ oder „Wochenendreisen“. Ergänze eine relevante Angabe: Ort, Datum oder Leistungsumfang. Lege dann die gewünschte Handlung fest: Seite öffnen, Nachricht senden oder buchen.

Erstelle das Dokument in der Größe des Anzeigenplatzes. Zum Üben eignet sich ein Quadrat mit 1080 × 1080 Pixeln. Prüfe vor der Veröffentlichung die Plattformvorgaben und Bereiche, die von Bedienelementen verdeckt werden. Passe die Anordnung für jedes Format an, statt das Layout nur zu strecken.

Platziere die PNG-Datei ohne zusätzlichen Hintergrund

In Photoshop kannst du die PNG-Datei über „Platzieren und einbetten“ hinzufügen, in Figma auf die Arbeitsfläche ziehen. Die Transparenz bleibt erhalten. Eine weiße Fläche in der Cloud-Vorschau bedeutet nicht unbedingt, dass die Originaldatei einen weißen Hintergrund hat. Prüfe die heruntergeladene PNG-Datei auf einer farbigen Fläche.

Gib dem Objekt zunächst etwa die Hälfte des freien Raums und dem Text die andere Hälfte. Das ist ein Ausgangspunkt, keine feste Regel. Ein detailliertes Objekt kann verkleinert wie ein Fleck wirken. Vergrößere es dann oder wähle ein einfacheres.

Baue eine Hierarchie auf: Überschrift, Detail, Handlung

1. Setze eine große Überschrift in den freien Bereich. Zwei bis drei Zeilen sind sinnvoll, sofern der Inhalt verständlich bleibt.
2. Ergänze das Detail in kleinerer, gut lesbarer Schrift, die nicht mit der Überschrift konkurriert.
3. Gib der Handlung eine eigene Zeile oder Fläche. Bei einem statischen Banner ist dies ein visueller Hinweis, keine interaktive Schaltfläche.
4. Lass Abstand zwischen Objekt und Text. Nahe Kanten, Lichtreflexe und Buchstaben können unbeabsichtigt zusammenstoßen.

3D-Icons enthalten bereits Licht, Schatten und Farben. Beginne mit einem einfarbigen Hintergrund und einer Schriftfamilie. Texturen, Leuchteffekte und dekorative Schrift kannst du später ergänzen, wenn sie dem Layout helfen. Zu viele Effekte erschweren das Lesen.

Stimme Farbe und Licht ab

Nutze eine Nebenfarbe des Objekts für Hintergrund oder Akzentfläche; der Text muss kontrastreich bleiben. Ein warmes Icon kann auf einem ruhigen cremefarbenen Hintergrund wirken, ein dunkler Hintergrund betont helle Details. Vergleiche beide Varianten im gleichen Layout.

Füge nicht automatisch einen weiteren großen Schlagschatten hinzu. Das Original kann bereits einen enthalten. Prüfe zuerst den vorhandenen Schatten und entscheide dann, ob mehr Kontakt zur Oberfläche nötig ist.

Prüfe das Banner in der tatsächlichen Ansichtsgröße

Verkleinere das Layout auf seine voraussichtliche Größe im Feed. Thema, Angebot und Handlung sollten in wenigen Sekunden erkennbar sein. Dominiert das dekorative Objekt, verkleinere es, vergrößere den Text oder entferne Details.

Prüfe vor dem Export Rechtschreibung, Ränder und Kantenqualität. Vergrößere das Original-Icon nicht um ein Vielfaches: Transparenz verhindert keinen Qualitätsverlust. Speichere ein bearbeitbares Projekt für spätere Formatanpassungen.

Lies anschließend, wie du einen Hintergrund auswählst und Text lesbar hältst. Alle drei öffentlichen Sets findest du unter kostenlose Materialien.