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

29

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.

Howard
quelle
Die Anzahl der Möglichkeiten, dies zu tun, ist meine Auswahl aller Bilder, die Sie exportieren möchten, dann gibt es die Option für Breite und Höhe in der Kopfzeile, ändern Sie sie einfach und exportieren Sie sie

Antworten:

26

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?

Scott
quelle
Perfekt danke. Ich habe gerade 15 Minuten mit der "Export" -Funktion verbracht, aber da sie sich weigert, weniger als 72ppi zu verwenden, musste ich das Artwork und die Zeichenfläche für sehr kleine Exporte neu skalieren, was wahrscheinlich auch der Fragesteller tat.
Kjeld Schmidt
12

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.

In Illustrator für das Web speichern

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.

Bildbeschreibung hier eingeben

Marc Edwards
quelle
In CS6 gibt es keine Schaltfläche "Anwenden" .... und ich bin nicht einverstanden mit "In RGB konvertieren". Sie möchten, dass diese Option für Bilder aktiviert ist, die für das Web bestimmt sind.
Scott
2
Danke für den CS6-Tipp. Konvertieren in sRGB ist absolut der falsche Ansatz für Web- und UI-Arbeit. Hier ist ein ganzer Artikel darüber, warum: bjango.com/articles/photoshop ( Fordern Sie mich auf Ihre Gefahr!)
Marc Edwards
2
Hast du den Artikel tatsächlich gelesen? Wenn Sie mit dem Web und der Benutzeroberfläche arbeiten, MÜSSEN Sie während des gesamten Vorgangs genaue Farbwerte beibehalten. Wenn Sie als Farbe # FF0010 eingeben, MUSS dies in der Datei als # FF0010 ausgegeben werden, wenn Sie beabsichtigen, die Farbe im Code abzugleichen. Dies bedeutet, dass Konvertieren in sRGB ausgeschaltet sein MUSS. Ich habe das Gefühl, dass Sie diese Art von Arbeit nicht machen und nicht verstehen, worum es geht.
Marc Edwards
1
Scott, bitte nehmen Sie dies nicht als Ad-Hominem-Angriff, aber ich glaube, Sie haben aufgrund ähnlicher Diskussionen einige falsche Vorstellungen über die RGB-Farbdarstellung aufgegriffen. Siehe auch graphicdesign.stackexchange.com/questions/7815/… .
e100
3
Die Konvertierung in sRGB ist in fast allen denkbaren Situationen, in denen für das Web gearbeitet wird, die falsche Wahl. "Es gibt einen GRUND, warum das Save for Web-Team die Option" In sRGB konvertieren "implementiert hat" - Zeit, dies zu beheben. feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards
1

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.

Zivilkleidung
quelle
Bitte, können Sie die .jsx teilen?
Kelin
@kelin Ich fürchte, ich kann nicht. Ich habe mich schon lange nicht mehr mit Adobe-Produkten beschäftigt.
Zivil
1
Kein Problem, ich habe hier ein großartiges Skript gefunden: stackoverflow.com/a/28067227/3050403
kelin
0

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).

e100
quelle
0

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.

numediaweb
quelle