AMIGA-Magazin · Ausgabe 7/07 · Workshop: Wallpaper mit "ArtEffect 4"

Aktuelles Heft 7/07

Kreative Workbench

Der Aqua-Stil von MacOS X ist sehr beliebt und wurde deswegen schon für viele Anwendungen anderer Plattformen kopiert. Im aktuellen Workshop lernen Sie, wie Sie mit "ArtEffect" in diesem Stil ein Hintergrundbild produzieren.

von Simon Neumann

Bevor Sie mit der Arbeit am Bildschirmhintergrund beginnen, sind zunächst einige wichtige Punkte zu beachten:

1. In welcher Auflösung wird das Bild benötigt?
2. Welches Seitenverhältnis soll das Bild haben?
3. Welche Grundfarben und Elemente sollen zum Einsatz kommen?

Die Auflösung bei der Produktion des Motivs sollte möglichst groß sein. Empfehlenswert für die Arbeit ist eine Auflösung von 1600x1200 Bildpunkten. Die wenigsten Computernutzer besitzen einen Desktop mit dieser hohen Auflösung. Für kleinere Formate wird das Ursprungsbild heruntergerechnet.

Beim Seitenverhältnis kommt es natürlich darauf an, welche Auflösung man verwenden möchte und welcher Monitortyp zum Einsatz kommt. Die meisten Amiga-Benutzer verwenden 4:3-Verhältnisse, also Auflösungen wie 1024x768 oder 1280x960. Es gibt aber auch einige, die eine Auflösung von 1280x1024 nutzen, also ein Verhältnis von 4:3,2 oder einen 16:9-Bildschirm mit einer Auflösung von etwa 1366x768. Überlegen Sie sich davor für welchen Typ Sie das Hintergrundbild gestalten. Das Seitenverhältnis des Bildes lässt sich im Nachhinein ohne Verluste, wie Beschneidungen, hässliche Stauchungen oder Streckungen, nicht mehr ändern.

Der Hintergrund
Ein Hintergrundbild soll ja meistens nicht zu sehr ins Auge stechen, sondern harmonisch und ausgeglichen auf den Benutzer wirken. Es ist deshalb wichtig, dass der Hintergrund möglichst homogen gestaltet wird. Das bedeutet: Möglichst keine unruhigen Elemente, rauhe Texturen, grelle und viele bunte Farben verwenden.

Im Workshop soll ein Hintergrundbild für "AmigaOS 4" im Aqua-Stil entstehen. Deshalb wird natürlich darauf geachtet, dass die Farben zu den restlichen GUI-Elementen wie Fensterrahmen passen. Die Wahl fällt deshalb auf die typischen hellen Blau- und Grautöne der "AmigaOS 4"-Workbench. Nur diese Farben sollten Sie verwenden und harmonisch verteilen.

Mit hervorstechenden grafischen Elementen sollte auch sparsam umgegangen werden, um das Bild nicht unnötig zu überladen und wieder unruhig werden zu lassen. Im Beispiel kommen als Elemente nur das Amiga-Logo, der OS4-Schriftzug und der Amiga-Boingball zum Einsatz.

Für die Gestaltung des Wallpapers kommt das Bildbearbeitungsprogramm "ArtEffect" zum Einsatz. Erzeugen Sie ein neues Dokument mit der gewünschten Auflösung von 1600x1200 Bildpunkten. Die Hintergrund-Ebene statten Sie mit einem weichen Farbverlauf aus. Wählen Sie das Werkzeug "Füllen" (Eimer) aus und selektieren im Werkzeug-Einsteller die Option "Verlauf". Im Verlaufsmodel-Einsteller geben Sie "Linear" und "Vordergrund zu Hintergrund" an (s. "Blender"). Bevor Sie nun die Hintergrund-Ebene füllen, müssen noch die Hintergrund- sowie Vordergrundfarben festgelegt werden. Als Vordergrund kommt der dunkle Blauton (RGB 70-115-178) und als Hintergrund das helle Blau (RGB 144-189-243) zum Einsatz. Nun füllen Sie das Bild, der Farbverlauf sollte dabei von oben nach unten linear gerichtet sein (s. "Hintergrund").

Weitere Elemente und das Logo
Im folgenden Arbeitsschritt kümmern Sie sich um die weiteren Elemente (u.a. Logo, Schriftzüge). Im Beispiel ist dies das AmigaOS-4-Logo mit den zwei Schriftelementen "Amiga" und "OS 4.0". Um die beiden Elemente getrennt zu behandeln, erzeugen Sie zwei neue Ebenen mit den Bezeichnungen "Amiga" und "os4" und positionieren mit dem Textwerkzeug den genannten Schriftzug auf die jeweilige Ebene. Der Amiga-Schriftzug sollte dabei ungefähr so breit sein, wie der OS4-Teil. Sie positionieren diesen später darüber.

