So extrahieren Sie CSS aus Illustrator CC

Mit Illustrator CC 2014 Sie können CSS aus Ihren Layouts extrahieren und in Ihren bevorzugten Code-Editor einfügen, der möglicherweise den eigenen von Adobe enthält Dreamweaver CC oder Edge Reflow . In diesem Artikel sehen wir uns an, wie dieser Prozess funktioniert.

Einstieg

Unten finden Sie ein einfaches Layout in Illustrator mit geöffnetem Ebenenbedienfeld. Jede Ebene wurde einem CSS-Element zugeordnet.



Um das CSS für jede Komponente zu erhalten, gehen Sie einfach zu Fenster: CSS-Eigenschaften. In diesem Bereich können Sie:

  • Zeigen Sie den CSS-Code für ausgewählte Objekte an
  • Kopieren Sie den CSS-Code für ausgewählte Objekte
  • Exportieren Sie ein oder mehrere oder alle ausgewählten Illustrator-Elemente in eine CSS-Datei
  • Exportieren Sie die verwendeten rasterisierbaren Bilder
  • Generieren Sie einen browserspezifischen CSS-Code

Beachten Sie, dass im Dialogfeld 'CSS-Eigenschaften' folgende Meldung angezeigt wird, wenn Sie Objekte im Ebenenbedienfeld nicht mit Klassennamen benennen: ' Es wurde kein CSS-Code generiert. Um CSS für unbenannte Objekte zu erstellen, benennen Sie das Objekt entweder im Ebenenbedienfeld oder aktivieren Sie die Option CSS für unbenannte Objekte generieren im Dialogfeld CSS-Exportoptionen. '

In der Abbildung unten ist das Feldelement ausgewählt, mit dem Sie auf das CSS zugreifen können.

Sie können das CSS von Illustrator auf verschiedene Arten verwenden. Am unteren Rand des Dialogfelds befinden sich mehrere hervorgehobene Symbole: Exportoptionen, CSS exportieren, Ausgewählten Stil kopieren und CSS generieren. Eine andere Möglichkeit besteht darin, das CSS einfach aus dem Dialogfeld CSS-Exportoptionen zu kopieren und unverändert zu verwenden. Diese Optionen werden auch oben im Dialogfeld in einem Popup-Menü angezeigt.

Exportoptionen

Wenn Sie Exportoptionen auswählen, wird das Dialogfeld CSS-Exportoptionen geöffnet, in dem Sie auswählen können, was exportiert werden soll. Wenn das Dialogfeld angezeigt wird, werden die Standardeinstellungen verwendet.

Im Abschnitt 'Optionen' ist ein Kontrollkästchen deaktiviert: 'CSS für unbenannte Objekte generieren'. Diese Option steht Ihnen offen, wenn Sie die Ebenen in Illustrator nicht benennen. Es ist jedoch besser, alle CSS-Elemente in Illustrator zu benennen, da dies die Verfolgung in Ihrem Code-Editor erleichtert.

Außerdem werden Sie im Abschnitt Optionen feststellen, dass Illustrator Herstellerpräfixe für Webkit, Firefox, Internet Explorer und Opera erstellen kann.

Im Dialogfeld sehen Sie zwei weitere Abschnitte: Objektdarstellung sowie Position und Größe. Im Abschnitt Objektdarstellung sind alle Optionen aktiviert. Im Abschnitt Position und Größe aktivieren wir das Kontrollkästchen Bemaßungen, damit das CSS dies in unserem Code-Editor Ihrer Wahl (in diesem Fall Dreamweaver) widerspiegelt.

Kopieren oder exportieren

Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf OK, um zu akzeptieren. Um das CSS in Ihr Designprogramm aufzunehmen, können Sie es direkt kopieren oder die Optionen zum Exportieren von CSS verwenden.

Wie Sie sehen können, ist unsere Box in Illustrator jetzt in Dreamweaver vorhanden.

Eine andere Möglichkeit besteht darin, den Text in das unten gezeigte Feld zu kopieren. Klicken Sie dazu auf den Text, um ihn auszuwählen. Das CSS wird im Dialogfeld CSS-Eigenschaften angezeigt. Beachten Sie, dass der Text wie folgt angezeigt wird: NormalCharacterStyle.

Wenn Sie unterschiedliche Textblöcke haben, können Sie diese in Webelemente wie h1, h2 usw. umbenennen. Eine andere Option besteht darin, den Text in Dreamweaver zu kopieren und in das entsprechende Webelement umzubenennen, in diesem Fall 'p'. Wenn Sie den Text in Dreamweaver kopieren, sieht er wie folgt aus.

SVG exportieren

Es ist wichtig zu erkennen, dass komplexe Grafiken nicht als CSS dargestellt werden können und als SVG (Scalable Vector Graphics) ausgegeben werden müssen. Gehen Sie dazu zu Datei: Speichern unter. Wählen Sie im Dialogfeld SVG und geben Sie einen Dateinamen ein. Klicken Sie im Dialogfeld SVG-Optionen auf die Schaltfläche Weitere Optionen.

Stellen Sie in der erweiterten Ansicht sicher, dass das Kontrollkästchen Responsive aktiviert ist. Wenn Sie das Bildmaterial speichern, kann es im Browser skaliert werden.

Einschränkungen

Wie Sie sehen, hat Adobe verschiedene Ressourcen erstellt, mit denen Webdesigner ihre Projekte in CSS umwandeln können. Es gibt jedoch eine Lernkurve, und trotz des Durchlaufs verschiedener Tutorials wurde der gesamte Workflow nicht festgelegt. Diese Lücken schaffen zusätzliche Arbeit für den Benutzer.

Im Gegensatz zu Photoshop hat Adobe kein Generator-Plug-In für Illustrator erstellt. Um diese Lücke zu schließen, hat David Deraedt eine Erweiterung namens erstellt Layer-Exporter , mit dem die Generierung von Bildelementen automatisiert werden kann. Da ist ein Videoanleitung um dir zu helfen, aber keine Erzählung, die es schwierig macht, zu folgen.

Abgesehen von diesen Problemen bewegt sich Adobe mit seinen CSS-Konvertierungstools definitiv in die richtige Richtung, was den Workflow für Webdesigner beschleunigen wird.

huion gt-220 v2 (8192)