9/00

(Art)Effekte fürs Internet

Erbsenzähler in Sachen KByte verschmähen Grafiken auf Webseiten und können mit schnellen Übertragungsgeschwindigkeiten im WWW glänzen. Wer dennoch seine eigene Webpage ein wenig verzieren will, der muss zu einem Grafikprogramm greifen. Für die vorgestellten Beispiele wurde ArtEffect 4 benutzt. Einige der Techniken lassen sich auch mit älteren Versionen des rogramms realisieren, aber nur über Umwege.

Knöpfe für die Navigation

Klassische Navigationsleisten bestehen aus einzelnen Knöpfen, die bei einem Mausklick auf den entsprechenden Content verzweigen. Die Grundform dieser Steuerelemente ist fast immer gleich ­ nur die Beschriftung identifiziert deren Funktion. Deshalb wird erst ein Knopf entworfen und dann verschieden beschriftete Version erzeugt.

1. Öffnen Sie ein neues Bild mit den Abmessungen 320 x 240 Pixel und weißem Hintergrund. Schalten Sie das Raster (Grid) ein, und setzen Sie im Einsteller das Rastermuster auf 10. Um den weißen Hintergrund nicht zu beschäftigen, legen Sie noch eine neue Ebene an, auf der Sie arbeiten.
   
   
2. Aktivieren Sie das Ellipsen-Tool, stellen Sie die Zeichenfarbe auf »Schwarz« und den Zeichenmodus auf Maske (Stencil). Zeichnen Sie zwei Kreise mit dem Durchmesser von 20 Pixeln an den Positionen X=50, Y=120 bzw. X=270, Y=270. Wechseln Sie dann zum Rechteck-Werkzeug und zeichnen Sie eine Fläche zwischen die Kreise. Die Grundform des Knopfes steht (s. Bild 1).

   Hinweis: ArtEffect arbeitet nicht 100-prozentig punktgenau ­ an der Unterkante des Knopfes steht das Rechteck in der Mitte ein wenig über. Radieren Sie diesen Bereich einfach aus der Maske. Wählen Sie dazu als Zeichenfarbe »Weiß« und ziehen Sie ein Rechteck unterhalb des Buttons auf. Es sollte bis an die Unterkante reichen. Damit verschwindet der überstehende Rand. Invertieren Sie die Maske, und speichern Sie sie im Fenster »Ebenen/Masken« (Layers&Channels) unter dem Namen aussen. Die Maske wird später noch einmal gebraucht!
   

   
   

3. Wir erzeugen einen blau schimmernden Knopf ­ Sie benötigen dazu einen Blauton mit dem RGB-Wert 63-111-156. Wählen Sie diesen im Farbregler und weisen diesen der Hintergrundfarbe zu. Die Vordergrundfarbe stellen Sie auf »Schwarz«. Aktivieren Sie den Farbeimer in der Werkzeugleiste, und stellen Sie den Füllmodus auf »Verlauf- linear - Vordergrundfarbe zu Hintergrundfarbe«. Füllen Sie den nichtmaskierten Bereich, und ziehen Sie den Kontrollpfeil für den Verlauf so auf, dass der obere Bereich des Knopfes blau und der untere schwarz ist.
   
   
4. Invertieren Sie die Maske erneut, und wechseln Sie auf das Rechteckwerkzeug. Wählen Sie »Weiß« als Farbe und als Zeichenmodus »Maske« (Stencil). Ziehen Sie ein Rechteck über dem unteren Teil des Knopfes auf ­ dieser Bereich wird gelöscht. Über das Masken-Menü wird mit der Funktion »Verkleinern« (Shrink) die Maske um 3 Pixel geschrumpft. Mit »Rand glätten« (Feather) werden die Kanten der Maske geglättet ­ wählen Sie den Wert »3«. Anschließend invertieren Sie die Maske und legen eine weitere Ebene an. Geben Sie ihr den Namen »Licht«.
   
   
5. Mit Hilfe des Fülleimers und dem Mode »Verlauf-, linear - Vordergrundfarbe zu Hintergrundfarbe« (Vordergrundfarbe sollte jetzt auf »Weiß« stehen) füllen Sie den freien Bereich. Der Kontrollpfeil für den Verlauf steht so, dass der freie Bereich oben weiß ist und unten das Blau hat. Den Transparenz der Ebene »Licht« regeln Sie auf einen Wert von ca. 80 (s. Bild 2) Löschen Sie die aktuelle Maske, und legen Sie einen weiteren Layer an. Diese Ebene muss sich direkt über dem Hintergrund befinden.
6. Holen Sie über das Ebenen-Masken-Fenster den Alphakanal »aussen« wieder hervor und invertieren Sie ihn. Schrumpfen Sie die Abmasse der Maske um 2 Pixel und glätten Sie dessen Kontur (Wert 3 Pixel). Bevor Sie mit dem nächsten Arbeitsschritt fortfahren können, müssen Sie die Maske noch einmal invertieren. Zur besseren Orientierung deaktivieren Sie die Ebenen »Button« und »Licht«. Füllen Sie den unmaskierten Bereich in der Ebene »Schatten« mit schwarzer Farbe, und löschen Sie die Maske.Schalten Sie die Ebenen »Button« und »Licht« wieder ein, regeln Sie dann den Transparenzwert für die Ebene »Schatten« auf ca. 75.

   Verschieben Sie die Ebene (aktivieren Sie das kleine Kreuz im Ebenen-Masken-Fenster) um ca. 3 Pixel nach rechts unten. Der Button sollte »schweben« und der Schatten zu sehen sein (s. Bild 3). Sichern Sie das Projekt als IFF-Datei mit Alpha-Kanälen (Maske). Deaktivieren Sie im Requester für den Filetyp den Punkt »Ebenen zusammenfassen«. Danach verbinden Sie alle Ebenen und können die Knöpfe Beschriften. In unserem Beispiel wurden zwei Text-Ebenen erzeugt und in die Mitte des Knopfes plaziert. Dabei wurde der Layer mit der schwarzen Schrift einige Pixel versetzt, damit ein Schatteneffekt entstand (s. Bild 4).

