간단한 GIF로 눈에 띄는 포트폴리오 썸네일 만들기

Adobe webinar – Kyuri Kwon (Ps)

일상 속 아이디어, 하나의 브랜드로 꾸려 보기

[간단한 GIF로 눈에 띄는 포트폴리오 썸네일 만들기]

포토샵 세션에서는 무엇을 다루면 좋을까 고민을 했는데요, 많은 디자이너분들께서 소셜미디어 혹은 웹사이트에 포트폴리오 프로젝트를 업데이트하시고 계시죠. 이번 세션에서는 단순한 몇가지의 벡터 작업물을 쌓아 올리는 느낌의 짧은 GIF로도 스틸 이미지보다 좀더 눈에 끄는 썸네일을 만들어 보면 어떨까요?

실습을 위해 준비한 완성된 벡터 그래픽입니다. 이렇게 스틸 이미지로도 포트폴리오 썸네일을 소개할 수도 있지만- 이 이미지가 GIF 이미지로 변경된다면 어떨까요? 아마도 더욱 쉽게 눈길을 사로잡아 임팩트 있는 썸네일이 될 수도 있겠죠. 그럼, 한번 빠르게 만들어 볼까요.

1. 우선 어도비 포토샵을 실행한 후, 적당한 크기의 캔버스를 생성합니다. 저는 1080 x 1080 사이즈의 캔버스를 만들어 보겠습니다.
   
   
2. ‘창’에 들어가 아래 ‘타임라인’을 띄워 둡니다. 하단 탭이 생성되는 것이 보이실 거예요.
   
   
3. 다음은 디자인 에셋을 어도비 일러스트레이터에서 하나씩 끌어 가져와 마음에 드는 최종 레이아웃을 하나 꾸려 봅니다. 처음에 완성된 이미지를 보여드렸듯이, 저는 배경 컬러를 깔고 그 위에 여러가지 스티커를 얹는 느낌으로 덕지덕지 배치해 볼게요.
   
   
4. 다음은- 이 그룹 내에서 스티커를 붙인다고 상상하고 순서대로 아래에서 위로. 레이어의 순서를 잡아 줍니다. 헷갈릴 수 있으니 배치한 후 바로 레이어에 숫자를 적어주도록 할게요.

1. 배경 컬러 하나만 보여지도록 스티커 레이어들의 눈은 꺼 주신 후, 이 레이어들을 모두 선택해 command + G 즉 그룹핑합니다.
   
   
2. 그룹핑이 잘 되었다면, 폴더를 단축키인 command + J로 덕지덕지 붙여둔 스티커의 갯수 + 하나 더한 숫자 만큼 폴더를 복제해 줍니다. 저는 스티커가 총 다섯 개니까 여섯 개의 폴더를 만들게 되겠죠. 다음은 폴더 역시 아래에서부터 넘버링을 해 줄게요.
   
   
3. 다음은 아래부터 스티커를 쌓아 올려 체크해 줍니다. 1번 폴더는 배경 컬러만, 2번 폴더는 2번 레이어까지, 3번 폴더는 3번 레이어까지 체크. 이렇게 여섯 개의 폴더가 정리되었습니다.

1. 다음은 아까 켜 두었던 ‘타임라인’ 에서 ‘프레임 애니메이션 만들기’ 를 체크해주세요.

1. 그 다음 [+] 버튼으로 프레임을 많이 만들어준 후, 1번 프레임 선택 후 우측 레이어에서 해당 번호의 레이어만 순서대로 가시화 합니다.

1. 순서대로 타임라인이 잘 정리되었다면, 타임라인의 레이어를 shift를 눌러 한번에 복수 선택한 뒤 끌어당겨 복제해 주고, 우측 탭을 눌러 ‘프레임 반전’ 을 눌러 줍니다. (반전을 주니 중앙에 동일한 완성 이미지가 두 번 중복되어 나오는데요, 그것은 휴지통 아이콘으로 삭제하여 총 10가지의 프레임을 만들겠습니다.)

1. 그 다음 전체를 선택해 0.2초로 짧게 텀을 주고, 모두 붙여진 화면만 2초로 살짝 길게 텀을 잡아보도록 할게요. 테스트 재생을 해서 GIF의 느낌이 괜찮은지 체크해 줍니다. 더 빠르게 혹은 더 느리게 재생하고 싶다면 ‘기타’에 들어가 디테일하게 조율해 주세요.

1. 이제 GIF로 추출만 하면 되겠죠?
파일 – 내보내기 – 웹용으로 저장 (레거시) 를 선택합니다. 사전 설정 메뉴에서 GIF 128 디더를, 색상 메뉴에서 256을 선택합니다. 저는 루핑 옵션 메뉴에선 ‘계속’을 선택할게요. 무한 반복하고 싶으니까요! 모두 잘 선택이 되었다면, 하단 좌측 미리 보기 버튼으로 최종 점검을 합니다. 그리고 저장!
   

1. 웹사이트에 썸네일로 게시해 보도록 하겠습니다. 움직이는 GIF로 썸네일 이미지가 잘 노출되는 것이 보이네요.
   
   

간단해 보이지만 여러분이 야무지게 확인하실 수 있는 분명한 목적이 있는 실습을 준비하고 싶었는데, 어떠신가요? 가지고 있는 이미지가 있으시다면 오늘 한번 움직이는 GIF로 멋진 썸네일을 제작해 봅시다.