So verkleinern Sie PNG-Assets richtig

Ich mache Spiele für Handys und Web. Ich habe alle meine Kunstwerke in Retina-Auflösung. Ich benutze Sketch zum Slicen meiner Kunstwerke. Während des Slicens skaliere ich meine Grafik für Nicht-Retina-Bildschirme herunter - und hier stehe ich vor einem Problem:

Bitte folgen Sie meiner Erklärung:

  1. Hier beschreibe ich, was ich in der Sketch-App mache:

Geben Sie hier die Bildbeschreibung ein

  1. Hier zeige ich entstandene Bilder, beschreibe mein Problem und stelle eine Frage:

Geben Sie hier die Bildbeschreibung ein

Meine Frage ist also, wie man Kanten von herunterskalierten geschnittenen Assets nicht transparent macht?

Ist es möglich, es in Photoshop oder in Sketch zu tun?

HINZUGEFÜGT

Hier ist ein Link zur Sketch-Datei: https://drive.google.com/file/d/0BzHPzvAPTcG2WTJLTTdHVUN4QTQ/view?usp=sharing

Danke fürs Einfügen von Bildern! In Zukunft wird die Verwendung des integrierten Bild-Uploaders dazu beitragen, Ihren Beitrag zu erhalten (da wir uns nicht darauf verlassen können, dass externe Hosts die Bilder auf unbestimmte Zeit online halten).
Oh Entschuldigung, nächstes Mal werde ich mein Bestes geben, damit alles schön aussieht! Wenn ich von Stackoverflow komme - dort mögen Leute Links. Wird das nächste Mal visueller!
Überhaupt kein Problem. Wir sind hier visuelle Leute :)

Antworten (1)

Bearbeiten, nachdem ich mir die angehängte Datei angesehen hatte, fügte ich eine Antwort unter der Überschrift „Bitmap-Skalierung“ hinzu. Ich habe den Teil „Nicht gleichmäßige Positionierung und Größe“ der Antwort drin gelassen, weil das immer noch relevant und wichtig ist (beide Dinge müssen für eine qualitativ hochwertige Ausgabe korrekt sein).

Es sollte sowohl in Photoshop als auch in Sketch möglich sein. Ohne genau zu wissen, wie das Dokument aufgebaut ist, ist es schwierig, das Problem zu lokalisieren. Aber hier ist meine beste Vermutung:

Nicht gleichmäßige Positionierung und Größe

Wenn ein Element 3 Pixel breit ist und Sie es um 50 % verkleinern, ist das resultierende Element 1,5 Pixel breit. Dasselbe passiert mit der Positionierung – Elemente können auf halben Pixeln landen. Das Ergebnis sind oft verschwommene und / oder halb undurchsichtige Kanten, wie Ihr Beispiel zeigt. Es ist auch wahrscheinlich, dass Ihre PNGs 1 oder 2 Pixel breiter und / oder höher sind, um dies zu berücksichtigen, was wahrscheinlich nicht das ist, was Sie wollen.

Eine Möglichkeit, dies zu beheben, besteht darin, sicherzustellen, dass sich alles auf gleichmäßigen Pixelpositionen befindet und gleichmäßige Pixelbreiten und -höhen aufweist.

Ein anderer Ansatz besteht darin, mit 1× zu arbeiten und den Export für Retina hochzuskalieren. Sie sollten großartige Ergebnisse erzielen, und das bedeutet, dass alles, was Sie erstellen, gut in das 1×-Raster einrastet. Die gleiche Technik funktioniert auch für Photoshop.

Bitmap-Skalierung

Nachdem Sie sich Ihre example.sketchDatei angesehen haben, ist klar, worum es geht. Die ipad_CUTEbene ist eine Bitmap. Das bedeutet, dass alle Elemente zu einer einzigen Bitmap-Ebene zusammengeführt wurden, sodass eine Skalierung nur als Bitmap erfolgen kann. Die Bitmap-Skalierung führt zu den Ergebnissen, die Sie sehen – verschwommene Kanten, Skalierungsartefakte und andere Probleme.

Wenn Sie in Sketch oder Photoshop arbeiten und die Ausgabe skalieren müssen, ist es am besten, alle Elemente als Vektorebenen beizubehalten.

Alle meine Größen sind sogar Bot-Positionen nicht. Ich dachte, dass Positionen keinen Einfluss haben ... Ich werde es jetzt überprüfen
Nein, es funktioniert nicht wie erwartet - Kanten sind halbtransparent.
@MinimeDJ Kannst du bitte eine Beispieldatei mit dem Problem zum ursprünglichen Beitrag hinzufügen? Ich werde mal sehen, ob ich dem Problem auf den Grund gehen kann.
Ich habe eine Datei hinzugefügt, siehe Hauptfrage oben unten.
Danke für Ihre Antwort. Gibt es eine Möglichkeit, mit Bitmap keine verschwommenen Kanten zu haben?
Bitmaps sind ein Raster aus Pixeln und können ohne Bitmap-Skalierungsartefakte nicht in der Größe geändert werden. Sie sollten alles tun, um die Elemente als Vektorformen zu erhalten.
So verkleinern Sie PNG-Assets richtig
AntwortenHierDatenschutz-Bestimmungen1y, 0v