Hübsche(re) Audacity Themes

Eine (unvollständige) Bastelanleitung

Nichts gegen Audacity, als Einsteigenden-Audiotool hat es – auch jenseits einiger Scharmützel mit der Open Source-Community und dadurch ausgelöster Forks – sicherlich seine Berechtigung. Die Benutzendenoberfläche ist designmäßig aber nahe an einer Zumuntung und kann Schmerzen verursachen. Die verfügbaren Darstellungsmöglichkeiten, ab Werk "Klassisch", "Dunkel", "Hell" und "Hoher Kontrast", sind wirklich keine Freude:

Anlässlich des Release der Version 3.3.x habe ich daher das dringende Bedürfnis verspürt, das zu ändern. Wie immer, zuerst eine Vorschau auf

Das Ergebnis

Im Vergleich zu den mitgelieferten können Custom Themes einigermaßen hübsch aussehen. Hier eine Vorschau (m)einer Variante in Anlehnung an Adobe Audition mit dunkler Oberfläche und grünen und violetten Highlights:

 
 

Die Erstellung eines eigenen Themes für Audacity ist nur "so mittel" dokumentiert, vor allem seitdem das Handbuch und die Doku überarbeitet wurden und immer noch werden. Aber mittels viel "Versuch und Irrtum" findet man die richtigen Grafiken, Icons und Farben, die man austauschen möchte. Meine Erkenntnisse gliedern sich so:

Ein Custom Theme?

Um ein Theme zu erstellen, kann man entweder den Code ändern (s. hier) oder – wie ich – den Hinweis

"It is recommended to only use the ImageCache.png to distribute themes, not to author them. This is due to the ImageCache breaking whenever buttons are added or removed from Audacity, which may happen more often in the coming releases."

ignorieren 😆 und ein Design mittels der Grafik "ImageCache.png" erstellen. Dass dieses Vorgehen tatsächlich problembehaftet ist und der "ImageCache" nach Updates der Software oft fehlerhaft ist, wissen diejenigen Menschen (incl. mir) bereits, denen z.B. nach dem Enfernen der Cut/Copy/Paste/Delete-Toolbar (ab Version 3.2.0) und dem Re-Integrieren (ab Version 3.2.3) plötzlich die entsprechenden Buttons fehlen 🙄 – und in dem aus den Dev Resources herunterladbaren ImageCache (Link) fehlen diese Buttons weiterhin…

Einen ImageCache für das Theme "Hell" incl. der Cut-, Copy-, Paste- & Delete-Buttons, kompatibel mit Audacity v.3.3.2 habe ich mal hier abgelegt. Diese Grafik kann man für gewünschte Änderungen als Basis nutzen oder direkt meine modifizierte Version herunterladen:

ImageCache „Hell“ als Grundlage für Änderungen (Direktlink)

… oder direkt meine Version hier herunterladen (Direktlink).


Wenn man nun Audacitiy startet und via > Bearbeiten > Einstellungen > Schnittstelle > Thema ein "Eigenes" einstellt, wird unter Windows – Infos für weitere Betriebssysteme hier – ein Ordner unter C:\Users\<username>\AppData\Roaming\Audacity\Theme\custom\ angelegt. Dort legt man die Grafik ab und startet Audacity einmal neu. (Der Ordner AppData ist standardmäßig ausgeblendet, den kann man aber sichtbar machen.)

Die png-Datei muss bei allen Änderungen ihren Namen "ImageCache.png" behalten!

Ab jetzt kann man in einem beliebigen Grafikprogramm Änderungen an dem ImageCache vornehmen. Audacity muss nun nicht mehr jedes Mal neu gestarte werden, allerdings müssen einmal die Einstellungen bestätigt werden. Das geht am schnellsten mit

  1. [Strg] + [P] (öffnet die Einstellungen, die stehen immer noch auf "Schnittstelle" und das Thema auf "Eigenes") und
  2. [Enter], was dem OK-Button entspricht.

Dann wird die Oberfläche im laufenden Betrieb neu erstellt und zeigt die Änderungen:

So. Dann kanns losgehen:

Abspielbuttons

