Button in die Ebene drücken

[Firefall]

Habe mir gerade einen Button in Photoshop gezeichnet, nur etwas habe ich vergessen: Wenn ich den klicke, dann soll er halt auch wirklich gedrückt aussehen :) Kann mir jemand erklären, wie ich das hinkriege? Habe das PSD angehängt (Mit CS3 erstellt).

[claW]

mach doch den schatten ein wenig größer und spiel mit den farben ein wenig rum. du kannst ihn ja entweder ausgrauen, mehr ins schwarz gehen, heller machen oder ins lila hineingehend. spiel am besten so rum wie du willst.

kleiner tip am rande:

anstatt 100 filter zu verwenden, verwende lieber mehrere ebenen und gruppiere diese. wenn du dann etwas einzelnes anpassen willst (z.b. willst du ne kleine verschnörkelung oben am button haben), nimmst du einfach die ebene die den oberen teil betrifft und änderst diesen einzeln. wenn du nämlich immer mit einer form arbeitest und darauf filter anwendest, wird es bei größeren sachen schwieriger.

aber übung macht den meister ;)

edit: anhang vergessen... halt den schatten ein wenig vergrößert und die farbe ein bisschen abgeschwächt

[Firefall]

Danke für deine Tips ;)
Deine Version ist schonmal ein Ansatz, aber ich will den Effekt viel stärker, der Button soll sich wirklich so nach innen "gebogen" werden, etwa so wie die ToggleButtons aus z.B. VB, wenn du die kennst ;) Habe auch schon etwas herumexperimentiert aber das wird immer nur so ganz schwach.

[claW]

sagt mir jetzt nichts... beispiel?

[Firefall]

sagt mir jetzt nichts... beispiel?
Finde gerade den richtigen nicht, aber so in die Richtung: http://www.pygtk.org/pygtktutorial/togglebutton-6.2.jpg (Der Rand ist aber dort zu "hart" ;))
EDIT: Oder sowas. Hier werden natürlich die Farben stark verändert, das möchte ich nicht. Aber es illustriert das hineindrücken etwas besser :) http://www.prof-uis.com/img/elegantribbon/tour/toggle-button-on-form.png

[claW]

am einfachsten machst du dir solche buttons indem du alle farbwerte einfach kopierst und einen farbverlauf dementsprechend erstellst, dann 2 - 3 feinheiten hineinbasteln (stroke + inner glow). ebene duplizieren, neue ebene erstellen und die kopie auf die leere ebene reduzieren (somit verschwinden die unstimmigkeiten wenn du die farben über strg + u änderst). danach ein bisschen mit den farben rumspielen (ich habe image -> adjustments -> shadow/highlight mit den optionen 0% und 1% verwendet, danach image -> adjustments hue/saturation).

es wirkt zwar noch ein wenig grell, aber die farben kannst du ja noch herunter setzen. ;)

[Firefall]

Das sieht aber beim besten Willen überhaupt nicht gedrückt aus, sorry :(

[claW]

ich will dir ja nun nich deine seite bauen... ;) um so einen "gedrückt"-effekt zu erhalten, musst du doch einfach nur ein wenig mit schatten experimentieren wenn du es schnell und einfach magst. schlecht sieht das u.a. auch nicht aus.

im anhang befinden sich mal 2 buttons mit schatten.

ich weiß ja nicht inwiefern du dieses "gedrückt" siehst - für mich reicht es aus wenn ich einen kleinen visuellen effekt sehe, manche (du?) wollen ja eher einen richtigen tiefeneffekt haben. bei tiefeneffekten würde ich persönlich zu einer weiteren eben greifen, diese schwarz färben und überlagern. frag mich allerdings nicht ob das gut funktioniert/aussieht, es ist mir nur grad spontan in den kopf gekommen. :)

edit:

in der psd im anhang hab ich einfach mal der farbverlauf ein wenig versetzt. vielleicht trifft so etwas eher deine vorstellungen?

[Firefall]

ich will dir ja nun nich deine seite bauen... ;)Natürlich nicht, ich finde es schon sehr nett von dir, dass du dir so viel Mühe gemacht hast! Danke!
um so einen "gedrückt"-effekt zu erhalten, musst du doch einfach nur ein wenig mit schatten experimentieren wenn du es schnell und einfach magst. schlecht sieht das u.a. auch nicht aus.Ja, das habe ich gestern eine Stunde lang getan... Habe auch ein paar Resultate erreicht, die plastisch zufriedenstellend waren, allerdings ergibt sich eine grafische Verschiebung bei der Ellipse, dann sieht es aus, als würde der Button wackeln... Und das ist auch nicht gut. Eine der einfachsten Taktiken wäre wohl den Button vertikal zu spiegeln... Denn das ist es in etwa, was meine Effekte draus machen.
ich weiß ja nicht inwiefern du dieses "gedrückt" siehst - für mich reicht es aus wenn ich einen kleinen visuellen effekt sehe, manche (du?) wollen ja eher einen richtigen tiefeneffekt haben. bei tiefeneffekten würde ich persönlich zu einer weiteren eben greifen, diese schwarz färben und überlagern. frag mich allerdings nicht ob das gut funktioniert/aussieht, es ist mir nur grad spontan in den kopf gekommen. :)

edit:

in der psd im anhang hab ich einfach mal der farbverlauf ein wenig versetzt. vielleicht trifft so etwas eher deine vorstellungen?Ja, ich möchte einen richtigen Tiefeneffekt ;) Der Button entspricht schon eher meinen Vorstellungen, aber immer noch zu schwach.

[Firefall]

Ich bins nochmal ;)
Konnte mir das Archiv erst jetzt ansehen, heute morgen war ich in der Schule an einem Apple "Produkt". Die Buttons dort gefallen mir sehr gut udn entspreched sehr gut meinen Vorstellungen! Jetzt sollte ich die Styles nur noch auf meinen Button anwenden können, denke das gibt Probleme mit den Rundungen, oder? Muss leider in 10 Min schon wieder los, weiss nicht ob ich das heute noch probieren kann. Cool finde ich die Buttons auf jeden Fall, echt geil gemacht! ;)
Habe beim ausprobieren gerade was entdeckt wegen dem Einbau auf Websites: Wenn man draufklickt (Gedrückt halten), dann die Maus rauszieht und loslässt bleibt der Button im gedrückten Zustand (zumindest im IE), was ja auch Sinn macht. Nur wie macht man es richtig? onmouseout könnte man heranziehen, aber dann wenn man rausgeht und wieder reingeht bei gedrückter Maustaste wird er ja nicht wieder gedrückt, und onmousemove geht nicht weil er ja dann auch gedrückt aussehen würde ohne einen Klick. Muss man da einen Boolean ranziehen oder geht das "eleganter"?
EDIT: Das geht nichtmal so, wie ich es beschrieben habe. Offenbar wird mouseout bei gedrückter Maustaste nicht erkannt:
<html>
<head>
<title></title>
<script>
var clk;
</script>
</head>
<body>

<img src="./button_neu_03.png" onmousemove="if(clk){this.src='./button_neu_06.png'}" onmouseout="if(clk){this.src='./button_neu_03.png'}" onmousedown="clk=true;this.src='./button_neu_06.png';" onmouseup="clk=false;this.src='./button_neu_03.png';" />
<br /><br />
<img src="./cbutton_neu_03.png" onmousedown="this.src='./cbutton_neu_06.png';" onmouseup="this.src='./cbutton_neu_03.png';" />

</body>
</html>

[claW]

wenn du solche buttons verwenden willst, würde ich eh auf css ausweichen. javascript ist in meiner ansicht dabei zu umständlich.

ich hab mal die version mit css angehangen, die "klick-klasse" dabei ist :active.

ich hab grad eben noch ein nicht schlechtes tutorial (http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html) gefunden. dort wird am mac-design festgehalten.

[Firefall]

wenn du solche buttons verwenden willst, würde ich eh auf css ausweichen. javascript ist in meiner ansicht dabei zu umständlich.

ich hab mal die version mit css angehangen, die "klick-klasse" dabei ist :active.
Jep ist natürlich auch ne Möglichkeit. Aber weist dieselbe Schwäche auf ;) Und beim durchtabben siehts auch nicht soo toll aus.
ich hab grad eben noch ein nicht schlechtes tutorial (http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html) gefunden. dort wird am mac-design festgehalten.Jep, aber die lösen das Problem auch nicht, zwar etwas eleganter sonst aber noch nicht korrekt ;)

[Firefall]

Ich habe es jetzt wie folgt gemacht: Ich habe den Emboss-Effekt umgekehrt, also Down anstatt Up gewählt. Ausserdem die Opacity für die Highlights auf 0% gesetzt. Jetzt sieht es einigermassen akzeptabel aus, der untere (blaue) Bereich sieht nur ein wenig aus, wie wenn er auf der selben Ebene bleiben würde. Aber damit kann ich vorübergehend leben, ausser wenn noch jemand eine Idee hat. Habe das fertige PSD angehängt. Zum HTML: Alles weist Probleme auf wenn man jeden Fall berücksichtigen will. Ich habe nun die wir mir scheint ideale Lösung gefunden. Der Trick ist, das Bild als Hintergrund einzubinden. Dadurch wird der Drag & Drop-Effekt ausgeschaltet und man kann, wie ursprünglich geplant, mit onmouseout und onmouseover arbeiten. Der fertige Source sieht so aus:
<html>
<head>
<script>
var clk;
</script>
<style>
.Button{
background-image:url('ButtonUp.bmp');
background-repeat:no-repeat;
width:250px;
height:50px;
line-height:50px;
text-align:center;
overflow:hidden;
}
</style>
</head>
<body onmouseup="clk=false">
<div class="Button"
onclick="alert('You clicked me!');"
onmousedown="clk=true;this.style.backgroundImage='url(ButtonDown.bmp)';"
onmouseup="clk=false;this.style.backgroundImage='url(ButtonUp.bmp)';"
onmouseout="this.style.backgroundImage='url(ButtonUp.bmp)';"
onmouseover="if(clk){this.style.backgroundImage='url(ButtonDown.bmp)'}"
>Button</div>
</body>
</html>
Die Button-Beschriftung habe ich auch schön hingekriegt, habe bei einem Source im Web gesehen, dass man line-height für die vertikale Zentrierung heranziehen kann :) Wusste ich nicht.
Der Source ist im IE 7 getestet und funktioniert perfekt.
EDIT: Hier eine Allgemeinlösung für mehrere Buttons: http://www.coding-board.de/board/showthread.php?t=26214