Webstandard & Webdesign - CSS, HTML

 

Gemeinsamkeiten von Illustrator und CSS

Viele Illustrator-Anwender haben ein Problem mit dem Konzept von Aussehen-Eigenschaften. Diese dienen nicht bloß dem Einsatz von Effekten, sondern sind eigentlich die Grundlage objektorientierter Grafik. Wer das Aussehen verinnerlicht hat, kann nicht nur seine Objekte viel länger im Designprozess editierbar halten, sondern kann auch viel bequemer, schneller und vielseitiger mit Vektor-Programmen arbeiten. Ich schreibe hier ganz bewusst "Vektor-Programme", denn man findet Vergleichbares in CorelDraw, Inkscape oder aber auch FreeHand MX. Gerade CSS-Spezialisten könnten speziell die Verständnis-Schwierigkeiten über das Aussehen mit einem Lächeln quittieren, gehen sie doch tagtäglich mit einem sehr verwandten Konzept um. Wenn Ihr Euch die Aussehen-Eigenschaften mal vom CSS-Standpunkt aus betrachtet, dann bekommt Ihr vielleicht einen besseren Zugang zu dieser Thematik.

Aber, was sind Aussehen-Eigenschaften? Als Aussehen-Eigenschaften bezeichnet man ein Styling, das nur das optische Erscheinungsbild eines Objekts verändert, ohne seine Integrität zu beeinflussen: Füllungen, Konturen, Effekte, Transparenz. So wie die in CSS angelegten Attribute die Struktur des HTML-Dokuments auch nicht verändern, sondern dem HTML-Element "lediglich" ein neues Aussehen verpassen.Los geht's.

Das DOM: Struktur eines Illustrator-Dokuments

Wenn man mit Aussehen-Eigenschaften virtuos umgehen möchte, dann muss man verstehen, wie ein Illustrator-Dokument hierarchisch aufgebaut ist und wo man überall Eigenschaften unterbringen kann.

Illustrator-Dokument > Ebene(n) > Unterebene(n) > Gruppe(n) > Objekt(e) (grau: diese Hierarchiestufen sind nicht obligatorisch, nur eine Ebene gibt es immer). Die Dokumenthierarchie könnt Ihr in der Ebenen-Palette untersuchen. Die Einrückung zeigt, welches Element untergeordnet ist. Analog zur eingerückten Ansicht in der Code-Ansicht. Anmerkung: Vielleicht ist Euch aufgefallen, dass Zeichenflächen (Seiten) hier keine Rolle spielen. Sie sind in dieser Hierarchie nicht fest eingeordnet, Ebenen oder Objekte sind keine Kinder einer bestimmten Seite und Seiten können auch nicht mit eigenen Eigenschaften belegt werden. Besonders schön kann man die Verwandtschaft zwischen Illustrator-Aussehen und CSS-Styles an einem Textobjekt zeigen. Es erhält in diesem Workshop mithilfe von "Aussehen", einen Button-Look.

1. Text-Werkzeug vs. Font

Klickt mit dem Text-Werkzeug einmal auf die Zeichenfläche und gebt einen kurzen Text ein. In diesem Fall: Klick mich!. Jetzt habt ihr einen Punkttext erstellt. Dieser würde vom Startpunkt immer weiter fließen, bis ein Return eingegeben wird. Zudem kann hier die Schriftart mit sämtlichen Eigenschaften, wie ihr es auch im Umgang mit CSS bekannt ist, angegeben werden.

 

2. Hintergrund anlegen vs. Background

Jetzt erhält der Text einen "Background": Die Buchstaben verfügen bereits über eine Flächenfarbe - schwarz -, wir brauchen eine usätzliche Fläche. Verwendet die Aussehen-Palette und wählt "Neue Fläche hinzufügen" aus dem Palettenmenü. Die Fläche greift ihr ( wie im unteren Teil der Abbildung zu sehen ) und verschiebt diese unter den Eintrag "Zeichen", damit es auch wirklich ein "Background" wird.

 

3. Hintergrundfarbe bestimmen vs. Background-Color

Damit man die Buchstaben - die "Zeichen" - vom Background unterscheiden kann, müsst ihr dem Background jetzt noch eine andere Farbe geben als den Buchstaben. Wenn ihr dazu einfach das Textobjekt mit dem Auswahl-Werkzeug anklickt und in der Farbe- oder Farbfelder-Palette eine neue Farbe bestimmt, ändert ihr die Background-Farbe der in Schritt 2 erzeugten Fläche.

Möchtet ihr dagegen die Farbe der Buchstaben ändern, geht das am einfachsten, indem ihr diese mit dem Text-Werkzeug auswählt und dann die gewünschte Farbe bestimmt.

