Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dirk Metzmacher 23. Juni 2014

UI mit Hui-Faktor: 40 hochwertige Schaltflächen und PSD-Tipps für eigene Buttons

Der Button ist ein klei­nes, doch recht wich­ti­ges Designelement einer Website. Oftmals soll er eine Aktion des Besuchers als „Call-To-Action“ aus­lö­sen, muss also gut sicht­bar und selbst­er­klä­rend sein. Wir haben gleich 40 sehr gute Photoshop-Tutorials zusam­men­ge­stellt, die zu ele­gan­ten, mini­ma­lis­ti­schen und manch­mal auch ver­spiel­ten Ergebnissen füh­ren. So gelan­gen Sie zu Buttons, die etwas abge­wan­delt sofort für eige­ne Projekte ein­ge­setzt wer­den kön­nen. Wie gewohnt, haben wir unse­re Sammlung um eini­ge eige­ne Tipps für den Photoshopper ergänzt…

Quick Tip: Design a Pretty Dropdown Button in Photoshop

Designer: Patrik Larsson
Website: webdesign.tutsplus.com

photoshop-buttons1

© Patrik Larsson


Photoshop Calculater Button Logo Icon

Designer: adobeperson.com
Website: adobeperson.com

photoshop-buttons2

© adobeperson.com

Create an icon of the short message in several simple steps (Original Tutorial)

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons3

© 4-designer.com

Glossy-Style Carbon Fibre Navigation Buttons

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons4

© Photoshop Star Staff

Photoshop For Beginners: Creating buttons for web

Designer: Sebastiano
Website: wegraphics.net

photoshop-buttons5

© Sebastiano

Learn To Make Photo-Realistic Volume knob in Photoshop

Designer: Shaina
Website: tutorialized.com

photoshop-buttons6

© Shaina

Deep Analysis on How to Create a High-precision Button

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons7

© 4-designer.com

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

Designer: psdvault.com
Website: psdvault.com

photoshop-buttons8

© psdvault.com

Create beautiful buttons in Photoshop

Designer: thethemefoundry.com
Website: thethemefoundry.com

photoshop-buttons9

© thethemefoundry.com

Glossy buttons tutorial

Designer: AlonDiviX
Website: alondivix.deviantart.com

photoshop-buttons10

© AlonDiviX

 

Dr.Web Buttontrend #1: Wie gezeichnet

Eine Option, wie ein Button mal ganz anders wir­ken kann, ist die­sen von Hand zu zeich­nen oder die Zeichnung in Photoshop oder Illustrator zu simu­lie­ren. In Photoshop erstel­len Sie einen Pfad, den Sie mit einer pas­sen­den Werkzeugspitze nach­zeich­nen las­sen. Dazu gehen Sie im Pfadbedienfeld unten auf die Schaltfläche Pfadkontur mit Pinsel fül­len.

buttontrend1

 

Design a Beautifully Detailed Web Button

Designer: Liam McCabe
Website: webdesign.tutsplus.com

photoshop-buttons11

© Liam McCabe

Clean White Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons12

© James Hewett

Professional Menu Button

Designer: Photoshop Star Staff
Website: www.photoshopstar.com

photoshop-buttons13

© Photoshop Star Staff


Create a Nice Stylish Glossy Button in Photoshop

Designer: coregfx.org
Website: coregfx.org

photoshop-buttons14

© coregfx.org

Blue on Black Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons15

© James Hewett

Create a Wii Web Header in Photoshop

Designer: originmaker.com
Website: originmaker.com

photoshop-buttons16

© originmaker.com

Glass Button
Photoshop Tutorial

Designer: yourphotoshopguide.com
Website: yourphotoshopguide.com

photoshop-buttons17

© yourphotoshopguide.com

Principles for Successful Button Design

Designer: Pete Orme
Website: webdesign.tutsplus.com

photoshop-buttons18

© Pete Orme

Create a Realistic Telephone Keypad Using Layer Styles

Designer: Jim Nielsen
Website: design.tutsplus.com

photoshop-buttons19

© Jim Nielsen

Photoshop Buzline Button Logo Icon

Designer: good­bus
Website: tutorialagent.com

photoshop-buttons20

© good­bus

 

Dr.Web Buttontrend #2: Grundform

Ein leich­ter Weg hin zum eige­nen Button führt über eine Grundform, die Sie etwa über das Abgerundete-Rechteck-Werkzeug auf­zie­hen. Die Farbe bestim­men Sie über die aktu­el­le Vordergrundfarbe, die Rundung in der Optionsleiste unter Radius. Leicht kön­nen Sie Ihre Schaltfläche beschrif­ten und mit wei­te­ren Formen kom­bi­nie­ren, für einen schö­nen 2D-Look im Flat-Design.

buttontrend2

 

Web Button Making Tutorial 1

Designer: easy­dis­play­na­me
Website: easydisplayname.deviantart.com

photoshop-buttons21

© easy­dis­play­na­me

RSS button

Designer: adobetutorialz.com
Website: adobetutorialz.com

photoshop-buttons22b

© adobetutorialz.com

Design a Textured Button in Photoshop

Designer: Caleb Kimbrough
Website: bittbox.com

photoshop-buttons23

© Caleb Kimbrough

Perfect Shine Button or Icon

Designer: boon
Website: boonage.pjss2.net

photoshop-buttons24

© boon

Design panic button logo icon in photoshop

Designer: gnews
Website: adobeperson.com

photoshop-buttons25

© gnews

Quick Tip: Create a Round Switch Button in Photoshop

Designer: Paul Flavius
Website: design.tutsplus.com

photoshop-buttons26

© Paul Flavius

Stylish Metallic Button in Photoshop

Designer: abdu­zee­do
Website: abduzeedo.com

photoshop-buttons27

© abdu­zee­do

Glossy Web 2.0 Button

Designer: avivadirectory.com
Website: avivadirectory.com

photoshop-buttons28

© avivadirectory.com

How to Design an Inset Button in Photoshop

Designer: paper-leaf.com
Website: paper-leaf.com

photoshop-buttons29

© paper-leaf.com

Nice ‘n’ Simple Subscribe Badges

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons30

© Photoshop Star Staff

 

Dr.Web Buttontrend #3: Buttonserie

Sehr prak­tisch ist auch die Buttonserie. Wir spa­ren uns Zeit bei der Umsetzung und gehen sicher, dass alle Buttons gut zusam­men pas­sen. Eine Grundform wird dazu unter­teilt und mit eini­gen Icons aus­ge­stat­tet, die kom­ple­xer sein kön­nen oder wie hier, eher mini­ma­lis­tisch. Selbst einen Mouseover-Zustand kön­nen Sie schön in Photoshop simu­lie­ren.

buttontrend3

 

Photoshop Tutorials for Beginners – How To Create Simple Flat Button

Designer: Dropcolors Studio
Website: youtube.com

photoshop-buttons31

© Dropcolors Studio

Photoshop Tutorial: Interface Style – Indented Rim

Designer: Stratzeh
Website: youtube.com

photoshop-buttons32

© Stratzeh

Animated Glowing Button in Photoshop CS6 | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons33

© Howard Pinsky

Photoshop Tutorial: Create a Glossy Button

Designer: RiverCityGraphix
Website: youtube.com

photoshop-buttons34

© RiverCityGraphix

Create a Simple Record Button – Photoshop Tutorial

Designer: tut­vid
Website: youtube.com

photoshop-buttons35

© tut­vid

Photoshop Tutorial #179 – Creating a shiny button with inset text

Designer: Art Starter
Website: youtube.com

photoshop-buttons36

© Art Starter

Adobe Photoshop Tutorial – Interface And Orb Tutorial – FPST

Designer: FlewDesigns – Photoshop Tutorials
Website: youtube.com

photoshop-buttons37

© FlewDesigns – Photoshop Tutorials

Cable/Tube – Photoshop-Tutorial

Designer: Grufix-Board.de – Dein Tutorial-Kanal
Website: youtube.com

photoshop-buttons38

© Grufix-Board.de – Dein Tutorial-Kanal

Create Slick Web Tags – Photoshop CS5 Tutorial

Designer: tut­vid
Website: youtube.com

photoshop-buttons39

© tut­vid

Photoshop: Carbon Fiber Power Button | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons40

© Howard Pinsky

(dpe)

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.