Anzeige
Tutorialbeschreibung

Button: Eingedrückter Rolloverbutton

Button: Eingedrückter Rolloverbutton

In diesem Tutorial wird gezeigt, wie man einen Rolloverbutton erstellt, der aussieht als würde man ihn eindrücken.


Also neue Datei, habe hier mal 200 x 100 px genommen.
Füllen mit Farbe Deiner Wahl.
Bei meinem Beispiel habe ich zusätzlich über den Ebenenstil ein Muster (diagonale Scanlines) angewendet.

Somit haben wir nun den Hintergrund:

Bilder


Jetzt kommen wir zum Button; damit dieser schön Rund wird, machen wir ihn aus 3 Ebenen.
Also eine neue Ebene...
Mit dem runden Auswahlwerkzeug einen Kreis ziehen (in der Größe, wie der Button mal hoch sein soll).
Ebene füllen; hier ist egal mit welcher Farbe, da wir später einen Stil auf den Button anwenden.
Diese Ebene duplizieren wir und versetzen sie soweit wie der Button breit sein soll.
Wieder neue Ebene und nun mit dem Rechteckauswahlwerkzeug die beiden Kreise verbinden.
Auswahl füllen; Wenn alles schön passt, diese drei Ebenen mit dem Kettenglied verbinden und über das Menü / Ebene
auf eine Ebene reduzieren.

Bilder


Bilder



Damit haben wir die Form des Buttons.

Wir gehen auf die Hintergrundebene und duplizieren diese.
Jetzt drücken wir die Strg-Taste und klicken gleichzeitig die Buttonebene an,dadurch haben wir die Auswahl des Buttons.



Bilder


Diese Auswahl schneiden wir aus der duplizierten Hintergrundebene aus.
Jetzt wenden wir auf diese Ebene einen Ebenenstil an
Also Ebene zweimal anklicken und die folgenden Eingaben machen.

Bilder
Bilder


Wenn alles so eingestellt ist, diesen Stil speichern (neuer Stil, Namen eingeben und ok), dann ok klicken.
Nun diesen Stil auch auf den Button anwenden.
Euer Bild müßte dann so aussehen.

Bilder


Jetzt können wir noch den Text aufbringen habe hier mal Home genommen (Schriftart deiner Wahl).

Bilder


Schriftebene duplizieren und 1px kleiner machen.

Wenn wir nun den Button ausblenden und die zweite kleine Schriftebene verwenden sieht es so aus:

Bilder


Somit haben wir schon den Effekt.
Was jetzt noch stört ist der Ebenenefekt an den Außenkanten.
Um diesen zu entfernen, einfach die erste Hintergrundebene nochmal duplizieren und über alle anderen legen (also als Oberste).
Aus dieser Ebene schneiden wir mit dem Auswahlwerkzeug den Bereich des Buttons aus.
Nun können wir durch ein und ausblenden des Buttons, sowie ändern der Schriftgröße, die beiden für den Rollovereffekt benötigten Bilder abspeichern.

Bilder
Bilder


Und hier der Effekt als Gifanimation:
Bilder


Hoffe, dass ich alles gut erklärt habe.
Und nun viel Spaß beim Erstellen dieses Buttons.

Gruß Wolf

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von xenixdeluxe
  • 05.11.2011 - 23:58

zwar schon ein etwas älters Tutoriak aber hat geklappt und kann man gut gebrauchen

danke

Portrait von Goldstaubwerk
  • 25.10.2011 - 22:22

sieht gut aus, hab ne weile gebraucht ... aber es funktioniert. DANKE

Portrait von 3welten
  • 17.01.2011 - 13:38

genau sowas hab ich gesucht! gut erklärt und somit ging es auch ziemlich schnell! sehr gut

Portrait von RollyRocket
  • 10.01.2011 - 11:12

Hm sorry aber irgendwie versteh ich das nicht ganz. ^^ Entweder bin ich noch zu müde oder du hast da was vergessen. :) Also erstmal sieht mein Button (ungedrückt) nicht so aus wie deiner, wenn ich die Werte so eingebe wie du und zweitens versteh ich nicht wie du dann den "gedrückt"-Effekt erreichst.

Portrait von Computerundfun
Portrait von scarred13
  • 29.09.2010 - 10:57

Eigentlich simpel, aber darauf muss man auch erst einmal kommen ;)

Portrait von gaggala
  • 16.09.2010 - 15:11

Schöner Buttoneffekt.

Portrait von DraQ
  • 16.07.2010 - 09:36

also ich habs in ca 10min durchgeklickt und hat alles wie beschrieben funktioniert....ein paar änderungen würde ich persönlich machen, aber das ist geschmackssache

Portrait von ninichen86
  • 13.06.2010 - 16:14

ICh hab jetzt über ne Stunde daran rumprobiert.
Da fehlt, wenn man die Auswahl von dem Button erstellt, dann muss man diese noch umkehren, bevor man den Rest weglöscht, sonst hat man nur einen weißen Button......

Portrait von Siamac
  • 15.05.2010 - 18:01

sehr gut erklärt, danke.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.05.2010 - 16:17

... is mir zu verwirrend das Ganze

Portrait von photoshper
  • 11.04.2010 - 17:17

sehr verwirrend, kann ich nichts mit anfangen

Portrait von Sele1981
  • 18.03.2010 - 22:59

Hammergeil! Vielen dank! Hab zwar ne stunde gebraucht weil ich komplett neuling bin :) Aber sieht 1A aus

Portrait von staxx78
  • 04.03.2010 - 22:07

Versuche das gleich mal in meine Navi einzubringen, was bisher nur eine Grafik ohne Funktion ist

Portrait von citie
  • 03.03.2010 - 23:40

Danke hat mir sehr geholfen

Portrait von ZebRa93
  • 22.02.2010 - 12:55

Genial gemacht. Danke =)

Portrait von Ryan101
  • 20.02.2010 - 13:28

Vielen Dank für dieses Tutorial

Portrait von Ficher
  • 16.02.2010 - 10:00

Super Sache. Hat einwandfrei funktioniert!

Portrait von Bannilein
  • 15.02.2010 - 16:24

Schön erklärt und auch umsetztbar. Ich denke daraus lässt sich was für meine Website machen.

Portrait von BruniderBruns
  • 06.01.2010 - 15:42

Super tutorial. Hab als anfänger eigentlich alles gleich verstanden

x
×
×