Iconset für Dark/Light Themes erstellen (DOpus v.13)

Fertige Lösungen für Schalter, Skript-Addins, Umbenennen-Vorlagen, usw.
Einige Schalter und Script-Anwendungen funktionieren erst ab der Version 12
Antworten
Benutzeravatar
Kundal
Moderator
Beiträge: 133
Registriert: 24. Okt 2021 18:02
Betriebssystem: Windows 10 Pro

Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von Kundal »

Mit der Version 13 bietet DOpus integrierte Dark und Light Themes an, zwischen denen einfach gewechselt werden kann. Die Themes sind in hohem Maße frei zu gestalten. Mit dieser Neuerung können nun auch Iconsets erstellt werden, die automatisch helle Versionen der Icons für das Dark Theme und dunkle Versionen für das Light Theme anzeigen können. Ich habe hier ein Skript erstellt, mit dem komfortabel sowohl herkömmliche als auch neue für Dark/Light-Themes geeignete Iconsets erstellt werden können. Das Script stellt den Schalterbefehl CreateIconset mit verschiedenen Argumenten zur Verfügung. Im Normalfall (d.h. ohne das Argument NODIALOG) öffnet sich ein Dialog, in dem verschiedene Einstellungen vorgenommen werden können.

Das Skript funktioniert auch unter DOpus v12 einwandfrei. Die für Dark/Light Themes erstellten Iconsets werden von DOpus v12 akzeptiert, es werden dort aber nur die schwarzen (Light Theme) Icons angezeigt.

Voraussetzungen
Für die Erstellung der benötigten Multi-Bilddateien wird das Kommandozeilen-Tool montage.exe benötigt. Das Tool ist Bestandteil von ImageMagick und kann mit der portablen Version von ImageMagick heruntergeladen werden (Direktlink am Ende des Beitrags). Da montage.exe freie Software ist, habe ich sie mit in den Download von CreateIconset gepackt. Der Pfad zu montage.exe muss in der Skript-Konfiguration angegeben werden. Als Standard habe ich da /dopusdata\User Data eingetragen.

Skript-Konfiguration
In der Konfiguration des Skripts können folgende Voreinstellungen vorgenommen werden:
1) Appendix: Da sich für Dark/Light Icons helle Icons (für Dark Theme) und dunkle Icons (für Light Theme) mit identischem Namen im selben Ordner befinden müssen, müssen die Icons für das Dark Theme (die hellen) einen Appendix bekommen. Die Vorgabe ist _0. Es kann auch ein anderer Appendix gewählt werden.
2) Artist: Hier kann optional der Autor/Künstler des Iconsets angegeben werden. Diese Angabe wird in den Einstellungen für das Symbolset angezeigt.
3) Copyright: Kann ebenfalls optional angegeben werden, standardmäßig in der Form (c) [Jahr] [Name].
4) Category: Hier können eigene Kategorien angegeben werden, die in die Auswahlbox im Dialog aufgenommen werden. Die Kategorien ermöglichen im Schalter-Editor das Filtern nach Kategorie bei der Auswahl eines Icons.
5) Language: die Sprache des Dialogs. Es stehen deutsch und englisch zur Auswahl. Standard ist deutsch.
6) Small_Icons: Die Größe der kleinen Icons. Standard ist 22 (22x22 Pixel) Es können auch 20 oder 24 eingestellt werden, aber es sollten in der Skript-Konfiguration keine großen Werte für hohe DPI-Einstellungen eingestellt werden. Die voreingestellten Werte sind eigentlich für alle Zwecke gut.
7) Large_Icons: Die Größe der großen Icons (Standard 32).
8) Small_Icons_HighDPI: Die kleinen Icons bei hohem DPI-Faktor (Standard 48).
9) Large_Icons_HighDPI: Die großen Icons bei hohem DPI-Faktor (Standard 64).
10) PathMontage: Wie oben beschrieben der Pfad zur montage.exe
11) PathOutput: Pfad in den die Iconset-Datei [Iconsetname].dis kopiert werden soll. Standardmäßig wird sie im Arbeitsordner in einem neuen Ordner "Iconset" abgelegt. Falls die Datei bereits besteht wird die ältere Version umbenannt. Wird der Pfad auf {sourcepath} geändert, werden dort bereits vorhandene Dateien gleichen Namens gelöscht. Wenn der Prozess beendet ist (kann bei vielen Icons etwas dauern) wechselt CraeteIconset automatisch zum Ausgabeordner und markiert die neue Datei.

Der Dialog
Das Script stellt den Schalterbefehl CreateIconset zur Verfügung. Ohne weitere Argumente öffnet der Befehl den Dialog mit folgenden Voreinstellungen:
Name des Iconsets: Name des aktuellen Ordners. Es ist also sinnvoll, die zu verarbeitenden Bilddateien in einen Ordner mit dem gewünschten Namen des Iconsets zu kopieren.
Icongrößen: kleine Icons 22, große Icons 32, kleine Icons für High-DPI 48, große Icons für High-DPI 64. Diese Größen entsprechen den Standardeinstellungen von GPSoft für ein "DPI-Aware" Iconset. Für die Verwendung auf verschiedenen Systemen mit unterschiedlichen DPI-Einstellungen sind diese Einstellungen gut geeignet.
Basis-DPI: Standard 100. Für ein Iconset zur Verwendung auf verschiedenen Systemen sollte der Standardwert behalten werden.
Copyright und Autor: Leer oder Einstellung in der Skript-Konfiguration
Kategorie: Leer, hier kann eine eigene Kategorie eingetragen oder eine der Standardkategorien aus dem Popup ausgewählt werden. In der Konfiguration eingetragene Kategorien sind in der Auswahl ebenfalls enthalten.
Icons für hohe DPI-Einstellungen: Standardmäßig aktiviert. Für ein "DPI-Aware" Iconset, das auf verschiedenen System funktioniert muss dieses Fels aktiviert bleiben, da sonst keine großen Icons erstellt werden und die entsprechenden Skalierungsanweisungen nicht in die XML geschrieben werden.
Automatisch skalieren (System-DPI): Die Icon-Größen werden automatisch für das aktuelle System skaliert und der Faktor der System-DPI als Basis eingetragen. Sinnvoll für ein Iconset, das ausschließlich für das aktuelle System (oder andere mit den gleichen DPI-Einstellungen) erstellt wird. In diesem Fall kann auch das Feld Icons für hohe DPI-Einstellungen deaktiviert werden. Es werden dann nur kleine und große Icons passend skaliert für die DPI-Einstellungen des Systems erstellt.
Iconset für Dark/Light Themes erstellen: standardmäßig deaktiviert. Wenn aktiviert, wird ein Iconset mit dunklen und hellen Icons für Dark/Light Themes erstellt. Dies erfordert eine besondere Vorbereitung der Icon-Dateien.
Dateinamen-Appendix für Dark-Theme-Icons: Vorgabe _0. Wie bei der Skript-Konfiguration beschrieben müssen die Icons zwingend identische Namen haben und durch einen Appendix unterscheidbar gemacht werden. Es ist wichtig, dass die hellen Icons (für Dark Theme) den Appendix bekommen, da die Icons sonst falsch zugeordnet werden. Die Prüfung und Sortierung der Paare übernimmt dann CreateIconset. Bilddateien, die kein passendes Paar bilden werden aussortiert.
CreateIconset.png

Weitere Dialoge
- Wenn keine Bilddateien (grp:Bilder) oder SVG-Dateien im Ordner gefunden wurden, erscheint eine Fehlermeldung und der Vorgang wird abgebrochen.
- Wenn ein Dark/Light-Iconset erstellt wird, gibt es ebenfalls eine Fehlermeldung mit Abbruch wenn keine geeigneten Icon-Paare gefunden wurden.
- Wenn beim Erstellen eines Dark/Light Iconsets Dateien aussortiert wurden, weil sie kein Paar bilden erscheint eine Info-Meldung mit Angabe der Anzahl der aussortierten Dateien. Klick auf OK erstellt das Set trotzdem, Abbrechen bricht den Vorgang ab.

