픽셀 아트 메이커 — 무료 온라인 픽셀 아트 편집기 및 생성기

픽셀 아트 메이커는 네 가지로 이루어집니다: 격자, 연필, 지우개, 내보내기 버튼입니다. 나머지 — 레이어, 애니메이션, 팔레트 관리 — 는 모두 이 기본 순환 위에 얹힌 편의 기능일 뿐입니다. 여기 있는 편집기는 브라우저에서 실행됩니다. 캔버스 크기를 고르고, 1픽셀 연필로 그리고, PNG를 내려받으세요. 설치도, 계정도, 업로드 단계도 없습니다.

대부분의 도구가 숨겨 두는 결정: 격자 크기는 되돌리기가 가장 어려운 선택입니다. 이후의 모든 것이 여기에서 따라옵니다 — 얼굴에 픽셀이 몇 개 들어가는지, 눈이 1픽셀인지 2픽셀인지, 게임 엔진에서 4배 확대를 스프라이트가 어떻게 견디는지까지. 이 페이지는 편집기 자체, 격자 계산, 스프라이트를 그리는 것과 생성하는 것의 차이, 예산으로서의 팔레트, 그리고 방금 그린 캐릭터를 누군가 걸어 다닐 수 있는 3D 세계에 넣는 방법을 다룹니다.

픽셀 아트 메이커 (실시간 캔버스)

캔버스가 곧 페이지입니다. 화면에 들어오는 첫 영역에서 고정 크기 비트맵 격자, 클릭 한 번에 1픽셀을 쓰는 연필, 투명 값을 되돌려 쓰는 지우개, 팔레트 막대, PNG를 쓰는 내보내기 버튼을 볼 수 있습니다. 왼쪽 클릭은 그리기, 오른쪽 클릭이나 보조 키는 지우기이며, 캔버스 중앙은 확대해 추측한 경계가 아니라 항상 실제 픽셀 경계를 보여 줍니다.

무엇이든 그리기 전에 캔버스 크기와 보기 크기의 차이를 이해하세요. 800×800으로 표시된 32×32 캔버스도 데이터는 여전히 32×32픽셀입니다. 확대는 픽셀이 렌더링되는 크기를 바꿀 뿐, 개수는 절대 바꾸지 않습니다. 확대한 상태에서 내보내도 여전히 32×32 파일이 만들어지는데, 이는 올바른 동작이며 처음 겪는 거의 모든 사람을 놀라게 합니다.

초보자가 가장 자주 틀리는 설정은 그리기 전이 아니라 그린 뒤에 격자 크기를 고르는 것입니다. 누군가 64×64 캔버스에 캐릭터를 스케치하고 마음에 들어 한 뒤, 16×16 타일 게임에 넣고 싶어 합니다. 손으로 그린 64×64 스프라이트를 리샘플링으로 16×16으로 축소하면 망가집니다. 2픽셀짜리 세부는 회색 얼룩이 되고, 1픽셀 외곽선은 2픽셀 회색 선이 되며, 평균 계산된 모든 경계가 새 값을 만들어 내 색상 수가 늘어납니다. 이미 잘못된 크기로 그렸다면, 예전 버전을 시각적 참고로 삼아 목표 크기에서 다시 그리세요. 어떤 축소보다도 빠르고 깔끔하며, 더 작은 격자가 실제로 요구하는 단순화를 강제합니다.

나중에 확대하는 것은 안전합니다. 나중에 축소하는 것은 그렇지 않습니다. 필요한 세부를 담을 수 있는 가장 작은 격자를 고르고, 쓴 픽셀은 모두 이미 써 버린 것으로 여기세요.

픽셀 아트 격자 및 템플릿

픽셀 아트 격자, 픽셀 아트용 격자, 격자에 픽셀 아트 그리기를 검색하는 사람들은 모두 같은 대상을 뜻합니다. 하나의 칸이 하나의 픽셀이자 하나의 색인, 경계 지어진 사각형의 장입니다. 격자는 그림 위에 얹는 장식이 아닙니다. 해상도 계약입니다. 반지름 5의 원은 원이 아니라, 손으로 배치하거나 템플릿에서 받아들이는 특정한 1픽셀 계단입니다.

템플릿이 존재하는 이유는 원, 아이소메트릭 큐브, 3/4 시점 캐릭터의 처음 네 줄을 기억에서 끌어내기는 번거롭고 조금만 틀리기도 쉽기 때문입니다. 템플릿은 출발 위치일 뿐, 완성된 스프라이트가 아닙니다. 도형을 붙여 넣은 다음, 내 캐릭터에 속하지 않는 픽셀을 지우고, 빛의 방향이 지금까지 그린 다른 모든 것과 일치하도록 외곽선을 다시 칠하세요.

