Bevor wir ins Detail gehen, ein Hinweis zum Kontext: Beim Surfen auf manchen Websites können Sie auf Datenschutz- und Cookie-Hinweise stoßen (beispielsweise werden in beliebten Foren Einwilligungsmeldungen angezeigt). Dies ist für den technischen Prozess, den Sie gleich durchführen, nicht relevant, aber es ist wichtig zu wissen, dass diese Websites oft Ratschläge mehrerer Benutzer zusammenfassen. Hier finden Sie jedoch einen umfassenden und verständlichen Leitfaden mit bewährten Richtlinien, um häufige Fehler zu vermeiden und erfolgreich zu sein. Scharfe, leichte PNGs, bereit für das Web oder die App.
Der Export hochwertiger PNGs erfordert eine ausgewogene Balance zwischen Planung (Pixelgröße, Raster und Farbe), der Wahl der Ausgabemethode und schnellen Kontrollen. Wenn Sie die oben genannten Richtlinien befolgen, werden Ihre Assets scharf, mit perfekter Transparenz und für jede Umgebung geeignet sein, von der Landingpage bis zur mobilen App. Dabei bleibt Bildtreue und angemessenes Gewicht.
Was Sie in Illustrator vor dem Export vorbereiten müssen
Die Qualität eines PNG-Bildes entscheidet sich nicht erst beim Export, sondern beginnt bereits im Dokument selbst. Je besser Sie die Grundlinie festlegen, desto weniger Überraschungen gibt es später. Ziel ist es, dass Ihre Vektorgrafiken in der richtigen Größe und ohne Verschiebungen, die Geisterbilder oder Lichthöfe erzeugen, gerastert werden. Dazu müssen Sie zunächst die Leinwand quadrieren. Erstellen oder passen Sie das Dokument mit einem Zeichenfläche in Pixeln genau auf die endgültige Größe, die Sie benötigen (z. B. 1200 × 628 px).
Aktivieren Sie die entsprechende Ansicht: Gehen Sie zu Ansicht > Pixelvorschau. In dieser Ansicht können Sie überprüfen, wie Ihr Rasterdesign aussehen wird. Dies ist sehr nützlich, um unscharfe Kanten an Symbolen und dünnen Linien zu erkennen. Wenn Sie eine merkwürdige Unschärfe sehen, liegt es wahrscheinlich daran, dass ein Element mit Dezimalkoordinaten oder mit Maßangaben positioniert ist, die nicht auf ganze Pixel gerundet werden. Verwenden Sie in diesen Fällen die Option „An Pixelraster ausrichten“, um die Konturen fallen auf ganze Pixel und vermeiden Sie die typische 1-Pixel-Unschärfe.
Überprüfen Sie die Farbe: Arbeiten Sie bei PNGs für Bildschirme im RGB-Farbraum. Mit Dokument > Farbmodus > RGB stellen Sie sicher, dass Farben im Web und auf Geräten korrekt dargestellt werden. Wenn Sie mit CMYK gearbeitet haben, bemerken Sie möglicherweise eine Veränderung der Sättigung. Nutzen Sie diese Möglichkeit, um die Farbtöne noch im Vektorformat anzupassen. Aktivieren Sie in der exportierten Datei die Konvertierung in sRGB, sofern diese Option verfügbar ist, da sRGB ist der Standardfarbraum des Webs und reduziert Unterschiede zwischen Browsern und Systemen.
Überprüfen Sie die Effektauflösung: Wenn Sie Schatten, Unschärfe oder Glühen verwenden, wählen Sie „Effekt > Dokument-Rastereffekt-Einstellungen“. Der hier eingestellte Wert beeinflusst die Darstellung dieser Effekte bei der Konvertierung in eine Bitmap. Für Webinhalte sind 72–150 dpi in der Regel ausreichend; für Material, das auch gedruckt wird, oder wenn Sie maximale Detailschärfe wünschen, erhöhen Sie die Auflösung auf bis zu 300 dpi. Je höher die dpi-Zahl, desto stärker der Effekt. Wählen Sie also mit Bedacht; wichtig ist, dass die Effekte mit ausreichender Dichte berechnet werden damit sie beim Exportieren nicht „kaputtgehen“. Wenn Sie mit intensiver Rasterung arbeiten, ist es hilfreich, Anleitungen zum Erstellen optimierter PNGs in Rasterprogrammen wie Photoshop zu konsultieren, um Ergebnisse und Prozesse zu vergleichen.
Achten Sie auf Striche und Skalierung: Wenn Sie Ihr Bild transformieren, aktivieren Sie die Option „Striche und Effekte skalieren“ in den Voreinstellungen oder bei Verwendung der Transformationswerkzeuge. Dadurch wird verhindert, dass Konturen nur Bruchteile von 0,5 px aufweisen, was zu ungleichmäßigem Anti-Aliasing führen kann. Für maximale Präzision sollten Sie die Striche vor dem Export erweitern (Objekt > Erweitern), damit die Linien werden zu festen Formen und verlieren ihre Abhängigkeit von einer Strichstärke, die zu weichen Kanten führen kann.
Überschüssiges Bild abschneiden: Wenn das PNG genau die gleiche Größe wie die Tabelle haben soll, aktivieren Sie beim Exportieren das Zuschneiden der Zeichenfläche. Dadurch werden zusätzliche Pixel oder unerwartete Lücken vermieden. Dies ist besonders wichtig für Symbole oder Logos, bei denen ein unerwünschter Rand sehr auffällig sein kann. Mit der Option „Zeichenflächen verwenden“ oder einer entsprechenden Option wird dies behoben. das PNG übernimmt die Grenzen der Zeichenfläche ohne zusätzliche Kunst.
Führen Sie einen Kontrolllauf durch, um häufige Fehler zu vermeiden: Stellen Sie sicher, dass keine wichtigen Elemente halbtransparent sind, wenn Sie sie nicht benötigen, dass der Hintergrund transparent ist, wenn Sie einen Alphakanal erwarten, und dass der Text korrekt auf die gewünschte Größe gerastert ist. Achten Sie bei Benutzeroberflächen oder Bannern darauf, dass der Fließtext nicht zu klein wird. Ändert sich die Größe später, exportieren Sie mehrere Versionen (1x, 2x, 3x), anstatt ein zuvor generiertes PNG zu skalieren. Das Vergrößern eines Rasters verschlechtert immer die Schärfe. Wenn Sie sicherstellen möchten, dass Ihre Typografie nicht versagt, sollten Sie die Konvertierung in Betracht ziehen oder Text in Objekt umwandeln vor dem Export.
So exportieren Sie PNG ohne Qualitätsverlust: Methoden und Einstellungen
Illustrator bietet mehrere Exportpfade für PNG. Nicht alle sind gleich, und es empfiehlt sich, den Pfad auszuwählen, der am besten zu Ihrem Arbeitsablauf passt. Im Allgemeinen sind „Für Bildschirm exportieren“ und das Bedienfeld „Elementexport“ für mehrere Größen am praktischsten. „Exportieren als“ bietet Ihnen detaillierte Kontrolle in einer einzigen Datei. „Für Web speichern (alt)“ ist weiterhin nützlich für Farb- und Vorschauoptionen. Wichtig ist, für alle Pfade einheitliche Einstellungen anzuwenden. Schärfe, Farbe und Transparenz erhalten.
Exportieren als: Direktsteuerung für ein PNG
Gehen Sie zu Datei > Exportieren > Exportieren als… und wählen Sie PNG. Aktivieren Sie „Zeichenflächen verwenden“, wenn die Zeichenfläche beim Zuschneiden berücksichtigt werden soll. Wählen Sie im Optionsfeld folgende Werte: Auflösung in der gewünschten Größe (Sie können eine benutzerdefinierte Auflösung für die Skalierung festlegen), transparenter Hintergrund und Anti-Aliasing. Anti-Aliasing ist hier entscheidend: Wählen Sie „Für Grafik optimiert (Supersampling)“ für Illustrationen und Formen oder „Für Text optimiert (angedeutet)“, wenn Sie kleinen Text bevorzugen. Dadurch wird sichergestellt, dass die Kanten verschmelzen sanft ohne Lichthöfe auf hellen oder dunklen Hintergründen.
Wenn Sie ein PNG mit der exakten Pixelgröße (z. B. 1024 × 1024) benötigen, ist es ideal, wenn Ihre Tabelle bereits diese Größe hat. Unter „Exportieren als“ können Sie jedoch mit dem Maßstab multiplizieren (50 %, 100 %, 200 % usw.). Vermeiden Sie die Skalierung auf unrunde Werte, die zu ungleichmäßigem Resampling führen. Sollten Sie in der Pixelvorschau Unschärfen feststellen, gehen Sie zurück und passen Sie die Zeichenflächenabmessungen oder die Maße Ihrer Elemente an auf ganze Zahlen runden und Interpolationen vermeiden.
Export für Bildschirme: Mehrere Größen im Handumdrehen
Greifen Sie über Datei > Exportieren > Für Bildschirme exportieren darauf zu. Dies eignet sich ideal für die Vorbereitung von 1x-, 2x- und 3x-Varianten für Web oder Mobilgeräte. Fügen Sie Skalen hinzu (z. B. 1x, 2x) und wählen Sie PNG als Format. Sie können nach Zeichenfläche oder nach Asset exportieren (wenn Sie Assets im Panel definieren). Stellen Sie sicher, dass die Hintergrundoption auf transparent eingestellt ist und Suffixe (wie @2x) korrekt generiert werden. Diese Methode spart Zeit und gewährleistet Konsistenz über alle Größen hinweg. Jede Dichte erhält ihr natives Raster und Sie sind nicht auf spätere Erweiterungen angewiesen. Wenn Sie Dokumentation zu Export-Workflows benötigen, finden Sie in den Anleitungen zum Speichern Ihrer Dateien und Formate eine Referenz zu bewährten Vorgehensweisen.
Ein hilfreicher Tipp: Wenn Ihr Design bei 2x seltsam aussieht, weil Sie es ursprünglich auf eine "nicht teilbare" Größe eingestellt haben, stellen Sie Ihre Basis-Zeichenfläche auf Skalierungsmaße ein (z. B. 48, 96, 144 px usw.). Auf diese Weise passen die Pixel bei der Ausgabe mit 2x/3x in das Raster und die Schärfe bleibt erhalten. Diese Voraussicht ist ein Geschenk des Himmels für Ikonographie und pixelgenaue Schnittstellen.
Asset-Export-Panel: Problemlos automatisieren
Ziehen Sie Elemente in das Bedienfeld „Asset-Export“ und definieren Sie Skalierung und Formate pro Asset. Dies ist eine leistungsstarke Methode, um ein System visueller Design-Token zu pflegen. Sie können ein Logo in PNG 1x, 2x und SVG sowie ein Symbol in PNG 24 mit Transparenz und WebP (falls zutreffend) exportieren. Wenn Teams Änderungen wünschen, klicken Sie einfach auf „Exportieren“ – fertig, immer mit den gleichen Einstellungen. Dank dieser Funktion Sie beseitigen Inkonsistenzen und sparen viele Wiederholungen.
Für Web speichern (Legacy): immer noch nützlich
Obwohl es veraltet ist, bietet Datei > Exportieren > Für Web speichern (alt) eine sehr nützliche Vorschau. Wählen Sie PNG-24 für volle Transparenz (PNG-8 reduziert die Palette und führt häufig zu Streifenbildung). Aktivieren Sie Transparenz und setzen Sie Matt auf „Keine“, um Lichthöfe an Kanten zu vermeiden. Wenn Optionen zur Konvertierung in sRGB angezeigt werden, aktivieren Sie diese, um die Farbe in Browsern anzupassen. In diesem Fenster können Sie bei Bedarf auch die Pixelgröße mit einer guten Vorschau anpassen. Sehen Sie sich das genaue Ergebnis an, bevor Sie bestätigen.
Farbe und Konsistenz: Vermeiden Sie Farbüberraschungen
Stellen Sie für das Web sicher, dass Ihr Dokument im RGB-Format arbeitet und konvertieren Sie es beim Export in sRGB. Deaktivieren Sie ungewöhnliche Profile und vermeiden Sie die Mischung von CMYK- und RGB-Elementen innerhalb derselben PNG-Datei. Wenn Sie Grafiken mit einem anderen Profil erhalten, platzieren und interpretieren Sie die Farbe vor dem Export neu. Ziel ist es, dass die resultierende PNG-Datei in Chrome, Safari oder Firefox gleich aussieht. Das bedeutet Verwenden Sie sRGB als gemeinsamen Nenner.
Transparenz und Kanten: keine Halos
Vermeiden Sie beim Exportieren mit Transparenz temporäre weiße oder schwarze Hintergründe im Dokument, da diese die Kantenglättung beeinträchtigen können. Setzen Sie unter „Für Web speichern“ die Option „Matte“ auf „Keine“; lassen Sie unter „Exportieren als“ den Hintergrund transparent. Wenn Sie einen hellen oder dunklen Schleier am Rand bemerken, überprüfen Sie, ob keine Objekte mit unnötiger partieller Deckkraft vorhanden sind und die Kantenglättung ausreichend ist. Versuchen Sie für kleine Schriftarten „Für Text optimiert“ und für Symbole mit geraden Linien „Keine“, wenn Sie pixelgenaue Schriftarten wünschen, allerdings geht dadurch die Kantenglättung verloren. Daher Sie reinigen die Kontur ohne Artefakte.
Ein weiterer Trick für Symbole: Verwenden Sie gleichmäßige Strichstärken und versuchen Sie, die Formen pixelzentriert auszurichten. Eine 1-Pixel-Linie, die auf einem Pixel zentriert ist, sieht scharf aus; eine 1-Pixel-Linie, die sich über zwei Pixel erstreckt, ist geglättet und unscharf. Die Pixelansicht und die Option „Am Raster ausrichten“ erledigen die Hälfte der Arbeit für Sie, sodass jede Kante fällt dorthin, wo sie hingehört.
Größen und Dichten: 1x, 2x, 3x
Für moderne Schnittstellen liefern Sie mindestens 1x und 2x. Wenn Sie mit 1x designen, generieren Sie 2x und 3x aus dem Export für Bildschirme. Wenn Sie mit 2x designen (sehr häufig), exportieren Sie 1x durch Division durch 2 und 3x durch Multiplikation mit 1,5. Skalieren Sie niemals in einem externen Editor von einem finalen PNG hoch; kehren Sie immer zum Vektor zurück und exportieren Sie nativ im neuen Maßstab. Diese Disziplin hält Schärfe und Gewicht unter Kontrolle in Ihrem gesamten Ressourcensystem.
Kurze Checkliste vor dem Drücken der Taste
Es empfiehlt sich, eine einfache Checkliste durchzugehen. Überprüfen Sie: Tabelle in der exakten Größe, Position und Abmessungen der Elemente in ganzen Pixeln, RGB-Farbmodus, Rastereffekte in der passenden Auflösung, korrektes Antialiasing, saubere Transparenz und gegebenenfalls Konvertierung in sRGB. Damit verschwinden 90 % der "Es ist unscharf"-Probleme, denn Sie stellen sicher, dass Vektor und Raster die gleiche Sprache sprechen.
- Zeichenfläche und gerundete Maße in Pixeln, um Brüche zu vermeiden.
- Pixelansicht aktiviert, um die tatsächliche Schärfe zu bestätigen.
- RGB + sRGB beim Export für Konsistenz zwischen den Displays.
- Antialiasing und Transparenz je nach Kunsttyp konfiguriert.
Beheben häufiger Probleme
Verschwommener Text? Erhöhen Sie die Schriftgröße etwas, verwenden Sie "Für Text optimiert" im Antialiasing, achten Sie darauf, dass der Text keine Dezimalstellen enthält, und vermeiden Sie die Skalierung des endgültigen PNG. Manchmal lohnt es sich, den Text als separates Bild mit 2x zu rastern, damit Erhöhung der Pixeldichte und Lesbarkeit ohne den Rest zu beeinträchtigen. Wenn Sie mit Photoshop als Backup arbeiten, werden Sie feststellen, dass das Kopieren und Rastern zwischen Anwendungen diese Fälle beschleunigt; siehe Techniken für Rastern und Übertragen von Elementen zwischen Photoshop und Illustrator.
Symbole mit unscharfen Kanten? Richten Sie die Symbole am Pixelraster aus, verwenden Sie gleichmäßige (2 px, 4 px) oder ungerade Breiten, die mit dem Raster übereinstimmen, und deaktivieren Sie Antialiasing, wenn der Stil reiner Pixelkunst ist. Wenn das Symbol Diagonalen aufweist, lassen Sie Antialiasing auf "Für Kunst optimiert" stehen, um die unscharfen Kanten zu glätten. Vermeiden Sie jedoch Mattierungen, die Halos in wechselnden Hintergründen einführen.
Verwaschene Farben in Browsern? Konvertieren Sie beim Export unbedingt in sRGB und vermeiden Sie exotische eingebettete Profile. Auf Wide-Gamut-Monitoren kann ein nicht konvertiertes Bild in Desktop-Apps gesättigt und in Browsern entsättigt wirken. Die Konvertierung in sRGB ist Ihr Sicherheitsnetz. plattformübergreifende Konsistenz.
Schwer? PNG ist verlustfrei und transparent, aber nicht immer das leichteste Format. Reduzieren Sie die Abmessungen, wenn möglich, entfernen Sie unsichtbare Ebenen vor dem Export, komprimieren Sie mit externen verlustfreien Programmen (z. B. optipng, pngquant sorgfältig), und wenn keine Transparenz erforderlich ist, ziehen Sie JPEG oder WebP in Betracht. Wenn Sie dennoch bei PNG bleiben müssen, achten Sie auf saubere Paletten und Vermeiden Sie unnötige Alphakanäle Kilobyte sparen.
Schwarz-weiße Lichthöfe auf variablen Hintergründen? Das ist eine falsch angewendete Matte. Verwenden Sie unter „Für Web speichern“ die Option „Matte = Keine“; andernfalls verwenden Sie einen transparenten Hintergrund und korrigieren Sie das Antialiasing. Wenn Sie Bildmaterial mit einem Schatten auf Weiß übernehmen, erstellen Sie den Schatten auf echten Transparenzen neu, da sonst die Interpolation die weißen und der Geisterumriss erscheint.
Gute Workflow-Praktiken
Arbeiten Sie mit einer Master-Vektordatei mit klaren Ebenen und einheitlichen Stilen. Definieren Sie von Anfang an Basisgrößen, die mit 1x/2x/3x-Dichten kompatibel sind, und nutzen Sie den Export für Bildschirme zum Skalieren. Einheitliche Benennungen (icon‑home@1x.png, icon‑home@2x.png usw.) und Ordner pro Plattform beschleunigen die Bereitstellung. Dokumentieren Sie im Team die Exporteinstellungen in einer internen Readme-Datei, damit jeder generiert die gleichen Binärdateien ohne Abweichungen.
Integrieren Sie visuelle Validierungen: Öffnen Sie PNGs in der realen Umgebung, in der sie eingesetzt werden (Browser, Mobilgerät, App). Verlassen Sie sich nicht ausschließlich auf die Vorschau von Illustrator. Platzieren Sie PNGs im Web auf verschiedenen Hintergründen, um auf Lichthöfe zu testen. Laden Sie sie auf Mobilgeräten in einen Prototyp hoch und prüfen Sie auf hohe Dichten. Dieser Validierungsschritt erkennt Probleme und ermöglicht Ihnen vor der Veröffentlichung korrigieren.
Denken Sie daran, dass Illustrator die Rasterung im laufenden Betrieb durchführt. Wenn Ihr Kunstwerk stark auf Effekten basiert, versuchen Sie, einige Teile vor dem endgültigen Export zu erweitern oder in hochauflösende Zwischen-Bitmaps umzuwandeln. Dies ist zwar nicht die Regel, aber bei komplexen Kompositionen ist es manchmal die richtige Lösung. Die Engine führt inkonsistente Berechnungen nicht erneut durch zwischen den Exporten.
