블렌드모드를 이용한 애니메이션 gif파일의 편집

구글링을 하다보면 재밋는 애니메이션 gif를 보게 됩니다. 대부분 검정색 바탕으로 되어있는데 이는 블렌드 모드를 이용하여 다른 사진에 첨부할 수 있도록 하기 위함입니다. 이미 http://martian36.tistory.com/26 의 글에서 보았듯이 검정색 바탕은 스크린 모드를 사용하여 투명하게 할 수 있습니다. 애니메이션 gif는 하나의 사진이 아니라 수십장의 사진으로 동영상처럼 움직이는 사진을 만든 것이라서 포토샵으로 불러오면 각각의 사진들이 레이어에 배치가 됩니다. 이 사진레이어들을 각각 별도로 스크린 모드를 적용한다면 아주 번거로운 일이 아닐 수가 없습니다. 그래서 레이어들을 그룹화해서 한번에 적용하면 원하는 결과를 얻을 수 있습니다.

위의 애니메이션 gif는 위키미디어에서 가져왔습니다.-> http://commons.wikimedia.org/wiki/Category:3D_animations  
포토샵 CS5에서는 윈도우탐색기에서 우클릭해서 연결프로그램으로 포토샵을 선택하면 바로 뜨지만 이전 버전은 메뉴에서 파일-불러오기에서 불러와야합니다. 애플의 퀵타임플레이어가 설치되어 있어야합니다.

 

레이어의 제일 하단을 클릭하고 스크롤바를 위로 쭉 올린다음 제일 상단의 레이어를 shift키를 누른채 클릭하면 전체레이어가 선택이 됩니다. 1의 아이콘을 누르면 메뉴가 나오는데 New Group from Layers를 선택하면 모든 레이어가 그룹화되어 하나의 레이어로 됩니다.

 

CS5버전은 ctrl키를 누른채 1의 아이콘을 클릭하면 그룹레이어 아래에 새 레이어가 만들어집니다. 하지만 이전 버전은 1의 아이콘을 클릭하면 2의 위에 새 레이어가 만들어지고 이것을 클릭 드래그해서 그룹레이어 아래로 이동해야합니다.
빈레이어를 선택하고 파일-불러오기에서 적당한 사진을 불러옵니다. 검정색 배경이 없어지면서 밝은 부분만 남게 되므로 되도록이면 어두운 색상의 배경사진이 들어가는 것이 좋습니다.

그룹레이어를 선택하고 1에서 블렌드 모드를 스크린을 선택하면 사진처럼 배경이 투명화됩니다. 이를 저장하기 위해 ctrl+shift+alt+s를 누르거나 메뉴에서 웹용으로 저장하기(Save as for Web & Devices를 클릭하면 다음과 같은 창이 나옵니다.

이 화면은 웹디자인을 하면서 많이 접촉하게 되는 화면입니다. 그래서 gif파일을 웹용으로 저장할때의 방법에 대해서 알아보겠습니다. 사진화면이 하나만 나오는 경우 좌측 상단의 2-up을 클릭하면 됩니다. 오리지널 사진과 최적화하는 사진을 서로 비교하면서 설정을 할 수 있습니다. gif파일은 최대 256색깔만 지원하는데 웹에서 단순한 색상의 이미지인경우 gif로 저장하는 것이 좋습니다. 다른 파일 포맷에 비해서 용량이 엄청 작아지기 때문이죠. 3을 선택하고 투명한 파일인경우는 4에 체크를 합니다. 투명하다는 것은 이미지의 배경을 투명처리한 경우 이곳에 체크를 해줘야합니다. 하지만 png파일처럼 배경투명이 아닌 이미지부분에 일부 투명한 사진(예를 들면 50%투명)은 gif에서는 지원이 안됩니다. 100%투명이든가 아니면 불투명 밖에 지원이 안되고 50% 반투명은 안됩니다.  5번에서 색상 수를 줄이면 용량도 줄일 수 있습니다. 6의 역할은 gif파일을 투명하게 할 경우 이미지 주변이 많이 깨지는 것을 방지합니다. 투명하지 않은 이미지의 색상을 추가해주면 됩니다.  7은 사용한 색상 견본입니다. 8에서 수치를 변경해서 이미지 사이즈를 줄일 수 있습니다. 9는 애니메이션인경우 영원히 반복되는지 한번만 재생이 되는지 선택할 수 있고 10은 플레이를 해볼 수 있습니다. 11에서 저장을 하면 됩니다.