본문 바로가기
  • 삶을 오르는 날들
디자인/디자이너의 하루

[애프터이펙트/포토샵] 투명 배경 gif 만들기/scroll motion Gif/포토샵 Gif 저장/After effect/Photoshop

by Thanks Joanne 2020. 5. 11.
반응형

 

홈페이지에 들어갈 투명 배경의 스크롤 모션 Gif 이미지가 필요하여 제작하였당!

위 이미지는 게시물 작성을 위해 검은 바탕을 추가하여 출력한 이미지이당ㅎ.ㅎ

 

 

 

 

 

 

 

 

 

 

 

 

1. 먼저 애프터 이펙트에서 모션을 만들어 준다.

홈페이지 메인 사진 위에 띄워질 투명 gif이기 때문에 투명바탕에 흰색으로 작업하였고

나의 경우 짧은 모션이기 때문에 1초 15프레임의 짧은 길이로 제작하였당!

 

 

 

 

 

 

 

 

 

 

 

2. Ctrl + M을 눌러 렌더링 대기열에서 출력 모듈 : 손실없음을 눌러

비디오 출력에서 채널 부분을 RGB+알파로 바꿔준다!

 

이 설정은 배경값을 빼주는 설정임으로 반드시 빨간 네모 부분을 바꿔줘야 한다!

그리고 Avi로 렌더링 귀귀씽~

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 포토샵에서 렌더링한 Avi 파일을 연다!

안열릴줄 알았는데 열린당 쿄쿄

그러면 포토샵 작업창 하단에 타임라인이 생긴다

 

 

 

 

 

 

 

 

 

 

 

4. 파일 - 다른이름으로 저장 - 웹용으로 저장을 눌러

Gif로 설정을 바꿔주고 오른쪽 하단 애니메이션을 계속으로 바꿔줘야

반복되는 gif 이미지를 만들 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

5. 완성!

4번의 설정에 따라 한 번만 움직이고 끝나는 모션도 가능하당ㅎㅎ

우리는 사이트에서 계속 돌아가는 scroll motion 이미지가 필요했기 때문에

계속 움직이는 GIF로 출력/저장했당

 

 

 

 

 

 

 

반응형

댓글