[TuT]Ein einfacher Web 2.0-Button

06/11/2010 16:00 zeRoGamiing#1
Wir fangen damit an, indem wir die Form und Farbe unseres Buttons definieren:
Als erstes macht ihr eine neue Datei auf, 200*200 Px groß. Macht eine neue, transparente Ebene auf und zieht mit der elliptischen Auswahl einen Kreis.

In den Werkzeugeinstellungen könnt ihr die genaue Position und Größe des Kreises bestimmen .
Nehmt die Position 10/10 und stellt eine Größe von 180*180 ein. Füllt die Auswahl mit einer Farbe, ich habe ein Grau, #3c3c3c genommen

[Only registered and activated users can see links. Click Here To Register...]

Als nächstes kümmern wir uns um die Form unseres Buttons:

Geht auf Auswahl: Alles Auswählen [Strg-A].
Geht auf Filter->Verzerren->Zacken und führt die Aktion mit folgenden Werten durch:

Periode:22
Amplitude: 2
Wellentyp: Könnt ihr beides nehmen sieht ähnlich aus, ich nehme Sinus.
Kanten:Umfalten
Kantenglättung:Aktiviert

Und Orientierung nehmt ihr erst Horizontal; und danach führt ihr dieselbe Aktion mit den gleichen Werten Vertikal durch.

[Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]

Jetzt Beschriften wir den Button:
- Nehmt eine Schrift eurer Wahl und Beschriftet den Button mit eurem Schriftzug. Ich habe ein Hellblau #93cbff genommen und die Schriftart | Varsity |. Auf dem Button könntet ihr Zum Beispiel Schreiben : Neu!!! oder BETA oder ähnliches.

Ihr könnt den Schriftzug danach auch etwas drehen , auch das sieht gut aus...

[Only registered and activated users can see links. Click Here To Register...]

Jetzt Vinniettieren wir den Button :
- Nehmt das Verlaufswerkzeug und nehmt die Standart Farben Schwarz und weis, oder drückt einfach die Taste D.
- Macht eine neue Ebene auf und zieht einen Verlauf von Rechts nach links.
- Stellt den Ebenen Modus auf „Überlagern“.
- Geht auf die Ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.

[Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]

Als nächstes geben wir dem Button einen Glas Effekt:
- Macht eine neue Ebene auf und wählt das obere Drittel des Buttons aus.
- Füllt es mit Weiß und stellt die Ebenen Transparenz auf 18.
- Geht auf die ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.
- Geht auf die Ebene mit dem Glas Effekt und geht auf Auswahl -> Auswahl invertieren , oder drückt die Tasten [Strg-I].drückt Entfernen um die Auswahl zu löschen.

[Only registered and activated users can see links. Click Here To Register...]


Kommen wir zum Schatten:

Wechselt zu der Ebene mit der Form des Buttons und geht auf Filter -> Licht und Schatten->Schlagschatten und führt die Aktion mit diesen Werten durch:
Versatz x und y : 0
Weichzeichnenradius: 20
Deckkraft: 80
Größenänderung zulassen: deaktiviert.

Fertig! Speichert den Button zB als .png.

Tipp: In allen modernen Browsern könnt ihr bei pngs auch transparente Bildteile speichern.

[Only registered and activated users can see links. Click Here To Register...]
06/11/2010 18:01 .Ice#2
der "glas" effekt sieht dumm aus einfach in der mitte getrennt sieht sehr unecht aus
06/11/2010 18:05 amphetaminecoffee#3
[Only registered and activated users can see links. Click Here To Register...]