33 Button-Tutorials, die zum Anklicken geschaffen wurden und Tricks zur eigenen Gestaltung

12.02.14, 9:09

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.

buttons-teaser

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

Photoshop For Beginners: Creating buttons for web part 1 - Sebastiano
© Sebastiano

Photoshop For Beginners: Creating buttons for web part 2

Designer: Sebastiano
Stil: Texturüberlagerung
Schwierigkeitsgrad: 3 von 5

Photoshop For Beginners: Creating buttons for web part 2 - Sebastiano
© Sebastiano

Creative Button Animations with Sprites and JQuery

Designer: Khalid Fattouchi
Stil: Glossy
Schwierigkeitsgrad: 1 von 5

Creative Button Animations with Sprites and JQuery - Khalid Fattouchi
© Khalid Fattouchi

Stylish Metallic Button in Photoshop

Designer: abduzeedo
Stil: Glossy
Schwierigkeitsgrad: 3 von 5

Stylish Metallic Button in Photoshop - abduzeedo
© abduzeedo

Glossy Web 2.0 Button

Designer: avivadirectory
Stil: Glossy
Schwierigkeitsgrad: 1 von 5

Glossy Web 2.0 Button - avivadirectory
© avivadirectory

Resolution Independence

Designer: Sean Patrick O’Brien
Stil: Metall
Schwierigkeitsgrad: 1 von 5

Resolution Independence - Sean Patrick O'Brien
© Sean Patrick O’Brien

Create beautiful Buttons in Photoshop

Designer: Drew Strojny
Stil: Glossy
Schwierigkeitsgrad: 1 von 5

Create beautiful Buttons in Photoshop - Drew Strojny
© Drew Strojny

RSS-Button

Designer: ART-D
Stil: Glossy
Schwierigkeitsgrad: 4 von 5

RSS-Button - ART-D
© ART-D

Photoshop Buzline Button Logo Icon

Designer: goodbus
Stil: 3D
Schwierigkeitsgrad: 5 von 5

Photoshop Buzline Button Logo Icon - goodbus
© 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.

button-beispiel-a1-neu

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.

button-beispiel-a2

Aktiviere die Farbunterbrechung auf der rechten Seite und ändere die Farbe auf #d1d1d1 (RGB 209, 209, 209) ab. Bestätige dreimal mit OK.

button-beispiel-a2-neu

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.

button-beispiel-a4

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.

button-beispiel-a5

How to Design an Inset Button in Photoshop

Designer: Paper Leaf Design
Stil: Plastik
Schwierigkeitsgrad: 3 von 5

How to Design an Inset Button in Photoshop - Paper Leaf Design
© Paper Leaf Design

Nice ‘n’ Simple Subscribe Badges

Designer: photoshopstar.com
Stil: Grunge
Schwierigkeitsgrad: 2 von 5

Nice ‘n’ Simple Subscribe Badges - photoshopstar.com
© photoshopstar.com

Create a Nice Stylish Glossy Button in Photoshop

Designer: coregfx.org
Stil: Glossy
Schwierigkeitsgrad: 2 von 5

Create a Nice Stylish Glossy Button in Photoshop - coregfx.org
© coregfx.org

Professional Menu Button

Designer: photoshopstar.com
Stil: Metall
Schwierigkeitsgrad: 3 von 5

Professional Menu Button - photoshopstar.com
© photoshopstar.com

Design Watercolor Effect Menu

Designer: webdesignerwall.com
Stil: Grunge
Schwierigkeitsgrad: 2 von 5

Design Watercolor Effect Menu - webdesignerwall.com
© webdesignerwall.com

Clean White Navigation Bar

Designer: James Hewett
Stil: Metall
Schwierigkeitsgrad: 1 von 5

Clean White Navigation Bar - James Hewett
© James Hewett

Quick Tip: Design a Pretty Dropdown Button in Photoshop

Designer: Patrik Larsson
Stil: Glossy
Schwierigkeitsgrad: 2 von 5

Quick Tip: Design a Pretty Dropdown Button in Photoshop - Patrik Larsson
© Patrik Larsson

