Tutorialbeschreibung

Glänzender Button

Glänzender Button

Wie man einen Button mit Glänzeffekt in Photoshop erstellen kann!

Ideal auch für ein Logo oder ähnliches!


Schritt 1: GRUNDFORM DES BUTTONS


Neuen Arbeitsbereich (Größe 500 x 500px) erstellen!

Vordergrundfarbe auf "rot" stellen und mit dem "Abgerundetes-Rechteck-Werkzeug" ein Quadrat aufziehen!
Radius auf 10px stellen (oben in der Menüleiste).

Bilder


In die Ebenenstile wechseln (Doppelklick auf die Ebene oder Ebene => Ebenenstil => Fülloptionen) und hier folgende Einstellungen treffen:

Schlagschatten:

Bilder


Abgeflachte Kante und Relief:

Bilder


Verlaufsüberlagerung:

Bilder


In den Farbverlauf klicken, um die Farben anzupassen:

Bilder


Verlauf von #A40000 zu #ED1C24 einstellen

[ OK ]

Schritt 2: GLANZ

Mit dem Zeichenstift folgende Form (oder ähnlich) erstellen!

Bilder


Nicht wundern wenn diese Form auch gleich in rot dargestellt wird; das ändern wir gleich!
Bilder


In den Ebenenstil wechseln und folgende Einstellungen treffen:

Verlaufsüberlagerung:

Bilder


In den Farbverlauf klicken, um die Farben anzupassen: Verlauf von #FFFFFF zu #FF767B einstellen

[ OK ]

Dann die Deckkraft der Ebene auf 48% stellen!


Schritt 3: TEXT EINFÜGEN

Mit einer "fetten" Schrift (z.B. Impact) den Text (hier IT) einfügen und in der Größe so anpassen, dass der Button "gut" gefüllt ist!

Bilder


Dann in den Ebenenstil wechseln und folgende Einstellungen treffen:

Schatten nach Innen:

Bilder


[ OK ]

FERTIG


Der Button sollte jetzt so aussehen:

Bilder

Natürlich kann man jetzt mit den Farben, Text und der Form spielen ...

Viel Spaß beim Nachbauen!

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.11.2009 - 13:06

gutes tut...nach paar mal probieren hats dann auch geklappt

Portrait von mc_gee
  • 17.11.2009 - 16:32

tolles tutorial, schnell, einfach und eun gutes ergebnis

Portrait von VaultAvenger
  • 16.11.2009 - 20:31

Gut erklärt und hilfreich. Habe ich gleich mal nachgebaut...

Portrait von tigerforce777
  • 13.11.2009 - 12:18

Ist ein Super Tutorial, hat mir richtig weitergeholfen.
Danke!

Portrait von 0lenka
  • 24.10.2009 - 01:55

schlich und einfach, gut gemacht , detalierter wäre schöner

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.10.2009 - 12:50

Finds eigentlich ganz gut!

Portrait von McLovin
  • 16.10.2009 - 09:47

Danke hab ewig nach sowas Gesucht

Portrait von NailsinDesign
  • 13.10.2009 - 14:07

Super Tutorial. Genau das hab ich gesucht.

Portrait von TheSlin
  • 05.10.2009 - 20:18

das ist genau das, was ich gesucht habe...echt super und gut nachvollziehbar

Portrait von Gladiator2009
  • 28.09.2009 - 23:34

Mir hat es gut gefallen, man lernt nie aus!

Portrait von RuuR
  • 17.09.2009 - 11:53

für die eine oder andere Idee im Web 2.0 sicherlich sehr gut!

Portrait von Levithan
  • 16.09.2009 - 08:49

Leider zu oberflächlich.

Portrait von Kiran
  • 09.09.2009 - 19:44

Gut erklärt , bis auf den Zeichenstift

Portrait von martin7766
  • 06.09.2009 - 15:44

Tolles Tut, hab ich schon oft gebrauchen können!

Portrait von Bio_mechaniker
  • 04.09.2009 - 11:41

super ding!!!
das hat mir sehr geholfen

Portrait von 11fcn
  • 31.08.2009 - 18:50

sehr schönes tutorial :)

Portrait von EvilMonkey
  • 27.08.2009 - 16:00

hmmm bin n bissel zu dumm aber werds schon kapieren

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.08.2009 - 20:34

bin Neu, und find das TUT leicht verständlich, Mit dem Zeichenstift umzugehen ist auch ncith viel schwerer als den Radiergummi zu benutzen. Also volle Punktzahl!

Portrait von Natalka
  • 11.08.2009 - 15:09

Super, bis auf den bereits mehrfach erwähnten Freihandabschnitt =D

Portrait von Ridoxx
  • 25.07.2009 - 13:30

hat echt super geholfen...war die ideale lösung für n button-design für ne homepage ;)

Mehr anzeigen

x
×
×