„Für Web speichern“ macht meine Illustrator-Datei verschwommen. (30x30 Pixel)

Ich stecke seit 2 Tagen bei Illustrator fest. Alles, was ich versuche, ist, ein einfaches Symbol mit 30 x 30 Pixeln für ein App-Projekt zu erstellen, das ich mache. Die Zeichnung besteht aus wie 4 schwarzen Linien. Sieht in Illustrator perfekt aus, aber sobald ich für das Web speichere, ist es verschwommen. Ich bin von Photoshop zu Illustrator gewechselt, da mir gesagt wurde, dass Vektoren sauberere/schärfere Linien erzeugen.

Was ist los? Kämpfe ich hier auf verlorenem Posten? Wenn ein Bild 30 x 30 Pixel groß ist, ist es möglich, dass es nicht verpixelt ist? Bitte jemand helfen !!!! :( PS habe in so vielen anderen Foren geschaut.

Haben Sie versucht, das Bild als SVG-Vektordatei zu exportieren? Wenn es sich um ein Rasterbild handelt, haben Sie versucht, es mit 100 % anzuzeigen und nicht zu vergrößern? Können Sie Beispiele für die Problemgrafik posten?
Es ist möglich, dass Sie nur ganzzahlige Pixel treffen müssen.
Nach weiteren Kommentaren zu Cais Antwort sehe ich, dass es sich um ein Rastersymbol handelt. Illustrator ist praktisch nutzlos, um winzige Rastersymbole zu erstellen. Sie wurden von der Person, die Ihnen geraten hat, Illustrator zu verwenden, spektakulär schlecht beraten.
Könnt ihr noch andere Programme empfehlen? @BillyKerr
@nick. Besser wäre ein Rasterbild-Editor wie Photoshop oder die kostenlose Software GIMP.

Antworten (1)

Wenn Sie in ein Rasterbild exportieren, erhalten Sie leider keine saubereren oder schärferen Linien von Illustrator. Sie befinden sich innerhalb von Illustrator oder wenn Sie in ein Vektorformat exportieren (SVG eignet sich beispielsweise gut für Websymbole), aber der Export in ein Rasterformat (JPG, PNG usw.) wird Ihnen kaum einen Unterschied machen.

Wenn Sie in Illustrator arbeiten und in ein Rasterformat exportieren, ist es am besten, mit aktivierter Pixelvorschau zu arbeiten (oder diese zumindest regelmäßig zu überprüfen) ( Ansicht → Pixelvorschau ). Die einzige Möglichkeit, um sicherzustellen, dass Sie keine "Unschärfe" haben (was nur Anti-Aliasing ist), besteht darin, sicherzustellen, dass Ihr Bildmaterial am Pixelraster ausgerichtet ist. Sie können "Am Pixelraster ausrichten" aktivieren, damit Illustrator dies für Sie erledigt.

Der einzige sichere Weg, Ihr Symbol ohne "Unschärfe" zu erhalten, besteht darin, es so anzupassen oder neu zu zeichnen, dass es an Ihrem Pixelraster ausgerichtet ist ...

Ein Beispiel ( entnommen aus einer vorherigen Antwort ) ...

Nehmen Sie dieses Boombox-SVG-Symbol. Der ursprüngliche Vektor auf der linken Seite sieht gut aus. Betrachten Sie dasselbe mit 16 × 16 Pixel und es sieht schrecklich aus. Sie können sehen, dass dies daran liegt, dass die Pfade nicht an den Pixeln ausgerichtet sind. In der Anzahl der verfügbaren Pixel sind zu viele Informationen zu sehen.

Geben Sie hier die Bildbeschreibung ein

Bild 1: Originalvektor (links), 16×16 Pixel Vorschau (rechts)

Die Lösung besteht darin, das Symbol speziell für die Größe zu entwerfen, in der es angezeigt wird. Nehmen Sie dasselbe Symbol erneut und zeichnen Sie die Pfade neu, sodass sie am Pixelraster ausgerichtet sind, und Sie haben ein schönes, sauberes Symbol ( zumindest sauberer, der Lautsprecher / Kreis könnte wahrscheinlich noch etwas angepasst werden) :

Geben Sie hier die Bildbeschreibung ein

Bild 2: 16×16 Pixel Vorschau des Originalvektors (links), angepasste Pfade zum Anpassen des Pixelrasters (rechts)

Danke! Wenn Sie also diagonale Linien zeichnen, wird es immer verschwommen aussehen, nehme ich an?!
Wenn Sie ein Rasterbild exportieren, dann ja, daran führt kein Weg vorbei
Keine Ahnung, wie diese SVG-Bilder funktionieren, wenn ich ihren Code öffne?
SVG ist Code ja (es ist eine Form von XML), Sie sollten (je nachdem, wo Sie es verwenden) in der Lage sein, es als Bild wie jedes andere Bild zu verwenden (z. B. in CSS oder einem Tag) <img>.
hmmm, ich glaube nicht, dass es in Xcode funktionieren wird - ich werde es morgen versuchen und dich wissen lassen! Danke für deine Hilfe :D
Überhaupt kein Problem. Ich habe es eine Weile nicht gemacht, kann mich also nicht erinnern, aber es gibt definitiv Möglichkeiten, SVGs in XCode zu verwenden
„Für Web speichern“ macht meine Illustrator-Datei verschwommen. (30x30 Pixel)
AntwortenHierDatenschutz-Bestimmungen1y, 0v