Das Prinzip

Oft sieht man in Softwareprodukten einen verspielten aber dennoch solides Interface. Bei dieser Technik wird die Schattierung und das Relief (Beveleffect) so eingesetzt, dass die Grafik den Anschein erweckt, etwas von einer "Comic"-mässigen und leicht dreidimensionalen Oberfläche zu haben.

Erstellen Sie ein neues Bild mit der grösse 300x300pixel.

Nachdem Sie Ihr Bild geöffnet bzw. erstellt haben, können Sie schon mit der Farbwahl beginnen. Entnehmen Sie den Farbton, den Sie auf dem Bild sehen oder wählen Sie als Hintergrundfarbe, die unten genannte Hex-Farbe. (#728294). Achten Sie darauf, dass Sie die Farbe natürlich als Vordergrundfarbe gewählt haben, sonst wird nix daraus.

Sie haben Ihr Bild jetzt mit der Farbe gefüllt und können die nächsten Schritte angehen. Wie Sie auf dem Bild sehen, werde wir als nächstes mit der Balkenselektion eine Rechteckige Figur Selektieren die wir dann mit einem schönen Farbverlauf füllen, um so den Anschein zu geben, dass dieses Material solide und aus Metall wäre.

Wichtig ist, dass Sie wissen: Sobald Sie einen metallischen Look wollen, müssen Sie einen leichten Blauton integrieren bzw. mitmischen.

Füllen Sie jetzt Ihre rechteckige Selektion und achten Sie darauf, dass Sie den Farbverlauf ähnlich hinbekommen. Wichtig ist, dass das weisse, bzw. der Glanz immer ganz oben sein muss. Also in der oberen hälfte Ihres Objektes. Wie Sie auf dem Bild sehen, gibt es jetzt schon den Anschein eine metallische Oberfläche zu besitzen.

Also wir haben jetzt eine Fläche, die wir natürlich doch nicht einfach so stehen lassen wollen. Nun nehmen Sie eine Kreisselektion, mit der Sie von Augenmass oder auch mit Hilfe von Linealen die richtige Mitte finden können.

So! Wir geben der Schaltfläche, welche wir auf einem neuen Layer erstellt haben einige Effekte, um das ganze bisschen -sagen wir mal- "plastischer" ausnahmsweise aussehen zu lassen. Hierzu gehört natürlich eine Schattierung und natürlich auch der wichtigste Effekt, nämlich das "Relief" (Bevel). Setzten Sie Ihre Einstellungen gemäss Bild unten ein.

Setzten Sie Ihre Einstellungen gemäss der Abbildung ein.

Hier kommt endlich der wichtigste Effekt, welcher uns den Anschein gibt, die Schaltflächen (Buttons), wären eingedrückt, oder auch ausgedrückt bzw. vorgehoben nennnt man sowas. Setzten Sie Ihre Einstellungen gemäss der Abbildung ein.

Das Resultat in Leicht modifizierter Version. Texte hinzugefügt und die Schaltflächen (Buttons) wurden noch kopiert und leicht verändert.

Autor: filedesign.com