Button: Aquabutton
Hier eine Anleitung für einen schönen Aqua-Button
Aqua Button
Das brauchst du:
Photoshop 6(+), ich benutze Photoshop 7
Und so geht`s:
WICHTIG !! Der fertige Button wird viele Ebenen haben, deshalb ist es sinnvoll diese zu benennen!!!
1. Schritt:
Erstelle eine neue Datei mit der Größe 400 x 200 Pixel, Hintergrund: Weiß. Ich habe mir Hilflinien erstellt.
Grundform
2. Schritt:
Nun erstelle eine neue Ebene benenne diese "Grundform", ähnlich der Abbildung.
Als Tip:
Unter dem Textwerkzeug ist das Werkzeug "Abgerundetes Rechteck Werkzeug" mit dem du die Form erstellen kannst.
Einstellung: Pixel füllen, Radius: nach Wahl, Farbe:2E1C86
Rand
3. Schritt:
Neue Ebene erstellen und benenne diese "Licht 1".
Mit "STRG+Klick auf die Grundebene bekommst du eine Auswahl.
Dann auf > Auswahl - Auswahl transformieren <
Die Auswahl auf die hier abgebildeten Form bringen und weiß füllen.
4. Schritt:
Die Ebene Grundfarbe dublizieren und über die Licht-Ebene ziehen und in "Rand" umbenennen. Ebene Rand auswählen. Mit "STRG+Klick" Auswahl aufrufen und mit Farbe 616161 füllen.
Danach mit "STRG+Rechtsklick" auf "Licht 1" um die Auswahl zu erhalten und mit "STRG+X" den unerwünschten Bereich entfernen.
5. Schritt:
Jetzt muss die Ebene "Rand" weichgezeichnet werden.
> Filter - Weichzeichnungsfilter - Gaußscher Weichzeichner> mit folgender Einstellung:
Radius: 6,0 pixel
Die Ebene "Rand" in der Ebenenpalette auf Modus "Multiplizieren" stellen.
Inneres Licht
6. Schritt:
Doppelklicke auf Ebene "Licht 1" es soll in der Ebenenpallette auf Modus
"Überlagern" stehen.
Im Anschluss wird die Ebene "Licht 1" weichgezeichnet.
> Filter - Weichzeichnungsfilter - Gaußscher Weichzeichner> mit folgender Einstellung:
Radius: 20,0 Pixel.
Reflektion an der Oberfläche
7. Schritt:
Neue Ebene erstellen und "Reflektion" benennen.
Mit "STRG+Rechtsklick" die Auswahl von Ebene "Grundform" aufrufen.
Auswahl reduzieren: Nehme das Auswahlrechteck-Werkzeug und mit gehaltener "ALT-TASTE" den unteren Bereich entfernen. Fläche weiß füllen.
8. Schritt:
Jetzt mit "STRG+T" die Auswahl transformieren.
Die Auswahl mit einem "Linearen Verlauf" füllen. Fb.: 505050 F4F4F4.
Den Ebenenmodus in der Ebenenpalette auf "Negativ multiplizieren" stellen.
9. Schritt:
Danach > Filter - Weichzeichnungsfilter - Gaußscher Weichzeichner> mit der Einstellung:
Radius: 0,5 anwenden.
Weitere Lichteffekte
10. Schritt:
Ebene "Grundform" dublizieren und "Schatten" bennen.
> Filter - Weichzeichnungsfilter - Gaßscher Weichzeichner> mit der Einstellung:
Radius: 12,0 anwenden.
Die Ebene "Schatten" ein wenig nach unten ziehen (Cursor-Taste 1-2 x nach unten). Auf Ebene "Schatten" klicken und Ebene "Grundform" mit Klick auf Ebene auswählen. Ausgewählten Bereich löschen.
11. Schritt:
Ebene "Licht 1" dublizieren und in "Licht 2" benennen. Ebene "Licht 1" ausblenden. Ebene "Licht 2" auswählen und transformieren.
Auf Ebene "Licht 2" bleiben und Ebene "Grundform" auswählen, dort
> Filter - Weichzeichnungsfilter - Gaßscher Weichzeichner> mit der Einstellung:
Radius: 10,0 anwenden.
12. Schritt:
Neue Ebene über der Hintergrundebene erstellen - Ebene weiß füllen.
> Filter - Zeichenfilter - Rasterungseffekt < mit folgender Einstellung:
Größe: 1
Kontrast: 30
Musterart: Linie
Deckkraft der Ebene auf 8% reduzieren und anschließend mit darunterliegende Ebene reduzieren.
13. Schritt:
Auf Ebene "Licht 2" klicken und den Ebenenmodus auf:
"Farbig abwedeln" und Deckkraft auf 50% stellen.
14. Schritt:
Auf Ebene "Licht 1" klicken und den Ebenenmodus auf:
"Farbig abwedeln" und Deckkraft auf 35% stellen.
15. Schritt:
Zum Schluss kannst du deinen Text unter die Ebene "Reflektion" anlegen.
Viel Spaß beim Nachbauen
MFG Tris
Passend zum Inhalt empfehlen wir:
Photoshop-Workshop-DVD - Webdesign Vol. 2
Leider die Kommentare erst nach dem Laden des Tutorials gesehen, hätte mir 10 Punkte erspart. Denn das Tutorial ist leider wirklich unbrauchbar und nicht nachzumachen. Schade, dass auch nach so vielen Hinweisen auf Fehler das Tutorial nicht überarbeitet wird.
Bin Anfänger und habe Probleme mit Schritt 4: Danach STRG+Rechtsklick auf Licht 1..... Funktioniert bei mir so nicht. Wenn ich dann lösche, dann lösche ich die ganze Ebene!!! Ich sitze seit Stunden an diesem Schritt..... Aufgeben will ich nicht..... meckern, dass es zu schwer ist auch nicht.... deshalb frage ich um Hilfe... :-)
Sehr interessantes Tutorial
interessante methode einen button zu erstellen. ein hoch auf den weichzeichner :-) werde ich bestimmt mal verwenden. danke.
ich bin noch absolute Anfängerin, habe aber einen guten Lehrmeister. Deshalb war mir vieles Verständlich, bei manchen Fragen musste ich dann aber doch fragen. Vielen Dank
Bin auch gescheitert mit CS5. Trotzdem Danke an den Ersteller!
Zimlich schwer bin schon zimlich früh gescheitert trotzdem Danke
Komm nicht klar damit !
Komme nicht ganz draus .. beim 3.Schritt komme ich nicht weiter.
Naja, vlt liegts dran dass ich CS4 habe
Sehr schlecht umzusetzen. Eventuell wäre eine psd-Datei hilfreich...
ich fand es nicht ganz so gut nachvollziehbar.
nicht wirklich hilfreich, da im pdf die bilder fehlen...
Für mich als Anfänger ist es nicht ganz so einfach, das alles zu verstehen, aber Übung macht...
Klingt gut, werd ich mal ausprobieren, danke schön
Schlechtes TUT. Kaum nachvollziehbar und mit CS4 so gut wie kaum umzusetzen.
Leider nicht wirklich gut umsetzbar, schade (Oder liegts an CS4?)
Werds mal ausprobieren, ist aber genau das was ich suche zur zeit!
Vielen Dank!
Recht gutes Tutorial, manchmal aber schwer zu verstehen und manche Sachen funktionieren bei CS4 leider nicht so, wie es sollte.
Hatte gehofft durch das Tut endlich zu verstehen wie man runde Ecken bei den Formen machen kann. Leider hat es in der Hinsicht keineswegs geholfen. Weiß nun immer noch nicht wie das geht. Hier wurde nur mit dem abgerundeten-Rechteck-Werkzeug gearbeitet, was an sich sehr einfach ist. Schöne Buttons, aber für mich unbrauchbar.
Mehr anzeigen