Schalterbefehl und Argumente
Der Befehl CreateIconset öffnet den Hauptdialog. Es stehen folgende Argumente zur Verfügung, die die Vorgaben der Skript-Konfiguration überschreiben können:
NAME den Namen des Iconsets angeben
DARKLIGHT ein Iconset für Dark/Light Themes erstellen.
AUTOSCALE Die Funktion automatisch skalieren aktivieren
NOHIGH keine großen Icons für hohe DPI-Einstellungen erstellen
NODIALOG das Iconset wird erstellt ohne den Dialog zu öffnen.
Der Befehl CreateIconset NODIALOG erstellt also mit einem Klick ein Standard Iconset mit für hohe DPI-Einstellungen skalierbaren Icons. Wird zusätzlich das Argument DARKLIGHT angefügt wird ein entsprechendes Dark/Light Iconset erstellt.

Ausgangsmaterial für Iconsets
Montage.exe verarbeitet so ziemlich alle denkbaren Bildformate in allen Größen und Maßen. Natürlich wird die Qualität des Ergebnisses eher schlecht sein, wenn die Quelldateien sehr klein sind und hochskaliert werden müssen. Wenn die Quelldateien nicht quadratisch sind, werden sie durch die Skalierung verzerrt. Wenn du also deine Urlaubsfotos zu Icons verarbeiten willst, solltest du vorher quadratische Ausschnitte erstellen.
Absolut tabu sind eigentlich nur Dateien, die mehrere Bilder enthalten (z.B. *.tiff). montage.exe würde die Bilder auspacken und verarbeiten. Da die Iconset-XML von diesen Dateien nichts weiß, würde es zu fehlerhaften Zuordnungen kommen.

Ausgangsmaterial für Dark/Light Iconsets
Frei verfügbare kostenlose Icons sind auf vielen Seiten im Netz zu bekommen. Wenn man aber größere Sammlungen sucht, muss man eher den Entwicklern in den Kochtopf schauen, z.B. auf Github.
Für Dark/Light-Icons werden im einfachsten Fall schwarze und weiße Versionen der Icons benötigt. Farbige Icons funktionieren ja meist für beide Themes. Ich habe einige, z.T. sehr große Sammlungen gefunden, die für so ziemlich jeden Zweck ein Icon beinhalten. Die Links sind Direkt-Downloads der Quelldateien. Alle Icons liegen im SVG-Format (Scalable Vector Graphic) als schwarze Icons vor. Das Format hat den Vorteil, ohne Qualitätsverlust beliebig skalierbar zu sein. Der Nachteil ist, dass herkömmliche Tools wie Magick oder Nconvert mit dem Format nichts (gutes) anfangen können. Die Originale sind meist winzig (z.B. 20x20 Pixel) und müssen vor der Verarbeitung skaliert werden. Da SVG's einfache Textdateien (XML) sind, kann man das mit einem Texteditor erledigen. Ich habe dem Download-Paket einen Schalter (Label: SVG-Dateien vorbereiten) beigelegt, der alle ausgewählten SVG's auf die gewünschte Größe bringt. Der Schalter erledigt auch gleich das Umbenennen der unschönen Icon-Namen, die-meist-mit-Bindestrichen-versehen-sind. Bindestriche und Unterstriche werden dabei durch Leerzeichen ersetzt. Leerzeichen sind kein Problem für CreateIconset und DOpus, auch nicht im Namen des Iconsets. Im Download-Paket musst du zunächst den Ordner mit den SVG-Dateien finden. Den Ordner herauskopieren und am besten gleich nach dem gewünschten Namen des Iconsets umbenennen. Bei sehr vielen Icons muss sich der Ordner in einem kurzen Pfad (z.B. D:\Mein Iconset) befinden, weil montage.exe sonst streikt. Bei mir ist mit kurzem Pfad bei ca. 1000 Icons das Limit erreicht, bei längeren Pfaden schon bei ein paar hundert. Die größte Sammlung hat 7367 Icons, mit den weißen Icons also 14734 Dateien! Da sollte man vorher auswählen, was man haben will oder in mehrere Sets aufteilen.

