{"id":629,"date":"2025-05-29T16:40:21","date_gmt":"2025-05-29T07:40:21","guid":{"rendered":"https:\/\/alive-project.com\/en\/streamer-magazine\/?p=629"},"modified":"2025-10-20T18:11:48","modified_gmt":"2025-10-20T09:11:48","slug":"3350","status":"publish","type":"post","link":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/","title":{"rendered":"OBS Tutorial: How to Animate Images and Character Standees for Streaming"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When streaming with OBS, some of you might want to move images around. This article provides a detailed explanation on how to move images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, we also cover how to animate the standing illustrations for those using character images during streaming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Furthermore, this guide includes settings for image resolution and background transparency. If you&#8217;re looking to animate images or use clearer images, make sure to check it out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Move Images in OBS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two methods to move images in OBS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Move images by scrolling them<\/li>\n\n\n\n<li>Move images in a slideshow format<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Detailed explanations of each method are provided in the following sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Procedure to Scroll Images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Scrolling images means moving the displayed images from right to left or top to bottom. Here&#8217;s how to do it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add images from sources<\/li>\n\n\n\n<li>Add filters<\/li>\n\n\n\n<li>Scroll images<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We also explain settings for continuous movement, so refer to them as needed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding Images from Sources<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Launch OBS and click the plus button in &#8220;Sources&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After pressing the plus button, select &#8220;Image&#8221; from the list displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on &#8220;Image&#8221; and the following screen will be displayed. Click the &#8220;Browse&#8221; button to add the image you want to move.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, click the OK button to complete the image addition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to move text instead of an image, select &#8220;Text&#8221; from the source plus button to add text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding Filters<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">After completing the image addition, move on to adding a &#8220;Filter&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Right-click the image added to OBS and select &#8220;Filter&#8221; from the displayed options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After selecting a filter, press the plus button displayed at the bottom left of the screen and choose &#8220;Scroll&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Scrolling Images<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Selecting scroll brings up the following settings screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can scroll the image by changing the &#8220;Horizontal Speed&#8221; and &#8220;Vertical Speed&#8221; bars or values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Firstly, &#8220;Horizontal Speed&#8221; is a setting that moves the image from right to left. Setting a value above 0 will scroll from right to left, while a value below 0 will scroll from left to right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, &#8220;Vertical Speed&#8221; is a setting that moves the image up and down. Setting a value above 0 will scroll from bottom to top, while a value below 0 will scroll from top to bottom.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By combining horizontal and vertical speeds, you can scroll the image diagonally.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, setting the horizontal speed to 50.00 and the vertical speed to -50.00 will scroll the image diagonally downward. Conversely, setting the horizontal speed to -50.00 and the vertical speed to 50.00 will scroll the image diagonally upward.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you check the loop (repetition), you can continuously move the image. As shown in the image below, you can check the scrolling movement in the settings screen, so try changing the values to move the image in your desired direction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Procedure to Move in Slideshow Format<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This section explains how to move images in a slideshow format. Slideshows are useful when you want to switch images according to the stream. Those using multiple images for streaming should refer to this.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add Image Slideshow to Source<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">First, click the plus button in &#8220;Source&#8221; and select &#8220;Image Slideshow&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Clicking on image slideshow brings up a settings screen. Press the plus button for &#8220;Image Files&#8221; to select images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can select several images, so choose the ones you want to display in slideshow format.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Confirm Slideshow Settings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">After selecting images for slideshow display, the slideshow will flow within the red frame of the following image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the images are switching automatically, the setup is complete.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Furthermore, you can change how the slideshow moves from &#8220;Transition&#8221; within the properties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With four types of movement options available as shown above, select one that fits the streaming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, by adjusting the &#8220;Slide Time Interval&#8221; or &#8220;Screen Transition Speed&#8221; in the red frame below, you can tune the display time for each image or the speed at which slides change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it according to your streaming method when you want to show each slide for a longer period.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Animate Standing Illustrations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This section explains how to animate standing illustrations for those using them in their streams.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s useful when you want to animate the standing illustration along with the speaker during streaming.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Access Standing Illustration Display Generator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, access the &#8220;Standing Illustration Display Generator&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The method introduced this time involves creating CSS and pasting it into OBS to animate standing illustrations. &#8220;Standing Illustration Display Generator&#8221; generates CSS automatically, saving you the trouble of setting it yourself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The generator allows for free customization of blinking, movement speed, border colors, etc., of standing illustrations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set your preferred appearance on the site and utilize the automatically generated CSS by pasting it into OBS. The site for the &#8220;Standing Illustration Display Generator&#8221; can be accessed below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/obs-discord-picture.alfebelow.com\/\">Standing Illustration Display Generator<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add Browser to Sources<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, open OBS, press the plus button in &#8220;Sources&#8221;, and add &#8220;Browser&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, start &#8220;Discord&#8221;. Since Discord is a free downloadable app, if it&#8217;s not installed, install it from the link below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/discord.com\/download\">Discord<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After launching Discord, access the &#8220;Discord StreamKit Overlay&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/streamkit.discord.com\/overlay\">Discord StreamKit Overlay<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Obtain Voice Widget URL from Discord<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Upon access, the following screen is displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"506\" src=\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/image-28.png\" alt=\"\" class=\"wp-image-1053\" srcset=\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/image-28.png 1000w, https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/image-28-300x152.png 300w, https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/image-28-768x389.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click the arrow &#8220;Install for OBS&#8221; to transition to the following screen, select &#8220;VOICE WIDGET&#8221;, and copy the URL within the red frame.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once copied, return to OBS, click the added &#8220;Browser&#8221; in sources, and paste the URL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create and Enter Custom CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, return to the standing illustration display generator and change the settings to your liking, such as movement speed and border blinking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve decided on your preferred settings, scroll down to automatically display the generated CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Copy all generated CSS and paste it into the &#8220;Custom CSS&#8221; in the &#8220;Browser Properties&#8221; in OBS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, press OK, and the setup is complete.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Rotate and Flip Images in OBS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This section explains how to rotate and flip images in OBS. You can freely change the direction and angle of rotation as needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For flipping, changes can be made horizontally or vertically.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Procedure for Rotating Images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Right-click the image displayed in the preview screen at the top left of OBS and select &#8220;Transform&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select &#8220;Transform&#8221; to choose from the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rotate 90 degrees clockwise<\/li>\n\n\n\n<li>Rotate 90 degrees counterclockwise<\/li>\n\n\n\n<li>Rotate 180 degrees<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click the item for the direction you want to rotate, and it will reflect immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For angles other than 90 or 180 degrees, right-click, select &#8220;Transform&#8221;, and then &#8220;Edit Transform&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Clicking on edit transform displays the following screen. You can change to angles other than specified by changing the value in &#8220;Rotation&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Procedure for Flipping Images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To flip an image, as with rotation, right-click the image, and choose &#8220;Transform&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select &#8220;Transform&#8221; to display &#8220;Flip Horizontal&#8221; and &#8220;Flip Vertical&#8221;. Flip in the desired direction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The horizontal direction allows flipping left to right, and vertical direction lets you flip top to bottom.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for Setting Image Resolution in OBS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This section explains how to increase image resolution in OBS. Resolution is an important aspect for those using images in streaming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using clear images makes it easier for viewers to see, enhancing satisfaction. Those looking to level up their stream should definitely refer to this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importance of Resolution<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Higher image resolution has the significant advantage of delivering clear images to viewers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if the resolution is too high, it may impact the PC and streaming; hence caution is needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">High resolution results in beautiful images but places a huge load on the PC. The PC&#8217;s processing speed may also slow down, leading to interrupted or paused streaming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the other hand, if the resolution is too low, the images become grainy, possibly leaving viewers dissatisfied. Ideally, the resolution should be set at a level that is neither too high nor too low.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following sections elaborate on resolution settings and points to note. Understanding resolution settings can help deliver a satisfying stream for viewers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Output Resolution<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In OBS, output resolution directly affects the resolution of the video seen by viewers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that increasing output resolution consumes more data, so use a high-spec PC. If using a PC with limited data capacity, lowering output resolution can help.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To modify settings, open OBS, select &#8220;File&#8221; at the top left, then &#8220;Settings&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After selecting settings, click &#8220;Video&#8221;. You can change resolution settings from &#8220;Output (Scaled) Resolution&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The recommended value for output (scaled) resolution is 1280&#215;720.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bitrate<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In OBS, bitrate indicates how much video can be transmitted per second.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The higher the bitrate value, the higher the quality of the video streamed, but it might cause lag if the PC specifications are insufficient.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Configure settings by opening OBS, pressing &#8220;Settings&#8221; at the top left, and selecting &#8220;Output&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Within output, you can adjust values from &#8220;Video Bitrate&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Recommended values for major platforms are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Twitch: 3,000\u20136,000kbps<\/li>\n\n\n\n<li>Niconico Live: Up to 6,000kbps<\/li>\n\n\n\n<li>TwitCasting: Up to 6,000kbps<\/li>\n\n\n\n<li>YouTube Live: 10,000kbps<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Refer to these when configuring settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, for detailed explanation on bitrate for streaming and recording, please see the following article.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/2440\/\">Optimal OBS Bitrate Settings for Streaming and Recording Explained<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Frame Rate<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In OBS, frame rate, also known as FPS value, indicates how many images can be displayed per second. A higher frame rate results in smoother video during streaming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While the maximum setting is 120fps, a high-spec PC is essential for 120fps. As 30\u201360fps is sufficient for typical streaming, refer to it when adjusting the frame rate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set the frame rate by selecting &#8220;Video&#8221; from the settings at the top left of the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By changing the FPS common value within the red frame, you can adjust frame rate settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that some platforms support only up to 30fps. Confirm the supported values before streaming thoroughly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Three Methods for Background Transparency in OBS Streaming<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The three methods for background transparency in OBS streaming are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chroma key composition<\/li>\n\n\n\n<li>OBS plugin<\/li>\n\n\n\n<li>NVIDIA Broadcast<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Each method is explained in the following sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chroma Key Composition<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Chroma key composition allows you to make parts of a specified video transparent where colors like green, blue, or magenta are applied. This is useful when you want to composite only the subject from a video shot with a green screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start by opening OBS and pressing the plus button in the &#8220;Sources&#8221; section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then select &#8220;Video Capture Device&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selecting a video in the video capture device displays a preview screen in OBS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click &#8220;Filter&#8221; under the source displayed in the preview screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you click the filter, the above screen is displayed, so select &#8220;Chroma Key&#8221; from the plus button at the bottom left of &#8220;Effect Filters&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you select the color you want to make transparent (green for a green screen) in &#8220;Color Key Type&#8221;, the background transparency is complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">NVIDIA Broadcast<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to achieve background transparency without using a green screen, using NVIDIA Broadcast is recommended. Download it from the link below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.nvidia.com\/ja-jp\/geforce\/broadcasting\/broadcast-sdk\/resources\/\">NVIDIA Broadcast<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select what suits your PC from the &#8220;Video Effects&#8221; download section and download it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After downloading, return to OBS and edit the source added in &#8220;Video Capture&#8221;. First, select &#8220;Filter&#8221; at the bottom of the OBS preview screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Press the plus button in &#8220;Effect Filters&#8221; displayed at the bottom left of the screen and select &#8220;NVIDIA Background Removal&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, return to the initial screen of OBS, select the image or video you want to make transparent from the &#8220;Sources&#8221; section, and the setup is complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">OBS Plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, I will introduce how to install plugins to OBS. The recommended plugin for background transparency is &#8220;obs-backgroundremoval&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;obs-backgroundremoval&#8221; can be downloaded from the link below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/locaal-ai\/obs-backgroundremoval\/releases\">obs-backgroundremoval<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After downloading, select the image or video you want to make transparent from the plus button in &#8220;Sources&#8221; of OBS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, select &#8220;Filter&#8221; displayed under the added source to bring up the following screen, and choose &#8220;Background Removal&#8221; from the plus button in &#8220;Audio Filters&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set the &#8220;Background Color&#8221; to green on the setting screen, and finally, use the Chroma Key function to make the green transparent, completing the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a detailed explanation on plugin installation, please refer to the following article.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/2182\/\">How to Install Plugins in OBS and Recommended Ones<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, the following article provides detailed explanations on Chroma Key composition and achieving background transparency without a green screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3197\/\">Chroma Key Compositing in OBS: Transparent Background Without Green Screen!<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This time, we explained how to animate images in OBS. By leveraging scrolling and slideshow, you can add movement to the streaming screen, creating more engaging effects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When streaming with OBS, some of you might want to move images around. This article provides a detailed explan&#8230;<\/p>\n","protected":false},"author":2,"featured_media":669,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine<\/title>\n<meta name=\"description\" content=\"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine\" \/>\n<meta property=\"og:description\" content=\"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\" \/>\n<meta property=\"og:site_name\" content=\"Streamer Magazine\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-29T07:40:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T09:11:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1560\" \/>\n\t<meta property=\"og:image:height\" content=\"878\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Streamer Magazine Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"Streamer Magazine Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"30\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\"},\"author\":{\"name\":\"Streamer Magazine Team\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/5f81bbaf02a240ab7ddfc2a906e7c855\"},\"headline\":\"OBS Tutorial: How to Animate Images and Character Standees for Streaming\",\"datePublished\":\"2025-05-29T07:40:21+00:00\",\"dateModified\":\"2025-10-20T09:11:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\"},\"wordCount\":2068,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png\",\"articleSection\":[\"How to\"],\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\",\"url\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\",\"name\":\"OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png\",\"datePublished\":\"2025-05-29T07:40:21+00:00\",\"dateModified\":\"2025-10-20T09:11:48+00:00\",\"description\":\"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.\",\"breadcrumb\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage\",\"url\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png\",\"contentUrl\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png\",\"width\":1560,\"height\":878},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OBS Tutorial: How to Animate Images and Character Standees for Streaming\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#website\",\"url\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/\",\"name\":\"Streamer Magazine\",\"description\":\"A Web Media Platform That Supports Streamers\",\"publisher\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization\",\"name\":\"Streamer Magazine\",\"url\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/03\/StreamerMagazine-logo.png\",\"contentUrl\":\"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/03\/StreamerMagazine-logo.png\",\"width\":615,\"height\":160,\"caption\":\"Streamer Magazine\"},\"image\":{\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/5f81bbaf02a240ab7ddfc2a906e7c855\",\"name\":\"Streamer Magazine Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0cbfd9bf900c744e4fc87c5f92c595096bb2a655e1f917ed4395862fb5bf4e3e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0cbfd9bf900c744e4fc87c5f92c595096bb2a655e1f917ed4395862fb5bf4e3e?s=96&d=mm&r=g\",\"caption\":\"Streamer Magazine Team\"},\"description\":\"\u201cStreamer Magazine\u201d is a web media platform that supports those interested in VTubers and streaming creators, those who are active in streaming, and those who want to start streaming. We provide a wide range of enjoyable information for everyone, from beginners to experienced streamers.\",\"url\":\"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/author\/streamer-mag\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine","description":"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/","og_locale":"ja_JP","og_type":"article","og_title":"OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine","og_description":"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.","og_url":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/","og_site_name":"Streamer Magazine","article_published_time":"2025-05-29T07:40:21+00:00","article_modified_time":"2025-10-20T09:11:48+00:00","og_image":[{"width":1560,"height":878,"url":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png","type":"image\/png"}],"author":"Streamer Magazine Team","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"Streamer Magazine Team","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"30\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#article","isPartOf":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/"},"author":{"name":"Streamer Magazine Team","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/5f81bbaf02a240ab7ddfc2a906e7c855"},"headline":"OBS Tutorial: How to Animate Images and Character Standees for Streaming","datePublished":"2025-05-29T07:40:21+00:00","dateModified":"2025-10-20T09:11:48+00:00","mainEntityOfPage":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/"},"wordCount":2068,"commentCount":0,"publisher":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization"},"image":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage"},"thumbnailUrl":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png","articleSection":["How to"],"inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/","url":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/","name":"OBS Tutorial: How to Animate Images and Character Standees for Streaming | Streamer Magazine","isPartOf":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage"},"image":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage"},"thumbnailUrl":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png","datePublished":"2025-05-29T07:40:21+00:00","dateModified":"2025-10-20T09:11:48+00:00","description":"Learn how to move and animate images in OBS for enhanced streaming visuals, including detailed steps for image scrolling and slideshow.","breadcrumb":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#primaryimage","url":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png","contentUrl":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/05\/OBS-Tutorial-How-to-Animate-Images-and-Character-Standees-for-Streaming.png","width":1560,"height":878},{"@type":"BreadcrumbList","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3350\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/alive-project.com\/en\/streamer-magazine\/"},{"@type":"ListItem","position":2,"name":"OBS Tutorial: How to Animate Images and Character Standees for Streaming"}]},{"@type":"WebSite","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#website","url":"https:\/\/alive-project.com\/en\/streamer-magazine\/","name":"Streamer Magazine","description":"A Web Media Platform That Supports Streamers","publisher":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alive-project.com\/en\/streamer-magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#organization","name":"Streamer Magazine","url":"https:\/\/alive-project.com\/en\/streamer-magazine\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/logo\/image\/","url":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/03\/StreamerMagazine-logo.png","contentUrl":"https:\/\/streamer-magazine-en.lolipop.io\/wp-content\/uploads\/2025\/03\/StreamerMagazine-logo.png","width":615,"height":160,"caption":"Streamer Magazine"},"image":{"@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/5f81bbaf02a240ab7ddfc2a906e7c855","name":"Streamer Magazine Team","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/alive-project.com\/en\/streamer-magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0cbfd9bf900c744e4fc87c5f92c595096bb2a655e1f917ed4395862fb5bf4e3e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0cbfd9bf900c744e4fc87c5f92c595096bb2a655e1f917ed4395862fb5bf4e3e?s=96&d=mm&r=g","caption":"Streamer Magazine Team"},"description":"\u201cStreamer Magazine\u201d is a web media platform that supports those interested in VTubers and streaming creators, those who are active in streaming, and those who want to start streaming. We provide a wide range of enjoyable information for everyone, from beginners to experienced streamers.","url":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/author\/streamer-mag\/"}]}},"_links":{"self":[{"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":3,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":2949,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/posts\/629\/revisions\/2949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/media\/669"}],"wp:attachment":[{"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alive-project.com\/en\/streamer-magazine\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}