Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Stefan
    schrieb am 20.06.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?

    Antworten
    • Jonas Hellwig
      schrieb am 20.06.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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →