Eine Linie sieht im Illustrator-Dokument perfekt aus – nach dem Export wirkt sie weich oder „verwaschen“. Der häufigste Grund: Das Objekt liegt nicht exakt auf ganzen Pixelkoordinaten. Besonders bei Icons und UI-Assets für Web und Apps entscheidet das über sichtbar scharfe Kanten. Mit einem sauberen Vorgehen lassen sich die typischen Ursachen schnell finden und dauerhaft vermeiden.
Warum Pixelkanten in Illustrator manchmal unscharf werden
Illustrator arbeitet vektorbasiert: Formen werden mathematisch beschrieben. Beim Export nach PNG oder bei der Darstellung im Browser müssen diese Vektoren jedoch in ein Pixelraster „übersetzt“ werden (Rasterung). Liegt eine Kante zwischen zwei Pixeln, verteilt die Rasterung die Farbe auf beide Pixel – das Ergebnis wirkt weich. Genau hier hilft Pixelgenaues Arbeiten.
Die drei häufigsten Ursachen im Alltag
- Halbe Pixel: X-/Y-Positionen oder Breiten/Höhen stehen auf Dezimalwerten (z. B. 20,5 px).
- Konturen zentriert: Eine 1-pt/1-px-Kontur liegt „halb innen, halb außen“ und landet dadurch häufig zwischen Pixeln.
- Skalieren ohne Rasterlogik: Beim Transformieren entstehen krumme Werte, auch wenn die Ausgangsform sauber war.
Dokument und Einheiten richtig vorbereiten (Web-Setup)
Bevor einzelne Objekte korrigiert werden, lohnt ein kurzer Check am Dokument. Für Web-Assets ist es am einfachsten, in Pixeln zu arbeiten und das Rasterverhalten bewusst zu steuern.
Einheiten auf Pixel stellen und sauber prüfen
In den Voreinstellungen können Einheiten (z. B. „Allgemein“ und „Kontur“) auf „Pixel“ gesetzt werden. Das verhindert keine Dezimalwerte, macht sie aber sichtbar und leichter kontrollierbar. Zusätzlich hilft eine klare Zoom-Routine: bei 100% und 200% fallen weiche Kanten oft sofort auf.
Wichtige Option: An Pixelraster ausrichten – wann sinnvoll, wann nicht
Illustrator bietet für Web-Workflows die Möglichkeit, Objekte am Raster zu „snappen“. Das ist für Icons oft hilfreich, kann aber bei komplexen Illustrationen oder sehr feinen Details unerwünschte Verschiebungen erzeugen. Empfehlung: Für Icon-/UI-Dateien aktiv nutzen, für freie Illustrationen eher gezielt pro Objekt prüfen statt global alles „gerade zu ziehen“.
Objekte exakt auf ganze Pixel setzen (Position und Größe)
Der Kernschritt ist simpel: X, Y, Breite und Höhe sollten in vielen Web-Fällen auf ganzen Pixeln stehen. Das gilt besonders für rechteckige Flächen, geradlinige Icons und UI-Elemente.
Transformieren-Bedienfeld als Kontrollzentrum
Im Transformieren-Bedienfeld lassen sich Position und Maße numerisch prüfen. Ziel: keine Dezimalstellen, wenn das Element später pixelhart erscheinen soll. Falls Dezimalwerte vorhanden sind, lassen sie sich auf ganze Werte runden. Dabei ist wichtig: Nicht „blind“ alles runden, sondern visuell gegenprüfen, ob Proportionen und Abstände im Icon noch stimmen.
Konturen: innen/außen statt zentriert denken
Eine häufige Stolperfalle sind 1-px-Konturen, die zentriert auf dem Pfad liegen. Dann steht die sichtbare Kante oft auf x,5. Lösung: Wenn möglich Konturen nach innen oder außen ausrichten oder – bei rein weborientierten Icons – Konturen in Flächen umwandeln (damit die Formkante eindeutig am Raster sitzt). Für das spätere Bearbeiten von Linien ist ein separater Workflow hilfreich; passend dazu: Linien nachträglich bearbeiten: Breite & Stil.
Ein schneller Praxis-Workflow für scharfe Web-Icons
Dieser Ablauf funktioniert gut für einfache Icons, Buttons, Badges und UI-Formen. Er ist bewusst kurz gehalten – und deckt die häufigsten Problemstellen ab.
Kurze So-geht’s-Box für die Umsetzung
- Dokument in Pixeln anlegen und bei Bedarf ein Web-Profil verwenden.
- Formen bauen und anschließend im Transformieren-Bedienfeld X/Y sowie Breite/Höhe prüfen.
- Dezimalwerte gezielt runden; danach bei 100% Ansicht die Kanten beurteilen.
- Bei dünnen Linien prüfen, ob Konturen zentriert liegen; falls nötig innen/außen ausrichten oder in Flächen umwandeln.
- Vor dem Export in der Pixelvorschau kontrollieren (Kanten wirken dort näher an der Browserdarstellung).
Kontrolle vor dem Export: So werden Probleme sichtbar
Viele „Unschärfen“ erkennt man erst, wenn man den richtigen Blickwinkel nutzt. Zwei Checks sparen am Ende viel Trial-and-Error.
Pixelvorschau und Outline-Ansicht kombinieren
Die Pixelvorschau zeigt, wie Illustrator rastert. Die Outline-Ansicht zeigt, ob Pfade sauber aufgebaut sind (z. B. doppelte Kanten, unnötige Punkte). Besonders nützlich ist das bei Icons, die mit vielen kleinen Segmenten gebaut wurden. Für die Pfadkontrolle kann die Outline-Ansicht gezielt eingesetzt werden: Outline View nutzen – Pfade prüfen wie Profis.
Typische Warnzeichen, die auf halbe Pixel hindeuten
- Eine vertikale/horizontale Linie wirkt an einer Stelle „dicker“ oder „grau“.
- Flächenkanten fransen leicht aus, obwohl keine Transparenz im Spiel ist.
- Beim Export in 1x wirkt es weich, in 2x/3x aber plötzlich scharf.
Entscheidungshilfe: Welche Korrektur passt zu welchem Element?
Nicht jedes Motiv braucht denselben Grad an Pixelstrenge. Bei UI-Elementen ist Schärfe zentral, bei organischen Illustrationen kann zu viel Raster-Zwang Details beschädigen. Der folgende Entscheidungsbaum hilft, schnell die passende Methode zu wählen.
- Ist das Element ein Icon/UI-Shape mit geraden Kanten?
- Ja: Position und Maße auf ganze Pixel setzen; Konturen prüfen und ggf. in Flächen umwandeln.
- Nein: weiter prüfen.
- Besteht das Element aus organischen Kurven oder Hand-Illustration?
- Ja: Pixelvorschau nutzen, aber nur problematische Kanten korrigieren (z. B. horizontale Linien).
- Nein: weiter prüfen.
- Muss es als SVG im Web sehr klein dargestellt werden?
- Ja: Pfade vereinfachen, Kanten sauber ausrichten, unnötige Punkte vermeiden; Export-Einstellungen sorgfältig wählen.
- Nein: PNG-Export in passender Auflösung kann ausreichend sein.
Export-Strategien: PNG, SVG und typische Stolperfallen
Wenn die Geometrie stimmt, entscheidet der Export über das letzte Stück Qualität. Je nach Zielmedium sind unterschiedliche Formate sinnvoll.
PNG: richtige Auflösung statt „größer ist immer besser“
Für UI-Assets ist ein sauberer 1x-Export wichtig, zusätzlich oft 2x für Retina/HiDPI. Wenn ein Icon in 24 px eingesetzt wird, sollte es auch auf diese Größe gebaut und getestet werden. Ein 48-px-Icon später „runterskalieren“ zu lassen, kann die Kanten wieder weich machen – selbst wenn die Ausgangsdatei korrekt ist. Für den praktischen Ablauf beim transparenten Export hilft: Transparente PNGs exportieren – sauber & scharf.
SVG: weniger Punkte, klare Kanten, robuste Darstellung
Bei SVG sind saubere, einfache Pfade entscheidend: zu viele Ankerpunkte erhöhen die Dateigröße und können je nach Renderer zu minimalen Kantenschwankungen führen. Ein guter Schritt ist daher, Pfade nach dem Bauen zu kontrollieren und unnötige Komplexität zu vermeiden. Wer SVGs für Web ausgibt, profitiert außerdem von optimierten Exportoptionen und schlankem Code: SVG optimieren – sauberer Code, kleinere Dateien.
Häufige Fragen aus der Praxis
Warum sind manche Formen trotz ganzer X/Y-Werte noch weich?
Oft liegt es an der Kontur: Eine zentrierte Kontur verschiebt die sichtbare Kante wieder auf Zwischenwerte. Zweiter Klassiker: Die Form ist zwar korrekt positioniert, aber intern rotiert oder skaliert und erzeugt dadurch Dezimalpunkte an den Pfadsegmenten.
Ist „An Pixelraster ausrichten“ immer die beste Lösung?
Für klare UI-Assets häufig ja. Bei komplexen Illustrationen kann es jedoch Details verschieben. Sinnvoller ist dann, nur kritische horizontale/vertikale Kanten zu korrigieren und den Rest vektorlogisch sauber zu lassen.
Was ist besser: Konturen behalten oder in Flächen umwandeln?
Für editierbare Illustrationen sind Konturen praktisch. Für finale Icons, die pixelhart sein müssen, ist die Umwandlung oft stabiler, weil die Kanten eindeutig definiert sind. Wichtig ist, eine bearbeitbare Version separat zu behalten, falls spätere Änderungen nötig sind.
Wer diese Schritte als Standard-Workflow übernimmt, reduziert die typischen „Warum ist das exportierte Icon unscharf?“-Probleme deutlich – und spart bei Web-Assets viel Nacharbeit.
