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

Ich bin neu bei Adobe Illustrator und habe ein Logobild, das ich in 5 oder 6 verschiedenen Größen verwenden muss. Das Logobild wurde in Adobe Illustrator erstellt, aber wenn ich versuche, das Bild als PNG oder JPEG zu speichern, entpuppt sich das, was einfach hätte sein sollen, als sehr kompliziert.

Ich verstehe, dass Adobe Illustrator das Bild als eine bestimmte Größe behandeln möchte und diese Größe dann mit einem Pixel pro Zoll-Skalierungsfaktor multiplizieren möchte, um die tatsächliche Anzahl der Pixel zu erhalten, die es speichert. Es hat ein paar begrenzte Auswahlmöglichkeiten für Skalierungsfaktoren, die einen sehr begrenzten Satz von resultierenden Ausgabepixelgrößen ergeben.

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

Ich habe Vorschläge gesehen, das Bild zu exportieren und es dann mit Photoshop in der Größe zu ändern, aber das führt zu einer schlechteren Bildqualität im Vergleich zum Erstellen des endgültigen Bildes aus dem Vektorbild.

Es gibt mehrere Möglichkeiten, dies zu tun. Bei mir wählen Sie alle Bilder aus, die Sie exportieren möchten. Dann gibt es die Optionen für Breite und Höhe in der Kopfzeile. Ändern Sie sie einfach und exportieren Sie sie dann

Antworten (5)

Datei > Für Web speichern und geben Sie dann die Pixelabmessungen ein, indem Sie auf die Image SizeRegisterkarte rechts im Fenster „Für Web speichern“ klicken.

Oder verstehe ich dich nicht richtig?

Perfekt danke. Ich habe gerade ungefähr 15 Minuten mit der "Export"-Funktion verbracht, aber da sie sich weigert, weniger als 72 ppi zu verwenden, musste ich das Bildmaterial und die Zeichenfläche für sehr kleine Exporte neu skalieren, was der Fragesteller wahrscheinlich auch getan hat.
Da dies die "akzeptierte" Antwort ist, lassen Sie mich sie um fast ein Jahrzehnt erhöhen. Zeitgenössische Versionen von AI (im Jahr 2021) werden "Für Web speichern" als Legacy betrachten und eine zusätzliche (neue) Exportfunktion bieten. Hier können Sie das Kontrollkästchen für „Beschnitt einschließen“ anklicken (vorausgesetzt, Ihre Zeichenfläche gibt die richtigen Abmessungen an) und dann die gewünschte(n) Größe(n) und Dateiformat(e) auswählen (JPEG, PNG, SVG, PDF). AI wird sie alle in allen Größen stapelweise speichern.

Die Verwendung File → Save for Webund Eingabe der Abmessungen wird das tun, 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.

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

Für Web in Illustrator speichern

Oh, und es besteht eine sehr gute Chance, dass Sie es deaktivieren möchten Convert to sRGB– es konvertiert Ihr Bild destruktiv vom aktuellen Farbraum in sRGB, wodurch sich die Farben verschieben.

Geben Sie hier die Bildbeschreibung ein

In CS6 gibt es keine Schaltfläche „Übernehmen“ ... und ich bin mit „In RGB konvertieren“ nicht einverstanden. Sie möchten, dass dies für Bilder, die für das Internet bestimmt sind, aktiviert ist.
Danke für den CS6-Tipp. Convert to sRGB eingeschaltet zu lassen, ist absolut der falsche Ansatz für Web- und UI-Arbeiten. Hier ist ein ganzer Artikel darüber, warum: bjango.com/articles/photoshop (Wettstreiten Sie mich auf eigene Gefahr!)
Es ist ein bisschen lächerlich, Ihren eigenen Artikel zu zitieren, als ob er mehr Glaubwürdigkeit hätte als Ihre Meinung hier. JEDER kann eine Webseite erstellen, die JEDE Meinung unterstützt, richtig oder falsch. Verdammt, ich habe ganze ausführliche Websites gesehen, die sich der Erklärung völlig ungeeigneter Farbmanagementtechniken widmen. Mehr als 25 Jahre Praxis bedeuten mir mehr. Dazu kommen direkte Diskussionen mit Leuten wie Andrew Rodney, Bruce Fraser und Chris Cox. Wenn Sie die Farbprofile auf JEDEM Monitor, auf dem Ihre Arbeit zu sehen ist, nicht absolut kontrollieren können, möchten Sie sRGB. Wir müssen uns einigen, nicht zuzustimmen.
Hast du den Artikel eigentlich gelesen? Wenn Sie Web- und UI-Arbeiten durchführen, MÜSSEN während des gesamten Prozesses exakte Farbwerte beibehalten werden. Wenn Sie #FF0010 als Farbe eingeben, MUSS dies in der Datei als #FF0010 ausgegeben werden, wenn Sie beabsichtigen, die Farbe im Code abzugleichen. Das bedeutet, dass „In sRGB konvertieren“ deaktiviert sein muss. Ich habe das Gefühl, dass Sie diese Art von Arbeit nicht machen und nicht verstehen, worum es geht.
Scott, bitte fassen Sie dies nicht als Ad-hominem-Angriff auf, aber ich denke, dass Sie aus ähnlichen Diskussionen einige falsche Vorstellungen über die RGB-Farbdarstellung aufgegriffen haben. Siehe auch graphicdesign.stackexchange.com/questions/7815/… .
Diese Kommentare sind irrelevant e100. Sie waren ein bisschen gefangen über die Zahlen, die ich verwendet habe, obwohl ich oft erklärte, ich habe nur verallgemeinert. Und natürlich habe ich Ihren Artikel nicht gelesen, Mark. Ob ihr es alle denkt oder nicht. Ich weiß tatsächlich einige Dinge, über die ich poste. Ich bin kein 25 -jähriger, frisch aus dem Schuldesigner. Auch hier müssen wir uns einigen, nicht zuzustimmen. Es gibt einen Grund, warum das Speichern für das Web -Team die Konvertierung in die SRGB -Option implementiert hat. Es existierte zunächst nicht.
Ja, damit FF0010 mit einem Bild übereinstimmt, das FF0100 enthält, können Sie bessere Ergebnisse auf Ihrem Monitor erzielen, wenn Ihr Monitor schlecht kalibriert ist, indem Sie die Konvertierung in sRGB deaktivieren. Wie ich jedoch gepostet habe, sollten Sie in sRGB konvertieren, es sei denn, Sie können die Farbkalibrierung jedes einzelnen Monitors auf der Welt steuern, auf dem Ihre Arbeit angezeigt wird . Dies sorgt für schlecht kalibrierte Monitore oder nicht-Farben-Managed-Browser entspricht ebenfalls den Farben. Es ist einfach, wenn alles, was Sie tun, für Benutzeroberflächen und Idevices ist, da alles mit Farbe verwaltet ist. Gar nicht so einfach für Webdesign.
Am Ende bin ich froh, dass das, was Sie alle verwenden, für Sie funktioniert. Benutze es also weiter. Was ich benutze, funktioniert für mich und das seit Jahrzehnten. Meine Meinung wird also nicht geändert. Ich vertraue meiner Erfahrung weit mehr als alles andere. Wie ich gepostet habe, müssen wir uns einfach darauf einigen, nicht zuzustimmen .
Convert to sRGB ist in fast allen denkbaren Situationen bei der Arbeit im Web die falsche Wahl. „Es gibt einen GRUND, warum das Save for Web-Team die Option „In sRGB konvertieren“ implementiert hat“ – Zeit, das zu beheben. feedback.photoshop.com/photoshop_family/topics/…

Wenn ich mehrere Pixelgrößen unterstützen muss, dupliziere und skaliere ich die Grafik in derselben AI-Datei. Jede Größe geht auf eine separate Zeichenfläche in der richtigen Größe. Ich hänge den Boardnamen mit dem zu exportierenden Dateiformat an. Dann führe ich ein jsx aus, das jede Zeichenfläche exportiert und das Dateiformat aus dem Namen aufnimmt, wobei ich die letzten Einstellungen verwende, 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.

Bitte, können Sie die .jsx-Datei teilen?
@kelin Ich fürchte, ich kann nicht. Es ist lange her, dass ich mich mit Adobe-Produkten beschäftigt habe.
Kein Problem, ich habe hier ein tolles Skript gefunden: stackoverflow.com/a/28067227/3050403

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

Sie können die Größe der Form skalieren, bevor sie gerendert wird. Offensichtlich wird die Skalierung danach die Qualität verringern.

Ich habe diese Technik immer für Logos verwendet, um eine genaue Kontrolle über die Größe zu geben, z. B. um die Grundlinie der Textelemente des Logos auf einer Pixelgrenze zu erhalten (eine Form des Hintings).

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

Wie kann ich ein Bild aus einem Illustrator-Bild in mehreren Größen exportieren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v