Recht zentral sind die großen Abspielbuttons ("Transport Toolbar"). Für jeden Button werden vier Hintergründe in zwei Varianten (Windows/Linux vs. MacOC) und jeweis mind. zwei Icons ("active" und "disabled") benötigt. Um sich im ImageCache zurecht zu finden, habe ich diese folgendermaßen durchnummeriert:

  1. Hintergrundgrafiken Windows in den Stati "normal" (1a), "active" (1b), "hover" (1c) und "active hover" (1d),
  2. Hintergrundgrafiken Mac in den Stati "normal" (2a), "active" (2b), "hover" (2c) und "active hover" (2d),
  3. Icon "Pause" in "available" (3a) und "disabled" (3b),
  4. Icon "Play" in "available" (4a) und "disabled" (4b),
  5. Icon "Schleife" in "available" (5a) und "disabled" (5b),
  6. Icon "Play, Markierung überspringen" in "available" (6a) und "disabled" (6b),
  7. Icon "Stop" in "available" (7a) und "disabled" (7b),
  8. Icon "Rewind" in "available" (8a) und "disabled" (8b),
  9. Icon "Fast Forward" in "available" (9a) und "disabled" (9b),
  10. Icon "Aufnahme" in "available" (10a) und "disabled" (10b),
  11. Icon "Aufnahme in neuer Spur" in "available" (11a) und "disabled" (11b),
  12. Icon "Aufnahme im Anschluss" in "available" (12a) und "disabled" (12b).

Diese Nummerierung hilft bei der Ortung, diese Bestandteile findet man mit entsprechenden Nummerierung im ImageCache hier.

Ich habe mich für ein schlichtes, dunkles Design entschieden. Die Photoshop-Nutzer:innen werden die Ebenenstile Kontur, Schatten nach innen, Verlaufsüberlagerung, Schlagschatten erkennen, mit denen der räumliche Eindruck generiert wird. Der Pause-Button ist hier "active", das Stop-Icon ist "disabled", beim "Rewind"-Button sieht man den hover-Effekt:

Die Transport Toolbar im neuen Gewand

Werkzeug- & Bearbeitungsbuttons

