Realistischere Verlaufseffekte für 3D-Buttons

Es lohnt sich aber in jedem Fall, unsere Button-Schritt-für-Schritt-Anleitung einmal wenigstens selbst durchgearbeitet zu haben, um die Überblendfunktion von CorelDraw besser anwenden zu können.

Zur Veranschaulichung haben wir die Arbeitsschritte während der Entstehung eines solchen Buttons in einer „Schritt-für-Schritt"-Grafik zusammengefaßt. Der aktuelle Arbeitsschritt ist hierin immer rot markiert.

Unser Beispiel-Button ist ein stark gerundetes Rechteck, wie es bei heute modernen Softline-Designs diverser Hifi-Komponenten und Autoradios benutzt wird. Durch seine längliche Form eignet es sich vorzüglich beispielsweise für TouchScreen-POI-(Point of Information-)Systeme, da es einerseits am unteren Bildschirmrand wenig Platz beansprucht, andererseits aber selbst von klammen Fingern gut angewählt werden kann. In unserem Beispiel ist dieser Button zusätzlich als Kipp-Schalter ausgebildet, um die Laufstärke zu erhöhen oder zu verringern.

Im ersten Schritt erstellen wir also ein Rechteck in einem großen Maßstab (Abmessungen Breite x Höhe: etwa 330 x 115 Millimeter). Mit dem Knotenwerkzeug ziehen wir die Ecken um 45 Millimeter nach Innen. Im Folgenden benötigen wir die Knoteninformationen dieser Form, deshalb wandeln wir das abgerundete Rechteck in Kurven um (Strg + Q). Auch die Füllung können wir gleich zuweisen: da wir unseren Button im modernen „Hifi-Schwarz" anlegen wollen, färben wir ihn mit 30 % Cyan und 70 % Schwarz (keine Außenlinie). Der Cyan-Anteil ist für eine fotorealistische Darstellung wichtig, den alles, was wir sowohl in der Realität als auch auf Fotos als Schwarz empfinden, ist immer eine Mischung auch aus anderen Farben. Kein Körper reflektiert alle Bestandteile des Farbspektrums in gleichem Maße -- und nur dann würde ein neutrales Grau zustande kommen.

Da uns die Darstellung der Füllung im weiteren nur behindern würde, stellen wir CorelDraw im Menü „Ansicht" auf den „Umrißmodus" ein.

Nun machen wir uns an das erste Überblend-Objekt unseres Buttons, das die Reflexion eines etwas von links oben kommenden Lichts imitieren soll. Wir machen es uns einfach und kopieren unser Rechteck und passen es an: Über das Menü „Effekte" wählen wir „Dehnen" an. Dort stellen wir für Höhe und Breite 99 % ein und klicken auf „Original behalten" und „OK". Mit dem Knoten-Werkzeug verschieben wir die Knoten und die Angelpunkte, bis der gewünschte äußere Rand des Lichthofs erreicht ist (s. Abbildung 1, Schritt 2). Dieser äußere Rand hat natürlich die gleiche Füllung wie die Grundform des Buttons, um die Lichtreflexion übergangslos aus dem Button hinauswachsen zu lassen. Da wir die Füllung ja ebenfalls aus der Grundform übernommen haben, müssen wir sie nicht zusätzlich zuweisen.

Jetzt konstruieren wir den hellsten Teil der Reflexion, das das Endobjekt der Überblendung bilden soll. Dabei erweist sich ein Kopieren des Startobjekts als ausgesprochen nützlich: sowohl Start- als auch Endobjekt haben die gleichen Konstruktions- und Startpunkte. Ungewollte Verzerrungen, die durch die unterschiedliche Anzahl der Konstruktions- oder durch verschiedene Startpunkte auftreten können, werden hier gleich zu Anfang vermieden. Also kopieren wir das Startobjekt genauso, wie wir es bereits bei der Grundform getan haben: Über „Effekte ... Dehnen" kopieren wir es mit „Original behalten" und der Einstellung von jeweils 99 % Breite und Höhe.

Über das Knoten-Werkzeug wiederum formen wir es zu einem ganz schmalen Lichtband (s. Abbildung, Schritt 3). Dieses Lichtband bzw. Endobjekt der Überblendung füllen wir mit 8 % Cyan und 30 % Schwarz. Wir markieren sowohl Start- als auch Endobjekt und wählen über das Menü „Effekte" das „Überblenden-Rollup" an. Durch das vorangegangene Kopieren des Start- zum Endobjekt ersparen wir uns hier einiges an Einstellarbeit; lediglich die Anzahl der Überblendschritte muß eingestellt werden. Da einerseits Start- und Endobjekt eng beieinander liegen und sie zudem „verwandt" sind (= wenige Schritte), wir andererseits aber den Button in jeder beliebigen Größe anwenden wollen (= viele Schritte), stellen wir als Kompromiß 25 Schritte ein. Das Monitorbild sollte nun wie in der Abbildung, Schritt 4, dargestellt aussehen.

Die Schritte 5 und 6 beschreiben die Erstellung eines Schattenkörpers in der unteren Hälfte des Buttons und eines zweiten Lichtkörpers am unteren Rand. Der Schattenkörper verleiht unserem Button Tiefe und Dreidimensionalität, die untere Lichtkörper simuliert eine zweite Lichtquelle von schräg unten (wo existiert schon nur eine Lichtquelle).

Die Vorgehensweise ist wie schon im ersten Reflexionskörper beschrieben, die Füllungswerte sind in der Abbildung, Schritte 5 und 6, angegeben. Da hier beide Start- und Endobjekte noch näher beieinander liegen, kommen wir mit nur 15 Schritten bei den Überblendungen aus.

Nun steht ja kein Button ganz allein, er muß noch in den jeweiligen Hintergrund eingebaut werden. Dazu geben wir dem Button gleich noch eine Paßfuge mit auf den Weg (Schritt 7). Dazu legen wir um den Button ein etwa an allen Seiten um 5 Millimeter überstehendes Rechteck (Maße also etwa 340 x 125 Millimeter), an dem wir die Ecken wieder um etwa 47 mm nach innen ziehen und das wir sogleich in Kurven umwandeln. Dieses Rechteck kopieren wir standgenau durch drücken der Tasten Strg und der Plustaste (+). Wie in der Abbildung, Schritt 8, verdeutlicht, benötigen wir den unteren Bogen dieses kopierten Rechtecks, um eine feine Reflexionslinie zu bekommen.

Dazu schneiden wir das Rechteck an zwei Punkten auf (Punkt doppelklicken, im „Knoten bearbeiten"-Rollup das rechte Symbol wählen), trennen es (Menü „Anordnen", „Kombination auflösen" bzw. Strg + K) und löschen den oberen Bogen. Dem unteren weisen wir die Stärke 0,2 Punkt und die Linienfarbe 30 % Schwarz zu (die „Skalieren mit Objekt"-Option des Umrißstift-Werkzeuges muß abgewählt sein, damit die Linie auch noch beim starken Verkleinern sichtbar bleibt).

Das gleiche machen wir, um noch eine Lichtlinie um die Buttongrundform zu bekommen (s. Abbildung, Schritt 8).

So, der Button ist fertig. Am besten, man markiert und gruppiert ihn, denn die Beschriftung des Buttons kann dann immer wieder abgeändert werden, ohne den eigentlichen Button aus Versehen zu verändern. Durch Umschalten auf den Volltonmodus kann man sich jetzt ein Bild des 3D-Effektes machen.

Unser Beispiel-Button soll die symbolische Aufgabe bekommen, eine imaginäre Lautstärke abzusenken oder zu erhöhen. Dazu benötigen wir die Beschriftung „VOL" (Volume) sowie ein Plus- und ein Minuszeichen. Sowohl Schriftzug als auch Plus-/Minuszeichen sollen leicht vertieft erscheinen. Eine geeignete Schriftart bringt natürlich CorelDraw wieder mit -- wie sollte es bei der Auswahl anders sein --, es ist die „Bank Gothic medium" (Schriftnummer: 0589). Sie ist der häufig auf Hifi-Anlagen verwendeten Schrift sehr ähnlich und auch in kleinen Schriftgraden gut lesbar.

Von der Beschriftung „VOL" sowie dem Plus- und dem Minuszeichen wird zuerst die Schattenseite der Vertiefung angelegt (Schritt 10). Anschließend (Schritt 11) werden die Zeichen um jeweils 2 Millimeter nach rechts unten kopiert (Menü „Anordnen ... Verschieben" bzw. ALT + F7, Horizontal +2 mm, Vertikal -2 mm, „Original behalten"). Das ist die Lichtseite der Vertiefung. Zum Schluß kommt dann die eigentliche Beschriftung (Schritt 12), die wir durch Kopieren der eben angelegten Lichtseite erreichen (wie gehabt ALT + F7, Horizontal -1 mm, Vertikal +1 mm, „Original behalten"). Die jeweiligen Füllungen sind in der Abbildung, Schritte 10 bis 12, angegeben.

Unser erster beschriftete Button ist fertig. Um diesen Button später weiter zu verwenden, legt man sich am besten eine Symbolbibliothek an. Am unkompliziertesten ist die Verwendung natürlich in CorelDraw-Illustrationen, dort kann man die Buttons einfach durch Importieren nutzen und skalieren. Anders sieht es bei den beiden anderen eingangs erwähnten Anwendungsgebieten aus. Hier benötigt man die Buttons meist als Pixelbild im BMP-Format.

Aber auch dieser Export kann mit CorelDraw erledigt werden. Wir haben unseren Beispiel-Button zur Demonstration auf 16 Millimeter Breite verkleinert und mit CorelDraw in verschiedenen Einstellungen exportiert. Das Ergebnis ist in Abbildung 2 zu sehen. Zu beachten ist, daß die Pixel-Größe des Buttons auf die spätere Monitordarstellung angepaßt werden muß. CorelDraw stellt diese im BMP-Export-Dialogfeld lobenswerterweise gleich richtig dar.

Kann man auf das Bildverarbeitungsprogramm Photoshop 2.5 zurückgreifen, lassen sich bei niedrigen Auflösungen noch bedeutend bessere Ergebnisse erzielen. Dazu exportiert man den Button im EPS-Format und liest dieses in Photoshop ein. Dabei läßt sich die Auflösung ebenfalls frei wählen, zudem verfügt das Adobe-Programm aber über die Option, „geglättete" Bitmaps aus EPS-Dateien zu erzeugen. Durch Zwischentöne wird dem Auge eine höhere Auflösung vorgegaukelt, auch die Treppchenbildung fällt kaum mehr ins Gewicht.

Für die Online-Leser haben wir bereits einige „3D-ButtonSets" im CorelDraw-3-Format vorbereitet. Jeder der drei momentan erhältlichen Sets enthält 12 verschiedene Buttons einer bestimmten Design-Richtung. Dabei handelt es sich je Set um verschiedene Grundformen -- also nicht nur ein Button mit verschiedenen Beschriftungen. Diese lassen sich mit CorelDraw einfach an eigene Bedürfnisse anpassen. Bei den Designs sind folgende Stile erhältlich: Softline, Pop und Abstrakt (siehe Abbildungen). Jeder Set ist auf 3,5-Zoll-Diskette zum Preis von nur 49,-- Mark plus Nachnahme erhältlich.