픽셀 아트 튜토리얼

예전에 겟앰프드라는 게임을 할 때 스킨을 만들기 위해 픽셀 아트에 많은 시간을 투자했지만 따로 공부한적이 없었습니다.

최근 2D 게임을 만들면서 더 나은 픽셀 아트를 위해서 여러 포스트를 읽고 정리하는 글을 씁니다.

1. 툴

픽셀 아트를 위해서 어떠한 툴을 쓰더라도 상관없습니다.

대부분 유저들의 컴퓨터에 기본으로 설치되어있는 그림판으로도 충분합니다.

저는 포토샵을 사용하고 있으므로 포토샵을 기준으로 설명하겠습니다.

포토샵

쓸만한 단축키

포토샵을 사용할 때, 여러분이 가장 많이 사용할 툴은 연필 도구(단축키 B)가 될 것입니다.

연필 도구는 안티 앨리어싱 없이 정확히 각각의 픽셀를 다룰 수 있습니다.

또 많이 쓰이는 툴로는 사각형 선택 윤곽 도구(단축키 M)과  자동 선택 도구(단축키 W)가 있습니다.

자동 선택 도구는 Shift로 영역을 추가할 수 있고, Alt키로 영역을 뺄 수 있습니다.

스포이드 도구(단축키 I)는 색상을 추출할 때 쓰입니다. 연필 도구를 사용할 때는 Alt를 눌러 스포이드 도구를 이용할 수 있습니다.

마지막으로 전경색(Primary Color)과 배경색(Secondary Color)는 X 로 스왑할 수 있습니다.

설정

가장 먼저 CTRL + ' 로 격자를 활성화 시켜줍니다.

편집 - 환경 설정 - 안내선, 그리드 및 분할 영역으로 가줍니다.

여기서 격자에 대한 설정을 위와 같이 변경합니다.

그러면 위와 같은 모눈종이와 같이 설정이 됩니다.

위의 격자는 실제 이미지에는 영향을 주지 않습니다.

편집 - 환경 설정 - 일반에서 이미지 보간을 최단입점으로 설정을 해줍니다.

이 설정은 이미지를 그릴 때 안티 앨리어싱을 없애는 설정입니다.

이 설정은 이미지를 그리면서 원본 크기를 함께 보고 싶은 분들께 추천드리는 설정입니다.

2. 선

픽셀은 본질적으로 색의 작은 블록입니다. 쉽게 말하면 점이라는 말입니다.

여러분은 여러분이 원하는 어떠한 종류의 라인을 만들 때 이 블록들이 어떻게 사용되는지를 알아야합니다.

여기서는 선의 가장 기본이되는 두 가지, 직선과 곡선을 알아볼 것입니다.

직선

직선은 여러분도 생각하듯이 정말 간단합니다.

하지만 픽셀의 경우 직선은 문제가 있을 수 있습니다. 바로 계단 현상(Jaggy)이죠.

우리는 이 계단현상을 피해야합니다.

곡선

곡선을 만들 때는 경사가 끝까지 일정하도록 해야합니다.

아래 예시에서 6 > 3 > 2 > 1은 깔끔하지만 3 > 1 < 3 은 부자연스러워보입니다.

선을 그릴 때는 계단 현상이 없도록 하는 것이 중요합니다.

나중에 선이 자연스럽게 이어지도록 하는 방법인 안티 앨리어싱을 설명하겠습니다.

3. 개념화

가장 먼저 필요한 것은 좋은 아이디어입니다. (사실 이게 가장 어렵죠..)

아이디어가 있으면 이것을 시각화하기 위해 머리속으로나 종이에다가 먼저 그려보세요.

이렇게 한다면 여러분이 픽셀은 만들 때 더욱 집중하기가 쉽습니다.

생각해볼 것

1. 어디에 쓰일 것인가?

이 스프라이트가 웹사이트 혹은 게임, 애니메이션에 쓰일 것인가를 생각해봐야합니다.

만약 추후에 애니메이션화 되어야 한다면, 여러분은 아마 더 작고 덜 상세화하게 될 것입니다.

반대로 정적 이미지에 상세화를 한다면 여러분은 추후에 수정할 생각이 없을 것입니다.

2. 제약은 무엇인가?

색상의 보존는 중요합니다. 이유는 여러분의 팔레트는 제한되어있기 때문입니다.

사용하던 색상을 사용하지 않고 마구잡으로 사용한다면 조화가 깨질 것입니다.

스프라이트의 크기와 주변 환경에 맞는지 잘 고려해야합니다.

4. 외곽선

검은 외곽선은 여러분의 스프라이트의 기본 구조를 잡습니다.

그래서 그리기를 시작할 때 가장 완벽한 장소입니다.

보통 외곽선은 검은색으로 그리는데 나중에 자연스러움을 위해 변경하는 방법을 알아볼 것입니다.

두 가지 접근

외곽선을 그리는 방법은 두 가지가 있습니다.

첫 번째로는 마우스를 드래그하면서 그리는 방법이고,

두 번째로는 픽셀 하나 하나를 클릭, 클릭하며 그려주는 방법입니다.

여러분은 두 가지 방법을 스프라이트의 사이즈나 여러분의 픽셀링 실력에 따라 기호에 맞게 사용할 것입니다.

보통 큰 스프라이트의 경우 드래그 방식을 이용해 전체적인 윤곽을 잡고 추후에 정리를 하는 방식이 편리합니다.

이 튜토리얼에서는 우리는 꽤 큰 스프라이트를 만들 것입니다. 그래서 우리는 첫 번째 방식을 이용할 것입니다.

STEP 1: 대강의 외곽선

마우스나 타블렛을 이용하여 여러분의 스프라이트의 대강의 외곽선을 그려주세요.

너무 대충 그리면 안되는 것만 명심해주세요. 이건 최종 결과물과 비슷해야합니다.

STEP 2: 외곽선 정리

화면을 6 ~ 8배로 확대해 이미지를 보면 픽셀 하나 하나를 명확히 볼 수 있습니다.

그리고 외곽선을 정리해주세요.

특히 길 잃은 픽셀(외곽선은 마지막 까지 한 픽셀로만 이뤄져야합니다)과 계단 현상을 해결해야합니다.

5. 색

외곽선이 완료되면, 우리는 색칠 공부를 할 수 있습니다.

채우기 도구를 이용하면 쉽게 색을 채울 수 있습니다.

하지만 색을 선택하는건 조금 어렵습니다..

색 이론은 이 튜토리얼의 범위를 넘어가기 때문에 다루지는 않지만, 알아두면 좋은 꿀팁을 조금 알아보겠습니다.

HSB 색 모델

HSB는 Hue(색조), Saturation(채도), Brightness(명도)로 표현합니다.

컴퓨터 색 모델에는 여러개(RGB, CMYK 등)가 있습니다.

대부분의 툴에는 HSB를 색 선택을 위해 사용됩니다.

• HUE
  우리가 색으로 알고 있는 것입니다. 빨강색, 주황색, 노란색 등...
• Saturation
  색상의 강도를 나타냅니다. 100%인 경우 본래의 색이고 퍼센트가 낮아질 수록 회색에 가까워집니다.
  
• Birghtness
  색상의 빛으로 0% 면 검정색입니다.

색 선택하기

어떤 색을 선택하는지는 궁극적으로 여러분에게 달려있지만, 알아둬야할 것들이 있습니다.

1. Saturation과 Brightness가 적어지면 흙빛으로 보이고 만화같은 느낌이 사라집니다.
2. 아래 원을 보면 서로 가까이 있는 색은 더 잘어울립니다.
   
3. 한 스프라이트에 여러가지 색상을 사용하면 산만해집니다. 2 ~ 3 가지 메인 색을 사용하세요.

색 적용하기

자동 선택 도구(단축키 W)를 이용해 쉽게 칠할 수 있습니다.

6. 명암

STEP 1: 빛 소스 선택하기

첫 번째로 우리는 빛 소스를 선택해야 합니다.

여러분의 스프라이트가 큰 씬의 한 부분이라면, 씬에 많은 빛 소스가 있을 것입니다. (예를 들면 불, 형광등 등..)

여러 빛 소스가 섞이면 굉장히 복잡한 광원 효과를 낼 수 있습니다.

하지만 저는 게임에 쓰일 스프라이트를 만들기 때문에, 일반적인 빛 소스인 Directional 빛을 이용하겠습니다.

STEP 2: 명암 칠하기

우리는 빛 소스를 정했으므로, 명암을 칠해야합니다.

빛에서 가장 먼 부분은 색을 더 어둡게 칠해줍니다.

명암으로 옷의 구김이나 머리카락을 표현할 수 있으므로 잘 진행해줘야 합니다.

STEP 3: 부드러운 그림자

두 번째 명암 작업으로 첫 번째 작업보다는 가볍습니다.

간접적인 점들을 표현을 하고, 특히 곡면의 빛과 어둠의 전환에도 사용됩니다.

STEP 4: 하이라이팅

빛의 직접적으로 닿는 부분을 표현하는 곳입니다.

하이라이팅은 그림자보다 훨씬 덜 사용되어야합니다.

많이 사용되면 산만해보입니다.

하이라이팅은 항상 그림자 작업 이후에 해야합니다.

그림자가 없다면 하이라이트를 너무 크게 만들 수 있습니다.

(겟앰프드 스킨 중 많은 사람들이 이용했었는데, 개인적으로 징그럽다고 생각했던 스킨입니다. 너무 심한 하이라이팅...)

하지 말아야할 것

그림자 작업할 때 항상 따라야할 룰은 아래와 같습니다.

1. gradient를 사용하지마세요.
2. Pillow-Shading을 사용하지마세요.
   
   
   
   (Phillow Shading 참조)
   
   
3. 너무 많은 그림자를 사용하지마세요.
   더 많은 색이 더 현실적이라고 생각할 수도 있지만, 우리의 뇌는 비슷한 색을 필터링해버리는 경향이 있습니다.
   때문에 기본 색에 어둡고 정말 어두운 색과 밝음과 정말 밝음의 두 가지 색을 이용하면 충분합니다.
4. 너무 비슷한 색상을 사용하지마세요.
   서로 너무 비슷한 색상을 사용할 이유는 없습니다. (모호한 스프라이트를 원한다면 어쩔 수 없지만..)

7. 디더링

색 보존은 픽셀 아티스트가 많이 염려해야하는 것입니다.

더 많은 색상을 사용하지 않고 더 많은 색조를 표현하는 한 가지 방법은 디더링이라는 기술입니다.

Simple Example

위 그림은 디더링을 사용해 두 가지 색(흰색, 검정색)으로 4가지 다른 그림자를 생성한 것입니다.

Advanced Example

위의 그림에서 위쪽 그림의 색상은 포토샵의 gradient 툴을 이용해 만든 것이고, 아래쪽 그림은 디더링을 사용해 세 가지 색상으로 표현한 것입니다.

디더링을 표현하는 패턴은 실험을 통해 여러가지로 표현할 수 있습니다.(정해진 패턴은 없다는 말입니다)

Application

디더링은 여러분의 스프라이트에 복고풍 느낌을 줄 수 있습니다. 왜냐면 오래된 비디오 게임은 심하게 디더링에 의존했기 때문입니다.(오래된 비디오 게임은 색 표현의 한계가 있었기 때문..)

(디더링이 적용된 스프라이트)

8. Selective Outlining

Selective Outlining(이하 Selout)은 외곽선에 그림자를 넣는 것과 같은 종류입니다.

모든 외곽선을 검정색으로 칠하는 것보다는, 스프라이트 자체의 색상에 더 가까운 색상을 적용하는 방식입니다.

색상을 적용할 때 광원에 외곽선의 밝기는 광원에 영향을 받도록 합니다.

지금까지 우리의 스프라이트에 검정색 외곽선을 유지했지만, 이 방법은 주변과 잘 구분이 되어 좋지만 현실감이 떨어지고 만화같이 보이는 단점이 있습니다.

그래서 우리는 Selout을 이용하여 단점을 해결해볼 것입니다.

(왼쪽 원본 / 오른쪽 selout 적용)

9. 안티 앨리어싱

안티 앨리어싱은 간단한 전제하에 동작합니다.

대상을 부드럽게 하기 위해 라인의 꼬임부위에 중간 색을 추가합니다.

예를 들어, 여러분이 흰 배경에 검정 줄을 그린 스프라이트가 있다고하면 여러분은 회색 픽셀을 줄의 모서리에 추가할 것 입니다.

Technique 1: 부드러운 곡선

일반적으로 여러분은 꼬임 부분에 중간 색을 추가할 것입니다. 하지만 이 방법으로도 부드러워 보이지 않는 다면 더 밝은 층을 추가하세요.

중간 층이 곡선 방향을 따르도록 그리세요.

아래 그림을 보면 이해가 더 쉽습니다.

Technique 2: 라운딩

Technique 3: 줄의 끝 흐리기

Application

이제 안티 앨리어싱을 적용해보겠습니다.

만약 어떠한 색상 배경에서 여러분의 스프라이트가 보기 좋으려면, 바깥 모서리에는 안티 앨리어싱을 적용하지 마세요.

이렇게 하지 않으면 스프라이트 주변에 후광같은 것들을 보게될 거에요..

(왼쪽 원본 / 오른쪽 안티앨리어싱 적용)

10. 마무리

이제 거의 끝났습니다. 마무리 작업은 아마추어와 프로의 구분이 되는 부분입니다.

의자를 멀리하고 스프라이트를 둘러봅니다.

시간을 내 스프라이트가 완벽한지 확인해주세요.

스프라이트를 더욱 더 재밌게 하기위해 디테일한 부분을 넣어주세요.

세부사항으로는 종이의 글씨, 완장에 줄, 바지의 지퍼, 눈, 젖꼭지, 몸통을 검게했습니다.

이제 끝났습니다. 위의 캐릭터는 상대적으로 가벼운 45개의 색상을 가지고 있고, 150 x 115픽셀의 크기를 가졌습니다.

전체 과정

맺는 글

1. 아트와 실습의 기초를 배우세요. 그림과 관련된 모든 스킬과 지식은 픽셀에도 마찬가지로 적용됩니다.
2. 작은 스프라이트로 시작하세요. 큰 스프라이트를 만들지 않고 몇개의 픽셀에 많은 디테일을 넣는 방법을 배울 수 있습니다.
3. 모방은 창조의 어머니입니다. 다른 사람의 것을 많이 보고 배우세요.
4. 태블릿을 하나 장만하는 것이 좋습니다. 마우스 클릭이 반복되면 지루해지고 인상적이지 못합니다.
5. 여러분의 작품을 공유하고 피드백을 받으세요. 또한 여러분과 같은 괴짜를 만나게 될 수도 있습니다.

참조

http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial