AD

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

하얀여우미오
2020-10-08 13:17:20 13381 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 상어밥__
방송하기프로그램채팅/봇업데이트
5
프로그램
AIDA64 Extreme 무료-종료 [5]
hayanggom
01-30
13
12-13
8
프로그램
Multistreaming-Assist 툴 업데이트 [6]
구닥다리_티비
12-11
39
프로그램
Twip Slim Alert Box 2.0 [5]
레카키드
12-08
11
12-03
9
프로그램
유캠 3만원 할인중이네요 [11]
검비_
10-29
8
10-12
»
10-08
11
프로그램
방송의 기본:ASIO [16]
상어밥__
10-07
23
프로그램
APPLE AAC인코더로 OBS 음질향상 [39]
레퍼런스
10-06
15
프로그램
OBS Studio 26.0 정식배포 [6]
숭숭군
10-05
6
프로그램
Multistreaming-Assist 툴 업데이트 [4]
구닥다리_티비
10-01
14
프로그램
지금 베가스15가 무료입니다. [4]
도박치료1336
09-24
19
프로그램
NVIDIA BROADCAST 앱이 나왔습니다 [8]
아는척하는_로젠케이
09-18
18
프로그램
핫클립 커스텀 레이아웃 CSS [6]
Funzinnu
09-18
7
프로그램
OBS 방송을 다른 PC의 OBS 미디어 소스로 받아보기 [5]
아는척하는_로젠케이
09-12
인기글 글 쓰기