Schicken Button in Photoshop erstellen - Web 2.0 Badge

von Wolfgang Schneider | 0 | 14471 Aufrufe

Anzeige Hier werben

Dieser schicke und realistisch wirkende Web 2.0 Button verschönert eure Webseite. Schnell und einfach erstellt und einsetzbar für Web und Print.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Schritt 1:

Erstellt in Photoshop eine neue Datei (ca. 500 x 500 px). Dann nehmt ihr das Ellipsen-Werkzeug (Modus: Füllen) und zeichnet auf einer neuen Ebene einen Kreis.

Erstellt darüber eine neue Ebene und füllt diese mit einem Farbverlauf der von der ursprünglichen Farbe des Kreises in eine etwas hellere Nuance überläuft. Durch anschließendes Anwenden der Tastenkombination STRG-ALT-G auf dieser Ebene, erstellt ihr nun eine Schnittmaske mit dem darunter liegenden Kreis. Nun hat unser Kreis einen schönen und dezenten Verlauf.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Wichtig hierbei ist, dass ihr die Unterschiede zwischen den beiden Farbtönen nicht zu groß wählt, da es sonst unecht aussieht.

Jetzt wollen wir ein kleines Highlight (Lichtreflex) erstellen, dass am Rand der rechten unteren Ecke unseres Stickers liegt. Dazu müssen wir zuerst eine Auswahl unseres Kreises erzeugen in dem der Lichtreflex nachher liegen soll. Dazu wählen wir die Ebene des Kreises und drücken STRG-G während wir mit der linken Maustaste auf die Ebene klicken.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Wenn die Auswahl erstellt ist, klicken wir im Menü auf Auswahl (Select) / Auswahl verändern (Modify) / Verkleinern (Contract)... Hier stellen wir beim aufspringenden Dialogfenster 2 Pixel ein.

Dann im Menue auf Bearbeiten (Edit) / Kontur füllen (Stroke) .... Hier übernehmt am besten die Einstellungen aus dem folgenden Bild (Breite: 2px; Position: Innen; Farbe:Weiß). Wenn Ihr auf OK klickt, erscheint nun ein Kreis auf dem Sticker mit den angegebenen Einstellungen.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Nachdem wir nun den Grundkreis unseres Lichtreflexes erstellt haben, stellen wir die Transparenz der Ebene auf ca. 60 %.

Nun gibt es zwei Möglichkeiten daraus einen real wirkenden Reflex zu machen. Entweder ihr benutzt den Radiergummi um den Lichtkreis bis auf ungefähr ein Fünftel in der untere Ecke zu entfernen. Dies bedarf etwas Übung und ihr solltet etwas mit der Deckkraft des Radiergummis spielen, damit ihr einen natürlichen Verlauf an den beiden Enden hinbekommt. Leider ist das Ergebnis nicht ganz so schön wie die zweite Variante, für die ich mich entschieden habe:

Dazu erstellen wir auf der Ebene des Lichtkreises eine Maske und wählen uns einen Verlauf der von Schwarz zu Transparent verläuft. Da sich der Verlauf nun addiert, setzen wir außerhalb des Kreises (links oben und rechts unten ) ein paar mal mit dem Verlauf an um den Lichtkreis mit einen schönen Übergang in das Blau der Grundfläche überlaufen zu lassen. Auch das bedarf ein wenig Spielerei, liefert aber das schönere Gesamtergebnis.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

2. Schritt

Nun wollen wir uns der abgeknickten Ecke widmen. Dafür wählen wir die Ebene mit dem blauen Grundkreis und schneiden mit dem Polygon-Lasso eine Ecke ab. Diese platzieren wir mit STRG-X (Ausschneiden) und STRG-V (Einfügen) auf einer neuen Ebene. Die neue Ebene sollte dabei ganz oben liegen.

Dann STRG-T drücken und mit gedrückter SHIFT-Taste (45° Schritte) mit der Maus die Ecke einmal um 180° drehen. Alternativ könnt ihr auch im Menü Bearbeiten (Edit) / Transformieren (Transform) / um 180° drehen (Rotate 180°) wählen.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Wartet aber bevor ihr die Ecke auf der Grundform platziert. Erst müssen wir noch mit dem Radiergummi ran. Um nachher ein realistischeres Ergebnis zu bekommen, sollten wir die Ecken oben links und rechts unseres Grundkreises etwas abrunden.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Schritt 3

Nun platzieren wir unsere Ecke auf unserem Grundkreis. Ihr werdet schnell feststellen, dass nun die beiden Ecken der Schnittkante links und rechts ein wenig heraus schauen. Dies beheben wir, indem wir wieder einmal die Grundform selektieren (STRG + linke Maustaste auf die Ebene). Danach kehren wir mit Auswahl (Select) / Auswahl umkehren (Invert) die Auswahl um. Jetzt wählen wir die Ebene auf der die Ecke liegt und drücken die Entf-Taste. Jetzt sind die störenden Ecken verschwunden. Die Auswahl heben wir mit STRG - D wieder auf.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Um der Ecke nun einen Schatten zu geben, brauchen wir wieder die Auswahl der Ecke. Also mit STRG und der linken Maustaste auf die Ebene der Ecke. Nun legt eine neue Ebene unterhalb der Ecken-Ebene an und füllt die Auswahl schwarz. Mit STRG - ALT - G ordnet ihr die Schattenebene wieder als Schnittmaske auf die Grundform ein.

Nun müssen wir dem Schatten erst einmal in die richtige Form bringen. Geht dazu auf Bearbeiten (Edit) / Transformieren (Transform) / Verkrümmen (Warp) und verzerrt den Schatten solange, bis er eine annähernd realistische Form hat.Wenn ihr das getan habt, dreht die Transparenz der Schatten-Ebene auf 50% und benutzt den Gaußschen-Weichzeichener (Filter / Weichzeichnen (Blur) / Gaußscher Weichzeichner) um den Schatten realistisch zu machen.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Nun wollen wir auch auf der Ecke einen Verlauf und einen Lichtreflex platzieren. Ihr könnt dabei einfach die gleichen Schritte wie oben, schon bei der Grundfläche beschrieben (Maske erstellen, Verlauf drauf...), noch einmal anwenden. Dabei könnt ihr beides noch einmal extra für die Ecke anpassen.

Ich selbst habe es mir ein wenig leichter gemacht und habe einfach die Ebenen mit dem Verlauf und dem Lichtreflex dupliziert (STRG - J) und nach oben, über die Ebene der Ecke, verschoben. Mit STRG-ALT-G erstellen wir dabei jeweils aus beiden Ebenen wieder eine Schnittmaske für unsere Ecken-Ebene.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Erschreckt nicht, falls die Ecke nun auf einmal verschwindet. Dies liegt daran, dass Grundkreis und Ecke nun den gleichen Verlauf haben und die Ecke somit nicht mehr sichtbar ist. Nehmt einfach den Verlauf der Ecke und verschiebt ihn ein wenig nach rechts oben oder nach links unten. Schon taucht die Ecke wieder auf und hat einen schönen Verlauf.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Abschließen brauch unser Sticker jetzt noch einen schönen Schatten. Dazu einfach wieder auf die Grundeebene gehen, eine Auswahl der Grundfrom erstellen (STRG + linke Maustaste) und dann bei den Ebenen-Effekten einen schönen Drop-Shadow auswählen. Schaut dass dieser schön weich und dezent wird.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Nun ist unser Sticker fertig. Aber was wäre so ein schöner Sticker ohne Text. Deswegen überlegt euch jetzt was ihr auf den Sticker schreiben wollt.

Schritt 4.

Platziert die Schrift auf einer neuen Ebene, die zwischen der Ecke und der Grundform liegt. Skaliert den Text auf die richtige Größe.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Damit der Text auch etwas plastischer wirkt und es aussieht also wäre er vertieft, wählt bei den Ebeneneffkten Abgeflachte Kanten und Relief. Dort wählt ihr den Stil Abgeflachte Kanten nach außen mit einer Tiefe von einem Pixel, einen Winkel von -81° bei einer Höhe von 26°.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge

Nun ist unser Sticker fertig. Wenn ihr noch eine schöne Papiertextur rumliegen habt könnt ihr diese noch mit einbauen damit der Sticker gleich zu seiner richtigen Verwendung kommt.

Bild zu Schicken Button in Photoshop erstellen - Web 2.0 Badge
Über den Autor: Wolfgang Schneider
Online Marketeer & Projektmanager bei Team23 in Augsburg. Netzkind der ersten Stunde und Photoshopjunky. Seit über 10 Jahren im Bereich Design, Entwicklung & Online-Marketing tätig.
Profilseite betrachten