So gestaltest du sehenswert das kleinste Interface-Element
Buttons sollen zum Anklicken reizen. Dafür werden sie gemacht. Doch welche Formen und Farben haben die beste Wirkung? Wir zeigen dir 33 Beispiele, die deine Entscheidung erleichtern können.
Und nicht nur das: Zu jedem Beispiel kannst du nach einem Klick ein passendes Tutorial entdecken. So ist es ein Leichtes, den Aufbau des kleinsten Interface-Elementes zu verstehen. Zwischen unseren Webfunden bieten wir dir noch einige Tipps und Tricks an, um in Zukunft noch leichter Buttons zu gestalten.
Photoshop For Beginners: Creating buttons for web part 1
Designer: Sebastiano
Stil: Glossy
Schwierigkeitsgrad: 2 von 5
© Sebastiano
Photoshop For Beginners: Creating buttons for web part 2
Designer: Sebastiano
Stil: Texturüberlagerung
Schwierigkeitsgrad: 3 von 5
© Sebastiano
Creative Button Animations with Sprites and JQuery
Designer: Khalid Fattouchi
Stil: Glossy
Schwierigkeitsgrad: 1 von 5
© Khalid Fattouchi
Stylish Metallic Button in Photoshop
Designer: abduzeedo
Stil: Glossy
Schwierigkeitsgrad: 3 von 5
© abduzeedo
Glossy Web 2.0 Button
Designer: avivadirectory
Stil: Glossy
Schwierigkeitsgrad: 1 von 5
© avivadirectory
Resolution Independence
Designer: Sean Patrick O’Brien
Stil: Metall
Schwierigkeitsgrad: 1 von 5
© Sean Patrick O’Brien
Create beautiful Buttons in Photoshop
Designer: Drew Strojny
Stil: Glossy
Schwierigkeitsgrad: 1 von 5
© Drew Strojny
RSS-Button
Designer: ART-D
Stil: Glossy
Schwierigkeitsgrad: 4 von 5
© ART-D
Photoshop Buzline Button Logo Icon
Designer: goodbus
Stil: 3D
Schwierigkeitsgrad: 5 von 5
© goodbus
Photoshop-Tipp #1: Buttongestaltung aus Grundform
01 Grundform aufziehen
In einem neuen Dokument ziehst du mit dem Abgerundeten-Rechteck-Werkzeug, das in der Optionsleiste auf einen Radius von 90 Pixel eingestellt ist, in der Farbe #e0e0e0 (RGB 224, 224, 224) eine Grundform auf.
02 Verlaufsüberlagerung
Gehe im Hauptmenü auf Ebene > Ebenenstil > Verlaufsüberlagerung und stelle die Füllmethode auf Normal, Art: Linear und Winkel: -90 Grad ein.
Klicke die Vorschau des Verlaufes an und in der größeren Vorschau auf die linke Farbunterbrechung. Klicke etwas weiter unten auf das Farbfeld bei Farbe und stelle die Farbe #f1f1f1 (RGB 214, 214, 214) ein.
Aktiviere die Farbunterbrechung auf der rechten Seite und ändere die Farbe auf #d1d1d1 (RGB 209, 209, 209) ab. Bestätige dreimal mit OK.
03 Schatten einstellen
Aktiviere den Ebenenstil > Schlagschatten mit Deckkraft: 35%, Winkel: 110 Grad, Abstand: 4 Pixel und Größe: 5 Pixel. Aktiviere zusätzlich den Ebenenstil > Schatten nach innen. Mit den richtigen Einstellungen kann dieser auch für Highlights verwendet werden. Stelle die Füllmethode auf Normal ein, die Farbe auf Weiß, die Deckkraft auf 75%, den Winkel auf 90 Grad, Abstand auf 1 Pixel und Unterfüllen sowie Größe auf 0.
04 Zweite Form erstellen
Ziehe mit dem Abgerundeten-Rechteck-Werkzeug unterhalb des Buttons eine etwas größere Form auf. Diese erhält den Ebenenstil > Verlaufsüberlagerung mit Füllmethode: Normal, Art: Linear und Winkel: -80 Grad. Der Verlauf sollte von einem dunkleren zu einem helleren Grauton führen. Beschrifte den Button mit dem Text-Werkzeug.
How to Design an Inset Button in Photoshop
Designer: Paper Leaf Design
Stil: Plastik
Schwierigkeitsgrad: 3 von 5
© Paper Leaf Design
Nice ‘n’ Simple Subscribe Badges
Designer: photoshopstar.com
Stil: Grunge
Schwierigkeitsgrad: 2 von 5
© photoshopstar.com
Create a Nice Stylish Glossy Button in Photoshop
Designer: coregfx.org
Stil: Glossy
Schwierigkeitsgrad: 2 von 5
© coregfx.org
Professional Menu Button
Designer: photoshopstar.com
Stil: Metall
Schwierigkeitsgrad: 3 von 5
© photoshopstar.com
Design Watercolor Effect Menu
Designer: webdesignerwall.com
Stil: Grunge
Schwierigkeitsgrad: 2 von 5
© webdesignerwall.com
Clean White Navigation Bar
Designer: James Hewett
Stil: Metall
Schwierigkeitsgrad: 1 von 5
© James Hewett
Quick Tip: Design a Pretty Dropdown Button in Photoshop
Designer: Patrik Larsson
Stil: Glossy
Schwierigkeitsgrad: 2 von 5
© Patrik Larsson
Metal RSS Button in Photoshop
Designer: Alex | Zen Elements
Stil: Metall
Schwierigkeitsgrad: 2 von 5
© Alex | Zen Elements
How to Create a Highly Detailed Hi-Tech Power Button
Designer: Alberto Sosa
Stil: 3D
Schwierigkeitsgrad: 5 von 5
© Alberto Sosa
Turn Up the Volume With a Moody PSD Interface
Designer: 92five
Stil: Metall
Schwierigkeitsgrad: 3 von 5
© 92five
Photoshop-Tipp #2: Rechteckiger Button mit Farbfläche
01 Grundform aufziehen
Mit dem Abgerundeten-Rechteckwerkzeug, das in der Optionsleiste auf einen Radius von 8 Pixeln eingestellt wurde, ziehst du die Grundform dieses Buttons auf. Aktiviere den Ebenenstil > Schlagschatten mit Deckkraft: 20%, Winkel: 90 Grad, Abstand: 1 Pixel und Größe: 2 Pixel.
02 Verlaufsüberlagerung
Aktiviere den Ebenenstil > Verlaufsüberlagerung mit Füllmethode: Normal, Art: Linear und Winkel: -90 Grad. Im Prinzip wurde hier ein einfacher Verlauf von einem helleren zu einem dunkleren Grauton eingestellt. Zwei weitere Farbunterbrechungen in der Mitte sorgen aber dafür, dass der Übergang des Verlaufes in der Mitte recht hart verläuft.
03 Farbfläche einfügen
Mit der gleichen Technik könntest du einen Teil des Buttons mit einer anderen Farbe abgrenzen. So wurde hier in den Blautönen #77bbee (RGB 119, 187, 238) und #44aadd (RGB 68, 170, 221) eine kleinere Fläche auf der rechten Seite gestaltet. Um diese perfekt an die darunterliegende Form anzupassen, habe ich die Ebenenminiatur der größeren Form mit gedrückter Strg-Taste angeklickt und damit eine Auswahl erzeugt. Die Ebene mit dem blauen Verlauf sollte aktiv sein, um dann im Ebenenbedienfeld den Button Ebenenmaske hinzufügen anzuklicken.
04 Beschriftung
Beschrifte den Button mit dem Text-Werkzeug, vielleicht in einem Grau- und einem Blauton, passend zu den Farben des Buttons. Mit dem Eigene-Form-Werkzeug wurde hier noch ein Pfeil eingefügt, um den Button etwas dynamischer zu gestalten.
Quick Tip: Create a Plastic Switch in Photoshop
Designer: Paul Flavius
Stil: 3D
Schwierigkeitsgrad: 3 von 5
© Paul Flavius
Principles for Successful Button Design
Designer: Pete Orme
Stil: Grundlagen
Schwierigkeitsgrad: 2 von 5
© Pete Orme
Create a Realistic Telephone Keypad Using Layer Styles
Designer: Jim Nielsen
Stil: 3D
Schwierigkeitsgrad: 3 von 5
© Jim Nielsen
Designing a Modular User Interface Kit in Photoshop
Designer: Suhail Dawood
Stil: Webelemente
Schwierigkeitsgrad: 2 von 5
© Suhail Dawood
Quick Tip: Create a Round Switch Button in Photoshop
Designer: Paul Flavius
Stil: 3D
Schwierigkeitsgrad: 3 von 5
© Paul Flavius
Photoshop: Button-Parade
Designer: Dirk Metzmacher
Stil: Glossy
Schwierigkeitsgrad: 2 von 5
© Dirk Metzmacher
Create a Facebook, Twitter & RSS Button in Photoshop (Free PSD)
Designer: Ainsley
Stil: Glossy
Schwierigkeitsgrad: 2 von 5
Design a Delicious “Contact Me” Button in Photoshop
Designer: psdvault
Stil: Glossy
Schwierigkeitsgrad: 3 von 5
© psdvault
Design a Delicious, Shining Circle Play (Web) Button in Photoshop
Designer: psdvault
Stil: Glossy
Schwierigkeitsgrad: 4 von 5
How to design a super slick UI button in Photoshop
Designer: nouveller
Stil: Metall
Schwierigkeitsgrad: 1 von 5
© nouveller
Industrial-Style Navigation Buttons
Designer: devwebpro
Stil: Metall
Schwierigkeitsgrad: 3 von 5
© devwebpro
Photoshop Buttons UI Tutorial
Designer: Charles Patterson
Stil: Glossy
Schwierigkeitsgrad: 3 von 5
© Charles Patterson
Web Button Making Tutorial 2
Designer: easydisplayname
Stil: Grundlagen
Schwierigkeitsgrad: 1 von 5
© easydisplayname
Ähnliche Artikel:
- So einfach geht’s: Tipps und Tricks zur Gestaltung eines eigenen Stempels
- 40 fotorealistische Photoshop-Tutorials und Tricks
- 30 Kunstwerke mit illustrativen Elementen und Extra-Tutorials zur eigenen Gestaltung
- Steampunk-Power: Beispiele, Tutorials sowie Tipps und Tricks
- Tutorial-Sammlung zur Icon-Gestaltung