28. August 2008 · GUI ThemePark Tutorial
Ein Tutorial für ThemePark
Hallo, in diesem Tutorial geht es, wie der Titel schon sagt, um ThemePark (im Text TP genannt).
Mit ThemePark lassen sich komplette guiKits für OS X entwerfen oder vorhanden Themes modden. Benutzt werden die fertigen Themes mit ShapeShifter.
Inhalt
- Neues Theme erstellen
- Application Skins
- iTunes
- Beenden
- Themes modden/mixen
- Häufige Fragen
1. Beginnen wir mit einem völlig neuen Theme.
Dazu startet ihr TP und öffnet einen frischen guiKit - Apfel+N oder über die Menubar/File/New guiKit Package
In der Liste wählt ihr nun 'Themes' und bestätigt mit dem 'Add' Button.
Jetzt habt ihr ein leeres Theme mit dem Namen 'My Spiffy Theme' - doppelklicken um dem Theme den gewünschten Namen zu geben.
Optional: Wenn ihr das Aussehen der Menüleisteneinträge und Listeneinträge aufwendiger gestalten wollt als im Standard Aqua Theme, dann muss diese Funktion zusätzlich über den Button 'Options' aktiviert werden.
Nun sind soweit alle Vorbereitungen getroffen und ihr könnt euch an die Arbeit machen die weit über 1000 GUI Grafiken zu ersetzen.
Dafür auf 'Elements' klicken und am besten mit den 'Global Elements' beginnen. Es empfiehlt sich als erstes 'Metal Window' zu skinnen, unter anderem sind die Metal Window Grafiken für das Finderfenster zuständig. So könnt ihr gleich am Anfang sehen wie das Theme wirkt. Dafür einfach die einzelnen Grafiken anklicken und über den 'Send' Button in der TP Toolbar an Photoshop schicken und dort bearbeiten. Sobald die Grafik ersetzt/bearbeitet ist einfach mit einem klick auf den 'Receive' Button die nun fertige Grafik zurückholen.
Wenn ihr 'Metal Window' fertig habt am besten als nächstes 'Menubar and Menus' skinnen. Bei der Menubar gilt zu beachten das sie über dem Wallpapier liegt. Wenn ihr also die Original Menubar Grafiken bearbeitet und transparente Bereiche einfügt wird beim Endprodukt immer das Wallpaper sichtbar sein! z.B. bei runden Ecken. Also darauf achten das ihr die 'Menubar Caps' Grafik immer mir schwarzem Hintergrund speichert, es sei den ihr beabsichtigt einen Transparenz Effekt in der Menubar. Ist das der Fall beachtet bitte das der Schatten der Menubar Hardcoded ist, ihr ihn also nicht mit TP sondern nur mit 3th Party Software abschalten könnt.
Als nächstes in der Reihenfolge solltet ihr 'Window Placard', 'Window Titelbar Buttons', 'Window (Aqua)' und 'Window (Unified)' skinnen. Wenn das erledigt ist sind soweit alle Fenster Skins fertig und ihr könnt euch den Buttons etc. zuwenden. Am besten ihr arbeitet einfach die restlichen Punkte der 'Global Elements' Liste von oben nach unten ab.
Sind die 'Global Elements' fertig, einfach nach bewährtem Prinzip die 'Elements' Liste abarbeiten, die 'Application Skins' aber zuletzt!
1.1 Application Skins
Unter 'Application Skins' könnt ihr die einzelnen Programme auswählen die ihr für euer Theme skinnen wollt, dafür einfach Programm wählen und 'Add' klicken.
Das skinnen läuft hier genauso wie bei den vorherigen Elementen von daher gehe ich außer bei iTunes (dafür gibt es noch einen anderen Weg) nicht näher darauf ein.
Bei den Application Skins ist zu beachten das ihr möglichst aktuelle Templates für die Programme verwendet, z.B. bringt es nichts 'iTunes 4.2' aus der App Liste zu wählen und zu skinnen wenn ihr iTunes 7 installiert habt. In diesem Fall würde euer iTunes Skin nicht übernommen. Einige einfache Programme z.B. VLC, verzeihen es allerdings wenn ihr ein etwas älteres Template benutzt. Aktuelle Templates findet ihr hier: TP Templates
Aktivieren könnt ihr sie per Doppelklick oder kopiert das Template File nach: User/Library/Application Support/ThemePark/Application Skin Templates
Danach könnt ihr sie wie oben beschrieben auswählen und benutzen.
1.1.1 Sonderfall iTunes
Neben dem oben beschrieben Weg iTunes ein neues Aussehen zu verpassen gibt es noch eine 2te Möglichkeit, die ich auch persönlich bevorzuge. Und zwar indem man iTunes gesondert in TP öffnet, die Grafiken ersetzt und so mit jedem speichern sofort Live die Veränderung sehen kann ohne dafür extra das komplette Theme mit Shapeshifter laufen zu lassen. Über diese Methode könnte man also auch einen iTunes Skin bauen und verwenden ohne Shapeshifter und ein Theme zu benutzen.
Als erstes geht man in den Programmordner, mach auf iTunes einen Rechtsklick und wählt 'Paketinhalt zeigen'.
Weiter geht es in Contents/Resources/iTunes.rsrc - doppelklicken, TP öffnet sich (vorher natürlich ein Backup der Original iTunes.rsrc machen!)
Jetzt habt ihr sämtliche iTunes Grafiken in einem einzelnen TP Fenster. Diese wie gehabt nach euren Wünschen ersetzen. Jedes mal wenn ihr abspeichert (Apfel+S) und daraufhin iTunes öffnet, könnt ihr die aktuelle Veränderung sehen und somit überprüfen.
Sind alle Grafiken soweit bearbeitet und gespeichert müsst ihr den Skin natürlich noch in euer Theme einbauen. (Für diesen Schritt kein extra App Template, siehe Link oben, für iTunes installieren!)
Geht bei ThemePark in die Menubar/File/Manage Templates, daraufhin öffnet sich der 'Template Manager'.
Nun auf 'New App Skin' klicken. Ein leerer App Skin öffnet sich. Links in die Spalte zieht ihr per Drag and Drop eure bearbeitet iTunes.rsrc aus dem iTunes-Resources Ordner. Das ganze sieht dann so aus:
Jetzt einfach speichern (Apfel+S) und ihr könnt das Fenster und den 'Template Manager' schließen. Nun kehrt ihr wieder zu eurem eigentlichen Theme in TP zurück. Wie in Punkt 1.1 beschrieben nun unter 'Application Skins' das eben erzeugt iTunes Template mit 'Add' auswählen. Da ihr die Grafiken, siehe Punkt 1.1.1, schon bearbeitet habt, markiert ihr jetzt den Eintrag 'iTunes' in der 'Application Skins' Liste. Nun in der Menubar.../Theme/Merge With Installed Elements wählen. Das wars, der iTunes Skin gehört nun zu eurem Theme.
Zum Abschluss müsst ihr jetzt nur noch die iTunes.rsrc aus dem iTunes-Resources Ordner mit der vorher gesicherten Original iTunes.rsrc ersetzen.
1.2 Fertig werden
Ihr solltet jetzt sämtliche Elemente incl. Programme in eurem Theme bearbeitet haben. Nun könnt ihr das Theme speichern und anschließend über Menubar/File/Export/Export for Shapeshifter als Shapeshifter guiKit exportieren. Diese 'Euer Theme.guikit' Datei einfach doppelklicken und sie wird Shapshifter automatisch hinzugefügt. Glückwunsch ihr seit FERTIG.
2. Vorhanden Themes modden
Wenn ihr vor habt ein Theme zu modden oder mehrere Themes zu mixen dann geht dies relativ einfach. Als erstes lasst ihr das Theme was ihr verändern wollt mit Shapeshifter laufen, benutzt es also ganz normal.
Dann TP starten und (s.o.) ein neues leeres guiKit öffnen. Markiert nun den Eintrag 'Elements'. Achtung! Ihr dürft nicht vergessen in den 'Application Skins' vorher die Programm Skins auszuwählen dir ihr mit übernehmen möchtet.
Weiter ist noch zu beachten unter dem Button 'Options' den MenuEnhancer zu aktivieren wenn das zu moddende Theme über komplexere Menus verfügt (ist in der Regel immer der Fall)
Als nächstes klickt ihr auf 'Merge With Installed Elements' und speichert.
Euer TP Fenster sollte nun so aussehen:
Jetzt könnt ihr die Grafiken ersetzen die ihr in dem Theme modden wollt. Das weiter vorgehen läuft dann wie gehabt.
Wenn ihr verschiedene Themes miteinander mixen wollt funktioniert das genauso wie gerade beschrieben. Nur mit dem Unterschied das ihr nicht gleich am Anfang 'Elements' markiert sondern nur die Listeneinträge die ihr tatsächlich braucht, das ganze dann immer mit 'Merge With Installed Elements' bestätigen. Beim mixen von Themes müsst ihr halt immer zwischendurch mit ShapeShifter das Theme wechseln aus dem ihr Teile übernehmen möchtet.
3. Fragen & Antworten
Frage: Ich habe die Menubar Caps oben abgerundet, im fertigen Theme wird rechts in der Menubar aber keine runde Ecke angezeigt?
Antwort: Wenn das der Fall ist habt ihr die 'Spotlight' Grafik zu breit gemacht so das sie die Ecke überlagert. Geht in TP zu: ...Elements/Menu Extras/Spotlight/Search Widged und entfernt an den Grafiken einige Pixel auf der rechten Seite.
Frage: Wofür ist 'Windows (Unified)' in den 'Global Elements' gut?
Antwort: Unified Support ist recht neu in TP und Shapeshifter. Wie schon in TP selbst beschrieben könnt ihr diese entweder auslassen oder ihr fügt einfach die von euren Finderfenstern benutze Farbe ein. Wenn ihr dagegen ein Theme mit Texturen baut wird es etwas schwieriger, hier wird erklärt warum: Unified Windows
Frage: Neben der eigentlichen Grafik die ich bearbeiten möchte gibt es daneben noch eine schwarze 'Click Mask', ist dabei etwas zu beachten?
Antwort: Die 'Click Mask' hat dieselbe Aufgabe wie Masken in PS. Alle schwarzen Bereiche sind im Theme sichtbar. Bei den allermeisten Grafiken müsst ihr allerdings die Maske nicht extra anpassen, könnt also die Originale so lassen. Nur in wenigen Fällen, oft iTunes, muss die Maske auch mit bearbeitet werden.
Das wars zum Thema ThemePark. Viel Spaß beim Macthemes basteln :)
Gruß Hirogen
