AD

프로그램 OBS에서 채팅창 상단_페이드아웃효과 적용

하얀여우미오
2020-10-08 13:17:20 7746 6 5

트윕에서 기본으로 제공되는 채팅창들을 보면 글이 올라갈수록

채팅창이 투명해지면서 사라지는 것을 볼 수가 있는데..


커스텀 css에서 적용하는 방법을 찾기위해 사이트들을 이리저리 돌아 다녔으나 나오질 않더군요. 채팅창 배경만 투명하게하는 이야기들만 나올뿐이고..


이 방법은 OBS 송출 프로그램에서 적용하는 방법입니다.

다른 송출 프로그램에서도 동일한 기능이 있다면 같은 방식으로적용해 보면 같은 효과가 나오지 않을까 합니다.

dc30766bc3654497b7dd334d7ba22fb5.png

-위의 화면처럼 채팅창이 상단부터 페이드아웃이 적용된 효과!

61e5656b37a61316d4ce27ca91c76a3e.png

-채팅창(브라우져 소스)에 마우스 오른클릭 필터를 클릭해 줍니다.

a7f317f2a082f2f8e820b47739919c7e.png

-효과필터 안에서 '이미지 마스크/혼합' 만들어 더블 클릭을 해줍니다

93c3612faba1b4ef5c81e5031f07e5b8.png

-형식은 알파마스크. 파일은 '투명도가 적용된 그라데이션 파일'을 불러와 줍니다.

[V] 이미지 늘리기 체크!

포토샵에서 그라데이션을 사용해서 이미지가 서서히 사라지는페이드아웃 효과를 만들듯이 obs에서도 같은 효과를 낼 수 있습니다.

9b0d427138d14a676477c96fee9b238f.png

-그라데이션을 만들때는 실제 방송화면을 캡쳐!

4990ae3e5563225645fcefeb22a8096c.png

1:1 사이즈로 불러와 레이어를 하나더 생성 그위에 영역으로 그라데이션을 그려 이쯤부터 채팅창들이 서서히 사라지는 부분을 짐작이 가능합니다.

 일단 이렇게 해두어야 수정할때도 어떻게 수정을 주어야 할지 눈에 바로 들어오죠.

'투명>블랙' 으로 만들어진 그라데이션은 확장자 .png로 저장하셔야 투명효과를 그대로 살릴 수 있습니다.


그라데이션파일도 함께 업로드!

e5090bcabd67f842b9ce44724a2a0e82.png


#채팅창 상단 투명

#채팅창 상단 점점 사라지게

#채팅창 페이드아웃

#채팅창 윗부분 투명

댓글 5개  
이전 댓글 더 보기
AD
▼아랫글 방송의 기본:ASIO 상어밥__
방송하기프로그램채팅/봇업데이트
14
방송하기
트위치 사운드트랙 베타 시작! [9]
은빛매7
10-20
17
10-14
5
방송하기
저의 투컴 오디오 세팅입니다. [24]
_이라비_
10-13
8
10-12
12
10-12
61
방송하기
팁 게시판 이용 팁입니다 [10]
라스트오더
10-12
33
방송하기
당신이 뜨지 못하는 이유 [21]
ReanroseTV
10-11
»
10-08
10
프로그램
방송의 기본:ASIO [16]
상어밥__
10-07
22
프로그램
APPLE AAC인코더로 OBS 음질향상 [38]
레퍼런스
10-06
15
프로그램
OBS Studio 26.0 정식배포 [6]
숭숭군
10-05
20
10-04
40
10-03
10
업데이트
NVIDIA GeForce Hotfix v456.71 Driver [5]
로즈우
10-02
6
프로그램
Multistreaming-Assist 툴 업데이트 [4]
구닥다리_티비
10-01
16
10-01
14
프로그램
지금 베가스15가 무료입니다. [4]
도박치료1336
09-24
21
09-23
14
방송하기
리스트림 4시간 이슈 이후 2달 [9]
캄파놀로
09-19
19
프로그램
NVIDIA BROADCAST 앱이 나왔습니다 [8]
로젠케이
09-18
18
프로그램
핫클립 커스텀 레이아웃 CSS [6]
Funzinnu
09-18
인기글 글 쓰기