FOTO Blog Grundlagen Workshop: Aqua-Button

Weitere Artikel aus dem Foto Blog

Fotografie - Navigationskonzepte umsetzten - Buttons

Workshop: Aqua-Button

Der sogenannte Aqua-Button ist einer der populärsten Buttons im Interface- und Webdesign. Bekannt wurde er unter anderem
durch die Darstellung von Schaltflächen und Scrollbalken im Apple-Betriebssystem Mac OS X. Der Aqua-Button wirkt sehr plastisch und extrem gewölbt. Ein starker Glanz an der Oberfläche und ein Glühen im Inneren lassen ihn glasig und leicht transparent wirken. Im folgenden Workshop lernen Sie, einen solchen Button zu erstellen.

Formebene und Ebenenstile

Wählen Sie das Abgerundetes-Rechteck-Werkzeug [U]. In der Optionsleiste aktivieren Sie Formebenen, um eine gefüllte
Pfadform zu erstellen. Der Radius für die abgerundeten Ecken lässt sich ebenfalls in der Optionsleiste einstellen und sollte 25 Pixel betragen. Erstellen Sie nun mit dem Abgerundete-Ecken-Werkzeug [U] ein Rechteck mit den Abmessungen 100 x 30 Pixel. Die Abmessungen können Sie im Info-Bedienfeld kontrollieren. Wählen Sie Ebene/Ebenenstil/Fülloptionen, um das Dialogfeld Ebenenstil zu öffnen. Dort müssen nun diverse Einstellungen vorgenommen werden.

Verlaufsüberlagerung

Erstellen Sie umfangreiche Verläufe mit einer Verlaufsüberlagerung. Wählen Sie den Abschnitt Verlaufsüberlagerung und legen als Verlaufstyp Linear mit einem Winkel von 90° fest.
Aktivieren Sie das Kontrollfeld An Ebene ausrichten. Die Regler Deckkraft und Skalieren stellen Sie auf 100 %. Die Füllmethode belassen Sie auf Normal. Nun klicken Sie auf den Verlauf in der Mitte des Dialogs. Es öffnet sich das Dialogfeld Verläufe bearbeiten, in dem Ihnen weitere Bearbeitungsmöglich keiten zur Verfügung stehen.

Die Farb- bzw..Deckkraftunterbrechungsmarkierungen oberhalb und unterhalb des Verlaufs lassen sich verschieben. Die oberen geben Ihnen Auskunft über die Deckkraft der Farbe, die unteren definieren den Farbton selbst.

Erstellen Sie umfangreiche Verläufe mit einer Verlaufsüberlagerung Wenn Sie eine neue Farbe zum Verlauf hinzufügen möchten, klicken Sie einfach an die entsprechende Stelle direkt unterhalb der Verlaufsanzeige. Ein Handcursor zeigt Ihnen an, wenn Sie die richtige Position erreicht haben. Möchten Sie eine Farbe wieder aus dem Verlauf entfernen, klicken Sie die Markierung an und ziehen diese nach unten weg. Die Farbe wird aus dem Verlauf entfernt. Indem Sie die Markierungen nach rechts oder links verschieben, können Sie die Position innerhalb des Verlaufs ändern. Ebenso können Sie numerische Werte vergeben.

Übernehmen Sie die Werte und Farbpositionen aus der Abbildung. Farbwerte vergeben Sie, indem Sie die Markierung für
eine Farbunterbrechung anklicken und anschließend im unteren Fenster einen Farbwert vergeben. In diesem Workshop wurden folgende Farben bei einer jeweiligen Deckkraft von 100 % vergeben

Bestätigen Sie die Angaben mit "OK".

Schatten nach innen

Schatten nach innen im Dialogfeld Ebenenstil einstellen. Als Nächstes wählen Sie links im Dialogfeld Ebenenstil den Stil Schatten nach innen. Hier übernehmen Sie erneut die Werte aus der Abbildung. Als Farbe für den Schatten verwenden Sie ein mittleres Blau #005278. Dadurch, dass der Schatten einen Abstand von 0 hat, wirkt er sich auf alle Außenkanten einer Form gleich aus. Somit können Sie über einen nach innen gekehrten Schatten plastische Objekte simulieren.

Ganzen Artikel lesen...

Schlagschatten

Schatten nach innen im Dialogfeld Ebenenstil einstellen. Um den Button ein wenig vom Untergrund zu lösen, sollten Sie noch einen Schlagschatten anwenden. Wählen Sie
den entsprechenden Eintrag und vergeben Sie einen Schlagschatten mit einer Deckkraft von 35 %, einem Winkel von 90°, einem Abstand von 2 Px und einer Größe von 4 Px. Die Option Überfüllen stellen Sie auf 0 %. Sie können natürlich auch individuelle Einstellungen vornehmen, achten Sie aber dabei auf den Winkel von 90°, um von oben einfallendes Licht zu simulieren, und auf einen nicht zu weit entfernten Schatten. Bei zu hohen Werten beginnt der Button zu schweben und verliert an Qualität. Zu dunkle Schatten wirken in der Regel auch wenig realistisch oder hochwertig,

Kontur

Transformieren Sie Ihre weiße Formebene so, dass oberhalb, rechts und links der weißen Ebene jeweils ein Pixel frei bleibt. Im letzten Arbeitsschritt innerhalb des Dialogs Ebenenstil geben Sie dem Aqua- Button eine Kontur. Stellen Sie die Position nach Innen und die Größe auf 1 Px. Bei einer Deckkraft von 100 % verwenden Sie ein mittleres Blau #4792d1. Sinn der Kontur ist es, den Rand des Buttons leicht zu betonen, ohne dass er eingerahmt wirkt. Durch die Kontrasterhöhung wirken die Außenkonturen schärfer.
Wenden Sie alle Ebenenstile nun über einen Klick auf OK auf Ihre Formebene an.

Glanz oben

Aqua-Button Wählen Sie Weiß als Vordergrundfarbe und anschließend erneut das Abgerundetes- Rechteck-Werkzeug [U]. Ziehen Sie eine neue Formebene mit den identischen Abmessungen der ersten Formebene auf. Anschließend wählen Sie in der Optionsleiste bei Art die Option Standardstil (leer) aus, um eventuell ungewollt angewandte Fülloptionen zu deaktivieren. Mit dem Verschieben-Werkzeug [V] positionieren Sie die weiße Formebene direkt über der Button-Ebene.
Wählen Sie nun Bearbeiten/Pfad frei transformieren und skalieren Sie die Form über die Anfasser des eingeblendeten Transformationsrahmens entsprechend der Abbildung. Wichtig ist hierbei, dass oben und an den Seiten eine Pixelkontur sichtbar wird. Mit einem Klick auf den Haken [Enter] in der Optionsleiste bestätigen Sie die Transformation.

Nun fügen Sie mit einem Klick auf das entsprechende Icon im Fuß Ihrer Ebenen- Palette eine Ebenenmaske hinzu. Aktivieren Sie daraufhin das Verlaufswerkzeug [G] und drücken Sie die Taste [D] auf Ihrer Tastatur. Sie haben somit Schwarz und Weiß als Vorder- und Hintergrundfarbe definiert. In der Optionsleiste stellen Sie nun noch einen linearen Farbverlauf von Vorder- zu Hintergrundfarbe ein. Ziehen Sie einen Verlauf vom oberen Ende Ihrer weißen, transformierten
Formebene bis etwa ein Drittel über das untere Ende hinaus auf. Sie haben nun den oberen Glanz auf dem Button gestaltet. Wichtig dabei ist, dass der Glanz nach unten hin sichtbar abnimmt, jedoch nicht gänzlich verschwindet.

Spiegelung unten

Wenn der Button wirken soll, als wäre er aus Glas, muss sich auch der Untergrund im Button spiegeln. Hierzu kopieren Sie zunächst die soeben erstellte Formebene samt Verlauf über Ebene/Ebene kopieren - [Cmd/Strg]+[J]. Verschieben Sie die Ebene mit dem Verschieben-Werkzeug [V] ans untere Ende des Buttons.

Jetzt passen Sie den bereits hinzugefügten Verlauf an. Klicken Sie das Symbol der Ebenenmaske in der Ebenen-Palette an und wählen Sie anschließend das Verlaufswerkzeug [G].
Ziehen Sie einen Verlauf vom unteren Ende des Buttons um etwa ein Drittel nach oben. Halten Sie beim Ziehen die [Umschalt]-Taste gedrückt, um einen geraden Verlauf zu erzeugen. Reduzieren Sie anschließend die Deckkraft der Ebene auf ca. 80 %.

Text hinzufügen

Aqua-Button Wählen Sie das Textwerkzeug [T] und schreiben Sie eine Beschriftung für den Button. Über das Zeichen-Bedienfeld wählen Sie als Schrift Arial Regular in einer Größe von 13 Px und in einem dunklen Blau #05405f. Positionieren Sie nun die Textebene in der Ebenen-Palette unterhalb Ihrer beiden Formebenen mit Verlauf.

So befindet sich der Verlauf über der Schrift, wodurch die Wirkung entsteht, der Text befände sich unterhalb der spiegelnden Oberfl äche des Buttons.

Im letzten Arbeitsschritt fügen Sie Ihrer Textebene über Ebene/Ebenenstil/Schein nach außen einen Schein hinzu. Stellen Sie die Deckkraft auf 100 % und als Farbe Weiß ein.

Die passende Ergänzung zu diesem Artikel: