명암을 넣을 시간입니다! 어두운 색상을 추가해 그림자와 음영을 표현하여, 평면적인 그림을 입체적으로 보이게 합니다. 이번 튜토리얼에서는 광원이 오크의 전방 상단에 위치한 것으로 설정하겠습니다. 즉 물체의 전방/위쪽이 밝게 표현될 것입니다. 반대로 오크의 후방과 하단에는 더 어두운 색을 추가합니다.

<형태와 입체감>

이번 단계가 어려우신 분들은 단순히 선과 색뿐만 아니라 "입체감을 가진 형태"를 그리는 연습이 필요할 것입니다. 형태는 3차원 공간에 존재하며, 이를 드러내는 것이 입체감입니다. 음영을 표현하는 것은 곧 형태감을 표현하는 것과 같습니다.

캐릭터에서 모든 세부 사항을 제거하고 단순히 찰흙으로 만들어졌다고 생각하는 것이 시각적인 형태를 만드는 데 좋습니다. 음영을 넣는 것은 단순히 색을 입히는 것이 아닙니다. 입체를 조각하는 것입니다. 잘 만들어진 캐릭터는 기본적인 형태를 해치지 않게끔 세부 요소가 들어 있습니다. 눈을 흐릿하게 떠서 어디가 밝고 어디가 어두운 부분인지 파악해 보세요.

<안티앨리어싱>

새로운 음영을 넣을 때마다, 저는 가끔 "안티앨리어싱"을 추가하곤 합니다. 안티앨리어싱은 두 색이 만나는 지점에서 생기는 끊기는 부분에 중간색을 넣어 부드럽게 완화시키는 역할을 합니다.

위 사진에서 회색 픽셀은 곡선에서 "끊기는 부분"을 완화시킵니다. 선분이 길수록, 안티앨리어싱도 길게 들어갑니다.

위 사진의 오크 상완근의 경우에도 오크의 근육을 표현하는 외곽선에 안티앨리어싱을 추가해 더 부드러운 느낌을 주고자 했습니다.

주의할 점으로, 게임에 쓰일 스프라이트의 바깥에는 안티앨리어싱을 추가하지 않는 것이 좋습니다. 특히 배경색이 다양한 경우에는 더욱 그런데, 어두운 배경에서 밝은 안티앨리어싱이 튀어 보일 수 있기 때문입니다.

현재 스프라이트에서 외곽선이 검은색으로만 그려졌습니다. 이는 스프라이트 전체가 너무 파편화되어 보이는 문제가 있습니다. 예를 들어 팔 근육의 경우 근육을 표현하는 검은 선 때문에 신체의 같은 부분이 아닌 서로 다른 부분에 있는 것으로 보입니다.

스프라이트를 더욱 부드럽고 현실적으로 표현하기 위해 (즉 캐릭터의 형태를 더 잘 드러낼 수 있도록), 우리는 선택적인 외곽선(Sel-Out) 기법을 이용할 수 있습니다. 선택적인 외곽선 기법은 검은색 외곽선을 더 밝은 색으로 바꾸는 기법입니다. 빛이 들어오는 윗부분일수록 더 밝은 색을 사용하며, 제일 밝은 부분에서는 아예 외곽선을 없앨 수도 있습니다. 각 부분의 경계면(예를 들어 근육이나 옷의 질감 등)에선 검정색 대신 어두운 색상의 음영을 사용할 수 있습니다.

이 단계에서 오크에게 더욱 어두운 단계의 음영을 추가했습니다. 즉 오크의 녹색 피부에 총 3단계의 명암이 생긴 것입니다. 새로 추가된 음영 또한 선택적인 외곽선과 안티앨리어싱에 활용할 수 있습니다.

마무리로, 스프라이트에 하이라이트 (가장 밝은 부분), 디테일(귀걸이, 요철, 흉터 등)을 추가하거나 부족한 부분을 더욱 보강할 수 있습니다.

작품을 보강하는데 도움이 되는 몇 가지 방법을 소개해 드리겠습니다. 그림을 좌우로 뒤집어서 형태와 명암의 틀린 부분을 찾을 수 있습니다. 또 다른 방법은 그림의 채도를 없애 흑백인 상태에서 명암이 적절한지 살펴보는 것입니다.

<디더링>

지금까지 대부분의 명암을 하나의 큰 덩어리로 표현했습니다. 하지만 명암을 표현하는데 다른 방법이 있습니다. 바로 디더링입니다. 색조를 추가하지 않고도 여러 색 단계를 표현할 수 있습니다. 아래의 예시를 보십시오.

맨 위 사진은 그라디언트로, 어두운 색에서 밝은 색으로 바뀌는 동안 무수히 많은 색조가 들어 있습니다. 중간은 그 색조를 9개로 줄였으나, 여전히 단일 색상으로는 많은 색조를 가지고 있습니다. 또한 이로 인해 색상 그 자체보다 색이 변하는 부분에 시선을 빼앗기는 밴딩(Banding)이라고 부르는 현상이 발생하게 됩니다.

마지막으로, 아래 그림은 디더링을 적용해 단 2개의 색으로 색조의 변화와 밴딩 방지를 동시에 이루었습니다. 다양한 밀도의 노이즈를 추가해 색조의 변경을 표현합니다. 출판물이나 만화, 일러스트 등의 "하프톤" 이나 "톤" 기법과 유사합니다.

저는 디더링을 조금만 넣는 것을 권장합니다. 오크 캐릭터에서 디더링은 질감을 표현하기 위해 조금만 넣었습니다. 몇몇 픽셀 아티스트는 디더링을 아예 사용하지 않습니다. 몇몇은 디더링을 아주 적절하게 활용해 괜찮은 결과를 내기도 합니다. 개인적으로 디더링은 단일 색상의 넓은 부분 (맨 위 메탈슬러그 3 스크린샷에서 하늘 부분)이나 거칠거나 울퉁불퉁한 면(흙이라던지)을 표현할때 좋지만, 어떻게 활용할지는 당신의 몫입니다!

(1996년 Elf사의 미연시 <<하급생>> 스크린샷. 위 이미지는 단 16색으로 이루어져 있습니다.)

디더링을 매우 잘 활용한 사례를 찾고 싶으면, 80년대의 영국 게임 회사 Bitmap Brothers의 게임이나 일본의 게임기 PC-98로 발매된 게임을 찾아 보십시오. (PC-98로 발매된 대부분의 게임은 19금인걸 주의하세요.)

픽셀 아트의 위험한 점은, 제한적이고 정돈된 특성 때문에 마지막까지 스프라이트를 수정하느라 너무 많은 시간을 투자할 가능성이 있다는 것입니다. 마치 퍼즐을 푸는 것에 중독되는 것처럼 말이지요. 하지만 스프라이트 하나에 너무 완벽하게 몰두할 필요는 없습니다. 게임을 제작함에 있어서 스프라이트 하나는 거대한 그림의 일부분에 지나지 않을 수 있음을 염두해 두십시오.

게임에 사용할 것이 아니라도, "이 정도면 충분한걸!"이라 말하고 넘어갈 수 있는 것이 좋습니다. 실력을 늘리는 가장 좋은 방법은 전체 과정을 시작하고 끝내는 것이며, 또한 여러 가지 주제로 만드는 것을 반복하는 것도 중요합니다. 어쨌든 시간이 지난 후에 이전 작업물을 보면 새로운 시각으로 자신의 작품을 평가할 수 있으니까요.

지금까지 우리는 96x96 스프라이트를 만들었는데, 이는 그 크기가 기존 그림과 비슷하기 때문입니다. 해상도가 작아질수록 그림보다는 단일 픽셀이 표현하는 정도가 커집니다.

슈퍼 마리오 브라더스에서 나온 마리오의 눈은 단지 세로로 2칸 크기밖에 되지 않습니다. 귀도 마찬가지고요. 마리오의 제작자인 미야모토 시게루씨는 마리오에 수염이 생긴 이유는 코와 얼굴을 구분하기 위함이라고 설명했습니다. 마리오의 특징은 캐릭터적인 측면 뿐만 아니라 실용적인 이유도 겸하고 있습니다. 필요성이 발명의 어머니라는 격언처럼, 픽셀 아트도 비슷한 철학을 가지고 있는 점에서 흥미롭다고 할 수 있습니다.

32x32 크기의 스프라이트도 전반적인 제작 과정은 스케치, 채색, 명암, 개선 순서의 96x96과 비슷합니다. 하지만 스케치 단계에서 외곽선 대신에 면으로 형태를 잡는 것으로 시작하는데, 작은 크기의 스프라이트는 외곽선보다는 색상으로 각 부분을 구분하기 때문입니다. 마리오의 스프라이트를 다시 보면, 외곽선이 아예 없습니다. 그 대신 구렛나룻으로 귀를 구분하고, 소매로 손을 구분하고, 여러 특징들로 몸을 구분할 수 있습니다.

작은 크기의 스프라이트는 타협을 하는 것과 같습니다. 외곽선을 그리면 음영을 넣을 공간이 적어집니다. 손과 발을 더 디테일하게 만들면 머리를 그릴 공간이 적어집니다. 색상, 선택적 외곽선, 안티앨리어싱을 활용하면 더 넓은 공간을 활용할 수 있습니다.

개인적으로는 작은 스프라이트를 작업할 때에는 작은 등신대와 큰 눈을 가진 귀여운 스타일인 Chibi(Super Deformed 혹은 SD) 스타일을 애용합니다. 작은 공간 내에서 캐릭터성을 살리는데 효과적이기 때문입니다.(또한 귀엽기도 하고요.) 하지만 캐릭터의 기동성이나 힘을 강조하고 싶다면, 머리 대신 몸을 강조하는 방향을 취할 수 있습니다. 결국 프로젝트에서 자신이 표현하고 싶은 목적에 맞게 제작하는 것이 좋습니다!

<파일 형식>

(픽셀 아티스트에게 보여줄 시 경기를 일으킬 수 있습니다.)

위 사진은 스프라이트를 JPG로 저장할 때 일어납니다. JPG 형식은 파일을 압축하기 때문에 결국 손실이 일어난 (흔히 깨졌다고 표현하는)그림이 나옵니다. 더 자세히 말하자면, 선명하고 깔끔한 스프라이트가 흐릿하게 보이며 원본 팔레트를 쉽게 복구할 수 없기 됩니다.

정지된 픽셀 아트를 저장할 때는 무손실 형식인 PNG로 저장하는 것이 좋습니다. 애니메이션은 GIF 파일로 저장하는 것이 일반적입니다.

<픽셀 아트 공유하기>

소셜 미디어에 픽셀 아트 작품을 공유해 전세계의 픽셀 아티스트에게 의견을 들을 수 있습니다. (#pixelart 해쉬태그를 잊지 마세요!) 불행히도 소셜 미디어는 PNG 파일을 JPG로 바꿔버리기 때문에 애써 만든 작품이 손실되는 문제점이 있습니다. 더욱이 이미지마다 어떻게 바뀌게 되는지도 알 수 없습니다!

위와 같은 문제를 해결하기 위해, SNS마다 어떻게 픽셀 아트를 선명하게 저장할 수 있는지 알려드리고자 합니다. 하지만 알고리즘은 언제든 바뀔 수 있으며, 아래 정보가 항상 최신 정보가 아님을 주의하세요.

* 트위터

트위터에서 PNG를 유지하기 위해선 256색 이하이면서 긴편이 900픽셀 이하여야 합니다. 그리고 가급적 이미지가 512x512 px 이상으로 크기를 늘리는 것이 좋은데, 이미지를 정수배로 확대(2배, 3배는 되지만 2.5배는 안 됩니다.)하고, 가장자리를 보존해야 합니다. (포토샵에서 최단입점 유지{Nearest Neighbor}를 선택합시다.)

애니메이션의 경우 15Mb 이하여야 합니다. 품질 보전을 위해서 적어도 800x800px 이상의 크기여야 하고, 애니메이션이 세 번 루프하되 마지막 프레임은 다른 프레임의 절반의 시간만큼만 표시되어야 하는게 좋다고 알려져 있습니다. 트위터가 애니메이션을 어떻게 출력하는지에 대해서 잘 알려진 바는 없으나, 최소 사이즈가 있다는 것은 확신할 수 있습니다.

* 인스타그램

여태까지 알아본 바로는 인스타그램에 이미지를 손실 없이 올릴 수 있는 방법은 없습니다. 적어도 512x512px 이상의 크기로 업로드하는 것이 최소한의 품질을 보장받을 수 있습니다.

이번 튜토리얼은 여기까지입니다!

<픽셀 아트 튜토리얼: 자주 하는 실수들 편에서 이어집니다.>