메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

기타 질문하기:http://www.funcafe.co.kr

프로모션따라하면 애니메이터처럼한다

2회 - 라이트박스로 실제 애니메이터처럼 작업하기

- 이번강좌는 다른 그래픽프로그램에서는 찾아보기힘든

프로모션에서만 볼 수 있는 기능중 라이트박스를 이용한 애니메이션제작에

관한 내용을 다루어보겠습니다. 밑에 in850430 님께서 올리신 강좌에 중복되는

내용입니다만, 제가 업로드한 프로모션 4.0 기준으로 다시 설명을 해드리겠습니다.

- 우선 도트애니메이션을 작업하기에 앞서서 셀애니메이션의 작업순서를 알아보겠습니다

(기본적인 평면애니메이션의 작업순서이므로 프로모션으로 라이트박스이용시 연관이 있습니다)

 

기존 셀 애니메이션 제작과정

-기획-스토리보드제작-원화-동화-칼라링-인화 의 순으로 대부분 작업을하는데

여기서 그림을 그리고 애니메이션을 구현시키는 부분은 원화와 동화작업에서 이루어지는데요

그럼 원화는 무엇이고 동화는 무엇인지 알아보면

일단 어느 한동작의 애니메이션을 만든다고 했을 경우 일단 키프레임이 되는 원화를 먼저

그립니다 그리고 그중간을 자연스럽게 이어주는 그림은 트웨인프레임으로 동화라고합니다.

그림으로 설명을하자면

위의 그림처럼 최초 1프레임과 마지막 1프레임을 원화라고 보면

그사이에 들어가는 중간 그림을 동화라고 합니다.

그런데 이런 작업을할 때 처음 1프레임과 마지막프레임인 원화를 먼저 그리고나서

중간을 자연스럽게 이어나가는데 이작업을 편하게 하기위해 동화를그리는 분들은

라이트박스를 놓고 원화사이에 동화를 그릴 종이를 넣고 손으로 그림들을 돌려보면서 중간을

쪼개어 가면서 그림을 그립니다. 그래야 작업이 빠르고 효율적으로 되기 때문이죠

위의 그림처럼 그림을 그린다고하면 라이트박스위에서 그리면 아래와같이 원화를 위와 밑에

두고 중간에 그림을 그립니다

<--- 라이트박스에서 그림을 그렸을 때 이런 그림을 볼 수 있음

 

이런과정을 거쳐서 중간에 중간 그리고 중간에 중간을 이어가면서 자연스러운 애니메이션이

완성됩니다,

 

자~! 이렇게 설명을 하는이유는 프로모션에서는 이같은 기능을 컴퓨터로 작업을 할 수 있도록

도와주기 때문에 좀 서론이 길었습니다.

 

자그럼 본격적으로 위와 같이 라이트박스를 이용하여 동화를 만들어 가는방법을

알아보겠습니다.

 

1. 프로모션을 실행합니다.

2. file에서 new screen/animation을 선택합니다.

3. 아래그림과같이 대화 상자가 뜨면 이미지의 크기를 정하고 프레임수를 지정하고 ok합니다

4. 그리고 툴바에서 이미지보기 크기를 1x로 해서 1:1비율로 맞춥니다.

(크기는 본인이 제작하기 좋은 크기로 하셔도 됩니다)

5.option에서 show palette를 선택하여 칼라테이블을 엽니다

6. 원하는색을 선택하고 브러쉬크기와 모양을 선택하고 시작되는 원화를 그립니다.

(시간관계상 강좌의 그림은 허접하고 유치함을

이해해주시기 바랍니다 -_-;;)

7. 그리고나서 화면하단에 보이는 control panel에서

표시된>을 클릭하시거나 키보드 숫자 "2"를  누르시면 다음프레임으로

이동합니다

8. 이제 마지막프레임으로 가서 ( >>ㅣ를 누르시거나 키보드 방향키 ->를 눌러서 마지막 프레임으로

이동하십니다)

그리고 나서 마지막 키프레임(원화)를 그립니다

         [1프레임 ]                     [ 마지막 5프레임]

저는 이그림을 총 5프레임으로 만들어 보겠습니다 현재 시작과 끝프레임 2프레임이 있으니

중간에 3프레임만 이어 그리면 되겠지요?

그럼이제 1~5프레임의 중간프레임이 되는 3프레임으로 이동합니다.

>을 클릭하시거나 키보드 숫자 "2"를  누르시면 다음프레임으로 이동합니다

9. 3프레임상태에서 메뉴중에 animation-light tabel-adjust light table을 선택하거나

단축키 ctrl+alt+L을 누릅니다.

10. 그럼 아래와같은 대화 상자가 뜹니다.

      우선 레이어1에 1프레임의 그림이 보여지게하기위해서

      layer1에는 frame란에 현재 3프레임이고 1프레임은 3프레임보다 2프레임전이니까

      -2라고 쓰고 usecolor는 원하는 색으로 지정하시고 brightness값을 70~80사이로 줍니다.

      그리고 Transparent color는 뒷 배경색을 지정해줍니다.

11. 그럼 화면을 잘보시면 animation window창에 1프레임의 그림이 희미하게 보이는걸 볼 수 있습니다

    말그래로 1프레임의 이미지가 투영되는 것입니다.

   

12.그럼 이제 현재 3프레임상태에서는 1프레임이 투영되니 마지막 5프레임도 투영되게 하려면

     아래그림처럼 레이어2를 선택하고 프레임은 현재보다 2프레임뒤니까 2로 하고 밝기는 1프레임의 밝기보다

     마이너스값을 줍니다 한 -40정도면 적당할겁니다.

    그리고 Transparent color는 뒷 배경색을 지정해줍니다.

     자 그럼 아래그림과같이 1프레임과 마지막 5프레임이 함께 투영되는 것을 볼수있습니다.

  