Update:
Die Verwendung von XnConvert ist nicht mehr nötig. Ich habe dem Download-Paket jetzt einen Menü-Schalter beigelegt, in dem ein Schalter zum Erzeugen weißer SVG-Dateien enthalten ist. Der Schalter erzeugt direkt weiße SVG's mit dem Appendix _0. Es ist auch ein neuer Schalter zur Änderung der Größe enthalten. Der alte hat nicht richtig funktioniert und einige Icons zerstört. Ich kann nicht garantieren, dass diese Schalter mit allen SVG's funktionieren. Mit den von mir unten verlinkten Icon-Sammlungen funktionieren die Schalter aber. Der Schalter zur Größenänderung kann auch mehrfach für die gleichen Dateien verwendet werden. Der Invertieren-Schalter kann nur von schwarz nach weiß invertieren, nicht umgekehrt.
Zum Umbenennen enthält das Menü zwei Varianten. Einmal werden nur Unterstriche und Bindestriche durch Leerstellen ersetzt, der andere benennt nach der Vorlage "Titlecase" um, d.h. alle Worte außer Bindeworte werden mit großem Anfangsbuchstaben geschrieben. Außerdem sind einige Schalter zur Erstellung verschiedener Iconset-Varianten ohne Dialog enthalten. Der Hauptschalter des Menüs öffnet den CreateIconset-Dialog.

Menü.png

Wenn man die SVG-Dateien in PNG-Dateien konvertieren möchte kann man XnConvert verwenden. XnConvert kann die schwarzen SVG's in PNG's konvertieren und zugleich die Farben invertieren. Dafür das Tool (portable - ohne Installation lauffähig) öffnen, im linken Register alle gewünschten SVG's hinzufügen (Ordner hinzufügen funktioniert nicht, da werden SVG's nicht gefunden), dann im Register Ausgabe unter Dateiname an die Vorgabe {Filename} den Appendix z.B. _0 anhängen und bei Format PNG: Portable Network Graphics wählen (nicht JPG, damit die Transparenz erhalten bleibt). Dann im Register Verarbeitungen=>Verarbeitung hinzufügen=>Farbpalette=>Negativ (Invertieren) auswählen. Jetzt kannst du auf Starten klicken und XnConvert erstellt die weißen Icons. Wenn du auch die schwarzen Icons als PNG erstellen willst, deaktiviere die Verarbeitung Negativ (Invertieren), lösche den Appendix vom Ausgabe-Namen und starte das Tool erneut. Für das Iconset solltest du dann natürlich die SVG's aus dem Ordner entfernen.

Jetzt nur noch den Schalter mit dem CreateIconset-Befehl deiner Wahl betätigen, ggfs. im Dialog Einstellungen vornehmen (Haken bei Iconset für Dark/Light Themes erstellen nicht vergessen) und fertig ist das Iconset.
XnConvert.png
Direkte Download-Links zu den Icon-Sammlungen
Akar-Icons 393 Icons/370 KB
Font-Awesome 2025 Icons, 3,43 MB
Ionicons-Icons 1338 Icons, 1,63 MB
MaterialDesign 7367 Icons, 3,57 MB
Dripicons 200 Icons 4,63 MB
Zondicons 298 Icons, 99 KB
XnConvert portable
XnConvert portable 64-bit, 48,2 MB
XnConvert portable 32-bit, 30,6 MB
ImageMagick portable
ImageMagick portable

