StyleBuilder Tutorial

Vorwort

Zum Windows Vista / Windows 7 Style Builder gehts hier lang: Windows Style Builder

Geht es euch auch so? Irgendwann erreicht man einen Punkt an dem man erkennt das einem das einfache Austauschen der msstyles nicht mehr reicht. Dann fragt man sich ob man nicht auch selbst in der Lage ist ein eigenes Theme zu erstellen. Früher oder später landet man dann beim Style Builder. Jetzt braucht man allerdings eine Menge Geduld und Durchhaltevermögen. Dieses Tutorial soll euch nur den Einstieg in die Welt des Style Builders erleichtern. Doch wenn ihr bereit seid Zeit und Lust zu investieren, eröffnen sich euch ungeahnte Möglichkeiten. Des weiteren sollte kein Anspruch auf Vollständigkeit erhoben werden, ich teile mit euch meine Erfahrungen, nicht mehr und nicht weniger. Etwa 200 Bilddateien wollen geändert, Größen müssen angepasst und Farben stimmig gewählt werden. Letztlich soll alles ein ansprechendes Gesamtbild ergeben. Bevor wir jedoch gleich loslegen noch eine Bitte, verwendet niemals Vorlagen, Image Dateien oder sonstiges von anderen Leuten ohne deren ausdrückliche Erlaubnis. Selbst das kopieren von Ideen halte ich für bedenklich. Aus diesem Grund basiert dieses Tutorial auch auf dem Luna Style der immer automatisch mit dem Erstellen eines neuen Projekts angelegt wird.

Doch nun soll es losgehen. Ich habe mir gedacht, das Tutorial in mehrere Kapitel aufzuteilen in denen ich die wichtigsten Punkte erläutere. Übrigens, auch ich lerne täglich neues dazu und weiß natürlich nicht über alle Dinge im Style Builder Bescheid. Also, wer Ergänzungen hat oder weiß wie etwas besser umgesetzt werden kann, sollte sich beteiligen. Ich kann natürlich nicht auf alle Bereiche eingehen, viele Schritte wiederholen sich und einiges werdet ihr selbst herausfinden.

Das Startmenü

Zuerst jedoch eine kleine Vorstellung über die wichtigsten Bereiche im Style Builder. Ganz im linken Teil befinden sich die Verknüpfungen wo Ihr zwischen den einzelnen Abschnitten des Styles wechseln könnt. Daran schließt sich der Teilebaum an, gefolgt vom Vorschaufenster und dem Eigenschaftsbereich.

In den Optionen des Style Builders könnt ihr euer Grafikprogramm hinzufügen, dieses wird nun automatisch aufgerufen wenn Ihr auf >Bearbeiten< klickt.

Erstellt ein neues Projekt in dem ihr im Style Builder auf neu klickt. Ich entferne anschließend auch immer gleich die zusätzlichen Farbshemes und arbeite nur mit dem Blauen. Falls ich weitere brauche, können diese dann schnell und unkompliziert aus dem fertigen Style übernommen werden. Die Schaltfläche >Add newColorsheme> erledigt das für uns. Über die Verknüpfungen gelangt ihr nun zum Startmenü.
Wie Ihr nun bemerken werdet, besteht das Startmenü aus 5 einzelnen Bilddateien. Ganz oben die UserPane, links darunter die ProgList, darunter der MoreProg Bereich rechts die PlaceList und unten der Logoff Bereich. Es ist nun nicht ganz einfach aus 5 einzelnen Bildern ein >Ganzes< zu machen. Daher bietet es sich an, vorher ein komplettes Startmenü nach seinen Vorstellungen zu erstellen. Ein Mittelwert für die Größe, etwa 300x400 Pixel. Dies entspricht schon in etwa der Originalgröße wenn wir vom Luna Style ausgehen (380x440). Dies ist vor allem dann wichtig wenn ihr mit Effekten arbeitet. An den Übergängen der einzelnen Bilder kann es sonnst zu zu fehlerhaften Darstellungen kommen.

Ich teile nun das von mir erstellte Startmenü mittels Hilfslinien in die 5 einzelnen Bereiche: <>UserPane: 300x60, ProgList: 150x260, MoreProg: 150x20, PlaceList: 150x280, LogOff: 300x60. Beachtet bitte das dies nur Richtwerte sind, wie ihr das macht bleibt euch überlassen. Weiterhin steht es euch natürlich auch frei zu entscheiden die Bilddateien direkt zu bearbeiten. Wir schneiden nun den Bereich der UserPane aus und fügen ihn in eine neue Bilddatei ein. Diese Bilddatei exportieren wir nun in den entsprechenden Ordner. So wird es dann mit allen anderen Bildern auch gemacht.

Achtung: wenn ihr Bilder um oder benennt beim exportieren, so dürfen mehrere Wörter nicht durch ein Leerzeichen getrennt sein.

Beim Anwenden kommt es sonst zu einer Fehlermeldung mit dem Hinweis der Style könne nicht übernommen werden. Da man jedoch in den seltensten Fällen irgendwelche Fehlermeldungen interpretieren kann weil sie ja meist ohne Begründung erfolgen, weise ich euch noch mals darauf hin euren Style so oft wie möglich anzuwenden. Weiterhin dient es uns zur frühzeitigen Fehlererkennung. Wir sind nun recht schnell in der Lage unsere letzten Einstellungen zu überprüfen und gegebenen Falls rückgängig zu machen. Von nun an werde ich euch mit diesem Hinweis immer wieder auf den Keks gehen...:)

Innerhalb des Eigenschaftsfensters kann nun die neue Bilddatei unter dem Punkt >ImageFile< ausgewählt werden. Haben wir das erledigt passen wir auch gleich die Größe an. Im Eigenschaftsfenster findet ihr noch die Punkte: >SizingType< hier wird definiert wie das Bild dargestellt werden soll, also z.B. stretch für ein gedehntes Image, tile für ein geteiltes und truesize für die Originalgröße. Wir entscheiden uns für ein gedehntes Image, also belassen wir es auf >stretch< . Mit Hilfe der >SizingMargins< können wir nun relativ genau bestimmen ab welchem Punkt unsere Image Datei gedehnt wird. Alles was innerhalb der Grenzen liegt wird gedehnt, was sich davor befindet wird in Originalgröße angezeigt. Grenzen können für links, oben, rechts und unten bestimmt werden.

An den nächsten beiden Bildern könnt ihr recht gut erkennen wie das funktioniert. Mit den Einstellungen der linken Seite also des Originalen Images können wir in unserem neuen Image nicht viel anfangen und passen die Einstellungen daher an. Wir haben ja jetzt auch größere Image Dateien. In meinem Beispiel ist es daher nur nötig den Randbereich exakt darzustellen, der mittlere Bereich des Bildes wird somit gedehnt dargestellt. Es ist nun sehr wichtig unseren Style so oft wie möglich anzuwenden um unsere Einstellungen zu überprüfen. Ihr müsst ein wenig herum experimentieren um die richtigen Einstellungen zu finden.

Wenn ihr das nun für alle Bereiche des Startmenüs anwendet erhaltet ihr das zusammengesetzte Startmenü das dann in meinem Beispiel so aussieht. Die Textfarbe habe ich auch schon über die Eigenschaften entsprechend angepasst.

Irgendwie sieht es noch nicht perfekt aus unser Startmenü, die Icons und Buttons wirken doch noch sehr an den Rand gedrängt. Dieses Problem lösen wir nun mit Hilfe der ContentMargins. Genau wie die SizingMargins finden wir die ContentMargins im Eigenschaftsfenster. Mit den ContentMargins bin ich in der Lage festzulegen wo sich Text, Glyphen oder Icons innerhalb meiner Bilddatei befinden sollen. Verändert diese Werte nicht in all zu großen Schritten und wendet den Style oft an, so erkennt ihr schnell was sich für Effekte ergeben und könnt sie nach euren Wünschen anpassen. So, wenn ihr jetzt noch die Separatoren anpasst, die Abmelden und Ausschalten Buttons ändert und zu guter Letzt noch den MoreProgArrow austauscht. Wäre das Startmenü fertig.

Abschließend noch ein paar kleine Tipps. Wenn ihr innerhalb eurer Bilddateien Transparenz darstellen wollt müsst ihr bei bpm diese Bereiche mit dem so genannten >Magic Pink< füllen, entspricht 255,0,255.

Habt ihr die UserPane ausgewählt könnt ihr im Eigenschaftsbereich beim letzten Punkt >UserPic< bestimmen ob selbiges im Startmenü angezeigt werden soll oder nicht. Bei den >DefaultPaneSizes< definiert ihr die dargestellte reale Größe des Startmenüs in Pixeln. Hier sind nur die letzten beiden Werte entscheidend also bei der UserPane sähe es dann so aus: 0,0,380,64.

Mit der Fertigstellung des Startmenüs endet hier der erste Teil des Tutorials. Ich hoffe die Anleitung hilft euch weiter und unterstützt euch ein wenig in eurem Tatendrang.

Die Taskleiste

Wir haben im ersten Teil das Startmenü erstellt, von daher bietet es sich an, mit der Taskleiste fort zu fahren. Beide Elemente gehören unmittelbar zusammen. Die Taskleiste mag im ersten Moment etwas unscheinbar erscheinen, doch täuscht euch nicht, in ihr sind mehr Elemente enthalten als im Startmenü.

Hier könnt ihr nun alle Elemente sehen die es zu ändern gilt. Die Taskbar selbst, der Startbutton, die Taskband Buttons, Systray und und und... Ihr seht, an alles ist gedacht , unten, oben, links und rechts. Beginnen wir mit dem TaskBar Background. Wählt ihn im Vorschaufenster aus und bearbeitet ihn. Im nächsten Bild seht ihr wie es aussehen könnte. Hier habe ich wieder ein gedehntes (stretch) Immage beim Sizing Typ gewählt und die SizingMargins entsprechend angepasst. An die Taskbar selbst grenzt die Sizing Bar das ist der noch verbliebene hellblaue streifen direkt an der Taskbar. Nach dem wir auch diese angepasst haben widmen wir uns den Taskband Buttons (im Beispielbild >Normal App<).

Nachdem wir diesen Button ausgewählt haben fällt uns eins auf, ein Button, aber 6 verschiedene Zustände über die wir uns Gedanken machen müssen. Hier ist eure Kreativität gefragt. Ansonsten funktioniert es hier wie bei den anderen Dateien auch. Achtung vergesst bitte nicht das es noch untergeordnete Buttons im Style gibt. Neben den Taskband Buttons z.B. noch die Dropdown Buttons die mit der selben Image Datei belegt werden. Das nächste Bild soll euch veranschaulichen was ich meine. Der Dropdown Button erscheint so nur im Teilebaum und kann daher schnell übersehen werden. Weiterhin habe ich mal die Toolbar mit einem Pfeil gekennzeichnet, auch sie ist eigentlich nur im Teilebaum auswählbar, mehrmals innerhalb des Styles. In der Regel lassen sich hier Textfarben für die einzelnen Zustände der Buttons bestimmen.

Ändert so nun auch alle anderen Buttons. Zum Startbutton eventuell noch ein Tipp. Ich erstelle ihn eigentlich immer in Originalgröße und wähle diese Option dann auch in den Eigenschaften (TrueSize). Doch noch immer steht dort der Schriftzug >Start< ,für meine Zwecke unpassend. Wir haben jedoch schon im ersten Teil erfahren wofür uns die >ContentMargins< dienen. Richtig, sie bestimmen wie und wo uns z.B. auch Text innerhalb einer Bilddatei angezeigt wird. Nutzen wir unser Wissen und verbannen den Schriftzug auf Nimmerwiedersehen. Ändert die ContentMargins links auf -200 und rechts auf 200, das Ergebnis ist, dass wir das Wort >Start< geradezu aus unserer Image Datei hinauskatapultiert haben. Mein nächstes Bild zeigt euch das Ergebnis.

Tja Leute das soll es auch schon für den zweiten Teil gewesen sein. Denkt daran den Style so oft wie möglich anzuwenden um Fehler innerhalb des Styles schnell erkennen und beseitigen zu können. Im dritten und letzten Teil wollen wir uns dann um die Titelleiste und die Caption Buttons kümmern.

Titelleiste und dazugehörige Buttons

