Cara Menambahkan Overlay di OBS (2026): Bikin dengan Image Source dan Browser Source

Untuk memasang overlay di OBS, klik tombol + di bawah dock Sources dan tambahkan Image source (grafis tetap) atau Browser source (alamat web dari widget alert atau chat), lalu taruh di atas source game dalam daftar. Ada tiga hal yang menentukan berhasil atau tidaknya: jenis source yang tepat, urutan tumpukan, dan latar belakang transparan. Nama menu di bawah sesuai string bahasa Inggris OBS Studio 32.2.2 dan knowledge base resmi per pengecekan 6 Oktober 2026, untuk PC Windows. Penempatan webcam dibahas di cara merekam game dengan facecam, jadi panduan ini fokus ke Image source dan Browser source.

Intinya: OBS tidak punya alert bawaan

OBS Studio tidak punya stream alert bawaan; FAQ resminya menyuruh menambahkan overlay dari penyedia alert pihak ketiga sebagai Browser Source. Praktisnya, alert dan chat box datang dalam bentuk alamat yang kamu tempel, sedangkan logo atau frame adalah file yang kamu buat sendiri lalu dimuat. Panduan ini tidak merekomendasikan penyedia atau situs template mana pun. Kalau seluruh proses menyusun scene terasa berat, artikel soal beralih ke perekaman otomatis saat OBS terlalu ribet juga layak dibaca.

Menambahkan overlay gambar dan browser secara berurutan

1. 1Pilih scene dan taruh source game lebih duluPilih scene di dock Scenes. Tutorial Stream Layout resmi menambahkan source game lebih dulu, lewat Display Capture, Game Capture (khusus Windows), Window Capture, atau Video Capture, lalu memakai Edit > Transform > Fit to screen (Ctrl-F) untuk menyesuaikannya dengan canvas. Overlay adalah layer yang berada di atasnya.
2. 2Tambahkan Image sourceKlik tombol + di bawah dock Sources untuk membuka jendela Add Source lalu pilih Image di daftar Source Type. Pastikan Make source visible tercentang, lalu klik Add a new Image; source mendapat nama otomatis dan jendela properties-nya terbuka. Knowledge base resmi menggambarkan layar versi lama (Create New, isi nama, lalu OK), jadi jendelamu bisa sedikit berbeda. Di jendela properties tekan Browse untuk memilih file lalu klik OK. Format yang didukung adalah BMP, TGA, PNG, JPEG, dan GIF, dengan dukungan alpha (transparansi) bila berlaku. Path file tersimpan di properti bernama Image File.
3. 3Tambahkan Browser sourceDi jendela Add Source yang sama pilih Browser di daftar Source Type, klik Add a new Browser, lalu tempel alamat dari penyedia ke kolom URL di jendela properties yang terbuka. Nilai default yang terdokumentasi adalah Width 800 dan Height 600, dan FPS 30 adalah nilai yang dipakai saat Use custom frame rate dinyalakan (halaman bertanggal 11 Januari 2022). Tutorial alert hanya menyuruh mengatur ukuran yang sesuai, jadi jadikan Base (Canvas) Resolution di Settings > Video sebagai acuan saat mengatur Width dan Height, dan perhatikan preview kalau ada yang terpotong. Halaman yang tersimpan di komputermu sendiri butuh Local file dinyalakan.
4. 4Pastikan latar belakangnya transparanGambar hanya membuat game tetap terlihat kalau filenya sendiri disimpan dengan latar transparan. Untuk Browser source, dokumentasi menyebut Custom CSS default, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, yang membuat latar halaman transparan. Kalau muncul kotak solid, cek apakah kolom itu pernah diubah. Knowledge base tidak menjelaskan metode transparansi lain.
5. 5Atur ukuran dan posisinyaSource yang dipilih menampilkan bounding box merah di preview. Seret untuk memindahkan, dan pakai pegangan merah di sudut dan tepi untuk mengubah ukuran. Untuk nilai pasti buka Edit > Transform > Edit Transform (Ctrl-E di Windows) dan pakai Position, Size, dan Crop. Menahan Alt sambil menyeret pegangan akan meng-crop, dan menahan Ctrl sambil menyeret mematikan snapping.
6. 6Atur urutan tumpukanSource yang lebih tinggi di daftar digambar di atas source di bawahnya. Kalau overlay ada di belakang game, pilih overlay lalu klik panah atas di bawah daftar, atau pakai menu Order dengan Move Up atau Move to Top. Kalau ada beberapa overlay, terapkan aturan yang sama ke masing-masing.
7. 7Cek visibilitas, kunci, dan refreshIkon mata abu-abu berarti source disembunyikan dan ikon putih berarti ditampilkan. Setelah overlay terpasang, kamu bisa menguncinya dengan Lock. Kalau Browser source terus menampilkan halaman lama, klik Refresh cache of current page di properties-nya.

Source mana yang cocok untuk overlay apa

Cek akhir sebelum merekam atau live

• File gambar berformat BMP, TGA, PNG, JPEG, atau GIF, dan disimpan dengan transparansi kalau kamu membutuhkannya
• URL Browser persis seperti yang tampil di layar penyedia, dan Local file menyala atau mati sesuai niatmu
• Width dan Height sudah dibandingkan dengan Base (Canvas) Resolution, tanpa ada yang terpotong atau kosong di preview
• Overlay berada di atas source game di daftar Sources
• Ikon mata putih dan Custom CSS default tidak terhapus atau berubah
• Page permissions masih default, Read access to OBS status information, kecuali kamu sengaja mengubahnya

Beralih ke perekaman setelah layout siap

Semua langkah di atas menyusun layout di dalam OBS. Di tahap perekaman, DOR menawarkan cara mulai tanpa setup scene, source, dan output ala OBS: buka game yang didukung seperti VALORANT dan aplikasi Windows gratis ini mendeteksinya lalu merekam match penuh ke mp4. VALORANT termasuk tujuh game yang highlight kill-nya juga otomatis dipotong jadi klip. Setelahnya, alat potong di library menentukan titik awal dan akhir dengan output 16:9, 9:16, atau 1:1, dan editor browser DOR Studio yang tanpa instal bisa menambahkan teks di tahap edit.

Sumber resmi

• Panduan Sources
• Dokumentasi Image Sources
• Dokumentasi Browser Source