13. 그럼이제 3프레임에서 두 키프레임의 그림사이를 자연스럽게 이어주는 그림을 그립니다

      애니메이터들은 이과정을 "쪼갠다" 고 합니다.

                   

14. 이런식으로 키프레임(원화)사이의 중간부분인 3프레임을 그립니다.

           

15. 그럼이제 1~3프레임사이의 그림을 이어갑니다. 이렇게 하면 다시 1프레임이 시작이고 3프레임이 마지막

     이라고 보면 중간 프레임인 2프레임으로 이동합니다.

그리고 위와같이 2프레임에서 메뉴중에 animation-light tabel-adjust light table을 선택하거나

단축키 ctrl+alt+L을 누릅니다.

그리고나서 1프레임을 투영되기하기위해서 아래그림과같이 layer:1에서는

frame:-1   brightness:80을줍니다

그리고 Transparent color는 뒷 배경색을 지정해줍니다.

 

그리고 3프레임을 투영되기하기위해서 아래그림과같이 layer:2에서는

frame:2   brightness:-40 을줍니다

그리고 Transparent color는 뒷 배경색을 지정해줍니다.

 

그럼 위의 그림과 같이 이제는 1프레임과 3프레임의 그림이 투영되는 것을 볼 수 있습니다.

위의 lighttable설정방법을 간략히 설명하자면

일단 현재프레임을 기준으로

layer: - 보여줄 프레임의 해당하는 레이어

project: 문서이름

frame :[] - 현재프레임을기준으로 보여질 프레임이미지 이전이면 -(마이너스) 이후면 숫자표시

brightness: 이미지의 투명도

trnsparent color 투명하게 즉 안보이게되는 색상선택

16. 이런식으로 중간중간 프레임을 이어가면서 중간 동화를 이어갑니다.

          1프레임                        2프레임                 3프레임            4프레임                                5프레임

17. 이렇게 라이트테이블을 이용하면 보다 쉽고 효율적으로 애니메이션을 만들 수가 있습니다

이제 각 프레임사이의 시간을 지정합니다.

하단에 control panel에서 플레이 컨트롤 부분 옆에 보시면 숫자를 표시하는부분을 선택합니다

그럼 아래와같이 value값을 지정해줍니다. 숫자의 기준은 /million second 단위입니다

그리고 이 100의 수치를 모든 프레임사이에 적용하실려면 옆에 있는 A 자를 클릭하시고 대화 상자에서

ok를 하시면 전체 프레임사이마다 100의 값이 적용됩니다.

18. 그럼 작업한 애니메이션을 gif파일로 저장하기위해선 메뉴에서 plugin->export를 선택합니다.

그리고  gif98saver를 선택합니다.

그럼 아래그림에서 delay값을 지정하고 (만약 변경하지 않으면 위에서 적용한 값이적용됩니다)

파일이름을 적어주고 저장위치를 지정한후에 save animate gif를 선택하시면됩니다

 

 

19. 그럼 다음과같이 gif애니메이션이 완성됩니다.

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48026
42 PNG 파일의 포맷에 대하여 알려드릴께요. [21] ZipShin 2002.11.27 6659
41 이미지의 저장 GIF 인가 JPG(JPEG)인가? [15] ZipShin 2002.11.25 7496
40 이쁜(?) 텍스트 만들기 [8] file w:)style 2002.11.03 5308
39 [그림판강좌2탄] 벅스뮤직 메뉴바 따라해보기. [12] file 바른생활NZEO 2002.10.29 7526
38 본메뉴에 마우스오버스시 서브메뉴 나타나기(허접강좌ㅡㅡ;;) [5] 박은석 2002.09.18 9232
37 형용사적인 색의 연상. [9] Neople 2002.09.14 3783
36 단일색의 연상. [8] Neople 2002.09.13 3534
35 하이링고님의 말씀에 대한 공식적인 사과문 [4] 김광욱 2002.09.11 14621
34 나두 컬러 팁 하나....^^ [6] 유현우 2002.09.06 3976
33 칼라 팁? ㅡㅡa [17] 날수없는하늘 2002.09.05 4560
32 제원이가 하는 SWiSH 첫강좌! -iMBC 쇼코너 따라하기- [7] file w:)style 2002.09.01 4706
31 [프로모션]제4회 달리는 애니메이션 만들기 [13] 정현석 2002.08.27 646
30 [기타] 포토샵을 이용한 윈앰프3 스킨 만들기. [11] file 엔카일 2002.08.27 5192
29 [프로모션]백그라운드칼라 투명값주기 [4] 정현석 2002.08.27 4615
» [프로모션]애니메이터의작업처럼 라이트박스기능활용 [3] 정현석 2002.08.27 3070
27 [프로모션]프로모션 따라하면 애니메이터처럼한다 1회 프로모션의 설치/인터페이스 [2] 정현석 2002.08.27 3206
26 일러스트와 벡타 3d를 이용해 회전 문자 만들기~ㅎ_ㅎ [3] file Click 2002.08.20 3187
25 색배합도 하고 원하는 배경 이미지도 만들자;!(외국 사이트 소개) [12] 김현경 2002.08.10 6421
24 [하이링고] 꼭 함 읽어주셨음 해요!! 심란한 링고.. [39] 하이링고 2002.08.04 4541
23 [아이콘 셋] 퀄리티 높은 아이콘 셋입니다. [3] file jury 2002.07.16 8112