CSS-Export in Illustrator CC
In diesem Beitrag erfahrt ihr, wie der CSS-Export in Illustrator CC funktioniert.
Illustrator CC exportiert nun auch CSS-Code für ausgewählte Elemente. Nach der Export-Funktion in Photoshop und Fireworks war dieser Schritt auch dringend notwendig, da Vektor-Grafiken im Webdesign immer wichtiger werden. Vor dem Hintergrund flexibler Web-Grafiken wird Illustrator für Webdesigner zunehmend interessant.
CSS-Eigenschaften in Illustrator CC
Um den CSS-Code zu einem ausgewählten Objekt angezeigt zu bekommen, muss das Bedienfeld „CSS-Eigenschaften“ eingeblendet sein. Ihr erreicht das Bedienfeld über „Fenster → CSS-Eigenschaften“.
Ihr solltet zunächst unbedingt einen Blick in die Eigenschaften des Bedienfeldes werfen. Über den kleinen Pfeil oben rechts erreicht ihr folgenden Dialog.
Stellt hier ein, welche Vektor-Funktionen in CSS-Code umgewandelt werden sollen. Ich empfehle die Einstellungen aus dem Screenshot.
CSS-Code für einzelne oder mehrere Objekte exportieren
Nachdem Ihr die Einstellungen vorgenommen habt, könnt ihr ein beliebiges Objekt auf der Arbeitsfläche markieren. Im Bedienfeld wird anschließend der zugehörige Code angezeigt.
Ihr könnt auch mehrere Objekte markieren. In diesem Fall bleibt das Bedienfeld allerdings zunächst leer. Um den Code für mehrere Objekte zu erhalten, klickt bitte zunächst auf den kleinen Pfeil oben rechts im Bedienfeld und wählt anschließend „CSS generieren“. Hier kann übrigens auch der Code als *.css
-Datei exportiert werden.
Ich finde die Funktion an sich sehr gut, aber warum wird nicht gleich eine HTML-Datei mit ausgegeben? Wenn ich eine komplette Webseite in AI baue, wäre es doch praktisch, wenn im Export die ganzen DIVs usw. mit angelegt werden. Kommt wohl dann in der nächsten Version oder?
Ich hoffe nicht. Der Export vollständiger Websites entspricht ja überhaupt nicht der aktuellen Arbeitsweise. Man gestaltet heute ja eher im Grafikprogramm, übernimmt den CSS-Code dann direkt in den Browser, testet das Element dort und springt wieder zurück ins Grafikprogramm.
Illustrator sollte sich dabei nur um die Gestaltung kümmern, wie es ja im Moment der Fall ist. Die Semantik im HTML-Code kann von einem solchen Programm eigtl. nur schlecht exportiert werden. Es würden also beispielsweise DIVs für alle Elemente generiert. Oder das Programm mutiert in Richtung Dreamweaver oder Reflow. Dann muss der Designer allerdings deutlich mehr Vorkenntnisse mitbringen, was meiner Meinung nach bei Illustrator auch wieder nicht sinnvoll wäre. Ich finde die Funktion daher perfekt so wie sie ist. Wie gut die Code-Qualität ist, wird sich dann im Praxiseinsatz zeigen.