Glossy Web 2.0 Button – Tutorial

28
Feb

12

Heute wollen wir einen dieser “glasigen” Web 2.0 Buttons erstellen, die man mittlerweile fast überall findet.

Voraussetzungen:

  • Grundkentnisse Photoshop (Toolbox, Ebenen, …)

Lernziele:

  • “Glas”-Effekt ganz leicht erstellen
  • Umgehen mit dem Shape Tool
  • Umgehen mit den Bleding Options

Öffnet als erstes ein leeres Photoshop Dokument, die Grösse spielt eigentlich keine Rolle, doch zu klein sollte das ganze dann auch nicht sein.

Wählt nun das Shape-Tool aus (U) und geht auf Rounded Rectangle Tool. Den Radius stellt ihr dabei auf 15 Pixel ein.

11

Nun zeichnet ihr damit ein schönes abgerundetes Rechteck. Achtet darauf, dass ihr am Rand jeweils noch etwas Platz zum Aussenrand des Dokumentes lasst. Als Farbe habe ich übrigens ein schönes helles Blau genommen (#0079e0).

21
Klickt nun Rechts in den Ebenen auf Shape 1 (kann je nach dem auch anders heissen…). Und geht dann in die Blending Options.

31

Nun stellt ihr in den Blending Options folgendes ein:

  • Drop Shadow: Distance 0, Size 5, Opacity: 75%
  • Gradient Overlay: Verlauf von #0079e0 zu#02579e

Nun sollte euer Bild in etwa so aussehen:

41
Nun kommen wir zu dem “glasigen” Teil. Haltet [Ctrl] gedrückt und  klickt bei der Shape 1 Ebene auf das graue Viereck mit der weissen Form.

Es erscheint nun eine gestrichelte Linie um euren Button. Erstellt eine neue Ebene und achtet darauf, dass die gestrichelte Linie um euren Button immer noch vorhanden ist.

52

Geht nun auf Rectangle-Marquee Tool (M) und geht oben in den Optionen auf “Intersect with Selection”.

61

Nun zieht ihr um die obere Hälfte des Buttons ein Rechteck. Sobald ihr loslässt, “vermischt” es quasi die beiden Auswahlen und nur die obere Hälfte unseres Buttons sollte nun gestrichelt umrandet sein.

7
Nun füllt ihr die Auswahl mithilfe des Paint Bucket Tools (G) mit der Farbe weiss, achtet darauf, dass ihr euch auf der neuen Ebene befindet! Nun stellt ihr den Opacity Wert dieser Ebene auf 8%.

8

So oder ähnlich sollte euer Button nun aussehen:

10
Mit dem Opacity Wert könnt ihr je nach dem, varieren. So wie es euch halt gefällt. Wenn ihr wollt, könnt ihr nun noch Text hinzufügen :-)

Natürlich kann man den Buttons die verschiedensten Farben geben, hier einige Beispiele:

111

Und das war’s auch schon von meinem Web 2.0 Glossy Button Tutorial. Postet eure Meinung, eure Fragen oder euere Kritik doch in den Comments.

MFG

Michael Ziörjen

VN:F [1.0.8_357]
Rating: 5.0/5 (3 votes cast)

There are 4 comments in this article:

  1. 27/04/2009stylebutton.de says:

    Wirklich gut gemachtes Tutorial – leicht, sehr anschaulich und verständlich!

  2. 11/08/2009Wadim says:

    Es wäre noch sehr hilfreich, wenn du die Begriffe auch auf Deutsch schreiben würdest, weil ich besitze ein deutsches PS und mir fällt es schwer das ganze zu finden !
    Allgemein aber ein tolles Tut

  3. 11/08/2009admin says:

    Auf http://www.hilfdirselbst.ch/diverse_seiten/photoshop/psd-uebersetzung.php finden Sie eine Übersetzung jeglicher Begriffe, ich werde das im Tutorial aber wohl in nächster Zeit noch hinzufügen…

    MFG

  4. 17/05/2011Buttons says:

    Super Tutorial. Man könnte die Buttons aber auch mit einem transparenten Bild belegen. Das hätte dann den Vorteil, daß man per CSS den Buttons bei einem mouse:over eine andere Hintergrundfarbe geben kann ohne das extra eine zweite Grafik benötigt wird.

Write a comment: