AD

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

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

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

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


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


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

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

dc30766bc3654497b7dd334d7ba22fb5.png

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

61e5656b37a61316d4ce27ca91c76a3e.png

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

a7f317f2a082f2f8e820b47739919c7e.png

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

93c3612faba1b4ef5c81e5031f07e5b8.png

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

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

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

9b0d427138d14a676477c96fee9b238f.png

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

4990ae3e5563225645fcefeb22a8096c.png

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

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

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


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

e5090bcabd67f842b9ce44724a2a0e82.png


#채팅창 상단 투명

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

#채팅창 페이드아웃

#채팅창 윗부분 투명

후원댓글 5
댓글 5개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
AD
▼아랫글 방송의 기본:ASIO 상어밥__
방송하기프로그램채팅/봇업데이트
9
프로그램
유캠 3만원 할인중이네요 [11]
검비_
10-29
17
방송하기
월 5$로 유명 음원 사용하기 [1]
은빛매7
10-25
13
10-25
6
10-24
12
방송하기
영도 관련팁 [3]
태연한척하는
10-23
14
방송하기
트위치 사운드트랙 베타 시작! [9]
은빛매7
10-20
17
10-14
5
방송하기
저의 투컴 오디오 세팅입니다. [24]
_이라비_
10-13
8
10-12
14
10-12
62
방송하기
팁 게시판 이용 팁입니다 [10]
라스트오더
10-12
34
방송하기
당신이 뜨지 못하는 이유 [21]
ReanroseTV
10-11
»
10-08
11
프로그램
방송의 기본:ASIO [16]
상어밥__
10-07
인기글 글 쓰기