Classic-Stil
Glas-Stil
Chrom-Stil

 

Buttons mit dem Picture Publisher

Die Glas-Pille

Ich geb 's zu: Mir persönlich gefällt das Aqua-Design von Apple ausgesprochen gut. Und die Glaspille aus diesem ist für jeden Designer eine echte Herausforderung. Viele meinen, dass man diesen »berühmt berüchtigte« Glasbutton nur mit Adobe Photoshop herstellen kann.

Ich zeige nachfolgend, wie man auch mit dem Picture Publisher zu einer ansehnlichen Glaspille kommt. Warnung: Einsteiger könnten etwas überfordert sein.

Wir erstellen ein neues Bild mit Größe 600 mal 400 Pixel und Hintergrundfarbe Weiß. Dann wählen wir das Werkzeug Rechteck- / Ellipsenmaske, stellen dort den Modus »Feste Größe;«, als Maßeinheit »Pixel«, Breite 350 und Höhe 120 ein. Mit dieser Einstellung pflanzen wir eine Rechteckmaske auf die Arbeitsfläche.

So sieht es bis jetzt aus

Nun machen wir uns an die Pillenform. Das ist ganz, ganz einfach. Wir wählen Maske → Glätten und stellen einen Wert von 50 ein. Nach klick auf OK ist die Pille schon fast da. Wir gehen nochmal in das Glättenmenü uns stellen diesmal einen Wert von 20 ein. Nach Klick auf OK ist die Pillenform perfekt.

Klicken, um den aktuellen Objektmanager zu sehen ... Dann wählen wir Objekt → Objekt von Maske erstellen und duplizieren diese weiße Pille sieben (7!) mal.

So sieht es bis jetzt aus

Ich nummeriere die einzelnen Schichten der Anschaulichkeit wegen im Objekt-Manager durch, ganz unten liegt »Schicht 1« und ist markiert. Wir machen alle über dieser liegenden Objekte-Ebenen (Schicht 2 - 8) unsichtbar durch Klick auf das jeweilige Äuglein im Objekt-Manager.

Klicken, um den aktuellen Objektmanager zu sehen ... Dann füllen wir »Schicht 1« einfarbig mit dem Blauton R:60, G:110 und B:160.

So sieht es bis jetzt aus

Die blaue Pille bleibt markiert und wir wählen Maske → Maske von Objekt erstellen.

Wir wählen das Werkzeug Maske umformen (Vorsicht: Nicht verwechseln mit dem Umformen-Werkzeug) und stellen die Methode auf »Maske verschieben«. Dann ziehen wir ein Auswahlrechteck um die Pille. Damit haben wir die Pillenmaske selbst markiert und können diese nun über die Anfasser skalieren. Wir verkleinern sie ca. auf die Hälfte der Höhe und vier Fünftel der Breite. Dabei ziehen wir am oberen mittleren Anfasser und an den seitlichen mittleren Anfassern, so dass die neue Maske am unteren Pillenrand zentriert liegen wird. So sollte die kleinere Maske dann ungefähr aussehen ...

So sieht es bis jetzt aus

Wir wechseln in den Maskenkanal und sehen die kleine Pille weiß auf Schwarz vor uns. Nun stellen wir im Effektfilter »Gaußsches Verwischen« mit Intensität 20, »Fast« aktiviert ein. Wir bleiben im Maskenkanal und wählen Umformen → Invertieren. Damit liegt nun eine kleine schwarze verwischte Pille vor uns.

So sieht es bis jetzt aus

Wir verlassen den Maskenkanal, die blaue Pille (Schicht 1) ist immer noch markiert. Nun wählen wir Objekt → Mit Maske mischen. Damit ist »Schicht 1« fertig.

So sieht es bis jetzt aus

Klicken, um den aktuellen Objektmanager zu sehen ... Wir entfernen zunächst die Maske und klicken dann im Objekt-Manager auf Schicht 2.

Diese füllen wir einfarbig mit einem Hellblau (R:31, G:223, B:255). Anschließend klicken wir auf das Bearbeiten-Werkzeug und stellen den Modus dieser Objekt-Schicht auf »Multiplizieren«. Damit ist auch »Schicht 2« fertig.

So sieht es bis jetzt aus

Klicken, um den aktuellen Objektmanager zu sehen ... Wir klicken auf »Schicht 3« und wählen wieder Maske von Objekt erstellen.

Dann gehen wir in den Maskenkanal und stellen diesmal einen Gaußschen Verwischer mit dem Wert 10, »Fast aktiviert« ein. Anschließend wählen wir wieder Umformen → Invertieren und verlassen den Maskenkanal. Zurück in »Schicht 3« füllen wir diese nun mit Schwarz und stellen den Modus dieser Objektebene auf »Multiplizieren«. »Schicht 3« ist abgeschlossen.

So sieht es bis jetzt aus

Klicken, um den aktuellen Objektmanager zu sehen ... Wir klicken auf »Schicht 4« und ziehen diese vertikal ein Stück nach unten (siehe Abbildung).

So sieht es bis jetzt aus

Aus der verschobenen Pille machen wir eine Maske (Maske → Maske von Objekt erstellen). Anschließend löschen wir »Schicht 4« und wechseln in den Maskenkanal. Dort wenden wir erneut den Gaußschen Verwischer an, diesmal mit Stärke 17, »Fast« aktiviert. Dann klicken wir wieder auf Umformen → Invertieren um die Maske zu invertieren und verlassen den Maskenkanal.

Klicken, um den aktuellen Objektmanager zu sehen ... Zurück im normalen Bildmodus markieren wir »Schicht 5« und füllen diese einfarbig mit Schwarz.

So sieht es bis jetzt aus

Wir entfernen die Maske und stellen den Mischmodus von »Schicht 5« auf »Multiplizieren« und dazu eine Transparenz von 30 % ein. Diese Schicht wäre damit auch abgeschlossen.

So sieht es bis jetzt aus

Wir markieren »Schicht 1« und machen aus diesem Objekt eine Maske. Diese Maske invertieren wir: Maske → Invertieren.

Klicken, um den aktuellen Objektmanager zu sehen ... Dann klicken wir auf »Schicht 6« und wählen Objekt → Mit Maske mischen. So sollte das dann in etwa aussehen.

So sieht es bis jetzt aus

Wir entfernen die Maske und verlagern Schicht 6 nun ganz nach unten in der Objekt-Hierarchie, also noch unter Schicht 1. Auf dem schnellen Weg geht dies, indem Ihr die Umschalttaste gedrückt haltet und dann im Objekt-Manager die Taste »Ebene nach hinten« drückt. Danach sollte Die Ebenen-Reihenfolge so lauten: Schicht 6, 1, 2, 3, 5, 7 und 8. Schicht 4 ist nicht mit von der Partie, die haben wir weiter oben bereits gelöscht. Bei dieser ganz unteren Schicht stellen wir nun den Mischmodus auf »Falls heller« und die Transparenz auf 50 Prozent.

Klicken, um den aktuellen Objektmanager zu sehen ... Jetzt geht 's ans Glanzlicht. Wir klicken auf »Schicht 7«, wählen das Rechteck-Maskenwerkzeug> und ziehen eine Rechteckige Maske auf, die links über der Pille beginnt und ein Drittel der Höhe der Pille einschließt. Dann wählen wir Objekt → Mit Maske mischen.

So sieht es bis jetzt aus

Wir entfernen die Maske und skalieren die Viertel-Pille über das Umformen-Werkzeug, indem wir den oberen mittleren Anfasser ca. 5 Pixel nach unten ziehen und beide seitlichen Anfasser ca. ein Zwölftel der Pillenbreite nach innen, nach links bzw. nach rechts.

So sieht es bis jetzt aus

Wir machen aus diesem Objekt eine Maske und wechseln in den Maskenkanal. Dort wenden wir den Gaußschen Verwischer mit Stärke 17 an, »Fast« aktiviert. Dann rufen wir das Menü Bild → Vierteltöne auf. Wir schieben die »Schatten«-, »Mittelton«- und »Licht«-Regler leicht links von der Mitte versetzt ganz eng aneinander. Also zuerst den S-Regler auf einen Wert von ca. 140 und dann den L-Regler auf einen Wert von ca. 150. Die Kanten müssten danach nicht mehr verschwommen, sondern scharf sein.

Vor der Viertelton-Korrektur
Unser Glanzlicht vor der Viertelton-Korrektur.

Nach der Viertelton-Korrektur
Unser Glanzlicht nach der Viertelton-Korrektur.

Wir verlassen den Maskenkanal. Schicht 7 müsste noch aktiviert sein. Wir wählen Objekt → Mit Maske mischen. Und nun nicht vergessen, die Maske wieder zu entfernen.

So sieht es bis jetzt aus

Wir ziehen nun mit dem Verlaufswerkzeug in Schicht 7 einen vertikalen Verlauf von Weiß ins Schwarz auf. Dieser beginnt ein wenig unterhalb der Objekt-Oberkante und endet ein wenig unterhalb der Objekt-Unterkante. Anschließend stellen wir den Mischmodus dieses Objekts auf »Bildschirm«.

So sieht es bis jetzt aus

Klicken, um den aktuellen Objektmanager zu sehen ... Nun klicken wir auf »Schicht 8« und machen aus dieser eine Maske. Wir stellen diese Schicht danach wieder unsichtbar und skalieren die Maske mit dem Masken-Umform-Werkzeug ein wenig gleichmäßig in der Breite, so ca. um 10 Pixel an jeder Seite.

So sieht es bis jetzt aus

Die nachfolgende Prozedur ist inzwischen vertraut. Wir wechseln in den Maskenkanal, stellen einen Gaußschen Verwischer mit der Stärke 15, »Fast« aktiviert ein und klicken danach auf Umformen → Invertieren. Dann verlassen wir den Maskenkanal, machen »Schicht 8« wieder sichtbar und wählen Objekt → Mit Maske mischen. Wir entfernen die Maske und füllen dieses Objekt mit Weiß. Anschließend stellen wir deren Transparenz auf 20 Prozent.

So sieht es bis jetzt aus

Damit hätten wir unsere Glas-Pille fast fertig. Nun brauchen wir noch einen adäquaten Schatten und eine Beschriftung. Wir beginnen mit dem Schatten und markieren dazu alle Schichten zugleich (Bearbeiten → Alles markieren) und gruppieren diese über den Knopf links unten im Objekt-Manager. Dann wählen wir Bearbeiten → Duplizieren und gleich darauf Einbinden → Gewählte Objekte. Nun gehen wir direkt wieder auf Bearbeiten → Duplizieren, wodurch ein neues Objekt entsteht, dieses benennen wir mit »Schatten« und schieben es ganz nach unten in der Objekt-Hierarchie.

Wir füllen das Basisbild mit Weiß. Dann verschieben wir die Schattenebene ca. die Hälfte vertikal nach unten und wählen dann den Gaußschen Verwischer zweimal nacheinander mit einer Stärke von 15, einmal mit und einmal ohne »Fast«. Danach stellen wir den Mischmodus des Schattens auf »Multiplizieren«.

So sieht es bis jetzt aus

Für die Beschriftung des Buttons könnt Ihr nun einen beliebigen Text eingeben. Stellt diesen dann unter den Lichtreflex (Schicht 7) und gebt ihm einen Schlagschatten, z.B.über Objekt → Schlagschatten.... Und – trara – unsere Glaspille ist fertig.

So sieht es bis jetzt aus

So, das war eine ganz schöne Arbeit, aber sie hat sich denke ich gelohnt. Denn so, wie ich den Button hier aufgebaut habe, ist er tatsächlich aus Glas. Um dies zu erkennen, füllt nun das Basisbild mit einer beliebigen Struktur ...

Button ist durchsichtig Button ist durchsichtig
Button ist durchsichtig Button ist durchsichtig


Außerdem kann die Farbe des Buttons nach Belieben verändert werden. Dazu müssen alle Ebenen (Bearbeiten → Alles markieren) markiert werden. Dann wechselt man in das Menü »Farbton / Sättigung« und zieht hier an den 180er- und 216ern Blaureglern. Einfach herumexperimentieren ...

Farbige Variante Farbige Variante
Farbige Variante Farbige Variante