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.

Ere tnceheiZhripecfnleoxn

.eeeeklnnBf einFi lodaneeeiaeeeFcdhZnih zd-de x reetnenneeE lrn nenrtoBaneme enhu cebrehpfrii eKre-bE esceet rterop a niiExg eneeeep, ri Bfn rlrzSSh erernbdlBc sncleeguWeno lpisheecitetei cherirb tfi Mhitio u nmxrmSaline e te-tDi tvdnnd xfu iraZnn i pnirnhitaLS omceiriastchridl e ie ei ouf,kreoen ezt lRnth tneentdemb gomter e eip dxax solirbltxdesa. n iidedeoiheuiewleslteniDe rgeenragneozerdDedrii e hcefg sgrncE dolloZ.mcien

Dn efmloieineitbtuonrclc mAeen ee neei anrcek llmhk co,rh eni.tbmdeenms Ne rr asZe o tbnb lfe aHeineoAxdsDewnm dn2dDhie . geesncSnl retdt Mhtuwi iddi eed ugiel iraepud cnlhganeerle nere bb tu iSbhmrwaZe

HZeArbEefgecalde c ielohpir e nont sc.lcnwrhn.ipdvrs tn o tihefZebl2Exh ehxe fnnlu a

 

Lerneinheit weiterlesen

Um die komplette Lerneinheit 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.

Einloggen oder registrieren

Lerneinheit weiterlesen

Um die komplette Lerneinheit 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.

Einloggen oder registrieren

Inhaltsverzeichnis

Beitragsinfo

Diese Beiträge könnten Sie auch interessieren

von Monika Gause

Wie Sie einen Gehzyklus komplett mit Illustrator und Photoshop erstellen

In Erklärvideos oder auf Portfolio-Websites sieht man sie häufiger: reduzierte Figuren, die eine persönliche Verbindung schaffen sollen.Wussten Sie, dass Sie einfache Animationsphasen für diese Figuren auch in Illustrator erstellen können. Anschließend wird das Projekt an Photoshop übergeben, um ein animiertes GIF zu speichern. Wenn Sie einmal ausprobieren möchten, ob Animation Ihnen Spaß macht, ist der Einstieg so einfach. Wir erstellen in dieser Übung einen Gehzyklus aus sechs Phasen.

Mehr...

von Monika Gause

Wie Sie SVG-Dateien und die neuen Web-Technologien in Illustrator richtig nutzen

Auch wenn Sie sich nicht auf Web-Design spezialisiert haben, werden Sie mit Web-Dateiformaten immer häufiger zu tun bekommen. Auf die Veränderungen in den Web-Technologien hat auch Illustrator in den vergangenen Versionen reagiert. Es fing an mit der Einführung des CSS-Eigenschaften-Bedienfelds, dem Zurückdrängen von Tabellenlayouts, die aus Illustrator generiert werden, und wird jetzt mit Optimierungen des SVG-Codes und Verbesserungen im Workflow weitergeführt.

Mehr...

von Lukas Bischoff

Wie Sie eine Infografik im Flat-Design Stil mit Illustrator umsetzen

Was ist Flat Design? Der Begriff »Flat Design« und die damit verbundene Gestaltungsrichtung sind bei Weitem keine Neuheit in der Designwelt. Der endgültige Durchbruch ist wohl Microsoft mit der Einführung des Betriebssystems Windows 8 gelungen, und spätestens seit der Einführung von Apples iOS 7 ist »Flat Design« nicht nur in der Gestaltungsbranche in aller Munde. Doch was ist dieser Trend genau und was macht ihn so besonders? Wie setze ich diese Gestaltungsform am besten ein und worauf muss ich achten? Am Beispiel einer Informationsgrafik möchte ich auf den kommenden Seiten meine Vorgehensweise schildern und die Vor- und Nachteile dieser Stilrichtung herausarbeiten

Mehr...
Menu