7. Die gewählte Bildgröße ist natürlich für Webpublishing viel zu groß. Deshalb wurde zum Abschluss noch das Bild beschnitten und skaliert. Bei Schrift bzw. Farbe des Buttons können Sie selbstverständlich Ihren eigenen Geschmack einbringen und experimentieren.

Logos mal anders

Ein Logo oder ein Schriftzug sind Erkennungszeichen einer Homepage. Ein @-Zeichen soll für die vorgestellte Technik als Vorbild dienen. Hinweis: Falls Sie einen Schriftzug nach dem Beispiel gestalten wollen, sollten Sie die Füllung für jeden Buchstaben extra erzeugen. Das Logo wirkt so besser.

1. Legen Sie ein Bild mit der Größe 320 x 240 Pixel und weißem Hintergrund an. Fügen Sie einen Textlayer zum Image hinzu und setzen Sie ein schwarzes @-Zeichen in der Mitte des Bildes (s. Bild 5). Verbinden Sie danach alle Layer und maskieren Sie den schwarzen Bereich mit dem Zauberstab. Legen Sie die Maske im Ebene-Masken-Fenster ab, und geben Sie ihr den Namen »außen«.
2. Legen Sie eine neue Ebene an und füllen Sie die freien nicht maskierten Bereiche mit weißer Farbe. Invertieren Sie anschließend die Maske, verkleinern diese um 4 Pixel, und glätten Sie sie (Wert 2 Pixel). Schalten Sie die Ebene mit dem weißen @-Zeichen aus, und wechseln Sie auf den Hintergrund.
   Ziehen Sie über dem Zeichen eine weiße Fläche auf (Rechteck-Werkzeug). Das schwarze @ verkleinert sich nun. Wechseln Sie wieder auf die Ebene darüber, und invertieren Sie die Maske. Mit dem Rechteck-Werkzeug im Modus »Verlauf« (Vordergrundfarbe zu Hintergrundfarbe) setzen Sie einen diagonalen Verlauf in das Logo. Rechts unten im @-Zeichen sollte der Verlauf weiß sein und oben links dunkelgrau.
   
   
3. Löschen Sie die Maske, und verschieben Sie die obere Ebene um zwei bis drei Pixel nach links oben ­ der Schatten drunter wird sichtbar (s. Bild 6). Fassen Sie alle Ebenen zusammen, und skalieren Sie das Logo in Internet-freundliche Größe.

Scanlines sind modern...

