Deutsch English

PAP 2.0Beta
Theming

[ Teil 1 ] [ Teil 2 ]
Eine Anleitung von MrElchbau

Entsprechend zum Thema bieten wir auch eine Datei mit Vorlagen an. Man kann sie HIER laden. Ich würde sie auch gerne erweitern, also wenn Ihr Buttons, Icons oder so fürs Theming hinzusteuern wollt, immer her damit. Die Datei bekommt deswegen auch eine Versionsnummer spendiert ;-)


  Die PATheme.ini  

Die PATheme.ini-Datei läßt sich in jedem Text-Editor laden und bearbeiten. Sie enthält Informationen über das Theme und einige Einstellungen. Werfen wir mal ein Blick drauf:

[PortableApps.comTheme]
PortableApps.comThemeVersion=2.0
PortableApps.comThemeType=Simple

Für diese Version wurde das Theme erstellt
Die Art des Themes (es soll später noch erweiterte Themes geben)
[ThemeDetails]
Name=Green Test
Version=1.0
Author=MrElchbau
URL=http://ptc.kain-planet.de/

Name des Themes
Version des Themes
Wer hat's gemacht?
Web-Seite des Autors
[ButtonApplications]
FontColor=96ecfa
DividerColor=ffc820

Schriftfarbe der Programme in HEX RGB
Farbe des Trennbalkens in HEX RGB
[ButtonFolders]
FontColor=ffd529

Schriftfarbe im rechten Menü in HEX RGB
[DriveSpace]
FontColor=ffffff
FontShadowColor=000000
StretchImage=false

Schriftfarbe der Speicheranzeige in HEX RGB
Schattenfarbe der Speicheranzeige in HEX RGB
Soll die Anzeige gestreckt ("true") oder abgeschnitten ("false") dargestellt werden?
[DriveName]
FontColor=ffffff

Schriftfarbe des Laufwerknamens
Wird noch nicht unterstützt

  Die Werkzeuge  

Wir brauchen natürlich einige Tools fürs Theming:

Ein Packprogramm
Klar, hier kommt nix anderes in die Tüte, wir nehmen 7-Zip Portable.

Einen Editor
Etwas zu groß für unsere Ansprüche, aber man kann's immer brauchen: Notepad++ Portable

Ein Grafikprogramm
Hier scheiden sich die Geister. GIMP Portable ist klasse für den Stick, aber etwas gewöhnungsbedürftig. Sehr gut ist Paint.NET, nur leider nicht portabel.

Ein Optimierer
Ein Screenshot-Programm ist auch immer sehr nützlich, man will den anderen ja auch zeigen, wie das Theme im Betrieb aussieht. Der PngOptimizer macht nicht nur welche, sondern verkleinert auch die Dateigröße von PNG-Dateien. Benutzen wir natürlich auch!

  Jetzt geht's los!  

Zuerst einmal installieren wir ein Theme. Das PAP-Menü entpackt die Dateien nach Laufwerk:\PortableApps\PortableApps.com\Data\Theme\ und benutzt fortan die Dateien dort. Dies wird nun unserer Arbeitsordner. So können wir bei jedem Schritt das PAP-Menü neu starten und unsere Arbeit bewundern/kontrollieren.

Wir erstellen erst einmal ein neues Bild in der Größe 406*573 Pixel. Das füllen wir mit einem coolen grünen Verlauf und speichern es in unserem Arbeitsordner als "background.png".

Jetzt kommt die Theme.ini dran. Wir öffnen sie mit dem Editor und setzen einen vorläufigen Namen ein: "Green Test". Damit auch alle Texte später gut lesbar sind änderen wir einfach alle Schriftfarben auf Weiß (HEX: "ffffff"). Die Schattenfarbe bleibt natürlich dunkel.

An die Stelle, an der später der Speicherplatz-Balken erscheint, setze ich noch eine weiße Umrandung, damit es sich dann richtig gut füllt. Für die restlichen Grafiken nehm ich was aus den Vorlagen...

Huch, das ist ja fast schon ein fertiges Theme!

Jetzt hätt ich links oben gerne noch ne schicke Abrundung. Ach ja, Magenta (RGB 255,0255) macht das Bild ja transparent. Also mal schnell mit Magenta abgerundet (A), gespeichert und neu gestartet.
Gott, was ist das passiert? (B) Da sind ja lauter pinke Pixel an meiner Rundung! Ach ja, zum Zeichnen habe ich Antialiasing benutzt, das Kantenglätten. So entstehen viele Mischfarben. Doch das Menü erkennt keine Mischfarben.
Also nochmals ohne Glättung (C). Alle Pixel sind nun reines Magenta.
Das Ergebnis sieht doch gleich viel besser aus! (D). Klar zu erkennen sind Treppcheneffekte, aber wenigstens keine zweite Farbe, die dies noch betont.

Achtung: vor dem Erstellen von Rundungen sollte der Hintergrund als background_opaque.png gespeichert werden. Das ist das Hintergrundbild für ältere Systeme, die keine Transparenz darstellen können.

Das war es im Großen und Ganzen. Wir könnten den Hintergrund noch etwas verzieren (Marienkäfer, Pokerkarten oder so, je nach Geschmack), aber das ändert an der Technik nichts.
So kommen wir zu unserem letzten Schritt: den 7zip-Manager starten, die Dateien auswählen und als PATheme-Datei packen. Und dann weg mit ihr an einen sicheren Ort. Oder unter Uploads mit einem Screenshots an uns senden.

  Das Ergebnis  

[ Teil 1 ] [ Teil 2 ]

 

 
Firefox 3
Firefox 2
PTC, more than design!(c)2009 by NeoRame, MrElchbau
Design (c)2008 by NeoRame, MrElchbau
Downloadsystem powered by
Olate Download
PicLens RSS