Wonderbrush - Erstellen eines ButtonsUnser Ziel: Verwendete Wonderbrush Version: 1.7.2 / Zeta R1 Der Eine oder Andere wird die englische Anleitung schon kennen. Da diese nicht für jeden so einfach zu verstehen ist, gerade wenn man das Programm noch nicht lange benutzt oder kaum Englisch versteht, hier nun eine deutsche Version. Dieses Tutorial zeigt den Gebrauch von mehreren Ebenen, die eine Art Filterkette formen, um das Bild eines Knopfes zu erzeugen. Filterkette bedeutet, dass die Bilddaten von einer zur nächsten Ebene immer weiter verändert werden, bis der fertige Knopf entstanden ist. Durch die nicht-destruktiven Bearbeitungsmöglichkeiten, die diese Kette ermöglicht, kann jeglicher Akspekt des Bildes später noch verändert werden. Durch einfaches Ändern der Farbe des Füllobjekts auf der untersten Ebene kann die Farbe des gesamten Knopfes verändert werden, der metallische Effekt und die abgeflachten Kanten werden einfach automatisch neu berechnet. Weil alle involvierten Objekte auf Vektorpfaden basieren, kann die Knopfbildgröße jederzeit vergrößert werden, ohne dass störende Artefakte durch Skalieren von Pixeln entstehen. Erstellen des Grundlooks Ziel: Erstellen Sie zuerst ein neues Dokument (Dokumentmenü) mit der richtigen Größe für das Knopfbild.
Benutzen Sie das Füllwerkzeug
Erzeugen Sie danach einen "Rauschen" Filter. Die "Stärke" Eigenschaft des Filters kann erhöht werden, damit später der metallische Effekt deutlicher sichtbar ist. Wenn man im Rauschenfilter die "Nur Helligkeit" Eigenschaft aktiviert, beschränkt sich das Rauschen entsprechend nur auf die Helligkeit und lässt die Farbe eines Pixels unberührt.
Um den metallischen, "gebürsteten" Effekt zu erzielen, wurde ein Bewegungsunschärfe Filter hinzugefügt. Dieses Objekt besitzt nur zwei Eigenschaften: Den Weichzeichnungsradius, der gewissermaßen die Ausdehnung der Unschärfe festsetzt, und den Winkel, also die Richtung. Für den Knopf müssen Sie den Winkel auf 90 Grad einstellen, womit die Unschärfe in horizontaler Richtung wirkt. Ein eher weiter Radius, etwa 25 - 40 Pixel ist für den Knopf angemessen. Diese nun entstandene erste Ebene mit den drei Objekten dient als Farbgrundlage für die weiteren Glieder in der eingangs erwähnten "Filterkette". Erstellen der Form des Buttons Ziel: Legen Sie nun über das Ebenenmenü eine zweite Ebene an.
Die neue Ebene soll die Farbfläche der unteren Ebene in der abgerundeten Form des Knopfes "abschneiden". Eine solche Funktion nennt man auch "Maskieren".
Um die Ebene als eine Maske für die darunter befindliche Ebene wirken zu lassen, kann man ihren "Modus" einfach auf "Alphakanal" setzen. Die Farbigkeit der Ebene wird dabei völlig ignoriert, während ihr Alphakanal dazu benutzt wird, den Alphakanal der darunter liegenden Ebene zu ersetzen. Da sich auf der Maskenebene noch keine Objekte befinden, verschwindet die Farbfläche erstmal komplett. Sie taucht nur dort auf, wo Objekte auf der Maskenebene die Deckkraft erhöhen. Für die Form des Knopfes eignet sich beispielsweise ein gerade gezogener Pinselstich. Wechseln Sie also zum Pinselwerkzeug Die Größe der Pinselspitze ("Radius"-Schieberegler) sollte so eingestellt werden, dass sie fast der Höhe des Bildes entspricht. Dazu können Sie die Maus über die Arbeitsfläche bewegen und sehen anhand des Zeigers, wie groß ein erzeugter Pinsel sein würde. Außerdem sollte der Pinsel eine scharfe Kante aufweisen, wozu der "Schärfe"-Schieberegler auf 100% stehen muss. Die Option "Fest" sollte abgeschaltet sein, denn sie veranlasst, das keine Zwischenwerte für die Deckkraft des Pinselstriches erzeugt werden (Kantenglättung). Stellen Sie "Abstände" auf den niedrigsten Wert. Auch die "Subpixel" Option ist im Moment nicht von Vorteil. Sie bewirkt, dass in einer vergrößerten Darstellung die Mauspositionen gewissermaßen auch "zwischen" den Pixeln abgetastet werden. Jedenfalls kommt es Ihnen entgegen, wenn die Option ausgeschaltet ist, weil dann die Pinselpositionen auf ganzen Pixeln einrasten. Sie werden gleich sehen, warum. Um einen geraden Pinselstrich zu erzeugen, klicken Sie erst auf der linken Seite des Bildes, und dann, mit gedrückter <Shift>-Taste, auf der rechten.
Jetzt hat der Knopf bereits seine Form. Erstellen der 3-dimensionalen Ränder Ziel: Dazu können Sie die gesamte Ebene einfach kopieren.
Die Kopie der Ebene sollte vor, also über den anderen beiden Ebenen sein. Mit einem weiteren "Modus" kann die Helligkeit der unter einer Ebene befindlichen Bilddaten beeinflusst werden. Stellen Sie also den "Modus" der Kopie auf "Helligkeit". Dabei spielt die Farbe des Pinselobjektes jetzt eine Rolle (bei der Maskenebene war sie egal). Wählen Sie also das Pinselobjekt und lassen Sie die Farbe auf das ausgewählte Pinselobjekt fallen. Momentan erhellt der Pinsel den gesamten Knopf. Damit nur die obere und linke Seite erhellt wird, muss das Pinselobjekt teilweise wegradiert werden. Dazu kann es einfach im Objektmenü kopiert werden, oder auch durch Ziehen+Fallenlassen mit gedrückter <Shift>-Taste. Die Kopie sollte sich unter dem Pinselobjekt befinden. In der Eigenschaftenliste dieses Objekts kann man den "Modus" auf "Radieren" setzen. Aus dem Pinselobjekt wird ein Radiergummiobjekt. Damit die Kante des Radiergummiobjekts weich wird, kann man die Eigenschaft "Schärfe" von 100% runtersetzen. Außerdem muss das Objekt noch verschoben werden. Wechslen Sie also zum Transformationswerkzeug
Verschieben und Verzerren Sie also das Radiergummiobjekt solange, bis es den gewünschten Bereich vom weißen Pinselobjekt abschneidet oder tragen sie die Verschiebung einfach wie hier per Tastatur ein. Fehlt noch die dunke Kante. Dazu kann einfach die gesamte Ebene nochmals kopiert werden. Das Pinselobjekt in der Kopie muss ausgewählt werden und seine Farbe erneut durch Fallenlassen auf Schwarz gesetzt werden. Mit dem Transformationswerkzeug kann das ausgewählte Radiergummiobjekt in die entgegengesetzte Richtung verschoben werden, damit das schwarze Pinselobjekt auf die rechte, untere Kante wirkt. Damit wären die abgeflachten Kanten fertiggestellt. Erstellen der schwarzen Umrandung Ziel: Um einen schwarzen Rand um den Knopf zu ziehen, können Sie die oberste Ebene erneut kopieren. Bei dieser Ebene soll es sich um eine ganz normale Farbebene handeln, deshalb muss der "Modus" auf "Normal" zurückgestellt werden. Wir brauchen auch auf dieser Ebene ein Radiergummiobjekt, aber das bereits vorhandene weist eine Transformation auf. Löschen Sie also dieses Radiergummiobjekt. Kopieren Sie das verbliebene schwarze Pinselobjekt erneut (an unterste Stelle), und setzen sie die Eigenschaft "Modus" der Kopie wieder auf "Radieren". Wählen Sie erneut das schwarze Pinselobjekt aus, und vergrößern Sie es. Dies können Sie am besten durch Setzen der Eigenschaft "Radius" auf einen etwas höheren Wert erreichen. Da das Radiergummiobjekt momentan noch genau auf dem von der Maskierungsebene freigestellen Bereich liegt, und dadurch eine feine Lücke in der Deckkraft des Knopfinneren entsteht, ist es ratsam, das Objekt ewas zu verkleinern. Sie können mit dem Transformationswerkzeug sicher schnell ein Optimum finden. Noch schneller geht es, wenn sie einfach den Radius per Tastatur verkleinern. Erstellen der Beschriftung Ziel: Der Text des Knopfes kann mit Hilfe des Textwerkzeuges Um den Text so erscheinen zu lassen, dass er etwas in die Knopfoberfläche versenkt ist, kann das Textobjekt zweimal kopiert werden. Die Kopien sollten sich hinter dem Original befinden (also in der Liste darüber) und werden jeweils auf schwarz und weiß gesetzt. Die schwarze Kopie wird mit dem Transformationswerkzeug nach links oben verschoben, was sehr feinstufig geschehen kann, wenn man im Transformationswerkzeug die "Subpixel"-Option aktiviert hat und das Dokument ausreichend vergrößert ist. Die weiße Kopie wird analog dazu nach rechts unten verschoben. Auch hier bietet sich wieder die alternative Anpassung per Tastatur an. Die Deckkraft der beiden Textobjekte kann durch setzen der "Deckkraft" Eigenschaft herabgesetzt werden.
Als Ergebnis erhalten wir nun einen Button wie diesen: Der Text stammt von Stephan Aßmus (Yellowbites) Bereitgestellt durch BeSly, der BeOS & Zeta Wissensbasis. |
