Der Release 2014 von Illustrator CC bietet Web-Designern neue Möglichkeiten, Zeit zu sparen und die richtige Darstellung ihrer Designs sicherzustellen, wenn sie sie im Web veröffentlichen.
Illustrator CC kann Ihre Designs automatisch analysieren und CSS-Eigenschaften extrahieren.
So können Sie ganz einfach die Stile Ihrer Designs aus Illustrator in den HTML-Editor kopieren oder einem Entwickler bereitstellen.
Sie können den Code für ausgewählte Objekte exportieren oder für das gesamte Design, und zwar mithilfe der Steuerelemente im Bedienfeld für CSS-Eigenschaften.
Sie können z.
B.
Zeichenformate definieren und von Illustrator in CSS konvertieren lassen.
Geben Sie in Illustrator den Zeichenformaten Namen, die traditionellen Web-Elementen entsprechen, wie z.
B.
„Header 1“, „Header 2“, „Header 3“ und „Body“.
Um CSS auf der Basis eines Zeichenformats zu extrahieren, wählen Sie bei geöffnetem Bedienfeld „CSS-Eigenschaften“ (CSS Properties) einen Textrahmen.
Der CSS-Code wird im Bedienfeld angezeigt und kann kopiert und in eine HTML-Datei eingefügt werden, um den Text für das Web zu formatieren.
Meine HTML-Datei enthält Informationen zu Inhalt und Struktur der Web-Seite, jedoch nicht zum Stil für Text und andere Inhalte.
Sie enthält nur die Basisinformationen.
Wenn ich jedoch die CSS-Stile im Bedienfeld „CSS-Eigenschaften“ auswähle, kann ich sie in meine HTML-Datei kopieren.
Jetzt ändert sich der Text und erhält die Formatierung aus meiner Illustrator-Datei.
Beim CSS-Export können die Hintergrundfarbe sowie andere Attribute Ihres Designs übertragen werden, wie z.
B.
Muster, Verläufe, Konturen und sogar Schlagschatten.
Wie bei den Zeichenformaten kann ich einzelne Elemente auswählen, die ich formatieren möchte.
Der CSS-Code wird jedoch häufig als separate, externe CSS-Datei gespeichert.
So kann das Design mehrerer Seiten in einem Schritt angepasst werden.
Ich exportiere jetzt den CSS-Code für alle Objekte auf der Seite, speichere sie als eigenständige CSS-Datei und verweise darauf in der HTML-Datei.
Für komplexe Grafiken ist CSS jedoch nicht geeignet.
Solche Grafiken können Sie in Illustrator als skalierbare Vektorgrafiken – SVG – speichern.
Die meisten Webbrowser unterstützen das SVG-Format, sodass die Grafiken beim Zoomen oder Ändern der Größe in gleicher Qualität angezeigt werden.
Sie können die Grafik in Illustrator auswählen und den generierten SVG-Code dann einfach in eine HTML-Datei einfügen.
Jetzt können Sie das ursprüngliche Design aus Illustrator im Web anzeigen – mit sämtlichen Design-Elementen.
In Illustrator lassen sich SVGs so speichern, dass sie sich an Responsive Layouts in unterschiedlichen Bildschirmgrößen anpassen, z.
B. bei verschiedenen mobilen Endgeräten oder Browser-Fenstern.
Speichern Sie hierzu die ausgewählte Grafik als SVG, und aktivieren Sie die Option „Interaktiv“ (Responsive).
Hier sehen Sie das Ergebnis, nachdem wir das Logo als Responsive SVG gespeichert haben.
Die erste Version passt sich beim Skalieren nicht dem Webbrowser an, aber die zweite Version mit der als Responsive SVG gespeicherten Grafik ist skalierbar.
Mit Responsive SVG-Dateien stellen Sie sicher, dass Ihre Grafiken richtig angezeigt und skaliert werden, unabhängig von Browser und Endgerät.
Dies sind nur einige der neuen Features im Release 2014 von Illustrator CC.
Sie bieten Ihnen neue Möglichkeiten sowie mehr Flexibilität und Kontrolle, wenn Sie vektorbasierte Designs im Web veröffentlichen.
Sie sind exklusiv über die Creative Cloud erhältlich.