고르는 크기는 픽셀로 표시한 예산입니다. 8×8 스프라이트는 얼굴에 대략 4×4를 주는데, 이는 외곽선과 눈과 입을 동시에 넣을 여유가 없어 둘만 고를 수 있다는 뜻입니다. 16×16 스프라이트는 1픽셀 외곽선과 소재당 두 가지 톤이 들어갑니다. 32×32 스프라이트가 되어서야 빛의 방향을 넣을 여유가 생깁니다. 64×64를 넘으면 픽셀 대신 붓질로 그리려는 유혹이 생기고, 이 스타일을 또렷하게 읽히게 하는 엄격함이 조금씩 새어 나갑니다.

정사각형이 아닌 격자는 타일에서 중요합니다. 16×32 캔버스는 탑다운 게임의 서 있는 캐릭터이고, 32×32 캔버스는 타일입니다. 이 두 범주는 파일을 따로 두세요. 캐릭터 스프라이트와 타일셋 타일은 엔진에 도달했을 때 정렬 규칙이 다르기 때문입니다.

어떤 사람들은 스프레드시트에서 격자를 만들며, 한 칸을 한 픽셀로 두고 칸을 채운 뒤 축소해서 형태가 한눈에 읽히는지 확인합니다. 이 방식은 통하며, 실제 장점이 하나 있습니다. 6×6 눈 블록을 복사해 스프라이트 시트의 모든 칸에 다시 그리지 않고 붙여 넣을 수 있습니다.

실패 지점은 내보내기입니다. 스프레드시트는 격자선, 테두리, 셀 여백을 렌더링합니다. 시트를 스크린샷으로 찍어 잘라내면 모든 픽셀 사이에 1픽셀짜리 어두운 이음선이 생기고 각 셀 가장자리에 색이 조금씩 어긋납니다. 먼저 격자선과 테두리를 끄고, 확대를 정확한 정수 배로 설정한 다음, 눈대중이 아니라 픽셀 경계에서 잘라내세요. 전용 캔버스는 이 문제 전체를 피해 갑니다. 그래서 스프레드시트는 계획 도구로는 훌륭하고 제작 도구로는 형편없습니다.

직접 그리기와 생성 비교

두 방법 모두 같은 캔버스를 채웁니다. 손으로 그리기는 내가 배치한 픽셀만 정확히 씁니다. 생성은 설명을 만족하는 픽셀 묶음을 쓴 다음, 내가 그것을 편집합니다. 어느 쪽도 다른 쪽을 건너뛰는 지름길이 아닙니다. 둘은 서로 다른 질문에 답합니다.

손으로 그리기는 실루엣이 이미 보일 때 이깁니다. 투구의 모양, 눈의 정확한 간격, 또는 이 캐릭터가 기존 스프라이트 네 개 옆에 어떻게 정렬되어야 하는지 안다면, 픽셀을 배치하는 편이 설명하고 결과를 고치는 것보다 빠릅니다. 생성은 탐색할 때 이깁니다. 아이디어 — 방패를 든 옆모습의 갑옷 입은 개구리 — 는 알지만 실루엣은 모른다면, 생성은 마흔 번의 결정 대신 한 번에 출발 위치를 줍니다. Agent Sprite Forge는 설명에서 스프라이트를 곧바로 계속 편집할 수 있는 격자로 생성합니다. 결과물이 납품물이 아니라 출발점이기 때문에 이 점이 중요합니다.

생성된 스프라이트 결과물은 썸네일 크기에서는 그럴듯하지만 8배 확대에서는 엉망입니다. 흔한 손상은 이렇습니다. 외곽선에서 한 칸 떨어진 곳에 떠 있는 고립된 1픽셀, 연속된 1픽셀 외곽선이어야 할 곳의 끊김, 팔레트에 없는 색을 지닌 안티앨리어싱 가장자리, 그리고 캔버스 테두리에 닿은 스프라이트. 마지막 항목은 미관 문제가 아닙니다. 캔버스를 가득 채운 스프라이트는 여백이 없어서 회전, 그림자, 또는 어떤 엔진 패딩이든 잘라내게 됩니다.

해결은 기계적이며 스프라이트당 몇 분이면 됩니다. 이미 고친 문제를 다시 만들지 않도록 매번 같은 순서로 하세요.

온라인, 무료, 다운로드 없음

무료는 전체 그리기 순환을 포함합니다. 격자 선택, 연필, 지우개, 채우기, 팔레트 편집, PNG 내보내기까지요. 만료되지 않고, 내보내기를 계정 뒤에 가둬 두지도 않습니다. 실제 한계가 있는 부분은 생성입니다. 스프라이트를 만드는 데는 픽셀을 배치하는 것과 달리 연산 비용이 들기 때문입니다. 그리기와 내보내기에는 속도 제한이 없습니다.

그리기나 내보내기에 계정은 필요 없습니다. 그린 것은 업로드되지 않습니다. 이미지는 브라우저 탭에 남아 있고, 내려받을 때만 빠져나갑니다. 클라이언트 측 편집의 대가는 자동 저장이 없는 어떤 데스크톱 앱과도 같습니다. 내보내지 않고 탭을 닫으면 그림을 잃습니다. 완성됐을 때가 아니라 스프라이트가 제대로 읽힐 때 내보내세요. 중간 버전은 비용이 들지 않습니다.

내보내기에는 정확히 픽셀만 담깁니다. 캔버스 원래 크기의 PNG, 8비트 RGBA, 알파 보존입니다. 투명 배경에 그렸다면 배경은 투명하게 남습니다 — 투명은 색이 아니라 값이며 내보내기를 견뎌 냅니다. 채워진 배경에 그렸다면 그 채움은 캐릭터 뒤 모든 픽셀에 구워집니다. 배경색을 원한다면 일부러 칠하세요. 나중에 스프라이트를 다른 것 위에 합성하려면 배경을 비워 두고 그대로 내보내세요.

솔직한 구분은 생성과 그 밖의 모든 것 사이에 있습니다. 편집, 색 작업, 파일 출력은 로컬에서 실행되며 도구를 한 번 쓰든 매일 쓰든 동일하게 동작합니다. 실제 한계는 생성에 적용됩니다. 그래서 유용한 작업 흐름은 대략적인 형태를 생성한 뒤, 아무것도 계량되지 않는 편집기에서 시간을 쓰는 것입니다.

내보내기 경로의 어디에도 워터마크를 넣거나, 이미지를 리샘플링하거나, 파일 이름을 캔버스 크기로 바꾸는 일은 없습니다. 그린 그대로 나옵니다.

팔레트 및 스타일

색은 취향이 아니라 예산입니다. 16색 팔레트는 재사용을 강제하는 제약이며, 재사용이 스프라이트를 픽셀 더미가 아니라 하나의 물체로 읽히게 합니다. 같은 중간 갈색이 가죽끈, 나무 손잡이, 부츠에 나타나면 눈이 이것들을 묶어 인식하고 캐릭터가 또렷해집니다. 256색 팔레트는 스프라이트를 스스로 목매달 만큼의 밧줄입니다. 문제가 생길 때마다 새 색을 추가하게 두고, 결과물에는 내적 논리가 없습니다. 같은 작가가 서로 무관한 60색 팔레트 두 개로 만든 스프라이트 두 개는 서로 다른 프로젝트에서 온 것처럼 보입니다.

팔레트는 개별 색이 아니라 색 계조로 만드세요. 쓸 만한 16색 집합은 세 톤짜리 계조 다섯 개에 전용 외곽선 색 하나를 더한 것입니다. 각 계조는 기본색, 그림자, 하이라이트로 이루어집니다. 기본색은 중간 톤입니다. 그림자는 기본색을 더 어둡게 만들고 파랑이나 보라 쪽으로 옮긴 것이지, 그냥 어둡게만 한 것이 아닙니다 — 밝기만 낮춘 그림자는 때처럼 보입니다. 하이라이트는 기본색을 밝게 하고 노랑 쪽으로 옮긴 것입니다. 16×16 스프라이트에서 하이라이트는 픽셀의 대략 10분의 1을 차지해야 합니다. 그보다 많으면 광원이 방향성을 잃습니다.

스타일은 색 자체가 아니라 일관되게 적용하는 규칙에서 나옵니다. 등장인물 전체가 팔레트를 공유한다는 것은 플레이어 옷의 빨강이 적 깃발의 빨강, 체력 아이템의 빨강과 완전히 같은 RGB 값이라는 뜻입니다. 이게 전부입니다. 강제하는 데 비용이 들지 않으며, 의도적으로 보이는 게임과 짜깁기해 보이는 게임의 차이가 여기서 나옵니다.

픽셀 캐릭터를 3D 세계로 만들기

넘기는 방법은 한 문장입니다. 스프라이트를 100퍼센트로 내보내고, 텍스처로 가져온 다음, 픽셀이 정사각형으로 유지되도록 픽셀 격자의 정수 배 위치에 세계에 배치하세요.

3D 게임 빌더는 그 텍스처를 항상 카메라를 향하는 평면에 올려, 옆으로 걸어갈 때 얇은 조각으로 변하는 대신 16×16 캐릭터가 어느 각도에서나 16×16 캐릭터로 읽히게 합니다. 충돌, 중력, 따라오는 카메라는 스프라이트와 독립적이므로, 캐릭터 컨트롤러를 건드리지 않고 나중에 그림을 바꿀 수 있습니다. Mini World는 결과를 시험하기 가장 작은 장소입니다. 작은 걸어 다닐 수 있는 공간, 캐릭터 하나, 부딪힐 물체 몇 개뿐입니다. The Cyclops' Island는 더 큰 시험대로, 지형 높이와 시야선 덕분에 스프라이트의 크기가 환경에 비해 맞는지 분명하게 드러납니다.

크기는 대부분의 첫 시도가 어긋나는 지점입니다. 무엇이든 배치하기 전에 변환 비율을 정하세요 — 1픽셀 = 1세계 단위는 16×16 스프라이트에는 너무 작고 128×128에는 너무 큽니다. 캐릭터가 대략 출입구 높이가 되도록 배율을 고르고, 프로젝트의 모든 캐릭터에 그 배율을 유지하세요. 서로 다른 픽셀 대 세계 비율로 만든 등장인물들은 나란히 서면 결코 제대로 보이지 않습니다.

흐림 없이 확대 및 업스케일링

픽셀 아트는 구조상 딱딱한 가장자리를 가집니다. 모든 평활화 필터 — 양선형, 쌍삼차, 란초스 — 는 이웃 픽셀을 평균하는 방식으로 작동하며, 팔레트 색 두 개를 평균하면 팔레트에 없는 세 번째 색이 생깁니다. 그 세 번째 색이 흐림입니다. 나중에 되돌릴 수 있는 렌더링 설정이 아닙니다. 이미지가 한 번 리샘플링되면 원래의 딱딱한 가장자리는 사라집니다.

정수 배로만 확대하세요: 2배, 3배, 4배, 8배. 4배로 키운 16×16 스프라이트는 64×64이며, 모든 원본 픽셀이 깔끔한 4×4 블록이 됩니다. 2.5배에서는 어떤 원본 픽셀은 2픽셀 너비가 되고 다른 것은 3픽셀이 되어, 격자 전체에 눈에 띄는 불균일이 생깁니다 — 어떤 곳은 두껍고 다른 곳은 얇은 외곽선이죠. 이 문제는 사후에 고칠 방법이 없고, 정수 배로 다시 내보내는 수밖에 없습니다.

선명한 스프라이트를 조용히 망치는 설정은 리샘플 필터입니다. 도구마다 보간, 리샘플, 이미지 리샘플, 또는 크기 조절 옆의 부드럽게 체크박스 등으로 부릅니다. 대부분의 편집기와 이미지 뷰어에서 기본값이 평활화 모드이며, 사용할 때마다 이미지를 다시 필터링합니다. 크기를 건드리기 전에 최근접 이웃으로 설정하세요. 같은 규칙이 이미지 편집기 밖에도 적용됩니다. 3D 엔진으로 가져온 텍스처는 축소 및 확대 필터를 최근접으로 설정하고, 픽셀 텍스처는 밉맵을 꺼야 합니다. 그렇지 않으면 카메라가 움직일 때 엔진이 텍스처를 평활화합니다. 웹 페이지에서 이에 해당하는 것은 image-rendering 속성을 pixelated로 설정하는 것입니다 — 그렇지 않으면 브라우저가 32×32 PNG를 너비 96픽셀로 확대하면서 자체 평활화를 적용해 마지막 단계에서 작업을 무효로 만듭니다.

하나 더: 인터페이스가 스프라이트를 퍼센트로 확대하게 두지 마세요. 이미지를 유연한 너비의 100퍼센트로 맞추는 컨테이너는 창에 따라 2.3배나 3.7배가 되고, 스프라이트는 화면마다 다르게 보입니다. 원래 픽셀 크기로 렌더링하고 정수 배로 확대하거나, 표시 크기를 명시적으로 설정하세요.

그것이 속한 세계로 걸어 들어가기

스프라이트는 설 곳이 없는 캐릭터입니다. 마지막 단계는 다른 어디서도 제공하지 않는 것입니다. 방금 만든 시트를 누군가 걸어 다닐 수 있는 세계에 넣으세요 — 작은 섬, 행성, 비 내리는 길모퉁이. 이 사이트의 모든 세계는 하나의 글로 쓴 설명으로 만들어졌고 플레이할 수 있는 페이지로 공개되었습니다.

FAQ