Die Farbe der Schriftzüge ist egal, da diese im nächsten Schritt mit einem Verlauf ausgestattet werden.
Aktivieren Sie die Ebene mit dem Schriftzug "OS4". Erzeugen Sie eine Maske aus dem Schriftzug mit der Funktion "Aus Transparenz erzeugen" im Hauptmenü "Maske". Danach löschen Sie den Schriftzug aus der Maske und füllen diese mit denselben Verlaufsfarben, die auch schon für den Hintergrund verwendet wurden, von oben nach unten. Damit sich der Schriftzug trotz gleicher Farben aus dem Hintergrund herausheben kann, fügen Sie ein Konturglühen zur Schrift hinzu. Wählen Sie dazu den dunklen Blauton als Vordergrundfarbe und danach den Filter "Shine" im Filtermenü "Stilisierungsfilter" aus. Im Filter-Einsteller legen Sie als Shine "Outside", als Pixelradius "15" und die Stärke "200" sowie die Opacity (Deckkraft) auf 80 fest. Spielen Sie etwas mit den Einstellungen herum, denn diese Einstellung muss nicht unbedingt perfekt zu Ihrem Schriftzug passen. Positionieren Sie danach den Schriftzug im rechten unteren etwas helleren Bildbereich.

Erstellen Sie den Amiga-Schriftzug analog - beim Farbverlauf verwenden Sie Weiß als Transparent. Sie wählen dazu die Ebene "Amiga" und erzeugen mit dem Menüpunkt "aus Transparenz erzeugen" eine Maske und löschen die Farbe aus der Maske. Für den Farbverlauf von Weiß nach Transparent müssen Sie sich einen eigenen Verlauf mit dem Manager aufbauen. Dazu rufen Sie den Verlaufsmanager auf und erzeugen über den Knopf "Neu", einen neuen Verlauf mit den Namen "Maske mit Farbe". In dem neuen Verlauf stellen Sie für den gesamten Farbbereich auf die Farbe Weiß, mit einem Rauhheitsgrad von Null Prozent. Die Transparenz wird am Verlaufsstart auf Null Prozent und am Ende auf 100 Prozent Deckungsgrad festgelegt (s. "Verlaufsmanager 1").





Verlaufsmanager1:
Als Farbe (oben links) wird Weiß und als Option "Maske mit Farbe" bestimmt.
Verlaufsbogen1:
Die Richtung und die Verlaufsweite des ersten Kreiselements wird bestimmt.
Verlaufsmanager2:
Die schwarzen Stifte stellen den transparenten Teil des Verlaufs dar.
Verlaufsbogen2:
Mit Hilfe der Verlaufsmaske wird der Kreis im linken oberen Bereich sanft ausgeblendet.

Mit dem neu erzeugten Verlauf wird nun die Maske auf der Ebene "Amiga" linear von unten nach oben gefüllt, damit am unteren Teil des Schriftzugs ein Übergangseffekt zum Hintergrund entsteht. Positionieren Sie die Amiga-Schrift bündig über den OS4-Teil.

Verlaufsbögen
Im nächsten Schritt fügen Sie die Verlaufsbögen als typische Erkennungsmerkmale des Aqua-Stils ein. Diese geben dem Bild die gewisse Dynamik, damit das Bild nicht langweilig wirkt. Für die Gestaltung der Bögen benötigen Sie das Werkzeug "gefüllter Kreis" und einen Verlauf über "Maske mit Farbe". Wählen Sie dazu das Kreiswerkzeug und selektieren im Werkzeugeinsteller unter dem Punkt "Verlauf" den im letzten Abschnitt erstellten Verlauf aus. Mit dem Kreiswerkzeug fügen Sie Schritt für Schritt immer mehrere Kreise ins Bild und bearbeiten diese. Dabei können die Kreiselemente über die Bildschirmgrenzen herausragen.

Zeichnen Sie einen Kreis, wie in der Abbildung "Verlaufsbogen 1" zu sehen ist. Danach geben Sie die Ausrichtung, Anfang und Ende für die Verlaufsfüllung des Kreises an. Damit durch das Kreisgebilde ein Bogen entsteht, müssen Sie die Transparenz irgendwo im Kreis beginnen und außerhalb des Kreises mit der Farbe enden lassen (s. "Verlaufsbogen 2"). Testen Sie selbst, mit welchem Winkel, Start und Endpunkt und Verlaufsweite Sie die
besten Ergebnisse erzielen.

Versuchen Sie nun mehrere Bögen zu zeichnen und diese so anzuorden, damit interessante Formen entstehen. Die Bögen können dabei ruhig übereinanderliegen, sich schneiden oder sich wie eine Tangente an eine andere schmiegen. Für die bessere Positionierung oder spätere Modifikationen der Bögen, empfiehlt es sich jeden Bogen auf eine eigene Ebene zu platzieren. Außerdem sollten Sie die Projekt-Datei im ArtEffekt-Format mit den Ebenen sichern.

