Wie exportiert man Symbole in verschiedenen Größen, ohne unscharfe Kanten zu bekommen?

Ich muss Symbole für eine Android-App in 4 verschiedenen Größen exportieren: 36 x 36, 48 x 48, 64 x 64 und 72 x 72 Pixel. Die Originalgröße des von mir erstellten Symbols hat eine Größe von 272 x 272 px.

Siehe zum Beispiel dieses Bild:

Geben Sie hier die Bildbeschreibung ein

Das linke ist in Originalgröße. Die anderen beiden sind verkleinert, aber beim Export haben sie unscharfe Kanten

Was ich jetzt immer getan habe, ist, sie zu verkleinern und einzeln als PNG mit der Größe zu exportieren, die ich brauche. Aber es gibt ein Problem. Einige der Kanten in jedem Symbol werden unscharf. Sie sind nicht knackig. Allerdings ist mein ursprüngliches Symbol, wenn es zum Testen exportiert wird ( 272x272 ), scharf.

Was ist der richtige Weg (falls vorhanden), um scharfe Kanten für jede Symbolgröße zu erhalten, die ich exportiere?

PS: Eine Möglichkeit besteht darin, jedes Symbol in einer separaten Datei mit genau der Größe zu erstellen, die ich benötige, und es am Pixelraster auszurichten. Aber dafür müsste ich jedes Mal ein neues Symbol erstellen, wenn ich eine andere Größe benötige. Wenn das die einzige Möglichkeit wäre, würde ich es tun , aber machen professionelle Designer das wirklich so? Sie können zB das f des Facebook-Logos sehen. Es ist auf jedem Gerät knackig. Ist es also die Realität, dass sie jede Größe individuell für dasselbe Logo entwerfen?

Stellen Sie die Interpolation auf die nächste Nachbarschaft ein. Wie auch immer, das sieht erstaunlich aus wie Ihre letzte Frage. Und hat das gleiche Problem
Ja, es mag so aussehen, als wäre es wie bei der letzten Frage, aber ich habe aus der letzten Frage einige gute Dinge gelernt. Ich wollte mehr über den nächsten Teil wissen, also habe ich die Frage speziell hier gestellt. (Ich muss mehr über das 1/3 wissen, von dem du erzählt hast) :)
Was ist also diese "Interpolation"? Ich bin darauf vorbereitet. Aber es wird die Genauigkeit der Proportionen verringern?
Was haltet ihr von meinem PS-Ding?
"Interpolation" ist eine in Illustrator verfügbare Einstellung?
„Ist es also Realität, dass sie jede Größe individuell für dasselbe Logo entwerfen?“ Ja. Es gibt wirklich oft keine Abkürzung zu hervorragenden Ergebnissen.
@Scott Ich bitte Sie freundlich, sich die Antwort von Peter Walser hier anzuschauen. graphicdesign.stackexchange.com/questions/21455/… Er erwähnte einige Techniken und gab eine Referenz an. Bei der Referenz ging es mehr um das Logodesign als darum, scharfe Kanten mit der Fähigkeit "Gitterspannen" zu erzielen, sagte er. Gibt es also eine andere Quelle, damit ich es lesen, lernen und ausprobieren kann? Ich denke, es wäre wirklich hilfreich. Ich würde mich auch freuen, wenn Sie hier darauf antworten würden :) Danke.
@VikasKumar nächster Nachbar ist eine Einstellung zum Skalieren von Pixelbildern in PS. In diesem Fall ist es eine Möglichkeit wie die Rasterversion von Snap to Pixel
Sie müssen mit Ihren Maßstäben im Hinterkopf entwerfen, deshalb fordere ich Sie auf, das Ding zuerst in Ihrer niedrigsten Auflösung zu entwerfen. Sie können es leicht vergrößern und Details hinzufügen
Ich habe es versucht. Ich habe mit 24x24 px entworfen und auf 36x36 hochskaliert. Ich habe das gleiche Anti-Aliasing, daher unscharfe Kanten. Bei Ihrem Satz „Sie können einfach vergrößern und Details hinzufügen “ geht es also eher darum, diese Unschärfepixel beim Hochskalieren manuell zu korrigieren ODER mehr darum, mit einem „Goldenen Schnitt“ zu entwerfen, sodass Breite und Abstand automatisch angepasst werden, wenn auf eine feste Größe skaliert wird?
Kann ich diese Frage verbessern, um 1 Ablehnung zu entfernen?

