Wie kann ich ein Bild aus einem Illustrator-Bild in mehreren Größen exportieren?

Ich bin neu in Adobe Illustrator und habe ein Logo-Bild, das ich in 5 oder 6 verschiedenen Größen verwenden muss. Das Logo-Bild wurde in Adobe Illustrator erstellt, aber wenn ich versuche, das Bild in PNG oder JPEG zu speichern, stellt sich heraus, dass das, was eigentlich einfach sein sollte, sehr kompliziert ist.

Ich verstehe, dass Adobe Illustrator das Bild als eine bestimmte Größe behandeln und diese Größe dann mit einem Skalierungsfaktor von Pixel pro Zoll multiplizieren möchte, um die tatsächliche Anzahl der Pixel zu erhalten, die gespeichert werden. Es stehen einige wenige Skalierungsfaktoren zur Auswahl, die einen sehr begrenzten Satz an resultierenden Ausgabepixelgrößen ergeben.

Für viele Webanwendungen kennt der Benutzer jedoch bereits die benötigten Ausgabepixelabmessungen. Gibt es eine Möglichkeit, nur die Pixelbreite oder -höhe der gespeicherten Grafik anzugeben, die benötigt wird?

Ich habe Vorschläge zum Exportieren des Bildes und zum Ändern der Bildgröße mit Photoshop erhalten, aber das führt zu einer schlechteren Bildqualität als das Erstellen des endgültigen Bildes aus dem Vektorbild.

Datei> Für Web speichern und geben Sie die Pixelmaße ein, indem Sie auf die Image SizeRegisterkarte rechts im Fenster Für Web speichern klicken .

Oder verstehe ich dich nicht richtig?

Das Verwenden File → Save for Webund Eingeben der Dimensionen macht das, wonach Sie suchen. Außerdem verwendet Illustrator die Vektorskalierung, sodass die Ergebnisse besser sind, als wenn Sie dasselbe in Photoshop versucht hätten. Wenn Sie Abmessungen eingeben, die nicht mit dem Dokument in Photoshop übereinstimmen, wird das Bild bitmap-skaliert.

Beachten Sie, dass Sie nach dem Ändern der Abmessungen auf Übernehmen klicken müssen, wenn Sie eine Version von Illustrator vor CS6 verwenden.

Oh, und es besteht eine sehr gute Chance, dass Sie es deaktivieren möchten Convert to sRGB- es wandelt Ihr Bild zerstörerisch vom aktuellen Farbraum in sRGB um, wodurch die Farben verschoben werden.

Wenn ich mehrere Pixelgrößen unterstützen muss, mache ich eine Kopie und skaliere die Grafik in derselben AI-Datei. Jede Größe wird auf eine separate Zeichenfläche mit der richtigen Größe übertragen. Ich hänge den Boardnamen an das zu exportierende Dateiformat an. Dann führe ich einen jsx aus, der jede Zeichenfläche exportiert und das Dateiformat aus dem Namen mit den letzten Einstellungen aufnimmt, die ich für dieses Format in dieser Datei eingegeben habe. Das ist alles in CS5.

Ich verwende diesen Workflow für einige Logos, Symbole und Display-Anzeigen.

Sie können in Photoshop auch ein Dokument in der entsprechenden Größe erstellen (oder einen Bereich mit Hilfslinien einrahmen) und dann Datei> Vektorgrafiken platzieren.

Sie können die Größe der Form vor dem Rendern skalieren. Eine anschließende Skalierung verringert natürlich die Qualität.

Ich habe diese Technik immer für Logos verwendet, um die Größe genau zu steuern, z. B. um die Grundlinie der Textelemente des Logos auf eine Pixelgrenze zu bringen (eine Art Hinweis).

Eine Ergänzung zu diesem Thema, das ich für Entwickler von mobilen Apps interessant fand, ist dieses Skript , das mit einem Klick Retina-Assets für iOS und Android erstellt.