Die Anziehungskraft von Aqua Buttons


Geschrieben am Donnerstag, 11. Oktober 2007 von Henning Franke

aqua.jpg

Die so genannten “Aqua Buttons” üben im Webdesign eine besondere Anziehungskraft aus. Es kursieren im Internet viele Tutorials, wie diese Button zu gestalten sind. Oft sind diese aber viel zu kompliziert und umständlich erklärt und die Ergebnisse variieren sehr stark. Deshalb stelle ich hier eine ganz einfache Variante vor – kurz und knapp erklärt, ohne viel drumherum und zum späteren Nachschlagen:

12.jpg

Wir fangen mit einem einfachen blauen Verlauf an (Himmelblau -> Dunkelblau)

21.jpg

31.jpg

Als nächstes die Ebenenoptionen- / Effekte so einstellen, dass wir einen leichten dunkelblauen “Schein nach innen” haben. Zusätzlich (Bild 2) einen “Schein nach außen” anwenden um den Button vom Hintergrund optisch abzuheben.

41.jpg

Die Deckkraft der Verlaufsebene etwas runtersetzen, auf ca. 80%. Die Ebenentransparenz selektieren und anschließend die Auswahl verkleinern. Einen weiteren Verlauf (auf einer neuen Ebene, Weiß -> Transparent) von unten zur Mitte ziehen. Die neue Ebene auf “Überlagern” stellen.

51.jpg

Das gleiche Spiel noch einmal für den oberen Teil, wieder auf einer neuen Ebene. Den Verlauf diesmal bis fast nach unten ziehen (etwas 3/4 des Buttons) und anschließend den unteren Teil des Verlaufs (bis zur Mitte des Buttons) entfernen um eine scharfe Kante zu erhalten.

6.jpg

Wahlweise oben und unten noch ca. 2-3px Breite Linien einfügen.

Wie unschwer zu erkennen ist, besteht solch ein Aqua Button aus nicht viel mehr als ein paar Verläufen und ein wenig Schatten. Fast alles lässt sich mit Ebeneneffekten einstellen und nichts muss wirklich “per Hand” gemacht werden. Und obwohl es mittlerweile sehr, sehr viele Dinge in diesem Stil gibt – schlecht sehen sie trotzdem noch nicht aus.

Wer möchte, kann sich hier die .PSD Datei herunterladen.

Verwandte Artikel:
1 TRACKBACK(S)
zum Beitrag “ Die Anziehungskraft von Aqua Buttons”
Frischer Wind f?rs Webdesign - Creative Lounge @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe
Am 25. Februar 2009 um 11:26 Uhr

[...] zB HIER ), das 3Spaltendesign ( zB HIER ) oder das vom Browserrahmen gel?ste Design ( zB HIER oder Hier ). Die sofort erkennbaren CMS-Template-Designs (Yoomla und Co.) und auch die OS-angelehnten [...]