Metal RSS Button in Photoshop

Designer: Alex | Zen Elements
Stil: Metall
Schwierigkeitsgrad: 2 von 5

Metal RSS Button in Photoshop - Alex | Zen Elements
© Alex | Zen Elements

How to Create a Highly Detailed Hi-Tech Power Button

Designer: Alberto Sosa
Stil: 3D
Schwierigkeitsgrad: 5 von 5

How to Create a Highly Detailed Hi-Tech Power Button - Alberto Sosa
© Alberto Sosa

Turn Up the Volume With a Moody PSD Interface

Designer: 92five
Stil: Metall
Schwierigkeitsgrad: 3 von 5

Turn Up the Volume With a Moody PSD Interface - 92five
© 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.

button-beispiel-b1

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.

button-beispiel-b2

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.

button-beispiel-b3

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.

button-beispiel-b4

Quick Tip: Create a Plastic Switch in Photoshop

Designer: Paul Flavius
Stil: 3D
Schwierigkeitsgrad: 3 von 5

Quick Tip: Create a Plastic Switch in Photoshop - Paul Flavius
© Paul Flavius

Principles for Successful Button Design

Designer: Pete Orme
Stil: Grundlagen
Schwierigkeitsgrad: 2 von 5

Principles for Successful Button Design - Pete Orme
© Pete Orme

Create a Realistic Telephone Keypad Using Layer Styles

Designer: Jim Nielsen
Stil: 3D
Schwierigkeitsgrad: 3 von 5

Create a Realistic Telephone Keypad Using Layer Styles - Jim Nielsen
© Jim Nielsen

Designing a Modular User Interface Kit in Photoshop

Designer: Suhail Dawood
Stil: Webelemente
Schwierigkeitsgrad: 2 von 5

Designing a Modular User Interface Kit in Photoshop - Suhail Dawood
© Suhail Dawood

Quick Tip: Create a Round Switch Button in Photoshop

Designer: Paul Flavius
Stil: 3D
Schwierigkeitsgrad: 3 von 5

Quick Tip: Create a Round Switch Button in Photoshop - Paul Flavius
© Paul Flavius

Photoshop: Button-Parade

Designer: Dirk Metzmacher
Stil: Glossy
Schwierigkeitsgrad: 2 von 5

Photoshop: Button-Parade - Dirk Metzmacher
© Dirk Metzmacher

Create a Facebook, Twitter & RSS Button in Photoshop (Free PSD)

Designer: Ainsley
Stil: Glossy
Schwierigkeitsgrad: 2 von 5

Create a Facebook, Twitter & RSS Button in Photoshop (Free PSD) - Ainsley © Ainsley

Design a Delicious “Contact Me” Button in Photoshop

Designer: psdvault
Stil: Glossy
Schwierigkeitsgrad: 3 von 5

Design a Delicious “Contact Me” Button in Photoshop - psdvault
© psdvault

Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Designer: psdvault
Stil: Glossy
Schwierigkeitsgrad: 4 von 5

Design a Delicious, Shining Circle Play (Web) Button in Photoshop - Glossy © psdvault

How to design a super slick UI button in Photoshop

Designer: nouveller
Stil: Metall
Schwierigkeitsgrad: 1 von 5

How to design a super slick UI button in Photoshop - nouveller
© nouveller

Industrial-Style Navigation Buttons

Designer: devwebpro
Stil: Metall
Schwierigkeitsgrad: 3 von 5

Industrial-Style Navigation Buttons - devwebpro
© devwebpro

Photoshop Buttons UI Tutorial

Designer: Charles Patterson
Stil: Glossy
Schwierigkeitsgrad: 3 von 5

Photoshop Buttons UI Tutorial - Charles Patterson
© Charles Patterson

Web Button Making Tutorial 2

Designer: easydisplayname
Stil: Grundlagen
Schwierigkeitsgrad: 1 von 5

Web Button Making Tutorial 2 - easydisplayname
© easydisplayname

Kommentar hinzufügen

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden.