Illustrator auf Pixelraster ausgerichtet, aber Logo immer noch unscharf

Ich versuche, ein gestochen scharfes Logo in Illustrator CC zu erstellen, und egal was ich tue (habe Webdokumenteinstellungen mit Ausrichtung am Pixelraster eingerichtet), wenn ich mein Logo als PNG-24-Webdokument speichere und eine Vorschau einsehe im Browser erscheint das Logo unscharf!

Fehlt mir etwas, wie ich meinen Logo-Export für meine Website mit einem gestochen scharfen Aussehen erstellen kann?

So wird es im PNG-24-Format exportiert:

So wird es im PNG-24-Format exportiert

Hier ist es mit Pixelvorschau:

Hier ist es mit Pixelvorschau

Für Ben: So sieht es in Illustrator aus -> Für Web speichern -> Vorschau (PNG) 100 %Geben Sie hier die Bildbeschreibung ein

Vielen Dank im Voraus für jede Hilfe!

Danke Ben! Ich hatte bereits "Anti-Alias" unter Effekt -> Dokumentrastereffekteinstellungen deaktiviert.
Mir ist aufgefallen, dass das Logo in Firefox viel unschärfer erscheint als in Chrome. Verkleinern in Firefox hilft auch. Ich dachte, es wäre nur eine Firefox-Sache, aber dann ging ich in Firefox zu www.squaredspace.com und zoomte in ihr Logo ... es ist sogar bei 300 % Zoom perfekt! So knackig.
Haben Sie versucht, mit den Einstellungen "Interlaced" und "Typ optimiert" in der Eingabeaufforderung "Für Web speichern" zu spielen? Wie sieht es sonst in einem Browser aus? Wie sieht es aus, wenn Sie es in Photoshop oder in der Vorschau zu 100 % öffnen?
@mseager für deinen letzten Punkt. Sie hätten die Bilder entweder mit 2x oder 3x für Retina-Displays speichern können. Sie hätten ihr Logo auch als SVG speichern können, das in jeder Größe gut aussieht.
@BenjaminSmith Interlacing schien die Dateigröße leicht zu erhöhen, also habe ich es deaktiviert. Typoptimiert war bereits gesetzt. Ich habe meinen ursprünglichen Beitrag mit einem Bild aktualisiert, das zeigt, wie es in AI Preview (Web) zu 100 % aussieht, viel besser als in Firefox. Mir ist auch aufgefallen, dass das Verkleinern auf 80 % in Firefox die besten Ergebnisse liefert ... es könnte also etwas mit der Größe meines Logos zu tun haben und wie der Browser das Bild neu anpasst.
@AndrewH Ah! Hier passiert also die Magie, in diesem Fall muss ich mich über das Entwerfen für Retina-Displays und das Speichern als SVG informieren.
@mseager Ich würde mir dieses Tutorial zu CSS-Tricks mit SVG ansehen .
@AndrewH Ich glaube, das war es! Ich kann nicht glauben, dass ich 6 Stunden damit verbracht habe und alles, was ich tun musste, war, es als .svg zu speichern :) Warum macht das nicht jeder?! Das Logo sieht so viel besser aus als ein PNG! Das Logo sieht schön und klar aus und reagiert auch sehr gut auf responsives Design. Vielen vielen Dank, Sir!!
@mseager es könnte ein paar Gründe geben. Ein Grund könnte die Unterstützung für IE8 und niedriger sein. Einige SVG-Grafiken können Tausende von Knoten erfordern. Wenn Sie den SVG-Code anstelle von img src einfügen, kann dies archaisch oder verwirrend aussehen. Ich habe gesehen, dass SVG in den letzten Jahren viel beliebter geworden ist.
@Mseager: SVG ist großartig, aber die Browserunterstützung ist noch nicht 100%ig, das wäre also ein Grund, warum die Leute zögern.
@BenjaminSmith Vielen Dank für Ihre schnellen und hilfreichen Antworten! Für schöne, gestochen scharfe Bilder ist SVG die Zukunft! Danke noch einmal :)
@AndrewH Laut diesem CSS-Tricks-Dokument gibt es Möglichkeiten, mit Tools wie Modernizr nach Browserunterstützung zu suchen. Ich möchte das SVG beibehalten, damit ich Alternativen für diejenigen bereitstellen kann, die es nicht sehen können. Danke noch einmal :)

Antworten (3)

Sie müssen dies manuell in Pixel-Perfektion optimieren. Wählen Sie mit dem „Direktauswahl-Werkzeug“ (A) jeden einzelnen Ankerpunkt entlang der Pfade der Form aus und stellen Sie sicher, dass er an einer Gitterkoordinate ausgerichtet ist. Stellen Sie außerdem sicher, dass Sie „Ansicht“ > „An Pixel ausrichten“ aktiviert haben.

Wir hatten einige Probleme bei der Arbeit mit Symbolen, die unscharf aussahen. Was wir getan haben, ist, dass wir die Größe aller Symbole im Illustrator auf die doppelte Größe geändert haben, die sie im Browser haben sollten. Als der Entwickler kodierte, teilte er das Bild durch 2 oder legte einfach die Abmessungen manuell durch 2 geteilt fest.

Der Export erfolgte auf die gleiche Weise "für Web speichern" und mit PNG 24.

Danach sahen alle Symbole und Bilder gestochen scharf aus. Sie können das ausprobieren und sehen, ob es auch für Sie funktioniert!

Versuchen Sie, das SVG-Dateiformat für Logos zu verwenden. Sie würden den Anti-Alias-Effekt nicht erhalten, da SVG keine Pixel, sondern Vektoren verwendet.

Es sei denn, die Koordinaten für die Punkte fallen in Bruchteile von Pixeln, weshalb Linien unscharf aussehen.
Illustrator auf Pixelraster ausgerichtet, aber Logo immer noch unscharf
AntwortenHierDatenschutz-Bestimmungen1y, 0v