() translation by (you can also view the original English article)
여러분이 아이소메트릭 픽셀 스타일의 마을이나 조그만 실외 장면들을 만들어오신 분이거나, 혹은 그렇게 만드는데에 관심이 있는 분이시라면, 나무가 반드시 필요할 것입니다. 나무야말로 여러분의 픽셀아트 자산으로써 훌륭한 장식물이 될 것입니다. 거의 모든 장면들을 밝게 만들어주기도 하고요, 더 큰 마을이나 도시경관에도 당연히 필요하기 때문이죠. 공원이나 자연경관은 말할 것도 없구요.
"자연스럽게" 보이고자, 들쭉날쭉하고 불규칙하게 슥슥 그리고자하는 충동이 들거에요. 그런데 그렇게는 하지 않을거에요. 마구잡이 모양으로 만들어진 것은 복제하여 사용했을 때 그리 좋아보이지 않거든요.
나무 디자인으로 최고의 가성비를 낼 수 있도록 할 것입니다. 상대적으로 심플하고, 대칭형태의, 유기적으로 보이는 기하학적인 모양이지만 여러차례 복제해서 사용하더라도 여전히 조화된 형태를 유지할 디자인입니다.
혹시 아직 픽셀아트 캐릭터 튜토리얼을 보지 않으셨다면 먼저 확인하시길 바랍니다. 기본적인 팁과 미학적 가이드는 물론 언제나 유용하게 쓸 캐릭터에 대해 다루고 있습니다.
1. 면적
우리가 만들 나무는 관목보다는 크면서도 너무 거대하게 크지는 않게 만들 것입니다.
1 단계
캐릭터의 2배 높이보다 좀 작게해도 충분할거에요. 제가 여기 나무 줄기와 나뭇잎 부분의 높이를 설정해 두었습니다.
이 가이드들을 반드시 지킬 필요는 없어요. 나중에 사이즈를 조절할 수도 있으니까요.
2 단계
나무 줄기의 폭이 캐릭터의 다리보다는 넓어야겠죠? 외곽선 사이에 4px의 공간을 넣습니다.
3 단계
그리고 나뭇잎 부분의 너비는 대략 이 정도가 될 것입니다.
2. 모양
나뭇잎 부분을 타원형의 다발로부터 빠져나온 모양으로 만들 것입니다. 완전히 둥근 원이나 사각형 같이 더 단순한 형태로 만들수도 있습니다. 현실적으로는 그것을 가지치기가 된 나무라 여기면 되니까요. 하지만 다발로 표현하는 것이야 말로 더 자연스럽게 보이게하며, 적절한 양의 복합성을 띄게 합니다.
1 단계
여기 앞으로 사용할 기본 타원형이 있습니다. 24 x 18px 크기인데, 원하시는 사이즈로 해보셔도 됩니다.
Elliptical Marquee Tool (anti-alias는 끕니다) 를 사용하여 타원형을 만들 수 있습니다. 그리고나서 외곽선이 될 색으로 채워주고, 선택영역을 1픽셀 줄인 후 (Select > Modify > Contract…) 녹색으로 다시 채워줍니다. 저는 연필툴로 직접그리기를 선호해요. 약간 네모지게 그려서 거슬리지 않는 모양을 낼 수 있거든요.
2 단계
그렇게 만든 타원형을 다시 사용해서 다발을 만들어 줍니다. 윗부분에 3개, 아랫부분에 5개의 타원형을 만들거에요.
3 단계
타원형을 위치시키는데 여러가지로 시도해보세요. 이 줄에는 3개가 들어갈 거에요.
4 단계
이 줄 가운데 타원형은 아래로 살짝 내려서 전체 다발이 조금 넓어보이도록 하겠습니다.
5 단계
마지막으로 두 개의 타원을 전에 만들었던 것 바로 아래에 추가하는데요; 새 레이어를 만들어서 붙인 후 그 레이어를 원래 레이어 아래로 옮겨서 병합(merge) 하면 됩니다.
6 단계
가이드라인들을 지워줍니다.
7 단계
아래 부분을 약간 넓고 둥근 사각형으로 만들었는데요, 나무 줄기 바로 윗부분을 좀 더 부드러운 곡선으로 다듬겠습니다.
3. 명암
지금까지 나무의 기본형태를 잡았습니다. 이제 나무에 음영을 추가하여 볼륨감을 주도록 합시다.
1 단계
나무 안쪽에 있는 타원형의 외곽선 대부분을 지울 것입니다. 여기 어떻게 음영을 줄지 떠올려보기란 참 쉬워요. 세 개의 타원이 있는 줄의 외곽선은 잠시 남겨두도록 하겠습니다.
2 단계
늘 그렇듯이, 형태의 가장 윗 부분이 가장 밝은 영역이 될 것입니다. 이 부분의 음영이 10% 더 밝으며 약간 더 따뜻한 색상을 갖습니다.
3 단계
이전과 같은 방식으로 아랫 부분의 양 쪽 두 개의 타원에 대해 더 작은 영역의 음영을 추가해 줍니다.
4 단계
세 개의 타원이 있는 줄의 가운데 타원에만 약간의 음영을 더 추가해줍니다.
5 단계
이제 세 개의 타원으로 된 부분의 절반 이상을 어두운 음영으로 채우겠습니다. 이 음영 부분은 기존의 나무 색보다 10% 어두우며 약간 시원한 색상입니다. 여러분이 보기 좋은 쪽으로 다양하게 적용해보세요.
6 단계
마지막으로 추가한 음영을 가장 아랫 부분에도 적용하세요. 그리고 다시, 이전의 음영보다 10% 더 어둡고 조금 더 시원한 색상을 더해줍니다.
7 단계
나무 줄기에 갈색을 칠해줍시다. 그 밖에 여러분이 원하는 색상을 추가해보세요. Image > Adjustments > Hue/Saturation… 에서 슬라이드 조절을 통해 쉽게 색을 변경할 수 있다는걸 명심하세요.
8 단계
마지막으로 나무줄기에도 명암을 넣어줍니다. 나뭇가지 바로 아랫 부분은 나뭇가지가 주는 그림자때문에 더 어두워야합니다. 가장자리 부분은 여러분이 선호하는 대로 밝게 할 수도 어둡게 할 수도 있습니다. 저는 어둡게했습니다.
4. 디더링 / 패턴
디더링은 패턴을 사용해 한 색상에서 다른 색상으로 변화하는 효과를 쉽게 만듭니다. 픽셀아트에서는 꽤 흔한 일이긴 하지만, 제가 하는 아이소메트릭 스타일에서는 최소한만 사용하려고 합니다. 이 경우에서는 디더링을 사용할텐데, 큰 사이즈의 패턴으로 된 디더링을 만듦으로써 명암이 더 부드러워지도록 할 뿐 아니라, 나뭇잎 질감을 줄 수도 있습니다. 두마리 토끼를 잡는거죠!
1 단계
일반적으로 디더링 패턴은 픽셀 하나 하나에 적용되지만, 아까 얘기했듯이 우리는 아주 큰 사이즈의 패턴을 만들 것입니다. 여러분이 여기서 꼭 알아야할 것은, 디더링이 한 번에 4개의 픽셀로 된 덩어리들과 2개의 픽셀로 된 덩어리들이 함께 받쳐주는 식으로 돼 있다는 것입니다. 체크 모양의 그리드를 염두하며 상상해보세요.
작업할 때는 확대해서 하되, 잘 됐나 확인할 때는 화면을 축소해서 보세요. 결과가 마음에 드시나요?
2 단계
아래 밝은 영역 중 한 곳에 디더링을 추가해보았습니다. 이 패턴은 좀 더 작아졌지만 위에서 그랬듯 체크무늬를 염두하고 만들었습니다.
3 단계
디더링한게 마음에 들면 다른 쪽에도 하나 복사하고, 가운데 부분의 타원에도 위와 같은 과정을 거쳐 하이라이트를 추가해 줍니다.
4 단계
메인 녹색에서 두번째 어두운 녹색으로 가는 중간 부분에도 디더링을 추가하세요.
5 단계
나무의 한 쪽에도 디더링을 추가하였습니다. 볼륨감을 식별하고 나무를 더 둥글고 가득차 보이게 하기 위해 중간에 있는 것보다 약간 더 높습니다.
6 단계
그리고 어두운 픽셀을 몇 개 더 추가함으로써 가운데 타원과 바깥 영역의 타원 사이를 확실하게 구분해줍니다. 그렇게 하면 저희가 의도했던 대로 나무가 더 다발 묶음처럼 보일 것입니다.
7 단계
왼쪽 영역이 완성되면, 이를 복제하고 좌우로 뒤짚어서 오른쪽 영역에 갖다 놓습니다.
8 단계
마지막으로, 나무의 가장 어두운 부분에도 위와 같은 방식을 적용합니다.
9 단계
나무 줄기에 질감을 더하기 위해, 새 레이어를 하나 추가하고, 단순하고 더 작은 검은색 그리드 패턴을 그립니다. 투명도를 20%이하로 낮추고 레이어를 병합(mergy)합니다.
거친 질감의 나무 줄기를 만드는데 유용합니다.
10 단계
자 마지막으로, 나무 기둥의 외곽 라인 중 가장 아래에 있는 선을 약간 밝게 만들어 줍니다. 그리고 나무가지가 만들어 낸 동그란 그림자를 검은색 투명도 10%로 추가합니다.
나무가 완성되었습니다!
이제 나무와의 조합을 통해 멋지고 화사하게 만들 어떤 장소든지 붙일 준비가 되었습니다.
여러분이 만든 집 앞에도 붙여보시고, 숲 또는 공원을 나무로 채워보세요. 나무가지 부분을 hue/saturation을 통해 낙엽 색으로 바꿔보거나, 간단하게 음영을 더 추가해서 다양하게 만들어보세요. 여러분이 이 나무의 뛰어난 활용성과 픽셀 아트 인벤토리에서 매우 가치있는 아이템 중 하나라는 것을 느끼시길 바랍니다.
행운을 빕니다. 계속 성장해가시길!