Homecomputer-User der ersten Stunde werden sicher noch das Feeling eines Fernsehers kennen. Die einzelnen Bildzeilen waren da durch kleine dunkle Abstände getrennt (Scanlines). Mittlerweile ist dieser Effekt auf vielen Webseiten anzutreffen. Mit ArtEffect kann man diese Linien per Hand in ein Bild einfügen. Wenn man jedoch das PlugIn-Pack »Power Effects 2« besitzt, kann man diesen Aufwand sparen.

1. Laden Sie das Bild, das Sie mit den Scanlines versehen wollen. Legen Sie eine neue Ebene an und füllen Sie diese mit weißer Farbe. Dann ziehen Sie einen schwarzen Rahmen mit einem Pixel Breite an der Bildkante auf.
   
   
2. Öffnen Sie das PlugIn »Halbton« (Halftone) über das Menü »Filter/Stilisieren«. Als Muster stellen Sie »horizontale Linien« ein und als Größe 2. Die Vordergrundfarbe setzen Sie auf »Weiß« und den Hintergrund auf »Schwarz« (s. Bild 7). Aktivieren Sie anschließend den Filter.
   
   
3. Wechseln Sie zum Zauberstab und stellen Sie die RGB-Toleranz im Einstellungs-Fenster auf 10. Klicken Sie in den schwarzen Bereich der Ebene ­ der weiße Bereich wird maskiert. Deaktivieren bzw. löschen Sie die Ebene mit dem Muster (s. Bild 8).
   
   
4. Wählen Sie als Zeichenfarbe »Schwarz«, und aktivieren Sie das Werk-zeug »Rechteck«. Den Zeichenmodus setzen Sie auf »Abdunkeln« und ziehen dann ein Rechteck über dem gesamten Bild auf. Die Scanlines werden erzeugt. Hinweis: Wenn Sie als Zeichenfarbe »Weiß« wählen und als Zeichenmodus »Aufhellen«, dann entstehen helle Scanlines. Sie können hier mit verschiedenen Grautönen experimentieren. Sie können aber auch mit der Pipette eine häufig auftretende Farbe aufnehmen und den Malmodus »Multiplizieren« bzw. »Differenz« benutzen!

Textur-Logo

Schriftzüge oder Logos passend zu einem Textur-Hintergund zu entwerfen, bedarf nur einiger Arbeitschritte.

1. Öffnen Sie eine Textur, auf der Sie den Schriftzug platzieren wollen. Legen Sie eine neue Ebene an und füllen Sie diese mit weißer Farbe. Über dieser Ebene erzeugen Sie einen Textlayer und erzeugen Ihren Schriftzug in schwarz. Fassen Sie beide Ebenen zusammen. Mit Hilfe des Zauberstabs maskieren Sie die Buchstaben aus und invertieren dann die Maske. Die Ebene mit dem Text können Sie löschen.
2. Legen Sie eine neue Ebene an, und füllen Sie die unmaskierten Bereiche mit Schwarz. Die Transparenz der Ebene stellen Sie auf ca. 50. Klicken Sie dann auf das Symbol zum Verschieben einer Ebene (Kreuz links unten im Ebenen-Fenster). Verschieben Sie die Ebene mit Hilfe der Cursor-Tasten um jeweils einen Punkt nach links und oben. Wechseln Sie zum Radiergummi und entfernen Sie die ungeschützten Bereiche der Ebene. Es entsteht eine Schattenkante.

3. Erzeugen Sie eine weitere Ebene und füllen Sie die freien Bereiche mit weißer Farbe. Die Transparenz der Ebene stellen Sie auf ca. 75. Analog wie in Abschnitt 2 beschrieben, verschieben Sie diese Ebene jeweils einen Pixel nach rechts bzw. unten. Löschen Sie anschliessend alle unmaskierten Bereiche (s. Bild 9).
4. Fassen Sie alle Ebenen zusammen. Wählen Sie als Zeichenfarbe »Weiß« und als Malmodus »Aufhellen«. Stellen Sie die Deckkraft in den Werkzeug-Einstellungen auf 25, und ziehen Sie ein Rechteck über den Buchstaben auf. Der mittlere Bereich der Schrift wird ein wenig heller. Die Einstellungen für die einzelnen Ebenen bzw. die Deckkraft beim Aufhellen lassen Spielraum für Variationen.

Mit Schatten

Wenn der Schriftzug nicht direkt auf der Textur liegen soll, muss man die Illusion erzeugen, dass er schwebt und einen Schatten wirft. Öffnen Sie wieder eine Textur, und erzeugen Sie eine Maske wie in Punkt 1 im letzten Abschnitt. Sichern Sie die Maske im Ebenen-Kanäle-Fenster.

