Web Master Diary

Study

매일같이 변화하는 인터넷환경과 디자인 트랜드에 따라가기위해
멈춰있지 않고 발전할려고 노력합니다..

#4 포토샵 애니메이션 효과

페이지 정보

작성자 yongdesigner 조회 761회 작성일 18-07-24

본문



웹디자인 작업중 종종 만나는 부분이 애니메이션 효과입니다.

애니메이션 효과는 간단한 깜빡힘 효과부터 사용하기에 따라 정말 다양한 효과에
이용될 수 있으니, 자주 연습하시면 도움이 많이 되실거에요.


우선, 첫번째로 원하시는 이미지와 텍스트 레이어를 준비해주세요.



ffd73f32a1ad87551abaf0f966756c7b_1536214951_35.png



두번째로 상단 메뉴에서 Window -> Animation을 클릭하여
하단에 애니메이션 툴을 불러내주세요.


ffd73f32a1ad87551abaf0f966756c7b_1536215512_26.png
ffd73f32a1ad87551abaf0f966756c7b_1536215514_88.png



세번째로는 불러낸 애니메이션 툴바 옆에 레이어 추가 아이콘을
클릭하여 새로운 레이어를 불러와 주세요



ffd73f32a1ad87551abaf0f966756c7b_1536215923_88.png 


네번째로는 추가된 레이어에 효과를 주고 싶은 내용을 변경하세요

그리고 각 이미지레이어 하단에 보이는 시간을 각자 원하는 시간으로
맞춰주세요. 해당시간은 첫번째 이미지에서 두번째 이미지로 넘어가는데 걸리는 시간입니다.



ffd73f32a1ad87551abaf0f966756c7b_1536216348_35.png 


다섯번째는 애니메이션 툴바에있는 두개의 레이어를 동시 선택후 아래 그림에서
네모박스가 처진 아이콘을 클릭하면 우측 설정창이 나옵니다.


해당 서정창에 Frames to Add는 몇개의 새로운 레이어를 추가할 것이냐는
질문으로 해당 중간 레이어를 통해 변화되는 이미지 모습을 좀 더 자연스럽게 해줍니다.


ffd73f32a1ad87551abaf0f966756c7b_1536216654_24.png

맨앞에 레이어를 클릭 한후 재생버튼을 클릭하면 정상적으로
변화되는 포토샵 애니메이션 효과를 확인 할 수 있습니다.

ffd73f32a1ad87551abaf0f966756c7b_1536217414_45.png

 


마지막으로 첫번째 레이어 밑에 보이는 once / 3 time / Forever은 각각 한번만 / 세번 / 무한으로
재생애니메이션을 실행하라는 명령어니 해당 명령어에 맞게 설정해주시고

설정이 끝나면 마지막으로 저장을 GIF로 해주세요.


ffd73f32a1ad87551abaf0f966756c7b_1536217270_29.png

하단에 애니메이션 결과물 입니다.

ffd73f32a1ad87551abaf0f966756c7b_1536217301_32.gif

 

Copyrightⓒ2018 yongdesigner. All rights reserved.