[PHOTOSHOP] Tutorial für Web 2.0-Buttons

In diesem kleinem Tutorial möchte ich Euch zeigen, wie Ihr diese Buttons mit Glanz und Spiegelung ganz einfach erstellt.

Hier ist das Vorschaublid: ~KLICK~


Erstellt ein neues Bild. Die Maße sind eigentlich egal, bei mir sind sie aber so:
Klicke hier für die Maße

Die Hintergrundebene Weiß/Schwarz füllen
Erstellt eine neue Ebene
Benutzt das „Abgerundetes-Rechteck-Werkzeug“ und zieht euch den Grundkörper des Buttons zurecht.



Hier sind die Settings von dem Werkzeug:
Klicke hier für die Settings

Mit dem Direktauswahl-Werkzeug die unteren beiden Punkte auswählen und entfernen.



Danach könnt Ihr die Größe des Buttons noch anpassen.


Stellt bei den Fülloptionen einen Farbverlauf von einer gewünschten Farbe zu einer etwas helleren Farbe ein.




Danach mit (STRG gedückt) auf die Ebene klicken. Jetzt haben wir den Button ausgewählt.

Nun können wir mit dem Kreis Auswahl-Werkzeug die Auswahl so abziehen, wie wir später den Glanz haben wollen.
Neue Ebene.
Verlauf von unterer Auswahl nach oben, dabei STRG gedrückt halten(Weiß nach Transparenz).



Dann die Transparenz der Ebene auf etwa 30% bis 50% einstellen, müsst ihr ein bisschen rumprobieren.
Jetzt wählt wieder die Ebene mit dem blauen Button aus und geht in die Fülloptionen.

Stellt eine Kontur mit der Farbe #535353 und 1px ein. Dazu noch einen Schein nach innen (gleiche Farbe) mit der Deckkraft 43,Rauschen 3, überfüllen 1, Größe 8, Bereich 24 und Zufallswert 0 ein.

Jetzt platziert eine Schriftebene zwischen der Glanzebene und der blauen Button-Ebene.



Um eine Spiegelung zu erzeugen, markiert ihr alle 3 Ebenen (Button, Schrift und Glanz) kopiert sie und fügt die kopierten Ebenen zu einer Ebene zusammen.



Danach drückt Ihr STRG+T, macht einen Rechtsklick in die Markierung, und wählt "Um 180° Drehen".
Jetzt Ihr wieder STRG+T und spiegelt das gerade gedrehte Ebene vertikal.
Nun verschiebt Ihr die Ebene einen Pixel unter die obige.



Zu dieser Ebene fügt Ihr Jetzt eine Vektormaske hinzu. Mit der Vektormaske ausgewählt, zeichnet ihr den passenden Verlauf.

Klick hier für das letzte Bild
Fertig ist Euer Button.

Als Mouseover Effekt könnt ihr ja eine Art schein nach außen hinzufügen.
Leider kann ich nur 8 Bilder reinmachen und Musste desshalb manche Bilder verlinken.

Wer sich das in live im Web anschauen will: nikeee13.de

© 2008 nikeee13.de

Interessanter Einstieg, um Werbung für deine Seite zu machen

Nee, aber sonst gefällts mir. Leider kannst du nicht mehr Bilder einfügen, das macht das ganze etwas umständlich. Vlt. kannst du ja diesbezüglich mal nen Moderator kontaktieren.

ähm, man kann hier auch 2x posten

Stimmt. Mach ich das nächste mal...
Mir fehlt hier isrgedwie noch ne Art Tuorial Sektion bei PF.
Könnete man nicht mal einen Beraich enrichten, der in Webdesign, Gafikbearbeitung, Developing und Games/Irgendwas anderes aufgeteilt ist?

nö, weil wir hier ja nach Themen unterscheiden und nicht nach "Darreichungsform". Es ist ja egal ob es sich um Fragen, Erfahrungsberichte, Meinungsaustausch oder eben Anleitungen handelt - wichtig ist der Bereich, in dem das ganze thematisch angesiedelt ist.
Denkbar wäre hingegen ein angepinnter thread in dem alle Tutorials der Zone verlinkt sind. Dazu müssten es aber schon noch ein zwei mehr sein