CSS-Export in Illustrator CC

illustrator-cc-css

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.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

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.