Neben den Abspielbuttons spielen die Bearbeitungsbuttons ("Tools Toolbar", Edit Toolbar", "Cut/Copy/Paste Toolbar") und die Pegelanzeigen ("Meter Toolbars") eine zentrale Rolle. Auch hier: Für jeden Button vier Hintergründe in zwei Varianten (eigentlich bescheuert, da hier Mac- und Win-/Lnux-Buttons die gleichen Größen haben 🙄 ) und jeweils zwei Icons. Ausnahme: Tools Toolbar und Meter Toolbars; hier wird nur ein Icon benötigt:

  1. Hintergrundgrafiken Windows in den Stati "normal" (13a), "active" (13b), "hover" (13c) und "active hover" (13d),
  2. Hintergrundgrafiken Mac in den Stati "normal" (14a), "active" (14b), "hover" (14c) und "active hover" (14d),

Tools Toolbar

  1. Icon "Auswahl",
  2. Icon "Hüllkurve",
  3. Icon "Verschieben"
  4. Icon "Zeichnen" und
  5. Icon "Mehrfachwerkzeug",

Meter Toolbars

  1. Icon "Aufnahmepegel" und
  2. Icon "Wiedergabepegel",

Edit Toolbar

  1. Icon "Ganzes Projekt zeigen" (23a. available & 23b. disabled),
  2. Icon "Zoom in" (23a. available & 23b. disabled),
  3. Icon "Zoom out" (23a. available & 23b. disabled),
  4. Icon "Auswahl an Fenster anpassen" (23a. available & 23b. disabled),
  5. Icon "Zoomstufen umschalten" (23a. available & 23b. disabled),
  6. Icon "Audio außerhalb der Auswahl abschneiden" (24a. available & 24b. disabled),
  7. Icon "Auswahl in Stille umwandeln" (25a. available & 25b. disabled),
  8. Icon "Undo" (26a. available & 26b. disabled) und
  9. Icon "Redo" (27a. available & 27b. disabled),

Cut/Copy/Paste Toolbar wieder da seit v3.3.2

  1. Icon "Ausschneiden" (31a. available & 31b. disabled),
  2. Icon "Kpoieren" (32a. available & 32b. disabled),
  3. Icon "Einfügen" (33a. available & 33b. disabled) und
  4. Icon "Löschen" (34a. available & 34b. disabled).

Diese Bestandteile findet man mit entsprechenden Nummerierung im ImageCache hier.

Passend zu den Abspielbuttons sehen die so aus:

Die "neuen" Tools, Edit, Cut/Copy/Paste-Toolbars

Trackbuttons

Die dritte Buttongruppe sind diejenigen der einzelnen Spuren ("Mute", "Solo", "Effekte", etc.); auch hier: Vier Hintergründe in zwei Varianten, diesmal ohne Icons, da sie nur mit Text beschriftet sind:

  1. Hintergrundgrafiken Windows in den Stati "normal" (35a), "active" (35b), "hover" (35c) und "active hover" (35d) und
  2. Hintergrundgrafiken Mac in den Stati "normal" (36a), "active" (36b), "hover" (36c) und "active hover" (36d).

Diese Bestandteile findet man mit entsprechenden Nummerierung im ImageCache hier.

Im meinen Theme sehen die so aus:

Hintergrundgrafiken der Track Buttons

Weitere GUI-Elemente und das Effekte-Panel

  1. Schieberegler ("Slider", horizontal und vertikal, je in standard und hover) für Wiedergabe- und Aufnahmepegel, Panorama- und Spurverstärkung,

    Schieberegler für Pegel (links, oben mit hover), Spurlautstärke (rechts oben) und Panorama (r. u., hover)

  2. Abspielköpfe ("Playheads") für Wiedergabe und Aufnahme, jeweils beweglich und angepinnt,

    Wiedergabe- (grün) und Aufnahmeköpfe (rot), beweglich (Dreieck) und angepinnt (Raute).

  3. Marker für Textspuren (insg. 12 verschiedene Icons, bei denen mir die Hover-Effekte nur begrenzt klar sind 🙄 – daher habe ich die Darstellung auf 4 verschiedene vereinfacht),

    Marker für Textspuren, Punkt 1 mit zentralem, Punkt 2 mit linkem hover.

  4. "Clock"- und "Lock"-Icons für "Spuren synchron halten"-Funktion,

    Uhren- (Track, links) und Schloss-Icon (Clip, rechts)

  5. "Scrub & Seek"-Icons,

    Suchleisten-Buttons, rechts active (grüne Kontur)

  6. Icons für das Echtzeit-Effekte-Fenster

    Power-Icons für Effekte (Phaser: aus), Buttons für Effektnamen (Phaser mit hover) und DropDowns (oberer mit hover).

  7. und verschiedene Setup- und App-Elemente: Audiogeräte-Einrichtung (43a), Share-Button (43b), Logos (43c), Zeitfilter (43d) und "mehr" (43e).

    Buttons für die Audioeinrichtung (links), Share-Button (rechts)

Diese Bestandteile findet man mit entsprechenden Nummerierung im ImageCache hier.

Nicht zuordbare Icons und unveränderliche Cursor

Neben den oben genannten beinhaltet der ImageCache noch eine Reihe weiterer Icons und eine Palette von Cursors. Allerdings sind mir die Icons nie untergekommen, und Änderungen an den Cursors sind wirkungsfrei 🙁 Daher lasse ich diese außen vor. Wenn dazu jemand Details weiß, bitte gerne berichten!

Die (ziemlich chaotische) Farbpalette

Alles weitere des Themes basiert auf verschiedenen Farben, die erstaunlich besch%&#$!n organisiert sind 😡 … Denn in dem ImageCache sind neben den GUI-Elementen noch 110 (in Worten EINHUNDERTZEHN!) Farben hinterlegt, von denen viele, aner nicht alle 🙄 an der ein- oder anderen Stelle in der Audacity-Oberfläche vorkommen. Einen Teil konnte ich auch durch viel Versuch und Irrtum nicht orten (= pink), die anderen sind hier mit Zeile (Z1 – Z4) und Spalte(S01 – P36) aufgelistet:

Die Farbpalette des ImageCache mit Zeilen und Spaltenangaben. Pink sind für mich nicht zuordbaren Farben…

Hintergrundfarben

Zuerst einmal die wichtigsten Hintergrundfarben für die Arbeitsfläche und die Menüs, außerdem Menü-Highlights:

Die fünf wichtigsten Hintergrundfarben

  • Z3 / S  8: Fensterhintergrund
  • Z2 / S29: Menü, Hintergrund
  • Z2 / S28: Menü, Griff, Highlight
  • Z2 / S30: Menü, Griff, Schatten
  • Z2 / S32: Menü, Griff hover
Text- und Counterfarben

Nachdem der Hintergrund eingefärbt ist, sollte man sich um die Textfarben kümmern:

Text- und Counterfarben

  • Z1 / S12: Textfarbe (Menü, Lineal, Track)
  • Z1 / S13: Textfarbe von Textspuren
  • Z3 / S34: Textfarbe der Clip Header
  • Z2 / S11: Textfarbe der Zeitangaben
  • Z2 / S12: Hintergrundfarbe Zeitangabe
  • Z2 / S13: Textfarbe der Zeitangaben markiert
  • Z2 / S14: Hintergrundfarbe Zeitangabe markiert
  • Z3 / S13: Hintergrundfarbe Zeiteinheiten
Spurfarben

Nachdem Hintergründe und Text halbwegs zusammenpassen, geht es nun um die Farben der Spuren:

Farben für Spuren, Spurinfos und Lineal

  • Z1 /   S1: Leere Spur, Hintergrund
  • Z3 /   S4: Leere Spur, Hintergrund, markiert
  • Z2 / S26: Spurinfo, Hintergrund (und: Lineal Hintergrund)
  • Z2 / S27: Spurinfo, Hintergrund, markiert
  • Z2 / S22: Spur, ausgewählt, Kontur innen
  • Z2 / S23: Spur, ausgewählt, Kontur mitte
  • Z2 / S24: Spur, ausgewählt, Kontur außen
Clipfarben

In diesen Spuren befinden sich die einzelnen Audioclips; diese werden folgendermaßen gefärbt:

Farben für Cliphintergrund, -rahmen und -header

  • Z1 /   S2: Clip, Hintergrund (auch: Zeitpur, Hintergrund)
  • Z1 /   S3: Clip, Hintergrund, ausgewählt
  • Z1 / S29: Clip, Rahmenfarbe
  • Z1 / S32: Clip, Rahmenfarbe beim Bewegen
  • Z1 / S30: Clip, Header Hintergrund
  • Z1 / S31: Clip, Header Hintergrund active
  • Z1 / S35: Clip, Header, Hintergrund für ausgewählten Text
Sample- und Waveformfarben

In diesen Clips werden die Audiosamples visualisiert und optional Übersteuerungen angezeigt:

Farben für Samples, Zeit- und Hüllkurve

  • Z1 /   S8: Sample-Farbe
  • Z1 /   S4: Sample-Farbe außen
  • Z1 /   S6: Einzelnes Sample
  • Z1 /   S7: Sample-Farbe, muted
  • Z1 /   S9: Sample-Farbe außen, muted
  • Z2 / S34: Übersteuerung
  • Z2 / S35: Übersteuerung, muted
  • Z1 / S35: Zeitspurlinie und Hüllkurve
Textspur-Farben

Eine spezielle Form der Spuren sind Textspuren. Ihre Farben sind diese:

Farben der Textspuren

  • Z2 / S17: Textspur, Hintergrund
  • Z2 / S18: Textspur, Hintergrund, markiert
  • Z2 / S21: Textspur, Vertikale Linien, Kontur der Horizontalen Linien
  • Z2 / S15: Textspur, Horizontale Linie (und Texthintergrund)
  • Z2 / S16: Textspur, Vertikale Linie hover (und Texthintergrund bei Textauswahl)
Lineal, Schieberegler und Pegel

Diese Kategorie von Farben färben die Lineale, Schieberegler und Pegelanzeigen.

Farben von Linealen, Schiebereglern und Pegelanzeigen

  • Z1 / S29: Lineal, Schleifenhintergrund
    Info: Das Lineal und die Schleife werden bei Überlappung mit einer Markierung jeweils mit ca. 20% Deckkraft der Schriftfarbe  (Z1 / S12, s.o.) überlagert!
  • Z3 / S12: Scrubleiste Hintergrund
  • Z3 /   S6: Schieberegler Linienfarbe
  • Z3 /   S7: Schieberegler Teilstrich Highlight
  • Z3 /   S5: Schieberegler Teilstrich Schatten
  • Z1 / S14: Ein- und Ausgangspegel Peak
  • Z1 / S20: Eingangspegel übersteuert
  • Z1 / S26: Ausgangspegel übersteuert
Cursor- und Abspielköpfe

Es gibt vier Farben für die vertikalen Linien für Cursor, Abspiel- und Aufnahmepositon und die "Einrasthilfe" beim Verschieben von Clips.

Vier Arten vertikaler Linien mit unterschiedlichen Farben

  • Z2 / S  2: Cursorlinie
  • Z2 / S  4: Abspielkopflinie
  • Z2 / S  3: Aufnahmekopflinie
  • Z2 / S25: Linie "Einrasthilfe"
Farben des Echtzeit-Effekte-Fensters

Für das Effekte-Fenster stehen – neben den Effekte-Buttons – nur dire Farben zur Verfügung:

Farben für das Effekte-Rack

  • Z4 / S  1: Effekthintergrund
  • Z4 / S  2: Effektliste Trennlinie
  • Z3 / S36: Drag and Drop-Hinweis
Diagramme und Graphen

Ein paar Farben für die Darstellung in zusätzlichen Effektefenstern konnte ich noch identifizieren:

Farben für Diagramme und Graphen

  • Z3 / S10: Achsenbeschriftung (z.B. bei > Analyse > Spektrum zeichnen)
  • Z1 / S34: FFT-Spektrum (z.B. bei > Analyse > Spektrum zeichnen)
  • Z1 / S33: Tonänderungsanalyse (z.B. bei > Analyse > Spektrum zeichnen, Korrelationsdarstellung)
  • Z1 / S31: Graphen, Linie (z.B. beim Filterkurve-Equalizer)
  • Z1 / S32: Graphen, Bezier-Linie (z.B. beim Filterkurve-Equalizer)
  • Z1 / S11: "Über"-Fenster, Hintergrundfarbe
Midi-Tracks

Und dann habe ich noch zwei Farben für Midi-Tracks gefunden:

  • Z3 / S16: Midi "Zebra", zweite Hintergrundfarbe
  • Z3 / S17: Midi horizontale Linien
Der Rest: Unbekannte (nicht genutzte?) Farben

Der Rest der Farbpalette ist für mich nicht zuzuordnen. Ich glaube ein Teil davon ist einfach veraltet und/oder wird nicht mehr genutzt. Es gibt z.B. diverse Farben, die in der HTML-Map z.B. "Spectro1 – 5" benannt sind. In der Spektrogramm-Ansicht werden diese aber nicht mehr genutzt. Wenn noch jemand weiß, welche der nicht zugeordneten Farben wofür zuständig ist, bitte gerne in die Kommentare 🙂

Ein Photoshop-Template für eigene Themes

Ich habe mein Theme in Photoshop gebastelt (ja, ich weiß, keine FOSS, aber die alten Gewohnheiten 🙄 …). Es hat leider 246 Ebenen in 37 Gruppen (!) und man benötigt evtl. etwas zeit, sich darin zurecht zu finden. Ich hoffe, die Ordner- und Ebenennamen sind halbwegs selbsterklärend, ansonsten gerne nachfragen 😉

Die Photoshop-Datei kann man hier herunterladen: Download AudacityTheme.psd
Erstellt mit PS v24.5.0 (20230512.r.500), hoffentlich kompatibel mit Euren Versionen.

So weit meine Erkenntnisse zur Erstellung von Audacity Themes.
Vielleicht hilft es ja dem ein- oder der anderen.

p.s.: Hinweise auf hübsche (fremde oder selbst erstellte) Designs nehe ich natürlich gerne entgegen.

Hübsche(re) Audacity Themes“ von Martin Smaxwil ist incl. aller Abbildungen, Videos und dem Photoshop-Template unter einer CC BY 4.0-Lizenz veröffentlicht, darüber hinausgehende Hinweise zu Bestandteilen wie Code Snippets u.ä. findet man hier. Die genutzte Musik in den Videos ist "Dramatic Hip Hop, 24 seconds" von DMD_Production, Lizenz: Pixabay Lizenz.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert