초보자를 위한 픽셀 아트: 사용 지침

인디 개발자는 게임 디자이너, 프로그래머, 작곡가, 아티스트 등 여러 역할을 동시에 결합해야 하는 경우가 많습니다. 그리고 시각적인 측면에서 많은 사람들이 픽셀 아트를 선택합니다. 언뜻 보기에는 단순해 보입니다. 하지만 아름답게하려면 많은 경험과 특정 기술이 필요합니다. 나는 이 스타일의 기본을 이제 막 이해하기 시작한 사람들을 위한 튜토리얼을 찾았습니다. 특수 소프트웨어에 대한 설명과 두 개의 스프라이트를 사용하는 그리기 기술을 예로 들 수 있습니다.

배경

픽셀 아트는 픽셀 수준에서 변경이 이루어지는 디지털 아트의 한 형태입니다. 주로 80~90년대 비디오 게임 그래픽과 관련이 있습니다. 그 당시 아티스트들은 메모리 제한과 낮은 해상도를 고려해야 했습니다. 요즘 픽셀 아트는 사실적인 3D 그래픽을 만드는 능력에도 불구하고 게임과 일반적인 아트 스타일에서 여전히 인기가 있습니다. 왜? 향수를 불러일으키는 것은 제쳐두고, 이렇게 엄격한 틀 안에서 멋진 작품을 만들어내는 것은 즐겁고 보람 있는 도전입니다.

픽셀아트는 기존 아트나 3D 그래픽에 비해 진입장벽이 상대적으로 낮아 인디 개발자들의 관심을 끌고 있다. 하지만 그렇다고 해서 그것이 쉬울 것이라는 뜻은 아니다 마치다 이런 스타일의 게임. 저는 크라우드 펀딩 플랫폼에서 픽셀 아트 메트로배니아를 사용하는 인디 개발자를 많이 보았습니다. XNUMX년이면 다 끝낼 수 있을 거라 생각했지만, 실제로는 XNUMX년이 더 필요했다.

메탈슬러그 3(아케이드). SNK, 2000

대부분의 사람들이 만들고 싶어하는 수준의 픽셀 아트는 시간이 많이 걸리고 짧은 튜토리얼도 거의 없습니다. 3D 모델로 작업할 때 회전, 변형, 개별 부품 이동, 한 모델에서 다른 모델로 애니메이션 복사 등의 작업을 수행할 수 있습니다. 높은 수준의 픽셀 아트는 거의 항상 각 프레임에 픽셀을 꼼꼼하게 배치하는 데 많은 노력을 기울입니다.

일반적으로 나는 당신에게 경고했습니다.

이제 제 스타일에 대해 조금 말씀드리겠습니다. 저는 주로 비디오 게임용 픽셀 아트를 그리고 그 안에서 영감을 얻습니다. 특히 저는 Famicom/NES, 16비트 콘솔, 90년대 아케이드 게임의 팬입니다. 제가 그 시대에 가장 좋아했던 게임의 픽셀 아트는 삭막하고 미니멀하기보다는 밝고 자신감 있고 깔끔하다고 설명할 수 있습니다(그러나 너무 깨끗하지는 않습니다). 이것이 제가 직접 작업하는 스타일이지만, 이 튜토리얼의 아이디어와 기술을 쉽게 적용하여 완전히 다른 것을 만들 수 있습니다. 다양한 아티스트의 작품을 탐색하고 마음에 드는 픽셀 아트를 만들어보세요!

부드러운

픽셀 아트의 기본 디지털 도구는 픽셀을 배치하는 줌과 연필입니다. 선, 모양, 선택, 이동 및 페인트통도 유용합니다. 이러한 도구 세트를 갖춘 무료 및 유료 소프트웨어가 많이 있습니다. 가장 인기있는 것과 제가 직접 사용하는 것에 대해 말씀 드리겠습니다.

페인트(무료)

Windows를 사용하는 경우 내장된 그림판은 기본 프로그램이지만 픽셀 아트를 위한 모든 도구를 갖추고 있습니다.

피스켈 (무료)

브라우저를 통해 실행되는 예상치 못한 기능의 픽셀 아트 편집기입니다. 작업 내용을 PNG 또는 애니메이션 GIF로 내보낼 수 있습니다. 초보자를 위한 훌륭한 옵션입니다.

그래픽스게일 (무료)

GraphicsGale은 픽셀 아트용으로 특별히 설계되었으며 애니메이션 도구를 포함하는 유일한 편집기입니다. 일본 회사 HUMANBALANCE가 만들었습니다. 2017년부터 무료로 제공되었으며 Aseprite의 인기 상승에도 불구하고 여전히 수요가 있습니다. 불행히도 Windows에서만 작동합니다.

무균 ($)

아마도 현재 가장 인기 있는 편집자일 것입니다. 오픈 소스, 많은 기능, 활성 지원, Windows, Mac 및 Linux 버전. 픽셀 아트에 관심이 있지만 아직 적합한 편집기를 찾지 못했다면 이것이 바로 여러분에게 필요한 편집기일 수 있습니다.

GameMaker 스튜디오 2 ($$+)

GameMaker Studio 2는 훌륭한 Sprite Editor를 갖춘 뛰어난 2D 도구입니다. 자신만의 게임을 위한 픽셀 아트를 만들고 싶다면 하나의 프로그램에서 모든 작업을 수행하는 것이 매우 편리합니다. 지금 나는 작업하는 동안 이 소프트웨어를 사용하고 있습니다. UFO 50, 50개의 복고풍 게임 모음: 저는 GameMaker에서 스프라이트와 애니메이션을 만들고 Photoshop에서 타일셋을 만듭니다.

포토샵 ($$$+)

Photoshop은 구독을 통해 배포되는 고가의 소프트웨어이며 픽셀 아트용으로 설계되지 않았습니다. 저처럼 고해상도 일러스트 렌더링에 참여하시거나, 이미지에 복잡한 조작을 하실 필요가 없는 분 외에는 구매를 권장하지 않습니다. 정적 스프라이트와 픽셀 아트를 만들 수 있지만 전문 소프트웨어(예: GraphicsGale 또는 Aseprite)에 비해 상당히 복잡합니다.

기타

내 픽셀 아트 키트. 모든 것이 검은색인데, 이제서야 깨달았습니다.

그래픽 태블릿($$+)

손목터널증후군을 예방하기 위해 디지털 일러스트레이션 작업에 그래픽 태블릿을 추천합니다. 치료하는 것보다 예방하는 것이 훨씬 쉽습니다. 어느 날 당신은 고통을 느낄 것이고 그것은 점점 더 심해질 것입니다. 처음부터 자신을 돌보십시오. 예전에는 마우스로 그림을 그렸기 때문에 이제는 키를 눌러야 하는 게임을 하기가 어렵습니다. 현재 Wacom Intuos Pro S를 사용하고 있습니다.

손목 지원 ($)

태블릿을 구할 수 없다면 적어도 손목 받침대는 구하세요. 내가 가장 좋아하는 것은 Mueller Green Fitted 손목 보호대입니다. 나머지는 너무 빡빡하거나 충분한 지원을 제공하지 않습니다. 캘리퍼스는 문제없이 온라인으로 주문할 수 있습니다.

96 × 96 픽셀

마지막 싸움. 캡콤, 1989

시작하자! 96x96 픽셀 문자 스프라이트부터 시작해 보겠습니다. 일례로 스케일을 이해하실 수 있도록 오크를 그려서 파이널파이트의 스크린샷(위 사진)에 올려 놓았습니다. 이것 большой 대부분의 복고풍 게임용 스프라이트, 스크린샷 크기: 384x224픽셀.

이렇게 큰 스프라이트에서는 내가 이야기하고 싶은 기술을 보여주기가 더 쉬울 것입니다. 픽셀당 렌더링은 또한 여러분에게 더 친숙할 수 있는 전통적인 예술 형식(예: 그리기 또는 페인팅)과 더 유사합니다. 기본 기술을 익힌 후 더 작은 스프라이트로 넘어갑니다.

1. 팔레트를 선택하세요

