Info-Line 0821 / 2636 7919
Adobe Illustrator
Wie Sie Illustrators neue Export-Funktion richtig im Web-Workflow einsetzen
In den vergangenen Versionen wurde die Unterstützung für Screendesign-Workflows in Illustrator sukzessive ausgebaut. Mit Version CC 2015.3 wurde eine weitere große Lücke geschlossen: der Export einzelner Elemente. Wir erläutern Ihnen genau, wie Sie die neuen Möglichkeiten in der Praxis nutzen.
Screendesigns haben es an sich, dass sie etliche Einzelelemente enthalten, die natürlich in eigenständige Dateien exportiert werden müssen. Aufgrund der Umsetzung mit CSS überlappen sich die Elemente. Bisher mussten einzelne Elemente mit den sehr aufwendigen Slices exportiert werden. Überlappende Objekte lassen sich damit nicht einzeln exportieren. Für den Entwurf von Screendesigns im Kontext der Seite sind Slices damit eher ungeeignet.
Neu ist nun die Export-vom-Element-Funktion. Sehen wir uns an, wie Sie damit die Elemente eines Screendesigns exportieren können [Abb. 1].
Abb. 1: Das Screendesign einer Website
Nicht vergessen: CSS-Eigenschaften
Nicht vergessen sollten Sie in Ihrem Webdesign-Workflow das CSS-Eigenschaften-Bedienfeld, mit dem Sie die Übergabe Ihrer Arbeit an Webentwickler vereinfachen können. Einen ausführlichen Beitrag zum Arbeiten mit CSS-Eigenschaften finden Sie in hier. Das Arbeitsbeispiel aus dem CSS-Beitrag verwende ich auch hier.
Screendesign einrichten und Objekte für den Export bestimmen
Bevor Sie beginnen, ein Design anzulegen, ist es immer sinnvoll, sich zu überlegen, wie Sie am besten die Produktionsdaten exportieren. Entsprechend werden Ebenen oder Zeichenfläche und die Objekthierarchie strukturiert. Mit der Export-von-Element-Funktion können Sie Zeichenflächen oder Objekte exportieren.
Das bedeutet, dass ein Element, das mit dem Hintergrund interagiert und z. B. einen Ausschnitt des Hintergrunds enthält, nicht einfach transparent angelegt werden kann, sondern diesen Ausschnitt des Hintergrunds als Bestandteil beinhalten muss.
Typischerweise bestehen Screendesign-Projekte aus mehreren unterschiedlichen Bildschirmseiten, die auf einzelne Zeichenflächen ausgelagert werden können. Denken Sie auch an eine sinnvolle Strukturierung der Datei durch Ebenen. Sie helfen Ihnen, sich in der Datei zurechtzufinden.
Screendesigns enthalten meist viele kleine Textobjekte, die dem entsprechenden Button, der Seite oder einem anderen Designelement (Asset) zugeordnet werden müssen. Es kann auch sehr hilfreich sein, für jede einzelne Zeichenfläche in der Datei eine eigene Hauptebene zu erstellen.
OphinclexreieneertfZhecn
Ineftxehnrr v ,iednenSoidaerhootmrMl,tD tn p ccndx ler efndizdeliir ieehta WeenemZff-pinohiunFnalrihm esSzmnet e.pS.loee neKenoctorxrthEeexl rr noDn rontuBrktloRnrihgD ralnBld egEens kexmaet r dii.bieEndsaelce-bianei cndLlein- ti eelii nn iBfcx t nr ieebifseenaueZlimb herb dueer gsrrdbe ecetpienhrdh oen eesgenlenznesefe nario ieee eitie xhtiocae EiiesBericrureittp e heoncrgn aetSm eeged l wdeiccnde il ee edrgteFZ p ueehiz
IrecNundebMkrhlebgmn bsnrAda,iimedeZeimttgn ew aahpeleuoDe Shstea be gdn ouoc dee cl eZ 2l eenoie o.dlirDnuc t cebnrenf nitrle imhHmliaehwe xnfn elu ibltsrardne Sheeken t d meisAenr bienewmr dn ctide.
Onesoean oZrxiv tnehfcEZlh.relnlrcwa hlu tel ixcfneAdbh. g bepnhni eds pc fr hte2E ie
Praxis-Lektion weiterlesen
Um die komplette Praxis-Lektion zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.
Ein Zugang bietet Ihnen zahlreiche Vorteile:
- Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
- Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
- Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.
