Ausgefranste Kanten an einem Logo

Ich fühle deinen Schmerz. Diese Dinge stören mich auch und ich habe unzählige Stunden damit verbracht, sie zu kontrollieren. In diesem Fall denke ich jedoch, dass Sie vielleicht loslassen und akzeptieren müssen, dass es manchmal verschwommen sein wird. Hier ist der Grund:

Wie Sie wahrscheinlich wissen, werden Kurven auf dem Bildschirm durch Anti-Aliasing oder das, was Sie Fuzz nennen, simuliert.

Der Bildschirm ist (vereinfachend) eine Punktmatrix. Es gibt keine Möglichkeit, eine echte Kurve mit einer Punktmatrix zu zeichnen, da Sie die Punkte zwischen Pixeln platzieren müssten, um 100% genau zu sein. Das einzige, was getan werden kann, ist, die Illusion einer Kurve zu erzeugen, indem hellere und dunklere Punkte verwendet werden, was auch als Anti-Aliasing bezeichnet wird.

Anti-Aliasing wird auch von Vektorsoftware verwendet, um Formen mit Teilpixelabmessungen (Breite = 0,5 Pixel) oder an Stellen mit Teilpixeln (x = 0,5 Pixel) zu simulieren. Die helleren Pixel lassen Ihr Auge denken, dass die Form leicht verschoben ist.

Wenn Sie beides kombinieren (Kurven und gebrochene Pixelabmessungen / -platzierung), wird viel Anti-Aliasing ausgeführt.

Schauen Sie sich zum Beispiel dieses Bild an. Der Kreis und das Quadrat sind beide 20 Pixel x 20 Pixel groß und mit einem schwarzen Strich von 1 Pixel umrandet. Die linke Ecke der Formen in der ersten Spalte befindet sich pixelgenau. Die zweiten Formen befinden sich bei einem Viertelpixel (x=0,25px). Die dritten bei einem halben Pixel (x = 0,5). Die Spitze (y) aller Formen befindet sich bei einem genauen Pixel.

Dies ist das gleiche Bild, aber vergrößert, sodass wir das Anti-Aliasing bei der Arbeit sehen können.

Sie können sehen, dass das erste Quadrat kein Anti-Aliasing benötigte, da es an einem exakten Pixel platziert ist und exakte Pixelabmessungen hat. Auf dem Originalbild (dem kleinen) sieht es ziemlich scharf aus. Wenn wir beginnen, es zu bewegen, beginnt die KI mit dem Hinzufügen von Anti-Aliasing, um die gebrochenen Pixel zu simulieren. Der zweite sieht fast scharf aus. Die vertikalen Striche des dritten sehen unscharf oder dicker aus.

Die Kreise sind noch komplexer. Da sie gekrümmt sind, muss die KI für alle Fälle Anti-Aliasing verwenden, auch für den, der sich pixelgenau befindet.

Meine persönliche Vorliebe ist es, Kreise bei 1/2 Pixeln zu platzieren, sowohl x als auch y, damit der Fuzz gleichmäßig verteilt ist. Meiner Meinung nach sieht es glatter aus. Einige der Artefakte können Sie jedoch immer noch sehen.

Wenn Sie eine Kurve oder ein Vektorbild rastern, das Bruchpixel verwendet, "verewigen" Sie das Anti-Aliasing. Die helleren und dunkleren Punkte, die die Software hinzugefügt hat, um Kurven und Teilpixel zu imitieren, werden als Pixel dieser Farbe im endgültigen Rasterbild gespeichert.

Das Lokalisieren und Kontrollieren dieser Artefakte ist schmerzhaft und manchmal unmöglich. Wenn Sie nur eine Reihe von Formen zeichnen, ist dies einfach, da Sie die Größen und Positionen aller Elemente in Ihrer Grafik überprüfen können. Ich habe in diesem Kommentar zu diesem Thema eine zwanghafte Reihe von Richtlinien geschrieben .

Kopieren macht es jedoch fast unmöglich, diese Artefakte zu kontrollieren. Sie können nicht hingehen und die Größe und Position jedes Zeichens in Ihrer Kopie überprüfen. Computer werden veraltet sein, bevor Sie Ihren ersten Versuch beenden, jedes Zeichen manuell einzustellen. Und am Ende erhalten Sie Text, der nicht so fließt, wie es Text tun sollte.

Ich neige dazu, diesen ganzen Fuzz nur durchzugehen, wenn es sich um ein sehr kleines Bild handelt (z. B. ein Symbol), von dem ich weiß, dass es immer an einer genauen Pixelposition und mit genauen Pixelabmessungen platziert wird (eine Webanwendung oder Software). Oder wenn die Artefakte so offensichtlich sind, dass ich nachts nicht schlafen kann, weil ich ihre Stimme höre, die mich ruft.

Wenn es sich um ein Asset handelt, das von anderen auf eine Weise verwendet wird, die ich nicht einmal erraten kann, mache ich mir keine Sorgen, da ihre Wahl der Platzierung und der Abmessungen dem Endergebnis ohnehin mehr Anti-Aliasing hinzufügt.

Mein Vorschlag wäre also: Wenn Sie das O wirklich stört, dann verwandeln Sie es in eine Form und überprüfen und ändern Sie seine Position und Abmessungen, bevor Sie es exportieren oder für das Web speichern. Beachten Sie jedoch, dass Sie dies nicht für jede einzelne Anwendung des Logos tun können, das an verschiedenen Stellen und in verschiedenen Größen verwendet wird.

Denken Sie auch daran, dass beim Drucken eine andere Reihe von Artefakten ins Spiel kommt. Dies ist ein interessanter Kommentar dazu (und ich werde aufhören, meine eigenen Kommentare zu veröffentlichen).

So ist es eben. Sehr dünne gebogene Linien auf einer Rasteranzeige weisen wahrscheinlich ein deutlicheres Aliasing auf als dickere Linien.

Ich finde, es sieht jetzt gut aus. Aber wenn Sie die Dinge ein wenig weiter optimieren möchten, können Sie stattdessen versuchen, den Typ in Photoshop einzustellen und mit den Anti-Alias-Einstellungen im Textwerkzeug zu spielen (ich glaube, Photoshop nennt dies „Schriftglättung“). Es gibt ungefähr ein halbes Dutzend Optionen, und einige erzeugen möglicherweise einen Look, den Sie den anderen vorziehen.

Die andere Option besteht darin, Retina-Versionen des Logos zu erstellen und dem Kunden nur seine Webseite auf einem iPad oder Macbook mit Retina-Bildschirm zu zeigen. :)

Es ist eine sehr spezifische Situation, wie Illustrator mit dem Aliasing umgeht.

Versuchen Sie, es zu exportieren, sagen wir 3-4 Mal Ihre endgültige Ausgabe, und sampeln Sie es erneut herunter.

Sie können auch versuchen, eine Schärfung anzuwenden, entweder vor dem Resampling nach unten oder nach dem Resampling.