Als nächstes gebt ihr der Background-Fläche die gewünschte Farbe, in diesem Fall "Rot". Den Text färbt ihr dann auch aus Gründen des Farbkontrastes beispielsweise weiß ein.

 

4. Form umwandeln - display:block

Im Unterschied zu CSS sind Flächen in Illustrator nicht automatisch boxförmig – rechteckig – sondern haben exakt die Form, die der Pfad vorgibt. Oder wie in diesem Fall die Buchstaben. Die Box müsst ihr also erst noch erzeugen. Wählt die Fläche ( siehe unterer Teil der Abbildung ) in der Aussehen-Palette aus, indem ihr darauf klickt und ruft dann Effekt > In Form umwandeln > Rechteck auf.

 

5. Innen-Abstand vs. Padding

In dieser Dialogbox findet ihr wieder etwas Bekanntes: Padding. Die Eigenschaft die unter anderem unter gegebenen Umständen zum Box-Modell-Effekt führt, heißt hier nur nicht so. Wählt hierzu ie Option "Zusätzliche Breite/Höhe" und gebt dort die gewünschten Werte ein. Dazu aktiviert ihr die Vorschau und seht euch auf der Zeichenfläche an, welche Auswirkungen sie haben.

 

6. Runde Ecken vs. Border-Radius

Ein eckiger Button ist nicht immer gewünscht ( bspw. aufgrund von Vorgaben des Corporate Designs ) - gibt es den auch in rund? Ja, und es ist nur halb so aufwendig wie mit CSS und wird zudem vollständig unterstützt. um dieses ziel zu erreichen, gibt es zwei verschiedene Herangehensweisen. Ihr könnt entweder eine Box nachträglich abrunden ( mit Effekt > Stilisierungsfilter > Abrunden ) oder ihr verwendet anstatt des Rechtecks gleich das abgerundete Rechteck. Das könnt ihr auch jetzt noch ändern, indem aus dem Menü das "abgerundete Rechteck" ausgewählt wird.

 

7. Das Pipette-Werkzeug

Andere Texte wollen nun natürlich auch so aussehen. Da gibt es mehrere Möglichkeiten. Nichts mit CSS zu tun hat das Pipette-Werkzeug. Daher übergehen wir das einfach mal...

 

8. Grafikstil erzeugen vs. Background-Image

... und gehen über zu den Grafikstilen. Sowas wie verlinkte Stylesheets gibt es in Illustrator nicht, auch Grafikstil-Bibliotheken entsprechen nicht diesem Konzept, da sie keine Verbindung in Dateien aufrechterhalten, in denen sie benutzt wurden. Das gleiche gilt für alle anderen Bibliotheken. Illustrator kennt nur "Inline-Styles", also Grafikstile innerhalb der Datei. Um einen Grafikstil von dem Button zu erzeugen, aktiviert ihr das Textobjekt und zieht dessen Miniatur aus der Aussehen-Palette in die Grafikstile-Palette.

 

9. Grafikstil zuweisen

Diesen Grafikstil könnt ihr auch anderen Textobjekten zuweisen, indem ihr diese mit dem Auswahl-Werkzeug auf der Zeichenfläche auswählt und dann auf den entsprechenden Grafikstil klickt. In der Aussehen-Palette wird dann der Name des Grafikstils als Eigenschaft des Objekts angezeigt.

Anmerkung: Ein Textobjekt ist in Illustrator ein wenig besonders. In diesem Fall ist es wichtig, dass ihr vor dem Zuweisen des Grafikstils auf weitere Objekte die Option "Zeichenfarbe überschreiben" im Palettenmenü der Grafikstile-Palette deaktiviert.

 

10. Die Kaskade

Jetzt kommen wir zur hohen Schule: der Kaskade. Auf einer HTML-Seite packt man alle die Eigenschaften, die für darunter liegende Objekte gelten sollen, in ein übergeordnetes Element. Das geht in Illustrator auch. Zwar nicht in das Dokument allgemein, aber einer Ebene oder einer Gruppe könnt ihr "Aussehen-Eigenschaften" zuweisen. Sie gelten dann für alles, was auf der Ebene liegt oder zur Gruppe gehört.

11. Die Ziel-Auswahl

Um einer Ebene Eigenschaften zuzuweisen, müsst ihr sie "als Ziel auswählen". Die Zielauswahl ist ein wichtiges Konzept in Illustrator, wird gerne übersehen oder mit der Auswahl von Objekten durcheinander gebracht. Ziel-Auswahl: Ein Objekt muss als Ziel ausgewählt sein, wenn man ihm Eigenschaften zuweisen möchte. Einzelne Objekte oder Gruppen sind automatisch "Ziel", wenn sie mit dem Auswahl-Werkzeug aktiviert wurden. Das Ziel-Symbol - der Bullet in der Ebenen-Palette ( siehe linker Teil der Abbildung ) - zeigt dies durch seine doppelte Umrandung an.

