Support › Skins und Farbthemen der App erstellen/bearbeiten
Wenn Sie auch nur über grundlegende gestalterische Fähigkeiten verfügen, können Sie Skins/Themes für AllMyNotes Organizer erstellen. Lesen Sie unten, wie das funktioniert. Um die Erstellung neuer Skins zu fördern, bieten wir sogar eine Deluxe Edition-Lizenz für AllMyNotes Organizer an, wenn die folgenden zwei Bedingungen erfüllt sind:
1. Der Skin, das Theme oder ein kleines Element davon sieht gut genug aus, um mit der Anwendung verteilt oder auf unserer Website veröffentlicht zu werden, oder wir halten zumindest einige Elemente für geeignet, sie in andere Skins zu übernehmen;
2. Stellen Sie uns die Quelldatei Ihrer Grafiken (.psd-Datei) zur Verfügung. Wir benötigen sie, weil wir regelmäßig neue Grafikelemente und Symbole hinzufügen. Ohne diese Datei können wir den Skin nicht weiter pflegen.
--- So erstellen Sie Skins für AllMyNotes Organizer (Entwurf der Anleitung) ---
Die Skin-Dateien befinden sich unter c:\Program Files\AllMyNotes Organizer\Skins older. Derzeit finden Sie dort zwei Skins - Holy Crown und Deep. Jeder befindet sich in einem eigenen Ordner.
Jeder Ordner enthält zwei Dateien:
1. SkinInfo.ini - enthält alle Farben und Maße des Skins.
2. .png-Datei mit den grafischen Skin-Elementen. Die Koordinaten der Steuerelemente in dieser Bitmap werden in SkinInfo.ini gespeichert
So erstellen Sie einen neuen Skin:
1. Kopieren Sie einen der vorhandenen Skins in einen anderen Ordner
2. Benennen Sie im kopierten Skin den Skin-Namen in SkinInfo.ini um - siehe Eintrag FileDescription. Idealerweise sind Ordnername und Skin-Name identisch. Das ist im Wesentlichen alles. Ab jetzt können Sie Farben ändern, die Bitmap bearbeiten und vieles mehr.
Weitere Tipps:
1. Normalerweise erstellen wir Skins mit PhotoShop im Dateiformat .psd. Damit lassen sich leistungsfähige Effekte, Ebeneneffekte und Transparenz nutzen. Wenn die Skin-Bitmap fertig bearbeitet ist, exportieren wir die Daten in die .png-Datei des Skins. Ausschließlich mit .png-Dateien zu arbeiten wird ausdrücklich nicht empfohlen, da dies für den Grafiker mühsam ist und spätere Erweiterungen erschwert.
2. Wenden Sie sich gern an Vladonai Software, wenn Sie Ressourcen benötigen. Wir können Ihnen Grafiken zur Verfügung stellen, die wir bereits für Skins verwendet haben, sowie weitere Tipps aus unserer Erfahrung.
Der Inhalt der Bitmap und von SkinInfo.ini ist weitgehend selbsterklärend. Die Einträge sind sinnvoll benannt, und wir haben die Bitmap beschriftet, um die Erstellung neuer Skins zu erleichtern. Wenn Sie Informationen zur Bedeutung der Symbole in Symbolleisten, Menüs, Schaltflächen oder der Baumansicht benötigen, kontaktieren Sie uns. Wir stellen Ihnen gern weitere Details und Ressourcen zur Verfügung.
P.S. Hier ist ein kurzes visuelles Beispiel dafür, wie Bildkoordinaten in der Datei SkinInfo.ini dargestellt werden:
Aufbau der SkinInfo.ini
SkinInfo.ini ist eine einfache Textdatei mit Zeilen im Format Name=Value, die in Abschnitte unterteilt sind: Skin-Informationen, Farbthemen, Farben, Texteditor, Abmessungen, Schriftarten und Bitmap-Zuordnung (alle Einträge mit SB_*). Zeilen, die mit ** oder // beginnen, sind Kommentare - ein praktischer Platz, um einen alten Wert aufzubewahren, statt ihn zu löschen. Farben können als #RRGGBB (direkt aus Photoshop kopiert) oder als R,G,B angegeben werden - #FFFFFF und 255,255,255 stehen für dasselbe Weiß.
Lassen Sie ProjectSignature und RequiredAppBuildNumber unverändert: Diese Angaben teilen der Anwendung mit, dass es sich um einen AllMyNotes-Skin handelt und welche Build-Version erforderlich ist. Ändern Sie FileDescription - das ist der Skin-Name, der im Menü angezeigt wird.
Farbthemen: ein Skin, zwanzig Stimmungen
Ein Skin muss nicht immer gleich aussehen. Jede Zeile ThemeEffects_N ist wie ein Rezept: Beim Laden des Themas nimmt die Anwendung die Bitmap des Skins und wendet eine Reihe von Bildfiltern von links nach rechts darauf an, bevor irgendetwas gezeichnet wird. Die .png-Datei auf der Festplatte bleibt dabei unverändert. So bietet Holy Crown die Themen Sepia, Gold, Coffee, Blueprint und Night Vision auf Grundlage eines einzigen Bildes - eine Bitmap, keine zusätzliche Zeichenarbeit, und Photoshop hat davon nicht einmal etwas mitbekommen.
Das Format: zuerst der Themenname in doppelten Anführungszeichen, danach die durch | getrennten Effekte. ThemeEffects_Default (ohne Namen) wird auf den Skin selbst angewendet. Nummerieren Sie die Themen lückenlos mit 1, 2, 3... - die Anwendung liest sie nur bis zur ersten fehlenden Nummer. Ein Thema nach einer solchen Lücke wird daher stillschweigend ignoriert. Die Zeilen ThemeEffectsM3_N funktionieren genauso und erfordern AllMyNotes 3 oder neuer. Farbthemen sind eine Funktion der Deluxe-Edition.
Von Weiß zu Schwarz mit einer einzigen Zeile
Sie möchten aus einem hellen Skin eine dunkle Variante machen? Dafür müssen Sie keinen einzigen Pixel neu zeichnen. INVERTBRIGHTNESS verwandelt helle Bereiche in dunkle, erhält dabei aber die Farbtöne. Blau bleibt also blau und wechselt lediglich in die Nachtschicht. Ein einfaches INVERT würde Ihre Blautöne auch in Orange verwandeln - kurz ganz lustig, bis sich Ihre Augen beschweren. Fügen Sie SCALELUMA hinzu, damit das Ergebnis nicht pechschwarz wird, und etwas GRAYSCALE, um Farben zu beruhigen, die im Dunkeln plötzlich zu leuchten beginnen:
Die Holy-Crown-Themen "Night Vision Glow" und "Night Vision Gray" werden genau so erstellt. Vergessen Sie die Textfarben nicht: Die Filter verändern die Bitmap, während die Farben im Abschnitt Farben unverändert bleiben - ein dunkelgrauer FontColor auf einem inzwischen dunklen Hintergrund ist eine ausgesprochen elegante Methode, Ihre Notizen vor sich selbst zu verstecken.
Effekte, die Sie kombinieren können
| Effekt | Was er bewirkt |
|---|---|
| AUTOLEVELS | Erweitert den Helligkeitsbereich auf die vollen 0-255. Praktisch die Schaltfläche für „weniger ausgewaschene Farben“. |
| GRAYSCALE | Entfernt die Farben; GRAYSCALE40 reduziert sie nur um 40%. Sofortiger Wechsel in den seriösen Geschäftsmodus. |
| SEPIA | Farbtöne alter Fotografien. Ihre Notizen von gestern sehen plötzlich aus, als wären sie 1890 geschrieben worden. |
| INVERT, INVERTBRIGHTNESS | INVERT kehrt alle Farben um (wie ein Filmnegativ), INVERTBRIGHTNESS vertauscht nur Hell und Dunkel - die richtige Wahl für dunkle Themen. |
| BLUEPRINTLIGHT, BLUEPRINTDARK | BLUEPRINTLIGHT / BLUEPRINTDARK - die Optik einer technischen Zeichnung. Notizen, mit denen man gefühlt eine Brücke bauen könnte. |
| ADJUSTLEVELS | ADJUSTLEVELS:min,max,midSrc,midDst (0-255) - verschiebt die Mitteltöne: 0,255,150,110 macht sie dunkler, 0,255,150,190 heller. |
| BRIGHTNESSCONTRAST | BRIGHTNESSCONTRAST:b,c (-255..255, 0 = keine Änderung). Bewirkt genau das, was der Name verspricht. |
| HUESATURATIONLIGHTNESS | HUESATURATIONLIGHTNESS:h,s,l - Farbtonverschiebung von -360..360, Sättigung und Helligkeit in Prozent. Drehen Sie den Farbton um 180, und der gesamte Skin wandert auf die gegenüberliegende Seite des Farbkreises. |
| REPLACECOLOR | REPLACECOLOR:#from,#to,fuzziness - ersetzt eine Farbe durch eine andere; die Toleranz 0..180 bestimmt, wie ähnlich Farben sein dürfen. Die Holy-Crown-Themen Gold, Coffee, Pink und Sea verwenden alle denselben Trick, nur mit einem anderen #to. |
| SCALELUMA | SCALELUMA:min,max (0-1000) - begrenzt die Helligkeit auf einen Bereich: 250,950 = knackigeres Bild, 0,500 = alles höchstens halb so hell, ideal für Nachteulen. |
| SCALESATURATION | SCALESATURATION:min,max (0-1000) - dasselbe für die Sättigung: Erhöhen Sie den Mindestwert, und blasse Farben gewinnen an Ausdruckskraft. |
Die wichtigsten Elemente und was passiert, wenn Sie daran drehen
Einige Einträge aus Holy Crown, was sie steuern und welche Auswirkungen ihre Änderung hat:
| Eintrag | Was sich ändert (und die Nebenwirkungen) |
|---|---|
| WindowBackgroundColor=#DAE1F0 | Die Hintergrundfläche hinter allen Bereichen. Ändern Sie sie, und die ganze Anwendung bekommt eine andere Stimmung - wie ein Zimmer mit neuer Tapete. |
| FontColor=#636363 | Die Haupttextfarbe. Setzen Sie sie auf denselben Wert wie ViewBackgroundColor, und schon haben Sie unsichtbare Tinte erfunden - hervorragend für Geheimnisse, weniger gut für produktives Arbeiten. |
| MenuFontColor=#6080BD MenuSelectionColor=#a9beef MenuBackgroundColor=#FAFAFA | Menütext, die Auswahlleiste unter dem Mauszeiger und der Menühintergrund. Wählen Sie eine knallige Auswahlfarbe, und jeder Menübesuch wird zur kleinen Disco. |
| TextEditorSelectionColor=#f6d595 TextEditorInactiveSelectionColor=#f8ebd3 | Die Hervorhebung, die beim Markieren von Text in einer Notiz erscheint (die inaktive Variante gilt, wenn der Editor nicht den Fokus hat). Wählen Sie eine dunkle Farbe, und der markierte Text wird genau dann unlesbar, wenn Sie ihn kopieren möchten. |
| TreeOutlineColorHighlighted=#D0BF91 | Der abgerundete Rahmen um den ausgewählten Ordner in der Baumansicht. Ein dezentes „Sie sind hier“-Schild. |
| DistBetweenControls=4 DistBetweenCtlAndBorder=5 | Abstände zwischen den Bereichen sowie zwischen den Bereichen und dem Fensterrand, in Pixeln. Bei 4 ist alles schön kompakt; bei 40 driften die Bereiche auseinander wie Kontinente. |
| FontNormalName=Amelian.TTF FontMenuName=segoepr.ttf FontEditName=TENAHB48.TTF FontWndTitleName=Orbitbn.ttf FontWndTitleBolded=TRUE FontHintName=Amelian.TTF | Ein Skin kann eigene Schriftarten für fünf Bereiche mitbringen: normalen Oberflächentext (FontNormal), Menüs (FontMenu), den Notizeditor (FontEdit), Fenstertitel (FontWndTitle, zusammen mit FontWndTitleBolded=TRUE) und Tooltips (FontHint). Ohne diese Einträge wird die Systemschrift verwendet. Die .ttf-Datei wird aus dem Skin-Ordner oder dem Windows-Ordner Fonts geladen (von dort stammt beispielsweise Segoe Print, segoepr.ttf). Segoe Print in Menüs sieht genau einen Tag lang charmant aus; Orbitbn.ttf im Fenstertitel verleiht der Anwendung etwas länger den Charakter einer Raumschiffkonsole. Die Einträge ...Size funktionieren weiterhin, aber die Textgröße lässt sich inzwischen viel einfacher in den Einstellungen der Anwendung ändern - lassen Sie den Skin also die Schriftart bestimmen und den Benutzer die Größe wählen. |
| SkinBitmap=HolyCrown.png SB_Button_NormalCoord=69,108 SB_Button_LeftPieceWidth=10 SB_ScrollBarWidth=16 | Alles mit dem Präfix SB_ verweist auf einen Bereich in der .png-Datei: Coord gibt die x,y-Koordinaten des oberen linken Pixels eines Elements an. Die Breiten LeftPiece / Fill / RightPiece bestimmen seine Aufteilung - die Randstücke werden unverändert gezeichnet, das mittlere Füllstück wird gestreckt. Ändern Sie hier eine Größe, ohne die Pixel in der .png-Datei zu verschieben, schneidet die Anwendung das Bild an den falschen Stellen aus - und Ihr Skin beginnt seine Picasso-Phase. |
Änderungen schnell in der Anwendung ansehen
AllMyNotes liest SkinInfo.ini und die .png-Datei nur zu zwei Zeitpunkten: beim Start und wenn Sie im Menü Skins einen Skin oder ein Thema auswählen. Das bloße Speichern der Datei bewirkt nichts. Sie müssen die Anwendung aber nicht nach jeder kleinen Änderung neu starten:
1. Bearbeiten Sie SkinInfo.ini (oder exportieren Sie die .png-Datei) und speichern Sie die Datei.
2. Wählen Sie im Menü Skins einen beliebigen anderen Skin oder ein anderes Thema und anschließend wieder Ihren eigenen Skin beziehungsweise Ihr Thema. Bei jeder Auswahl werden die Dateien erneut von der Festplatte gelesen. Der zweite Klick zeigt daher Ihre Änderungen - der ganze Wechsel dauert ungefähr eine Sekunde.
Wenn Sie den bereits ausgewählten Skin erneut anklicken, passiert überhaupt nichts - die Anwendung entscheidet höflich, dass es nichts zu ändern gibt. Wechseln Sie immer erst zu einem anderen und dann wieder zurück.
Die Skin-Liste im Menü wird nur einmal pro Sitzung erstellt. Wenn Sie einen neuen Skin-Ordner hinzufügen oder einen Skin (FileDescription) beziehungsweise ein Thema umbenennen, starten Sie AllMyNotes einmal neu, damit der neue Name erscheint. Und falls Ihr Skin plötzlich genauso aussieht wie Holy Crown, konnte die Anwendung Ihre Datei nicht laden und hat auf den Standard-Skin zurückgegriffen - überprüfen Sie die zuletzt geänderte Zeile.
Tipp: Der Ordner Skins liegt unter Program Files, daher verweigert Windows dort möglicherweise das Speichern. Starten Sie Ihren Editor als Administrator oder verwenden Sie die portable Version, bei der die Skins in einem normalen Ordner liegen.
Hinweis: Die Lite Edition ist auf 2 Skins beschränkt, während die Deluxe Edition weitere Themes bietet.
Viel Spaß! :-)