Tutorialbeschreibung

Button: Glas-Buttons

Button: Glas-Buttons

Wir beginnen, indem wir mit [STRG]+[N] ein neues Bild der Standardgröße 640 * 480 px erstellen.

Dort ändern wir die Hintergrundfarbe auf ein neutrales Grau (zum Beispiel: #aaaaaa). Andere Hintergrunfarben, insbesondere Weiß, lenken nur von der eigentlichen Aufgabe ab, und können die menschliche Farbwahrnemung ein wenig aus dem Gleichgewicht bringen.

Als nächstes, aktivieren wir mit [U] das Rechteck-Werkzeug und zeichnen mit diesem einen rechteckigen Button in entsprechender Größe.
Natürlich können jegliche andere Formen verwendet werden, die auch mit einem Masken-Werkzeug erstellt sein können.
Der Vorteil von Vektormasken liegt aber klar auf der Hand: sie können in jede andere Form gebracht werden und vergrößert oder verkleinert werden ohne den geringsten Qualitäts-Verlust. Ich habe für dieses Tutorial das normale Rechteck und ein abgerundetes Rechteck verwendet.

Abbildung 1:
Bilder


Nun rufen wir mit einem [Doppelklick] auf das entsprechende Vorschaubild der Button-Ebene die Fülloptionen auf.

Nachfolgend nun die Einstellungen um den Glas-Effekt zu erzeugen. Die Einstellungen bei Abbildung 4 müssen nur dann vorgenommen werden, wenn ein etwas "rauchigeres" Erscheinungsbild erwünscht ist. (siehe dazu Abbildung 8, Beispiel 2).

Abbildung 2:
Bilder


Abbildung 3:
Bilder


Abbildung 4:
Bilder


Abbildung 5:
Bilder

Um den Stil des Verlaufs zu bearbeiten genügt ein [Doppelklick] auf den Verlauf.
Die nachfolgenden Farbwerte können natürlich nach Belieben geändert werden, wichtig ist nur die Helligkeits- und Positionsverteilung, wie sie hier zu erkennen ist.

Abbildung 6:

Bilder

Abbildung 7:

Bilder

Zum Schluß speichern wir den fertigen Stil nun nur noch mit einem Klick auf den Button "Neuer Stil..." ab und wenden ihn dann mit einem Klick auf "OK" auf unsere zuvor rrstellte Form an.

Und hier nun das fertige Ergebnis.
Beispiel 1 ist ohne "Schein nach innen", Beispiel 2 mit.

Abbildung 8:

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dark_angel
  • 28.05.2008 - 11:50

danke, ich finds echt toll =)
nur bei mir siehts nich so aus. liegt wohl daran, dass ich die 4 buttons auf dieselbe ebene gesetzt hab^^'''

Portrait von Patman
  • 23.05.2008 - 09:29

Nette Buttons, werde ich bald mal brauchen können :)

Portrait von Bonitana
  • 15.05.2008 - 12:04

Diese Variante kannte ich noch gar nicht, wird mir aber zukünftig eine große Hilfe sein. Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.05.2008 - 20:38

Danke is super erklärt hat geklappt^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.05.2008 - 17:57

Vielen dank dafür. Genau wonach ich gesucht hab ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.05.2008 - 20:37

Supi Tut! Leicht verständlich und nachmachbar!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.05.2008 - 15:49

Vielen Dank für dieses SEHR hilfreiche Tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.05.2008 - 12:27

ist voll das geile tut thx...ich selber kriegen nie so schöne verläufe hin-.-^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.05.2008 - 22:17

echt geiles tut! ich wollt schon immer wissen, wie dieser efekt funzt!

thx, ankalagon!

Portrait von stefan774
  • 16.04.2008 - 19:58

Gutes Tutorial!! Aber (verdammt) schauts bei euch auch nicht ganz so toll aus wie im Beispiel? ;-(

Nja aber das liegt warsch. an mir. ;-)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.04.2008 - 18:41

1A TuT

LG Marco-3993

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.04.2008 - 14:05

Sieht aus wie Vista und MCE, aber ich bekomms net 100%ig hin, trotzdem klasse tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.04.2008 - 12:51

Wunderbar. Sehr gut erklärt - 5*!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.04.2008 - 09:52

Echt Super! Habe schon lange nach solch einem Tut gesucht. Danke

Portrait von ravido
  • 04.04.2008 - 20:07

WOW Danke, hat mir echt reichlich geholfen in sachen buttons für meine homepage. Ein Toller effekt!

Portrait von Zeiflex
  • 27.03.2008 - 18:47

Echt gute Anleitung. Sieht richtig gut aus thx

Portrait von smokingjoe
  • 26.03.2008 - 14:49

Super verständliche Anleitung. Da machts lernen doch Spass

Portrait von RuntimeError
  • 24.03.2008 - 12:03

Das ergebnis sieht besser aus, als das Vista design *fg*

Portrait von steefen
  • 06.03.2008 - 17:00

top anleitung, hab ich schon lange gesucht. echt klasse

Portrait von Haliestra
  • 22.02.2008 - 07:22

Super einfach nachzuvollziehen!

Mehr anzeigen

x
×
×