Illustrator CC 2015 für Webdesigner: SVG

Der Zeichenflächen-Export mit Illustrator

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Neben einzelnen Elementen aus einem Illustrator-Dokument lassen sich auch ganze Zeichenflächen schnell und einfach exportieren. Das Video beschreibt die Vorgehensweise und zeigt ein paar weitere Vorteile des Exportdialogs auf.

Transkript

In diesem Video möchte ich Ihnen eine weitere Exportmöglichkeit zeigen, wie Sie Zeichenflächen aus Illustrator als SVG-Datei exportieren können. Und zwar nicht nur einzelne Objekte wie im vorherigen Video, sondern ganze Zeichenflächen. Nebenbei gesagt, Sie erreichen diese Funktion unter "Datei Exportieren" und dann den Unterpunkt "Exportieren als..." Und hier wähle Sie zunächst einmal wieder die Position aus, den Platz aus, wohin Sie exportieren möchten, sorgen für das korrekte Format, also nicht hier PNG oder JPG, sondern SVG. Dann haben wir hier die Möglichkeit, die Option "Zeichenflächen verwenden" auszuwählen. Das müssen Sie nicht, weil gehen wir jetzt direkt in den Exportdialog. Ich ersetze das grad mal. Dann sehen wir, geht das auch auf gleiche Weise wie in dem vorherigen Beispiel, mit dem etwas umfangreicheren Dialog "Speichern unter". Im Wesentlichen haben wir hier aber auch die gleichen Funktionen, aber auch ein paar interessante, weitere Optionen. So kann man z.B. hier Einstellungen zu dem Cascading-Stylesheet generieren, also wie das Cascading-Stylesheet generiert werden und eingebunden werden soll. Dann hier wieder die gleiche Variante mit den Konturen, die Bilder, ob diese beibehalten oder verknüpft werden sollen, einbetten und dergleichen. Und hier haben wir nochmal die interessante Info mit den Objekt-IDs. Denn Objekt-IDs, das ist das, was wir in der Ebenenpalette bei der genauen Benennung der einzelnen Elemente, eben in einem vorherigen Schritt vorgenommen haben. Und dann haben wir hier unten den "Minifizieren"-Button. Den würde ich Ihnen standardmäßig raten, lassen Sie den deaktiviert, wenn Sie in dem Code hinterher arbeiten möchten. Denn wenn dieser Code... ich rufe den mal auf, hier, wenn wir uns den anschauen, da finden wir, wenn wir so ein bisschen suchen, z.B. hier, die ID "progressbar". Ein Stückchen weiter unten die ID "playhead", also der Abspielknopf innerhalb der Progressbar. Und klicken Sie das Ganze, oder aktivieren Sie "Minifizieren", dann wird der Code komprimiert, also nicht jetzt im Sinne eines Kompressionsverfahrens, sondern der Text wird einfach rapide zusammengestrichen und im Grunde wird alles in eine Zeile, oder in einen Block geschrieben. Das spart Speicherplatz, erhöht die Ladegeschwindigkeit, ist aber dann natürlich, ja fast unmöglich sich in diesem Dokument zurecht zu finden. Also, sollen später noch Änderungen vorgenommen werden, dann lieber "Minifizieren" deaktivieren, ansonsten kann man´s durchaus auch aktivieren. Ich breche das ganze nochmal ab, rufe den Dialog erneut auf. "Datei Exportieren Exportieren als..." "SVG" als Format wird ausgewählt, der Speicherplatz ist OK und jetzt wähle ich hier mal die "Zeichenflächen verwenden" aus. Und Sie sehen, jetzt kann ich einmal alle Zeichenflächen verwenden, die ich in meinem Dokument habe, oder z.B. auch sagen: Ich brauche nur die Zeichenfläche 1. Oder 2, oder wie´s eben drin stand 1-2, aber das entspricht ja der Option "alle". So, und das speichere ich jetzt einmal ab. "Exportieren", es öffnet sich wieder der Dialog und egal ob jetzt mit "Minifizieren" oder ohne, das ist erst mal uninteressant, exportieren wir einfach diesen Dialog und man sieht, hier kann man den Code nicht mehr aktivieren oder anzeigen, denn hier wird jetzt quasi eine SVG-Grafik alleine, konkret exportiert. Und das ist damit geschehen. Wechseln wir mal kurz in diesen Dialog. Und da sehen wir jetzt, da haben wir den "music_player_groups-01", "music_player_groups-02" und genau das sind die beiden Grafiken. Hier das Illustrator File und hier die SVG-Grafik zuvor mit beiden. Sie sehen, hier kann man das erkennen, mit beiden Elementen da drin. Und hier haben wir die Elemente einzeln. Ja, gucken wir uns das mal in der Schnellvorschau an. Schön, frei skalierbar und egal welche Größe ich aufrufe, die Qualität ist immer Top. Das Gleiche haben wir auch mit dem LOGIN und genauso soll´s aussehen. Ja, und damit kennen Sie die beiden Möglichkeiten, oder die relevanten Möglichkeiten. Einmal "Datei speichern unter..." und dann öffnet sich der entsprechende Dialog mit vielen Optionen. Oder der Weg über "Exportieren Exportieren als..." und dann der etwas kompaktere Dialog. Egal, welche Weise Sie wählen, also ich persönlich favorisiere fast immer dieses "Exportieren als...", und kann da schnell einstellen, was ich haben möchte. Und erzeuge so meine SVG-Objekte oder SVG-Datei als Code oder eben hier, direkt das SVG-File mit den einzelnen Zeichenflächen.

Illustrator CC 2015 für Webdesigner: SVG

Lernen Sie, wie Sie in Illustrator CC SVG erstellen, exportieren und die Grafikelemente direkt in Muse CC oder ihren HTML-Code einbinden.

1 Std. 3 min (10 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:29.08.2016
Laufzeit:1 Std. 3 min (10 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!