CreateIconset
Inhalt: CreateIconset.osp (Skriptpaket)
CreateIconset (Menü-Schalter)
montage.exe
License.txt (montage-Lizenz)
CreateIconset.zip
(9.28 MiB) 345-mal heruntergeladen
Benutzeravatar
Kundal
Moderator
Beiträge: 133
Registriert: 24. Okt 2021 18:02
Betriebssystem: Windows 10 Pro

Re: Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von Kundal »

Ich habe das Script unter DOpus v12 getestet und geringfügige Änderungen vorgenommen. Es wurden lediglich die Icons im Dialog unter v12 nicht angezeigt. Die für Dark/Light Themes erstellten Iconsets funktionieren auch mit v12, allerdings werden da natürlich nur die schwarzen (Light Theme) Icons angezeigt. Die Mindestversion für das Skript (vorher 13.0.50) habe ich aufgehoben und auf 12.0.0 gesetzt, so dass das Skript jetzt auch mit Dopus 12 ohne Fehlermeldung installiert werden kann.
Benutzeravatar
josinoro
Supporter
Beiträge: 182
Registriert: 10. Nov 2021 20:56
Betriebssystem: Windows 10 Pro
DOpus Version: 13

Re: Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von josinoro »

Hallo Kundal,

vielen Dank für die ausführliche Anleitung und deine Mühe.

Zur Info:

Der Link zu Zondicons liefert mir ein leeres Archiv,
die Links zu ImageMagic portable sind nicht erreichbar.

Liebe Grüße

josinoro
Benutzeravatar
Kundal
Moderator
Beiträge: 133
Registriert: 24. Okt 2021 18:02
Betriebssystem: Windows 10 Pro

Re: Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von Kundal »

Hallo josinoro, Die Links zu ImageMagick haben sich geändert, weil es eine neue Version gibt. Da das immer wieder den Link unbrauchbar machen wird, habe ich da jetzt keine Direktlinks mehr, sondern nur den Link zur Download-Seite.
Zondicons funktioniert bei mir. War allerdings der einzige HTTP-Link. Habe ich zu HTTPS geändert und getestet. War deinem System vielleicht nicht sicher genug.
Benutzeravatar
Kundal
Moderator
Beiträge: 133
Registriert: 24. Okt 2021 18:02
Betriebssystem: Windows 10 Pro

Re: Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von Kundal »

Ich habe einige Änderungen vorgenommen. Der alte Schalter zur Größenänderung hat einige Icons zerstört, weil er auch die Größe einzelner Elemente der Icons geändert hat. Im Download-Paket ist deshalb ein neuer Schalter dafür. Außerdem wird XnConvert nicht mehr benötigt, weil es jetzt einen Schalter zur Erzeugung weißer SVG's gibt. Mehr dazu im ersten Post.

Übrigens: Um die SVG's in der Vorschau ansehen zu können braucht es einen Preview-Handler. Von den von mir getesteten funktioniert der hier am besten. Die Anwendung besteht aus einem Thumbnail-Handler, einem Preview-Handler und einem Text-Editor für SVG's. Die Thumbnails funktionieren leider nicht für weiße SVG's (weiß auf weißem Hintergrund). Die Vorschau funktioniert aber gut. Da kann man sogar wahlweise auch den Text der Dateien anzeigen lassen und die Hintergrundfarbe mit einem Schieberegler ändern.
Benutzeravatar
Kundal
Moderator
Beiträge: 133
Registriert: 24. Okt 2021 18:02
Betriebssystem: Windows 10 Pro

Re: Iconset für Dark/Light Themes erstellen (DOpus v.13)

Beitrag von Kundal »

Update auf Version 1.1
  • CreateIconset funktionierte nicht, wenn in der Skript-Konfiguration "default" ausgewählt war und die derzeitige Sprache in DOpus eine andere als englisch oder deutsch war.
  • Wenn die Dateiendung DIS in Voreinstellungen=>Einstellungen=>Zip- & andere Archive=>Zip-Dateien nicht in die Liste derZip-Dateien eingetragen war, gab es einen Fehler beim Verschieben des Icon-Archivs.
Antworten