픽셀은 다른 디지털 영역보다 픽셀 아트에서 훨씬 더 깊은 개념입니다. 픽셀 아트는 색상과 같은 한계로 정의됩니다. 올바른 팔레트를 선택하는 것이 중요하며 스타일을 결정하는 데 도움이 됩니다. 하지만 처음에는 팔레트에 대해 생각하지 말고 기존 팔레트 중 하나(또는 몇 가지 임의의 색상)를 선택하는 것이 좋습니다. 어느 단계에서나 쉽게 변경할 수 있습니다.

이 튜토리얼에서는 우리가 만든 32가지 색상 팔레트를 사용하겠습니다. UFO 50. 픽셀 아트의 경우 32~16가지 색상으로 조립되는 경우가 많습니다. 우리는 Famicom과 PC 엔진 사이에 나타날 가상 콘솔을 위해 설계되었습니다. 당신은 그것을 가져갈 수 있습니다. 튜토리얼은 선택한 팔레트에 전혀 의존하지 않습니다.

2. 대략적인 개요

연필 도구를 사용하여 그리기를 시작해 보겠습니다. 일반 펜과 종이를 사용하는 것과 같은 방법으로 스케치를 그려 봅시다. 물론, 픽셀 아트와 전통 예술이 겹치는데, 특히 이렇게 큰 스프라이트의 경우 더욱 그렇습니다. 내 관찰에 따르면 강력한 픽셀 아트 아티스트는 최소한 손으로 그리는 데 능숙하며 그 반대의 경우도 마찬가지입니다. 따라서 그리기 기술을 개발하는 것은 항상 유용합니다.

3. 윤곽의 정교화

윤곽을 다듬습니다. 추가 픽셀을 제거하고 각 선의 두께를 XNUMX픽셀로 줄입니다. 그러나 불필요한 것으로 간주되는 것은 정확히 무엇입니까? 이 질문에 대답하려면 픽셀 라인과 불규칙성을 이해해야 합니다.

불규칙성

픽셀 아트에서 직선과 곡선이라는 두 가지 기본 선을 그리는 방법을 배워야 합니다. 펜과 종이를 사용하면 근육을 제어할 수 있지만 우리는 작은 색상 블록을 사용하여 작업합니다.

올바른 픽셀 라인을 그리는 열쇠는 재기스(jaggies)입니다. 이는 선의 부드러움을 파괴하는 단일 픽셀 또는 작은 세그먼트입니다. 앞서 말했듯이 픽셀 하나가 픽셀 아트에 큰 차이를 가져오므로 불균일은 전체 미학을 망칠 수 있습니다. 종이에 직선을 그렸는데 갑자기 누군가 테이블에 부딪혔다고 상상해 보세요. 픽셀 아트의 요철은 마치 임의의 물결선처럼 보입니다.

예 :

직접

곡선

선분의 길이가 점차 증가하거나 감소하지 않으면 곡선에 불규칙성이 나타납니다.

충돌을 완전히 피하는 것은 불가능합니다. 좋아하는 복고풍 게임에는 모두 충돌이 있습니다(물론 픽셀 아트가 단순한 모양으로만 구성된 경우는 제외). 목표: 필요한 모든 것을 계속 표시하면서 불균일성을 최소한으로 유지합니다.

4. 첫 번째 색상 적용

채우기 또는 기타 적절한 도구를 사용하여 캐릭터에 색상을 지정합니다. 팔레트는 작업의 이 부분을 단순화합니다. 소프트웨어가 팔레트 사용을 제공하지 않는 경우 위의 예와 같이 그림에 직접 배치하고 스포이드를 사용하여 색상을 선택할 수 있습니다.

왼쪽 하단에 친구를 그렸습니다. 만나요. 이것이 공입니다. 각 단계에서 정확히 무슨 일이 일어나고 있는지 더 쉽게 이해할 수 있습니다.

5. 쉐이딩

이제 그림자를 표시할 시간입니다. 스프라이트에 더 어두운 색상을 추가하기만 하면 됩니다. 이렇게 하면 이미지가 입체적으로 보입니다. 오크의 왼쪽 위에 하나의 광원이 있다고 가정해 보겠습니다. 이는 캐릭터 위와 앞에 있는 모든 것이 조명된다는 의미입니다. 오른쪽 하단에 그림자를 추가합니다.

형태와 부피

이 단계가 어렵다면 그림을 단순한 선과 색상이 아닌 XNUMX차원 모양으로 생각하세요. 모양은 XNUMX차원 공간에 존재하며 그림자의 도움으로 볼륨을 만들 수 있습니다. 이렇게 하면 세부 사항 없이 캐릭터를 시각화하고 캐릭터가 픽셀이 아닌 점토로 만들어졌다고 상상하는 데 도움이 됩니다. 쉐이딩은 단순히 새로운 색상을 추가하는 것이 아니라 형태를 만들어가는 과정입니다. 잘 디자인된 캐릭터에서는 세부 사항이 기본 모양을 숨기지 않습니다. 눈을 가늘게 뜨면 빛과 그림자의 큰 덩어리가 보일 것입니다.

앤티앨리어싱(앤티앨리어싱)

새로운 색상을 사용할 때마다 앤티앨리어싱(AA)을 적용합니다. 두 개의 선분이 만나는 모서리에 중간 색상을 추가하여 픽셀을 부드럽게 만드는 데 도움이 됩니다.

회색 픽셀은 선의 "끊김"을 부드럽게 합니다. 선분이 길수록 AA 부분도 길어집니다.

이것이 오크의 어깨에 달린 AA의 모습입니다. 근육의 곡선을 보여주는 라인을 부드럽게 만드는 것이 필요합니다.

앤티앨리어싱은 게임에서 사용되는 스프라이트나 색상을 알 수 없는 배경을 넘어 확장되어서는 안 됩니다. 예를 들어 밝은 배경에 AA를 적용하면 어두운 배경에서는 앤티앨리어싱이 보기 흉하게 보입니다.

6. 선택적 개요

이전에는 윤곽선이 완전히 검은색이어서 스프라이트가 매우 만화처럼 보였습니다. 사진이 여러 부분으로 나누어져 있는 것 같았습니다. 예를 들어, 팔의 검은색 선은 근육 조직과 너무 많은 대비를 제공하여 캐릭터의 응집력을 떨어뜨립니다.

스프라이트가 더 자연스러워지고 분할이 덜 명확해지면 캐릭터의 기본 모양을 더 쉽게 읽을 수 있습니다. 이렇게 하려면 선택적 윤곽선을 사용할 수 있습니다. 검은색 윤곽선을 더 밝은 윤곽선으로 부분적으로 교체합니다. 스프라이트의 조명 부분에서는 가장 밝은 색상을 사용할 수 있으며, 스프라이트가 네거티브 공간에 닿는 경우 윤곽선을 완전히 제거할 수 있습니다. 검은색 대신 그림자용으로 선택한 색상을 사용해야 합니다. 이렇게 하면 분할이 유지됩니다(근육, 털 등을 구별하기 위해).

이 단계에서는 더 어두운 그림자도 추가했습니다. 그 결과 오크의 피부에는 세 단계의 녹색 그라데이션이 나타났습니다. 가장 어두운 녹색은 선택적 윤곽선과 AA에 사용될 수 있습니다.

7. 최종 손질

마지막으로 캐릭터가 준비되거나 다음 캐릭터로 넘어갈 때까지 하이라이트(스프라이트에서 가장 밝은 점), 디테일(귀걸이, 스터드, 흉터) 및 기타 개선 사항을 추가하는 것이 좋습니다.

이 단계에서 적용할 수 있는 몇 가지 유용한 기술이 있습니다. 그림을 수평으로 회전하면 비율과 음영의 오류를 식별하는 데 도움이 됩니다. 색상을 제거할 수도 있습니다. 채도를 XNUMX으로 설정하면 그림자를 변경해야 하는 위치를 이해할 수 있습니다.

노이즈 생성(디더링, 디더링)

지금까지 우리는 크고 단단한 그림자 영역을 주로 사용해 왔습니다. 그러나 세 번째 색상을 추가하지 않고도 한 색상에서 다른 색상으로 이동할 수 있는 또 다른 기술인 디더링이 있습니다. 아래 예를 살펴보세요.

상단의 어두움에서 밝은 그라데이션은 수백 가지의 다양한 파란색 음영을 사용합니다.

평균 그라데이션은 XNUMX가지 색상만 사용하지만 여전히 동일한 색상의 음영이 너무 많습니다. 두꺼운 균일한 줄무늬로 인해 눈이 색상 자체가 아닌 색상의 접촉점에 초점을 맞추는 소위 밴딩(영국 밴드-줄무늬에서)이 발생합니다.

아래쪽 그라데이션에는 밴딩을 방지하고 두 가지 색상만 사용하는 디더링을 적용했습니다. 색상 그라데이션을 시뮬레이션하기 위해 다양한 강도의 노이즈를 생성합니다. 이 기술은 인쇄에 사용되는 하프톤(하프톤 이미지)과 매우 유사합니다. 뿐만 아니라 점묘화(거친 이미지) - 삽화와 만화에서도 마찬가지입니다.

오크에서는 질감을 전달하기 위해 약간의 디더링을 했습니다. 일부 픽셀 아티스트는 전혀 사용하지 않는 반면 다른 일부 아티스트는 부끄러워하지 않고 매우 능숙하게 사용합니다. 디더링은 단일 색상으로 채워진 넓은 영역(위의 메탈슬러그 스크린샷의 하늘 참조)이나 거칠고 고르지 않게 보이는 영역(예: 흙)에서 가장 잘 보입니다. 사용 방법을 스스로 결정하십시오.

대규모 고품질 디더링의 예를 보고 싶다면 80년대 영국 스튜디오인 비트맵 브라더스(The Bitmap Brothers)의 게임이나 PC-98 컴퓨터에 있는 게임을 확인해 보세요. 모두 NSFW라는 점을 명심하세요.

카큐세이(PC-98). 엘프, 1996
이 이미지에는 16가지 색상만 있습니다!

8. 마지막 모습

픽셀 아트의 위험 중 하나는 (구조와 스타일 제한으로 인해) 쉽고 단순해 보인다는 것입니다. 하지만 결국에는 스프라이트를 다듬는 데 엄청난 시간을 소비하게 될 것입니다. 이는 풀어야 할 퍼즐과 같습니다. 이것이 바로 픽셀 아트가 완벽주의자를 끌어들이는 이유입니다. 하나의 스프라이트가 너무 많은 시간을 차지해서는 안 된다는 점을 기억하십시오. 이는 매우 복잡한 조각 모음 중 아주 작은 조각일 뿐입니다. 큰 그림을 놓치지 않는 것이 중요합니다.

픽셀 아트가 게임용이 아니더라도 때로는 스스로에게 "이미 충분해!"라고 말할 가치가 있습니다. 그리고 계속 나아가십시오. 기술을 개발하는 가장 좋은 방법은 가능한 한 많은 주제를 사용하여 처음부터 끝까지 전체 과정을 최대한 많이 진행하는 것입니다.

그리고 때로는 잠시 후에 새로운 눈으로 볼 수 있도록 스프라이트를 잠시 남겨 두는 것이 유용할 때도 있습니다.

32×32 픽셀

우리는 큰 96x96 픽셀 스프라이트를 먼저 만들었습니다. 그 크기에서는 그림이나 페인팅과 비슷하지만 픽셀이 있기 때문입니다. 스프라이트가 작을수록 표시해야 하는 것과 덜 유사하며 각 픽셀이 더 중요합니다.

슈퍼 마리오 브라더스에서는 마리오의 눈은 하나가 다른 하나 위에 겹쳐져 있는 XNUMX개의 픽셀로 이루어져 있습니다. 그리고 그의 귀도요. 캐릭터 제작자 미야모토 시게루는 코를 얼굴의 나머지 부분과 분리하기 위해 콧수염이 필요하다고 말했습니다. 따라서 마리오의 주요 특징 중 하나는 단순한 캐릭터 디자인이 아니라 실용적인 전략입니다. 이는 "필요는 발명의 어머니"라는 오래된 지혜를 확인시켜줍니다.

32x32 픽셀 스프라이트를 만드는 주요 단계는 스케치, 색상, 그림자, 추가 개선 등 이미 우리에게 익숙합니다. 하지만 그런 상황에서는 초기 스케치로 크기가 작기 때문에 윤곽선을 그리는 대신 색칠된 모양을 선택합니다. 색상은 윤곽선보다 캐릭터를 정의하는 데 더 중요한 역할을 합니다. 마리오를 다시 보세요. 그는 윤곽선이 전혀 없습니다. 흥미로운 것은 콧수염만이 아닙니다. 구레나룻은 귀 모양을 결정하고 소매는 팔을 보여주며 전체적인 모양은 몸 전체를 어느 정도 명확하게 보여줍니다.

작은 스프라이트를 만드는 것은 끊임없는 타협입니다. 획을 추가하면 그림자를 위한 공간이 손실될 수 있습니다. 캐릭터의 팔과 다리가 선명하게 보이면 머리가 너무 크지 않아야 합니다. 색상, 선택적 획 및 앤티앨리어싱을 효과적으로 사용하면 렌더링된 개체가 실제보다 크게 나타납니다.

작은 스프라이트의 경우 저는 chibi 스타일을 좋아합니다. 캐릭터가 매우 귀엽고 큰 머리와 눈을 가지고 있습니다. 제한된 공간에서 다채로운 캐릭터를 만드는 좋은 방법이며 전체적으로 매우 멋진 스타일입니다. 하지만 캐릭터의 이동성이나 힘을 보여야 할 경우 머리에 공간을 덜 주어 몸이 더욱 강력해 보이도록 할 수 있습니다. 그것은 모두 귀하의 선호도와 목표에 달려 있습니다.

팀 전체가 모였습니다!

파일 형식

이 결과는 픽셀 아티스트라면 누구나 긴장하게 만들 수 있습니다.

지금 보시는 사진은 해당 사진을 JPG로 저장한 결과입니다. 파일 압축 알고리즘으로 인해 일부 데이터가 손실되었습니다. 고품질 픽셀 아트는 보기에 좋지 않으며 원래 팔레트로 되돌리는 것도 쉽지 않습니다.

품질 저하 없이 정적 이미지를 저장하려면 PNG 형식을 사용하세요. 애니메이션의 경우 - GIF.

픽셀 아트를 올바르게 공유하는 방법

소셜 네트워크에서 픽셀 아트를 공유하는 것은 피드백을 받고 같은 스타일로 작업하는 다른 아티스트를 만날 수 있는 좋은 방법입니다. 해시태그 #pixelart를 사용하는 것을 잊지 마세요. 안타깝게도 소셜 네트워크에서는 요청 없이 PNG를 JPG로 변환하는 경우가 많아 사용자 경험이 더욱 악화됩니다. 게다가 이미지가 변환된 이유가 항상 명확하지는 않습니다.

다양한 소셜 네트워크에 필요한 품질로 픽셀 아트를 저장하는 방법에 대한 몇 가지 팁이 있습니다.

트위터

Twitter에서 PNG 파일을 변경하지 않고 유지하려면 256개 미만의 색상을 사용하거나 확실하게 하다파일의 가장 긴 쪽이 900픽셀 미만인지 확인하세요. 파일 크기를 최소 512x512 픽셀로 늘리겠습니다. 따라서 크기 조정은 100의 배수(200%가 아닌 250%)이고 날카로운 가장자리가 유지됩니다(Photoshop의 가장 가까운 이웃).

Twitter 게시물용 애니메이션 GIF 있다 무게는 15MB를 넘지 않아야 합니다. 이미지는 최소 800x800픽셀이어야 하고, 반복되는 애니메이션은 XNUMX번 반복되어야 하며, 마지막 프레임은 다른 모든 프레임의 절반 길이여야 한다는 것이 가장 널리 알려진 이론입니다. 그러나 트위터가 이미지 표시 알고리즘을 지속적으로 변경하고 있다는 점을 고려할 때 이러한 요구 사항을 어느 정도 충족해야 하는지는 불분명합니다.

인스타그램

내가 아는 한, 인스타그램에 사진을 품질 저하 없이 게시하는 것은 불가능합니다. 하지만 최소 512x512 픽셀로 확대하면 확실히 더 좋아 보일 것입니다.

출처 : habr.com