1. Duplizieren Sie den Hintergrund und wechseln Sie auf die neue Ebene. Erzeugen Sie analog wie im letzten Kapitel beschrieben die Buchstaben.
   
   
2. Um die Buchstaben vom Hintergrund der zweiten Ebene herauszulösen, brauchen Sie drei Hilfsebenen. Deaktivieren Sie die Maske, und füllen Sie die erste Ebene mit weißer Farbe. Wechseln Sie auf die Ebene darüber, und holen Sie die gesicherte Maske aus dem Ebenen-Kanäle-Fenster hervor. Füllen Sie die ungeschützten Bereiche mit »Schwarz«, und verschieben Sie die Ebene um je einen Pixel nach oben bzw. links. Die freien Bereiche der dritten Ebene werden ebenfalls mit schwarzer Farbe gefüllt. Verschieben Sie diesen Layer um je einen Punkt nach rechts bzw. unten. Verbinden Sie die drei Hilfsebenen. Maskieren Sie die schwarzen Bereiche mit dem Zauberstab. Löschen Sie die Hilfsebene. Wechseln Sie auf die zweite Ebene mit den Buchstaben, und löschen Sie alle ungeschützten Bereiche dieser Ebene. Sie werden keine Veränderung erkennen, da die Schrift punktgenau über dem Hintergrund schwebt.
3. Invertieren Sie die aktuelle Maske, und wenden Sie die Funktion zur Glättung der Maskenkanten auf den Alphakanal an (Wert 3 Pixel). Dadurch werden die Kanten für den Schatten weicher. Wechseln Sie auf die Hintergrundebene, und invertieren Sie die Maske noch einmal. Wählen Sie das Rechteckwerkzeug, Malmodus »Abdunkeln« (Darken) und 75 für die Transparenz (im Werkzeug-Einsteller). Ziehen Sie ein Rechteck über den Buchstaben auf ­ ein Schatten entsteht (s. Bild 10). Sie können die Ebene mit den Buchstaben noch ein wenig verschieben, damit der Schatten sichtbarer wird.

Schreibmaschine auf der Website

Mit Schreibmaschinentouch sind mit ArtEffect in Verbindung mit dem PlugIn »Halbtöne« (Halvetone) kein große Problem. Der Filter ist wie schon erwähnt Bestandteil des PlugIn-Pakets »Power Effects 2«.

1. Erzeugen Sie ein neues Bild mit weißem Hintergund, und legen Sie einen Textlayer an. Als Font wählen Sie eine Schrift, wie in Bild 11 zu sehen. Wir habe Schwarz als Farbe gewählt ­ man kann aber auch jede andere Farbe benutzen (sowohl für Schriftzug, als auch Hintergrund). Fügen Sie den Textlayer mit dem Hintergrund zusammen.
   
   
2. Wenden Sie den Gaußschen Weichzeichner auf das Bild mit einem Wert von 25 an. Im Anschluss öffnen Sie den Filter »Halbtöne« (Unterverzeichnis »Stilisieren«). Als Muster stellen Sie »Kreise« ein und bei Größe 11. Farbe 1 ist dabei Weiß und Farbe 2 Schwarz. Hinweis: Beim Weichzeichnen und dem Halbton-Filter kann man noch variieren. Der Effekt hängt aber auch vom verwendeten Font ab.
3. Damit die Schrift nicht so platt auf dem Hintergrund klebt, kommt noch ein leichter Schatten hinzu. Duplizieren Sie die Ebene und maskieren Sie im neuen Layer die Buchstaben aus. Mit dem Radiergummi entfernen Sie alle weißen Bereiche. Glätten Sie die Kanten der Maske mit einem Wert von 3, und invertieren Sie sie. Aktivieren Sie das Rechteckwerkzeug, und wählen Sie als Malmodus »Aufhellen« (Deckkraft 90). Mit Weiß ziehen Sie einen Kasten über der Schrift im Hintergrund-Layer auf (blenden Sie für diesen Arbeitschritt die Ebene darüber aus). Die Schrift wird dadurch heller. Deaktivieren Sie die Maske und benutzen Sie den Gaußschen Weichzeichner (Wert 50). Schalten Sie die zweite Ebene wieder ein, und verschieben Sie sie ein wenig (s. Bild 12).

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