Punkt 1

Als Beispiel für dieses Tutorial soll uns ein kleines Menuinterface dienen. Unsere Endgrafik soll etwa 200x200 Pixel betragen. Zuerst erzeugen wir ein Bild mit 800x800 Pixeln. Wir verwenden die vierfache Grösse um die Qualität des Ergebnisses zu verbessern und uns etwas die Arbeit zu erleichtern. Aus der Werkzeugleiste wählen wir die Funktion "Freihandmaske" aus und entwerfen zuerst aus Einzelschritten eine grobe Form für unser Objekt. Je sauberer hier gearbeitet wird, desto besser sieht das Endergebnis aus. Um die geschwungene Form noch etwas zu glätten, nutzen wir die Option "Maske verwischen" aus dem Punkt "Maske" im Hauptmenü. Die Maske wird um 10 Pixel nach Aussen verwischt. Danach füllen wir die Maske mit der "Füllen" Funktion aus der Werkzeugleiste mit einer beliebigen Farbe aus. Dabei zeigt sich, dass am Rand des Objekts ein Farbübergang entstanden ist. Da wir das im Moment noch nicht gebrauchen können, greifen wir zu einem ersten kleinen Trick. Wir entfernen die verwaschene Maske und wählen unter "Hauptmenü / Maske" die Option "Chroma Maske" aus. Klicken Sie auf das erste der Pipettensymbole und danach auf den Bildhintergrund. Mit OK wird die markierte Farbe maskiert. Da wir ja unser Interface und nicht den Hintergrund maskieren wollen, wählen wir unter "Hauptmenü / Maske" die Funktion "Invertieren", oder drücken kurz die Taste "Einfg". So haben wir einfach und schnell unser vielfarbiges Objekt markiert. Jetzt können wir es wieder mit einer einheitlichen Farbe ausfüllen.


Punkt 2

Nun überlegen wir uns eine Form für die Buttons. Passend zu dem runden Interfacedesign wählen wir dafür rechteckige Buttons mit abgerundeten Ecken. Unsere Buttons sollen etwa 100 Pixel breit werden und eine Höhe von 20 Pixeln aufweisen. Dafür erzeugen wir zuerst eine neue Grafik mit den vierfachen Abmessungen (400x80). In unserer neuen Zwischengrafik erstellen wir mit der Funktion "Kreismaske", aus der Werkzeugleiste, an einer Seite des Buttons einen Kreis. Danach wird die Maske invertiert. Mit dem "Zeichnen" Werkzeug der Werkzeugleiste malen wir die nun entstandenen Ecken aus. Um die Arbeit für die rechte Seite abzukürzen, entfernen wir die Maske und markieren die beiden Ecken mit einer rechteckigen Maske. Die so markierte Stelle wird nun kopiert. Dies erreichen Sie durch die Funktion "Kopieren" im Hauptmenü unter "Bearbeiten", oder durch das bekannte Tastaturkommando "Strg+C". Wir entfernen die Maske und fügen den ausgeschnittenen Bereich nun mit "Strg+V" wieder ein. Dabei wählen wir die Option "Kippen / Horizontal" aus dem Bereich "Objekt" im Hauptmenü. Danach wählen wir die Funktion "Bearbeiten" aus der Werkzeugleiste und verschieben den eingefügten Bereich mit der Maus an die richtige Stelle. Mit der schon bekannten Funktion "Chroma-Maske" wird nun die erzeugte Buttonform ausgewählt und mit "Strg+C" in die Zwischenablage kopiert. Nun können wir uns wieder der eigentlichen Grafik zuwenden. Hier fügen wir unseren neuen Buttons mittels "Strg+V" wieder ein, füllen sie mit der Hintergrundfarbe und richten sie zueinander aus.


Punkt 3

Die nun sichtbare grobe Form unseres Interfaces markieren wir wieder mit einer Chroma Maske und speichern die Maskenform im Hauptmenü unter "Maske / speichern" ab. Danach wird die Maske wieder entfernt. Die eingefügten Buttons sind noch einzelne Objekte, und gehören noch nicht richtig zu unserer Hauptgrafik. Deshalb wählen wir die Funktion "Einbinden / Alle Objekte" aus dem Bereich "Objekt" im Hauptmenü.


Punkt 4

Nun gestalten wir unseren 3D Effekt, indem wir zuerst aus dem Hauptmenü im Bereich "Effekte / Effektfilter" die Funktion "Relief" auswählen. Das Ergebnis zeigt uns ein Licht- und Schatten-Muster. Mit der bekannten Chroma Maske markieren wir zuerst die dunklen Bereiche und speichern diese ab. Danach löschen wir die Maske und verfahren mit den hellen Bereichen ebenso. Wir holen uns unsere vorherige Grafik zurück, indem wir im Hauptmenü unter "Bearbeiten" die Option "Rückgängig Effektfilter" auswählen.


Punkt 5

Nun können wir uns Gedanken über die Oberfläche des Menüs machen. In unserem Beispiel soll es ein metallisch wirkendes Menü für einen schwarzen Hintergrund sein. Mit dem schon bekannten Werkzeug "Chroma Maske" ändern wir zuerst den Hintergrund und invertieren danach die Maske um das Interface zu markieren. Für den Körper des Interfaces brauchen wir einen Farbverlauf. Dafür wählen wir in der Werkzeugleiste ein helles Grau als aktive Farbe und ein Dunkelgrau als Alternativfarbe aus. Bei den Füllwerkzeugen in der Werkzeugleiste wählen wir das Werkzeug "Verlauf" und erstellen damit einen diagonalen Farbübergang. Langsam bekommt unser Interface ein Gesicht.


Punkt 6

Jetzt wenden wir uns wieder unseren gespeicherten Licht- und Schatten-Masken zu. In Ihrem Browser sind die Buttons so angelegt, dass ein Lichteinfall von linksoben suggeriert wird. Wir halten uns an diese Vorgabe und laden die Maske für die hellen Bereiche. Unsere "Licht" Maske verwischen wir nun um 10 Pixel nach Aussen. Mit der Funktion "Aufhellen" aus dem Menü "Filterwerkzeuge" bearbeiten wir nun den maskierten Bereich. Dafür stellen wir den Druck auf 30% ein. Danach verfahren wir mit den dunklen Bereichen genauso. Da wir durch das Verwischen nicht nur den Menükörper sondern teilweise auch den Hintergrund aufgehellt haben, laden wir nun wieder die Maske, welche wir unter Punkt 3. erzeugt haben. Nach dem Invertieren der Maske ist der Hintergrund markiert und kann wieder schwarz eingefärbt werden. Mit der selben Maske und der schon bekannten "Zeichnen" Funktion aus der Werkzeugleiste können wir nun auch gleich per Hand den Hintergrund für unsere Buttons einfärben. In unserem Fall wählen wir ein dezentes Dunkelblau.


Punkt 7

Nun können wir uns den Endarbeiten widmen. Zuerst schreiben wir in die Buttonbereiche mit Hilfe der Textfunktion aus der Werkzeug- leiste die Bezeichnungen unserer Menüpunkte. Auf anti-aliasing können Sie dabei verzichten. Danach wird die Grafik mit der Funktion "Bildgrösse" im Bereich "Objekt" des Hauptmenüs auf die Zielgrösse 200x200 verkleinert. Um die Qualität noch etwas zu verbessern können Sie mit der Funktion "Scharfzeichnen" aus dem Bereich "Effekte / Effektfilter" im Hauptmenü herumexperimentieren.
Geschafft, das erste selbst erstellte Interface. Und eigentlich hat es doch garnicht so lange gedauert. Natürlich ist es noch etwas arg künstlich. Ein paar Alterungseffekte, wie Kratzspuren oder Rost, würden den Eindruck noch verbessern. Auch Applikationen wie Schrauben, Drähte etc. würden sich gut machen. Aber dazu in den anderen Tutorials...