강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

[강좌] 이미지레디를 이용한 Gif만들기
작성자 : 10 액션쟁이
등록날짜 : 2008.12.29 09:42
2,884



자자~! 두번째강좌이군요 ㅎ

 

이번에는 이웃분들이 많이 궁금해하시는 Gif 파일만들때 기본적인 트릭인 움직이는 효과를 주는것입니다 ㅎ

 

이거 하나만 알고있으면 모든게 다 응용이 가능하다죠 ㅎ

 

저또한 간단한 트릭하나가지고 모든걸 응용해냈다죠..; ㅎ

 

그러면 좀 미약하더라도 강좌 시작해보것습니다

 

 

3660931524_fc8b691f_1-junhyoung464.jpg

 

1. 자~! 이제 포토샵 을 불러와볼까요?
 

3660931524_15e71458_2-junhyoung464.jpg
 
2. 포토샵을 열고 원하는 그림을 한장 불러옵시다 ㅎ
 
저는 스즈미야 각하를 모델로 하겠습니다
 

 

 


 

3660931524_ca6b4629_3-junhyoung464.jpg
 
3. 그리고 나서 왼쪽 텍스트 툴을 이용하여 원하는 문구를 한번 써봅시다
 
(이 강좌에서는 포토샵에 대한 기초적인 지식은 꼭 필요합니다!!)
 
 
 
 

3660931524_bad05a03_4-junhyoung464.jpg
 
4. 우리는 문구를 입력했기때문에 왼쪽하단 레이어창에 텍스트 레이어가 하나 생긴것을 발견할 수 있습니다
 
 
 
 
 

3660931524_92044667_5-junhyoung464.jpg
 
5. 음.. 문구를 하나 더 입력해볼까요? ^ㅡ^
 
(문구를 제외한 사진을 넣으셔도 무방합니다)
 
 
 
 

3660931524_d64ab5a8_6-junhyoung464.jpg
 
6. 자~ 이제는 레이어가 그림 1개 ,텍스트 2개로 이루어졌군요 ㅎ
 
우리는 이걸 가지고 이미지레디로 넘어갈 예정입니다 ㅎ
 
 
 
 
 

3660931524_cca184bb_7-junhyoung464.jpg
 
7. 자자~ 이미지 레디로 갑시다 ^ㅡ^//
 
3660931524_126e7c30_8-junhyoung464.jpg
 
8. 이미지레디로 왔습니다 ㅎ
 
좀 복잡하죠..? (저도 처음에는 꽤 헷갈렸습니다)

 
3660931524_dced9c13_9-1-junhyoung464.jpg
 
3660931524_ef4a50e1_9-2-junhyoung464.jpg
 
9. 이미지 레디에서 작업할때 우리가 살펴봐야하는건 이 두 창뿐입니다 ㅎ
 
다른건 안보셔도 될듯하군요 ㅎ
 
첫번째 창프레임들을 하나하나 관리하기도 하고 생성하기도 하는창이고
 
오른쪽 아래에 있는 창이 포토샵에서 익숙한 레이어 창입니다 ^ㅡ^//
 
 
 
 
 
3660931524_3f63cfae_10-1-junhyoung464.jp
 
10. 이미지레디 레이어창에서 두 문구의 눈모양을 제거하도록 합시다
 
 
 

3660931524_546f5950_11-junhyoung464.jpg
 
11. 눈모양을 제거했더니 문구가 사라졌군요~? ㅎ
 
우리는 이 문구가 나타나게 할것입니다
 


 

 

3660931524_30f72f9d_12-junhyoung464.jpg
 
12. 자~! 프레임 창으로 넘어오셔서 Duplicates crrent Frame (새로운 프레임을 생성)
 
을 클릭하시면 새로운 프레임이 방금 앞의 프레임과 똑같이 복제됩니다
 
 
 
 

3660931524_a2804c2b_13-junhyoung464.jpg
 
13. 프레임 2가 선택된 채로 레이어창으로 넘어와 한 문구의 눈모양을 다시 살려보도록 하죠
 
 
 

3660931524_32d94214_14-junhyoung464.jpg
 
14. 프레임 창을 유심히 보면 그림 아래에 프레임이 넘어가는데 걸리는 시간을 조정하는곳이 있는데
 
이곳을 알아서 맞춰주세요
 
 
 

3660931524_5232d032_15-junhyoung464.jpg
 
15. 그리고 나서 재생버튼을 눌러보도록 하죠
 
 
짜잔~
 

3660931524_5caa06ae_25BF25B925C125A61-ju
 
이렇게 됩니다 ㅎ
 
(참고로 저장하시려면 [File]-[Save Optimized As...] 로 저장해주세요)
 
 
 
이제는 한단계 응용해보도록 할까요? ㅎ

3660931524_99bd7cb3_15-junhyoung464.jpg

 
16. 다시 두 문구의 눈모양을 제거해주고 새로운 프레임을 아까와 똑같이 하나 만들어 주도록 합시다
 
 
 

3660931524_6f3aa322_16-junhyoung464.jpg
 
17. 이번에도 마찬가지로 새로생성한 두번째 프레임이 선택된채로
 
레이어창에서 문구 하나의 눈모양을 다시 살려줍시다 ㅎ
 
또한 위에 보이면 Opacity 가 보이시죠? ㅎ
 
이건 투명,불투명도를 조절 하는겁니다 ㅎ
 
퍼센트가 낮아질수록 이미지가 희미해지는것이죠
 
 
 

3660931524_15221837_17-1-junhyoung464.jp
 
18. 그러면 저는 아주 희미하게 20%를 주도록 하겠습니다
 
(0%로 하면 눈모양을 제거한것과 마찬가지로 해당 레이어가 완전히 보이질 않게 됩니다)
 
 

3660931524_5f7397d8_17-2-junhyoung464.jp

 
19. 희미해진거 보이시죠?
 
 
 
 
 

 

3660931524_d3fb5586_18-junhyoung464.jpg

20. 여기서 프레임을 하나 더 생성하여 세번째 프레임이 선택된채로 Opactiy 값을 50%로 좀더
 
밝게 하겠습니다 ㅎ
 
이 방법으로 계속 프레임을 생성하여 70%로 맞춰주고
 
다시 프레임을 생성하여 최종적으로 100%로 해줍시다
 
 
 

3660931524_77ef98cd_20-junhyoung464.jpg
 
21. 프레임이 총 5장이 되었군요~? ㅎ
 
그리고 5번째의 프레임의 Opactiy값또한 100%가 되었군요
 
 
 

empty.gif
 
22. 이 상태에서 6번째 프레임을 생성한다음 눈모양을 제거해두도록 하겠습니다
 
 
 

3660931524_62b328a5_2225BB25E725BA25BB-j
 
23. 대신 다른 문구의 눈모양을 나타나게 해줍시다
 
 
 

3660931524_77f88d72_23-junhyoung464.jpg
 
24. 그리고나서 프레임창으로 와서 타이밍을 적절하게 맞춰주면

 

3660931524_633a5e6f_24-junhyoung464.jpg
 
짜잔~~ 이렇게 되는군요 ㅎ
 
"스즈미야 하루히" 부분이 희미해지고 다시 "Ume's Blog" 부분이 다시 나타나는 형식이군요
 
 
 
하지만 프레임 하나하나 Opacity 값을 정해주어야 한다는게 짜증나죠???
 
그래서 간편하게 할수있는 도구가 하나 있습니다
 
 
 
 

3660931524_0b2018fe_25-junhyoung464.jpg
 
25. 프레임이 하나 있죠?? 이 프레임이 선택된 상태로 레이어창에서 원하는 문구의
 
눈모양을 만들어주시고 Opacity 값을 100%로 해주세요
 
(우리는 지금 점점 흐려지는걸 만드려고 합니다)
 
 

3660931524_aa20391a_26-junhyoung464.jpg
 
26. 그리고 나서 새로운 프레임을 하나 만들어준뒤에
 
Opacity 값을 0%로 해주세요
 
 
 

3660931524_a328425b_27-junhyoung464.jpg
 
27. 그리고 나서 프레임창을 보면 위와같이 구슬이 날아가는듯한? 모양의 도구가 있을것입니다
 
바로 이것이 Opacity값을 자동으로 조정해주는 편리한 도구입니다 ㅎ
 
 
 

3660931524_c19a2794_28-junhyoung464.jpg
 
28. 클릭하면 이런창이 뜹니다
 
여기서 주목해야할것은 검정색 테두리로 된 부분인데 이것은 아까
 
100%로 설정했던 프레임과 0%로 설정했던 프레임 사이에 새롭게 생성될 프레임의 개수입니다
 
저는 그냥 무작정 2개로 설정했습니다
 
 
 
 

3660931524_8c919307_25BF25B925C125A62-ju
 
29. 확인을 눌러보면
 
정말로 프레임이 2개에서 2개가 더 추가된 2개로 늘어났군요?!
 
여기서 프레임들의 Opacity값을 잘 살펴보면
 
첫번째 프레임부터 100%->67%->33%->0%
 
이제 아셨겠죠???
 
100% 와 0% 프레임 사이에 일정한 간격으로 Opacity값이 조정됩니다 ㅎ
 
 
 
이를 응용하면..
 
점점 사라지다가 또다시 점점 나타나지고
 
등등.. 여러가지로 응용할수 있습니다 ^ㅡ^//
 
 
저도 이거 하나만 알고 별걸 다 만들어 냈다죠.. ㅎ
 
 
 
-강좌 후기-
 
아.... 이거 하나하나 다 캡쳐하느라 죽는줄 알았네요 -_ -;;
 
강좌만드는게 이렇게 힘들줄은...
 
무려 1시간 20분이나 소요..................................
 
 
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 
이 포스트의 저작권은 유메 (http://blog.naver.com/junhyoung464)
 
에게 있음을 알려드립니다.
 
 
또한
 
위 자료는 불펌(덧글없는 스크랩) , 스크랩시 무단수정 , 네이버 이외의 타 사이트로의 자료이동
 
시 엄격한 처벌이 들어갑니다
 
 
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취