kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS-Export in Illustrator CC

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Wichtige Einstellungen für den CSS-Dialog in Illustrator CC
Wichtige Einstellungen für den CSS-Dialog in Illustrator CC

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.

Generierter CSS-Code in Illustrator CC
Generierter CSS-Code in Illustrator CC

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Stefan

    Verfasst am 20. Juni 2013 um 10:14 Uhr.

    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?

    • Jonas Hellwig

      Verfasst am 20. Juni 2013 um 10:22 Uhr.

      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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.