Photoshop » abgerundete Buttons erstellen
In diesem Tutorial werde ich einen Weg zeigen, wie man leichte aber trotzdem schöne Buttons mit abgerundeten Ecken erstellen kann.Neue Datei erstellen:
Erstelle zunächst eine neue Datei. Ich habe für dieses Tutorial die Maße 120x40 Pixel gewählt. Danach beginnen wir mit einem abgerundeten Rechteck. Dazu wählen wir es in der Werkzeugleiste über einen Rechtsklick auf das "Rechteckwerkzeug" aus.
Button erstellen:
Erstelle nun mit diesem Werzeug ein abgerundetes Rechteck in der gerade erstellten Datei. Die Farbe ist im Moment noch egal. Dein Ergebnis müsste jetzt so oder so ähnlich aussehen:
Form bearbeiten:
Als nächstes drücken wir "Strg" und klicken im Ebenenmanager auf das Bild links neben unserer gerade erstellten Form. Die Form wird jetzt markiert. Dann erstellen wir eine neue Ebene. Die Auswahl bleibt bestehen.Jetzt benutzen wir das Füllwerkzeug (G) und wählen eine Farbe. Diese sollte noch nicht so hell sein, aber auch nicht sehr dunkel. Deshalb ist ein Mittelton am besten.
Wenn du eine schöne Farbe gefunden hast, fülle die Auswahl auf der neuen Ebene mit ihr, indem du einfach in die Auswahl klickst. Bild und Ebenenmanager müssten jetzt so aussehen:
Button bearbeiten:
Wir brauchen die Ebene mit der Form nicht mehr, deshalb kann diese auch gelöscht werden. Die Auswahl muss aber bestehen bleiben.Erstelle wieder eine neue Ebene. Danach das Verlaufswerkzeug (Rechtsklick auf das Füllwerkzeug in Werkzeugleiste) auswählen. Wähle den Verlauf von Farbe zur Transparenz. Als Farbe einen hellen Farbton passend zur Buttonfarbe nehmen. Im Beispiel ist das Türkis.
Jetzt ziehen wir in der neuen Ebene einen Verlauf angefangen über dem unteren Rand des Buttons bis etwas zum oberen Rand des Buttons. Damit der Verlauf gerade wird kann dabei "Shift" gedrückt werden. Anschließend gehen wir im Menü auf "Bearbeiten > Transformieren > Skalieren". Jetzt verkleinern wir die Auswahl an der rechten und linken Seite geringfügig. Es sind nur einige Pixel nötig. Danach wenden wir noch den Filter "Gaußscher Weichzeichner" auf diese Ebene an. Dazu unter "Filter > Weichzeichnungsfilter... > Gaußscher Weichzeichner..." auswählen. Es öffnet sich ein neues Fenster, in dem der Radius verändert werden kann. Wir nehmen einen sehr geringen Radius im Bereich von 1.
Schließlich wird der Modus im Ebenenmanager von "Normal" auf "Überlagern" geändert.
Unser Bild mit Ebenen sollte jetzt so aussehen:
Button fertigstellen:
Danach markieren wir wieder das ganze Rechteck mit "Strg" und einem Klick auf die Vorschau von Ebene 1.Wähle wieder das Verlaufswerkzeug und konfiguriere einen Verlauf von Weiß zur Transparenz. Danach wird eine neue Ebene erstellt.
Ziehe nun den Verlauf von knapp unter der oberen Kante des Buttons bis etwa zur Mitte.
Wie schon bei dem vorherigen Verlauf Skalieren wir die Ebene wieder über "Bearbeiten > Transformieren > Skalieren". Diesmal kann das Bild aber an der rechten und linken Seite ruhig etwas mehr verkleinert werden.
Anschließend wenden wir wieder den Filter"Gaußscher Weichzeichner..." an. Hierbei einen etwas größeren Radius zwischen 1 und 2 wählen. Außerdem setzen wir die Deckkraft auf etwa 60%. Danach den "Gaußschen Weichzeichner..." auch nochmal auf den alten Verlauf von vorhin anwenden.
Button verschönern:
Eigentlich ist der Button hier schon fertig. Um ihn jedoch noch etwas interessanter zu machen, können noch einige "Fülloptionen" hinzugefügt werden.Dazu einfach die Ebene mit dem abgerundeten Rechteck wählen, dann im Ebenenmanager einen Rechtsklick auf die Ebene und "Fülloptionen" auswählen.
Hier kannst du einfach mal ausprobieren, was dir am besten gefällt. Ein paar Details kann der Button zumindest noch vertragen.
Ich habe in diesem Fall eine dunkelblaue Kontur (Deckkraft 50%) und unter Musterüberlagerung schräge Scanlines (Deckkraft 25%) hinzugefügt. Mein Ergebnis sah dann so aus:
Text hinzufügen:
Als letztes muss nur noch ein Text hinzugefügt werden. Diesem solltest du aber nicht mehr zu viele Effekte geben, da der Button ja schon auffällig genug ist. Ein mögliches Endergebnis wäre dann dieser Button:
· zurück zur Übersicht