초간단 움직이는 이모티콘 만들기 (gif 화일 만들기) 프로그램

내가 그린 그림을 연속으로 이어 붙여서 움직이는 이모티콘 파일을 만들어 보자.

완성된 파일은 gif 파일로 저장해서 활용할 수 있다. 배경을 투명하게 저장할 수도 있다.

간단한 에니메이션 처럼 제작도 가능하다.

아래 링크에서 만들면 된다.

https://sciencej1.cafe24.com/html5/gifmake/gifmake.html

만들어본 움직이는  gif 파일이다.

아래 파일을 다운 받아서 작업 열기로 불러 오면 추가로 작업할 수 있다.

점프하기.json

0.13MB

간단한 실험이나, 영상 또 나만의 움직이는 이모티콘을 만들어서 활용할 수 있다

수업시간에는 자유낙하 운동, 등속운동, 날아가는 우주선, 스포츠 동작, 감정 표현, 영어단어와 뜻, 한자단어와 뜻, 단어카드 등 다양한 곳에 활용될 수 있을 것이다.

좋은 점은 만들어진 gif 파일을 아래한글이나 ppt 에 넣어서도 사용이 가능하다는 점이다. 특히 배경을 투명하게 하면 뒤에 글자가 보이게 올릴 수도 있다. 

아래 한글에 오버레이 시켜서 넣었을 때 아래 그림처럼 불투명한 그림은 뒤에 글자가 안보이지만, 배경을 투명하게 저장한 그림은 뒤에 글자가 보인다. 

 

<만드는 방법>

일단 동영상을 보자

https://youtu.be/_9NpPLRGfPA

 

프로그램을 실행시키고 원하는 그림을 만들어 보자. 

1. 그리기 도구

  펜으로 그림을 그리거나, 직선, 원 등 다양한 도형을 그릴 수 있다. 지우개를 이용해서 일부분을 지울 수도 있다. 

2. 이동 과 선택

이미 그린 그림 전체를 이동시킬 수 있다. 

컷에 그린 사람이 한쪽으로 치우친 경우 이동을 선택하고 화면 전체를 이동시킬 수 있다.

선택을 눌러 원하는 부분을 선택하면 아래와 같은 메시지가 나온다. 

3. 선택 

 원하는 부분을 선택하면, 잘라내거나, 복사하거나, 붙여 넣기를 할 수 있다. 

 또 선택된 모서리 꼭지점을 드래그 해서 크기를 조절할 수 있다.

4. 컷 편집(프레임 편집)

  프레임 컷을 복사해서 붙여 넣거나 삭제할 수 있다.

 첫번째 프레임 컷을 만든 다음 복사해서 두번째 컷에 붙여 넣고 필요한 부분만 수정하면 편하다.

 프레임에 사진 불러오기를 눌러 미리 만든 사진이나, 인터넷에서 다운 받은 사진을 불러올 수 있다. 즉 직접 그리지 않고 기존에 있는 캐릭터를 사용할 수 있다는 뜻이다. 

5. 프레임 편집

공통배경은 모든 프레임에 변하지 않고 등장하는 배경이다.

1프레임 부터 프레임을 추가해 가며 움직이는 그림을 그리면 된다. 그럼 나중에 에니메이션 재생을 눌러 완성된 모습을 확인할 수 있다.

위 그림 처럼 2프레임을 선택하면 1프레임이 모습이 뒤에 희미하게 나온다. 즉 이전 프레임을 참고해서 2프레임 그림을 완성하면 된다. 

6. 에니메이션 재생 및 저장

  재생을 누르면 0.2초 간격으로 아래쪽에 그려진 프레임들이 재생이 된다. 

 만약 프레임이 변하는 시간을 바꾸고 싶다면 프레임 간격(ms)을 줄이면 된다. 

7. GIF 저장

  완성된 파일은 gif 파일로 저장할 수 있다. 

그림 크기를 조절할 수 있고, 투명 배경으로 저장하는 것도 가능하다. \

*간혹 스마트폰 속도에 따라 마지막 프레임이 저장되지 않는 경우가 있다. 그런 경우에는 다시 저장해 보면 된다. 정 안되면 마지막 프레임을 복사해서 같은 그림으로 2개 만들면 된다. 

8. 작업 보관(프로젝트 보관)

완성된 gif 파일을 저장하는 것이 아니라 작업하던 프로젝트를 저장할 수 있다.

작업하던 내용을 보관했다가 나중에 다시 불러 오면 이어서 작업할 수 있다. 

한번에 모든 작업을 끝낼 수 없기 때문에 현재까지 작업하던 내용을 저장해 놓면 편리하다.

 

<수업 사용 예시>

https://sciencelove.com/483163

등속 등가속 자유낙하 운동을 움직이는 이모티콘으로 만들기