Anzeige
Tutorialbeschreibung

Button: Aquabutton

Button: Aquabutton

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.

Bilder

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.

Bilder

Dann auf > Auswahl - Auswahl transformieren <
Die Auswahl auf die hier abgebildeten Form bringen und weiß füllen.

Bilder

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.

Bilder


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

Bilder

Die Ebene "Rand" in der Ebenenpalette auf Modus "Multiplizieren" stellen.

Bilder


Inneres Licht

6. Schritt:

Doppelklicke auf Ebene "Licht 1" es soll in der Ebenenpallette auf Modus
"Überlagern" stehen.

Bilder

Im Anschluss wird die Ebene "Licht 1" weichgezeichnet.
> Filter - Weichzeichnungsfilter - Gaußscher Weichzeichner> mit folgender Einstellung:
Radius: 20,0 Pixel.

Bilder


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.

Bilder


8. Schritt:

Jetzt mit "STRG+T" die Auswahl transformieren.
Die Auswahl mit einem "Linearen Verlauf" füllen. Fb.: 505050 F4F4F4.

Bilder

Den Ebenenmodus in der Ebenenpalette auf "Negativ multiplizieren" stellen.

Bilder


9. Schritt:

Danach > Filter - Weichzeichnungsfilter - Gaußscher Weichzeichner> mit der Einstellung:
Radius: 0,5 anwenden.

Bilder


Weitere Lichteffekte

10. Schritt:
     
Ebene "Grundform" dublizieren und "Schatten" bennen.
> Filter - Weichzeichnungsfilter - Gaßscher Weichzeichner> mit der Einstellung:
Radius: 12,0 anwenden.

Bilder

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.

Bilder

Auf Ebene "Licht 2" bleiben und Ebene "Grundform" auswählen, dort
> Filter - Weichzeichnungsfilter - Gaßscher Weichzeichner> mit der Einstellung:
Radius: 10,0 anwenden.

Bilder

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.

Bilder

    
13. Schritt:

Auf Ebene "Licht 2" klicken und den Ebenenmodus auf:
"Farbig abwedeln" und Deckkraft auf 50% stellen.

Bilder

14. Schritt:

Auf Ebene "Licht 1" klicken und den Ebenenmodus auf:
"Farbig abwedeln" und Deckkraft auf 35% stellen.

Bilder

15. Schritt:

Zum Schluss kannst du deinen Text unter die Ebene "Reflektion" anlegen.

Bilder

    
Viel Spaß beim Nachbauen  


MFG Tris


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Umbrella78
  • 27.11.2014 - 01:48

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.

Portrait von MJ7
MJ7
  • 22.02.2012 - 18:51

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... :-)

Portrait von Kloppy
  • 09.01.2011 - 21:42

Sehr interessantes Tutorial

Portrait von mosycs
  • 19.10.2010 - 20:49

interessante methode einen button zu erstellen. ein hoch auf den weichzeichner :-) werde ich bestimmt mal verwenden. danke.

Portrait von barcla68
  • 10.08.2010 - 14:58

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

Portrait von Xander77
  • 29.07.2010 - 11:22

Bin auch gescheitert mit CS5. Trotzdem Danke an den Ersteller!

Portrait von brucewillis007
  • 12.07.2010 - 19:59

Zimlich schwer bin schon zimlich früh gescheitert trotzdem Danke

Portrait von praios3000
  • 18.06.2010 - 20:47

Komm nicht klar damit !

Portrait von Sirenia123
  • 20.04.2010 - 23:01

Komme nicht ganz draus .. beim 3.Schritt komme ich nicht weiter.
Naja, vlt liegts dran dass ich CS4 habe

Portrait von Sonnenblume77
  • 29.04.2010 - 10:01

geht mir ganz genauso, ich kann einfach nicht folgen! Schade...

Portrait von HFFotodesign
  • 01.04.2010 - 23:09

Sehr schlecht umzusetzen. Eventuell wäre eine psd-Datei hilfreich...

Portrait von pueppie25
  • 23.03.2010 - 20:46

ich fand es nicht ganz so gut nachvollziehbar.

Portrait von andyfrommel
  • 21.03.2010 - 08:10

nicht wirklich hilfreich, da im pdf die bilder fehlen...

Portrait von hyckt
  • 15.03.2010 - 20:27

Für mich als Anfänger ist es nicht ganz so einfach, das alles zu verstehen, aber Übung macht...

Portrait von edvfuzzy
  • 12.02.2010 - 17:28

Klingt gut, werd ich mal ausprobieren, danke schön

Portrait von sno0z
  • 12.02.2010 - 16:34

Schlechtes TUT. Kaum nachvollziehbar und mit CS4 so gut wie kaum umzusetzen.

Portrait von diemotte
  • 17.01.2010 - 13:05

Leider nicht wirklich gut umsetzbar, schade (Oder liegts an CS4?)

Portrait von Zork
  • 13.01.2010 - 09:24

Werds mal ausprobieren, ist aber genau das was ich suche zur zeit!

Vielen Dank!

Portrait von Mary_EK
  • 10.01.2010 - 12:24

Recht gutes Tutorial, manchmal aber schwer zu verstehen und manche Sachen funktionieren bei CS4 leider nicht so, wie es sollte.

Portrait von Syhto
  • 05.01.2010 - 20:03

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.

x
×
×