Paneldesign - Einsteiger - Knobman - mein erster Drehknopf
Verfasst: 13. Oktober 2010, 20:24
REAKTOR TUTORIAL
Knobman - mein erster Drehknopf
Hej Folks,
an dieser Stelle möchte ich der Aufforderung von Herw nachkommen und ein kleines Tutorial zur Benutzung des GUI Design Tools, Knobman bereitstellen.
die aktuelle Knobman Version findet Ihr hier:
http://www.g200kg.com/en/software/knobman.html
1. kurzes Vorwort:
Ich persönlich bin der Meinung, dass eine grafische Oberfläche bei Plugins nur zweitrangig ist, denn eigentlich kommt es ja auf den Sound an. Nur was wäre ein Plugin ohne eine gewisse Eigenständigkeit? Es hat sich bestimmt schon jeder einmal dabei erwischt, ein Produkt gewählt zu haben was schön aussieht jedoch weniger Funktionen hat als das etwas einfach gestaltete. Das ist die negative Seite des Eyecatcher Effekts, denn oft täuscht das Aussehen über Mängel hinweg. Es gibt jedoch auch die andere Seite. Grafische Oberflächen, soweit aufgeräumt und logisch strukturiert, können den Benutzer auch beflügeln oder sogar eine Software einfacher zugänglich machen, da die wichtigsten Elemente sofort in Auge fallen. Des weiteren erzeugt ein Aussehen auch eine Grundstimmung bzw. kann inspirierend wirken. Ich möchte hier den ersten Schritt machen und erklären wie ein einfacher Drehknopf erstellt werden kann um die eigenen Ensembles aufzupeppen.
2. öffnen von Knobman:
Nach dem Start seht Ihr ein in 3 Spalten geteiltes Fenster. Ich werde nicht auf alles im einzelnen eingehen, um die einzelnen Funktionen genau zu erklären, empfehle ich das Hilfedokument zu studieren. Da das Programm leicht zu bedienen ist, sollten sich die meisten Funktionen jedoch von selbst erklären.
Links: Hier werden die einzelnen Ebenen (Layer) angezeigt. Per Drag'n'Drop könnt Ihr die Reihenfolge verändern. Außerdem wird hier die Größe des Knopfes festgelegt, klick hierzu auf Preferences.
Mitte: Hier werden der Typ und die Anzeige-/Animationseigenschaften des angezeigten Elements, also der Layerinhalte festgelegt. Tipp: Layout-Zoom stellt die Größe des Elements ein!
Rechts: Hier findet Ihr eine Vorschau Eures Drehknopfes/Faders. Test zeigt wie sich der Knopf beim drehen verhält. 3. Vorbereitung:
Ich möchte Euch zeigen wie Ihr einen einfachen Drehknopf mit LED Kranz Optik erstellt. Ich werde jedoch vorerst auf Feinheiten, wie Schatten oder 3D Effekt verzichten.
Der Knopf soll der Einfachheit halber aus 4 Ebenen bestehen. Der Untergrund, der LED Kranz, der Knopf und der Anzeigestrich.
Zuerst wird unter Preferences die Größe von 70x70 Pixel gewählt. Dann erstellt Ihr 4 Layer und wählt die Elementtypen aus.
Layer 1 – Circlefill (hier kann auch Circle gewählt werden, da der knopf die meiste Fläche verdeckt)
Layer 2 – RadiateLine
Layer 3 – CircleFill
Layer 4 – Line
Da der Knopf zum Abschluß als TGA mit Alpha(Transparenz) exportiert wird, ist der Hintergrund in Reaktor frei wählbar und muss nich in Knobman festgelegt werden.
Benennt nun der Übersicht halber die Ebenen entsprechend um. Ich hab mir das angewöhnt um Verwirrungen bei größeren Projekten zu vermeiden.
4 . Einstellen von Größe und Farbe:
Layer 1 – Farbe schwarz, Zoom 100%
Layer 2 – Farbe rot, Zoom 95%, AngleStep 15
Layer 3 – Farbe dunkelgrau, Zoom 70%
Layer 4 – Farbe hellgrau, Width 15, Length 35, Offset -20%
Nun sollte das Ganze so ähnlich aussehen: 5. Animation:
Was soll beim drehen passieren? Die LEDs sollen abhängig von der Position eingeblendet werden und der Strich soll sich mit der Drehung bewegen.
Dazu stellt Ihr folgende Werte ein:
Layer 2:
- AnimMask ein
- Type: Rotate, 0, SingleDir
- Start from -140
- Stop from -140 to 140
Layer 4:
- Layout – Angle(deg) from to -135
Nun könnt Ihr den Knopf testen, klickt dazu einfach im Vorschaufenster auf den Button Test. Jetzt werden die einzelnen Bilder berechnet und Ihr könnt mit dem Schieberegler die Knopfbewegung testen.
6. Export:
Um die TGA Datei zu exportieren, wählt Ihr im File Menü den Punkt ExportImage aus. Vergebt dort den Dateinamen (ich habe 1stknob gewählt) und das Format TGA. PNG wird leider nicht von Reaktor unterstützt. Reaktor erlaubt ausschließlich die Verwendung von TGA und BMP Dateien.
7. Drehknopf in Reaktor konfigurieren:
Öffnet dazu Reaktor und erzeugt ein leeres Instrument. Nun erzeugt Ihr noch einen Knopf, diesen findet Ihr unter Built-In Module → Panel → Knob. Als nächstes öffnet Ihr die View Properties. Im unteren Abschnitt „Style“, Skin Bitmap(Picture) via „open from file...“ die vorher exportierte TGA Datei geladen.
Jetzt hat sich das Fenster „Picture Properties“ geöffnet und Ihr seht den Bilderstreifen(Strip) der Animation. Setzt jetzt noch den Haken bei „Has Alpha Channel“. Um eine Einzelbildanzeige zu bekommen, stellt Ihr bei „Animation Height“ 70 px ein. Resizeability sollte ausgeschaltet sein. OK!
Nun ist der Knopf schon fast fertig, es muss nur noch der Regelbereich festgelegt werden. Dazu klickt Ihr in den Knob Properties auf „Function“.
Wählt für „Range“ folgende Werte:
Max 128
Min 1
Default 1
Stepsize 1
So sieht das Ergebnis jetzt aus: Für eine größere Genauigkeit mit der der Knopf durch eine Mausbewegung den Wert ändert, empfehle bei „Mouse Resolution“ ich höhere Werte als 127 zu testen. Ich habe hier 512 eingestellt.
8. Fazit:
Jetzt ist der erste Knopf fertig und kann nach Lust und Laune verändert werden. Die Erstellung eines Faders ist ähnlich, also relativ einfach. Durch die Kombination verschiedener Elemente, Texturen und Schattierungen können fast alle Wünsche umgesetzt werden. Es ist in Knobman auch möglich mit in gängigen Bildverarbeitungsprogrammen erstellte Grafiken zu verwenden.
Ich würde mir nur noch eine PNG Implementierung in Reaktor wünschen, da aufwendige bzw. größere Elemente die Dateigröße schnell anwachsen lassen. Wenn in Reaktor ein Knopf mit Design dupliziert wird, wird auch die Ensemble Datei fast doppelt so groß. Eventuell gibt es hier ja Optimierungsmöglichkeiten.
Ich hoffe mit dem Tutorial den Einstieg für den ein oder anderen etwas einfacher gemacht zu haben. Jedenfalls wünsche ich viel Spass beim basteln.
Downloads
Das Tutorial als PDF mit allen Dateien findet Ihr in der Userlibrary:
https://co.native-instruments.com/index ... tchid=9753
First Knobs v1.0
https://co.native-instruments.com/index ... tchid=7485
the big knob v1.1
https://co.native-instruments.com/index ... tchid=9751
Knobman - mein erster Drehknopf
Hej Folks,
an dieser Stelle möchte ich der Aufforderung von Herw nachkommen und ein kleines Tutorial zur Benutzung des GUI Design Tools, Knobman bereitstellen.
die aktuelle Knobman Version findet Ihr hier:
http://www.g200kg.com/en/software/knobman.html
1. kurzes Vorwort:
Ich persönlich bin der Meinung, dass eine grafische Oberfläche bei Plugins nur zweitrangig ist, denn eigentlich kommt es ja auf den Sound an. Nur was wäre ein Plugin ohne eine gewisse Eigenständigkeit? Es hat sich bestimmt schon jeder einmal dabei erwischt, ein Produkt gewählt zu haben was schön aussieht jedoch weniger Funktionen hat als das etwas einfach gestaltete. Das ist die negative Seite des Eyecatcher Effekts, denn oft täuscht das Aussehen über Mängel hinweg. Es gibt jedoch auch die andere Seite. Grafische Oberflächen, soweit aufgeräumt und logisch strukturiert, können den Benutzer auch beflügeln oder sogar eine Software einfacher zugänglich machen, da die wichtigsten Elemente sofort in Auge fallen. Des weiteren erzeugt ein Aussehen auch eine Grundstimmung bzw. kann inspirierend wirken. Ich möchte hier den ersten Schritt machen und erklären wie ein einfacher Drehknopf erstellt werden kann um die eigenen Ensembles aufzupeppen.
2. öffnen von Knobman:
Nach dem Start seht Ihr ein in 3 Spalten geteiltes Fenster. Ich werde nicht auf alles im einzelnen eingehen, um die einzelnen Funktionen genau zu erklären, empfehle ich das Hilfedokument zu studieren. Da das Programm leicht zu bedienen ist, sollten sich die meisten Funktionen jedoch von selbst erklären.
Links: Hier werden die einzelnen Ebenen (Layer) angezeigt. Per Drag'n'Drop könnt Ihr die Reihenfolge verändern. Außerdem wird hier die Größe des Knopfes festgelegt, klick hierzu auf Preferences.
Mitte: Hier werden der Typ und die Anzeige-/Animationseigenschaften des angezeigten Elements, also der Layerinhalte festgelegt. Tipp: Layout-Zoom stellt die Größe des Elements ein!
Rechts: Hier findet Ihr eine Vorschau Eures Drehknopfes/Faders. Test zeigt wie sich der Knopf beim drehen verhält. 3. Vorbereitung:
Ich möchte Euch zeigen wie Ihr einen einfachen Drehknopf mit LED Kranz Optik erstellt. Ich werde jedoch vorerst auf Feinheiten, wie Schatten oder 3D Effekt verzichten.
Der Knopf soll der Einfachheit halber aus 4 Ebenen bestehen. Der Untergrund, der LED Kranz, der Knopf und der Anzeigestrich.
Zuerst wird unter Preferences die Größe von 70x70 Pixel gewählt. Dann erstellt Ihr 4 Layer und wählt die Elementtypen aus.
Layer 1 – Circlefill (hier kann auch Circle gewählt werden, da der knopf die meiste Fläche verdeckt)
Layer 2 – RadiateLine
Layer 3 – CircleFill
Layer 4 – Line
Da der Knopf zum Abschluß als TGA mit Alpha(Transparenz) exportiert wird, ist der Hintergrund in Reaktor frei wählbar und muss nich in Knobman festgelegt werden.
Benennt nun der Übersicht halber die Ebenen entsprechend um. Ich hab mir das angewöhnt um Verwirrungen bei größeren Projekten zu vermeiden.
4 . Einstellen von Größe und Farbe:
Layer 1 – Farbe schwarz, Zoom 100%
Layer 2 – Farbe rot, Zoom 95%, AngleStep 15
Layer 3 – Farbe dunkelgrau, Zoom 70%
Layer 4 – Farbe hellgrau, Width 15, Length 35, Offset -20%
Nun sollte das Ganze so ähnlich aussehen: 5. Animation:
Was soll beim drehen passieren? Die LEDs sollen abhängig von der Position eingeblendet werden und der Strich soll sich mit der Drehung bewegen.
Dazu stellt Ihr folgende Werte ein:
Layer 2:
- AnimMask ein
- Type: Rotate, 0, SingleDir
- Start from -140
- Stop from -140 to 140
Layer 4:
- Layout – Angle(deg) from to -135
Nun könnt Ihr den Knopf testen, klickt dazu einfach im Vorschaufenster auf den Button Test. Jetzt werden die einzelnen Bilder berechnet und Ihr könnt mit dem Schieberegler die Knopfbewegung testen.
6. Export:
Um die TGA Datei zu exportieren, wählt Ihr im File Menü den Punkt ExportImage aus. Vergebt dort den Dateinamen (ich habe 1stknob gewählt) und das Format TGA. PNG wird leider nicht von Reaktor unterstützt. Reaktor erlaubt ausschließlich die Verwendung von TGA und BMP Dateien.
7. Drehknopf in Reaktor konfigurieren:
Öffnet dazu Reaktor und erzeugt ein leeres Instrument. Nun erzeugt Ihr noch einen Knopf, diesen findet Ihr unter Built-In Module → Panel → Knob. Als nächstes öffnet Ihr die View Properties. Im unteren Abschnitt „Style“, Skin Bitmap(Picture) via „open from file...“ die vorher exportierte TGA Datei geladen.
Jetzt hat sich das Fenster „Picture Properties“ geöffnet und Ihr seht den Bilderstreifen(Strip) der Animation. Setzt jetzt noch den Haken bei „Has Alpha Channel“. Um eine Einzelbildanzeige zu bekommen, stellt Ihr bei „Animation Height“ 70 px ein. Resizeability sollte ausgeschaltet sein. OK!
Nun ist der Knopf schon fast fertig, es muss nur noch der Regelbereich festgelegt werden. Dazu klickt Ihr in den Knob Properties auf „Function“.
Wählt für „Range“ folgende Werte:
Max 128
Min 1
Default 1
Stepsize 1
So sieht das Ergebnis jetzt aus: Für eine größere Genauigkeit mit der der Knopf durch eine Mausbewegung den Wert ändert, empfehle bei „Mouse Resolution“ ich höhere Werte als 127 zu testen. Ich habe hier 512 eingestellt.
8. Fazit:
Jetzt ist der erste Knopf fertig und kann nach Lust und Laune verändert werden. Die Erstellung eines Faders ist ähnlich, also relativ einfach. Durch die Kombination verschiedener Elemente, Texturen und Schattierungen können fast alle Wünsche umgesetzt werden. Es ist in Knobman auch möglich mit in gängigen Bildverarbeitungsprogrammen erstellte Grafiken zu verwenden.
Ich würde mir nur noch eine PNG Implementierung in Reaktor wünschen, da aufwendige bzw. größere Elemente die Dateigröße schnell anwachsen lassen. Wenn in Reaktor ein Knopf mit Design dupliziert wird, wird auch die Ensemble Datei fast doppelt so groß. Eventuell gibt es hier ja Optimierungsmöglichkeiten.
Ich hoffe mit dem Tutorial den Einstieg für den ein oder anderen etwas einfacher gemacht zu haben. Jedenfalls wünsche ich viel Spass beim basteln.
Downloads
Das Tutorial als PDF mit allen Dateien findet Ihr in der Userlibrary:
https://co.native-instruments.com/index ... tchid=9753
First Knobs v1.0
https://co.native-instruments.com/index ... tchid=7485
the big knob v1.1
https://co.native-instruments.com/index ... tchid=9751
). Knobman ist dabei ein guter Helfer.