워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그


이전 글 에서 소개드린대로 이번글에서는 동영상을 편집하여 흥미로운 애니메이션 GIF파일을 만드는 방법을 알아봅니다. 이러한 GIF파일을 만드는 방법이나 이미지를 Cinemagraph라고 합니다. Cinema는 그리스어의 움직인다(Kinein)와 이미지를 의미하는 graph로 만들어진 단어로 움직이는 사진(Moving Picture)을 의미합니다. 

기존에 동영상을 GIF로 만들면 화면 전체가 움직이므로 정지된 영상은 없으니 사진이라기 보다는 동영상의 축소판이라고 할 수 있습니다. 하지만 위 이미지는 일부는 정지되어 있고 일부는 움직입니다. 어떻게 가능할까 생각해보니 포토샵의 레이어마스크를 이용하면 쉬운 작업이더군요.

우선 위 이미지는 유투브에서 다운 받았는데 디지털카메라의 동영상 촬영기능을 이용해서 자신만의 시네마그래프를 만들려면 삼각대가 필요합니다. 삼각대가 없으면 고정된 자리에 카메라를 배치하고 동영상 촬영을 해도 됩니다. 유투브에는 아주 많은 동영상이 있어서 공유할 수도 있습니다.  이곳 을 이용하면 유투브의 동영상 인터넷주소를 복사해서 붙여넣기하고 다운로드 버튼을 클릭하면 여러종류의 동영상으로 다운 받을 수 있습니다.

1. 동영상 촬영하기


디지털 카메라로 시네마그래프를 만들기 위해서는 움직이는 부분의 배경이 단순해야합니다. 즉 정지된 이미지가 나올 수 있는 배경이어야 좋은 효과가 나옵니다. 위 이미지를 보면 아이유양의 배경이 고정되어있죠. 그외의 부분은 움직여도 상관없습니다. 어차피 아이유양이 있는 부분만 마스크할 것이니까요.

2. 동영상 캡쳐하기


동영상의 일부분을 잘라내려면 동영상 편집 프로그램이 있어야하지만 많이 쓰이는 KMPlayer를 사용하면 프레임별로 JPG이미지로 저장할 수가 있습니다. 포토샵에서도 동영상자체를 편집할 수 있지만 화면을 축소하기 위해 잘라내는(Crop기능)이 안됩니다. 그래서 이미지파일로 만들면 포토샵에서 자르기도 가능해서 필요한 부분만 편집할 수 있습니다. 동영상을 KMPlayer에 불러오기 전에 우선 파일의 이름을 변경해주는 것이 좋습니다. 원본파일의 이름이 길면 보기에 좋지 않습니다. 윈도우 탐색기에서 동영상 파일을 우클릭해서 이름 바꾸기로 파일명을 바꿔줍니다.  


KMplayer의 캡쳐기능은 우클릭해서 환경설정을 클릭하여 고급메뉴사용을 선택하면 메뉴에 활성화됩니다.


자신이 찍은 이미지나 다운 받은 이미지를 KMPlayer로 보면서 GIF이미지로 만들고 싶은 부분을 찾아서 시작부분에서 약간 이전에 스페이스바를 눌러 정지합니다. 나중에 캡쳐이미지를 다 사용할 것은 아니므로 정확하지 않아도 됩니다. 우클릭하면 캡쳐제어라는 메뉴가 활성화되어 있습니다. 선택하면 서브메뉴가 나옵니다. 고급캡쳐를 선택합니다.


옵션창에서 1의 버튼은 KMPlayer의 캡쳐이미지가 저장되는 기본폴더를 보여줍니다. 경로를 변경하려면 2을 클릭하여 저장할 폴더를 선택할 수 있습니다. 3을 클릭하여 JPEG중간속도를 선택하고 4의 방법에서 영상만 캡쳐를 선택합니다. 추출갯수는 지정초동안에 체크하고 10을 설정합니다. 크기설정은 원본 크기로 캡쳐에 체크하고 추출방법은 모든프레임에 체크한 다음 시작버튼을 클릭하면 캡쳐가 시작됩니다. 바로 동영상 화면을 클릭해서 스페이스바를 누르면 동영상이 시작됩니다. 10초가 지나고 나면 화면의 좌측상단에 몇개의 프레임이 캡쳐됐다는 메시지가 나옵니다.

저장 폴더에 가면 일련번호가 메겨진 수백개의 파일이 나옵니다. 우선 앞에 동영상 파일이름이 나오고 그다음에 일련번호, 그다음에 .jpg로 나옵니다. 일련번호로 되어있기 때문에 포토샵에서 불러오면 순서대로 레이어에 배치됩니다.


윈도우 탐색기에서 첫째 파일을 클릭하면 사진뷰어로 보입니다. 다음버튼을 클릭하여 자신이 어느 부분을 시작점으로 했는지 이미지를 찾아서 파일 이름을 메모합니다. 다음 버튼을 계속 클릭하여 어느부분의 파일에서 정지할 것인지 찾아서 메모합니다.

3. 포토샵에서 편집



많은 수의 파일을 포토샵에 불러오면 포토샵이 버벅댑니다. 그래서 이전에 시작할 부분의 파일이름과 마지막부분의 파일이름을 메모했습니다. 성능이 좋은 컴퓨터이면 이런 작업을 하지 않아도 되겠죠. 포토샵 메뉴에서 파일-스크립트-Load Files into Stacks를 선택하면 위와 같은 창이 나옵니다. 선택된 파일만 불러오려면 1에서 Files를 선택하고 성능이 좋은 컴퓨터라면 폴더를 선택합니다. 2의 브라우즈 버튼을 클릭하면 브라우저 창이 나옵니다. 저장한 폴더로 이동해서 메모한 첫번째 파일을 선택하고 Shift키를 누르고 마지막파일을 선택한 다음 열기 버튼을 클릭하면 3의 빈공간에 파일 이름들이 채워집니다. OK클릭하면 선택된 파일들이 레이어별로 순서대로 배치되기 시작합니다.


레이어패널에 백여개의 파일이 들어왔습니다. KMplayer에서 이미지를 보면서 아이유양이 어느부분에서 움직이는지 확인해서 잘라낼 곳을 선정합니다. 만일 저 상태로 자르면 아이유양이 일어나는 상황이 벌어지면 큰일나겠죠. 동영상을 큰 사이즈로 다운받아서 크기를 축소하기 위해 자르기툴을 선택하고 옵션바에서 수치를 입력한 다음 클릭드래그해서 선택합니다. 엔터키를 치면 좀 시간이 걸리면서 잘라집니다. 많은 수의 이미지를 애니메이션 GIF파일로 만들면 용량이 엄청 커집니다. 자신의 컴퓨터 성능 보다도 인터넷에 올리면 로딩되는 속도가 느려지게 됩니다. 그래서 가능한한 파일의 크기를 줄여야합니다.


레이어작업을 하기전에 우선 프레임작업부터해서 좋은 이미지를 만들어야합니다. 메뉴에서 윈도우-애니메이션을 선택하면 하단에 애니메이션 패널이 나옵니다. 포토샵의 애니메이션 패널은 두종류가 있는데 프레임패널과 타임라인패널입니다. 타임라인형태로 나오면 1의 아이콘을 클릭하여 프레임형태로 바꿉니다. 2의 시간은 나중에 바꾸고 우선 3을 클릭하여 Forever로 선택합니다. 4를 클릭하여 Make Frames from Layers를 선택하면 프레임 패널에 레이어의 이미지들이 다 들어옵니다. 다시 4를 클릭하여 Select All Frames를 선택하면 모든 프레임이 선택됩니다. 2의 시간부분을 클릭하여 기타(Other)를 선택하고 작은 창이 나오면 0.05를 입력하고 엔터키를 치면 전체 프레임의 시간이 바뀝니다.

 
자연스런 반복이미지를 만들려면 동작의 시작과 끝을 잘 관찰해야합니다. 위 애니메이션 GIF파일을 보면 원래 동영상의 시작은 커피잔을 들고 있는 부분이고 마지막은 커피잔을 입에 대고 마시는 부분입니다. 그부분까지 잘라서 첫 프레임부터 마지막 프레임까지 복사해서 마지막 프레임 다음에 붙여넣고 붙여넣은 프레임들의 순서를 반대로 해주면 자연스런 반복이 이루어집니다. 그렇지 않고서는 처음 시작한 부분으로 정확하게 돌아가도록 모델이 커피잔을 배치할 수가 없죠. 


어떤 부분을 선택할지 우선 플레이버튼을 클릭하여 전체적으로 살펴봅니다. 제경우는 아이유양이 마이크를 두손으로 잡고 있다가 왼손을 머리카락을 만지기위해 올리는 부분까지를 선택했습니다. 우선 프레임을 간결하게 하기 위해 그 이전의 프레임을 잘라냅니다. 이전프레임인 3의 93프레임을 선택하고 스크롤바를 좌측끝으로 이동하여 Shift키를 누르고 첫프레임을 선택하면 모두 선택됩니다. 5의 버튼을 클릭하면 제거됩니다.


다시 플레이버튼을 클릭하여 머리카락 만지는 부분에서 스탑버튼을 눌러 정지하고 그 다음 프레임인 3을 선택, 스크롤바를 우측끝으로 이동하여 Shift키를 누르고 마지막프레임을 클릭한 다음 5의 버튼을 클릭하면 제거됩니다. 그러면 이제 단촐하게 52개의 프레임만 남습니다.


플레이버튼을 클릭하여 생각대로 선택이 돼서 애니메이션이 되는지 확인합니다. 2의 아이콘을 클릭하여 Select All Frames를 선택하면 모든 프레임이 선택됩니다. 다시 2를 클릭하여 Copy Frames를 선택하면 클립보드에 복사됩니다. 이제 3의 52번째 프레임을 선택하고 다시 2를 클릭해서 Paste Frames를 선택하면 작은 창이 나옵니다. 4의 선택이후에 붙여넣기에 체크하고 OK클릭하면 52번째 프레임 다음에 붙여집니다.


스크롤바를 우측으로 이동하면 붙여진 프레임을 확인할 수 있고 아직 선택이 된 상태입니다. 다시 2를 클릭해서 Reverse Frames를 선택하면 선택된 프레임의 순서가 뒤바뀝니다. 그러면 3과 4의 프레임은 같은 이미지가되고 1부터 52프레임까지 애니메이션 되다가 다시 반대로 52번부터 1번까지 애니메이션 되는 결과가 됩니다. 위 프레임의 마지막프레임인 104번째 프레임은 1번 프레임이 되면서 끝나고 다시 처음부터 1번프레임이 되므로 영원히 반복되는 동작이 됩니다. 그러면 같은 프레임인 4를 선택해서 쓰레기통 아이콘을 클릭하여 제거하고 1의 스크롤바를 우측끝으로 이동해서 마지막 프레임을 제거하면 아주 자연스러운 동장이 반복됩니다. 5의 플레이버튼을 클릭하여 확인합니다.


이제 거의 마지막단계이자 이 글의 핵심인 마스킹 작업을 할 차례입니다. 프레임창에서 어느 하나의 프레임을 선택하면 화면에 그 이미지가 보이고 레이어창에는 그에 상응하는 레이어의 눈아이콘이 켜집니다. 어느 레이어를 선택하느냐에 따라서 그동안 아이유양과 같이 애니메이션 됐던 두분이 이제 정지된 이미지로 남게되고 그 이미지의 선택도 중요하겠죠. 가만이 있는 이미지가 선택된다면 그저 가만이 있다는 느낌이 들게 되므로 좀 움직이다가 멈춘 듯한 이미지를 선택하는 것이 효과적입니다. 루시폴씨의 웃는 동작과 수그리는 동작이 선택됐습니다. 레이어창을 스크롤하여 눈아이콘이 켜져있는 레이어를 선택하고 Ctrl+J키를 눌러 레이어복사를 한 다음 Ctrl+Alt+](대괄호 우측키)를 누르면 레이어창의 최상단으로 이동합니다.

4의 아이콘을 클릭하면 레이어 마스크가 추가되면서 색상도구가 기본색으로 됩니다. 브러시를 선택하고 우클릭하여 나오는 설정창에서 사이즈를 조절하고 경도를 0%로 한 다음 아이유양이 있는 부분을 클릭드래그하면 별 변화가 없는 것 같지만 선택된 레이어에서는 양쪽의 두분만 남기고 아이유양의 이미지는 지워지는게 됩니다. 5의 레이어 마스크를 보면 검정색으로 나오는데 레이어마스크에서 검정색은 이미지를 지우는 역할을 합니다. 

아이유양이 있는 주변을 지우면서 플레이버튼을 클릭해서 범위가 초과되었는지 덜 지웠는지 확인합니다. 애니메이션 되다보면 동작의 활동범위가 달라지므로 더 지울 부분이 발생하게 됩니다. 초과되었다면 다른 사람의 움직이는 이미지가 나타나게 되므로 X키를 누르면 6의 전경색이 흰색으로 바뀝니다. 초과된 부분을 클릭드래그하면 레이어의 이미지는 복구돼서 가려지게 됩니다. 덜지운 부분은 다시 X키를 눌러 검정색으로 바꾸고 칠해줍니다.


애니메이션 GIF파일의 저장은 Ctrl+Shift+Alt+S키를 누르거나 메뉴에서 파일-웹용으로 저장(Save for Web & Devices)을 선택하면 위와같은 큰 창이 나옵니다. 1에서 GIF를 선택하고 2에서 256컬러를 선택합니다. GIF파일은 색상을 256가지 밖에 사용하지 않기 때문에 화질이 떨어지므로 사진이미지는 최대한의 수치인 256컬러를 선택해야 화질이 떨어지지 않습니다. 3의 파일사이즈를 보면 4메가 가까이 되는데 2의 색상 수를 줄이면 파일사이즈가 줄어들기는 합니다. 하지만 정작 많이 줄이려면 파일의 가로세로 크기를 줄이는 것이 좋습니다. 4의 수치를 낮추고 탭키를 누르면 세로 사이즈도 비례적으로 변경되면서 3의 파일사이즈가 변경됩니다. 이미지의 크기를 줄이면 5에서 Bicubic Sharper를 선택해줘야 선명도를 보정할 수 있습니다. 플레이버튼을 클릭하여 마지막으로 애니메이션을 확인한 다음 저장버튼을 눌러 저장하면 됩니다.

윈도우 탐색기에서 애니메니션 GIF파일을 클릭하면 사진 뷰어에서는 애니메이션 되는 것이 안보입니다. 파일을 우클릭해서 나오는 메유에서 연결프로그램을 선택하고 서브메뉴에서 설치된 웹브라우저를 선택하면 인터넷 창에서만 보이게 됩니다. 


문의 사항은 언제든 댓글을 달아주세요. 이제보니 우측 아이유양의 왼쪽 팔꿈치 부분이 덜지워졌군요. 이런 실수를 하지 않기 위해 잘 점검해야 완성도 높은 이미지가 나온답니다.