Hallo Leute, und willkommen zum dritten Teil. Wir wollen uns nun der Titelleiste und den dazugehörigen Buttons widmen. Es gibt normale Fenster, kleine Fenster, maximierte und minimierte. Des weiteren findet Ihr in der Titelleiste die entsprechenden Buttons in 8 darstellbaren Zuständen, 4 für die aktivierte und 4 für die deaktivierte Titelleiste.

Wenn Ihr nun die Bilddateien für die Titelleiste ausgetauscht habt könnt Ihr im Eigenschaftenbereich festlegen ob sich der Titeltext links (left) oder in der Mitte (Center) der Titelleiste befinden soll der Entsprechende Punkt in den Eigenschaften sind die Content Aligment.

Über die Klassischen Farben könnt Ihr nun noch die Textfarbe und Schriftart bestimmen. Wenn Ihr euch im Teilebaum nur den Punkt Caption auswählt seid Ihr in der Lage auch den Textschatten zu modifizieren, also die Ausrichtung und Farbe des Textschattens. Über den Punkt >CaptionBarHeight< bestimmt Ihr die Höhe der Titelleiste in Pixeln.

Bei den Caption Buttons habt ihr 2 Möglichkeiten selbige zu ändern. Die etwas einfachere Methode wäre einfach den vorhandenen Caption Button auszutauschen und danach die entsprechenden Glyph Images in den unterschiedlichen Größen anzupassen. Doch warum 5 unterschiedliche Größen bei den Glyph Dateien? Ganz einfach, je schmaler die Titelleiste wird umso kleiner muss der Button sein um dargestellt werden zu können. Als Beispiel sei hier Photoshop genannt. Viele Einstellungen Ebenen, Farben u.s.w. befinden sich in ziemlich kleinen Fenstern die aber auch geschlossen, minimiert und wiederhergestellt werden können.

Wenn Ihr euch nun für diese Methode entscheidet, hat das ganze einen Nachteil, Ihr könnt die Buttons selbst nicht verschieben sondern nur die Glyph Dateien. Wenn Ihr aber die Buttons an einen anderen Ort verschieben wollt ähnlich bei Vista z.B. an den oberen Rand der Titelleiste, müsst Ihr eure Buttons bei den Glyph Dateien austauschen und den originalen Caption Button Transparent darstellen. Habt Ihr das erledigt könnt Ihr über die Content Margins die Glyphen verschieben.

An diesem Beispiel seht Ihr was ich meine. Ich habe die eigentliche Bilddatei des Buttons an den Platz der Glyphen gesetzt. Und den eigentlichen Caption Button als Transparente bpm Datei exportiert.

Über die Content Margins bin ich nun in der Lage jeden Button an den von mir vorgesehenen Ort zu verschieben. Allerdings hat dieses verschieben natürlich seine Grenzen. Es ist nicht möglich die Buttons wie im Mac Style auf die linke Seite zu verschieben. Auch hängt es davon ab welche Größe die Image Datei des Original Caption Buttons hat. Alle weiteren Änderungen des Styles laufen so oder ähnlich ab. Das Muster ist vom Prinzip immer gleich. Nur muss man manchmal die eine oder andere Einstellung erst suchen.

Ihr werdet um das Ausprobieren nicht herum kommen. Wenn Ihr Geduld und ein wenig Ehrgeiz habt seid Ihr bald in der Lage eure eigenen Styles und Themes zu gestalten. Wenn Ihr erst einmal eine gute Idee habt, eine präzise Vorstellung ist die Hälfte schon geschafft. Der rest ist das Umsetzten der Idee mit Hilfe eures Grafikprogramms und des Style Builders.

Wenn Ihr Fragen habt oder Hilfe braucht, stehe ich euch gern zur Verfügung und bemühe mich euch zu helfen. Denn wie eingangs im ersten Teil schon erwähnt, dieses Tutorial kann nur eine Einstieg-Hilfe sein. Einige wichtige Punkte habe ich angeschnitten und erläutert der Rest liegt bei euch. Ich hoffe das sich der eine oder andere findet für den dieses Tutorial ein Anfang und Beginn in die große Welt des Gestaltens wird und wir eventuell bald neue und frische Ideen auf Deviant Art oder anderswo bewundern können.

Danksagung

Dieses Tutorial wurde ursprünglich verfasst von tivar.

... der uns dieses Tutorial zur Verfügung gestellt hat. Vielen Dank