Anleitung zur Animation von Rahmen in OBS Studio
Einleitung und Vorbereitung der Szene
Hier habe ich um zwei Elemente einen animierten Rahmen hingesetzt, der einmal hier ein bisschen dünner um das Kamerabild und du siehst, da, da geht der helle Schein einmal rund rum und da drüben habe ich einen extra Dicken genommen, damit es auffällt. Auch da siehst du, das Ganze verändert sich und in der Praxis würde ich das natürlich ein bisschen dünner machen, damit es nicht so ganz prägnant ist, denn es soll ja die Aufmerksamkeit unserer Teilnehmerin unterstützen, aber nicht ablenken.
Wir gucken uns an, wie das geht, ohne großen Aufwand. Und dazu schauen wir als erstes auf OBS Studio und bauen uns eine neue Szene, in der ich das jetzt von Grund auf schnell baue. Und die nenne ich "Demo Ränder". So, weil da werde ich genauso wie du es gerade gesehen hast, versuchen nachzubauen und als erstes deswegen hier die Präsentation einfügen, die wir ja schon haben. Das ist eine Fensteraufnahme hier auch schon vorbereitet und das übliche mit dem Anpassen, dann positioniere ich die hier ungefähr. Jetzt hatten wir es ja so, ich hatte so ein Grün im Hintergrund, also auch das packe ich hier rein, eine Farbquelle und da hat ich ein Grün, ungefähr so, noch nicht ganz so neonmäßig. Gut, also wir nehmen dieses Grün als Hintergrund und deswegen ziehen wir es ja auch nach unten, damit es im Hintergrund ist. Und was wir noch dabei hatten, war mein Bild, mein Kamerabild in Kreisform. Das haben wir ja im Workshop gemacht. Und zwar einmal eine Maske auf das Bild gelegt, falls du nicht mehr weißt, wie das geht, das findest du in den Videos zum Grundlagenworkshop, wie wir mit einer Maske unser Kamerabild verändern. So, hier habe ich das zu einem runden Bild gemacht. Okay, also das ist so, was wir standardmäßig machen können.
Internetseite "theowoo"
Und jetzt möchten wir da eben noch diesen Rand haben, der sich dann bewegt um diese Elemente, dazu brauchen wir jetzt eine Internetseite und das ist die hier, die Adresse dazu, die wirst du von mir unterhalb dieses Videos auch bekommen. Das ist der kurze Teil hier oben, der eigentlich reicht ja von "theowoo" auf GitHub. So, und wenn du das aufrufst, dann hast du hier irgendwelche komischen Einstellungsmöglichkeiten. Aber nicht nur die, sondern vor allen Dingen hast du da auch die Möglichkeit, hier unten schon die Vorschau zu sehen. Und da siehst du, das ist schon so ähnlich, wie ich das hatte hier standardmäßig. Das ist also das Ergebnis von dem, was wir hier oben einstellen und was wir jetzt einstellen können. Gucken wir uns an. Wir haben hier zum einen die Möglichkeit zu wählen Wollen wir ein Rechteck haben oder wollen wir einen Kreis haben? Wir fangen jetzt mit dem Rechteck an, die Größe ist ja 400 mal 225 Pixel eingestellt, Breite und Höhe. Und es passt auch für das, was wir machen, weil wir können es ja eh noch in der Größe dann verändern. Deswegen lassen wir das einfach so. Hier die Breite des Randes. Ich schieb noch ein bisschen hoch, dann sehen wir die Vorschau gleichzeitig. So, hier kann ich dann einfach sagen, soll es den dicken Rand haben oder einen dünnen Rand. Und hier drüben können wir dann auch noch mitentscheiden.
Soll dieser Rand denn eher so eckig sein oder soll er sehr stark abgerundet sein? Auch das ist natürlich Geschmackssache. Ich mache das jetzt mal so und mach ihn noch ein bisschen dicker. Wenn uns der zu dick ist, kann man das Kamerabild ja einfach ein bisschen größer reinlegen. Aber das werden wir gleich sehen. Gut, in der nächsten Zeile geht es darum, Möchten wir zwei Farbtöne, die sich so abwechseln wie hier, oder möchten wir, dass ein Farbton heller wird und dann wieder dunkler? Oder möchten wir, dass der Farbton ins Schwarze übergeht und dann wieder zurück zu dem Farbton geht? Oder soll das Ganze mehr so regenbogenmäßig sein? Wir nehmen jetzt mal zwei Farbtöne und können dann in der Zeile drunter auch ein bisschen spielen, was so die möglichen Farben angeht. Da nehme ich jetzt mal so ein Grün will ich nicht haben, das habe ich als Hintergrund, eher so, so was Rötliches und Bläuliches, jawohl. Und auch hier kannst du ein bisschen spielen. Mit diesem anderen Regler verändert sich das dann auch noch, was die Mischung der Farben angeht, Gut, hier auch noch.
Kannst du die Helligkeit einstellen, so siehst du, ist das Ganze viel dunkler, als wenn ich hier weiter rechts bin. Und da stelle ich das hier ein und dann die Länge des Ganzen. Das ist jetzt etwas, was relativ wichtig ist, denn wenn du da natürlich auch zu schnell gehst, dann ist es nur noch so eine Blinke und kein Mensch kann sich auf das konzentrieren, was im Rahmen passiert. Deswegen würde ich da tendenziell weiter nach rechts gehen, so, dass das Ganze langsam passiert und eher so unterschwellig wirkt, ja eben nicht ablenkt, weil da die Geschwindigkeit ist, sondern es verändert sich so ein bisschen, das man hinguckt. Also nehmen wir das jetzt so und wenn du dich entschieden hast, sagst du ja, so hätten wir es gerne, dann klickst du einfach hier oben auf "Get New URL" und dann springt die Seite ein bisschen. Aber hier unten sieht man immer noch "Get New URL" und hier ist jetzt auf einmal ein Link drin.
Rand in OBS Studio einbauen
Den brauchen wir jetzt wiederum in OBS Studio, das heißt, da gehen wir hin und werden jetzt das Ganze hier drumrum legen. Und wie geht das? Wir brauchen dazu eine Browserquelle. Browserquelle ist dazu da, nicht um einen eine Internetseite einzubinden normalerweise, sondern etwas, was von einer Internetseite bereitgestellt wird, so wie es jetzt eben bei diesem Dienst ist. Das heißt, wir wählen eine Browserquelle aus, die nenne ich jetzt mal rechteckiger Rand. Und dann haben wir die Möglichkeit, hier die Adresse einzufügen, die sich OBS Studio selber ziehen soll, sozusagen. Da gehen wir hier drauf. Und jetzt kommt ein bisschen ein tricky Punkt, denn du siehst ja jetzt, hier geht es um die Breite und die Höhe, die wir hier eingeben. Und jetzt wird es natürlich naheliegend, genau die Breite und die Höhe einzugeben, die wir da auf der Webseite schon hatten. Allerdings leider funktioniert es hier dann nicht perfekt, sondern dann wird das nicht ganz richtig zu sehen sein. Wir haben hier ja die 400 Breite und 225 Höhe eingestellt und ich empfehle dir dann einfach höher zu gehen. Das heißt ganz konkret, wir nehmen hier stattdessen 600 Breite und 400 Höhe.
Du wirst gleich sehen, warum das nicht entscheidend ist, wie viel es genau ist. Es muss nur schon ein bisschen größer sein, als das ausgewählt haben, sonst wirst du sehen, sieht man einen Teil des Randes einfach nicht. Ist einfach so, muss man wissen. Okay. Also, das haben wir drin. Höhe definiert oder Größe. Ich klicke auf okay. Und schwupps wird hier unser Rahmen geladen. Quasi direkt von der Internetseite, auf der wir dann eingerichtet haben. Ich schneid mir das noch ein bisschen zurecht mit gedrückter Alt Taste, damit man das leichter hin und her schieben kann. So, und dann platziere ich das mal so ein bisschen hier und da, da ein bisschen größer und da ein bisschen größer. Und du hast übrigens gesehen. Hier ist ja immer dieses, wenn man an den Bildschirm rankommt, dann geht das so magnetisch dahin, also den Rand unserer, unserer Bühne da oben quasi. So, wenn du das mal nicht willst, weil du gerade in diesem Bereich eine Feineinstellung machen willst, dann kannst du die Control bzw. Steuerung Strg Taste drücken und dann ist dieses Verhalten weg. Dann kann man auch in diesem Bereich sehr sauber arbeiten, aber das nur nebenbei. So, ich pack das jetzt hier rein. Und wie gesagt, wir haben ja gesagt, wenn der Rahmen uns zu dick ist, dann können wir da auch einfach das Bild drüber legen. Das mache ich nämlich jetzt, indem ich hier die Präsentation über den rechteckigen Rand lege. So, und das dann noch ein bisschen justiere und dann sage ich mir, so könnte das Ganze funktionieren und aussehen. Und jetzt hole ich das Kamerabild allerdings auch noch in den Vordergrund, weil so soll es ja nachher sein, das man ja auch zu sehen ist. Und jetzt kommt noch eine Kleinigkeit, die es dir einfacher macht. Wir haben ja jetzt hier diese beiden Elemente getrennt, einmal die Präsentation und einmal den Rand. Wenn wir das jetzt komplett in der Größe verändern wollten, müssten wir es neu anpassen. Außer wir machen folgendes: Ich gehe mit der Maus sowohl auf die Fensteraufnahme der Präsentation und drücke jetzt die Shift-Taste und klicke damit auch noch die Quelle rechteckiger Rand an.
Und du siehst, jetzt sind beide ausgewählt dank gedrückter Shift-Taste beim Klicken. Und wenn das der Fall ist, dann können wir den rechten Mausklick machen und hier auf "ausgewählte Elemente kopieren" gehen. Dann verändert sich die Ansicht in dieser Liste der Quellen da unten ein bisschen. Schwupps, dann siehst du, haben wir nämlich auf einmal eine neue Gruppe und die nenne ich jetzt einfach nur Gruppe eins. Und da siehst du, das sind jetzt die zwei Sachen zusammengefasst Präsi und rechteckige Rand, was zur Folge hat. Wenn ich hier die Gruppe auswähle, hier unten, kann ich oben das Ganze komplett verschieben oder in der Größe verändern, den Rand und die Präsentation gleichzeitig, so wie mir das gefällt. So ganz nebenbei solche Ränder, das muss nicht unbedingt für eine Präsentation sein, kannst du auch für Interviewpartner verwenden oder in einer Szene am Anfang ein Gerüst oder wie auch immer. Ich denke, du wirst dir da deine eigenen Ideen dazu durch den Kopf gehen lassen. So auf die Art und Weise bekommen wir da einen Rand hin.
Weiteres Beispiel: Runder Rand
Jetzt machen wir das Ganze noch mit einem runden Rand für dieses Kamerabild hier oben. Auch das funktioniert einfach analog. Wir gehen hier noch mal rein, entscheiden uns aber hier oben für einen Kreis. Und dann siehst du, da unten ist auch schon der Kreis. Und auch hier lasse ich die Größe einfach bei diesem Standard, mache diesen Kreis aber diesmal ein bisschen dünner, damit er nicht so so sehr präsent ist. Und veränder hier nochmal die Farbe. Da nehme ich jetzt etwas Helleres. Ja genau. Und stell das auch noch von der Gesamthelligkeit ein bisschen anders ein. Ups so, so gefällt mir das dann schon mal, genau. Die Geschwindigkeit lasse ich hier ähnlich. Damit ich es nicht übertreibe und damit jetzt auch den neuen Rand bekomme, muss ich hier wieder auf dieser Webseite auf "Get New URL" klicken und dann wird aus diesen ganzen Dingen, die wir hier oben eingestellt haben, eine neue URL hier generiert. Die kopiere ich in die Zwischenablage und dann dasselbe wie eben. Wir fügen eine neue Quelle hinzu, nämlich eine Browser Quelle. Das ist jetzt der runde Rand.
Hier gebe ich die URL rein. Und auch hier die Breite höher, weiter, breiter, größer. Das ist das Wort, das ich gesucht habe. Vielen Dank. Die Breite größer, als sie auf der Webseite eingestellt war. Bei der Höhe genauso. Ich lasse Sie jetzt mal standardmäßig bei diesen 800 600. Dann erspart uns ein Arbeitsschritt, weil anpassen können wir es ja eh grad noch mal. Na dann sehen wir, haben wir hier diesen Rahmen und den können wir wieder mit gedrückter Alt Taste eh schon mal kleiner machen. Dann ist es für uns angenehmer, das zu verschieben und wir gucken mal, was passiert. Passt jetzt natürlich noch nicht ganz, das heißt, da kann ich den Rahmen mit dem Kreis dann aber auch noch hops, dass ich nicht. Kennst du schon dieses mehrfach klicken, bis man das richtig erwischt hat? Dann machen wir den einfach größer so lange bis der dann passt ist dann ein bisschen Fummelei an der Stelle aber jetzt haben wir es schon hinbekommen. Okay. Und jetzt haben wir einen sich verändernden Farbrand hier um den Kreis und auch da drüben.
Und ehrlich gesagt, ich bin nicht ganz damit zufrieden, dass es hier oben dünner ist als hier an der Seite. Das gefällt mir gar nicht so gut deswegen, schaue ich mir das noch mal an. Und werde schlicht und einfach hier in der Gruppe, der ich die Präsentation und den richtigen Rand habe, die Reihenfolge doch nochmal vertauschen, so dass der Rand über der Präsentation drüberliegt. Und jetzt ist es gleichmäßig, aber halt übertrieben dick, weil wir das vorher so zu Demonstrationszwecken eingestellt haben. Das heißt, im echten Anwendungsfall, da würde ich jetzt noch mal zurück auf die Webseite gehen und mir diesen Rahmen noch mal in dünner machen und dann da drauf packen. Aber auf jeden Fall ist es jetzt gleichmäßig, was hier die Dicke des Rahmens angeht. Dadurch, dass ich die Präsentation jetzt unterhalb des Rahmens habe und nicht umgekehrt. Also das sind die Dinge, wie du da ein bisschen damit spielen kannst. Verlinkt ist die Webseite hier drunter und hinterlasst gerne mal einen Kommentar. Auch unten zu dieser Lektion, ist das, was du sagst oh ja, habe ich einen Anwendungsfall für will ich benutzen oder eher nicht? Also gerne deinen Kommentar dazu. Findest du das jetzt nützlich oder gar nicht? Oder doch? Und wenn ja, wofür? Danke dir.
