Wie speichert man kleine PNG-Dateien (Icons) mit minimaler Pixelierung?

Ich wurde beauftragt, eine Reihe von Symbolen für ein Softwareprodukt zu erstellen, das mein Unternehmen entwickelt. Das Problem ist, dass ich immer wieder Feedback bekomme, dass die Symbole zu "verpixelt" sind, um sie zu verwenden ...

Die Symbole müssen 24 x 24 Pixel groß und als PNG gespeichert sein. Ich habe die Symbole in Photoshop erstellt, die Auflösung auf 300 eingestellt (um zu versuchen, sie so klar und scharf wie möglich zu machen) und jede Datei als PNG gespeichert. Hier ist ein Beispiel dafür, wie sie sich herausstellten:Symbolbeispiel

Ich hatte den Eindruck, dass es bei 24 x 24 px nicht viel weniger pixelig werden würde. Liege ich da falsch? Gibt es eine Möglichkeit, diese winzig kleinen Bilddateien so zu exportieren, dass sie möglichst unverpixelt sind?

Wie kann ich diese Dateien speichern und das bestmögliche Ergebnis erzielen?

Sie können die Auflösung auf 5 Gabillionen einstellen und ein 24x24 px Bild wird immer noch 24x24 px mit der gleichen, identischen Dateigröße sein. Es sieht so aus, als würden sie gegen "Anti-Aliasing" protestieren, das Kanten weicher macht. Beachten Sie auch, dass, wenn eine Webseite/App das Bild UP skaliert (sprich: Netzhaut), jede Unvollkommenheit ebenfalls skaliert wird. Dieser Stapelaustausch ist voll von Fragen mit SVG PNG ICON-Tags.

Antworten (2)

Das ist keine Verpixelung, das ist verschwommen. Ihr Symbol ist verschwommen.

Das Problem ist, dass Sie sie mit unterschiedlicher Auflösung erstellt und herunterskaliert haben und das Programm ein Resampling durchgeführt hat. Um den angemessenen Anteil des Strichs zu simulieren, wurde etwas Anti-Aliasing angewendet.

Sie müssen sie machen:

a) pixelgenau bei exakter Auflösung.

b) machen Sie sie in Vektoren, wie SVG.

c) resample sie und schalte Anti-Aliasing aus.... Ich glaube nicht, dass das funktionieren wird, aber du kannst es versuchen.

d) Versuchen Sie, etwas Schärfen anzuwenden ... Könnte funktionieren, aber sie werden nicht so sauber sein wie die Optionen a und b.

Zusätzliche Anmerkungen.

Die 300 dpi, die eigentlich keine dpi, sondern ppi sind, haben nichts mit einem Icon fürs Web zu tun. Verwenden Sie einfach einfache Pixel als Größe Ihres Dokuments.

Bearbeitet:

Eine Nahaufnahme Ihres Symbols:

Ein pixelgenaues Symbol sollte ungefähr so ​​aussehen:

Hier ist das Symbol bei 24x24 px: im Vergleich zu

Danke für die Antwort - aber ich habe sie tatsächlich pixelgenau mit der genauen Auflösung erstellt. Außerdem wurde mir von den Entwicklern gesagt, dass sie nur PNG-Dateien verwenden können, nicht SVG, TIF usw.
Nein, hast du nicht. Lassen Sie mich einige Beispielbilder machen und ich werde den Beitrag bearbeiten.
@Rafael SVG ist übrigens keine garantierte Lösung für so kleine Größen - Sie müssen immer noch sicherstellen, dass die Ausgabe pixelgenau ist. Dies ist machbar, fügt aber eine weitere Ebene der Komplexität hinzu.
Ich habe sie gemäß Ihrem Vorschlag mit Anti-Aliasing neu abgetastet, und es hat SEHR geholfen - danke. Ihr Rat in Kombination mit dem, was @cockypup gepostet hat, scheint das Problem behoben zu haben. Vielen Dank für Ihre Hilfe!!!

Anscheinend ist Ihr Design nicht richtig am Pixelraster ausgerichtet. Dadurch entstehen alle Arten von Artefakten, die sehr schwer zu kontrollieren sind.

Ich würde vorschlagen, die Abmessungen Ihrer Leinwand auf 24px x 24px einzustellen und so weit zu zoomen, dass Sie das Pixelraster sehen können. Verschieben und/oder ändern Sie dann die Größe Ihrer Symbole, bis sie an den spezifischen Pixeln ausgerichtet sind. Dadurch wird das Anti-Aliasing auf den rechteckigen Formen minimiert. Gegen winzige Kreise können Sie jedoch nicht viel tun. Es wird Anti-Aliasing geben, ob Sie es wollen oder nicht.

Ich habe Dinge eingekreist, die auf eine Fehlausrichtung hindeuten. Wenn eine rechteckige Form am Pixelraster ausgerichtet ist und Strich und Breite perfekte Pixelabmessungen haben, sollten die Farben auf beiden Seiten gleich sein. Tatsächlich sollte die Farbe einfarbig sein, nicht 3 verschiedene Schattierungen derselben Farbe.

Dies bedeutet nicht, dass Ihr Design falsch ist. Sie können die Dinge so breit machen, wie Sie wollen, und sie platzieren, wo immer Sie wollen. Es bedeutet nur, dass PS, um mit einer so kleinen Größe gerendert zu werden, Anti-Aliasing verwenden muss.

Geben Sie hier die Bildbeschreibung ein

In dieser Frage können Sie einen Blick auf meinen OCD-Leitfaden zur Pixelperfektion werfen . Obwohl die Antwort darauf hindeutet, KI und nicht PS zu verwenden, gelten einige der Kommentare ebenfalls.

Dinge, die man beachten muss:

  • Die Striche sind möglicherweise nicht am Pixelraster ausgerichtet. Sie könnten darauf zentriert sein und daher mit Antialiasing gerendert werden. Versuchen Sie, die Striche an der Innenseite oder Außenseite der Rechtecke auszurichten.
  • Die Breite der Striche ist möglicherweise kein ganzes Pixel.
  • Die Rechtecke können abgerundete Ecken haben
  • Die Rechtecke können leicht geneigt sein. Unwahrscheinlich, aber die Farbänderungen auf der linken Seite des kleineren Rechtecks ​​deuten darauf hin, dass etwas nicht stimmt.

Eine letzte Sache. Ihr Kommentar zu 300 dpi verwirrt mich. Wenn Sie ein Bild erstellen, das auf einem Bildschirm mit 24 Pixel x 24 Pixel angezeigt wird, hat es keinen Platz, über seine Auflösung zu sprechen. Ich spreche über dieses Thema in dieser Antwort .

DANKE SCHÖN!!! Ich wünschte, ich könnte Ihnen mehr als eine positive Bewertung geben - Ihre beiden Links sind sehr gut erklärt.
Gern geschehen. Zahlen Sie es einfach zurück, indem Sie irgendwann die Frage eines anderen beantworten : )
Ich werde es vorauszahlen. :) Ich möchte nur sichergehen, dass ich es verstanden habe: 1. Dokument = RGB 2. "An Pixelraster ausrichten" ist aktiviert 3. Die Mitte des Quadrats im Transformationsfenster ist ausgewählt, damit die Formen nicht an Bruchteilen von Pixeln platziert werden .(?) 4. Versuchen Sie, keine gebrochenen Pixel zu verwenden, außer für abgerundete Formen. 5. Verwenden Sie die Pixelvorschau. . Ist das richtig? Nochmals vielen Dank, Sie sind die Besten!
Richtig. Kommentar 6 war für Bilder gedacht, die im Web verwendet werden. Wie Sie bereits erwähnt haben, ist es in Ihrem Fall möglicherweise nicht anwendbar.
Wie speichert man kleine PNG-Dateien (Icons) mit minimaler Pixelierung?
AntwortenHierDatenschutz-Bestimmungen1y, 0v