Scherenschnitt
Der Amiga-Boingball darf natürlich nicht in unserem Hintergrundbild fehlen. Im Beispiel passt aber das kräftige Rot des Amiga-Symbols nicht wirklich in das Bild. Deshalb fügen Sie den Boingball mit dem Scherenschnittverfahren als Silhouette im Bild ein. Dabei kommt auf dem Computer die gleiche Methode wie auch in der klassichen Anwendung mit Papier zum Zuge. Der Scherenschnitt zeigt das Abbild des Schattenbildes eines Objekts und besteht deshalb nur aus einem Farbton.

In unserem Beispiel soll beim Boingball natürlich neben der Umrandung auch die Karo-Umrisse dargestellt werden. Dazu benötigen Sie als erstes eine Boingball-Grafik in möglichst hoher Auflösung. Suchen Sie im Internet nach einer passenden Grafik oder zeichnen Sie in "ArtEffect" Ihr eigenes Boingball-Motiv.

Laden Sie das Ball-Image in ArtEffect ein und wenden Sie den Filter "Schwellwert", bis nur noch die roten Karos als schwarze Flächen zu sehen sind (s. "Amiga-Ball"). Skalieren Sie nun den Boingball soweit herunter bis eine geeignete Größe für Ihr Bild erreicht ist. Ein positiver Nebeneffekt: Die durch den Schwellwert-Filter entstandenen Kanten werden beim Skalieren ein wenig geglättet. Drehen Sie danach den Boingball um ca. 15 Grad nach rechts und maskieren den schwarzen Bereich über die Funktion "Farbselektion" im Menü "Maske" aus. Als nächstes wandeln Sie das Bild in einen Pinsel um und positionieren diesen auf die neu erzeugte Ebene "Ball". Erstellen Sie wie schon bei den Schriftzügen eine Maske von der Grafik und löschen nachher die Grafik von der Ebene. Die Maske des Boingballs füllen Sie jetzt wieder mit dem Farbverlauf "Maske mit Farbe".

Verwenden Sie zum Füllen das Rechteckwerkzeug, anstatt des Fülleimers, um alle Boingballkammern auf einmal zu erfassen. Als Verlaufsrichtung geben sie für den Weißanteil die linke obere Ecke des Balls und für den Transparenzteil die rechte untere an. Zum Schluss positionieren Sie den Boingball noch über die Verschiebefunktion der Ebene in den etwas dunkleren linken oberen Bereich des Bildes.

Umfärben
Zu guter Letzt gibt es noch einen Tipp, wie Sie das Hintergrundbild bei Bedarf sehr leicht an einen anderen Farbton anpassen können. Hierzu benötigen Sie den Filter "Farbraumjustierung". Dieses Werkzeug finden Sie im Filter-Menü unter "Farbfilter". Öffnen Sie die Projektdatei im ArtEffect-Format. Wählen Sie die Hintergrund-Ebene aus und öffnen dann den Filter.

Im Einsteller des Filters gibt es die drei Regler: Farbton, Helligkeit und Sättigung. Sie benutzen nur den Regler "Farbton", da die Helligkeit sowie die Sättigung beibehalten werden soll. Nach der Betätigung des Farbreglers sollte im Vorschaufenster zu sehen sein, dass sich der Farbton des gesamten Hintergrunds verändert. Sobald Sie sich für eine Farbe entschieden haben, wenden Sie diese über den Knopf "Ausführen" auf die Ebene an. Anschließend passen Sie die Ebene mit dem OS4-Schriftzug analog an. Verändern Sie bei Bedarf die Deckkraft der Ebenen mit den Kreiselementen oder testen Sie verschiedene Ebenen-Modi.

lb

Blender:
Die Verlaufseinstellungen für die Hintergrund-Ebene des Wallpapers wird bestimmt.

Hintergrund:
Der Verlauf wurde auf das Wallpaper Drag-and-Drop angewendet.

Amiga-Ball:
Der Amiga-Ball im Original (oben) und nach der Anwendung des Filters"Schwellwert" (unten).


Farbänderung:
Mit Hilfe von "Farbraumjustierung wird der Farbton des Hintergrunds geändert.

Endergebnis:
Das Hintergrundbild für den Amiga im bekannten Aqua-Stil mit allen Elementen.

Ebenenmanager:
Die Ebenen des Wallpaper-Projektes in "ArtEffect".


Hauptseite © 2007 All Rights Reserved. Alle Rechte vorbehalten Franzis' Verlag GmbH
Veröffentlichung und Vervielfältigung nur mit schriftlicher Genehmigung des Verlags

Kommentare, Fragen, Korrekturen und Kritik bitte an Webmaster AMIGA schicken.
Zuletzt aktualisiert am 14.7. 2007.