Texturen aus Metall
von Dirk Metzmacher
Gebürstetes oder glatt poliertes Metall als Textur bietet ein Stück Realität und ist nicht erst seit der Betriebssystemoberfläche »Aqua« von Apple im Trend. Schnell lassen sich diese Texturen aus dem Nichts erstellen und zahlreiche Varianten gestalten.
Störungen als Grundlage
Für gebürstetes Metall, wie es zum Beispiel bei einigen iTunes-Versionen im Hintergrund zu sehen ist, erstellt man eine neue Ebene über »Ebene ↔ Neu ↔ Ebene«. Nachdem die Vordergrundfarbe auf #cccccc (RGB 204, 204, 204) eingestellt wurde, klickt man mit dem Füllwerkzeug die neue Ebene an. Der »Filter ↔ Störungsfilter ↔ Störungen hinzufügen« sorgt nun dafür, dass die glatte Fläche Struktur bekommt. Dazu stellt man die Stärke auf etwa 12% ein, wählt in den Optionen die »Gaußsche Normalverteilung« aus und setzt einen Haken bei »Monochrom«.
Ein »Meer« aus Pixel
Bewegungsunschärfe
Der »Filter ↔ Weichzeichnungsfilter ↔ Bewegungsunschärfe« sorgt mit Winkel 0 Grad und einer Distanz von 30 Pixel für die Umwandlung der einzelnen Punkte in die Illusion eines Stücks Metall, dessen Oberfläche gebürstet wurde. Natürlich kann der erreichte Effekt nur eine Annäherung an die Realität sein. Die Aufnahme einer echten Metalloberfläche wäre eine interessante Alternative.
Gebürstetes Metall
Wolken für mehr Struktur
Noch ist die Fläche zu gleichförmig. Hellere und dunklere Stellen könnten für mehr Tiefe sorgen. Dazu erstellt man eine neue Ebene, stellt die Vorder- und Hintergrundfarbe durch Drücken der Taste "D" auf den Standard "Schwarz/Weiß" zurück und wendet den »Filter ↔ Rendering-Filter ↔ Wolken« an. Die Füllmethode dieser Ebene wird auf »Überlagern«, die Ebenendeckkraft auf etwa 10% eingestellt. Im Menü klickt man auf »Ebene ↔ Mit darunter liegender auf eine Ebene reduzieren«.
Schattenbereiche sorgen für mehr Tiefe
Textur im Einsatz
Die Oberfläche sieht nun ansprechend, wenn auch nicht wirklich »echt« aus. Doch im Zusammenspiel mit weiteren grafischen Elementen, wie hier im Beispiel von iTunes zu sehen, kann diese Textur überzeugen. Es hilft übrigens, den Kontrast etwas zu vermindern und die Helligkeit leicht zu erhöhen, damit die Textur, ohne zu stören, mit dem Interface harmoniert.
iTunes benutzt gebürstetes Metall im Hintergrund
Interface-Grundform
In einem neuen Dokument mit schwarzem Hintergrund zieht man mit dem Abgerundeten-Rechteck-Werkzeug die Grundform für eine Navigationsbar auf. In diesem Beispiel wurde in den Optionen der Radius auf 3 Pixel eingestellt. Die Vordergrundfarbe spielt noch keine Rolle, da im Anschluß eine Verlaufsüberlagerung jede Farbe verdecken wird und nur die Form übrig bleibt.
Grundform noch ohne Textur
Textur dank Verlauf
Die Oberfläche dieser Menüführung entsteht durch einen Verlauf von #cacaca (RGB 202, 202, 202) nach #848484 (RGB 132, 132, 132). Recht flexibel ist die Umsetzung durch die Aktivierung des »Ebenenstils ↔ Verlaufsüberlagerung«, der im Menü unter »Ebene« zu finden ist. Die Füllmethode steht dabei auf »Normal«, die Deckkraft auf 100% und der Winkel auf -90 Grad.
Verlaufstextur
Beispiel: Apple
In der Farbe #222222 (RGB 34, 34, 34), der Textgröße 11 Pixel und mit dem Schriftschnitt Bold wurden die Menüpunkte in diesem Beispiel geschrieben, wobei der Text durch einen weißen »Schattenwurf« wie ausgestanzt wirkt. Dazu aktiviert man den »Ebenenstil ↔ Schlagschatten« mit Füllmethode »Normal«, Deckkraft 70%, Farbe Weiß, Winkel 120 Grad, Distanz 1 Pixel und Größe 0 Pixel.
Weitere Elemente lassen ein Interface entstehen
Muster erstellen
Wer mag, kann diese Grafik einfach in Photoshop öffnen, im Menü auf »Auswahl ↔ Alles auswählen« gehen oder auf der Tastatur Strg+A drücken, um dann im Menü mit »Bearbeiten ↔ Muster festlegen« eben dieses zu tun. Wer Copy & Paste ausschließt, der erstellt zuvor ein neues Dokument von 11 x 11 Pixel Größe, wählt mit der Auswahlellipse und gedrückter Shift-Taste einen Kreis aus und füllt diese Form über »Bearbeiten ↔ Fläche füllen« mit Schwarz.
Muster (normal/vergrößert)
Muster als Ebenenmaske
Verwendet man das Dokument mit der zuvor erstellten Textur, die gebürstetes Metall simuliert, dann sollte die Oberfläche schon auf einer eigenen Ebene liegen. Durch einen Klick auf den Button »Ebenenmaske hinzufügen« in der Ebenenpalette erhält diese Ebene eine Maske, die über »Bearbeiten ↔ Fläche füllen« mit dem zuvor erstellten Muster gefüllt wird. Dazu wählt man bei »Füllen mit:« den entsprechenden Eintrag aus und bestätigt mit »OK«.
Lochblech aus gebürsteten Metall
Lochblech mit 3D-Effekt
Der »Ebenenstil ↔ Schlagschatten« mit Deckkraft 10 %, Distanz 1 und Größe 3 Pixel, »Abgeflachte Kante und Relief« mit Farbtiefe 20% und Größe 2 Pixel sowie »Glanz« mit der Kontur: Doppelter Ring sorgen für einen leichten 3D-Effekt. Diese Textur könnte bei einem Interface mit »Durchblick« im Hintergrund eingesetzt werden. Hinter dem »Lochblech« wurde eine farbige Fläche eingefügt, um den Effekt deutlicher präsentieren zu können.
Schatten und eine leichte Kante sorgen für die 3D-Illusion
Auch wenn gutes Design zum Kopieren verführt sollte man doch immer soweit mit Formen und Farben spielen, dass man von einem eigenständigen Werk sprechen kann. Gerne darf man sich inspirieren lassen. (tm)
Erstveröffentlichung 30.07.2007
Über Dirk Metzmacher
Verwandte Artikel
(No Ratings Yet)