Da man Ebenen nicht mit dem Auswahl-Werkzeug aktivieren kann, muss es hier anders gelöst werden. Die Ziel-Auswahl geschieht auch über das Ziel-Symbol: um eine Ebene als Ziel auszuwählen, klickt ihr einfach auf den Bullet in der entsprechenden Zeile.

 

12. Kontur vs. Border

Jetzt geht es wieder in die Aussehen-Palette, um die Eigenschaften für die Ebene zu definieren. Wir wollen hier eine Outline um die Texte und Buttons anlegen. Zunächst müsst ihr also in der Aussehen-Palette eine Neue Kontur anlegen ( Palettenmenü, siehe Schritt 2 ). Da die Ebene bisher keine Aussehen-Eigenschaften besaß wurde automatisch auch eine Fläche angelegt - das könnt ihr nicht abstellen, stört aber auch nicht wirklich.

Da die Kontur viel zu stark ist, weist ihr eine geringere Stärke ( im CSS wäre es dies die Eigenschaft border-width ) mit dem Menü in der Aussehen-Palette oder über die Kontur-Palette zu. Einen Wert könnt ihr nicht nur aus dem Menü auswählen, sondern auch direkt in das Feld eintippen.

Die Eigenschaften werden angewendet auf die Objekte, die auf der Ebene liegen - aber es werden nicht nur die ( real vorhandenen ) Zeichen umrandet, sondern auch die über den Effekt erzeugte Buttonfläche.

13. Stapelreihenfolge vs. z-index

Machen wir noch einen kleinen Ausflug zur Stapelreihenfolge - das könnt ich Euch vorstellen wie die Eigenschaft z-index. Die Stapelreihenfolge gilt nicht nur für die Objekte selbst, die ihr auf der Zeichenfläche übereinanderlegt und deren Sortierung ihr mit Objekt > Anordnen > Nach vorne/hinten bzw. In den Vordergrund/Hintergrund bearbeiten könnt.

Auch die Aussehen-Eigenschaften haben eine Stapelreihenfolge, die ihr in der Aussehen-Palette ändern könnt bzw. die auch schon beim Zuweisen z.B. eines Effekts automatisch vorgenommen wurde. Vielleicht ist euch aufgefallen, dass die Neue Kontur aus Schritt 12 automatisch über der Schrift gelandet ist ( in der Aussehen-Palette oberhalb von "Inhalt" ). Jetzt wendet ihr einen Effekt an, der automatisch nach unten gestellt wird: den Schlagschatten. Als erstes klickt ihr in der Aussehen-Palette einmal auf "Ebene", um die Aktivierung der Kontur aufzuheben. Deaktiviert aber nicht die Ziel-Auswahl der Ebene!

Jetzt wählt ihr Effekt > Stilisierungsfilter > Schlagschatten. Bearbeitet die Optionen nach Geschmack und klickt dann auf OK. Ihr seht in der Aussehen-Palette, dass der Schlagschatten unter "Inhalt" angeordnet wurde - ganz von selbst. Bei Effekten ist die Anordnung im Aussehen-Bedienfeld wichtig für die Reihenfolge ihrer Anwendung, der Schlagschatten wird also in diesem Fall als letzte Eigenschaft am Objekt angewendet.

So wie Ebenen kann man übrigens auch die Aussehen-Attribute in der Aussehen-Palette greifen und verschieben ( siehe Schritt 2 ). Am besten probiert ihr das einfach mal mit verschiedenen Eigenschaften aus - besonders ergiebig sind dabei die Effekte aus dem Bereich "Verzerrungs- und Transformationsfilter".

Ich hoffe dieser Workshop hat dazu geführt, dass der ein oder andere der mit der Thematik Aussehen-Eigenschaften Schwierigkeiten hatte, auf diese Weise einen neuen und hoffentlich hilfreichen Ansatz zur Nutzung von Illustrator gefunden hat. Viel Spaß beim Experimentieren!

Monika Gause, Gastautorin dieses Artikels, ist Betreiberin der Webseite Vektorgarten und bietet dort interessierten Anwendern von vektorbasierten Anwendungen wie Adobe-Illustrator, zahlreiche hilfreiche Tipps und Tricks im Umgang mit der Software. Außerdem ist sie Autorin verschiedener Bücher zum Thema Illustrator, u.a. auch des fast 800 Seiten umfassenden und im Galileo-Verlag aktuell erschienenen Buches Adobe Illustrator CS4.

Ähnliche Artikel zu diesem Thema:

• Top Illustrator Tutorials
• Illustrator Tutorial - Wikinger-Logo
• Illustrator Tutorial - Feuerwerk