Warum werden Formen und Abstände beim Verkleinern in Illustrator verzerrt?

Was ich brauche:

Ich erstelle ein Android-App-Symbol. Es ist also offensichtlich pixelbasiert und ich möchte darauf achten, dass es "pixelperfekt" wird, und dann muss ich es in verschiedenen Dimensionen (z. B. 36 x 36, 64 x 64) exportieren, indem ich es entsprechend verkleinere, ohne Proportionen und scharfe Kanten zu verlieren.

Was ich ausprobiert und beobachtet habe:

(mit Illustrator 2015)

Was ich verwende, um eine pixelgenaue Form zu erhalten, ist Am Pixelraster ausrichten , damit die Kanten nicht verschwommen erscheinen. Es funktioniert , aber Abstand und Breite der Formen ändern sich!

(A) Am Pixelraster ausrichten ist von Anfang an deaktiviert

  1. Ich habe eine Form erstellt (keine Striche, nur Füllungen). Am Pixelraster ausrichten ist NICHT GEPRÜFT
  2. Skalierte es auf die Größe einer App
  3. An Pixelgitter ausrichten aktiviert und Form wurde verzerrt. Eine der Linien wird dünner und der Abstand wird ungleichmäßig. Es ist nicht sicher, was verzerrt wird. Es hängt von Maß zu Maß / Form zu Form ab.

Beobachtung : Breiten und Abstände sind betroffen

(B) An Pixelgitter ausrichten wird überprüft, bevor mit dem Zeichnen der Form begonnen wird

  1. Ich habe eine Form erstellt (keine Striche, nur Füllungen). Am Pixelraster ausrichten ist AKTIVIERT
  2. Skalierte es auf die Größe einer App
  3. Die Form wurde verzerrt. Das Ergebnis war ähnlich wie bei (A) - 3

Beobachtung : Hauptsächlich sind die Abstände betroffen. Es ist nicht proportional

(Bitte sehen Sie sich das grob illustrierte Bild am Ende an (dies sind keine echten Pixel. Ich habe nur Gitter erstellt, um es Ihnen klar zu machen. Die Dinge sind etwas übertrieben):

Wie kann ich es beheben (dh diese 3 Rechtecke gleicher Breite mit gleichem Abstand zwischen ihnen bekommen)?

PS:

  1. Ich habe Antworten in Adobe-Foren und hier von Scott zu ähnlichen Fragen gelesen. Aber ich betrachte dies als eine neue Frage, da andere nicht erklärt haben, wie wir dieses Problem der ungleichmäßigen Abstände und Breiten lösen können, wenn wir es verkleinern und dennoch ein pixelgenaues Design erhalten möchten.

  2. Dinge verzerren mehr, wenn es abgerundete Ecken gibt. Manche Ecken bekommen mehr Radius, manche weniger, anstatt gleich zu sein.

Geben Sie hier die Bildbeschreibung ein

Ist das eine Frage? Scheint nicht zu sein. Großartige Informationen, aber wahrscheinlich am besten, wenn Sie eine Frage beantworten . Das Posten allgemeiner Informationen als neue Frage ist unangebracht. Sie können eine Frage erstellen und diese dann selbst beantworten. Das zu tun wäre besser.
Aber ich weiß die Antwort nicht. Ich möchte nur wissen, ob es wirklich ein Problem ist oder ob ich es beheben kann oder ob ich etwas falsch mache? Aber mir ist klar geworden, dass ich nichts in Frage und Detail gestellt habe, also könntest du das sagen. Soll ich es so bearbeiten, dass es wie eine Frage aussieht?
Habe es übrigens bearbeitet.
Okay, dann muss ich nach der Bearbeitung sagen, dass die Frage wirklich unklar ist. Hier gibt es viele überflüssige Informationen, und wenn die Frage mittendrin steht, ist es sehr schwierig, herauszufinden, was die eigentliche Frage sein könnte.
Hallo @Scott, bitte überprüfen Sie jetzt. Hoffe es ist jetzt besser erklärt und gefragt.
@Scott Ich bitte Sie, sich mit dieser Angelegenheit zu befassen. Ich habe die 2 Antworten hier gelesen, aber sie scheinen mein Problem nicht zu lösen.
Da ich hier keine Antwort auf meine Frage habe, stelle ich eine andere "auf den Punkt"-Frage. Wäre das ok?

Antworten (2)

Zuerst möchte ich fragen, ob es sich bei diesen Linien um Füllungen oder Striche handelt. Und wenn Sie das Kontrollkästchen „Skalieren von Strichen und Effekten“ neben „An Pixelraster ausrichten“ aktiviert haben.

Wenn es sich noch um einen Strich oder nicht erweitert handelt, müssen Sie immer das Kontrollkästchen Striche & Effekte skalieren aktivieren. Wie gezeigt einige Beispiele.

Dies ist ein Beispiel von Linien auf der ersten rechten Seite (nur Strich), die mit dem Kontrollkästchen Striche skalieren und Effekte skaliert wurden, das im Transformationsfenster angezeigt wird. Wie abgebildet ist das Verhältnis ok.Geben Sie hier die Bildbeschreibung ein

Dies ist ein Beispiel für Linien // ganz rechts (nur Striche) kopiert und NICHT mit dem Kontrollkästchen „Skalieren von Strichen und Effekten“ skaliert. Es ist verzerrt oder nicht proportional zum OriginalGeben Sie hier die Bildbeschreibung ein

Und wenn es umrissen/erweitert ist, verwenden Sie das Skalierungswerkzeug wie gezeigt und überprüfen Sie auch die Skalierungsstriche und den Effekt.

Geben Sie hier die Bildbeschreibung ein

Bitte überprüfen Sie die Fragendetails. Ich habe bearbeitet. Ich hoffe, Sie verstehen es besser und kennen sich mit Formen aus. Ich werde Ihre vollständige Antwort in der Zwischenzeit im Detail lesen.
Das Scale-Tool hat eine Sache für mich behoben. Es funktionierte für abgerundete Ecken und behielt die Proportionen bei, wenn "Rechteckecken skalieren" aktiviert war. Zweitens ist das Hauptproblem noch nicht gelöst. Ich habe 3 horizontale Rechtecke gezeichnet, wie ich im Detail erwähnt habe. Skalierte sie auf 20 %, indem Sie die beiden Kontrollkästchen "Striche skalieren ..." und "Ecken skalieren ..." aktivieren. Es hat sie proportional skaliert, aber als ich die Pixelvorschau einschaltete, zeigte es m eine Seite jedes Rechtecks ​​verschwommen! Das ist das eigentliche Problem. Wie kann ich das überwinden? Wenn ich auf "An Pixelraster ausrichten" klicke, führt dies zu denselben ungleichmäßigen Abständen und ungleichmäßigen Breiten :(
Eine Sache noch. Das Menü „Skalieren“ bietet Optionen zum Skalieren in %. Was ist, wenn wir in exakter Größe exportieren müssen, z. B. 64 x 64 Pixel?
Wenn dies der Fall ist, verwenden Sie das Transformationsfenster und geben Sie die gewünschte Skalierung ein. Stellen Sie einfach sicher, dass Ihre Einstellungen auf px (Pixel) eingestellt sind.
Okay. Was sagt ihr zu meinem vorletzten Kommentar? Warum werden Kanten beim Verkleinern unscharf? Wie kann ich es verhindern? Ich kann seine Antwort nicht finden.
Überprüfen Sie die verschwommenen Pfade, wenn sie einen vorhandenen Effekt haben, der noch nicht erweitert wurde (z. B. runde Ecken, Schlagschatten oder Striche mit Textur/Form).
kannst du mir zeigen, dass unscharfe kanten mit und ohne pixelraster in der vorschau sind
Bitte lassen Sie mich wissen, ob Sie das sehen möchten :)
Ok ich habe gesehen was ich wollte. Illustrator hat es in der Pixelvorschau geschätzt, weil es so manute / zu wenig ist, dass jedes Pixel getrennt ist und einen Übergang zwischen Schwarz und Weiß macht. Dies ist nur in der Pixelvorschau. Ich denke, es ist in Ordnung, solange es ein Vektor ist.
Ja, das verstehe ich, aber ich muss ein App-Symbol erstellen, dh ich entwerfe etwas für den Bildschirm in 3-4 verschiedenen Größen, also muss ich sie pixelgenau machen. Ich habe versucht, sie nicht am Pixelraster auszurichten, und das Symbol sah nicht scharf aus. Die meisten Leute sagen, dass Sie am Pixelraster ausrichten verwenden, wenn Sie ein gestochen scharfes Design erstellen möchten. Aber die Dinge funktionieren hier nicht. Wenn Sie berühmte App-Symbole wie FB, Google, Insta sehen, sehen alle scharf aus. Was kann ich also tun?
Das Vektorformat ist genau mein Freund, das ist NUR in der Pixelvorschau. Vorschau. Die eigentliche wird so knackig wie Messer :-). Ein Beispiel ist ein Pixel-Vorschaubild in Photoshop im tatsächlichen Druck oder zeigt es gut; und wenn Sie hineinzoomen, wurde es pixelig, weil es Ihr Bild in kleinen Pixeln für Monitore neu abtastet. Bei Vektorobjekten gibt es kein Problem. Mofi Mushkela verstanden? :-)
Nö. Ich kann es beweisen und ich habe es jedes Mal gesehen. Siehe diese 2 Bilder: drive.google.com/open?id=1GKgcZXxfDx45G25WnMfO92thCeqg8uby Beide wurden in Illustrator entworfen. Einer hat scharfe Kanten, weil er am Pixelraster ausgerichtet ist. Ein anderer hat unscharfe Kanten, weil er nicht ausgerichtet ist. Was würden Sie jetzt sagen?

Sie verstehen, dass es anders ist, wenn diese Linien Pfade mit Strichen oder Quadrate mit Füllung sind. Wenn Sie Linien gestrichen haben, wird dies wahrscheinlich nicht funktionieren, da die Linie nur am Raster einrasten kann. Damit dies funktioniert, müssen Sie jedoch am 1/2-Raster ausrichten. Erweitern Sie also die Striche, bevor Sie dies tun.

Sie können auch nicht inkrementell skalieren, Sie müssen die richtige Größe auf einmal skalieren oder überhaupt nicht skalieren. Sie können es also auf 2/3 herunterskalieren, aber 1/3, aber nichts anderes wird funktionieren.

Persönlich aktiviere ich niemals das Pixel-Snapping, da es für die meisten Arbeiten sehr unproduktiv ist *. Wie in diesem Fall ist es besser, die Pixelfangskalierung zu deaktivieren und dann die Punkte so auszurichten, dass sie ein halbes Pixel schließen.

* Es ist nicht so, als wäre es kaputt oder so, aber die Einschränkung, die es für Ihre Effekte verursacht, ist einfach zu groß, es gibt eine begrenzte Anzahl von Optionen. Optimieren Sie zuerst besser und schnappen Sie dann, was Sie brauchen.