Erstellen von qualitativ hochwertigen Symbolen mit mehreren Auflösungen

Vorwort:

Ich musste ein paar (vielleicht 30 oder so) Symbole für eine App entwerfen, die ich entwickle. Anfangs war der Gedanke, all diese Icons für verschiedene Auflösungen zu entwerfen, wirklich entmutigend für mich (und ist es immer noch), besonders wenn man bedenkt, dass ich mehrere Themen entwerfen muss. Also beschloss ich, Vektorsymbole zu erstellen, damit ich einmal entwerfen und mehrmals die Größe ändern konnte, ohne Qualitätsverlust. Aber wie sich herausstellte, lag ich absolut FALSCH . Wenn ich das SVG in PNG exportiere, speziell für niedrige Auflösungen, ist die Qualität schrecklich und bei weitem nicht gut. Ich könnte sagen, dass Anti-Aliasing fehlt.

Die Frage:

Wie sollte ich beim Entwerfen von Symboldesigns mit unterschiedlichen Auflösungen vorgehen?

  • Sollte ich jede Auflösung unabhängig entwerfen??
  • Mache ich beim Exportieren des SVG in PNG etwas falsch?
  • oder was?

ÜBRIGENS: Ich verwende InkScape, um das SVG zu entwerfen

Vielen Dank

BEARBEITEN

Die Auflösung der Ausgabedatei ist nicht Standard, da ich ein Sprite-Bild erstelle. Aber man könnte sagen, dass die Symbolgrößen fast 32x32 48x48 72x72 96x96 betragen ...

Und hier sind die Symbole:Symbole als Sprite-Bild

BEARBEITEN 2

Um ehrlich zu sein, fange ich an zu glauben, dass ich die falsche Frage stelle (an der falschen Stelle :-D ). Als ich das obige Bild hochgeladen habe, dachte ich, dass es nicht so schlimm ist. oder selbst wenn es schlecht ist, ist es nicht so schlecht wie das Endprodukt. Also fing ich an, mit dem Symbol in GIMP herumzuspielen, indem ich verschiedene Hintergründe hinzufügte. ES IST NICHT SO SCHLECHT.

Also sollte ich hinzufügen, dass ich die Symbole für eine Android-App benötige. Vielleicht ist Android oder mein Code oder sogar eine verkleinerte ImageView für dieses Durcheinander verantwortlich.

Was sind Ihre angestrebten Vorsätze?
Ich vermute, es ist irrelevant. Siehe meine Bearbeitung.
Bei einer ausreichend kleinen Größe wird es relevant. Beim Entwerfen eines Symbols mit 16 Pixel² müssen andere Designaspekte berücksichtigt werden als bei einem Symbol mit 128 Pixel²
Das ist völlig richtig. Danke für den Kommentar.

Antworten (1)

Soll ich jede Auflösung unabhängig voneinander entwerfen?

Es kommt auf das Symbol an.

Flache, fette Strichzeichnungen können wahrscheinlich als SVG gestaltet und in der App/Website einfach nach Bedarf skaliert werden. So funktionieren Icon-Fonts ... sie sind nur Vektor-Icons und passen ihre Größe nach Bedarf an.

Wenn es sich dagegen um ein fotorealistisches Symbol mit feinen Details handelt, ist der Prozess normalerweise so:

  • groß gestalten
  • für jede Größe verkleinern
  • Passen Sie jede spezifische Größe auf Pixelebene von Hand an

Die manuelle Optimierung kann einfach das Anpassen einiger Pixel hier und da sein, oder es könnte eine größere Bearbeitung sein, bei der Sie immer mehr Details entfernen, wenn Ihre Bilder kleiner und kleiner werden.

Mache ich beim Exportieren des SVG in PNG etwas falsch?

Möglicherweise, obwohl ich denke, dass Inkscape beim Export standardmäßig Anti-Aliasing verwendet. Stellen Sie im Exportfenster sicher, dass Sie keine Anti-Aliasing-Option deaktiviert haben.

FWIW, für die Konvertierung von Inkscape in PNG besteht mein persönlicher Arbeitsablauf normalerweise darin, Screenshots zu verwenden. Ich mache einfach einen Screenshot von Inkscape, füge ihn in meine Rasterbearbeitungssoftware (oft Pixelmator) ein und mache dort meine Pixelanpassungen und speichere sie dann auf diese Weise in PNG.

Danke für die Antwort. Tatsächlich sehe ich diesen Qualitätsverlust nicht, wenn ich in InkScape herauszoome. Aber wenn ich einen Screenshot verwende, ist der Hintergrund undurchsichtig. wäre es möglich den hintergrund rückstandslos zu entfernen??
Die offensichtlichste Möglichkeit für schlechte Qualität oder fehlendes Anti-Aliasing ist, dass die rohen Pixelabmessungen für die kleineren Symbole wahrscheinlich einfach nicht genug Pixel haben, um damit zu spielen. Zwicken ist die Antwort.
Wie sich herausstellt, gibt es irgendwo in der Anwendung eine Neuskalierung. Das Problem liegt also nicht an der Grafik. Trotzdem werde ich die Antwort akzeptieren, da ich einiges über das Icon-Design daraus gelernt habe. Dank bro
Es gibt keine Neuskalierung beim Export aus Inkscape, wenn Sie die Export-dpi auf dem Standardwert von 90 belassen. Die meisten setzen dies auf 72 und fragen sich dann, was mit den seltsamen Pixelabmessungen ihrer Exporte passiert.
Erstellen von qualitativ hochwertigen Symbolen mit mehreren Auflösungen
AntwortenHierDatenschutz-Bestimmungen1y, 0v