Webdesign mit FreeHand

Transkript

1 Glaubt man der 30-Jahre-Regel, die in der Geschichte mehrfach für die Einführung eines neuen Mediums bestimmt wurde, so werden auch Internet-Angebote noch eine gewisse Entwicklungszeit brauchen. Sitemaps, Linkgestaltung und Interaktivität, Frames als Navigationsmittel sowie Sound und Video werden elementare Bestandteile einer Websprache. 1 Intensivieren

2 Abbildung 28 Beispiele für Buttons Abbildung 29 Mit Hilfe der Funktion Objekte mischen können interessante Bedienelemente entstehen. 3-D-Effekte aus Verlaufsmischungen Auch wenn es nahe liegt, Schalter, Linien oder andere Elemente für das Web mit dem vorseitig beschriebenen Xtra zu realisieren, möchten wir an dieser Stelle auf die reichen Gestaltungsmöglichkeiten des Mischens von Pfaden aufmerksam machen. Schon seit einigen Jahren ist man in FreeHand in der Lage, zwei oder mehrere, geschlossene oder offene Pfade miteinander zu mischen. Dies funktioniert immer dann, wenn alle zu mischenden Objekte denselben Füllungsoder/und Liniencharakter aufweisen. Objekte lassen sich nur mischen, wenn alle Objekte in folgenden Punkten Übereinstimmung haben: Grundfüllung Verlaufsfüllung abgestuft radial konturiert Linien als Grundform (z. B. keine Muster) Objekte mit der gleichen Linien- und Füllungsart Wählen Sie Modifizieren Zusammenfassen Mischen, um interessante Effekte zu erzielen. Die Anzahl der zu mischenden Punkte kann dabei vollkommen unterschiedlich sein; ebenfalls die verwendeten Farben. Sie können je nach Arbeitsspeicher unzählige Objekte zu einer Grafik mischen. 2

3 Abbildung 30 Erste und zweite Phase eines Rollover-Zustandes Abbildung 31 Die Lampen sind aus einfachen abgestuften Füllungen entstanden. Abbildung 32 Eine konturierte Verlaufsfüllung wurde auf den Rand des Gerätes angewendet. Überaus wichtig ist, dass FreeHand allen anderen Linien- oder Füllungsformen wie Anpassen, Linse, Muster, Postscript, Textur und Kachel das Mischen nicht gestattet. Eine weitere Besonderheit besteht in der Übereinstimmung der jeweiligen Farbstufen bei den Verlaufsfüllungen. Wenn Sie beispielsweise für zwei zu mischende Objekte eine Radialfüllung gewählt haben, so muss nicht die Anfangsund Endfarbe übereinstimmen, sondern die Anzahl der Farben. Sie können sogar frei das Zentrum des Verlaufs verschieben, um die Mischung kreativ zu verändern. Wunderbar klappt das auch mit der neuen konturierten Verlaufsfüllung. Wenn Sie in der Füllungsart abgestuft gewählt haben und anschließend den Verlaufswinkel verändern, entstehen neue fantasievolle Formen. Benutzen Sie auch das Stil-Bedienfeld, um Füllungen auf andere Objekte zu übertragen oder zu duplizieren. Vektoren im Interface-Design Die hier gezeigten Beispiele sind ausnahmslos in FreeHand 10 entstanden. Dabei wurden immer wieder Kombinationen von Verlaufsfüllungen mit Mischungen angewendet. Um das gerade für das Internet so beliebte Rollover mit zwei oder drei Zuständen zu gestalten, sind wir folgenden Weg gegangen: 1. Anlegen der grafischen Grundformen wie Hintergrundfarbe, Form und Farbe der einzelnen Elemente. 3 Intensivieren

4 Abbildung 33 Die Elemente der Lautsprecheröffnung stammen aus einer Mischung, wogegen der Drehknopf ein einfacher Verlauf ist. 2. Die Objekte werden geklont und auf eine weitere neue Ebene z. B. mit der Bezeichnung»Phase 2«gelegt. 3. Die Verlaufsfüllungen der Ovale und Rechtecke wurden als Stil gesichert. 4. Der Stil z. B.»Roter Button, Phase 1«wurde dupliziert und entsprechend den Farb- und Winkelveränderungen neu benannt. 5. Erst jetzt erfolgte die Mischung, indem jeweils zwei Objekte einer Ebene (also eines zukünftigen Rollover-Zustandes) gleichzeitig ausgewählt wurden. 6. Nacheinander wurde die Mischung auf die Objekte der ersten Ebene und dann auf die der zweiten Ebene angewendet. Somit erhalten Sie verschiedene Zustände eines Objektes und können jederzeit weitere Modifizierungen vornehmen, die sich in Farbe, Kontrast und Helligkeit äußern. Die anderen Elemente sind entweder wie der Rand aus einer Konturfüllung oder aus Verlaufsfüllungen entstanden. Erst die richtige Kombination von Füllungen und Mischungen macht daraus eine Illustration. Achten Sie in der Praxis auf eine einheitliche Farbpalette, die Sie als Grafikstil oder an Objekte gebunden in der Symbolbibliothek hinterlegen. Mit kleinen Tricks können Sie die fertige Illustration in das Photoshop-Format inklusive der Ebenen exportieren und fotorealistisch 4

5 Abbildung 34 Die komplette Interface-Illustration wurde abschließend in Photoshop nachgearbeitet. aufwerten. So behalten Sie die zuvor in Free- Hand erstellten Zustände für die Rollover- Funktion der Buttons bei. Das Hineinkopieren der Hintergründe sowie weitere Licht- und Schatteneffekte sind nachträglich in der Bildbearbeitung entstanden. 5 Intensivieren

6 Abbildung 35 Die in FreeHand gezeichneten Pfade werden gemeinsam mit den Ebenen exportiert und lassen eine Weiterarbeit in Photoshop zu. 6