Antworten (3)

Zwei kurze Antworten:

1) Diese "Unschärfe" ist entweder Anti-Aliasing oder Nicht-Pixel-Ausrichtung: Wenn die Ausrichtung erfolgt, kümmert sich Ihr PS-Workflow darum, allerdings mit viel zusätzlicher Arbeit; wenn Anti-Aliasing, wird es nicht.

2) Nein, so handhaben die meisten von uns das Icon-Design nicht: Wir neigen dazu, vektorbasierte Apps zu verwenden, die die Ausgabe in mehreren Auflösungen unterstützen: Mein Toolkit umfasst Adobe Illustrator, Adobe InDesign, Affinity Designer, Inkscape, Sketch und auf iPad Pro Concepts .

Ich verwende derzeit hauptsächlich Affinity Designer für die Arbeit mit Symbolen, der über eine leistungsstarke Export-Persona mit Slice-Definitionen mit mehreren Auflösungen verfügt, mit denen ich das Symbol entwerfen und mit einem Klick Exporte für Symbole aller geeigneten Auflösungen und Formate für Mac OS einrichten kann , Windows, iOS und Android.

Wie oben erwähnt, können Sie Adobe Photoshop verwenden, um Vektorgrafiken zu erstellen, aber es ist nicht der primäre Anwendungsfall für die App, und daher ist es klobig und klobig; Angesichts des niedrigen Preises (29 € für die ewige Lizenz) war Affinity Designer angesichts seiner Leistungsfähigkeit ein Kinderspiel.

Wenn Sie von 272 auf 36 skalieren, werden Sie wohl unscharfe Kanten nicht vermeiden können, ohne Ihr Symbol zu ändern, da es einfach halbe Pixel haben wird, da Sie (zumindest wenn meine Mathematik mich nicht vollständig im Stich gelassen hat) 272 nicht durch 36 ohne a teilen können Rest.

Es ist am besten, in der kleinsten benötigten Größe zu entwerfen und dann nach oben zu skalieren. Vielleicht ist dieses Video hier hilfreich: https://vimeo.com/169809377

Auch eine Skalierung nach oben verursacht das gleiche Problem. Also muss ich auch das reparieren?
@VikasKumar Sie erhalten unscharfe Kanten, sobald die skalierte Version kein Vielfaches Ihrer Basisgröße ist, da Ihr Design dann nicht auf bestimmten Pixeln, sondern zwischen ihnen sitzt, was dazu führt, dass Photoshop Aliasing verwendet. Daher müssen Sie Anpassungen vornehmen, damit Ihr Design wieder auf vollen Pixeln sitzt. Ich kenne Photoshop nicht, aber viele andere Programme (z. B. Illustrator) haben Befehle wie "Pixel-perfekt machen", die Ihre Arbeit verschieben, damit sie wieder passt. helpx.adobe.com/illustrator/how-to/pixel-perfect.html
Aber die Verwendung dieser Tools wie zum Beispiel am Pixelraster ausrichten zerstört das Verhältnis.
@VikasKumar Nun, soweit ich weiß, sind dies Ihre einzigen Optionen: - Leben Sie mit den verschwommenen Kanten - Passen Sie Ihr Design so an, dass es pixelgenau ist - Wählen Sie Exportgrößen, die ein Vielfaches Ihrer Basisgröße sind (vorausgesetzt, Ihre Basisgröße ist bereits Pixel -perfekt) Ansonsten habe ich leider keine Ahnung, wie ich das gewünschte Ergebnis erzielen kann :(

Im Photoshop. Verwenden Sie die Form und konvertieren Sie diese dann in ein intelligentes Objekt, anstatt die Ebene zu rastern.

Dann ändere jedes Mal einfach dein gewünschtes PNG, du bekommst von allen dasselbe.

Sie müssen nur auf die Ebene klicken und den Inhalt bearbeiten und ein anderes PNG auswählen.

Sie erhalten gleiche Größen mit größerer Genauigkeit.

Wie exportiert man Symbole in verschiedenen Größen, ohne unscharfe Kanten zu bekommen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v