요즘 픽셀 아트 생성기가 워낙 잘 되어 있지만, 직접 그리고 싶을 때가 있다. (특히 에셋 만들 때......)
평소에는 템플릿을 가져올 때도 있고, 아이콘 리소스가 많은 사이트도 자주 이용한다. 그러나 손맛이 필요할 때, 나는 Procreate를 이용하는 편이다.
그래서 오늘은 픽셀 아트 그리는 방법을 준비했다.
[Step 1]_브러시 제작
우선 어떤 귀인께서 올려주신 유튜브 링크를 참고하여 픽셀을 그릴 수 있는 브러시를 만들어야 한다. 참고로 귀찮은 사람은 브러시 공유 구글 드라이브에 들어가서 내가 만들어 둔 브러시를 사용하기 바란다.
다운로드 한 다음, 프로크리에이트로 내보내기하면 된다. 참고로 메뉴 들어가서 Imported에 들어가면 다운받은 것을 확인할 수 있다. 이름은 Pixel이다.
[Step 2]_New Canvas
커스텀에 들어가서 그리기 쉬운 사이즈로 설정해야 한다. 작게 그리고 싶으면 10 x 10이나20 x 20 정도를 추천한다. 크게 그리고 싶으면 50이나 100 이상도 좋다.
일단 나는 10 px로 했다.
[Step 3]_Drawing Guide
그리기 전에 Actions에 들어가서 Drawing Guide를 켜준다. 그러면 아래에 편집하기 옵션이 뜨는데 눌러준다.
그리드 사이즈는 0이 되게 만들어 준다. 그럼 None으로 뜰 것이다. 브러시를 가장 작은 사이즈로 했을 때, 한 번의 터치마다 한 칸이 채워진다. (만약 캔버스의 크기를 크게 생성했다면 라인의 크기를 적당히 조절해야 한다.)
상단의 색상 바를 통해서 가이드 라인의 색상을 지정할 수 있다.
[Step 4]_Resize Settings
Procreate의 사용법은 이미 알고 있으리라 생각한다.
(보통 그림은 레이어를 나눠서 그린다. 이번 그림은 단순해서 한 레이어에 색칠까지 다 했다.)
그림을 알아서 잘 그렸다면 위처럼 완성된 이미지가 있을 것이다. 그럼 다시 Actions에 들어가서 이번에는 사이즈 조절을 해준다. 이걸 안하면 완성된 이미지를 내보내기할 때 해상도가 처참하게 박살나는 것을 볼 수 있다. 궁금하면 그대로 내보내기 추천!
내가 필요한 사이즈로 조절해준다. 일반적인 앱 아이콘은 1024 x 1024가 권장 사이즈이다.
[Step 5]_Fit to Canvas
사이즈 조절이 끝난 직후의 그림은... 되게 웃긴 상태일 것이다. 코딱지만하다.
여기서부터 중요하다! 마우스 버튼 같은 선택 도구, Selections에 들어가서 유니폼하게 사이즈를 조절할 수 있도록 수정하고, 특히!! Interpolation(보간법)을 Nearest Neighbour(최근접 이웃)로 설정한다.
픽셀 아트의 경우에 꼭 필요한데, 평균이나 보간을 안 하기 때문에 색이 섞이지 않아서 이미지 리사이즈(확대) 시, 값 왜곡이 발생하지 않는다. 더불어 블러 효과가 생기지 않아서 경계가 또렷하게 유지된다는 장점이 있다.
다 따라했으면 Fit to Canvas를 클릭한다.
[Step 6]_Share Layers
Fit to Canvas 직후에는 흐려 보이지만, Selection 버튼 클릭을 해제하면 이미지가 잘 확대된 것을 확인할 수 있다.
드디어 마지막!!
이제 내보내기만 남았다. 레이어를 모두 보이게 표시하고, 배경색을 숨김 처리한다.
다시 Actions에 들어가서 Share Image 말고, Share Layers의 PNg Files로 내보내기 하면 각각의 레이어들이 한 번에 내보내진다.
[마치며]
픽셀 아트는 단순해 보이지만, 작은 점들이 모여 하나의 그림이 되는 과정에서 생각보다 많은 섬세함이 필요하다. 제한된 해상도 안에서 표현해야 하기 때문에 오히려 더 창의적으로 고민하게 되는 부분도 많았다.
지금 블로그에 예시로 그린 그림들은 앱 개발에 사용할 에셋들이다. 어떻게 사용될지는 추후 블로그에 올릴 예정이다.
