HOW TO USE
사용 방법
사진 한 장으로 번호 픽셀 도안을 만들고, 칠해서, 이미지로 저장하기까지의 과정을 순서대로 정리했습니다. 처음이라면 위에서부터 따라 해 보세요.
한눈에 보기: 사진 넣기 → 칸 수와 색 개수 정하기 → 도안 만들기 → 팔레트에서 색 고르기 → 같은 번호 칸 칠하기 → 완성 후 PNG로 저장
1. 사진 넣기
도안 만들기 화면 위쪽의 사진 넣기 칸에 사진을 넣는 방법은 세 가지입니다.
- 파일 선택 버튼을 눌러 사진 고르기
- 사진 파일을 사진 넣기 칸 위로 끌어다 놓기
- 다른 곳에서 복사한 이미지를 화면에서 Ctrl+V로 붙여넣기
JPG, PNG, WEBP처럼 브라우저가 열 수 있는 이미지면 됩니다. 아이폰 기본 형식인 HEIC는 브라우저에 따라 열리지 않을 수 있으니, 안 되면 JPG로 바꿔서 넣어 주세요. 배경이 투명한 PNG를 넣으면 투명한 부분은 칠하지 않는 빈칸이 됩니다.
처음 사진을 넣으면 사진에 맞게 가로 40칸, 12색으로 바로 도안이 만들어집니다. 사진은 서버로 올라가지 않고 브라우저 안에서만 처리됩니다.
2. 칸 수와 색 개수 정하기
- 가로 칸 수(12~100칸): 도안의 가로 칸 개수입니다. 세로 칸 수는 사진 비율에 맞춰 자동으로 정해집니다. 칸이 많을수록 그림이 자세해지지만 칠할 칸도 많아집니다.
- 색 개수(3~24색): 팔레트에 들어갈 색의 개수입니다. 많을수록 사진 색에 가까워지고, 적을수록 단순하고 만화 같은 느낌이 됩니다.
- 테두리 배경색 비우기: 사진 가장자리에 가장 많이 닿아 있는 색과 이어진 영역을 빈칸으로 만듭니다. 단색 배경 앞에서 찍은 사진에서 주인공만 남길 때 좋습니다.
값을 바꾼 뒤 도안 만들기를 누르면 새 도안이 만들어집니다. 이미 칠하던 그림이 있으면 버튼이 주황색으로 바뀌고 한 번 더 눌러야 새로 시작하니, 실수로 진행 상황을 잃을 걱정은 없습니다. 어떤 값이 좋은지는 도안 팁에 정리해 두었습니다.
사진 다듬기
사진 넣기 칸의 사진 다듬기를 누르면 도안으로 바꾸기 전에 사진을 손볼 수 있습니다.
- 자르기: 사진 위를 끌어 남길 영역을 정합니다. 상자 안쪽을 끌면 옮겨지고, 모서리를 끌면 크기가 바뀝니다. 자유, 1:1, 4:3, 3:4 비율 중에서 고를 수 있습니다.
- 밝기·대비·채도: −50부터 +50까지 조절합니다. 어두운 사진은 밝기를, 흐릿한 사진은 대비를, 색이 바랜 사진은 채도를 올려 보세요.
아직 칠하기 전이라면 조절할 때마다 도안이 바로 다시 만들어집니다. 칠하던 그림이 있으면 자동으로 바꾸지 않고, 도안 만들기를 눌렀을 때 적용됩니다. 도안 모음에서 불러온 도안처럼 원본 사진이 없는 경우에는 쓸 수 없습니다.
3. 색 고르고 칠하기
오른쪽 팔레트에서 색을 누르면 그 번호의 칸들이 판 위에서 파랗게 강조됩니다. 가장 많이 쓰인 색이 1번이라, 1번부터 칠하면 큰 면이 먼저 채워져 그림이 빨리 드러납니다. 팔레트의 각 색에는 남은 칸 수가 표시되고, 다 칠하면 '완료'로 바뀝니다.
도구
- 칠하기 P: 칸을 누르거나 끌어서 여러 칸을 이어 칠합니다. 고른 색과 번호가 같은 칸에만 칠해지고, 끌다가 지나가는 다른 번호 칸은 건너뜁니다.
- 영역 채우기 F: 한 칸을 누르면 그 칸과 위아래·좌우로 이어진 같은 번호 칸을 한 번에 칠합니다. 넓은 면을 칠할 때 편합니다.
- 이동 H: 판을 끌어서 화면을 옮깁니다. 휴대폰에서는 손가락으로 끌면 칠해지므로, 화면을 옮길 때 이 도구를 쓰세요.
- 되돌리기 Ctrl+Z: 마지막으로 칠한 한 번의 동작을 취소합니다. 최근 200번까지 되돌릴 수 있습니다.
- 완성본: 누르면 완성된 모습을 미리 보여 줍니다. 다시 누르거나 판을 칠하면 돌아옵니다.
번호가 다른 칸을 누르면 "이 칸은 N번이에요" 안내가 나오고 칠해지지 않습니다. 틀린 색이 칠해지는 일이 없어서 지우개는 따로 없습니다.
확대와 단축키
- 도구 막대의 −, +로 확대·축소하고, 가운데 숫자를 누르면 화면에 맞춥니다. Ctrl+마우스 휠로도 확대할 수 있습니다.
- 칸이 작으면 번호가 보이지 않습니다. 칸 크기가 11px 이상이 되도록 확대하면 번호가 나타납니다.
- 숫자 키 1~9로 1~9번 색을, 0으로 10번 색을 고릅니다. [ ]로 이전·다음 색으로 넘어갑니다.
4. 진행 상황 저장
칠한 내용은 따로 저장 버튼을 누르지 않아도 이 브라우저에 자동으로 저장됩니다. 창을 닫았다가 다시 열면 이어서 칠할 수 있습니다. 다만 한 번에 하나의 도안만 저장되고, 다른 기기나 다른 브라우저에서는 이어지지 않습니다. 브라우저의 사이트 데이터를 지우면 함께 지워집니다.
5. 완성하고 저장하기
모든 칸을 칠하면 완성 창이 열립니다. 저장할 수 있는 이미지는 두 가지입니다.
- PNG로 저장: 완성한 픽셀 아트입니다. 칸 하나를 8px, 16px, 32px 중 어떤 크기로 저장할지 고를 수 있고, 선택 옆에 실제 이미지 크기가 표시됩니다. 예를 들어 40×53칸 그림을 칸당 16px로 저장하면 640×848px이 됩니다. 칠하지 않는 빈칸은 투명하게 저장됩니다.
- 번호 도안 저장: 색 없이 흰 칸에 번호만 적힌 도안입니다. 가장자리에 5칸마다 눈금이, 10칸마다 굵은 선이 있고, 아래에 번호별 색과 칸 수가 정리된 색상표가 붙습니다. 출력해서 직접 칠하거나 비즈·십자수 도안으로 쓸 때 좋습니다.
완성 전이라도 팔레트 아래 지금 그림 저장으로 칠한 데까지 저장할 수 있고, 번호 도안 저장은 언제든 쓸 수 있습니다. 저장 버튼을 누르면 이미지가 다운로드 폴더에 저장됩니다.
휴대폰에서 쓸 때
- 팔레트는 화면 아래쪽에 붙어 있고, 옆으로 밀어서 다른 색을 볼 수 있습니다.
- 판 위를 손가락으로 끌면 칠해집니다. 화면을 옮길 때는 이동 도구로 바꾸세요.
- 칸이 작아 누르기 어렵다면 +로 확대한 뒤 칠하세요. 넓은 면은 영역 채우기가 훨씬 빠릅니다.
더 궁금한 점은 자주 묻는 질문을 보시거나 문의로 알려 주세요. · 최종 수정일: 2026년 10월 14일
HOW TO USE
How to Use
Here is the whole process, from adding a photo to filling the numbered cells and saving your pixel art. If this is your first time, follow along from the top.
At a glance: add a photo → choose columns and colors → make the pattern → pick a color from the palette → fill the cells with the same number → save as PNG when done
1. Add a photo
On the Make a pattern screen, there are three ways to put a photo into the Add a photo box.
- Click Choose file and pick a photo
- Drag a photo file onto the Add a photo box
- Copy an image somewhere else and paste it on the page with Ctrl+V
Any image your browser can open works, such as JPG, PNG or WEBP. HEIC, the iPhone's default format, may not open in some browsers; if it fails, convert it to JPG first. If you add a PNG with a transparent background, the transparent parts become empty cells that you do not paint.
When you add your first photo, a pattern is made right away at 40 columns and 12 colors. The photo is processed only inside your browser and is never uploaded.
2. Choose columns and colors
- Columns (12–100): the number of cells across. The number of rows follows the photo's shape automatically. More columns means more detail, and more cells to paint.
- Colors (3–24): the number of colors in the palette. More colors look closer to the photo; fewer colors look simpler and more cartoon-like.
- Clear border background: empties the connected area of the color that touches the photo's edges the most. Useful for keeping only the subject of a photo taken against a plain background.
After changing the values, click Make pattern to build a new pattern. If you are already painting, the button turns orange and needs a second click before it starts over, so you will not lose progress by accident. For good values, see Pattern tips.
Adjust photo
Click Adjust photo in the Add a photo box to touch up the photo before it becomes a pattern.
- Crop: drag on the photo to choose the area to keep. Drag inside the box to move it, or drag a corner to resize. Choose a Free, 1:1, 4:3 or 3:4 ratio.
- Brightness, contrast, saturation: adjust from −50 to +50. Raise brightness for dark photos, contrast for flat ones, and saturation for faded colors.
Before you start painting, the pattern updates as you adjust. If you are already painting, nothing changes automatically; the adjustments apply when you click Make pattern. It is not available for patterns opened from Free patterns, which have no original photo.
3. Pick a color and paint
Click a color in the Palette and all cells with that number are highlighted in blue. Color 1 is the most used color, so starting there fills the largest areas first and the picture shows up quickly. Each color shows how many cells are left and changes to "Done" when finished.
Tools
- Paint P: click a cell, or drag to paint several in a row. Only cells whose number matches the selected color are painted; other numbers you drag across are skipped.
- Fill area F: click one cell to paint it together with every same-number cell connected to it up, down, left or right. Handy for large areas.
- Move H: drag the board to move the view. On a phone, dragging with a finger paints, so switch to this tool to scroll.
- Undo Ctrl+Z: cancels your last painting action. Up to the last 200 actions can be undone.
- Preview: shows the finished picture. Click it again, or start painting, to go back.
If you click a cell with a different number, a message says "This cell is number N" and nothing is painted. Wrong colors can never be painted, so there is no eraser.
Zoom and shortcuts
- Use − and + on the toolbar to zoom, and click the number between them to fit the screen. Ctrl+mouse wheel also zooms.
- Numbers are hidden when cells are small. Zoom in until cells are at least 11px and the numbers appear.
- Number keys 1–9 pick colors 1–9 and 0 picks color 10. [ and ] move to the previous or next color.
4. Saving your progress
Your painting is saved in this browser automatically, with no save button needed. Close the tab and come back later to keep going. Only one pattern is kept at a time, and progress does not carry over to another device or browser. Clearing the browser's site data also removes it.
5. Finish and save
When every cell is filled, the completion window opens. You can save two kinds of images.
- Save PNG: your finished pixel art. Choose 8px, 16px or 32px per cell, and the actual image size is shown next to the choice. For example, a 40×53 pattern at 16px per cell becomes 640×848px. Empty cells are saved as transparent.
- Save number chart: a blank chart with only numbers in white cells. It has ruler marks every 5 cells, bold lines every 10, and a legend listing each number's color and cell count. Great for printing and coloring by hand, or as a bead or cross-stitch pattern.
Before you finish, Save current art under the palette saves what you have painted so far, and Save number chart works at any time. Saved images go to your downloads folder.
On a phone
- The palette sits at the bottom of the screen; swipe it sideways to see more colors.
- Dragging a finger on the board paints. Switch to the Move tool to scroll the view.
- If cells are too small to tap, zoom in with + first. For large areas, Fill area is much faster.
More questions? See the FAQ or let me know via Contact. · Last updated: October 14, 2026