Illustrator CC 2015 für Webdesigner: SVG

Einzelne Komponenten aus Illustrator exportieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Illustrator eignet sich sehr gut zur Gestaltung kompletter Icon-Sets. Wie Sie diese für eine spätere Verwendung einzeln exportieren, beschreibt dieser Film.

Transkript

Neben dem automatisierten Export aller Elemente einer Ebene und dem Zeichenflächenexport bietet Illustrator noch eine weitere fantastische Funktion: einzelne Komponenten aus einem ganzen Set von Icons, wie das z. B. hier auch zu sehen ist, zu exportieren, und das gleich auf zwei Varianten. Nehmen wir uns einmal ein beliebiges Icon hier vor, z. B. hier so ein Chat-Icon. Und das Einzige, worauf Sie achten müssen, ist, dass diese einzelnen Komponenten oder Objekte eben so nicht in einer Kombination oder in einer Gruppe stehen, sondern einzeln zugänglich sind. Wie man erkennen kann, habe ich das Ganze hier in einer Ebene Icons, und in dieser Ebene Icons sind auch hier nochmal alle Elemente benannt. Ich könnte das Ganze natürlich jetzt so exportieren, aber ich möchte einzelne Komponenten ansprechen. Nehmen wir mal z. B. hier so einen Playbutton. In dem Moment, wenn ich den markiert habe, kann ich über den Menüpunkt "Datei" und dann nicht auf "Exportieren", sondern hier drunter, "Auswahl exportieren" gehen. Dann komme ich in diesen Dialog, und in diesem Dialog kann ich nun wieder einstellen, was ich exportieren muss. Sie sehen, hier kann ich auch auf die Elemente zurückgreifen, wenn ich jetzt theoretisch gesehen etwas damit machen möchte. Hier haben wir jetzt im Moment die Zeichenfläche, also die gesamte Zeichenfläche oder eben die einzelnen Elemente. Dann habe ich die Möglichkeit, hier entsprechend zu sagen, wo es hingehen soll. Und natürlich, in welchen Formaten das exportiert werden soll. Und das Schöne ist, ich kann jetzt also, wenn man z. B. mal hier auf iOS klickt, dann kann ich nicht nur SVG exportieren, sondern z. B. auch PNG, und das Ganze, wie man hier erkennen kann, mit Render-Auflösung und dergleichen. Ich nehme die mal wieder raus, also bleibe nur bei SVG. Damit auch dieses Icon bei der Abspeicherung einen vernünftigen Namen bekommt, kann man das hier an der Stelle benennen, zum Beispiel: "play-icon". Alle Elemente, die hier drin stehen, werden dann, sofern dieses Häkchen gesetzt ist, auch exportiert, und das mache ich jetzt mal. Das geht sang- und klanglos, und wenn man jetzt mal wechselt in diesem Ordner, dann sieht man, haben wir hier das Playicon-SVG, und das sieht genauso aus, ist also entsprechend unser Icon, was wir gerade exportiert haben. Also, das ist die Variante eins. Sie wählen ein oder mehrere Elemente aus, und im Grunde natürlich die gleiche Funktion, aber etwas anders angesprochen, ist ein Bedienfeld. Da haben wir's. Sie sehen, da steht jetzt auch dieses Play-Icon. Entsprechend kann ich hier auch weitermachen, also nehmen wir mal z. B. das Music-Icon. Das ziehe ich mir hier rein, und Sie sehen, dieses Bedienfeld gibt Ihnen vor, wann Sie die Maus loslassen müssen. Achten Sie nun darauf, man könnte jetzt auf die Idee kommen, z. B. zwei Icons, oder alle Icons, die man hineinziehen möchte, zu markieren, und dann hineinzuziehen; das geht auch, aber wenn Sie mal auf die Vorschau gucken, dann exportieren Sie jetzt zwei Objekte, also zwei Komponenten. Das möchte ich natürlich nicht, darum lösche ich das wieder hier an der Stelle. So, und auch hier habe ich die Möglichkeit, dem Element einen Namen zu geben, und kann das Ganze dann, in der Form, wie es hier steht, exportieren. Also, ich wähle es wieder an, der Exportbutton wird sichtbar oder wird aktiviert. Dann geht's wieder in die gleiche Variante und ich kann das Ganze exportieren. Wenn Sie dazu noch ein paar Einstellungen vornehmen möchten, also zu diesen Exporteinstellungen, dann gibt es in diesem Bedienfeld hier unten noch die Möglichkeit, "Für Bildschirme exportieren" starten, dann kommt wieder dieser Dialog, wo wir eben drin waren. Das zeigt halt, dass die beiden zusammenhängen. Aber das ist eine wunderbare und wirklich einfache Möglichkeit, einzelne Komponenten auch als SVG oder andere Datenformate mit Illustrator zu exportieren.

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

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!