Wie erstelle ich einen Web 2.0 Button mit 3D-Effekt und Spiegelung?
Dieses Tutorial ist für Photoshop Anfänger gedacht und beschreibt jeden einzelnen Schritt zum Erstellen eines Web 2.0 Buttons. Besonderer Augenmerk liegt in der leichten Bearbeitbarkeit des Ergebnisses. Sie können nachträglich Farben, Formen und Effekte ändern, ohne den Button komplett neu zu erstellen.
Autor: Thomas Kunert
Schritt 1 - Anlegen eines neuen Dokuments
Als erstes legen Sie mit Datei / Neu... ein neues Dokument an.
In die Eingabemaske tragen Sie folgende Werte ein:
- Breite: 400 Pixel
- Höhe: 300 Pixel
- Auflösung: 72 Pixel/Zoll
- Hintergrundinhalt: Weiß
Klicken Sie auf OK um die eingetragenen Werte zu bestätigen.
Schritt 2 - Lineale einblenden und Autoausrichtung aktivieren
Blenden Sie die Lineale mit Ansicht / Lineale ein.
Aktivieren Sie die Autoausrichtung mit Ansicht / Ausrichten an / Allen (Bild 02).
Schritt 3 - Hilfslinien erstellen
Mit dem Befehl Ansicht / Neue Hilfslinie... erstellen Sie folgende Linien (Bild 03 - 06):
- Vertikal bei 75 px
- Vertikal bei 325 px
- Horizontal bei 75 px
- Horizontal bei 150 px
Das Ergebnis sollte wie folgt aussehen (Bild 07):
Schritt 4 - Anlegen des Buttons
Um den Butten anzulegen, erstellen Sie als erstes die Grundform. Hier wird ein abgerundetes Rechteck als Pfad verwendet.
- Wählen Sie das Werkzeug "Abgerundetes Rechteck" aus (Bild 08)
- Stellen Sie oben in den Werkzeugoptionen auf "Pfade" um und tragen Sie einen Eckenradius von 20px ein (Bild 09)
- Ziehen Sie nun die Rechteckform auf. Beginnen Sie in der linken oberen Ecke (Bild 10)
- und ziehen Sie die Grundform bis zur rechten unteren Ecke auf (Bild 11)
Achten Sie darauf, dass sich die Grundform an den Hilfslinien ausrichtet.
Schritt 5 - Verlaufsebene erstellen
Nun legen Sie über Ebene / Neue Füllebene / Verlauf... eine neue Verlaufsebene an, die als Grundform den vorher angelegten Pfad hat.
Geben Sie der Ebene den Namen "Grundfarbe" und klicken Sie auf OK.
Nachdem Sie auf OK geklickt haben, erscheint ein neues Dialogfenster, in dem Sie den Verlauf auswählen sollen.
Wir wollen für diesen Button einen eigenen Verlauf mit zwei Farben anlegen. Klicken Sie deshalb auf das Verlaufsbild und gelangen Sie so in das Fenster "Verläufe Bearbeiten".
Im Fester "Verläufe bearbeiten" (Bild 14) klicken Sie auf das linke unter Farbkästchen, um es auszuwählen. Dadurch erscheint die Farbe im unteren Farbfeld. Dieses klicken Sie ebenfalls an, um die die gewünschte Farbe einzustellen.
Im Dialogfenster "Endfarbe wählen" (Bild 15) tragen Sie die gewünschte Farbe ein. Verwenden Sie für den Button den Farbcode "3366cc".
Bestätigen Sie die neue Farbe mit OK und wiederholen Sie die Farbauswahl für die rechte Farbe. Dort tragen Sie den Farbcode "66ccff" ein.
Nachdem der Verlauf erstellt wurde, können Sie die eingestellten Farben in die Vorgaben speichern. Es ist dann leicht möglich diesen Verlauf nochmals an einer anderen Stelle zu verwenden.
Durch einen Klick auf "Neu" speichern Sie den Verlauf in die Vorgaben.
Schließen Sie mit einem Klick auf OK das Fenster. Sollten noch weitere Fenster geöffnet sein, klicken Sie ebenfalls auf OK.
Der Verlauf hat noch nicht die gewünschte Richtung. Er soll von dunkel oben zu hell unten verlaufen. Um dies zu ändern doppelklicken Sie in der Ebenenpalette (Bild 17) auf die Verlaufsminiatur. Sie gelangen so nochmals in das Fenster "Verlaufsfüllung".
Dort setzen Sie einen Haken bei Umkehren und bestätigen mit OK (Bild 18).
Hinweis: Sollte die Ebenenpalette nicht angezeigt werden, können Sie sie über den Befehl Fenster / Ebenen oder über den Shortcut F7 einblenden lassen.
Damit sind die Verlaufseinstellungen abgeschlossen. Als nächstes statten wir unseren Button mit Ebenenstilen aus.
Schritt 6 - Ebenenstile einstellen
Wählen Sie in der Ebenenpalette die Ebene "Grundfarbe" aus. Diese sollte dann dunkelgrau unterlegt sein. Um Grafikeffekte hinzuzufügen klicken Sie im Palettenfuss auf fx und wählen Sie "Schlagschatten".
Im "Ebenenstil"-Fenster übernehmen Sie die im Bild angezeigten Werte für den "Schlagschatten" (Bild 20).
Setzen Sie einen Hacken bei "Schatten nach innen" und übernehmen Sie ebenfalls die Werte des Bildes (Bild 21).
Bei "Schein nach innen" tragen Sie auch die Werte des Bildes (Bild 22) ein.
Zum Schluss setzen Sie noch ein Häckchen bei "Verlaufsüberlagerung".
Wählen Sie hier einen einfachen Schwarz/Weiß-Verlauf und stellen Sie die Art auf "Radial". Die anderen Einstellungen entnehmen Sie dem Bild (Bild 23).
Nachdem Sie die Einstellungen mit OK bestätigt haben, sollte der Button nun so aussehen:
Schritt 7 - Die Spiegelung
Klicken Sie mit der rechten Maustaste auf die Grundfarbenebene. Es öffnet sich ein Kontextmenü in dem Sie "Ebene duplizieren…" auswählen. Das sich öffnende Fenster bestätigen Sie mit einem Klick auf OK.
Nun haben Sie von der Grundfarbenebene eine Kopie angelegt, die in der Ebenenpalette direkt über der Grundfarbenebene liegt.
Auf diese neue Ebene klicken Sie wiederum mit der rechten Maustaste und wählen im Kontextmenü "In Smartobjekt konvertieren…" aus.
Die Ebenenpalette sollte jetzt so wie im Bild 26 aussehen.
Die Kopie der Grundfarbenebene verschieben Sie mit der Pfeil runter Taste, bis sie direkt unter der anderen Ebene liegt - so wie es auf dem Bild 27 zu sehen ist.
Lassen Sie die Ebene ausgewählt und wählen Sie den Befehl Bearbeiten / Transformieren / Vertikal spiegeln… aus - das stellt die Ebene auf den Kopf. Schieben Sie anschließend die gedrehte Ebene mit den Cursortasten noch etwas näher an die obere Ebene heran (Bild 28).
Schritt 8 - Spiegelung weich ausblenden
Um den Effekt der Spiegelung zu erzeugen muss die eben von Ihnen erstelle Ebene weich ausblenden. Hierzu fügen Sie eine Maske zur Ebene hinzu. Klicken Sie im Fuß der Ebenenpalette auf das Symbol "Vektormaske hinzufügen" (Bild 29) - dadurch entsteht ein weißes Kästchen hinter der "Grundfarbe Kopie"-Ebene.
Wählen Sie nun das Verlaufswerkzeug aus (Bild 30).
In den Einstellungen zum Verlaufswerkzeug stellen Sie einen "linearen Verlauf" ein. Außerdem wählen Sie aus den Verlaufsvorgaben einen einfachen Schwarz/Weiß-Verlauf aus. Sollte dieser Farbverlauf nicht vorhanden sein, können Sie ihn sich wie weiter oben beschrieben anlegen.
Mit dem auswählen des Verlaufswerkzeugs wir aus dem Mauszeiger ein Fadenkreuz. Dieses setzen Sie mittig in der "Grundfarbe Kopie"-Ebene an, drücken die linke Maustaste und Shift, um gerade nach oben zu ziehen. Lassen Sie beide Tasten gedrückt und ziehen Sie die Maus nach oben bis auf die Oberkante der Spiegelung. Anschließend lassen Sie beide Tasten los. Bild 32 zeigt die Verlaufslinie kurz vor dem loslassen.
Nach dem loslassen der Maus und der Shift-Taste sollte das Ergebnis jetzt wie in Bild 33 aussehen.
Hinweis: Durch den Farbverlauf auf der Ebenenmaske wurden Teile der Spiegelung ausgeblendet.
Um den Effekt der Spiegelung noch etwas realistischer aussehen zu lassen, werden Sie jetzt die Deckkraft der "Grundfarbe Kopie"-Ebene reduzieren.
Stellen Sie, wie in Bild 34 zu sehen, die Deckkraft der Ebene auf 45 % ein.
Schritt 9 - Lichtspiegelung von oben
Um die Lichtspiegelung auf den Button zu bekommen, benötigen Sie den Arbeitspfad, den wir am Anfang dieses Tutorials erstellt hatten. Diesen bekommen Sie über die Pfade Palette.
Aktivieren Sie die Pfade Palette mit dem Befehl Fenster / Pfade (Bild 35). Dort liegt noch der erstellte Arbeitspfad. Klicken Sie auf den Pfad, um ihn auszuwählen.
Der Pfad muss noch in Höhe und Breite angepasst werden. Der einfachste Weg, den Pfad prozentual zu bearbeiten, führt über Bearbeiten / Pfad frei transformieren…
Für die Breite wählen Sie 98 % und für die Höhe 97 %. Achten Sie außerdem darauf, das die Größenanpassungen von der Mitte aus berechnet werden (Bild 36).
Der Pfad sollte jetzt etwa so aussehen (Bild 37).
Nun legen Sie über Ebene / Neue Füllebene / Verlauf… eine neue Verlaufsebene an.
Im Fenster "Verläufe bearbeiten" (Bild 38) wählen Sie den Verlauf aus, der von Farbe zu Transparenz läuft. Die 2 unteren Farbkästchen stellen Sie auf Weiß. Die Position des rechten Kästchens welches die Transparenz festlegt, verschieben Sie auf die Position 35 %.
Nach dem bestätigen des Fensters mit OK setzen Sie noch einen Haken bei Verlauf umkehren, damit er von oben Weiß nach unten Transparent verläuft. Durch einen weiteren Klick auf OK sollte die Lichtspiegelung nun entgültig zu sehen sein.
Geschafft!
Der Button ist nun fertig. Sie können jetzt leicht selbst die Farben oder Verläufe anpassen. In den Varianten im Bild 40 wurde zusätzlich noch etwas Text hinzugefügt.
Viel Spaß bei Ihren eigenen Experimenten!
