Vẽ pixel art online: hướng dẫn từng bước từ lưới 16 × 16
Mục lục
Cách vẽ pixel art online bằng công cụ Vẽ pixel art của ColorME: chọn lưới 8 đến 128 ô, bốn bảng màu, Bút, Tẩy, Đổ màu, Hút màu, vẽ đối xứng, tải PNG nền trong suốt phóng to 1× đến 32×. Bài vẽ thật sáu hình khi chưa đăng nhập, đo từng file tải về và nói rõ việc công cụ chưa làm được.
Trả lời nhanh: để vẽ pixel art online, bạn mở công cụ Vẽ pixel art của ColorME, chọn lưới (người mới nên bắt đầu ở 16 × 16), chọn một bảng màu ít màu, vẽ viền bằng Bút, đổ màu phẳng, thêm sáng tối rồi bấm Tải PNG. Trang công cụ ghi: "Công cụ miễn phí, không cần đăng nhập, không giới hạn số tranh và không chèn chữ quảng cáo vào ảnh tải về." Mình vẽ cả sáu hình trong bài khi chưa đăng nhập.
| Mục | Mình thấy trên công cụ (14/10/2026) |
|---|---|
| Lưới | 8, 16, 32, 64, 128 ô, hoặc gõ số ngang × dọc tuỳ ý, tối đa 128 × 128 |
| Công cụ vẽ | Bút (B), Tẩy (E), Đổ màu (G), Hút màu (I) |
| Bảng màu | Cổ điển 16, Dịu 16, 4 màu xanh, Đen trắng (8 mức xám), thêm màu riêng bằng ô dấu cộng |
| File tải về | PNG nền trong suốt, phóng to 1× đến 32×; lưới 16 × 16 ở chế độ Tự động cho file 512 × 512 px |
| Đăng nhập | Không cần. Mình tải mọi file khi chưa đăng nhập |
Sáu hình mình vẽ bằng công cụ Vẽ pixel art. Hình là file PNG tải về thật; bảng trình bày do ColorME dựng.
Cách làm: mình thiết kế sáu hình trước dưới dạng bản đồ ô (ô nào màu nào), rồi cho một đoạn mã bấm và kéo đúng từng ô trên lưới của công cụ, giống thao tác chuột. Các file PNG trong bài là file công cụ đưa ra. Cả sáu hình là thiết kế riêng cho bài này.
Bài này chỉ nói về cách vẽ. Muốn hiểu pixel art là gì và các phong cách của nó, hãy đọc bài Pixel art là gì trước.
Cách vẽ pixel art online từng bước
Bước 1: mở công cụ và xem hình mẫu
Mở colorme.vn/tools/ve-pixel-art. Lưới không trống: có sẵn một trái tim 16 × 16, và dòng chữ dưới lưới ghi "16 × 16 ô · 3 màu · hình mẫu, vẽ đè lên hoặc bấm Xoá hết trong Tuỳ chỉnh".
Bước 1: công cụ lúc vừa mở, với trái tim mẫu 16 × 16. Ảnh chụp màn hình thật.
Bước 2: chọn lưới và bảng màu trong Tuỳ chỉnh
Bấm Tuỳ chỉnh để mở bảng lựa chọn. Ở đây có kích thước lưới, bảng màu, mức phóng to khi tải, hai ô đánh dấu (Hiện đường lưới, Vẽ đối xứng trái phải) và hai nút Canh giữa hình, Xoá hết. Bảng này đẩy lưới xuống dưới, nên chọn xong bạn bấm Tuỳ chỉnh lần nữa để gập lại.
Với hình đầu tiên, mình bấm Xoá hết, giữ lưới 16 và bảng Cổ điển 16. Lưu ý: Xoá hết không hỏi lại. Mình thử: bấm Hoàn tác ngay sau đó thì hình quay về.
Bước 2: bảng Tuỳ chỉnh với kích thước lưới, bốn bảng màu, mức phóng to khi tải và nút Canh giữa hình. Ảnh chụp màn hình thật.
Bước 3: vẽ viền bằng Bút
Chọn một màu tối rồi vẽ đường bao của hình. Mình dùng xanh đen thay cho đen tuyền để lọ thuốc trông dịu hơn. Bấm một lần tô một ô; giữ và kéo thì công cụ nối các ô thành nét liền, kể cả khi kéo chéo. Viền của lọ thuốc dùng 42 ô, một màu.
Bước 3: viền lọ thuốc, 42 ô, một màu. Dòng dưới lưới đếm số màu đang dùng. Ảnh chụp màn hình thật.
Bước 4: đổ màu phẳng
Bấm Đổ màu (phím G), chọn màu rồi bấm vào trong vùng đã khép kín. Công cụ tô mọi ô cùng màu nối liền với ô bạn bấm theo bốn hướng trên, dưới, trái, phải, nên viền chỉ cần kín theo bốn hướng đó. Mình thử bấm ra ngoài hình: cả 224 ô nền trống bị tô hết, phải Hoàn tác. Vì vậy hãy khép viền trước khi đổ.
Bước 4: nút bần, thuỷ tinh và nước thuốc ở dạng màu phẳng, 4 màu. Ảnh chụp màn hình thật.
Bước 5: thêm sáng tối, rồi chọn mức phóng to và tải PNG
Mình quy ước ánh sáng đến từ trên bên trái. Vậy thì mép trái của thuỷ tinh có một dải kem, mặt nước thuốc có một hàng hồng, còn mép phải và đáy chuyển sang tím sẫm. Hình cuối dùng 9 màu trên 124 ô.
Xong thì bấm Tải PNG. Ở chế độ Tự động, hình 16 × 16 ra file pixel-art-16x16-32x.png, 512 × 512 px. Nếu lưới còn trống, công cụ không tạo file mà báo "Lưới đang trống, bạn vẽ vài ô rồi tải nhé."
Bước 5: hình hoàn chỉnh và mục Phóng to khi tải; góc phải của mục này ghi kích thước file sẽ nhận. Ảnh chụp màn hình thật.
Ba lượt vẽ của lọ thuốc và của cây nấm. Mỗi ô là một file PNG mình tải về ở đúng lượt đó; bảng do ColorME dựng.
Công cụ và phím tắt
Mình thử từng phím trên trang. Chữ hoa hay chữ thường đều nhận; phím tắt không chạy khi con trỏ đang nằm trong ô gõ số của Tuỳ chỉnh.
| Công cụ | Phím | Mình thấy nó làm gì |
|---|---|---|
| Bút | B | Bấm tô một ô, kéo để vẽ nét liền |
| Tẩy | E | Đưa ô về trong suốt |
| Đổ màu | G | Tô cả vùng cùng màu nối liền theo bốn hướng |
| Hút màu | I | Lấy màu của ô được bấm, rồi tự về Bút; bấm ô trống thì công cụ chuyển sang Tẩy, màu đang chọn giữ nguyên |
| Hoàn tác | Ctrl+Z (Cmd+Z cũng chạy) | Lùi một bước, kể cả bước đổi kích thước lưới và Xoá hết |
| Làm lại | Ctrl+Y hoặc Ctrl+Shift+Z | Tiến lại một bước vừa lùi |
Vẽ đối xứng: nửa hình còn lại tự hiện
Với hình cân đối như cây nấm, khuôn mặt hay phi thuyền, mở Tuỳ chỉnh và đánh dấu Vẽ đối xứng trái phải. Từ lúc đó, mỗi ô bạn tô ở nửa trái được tô thêm ở vị trí đối diện bên phải. Mình chỉ vẽ viền ở 8 cột bên trái, và công cụ cho ra cả cái nấm. Tẩy cũng đối xứng: xoá một ô bên trái thì ô bên phải mất theo.
Vẽ đối xứng đang bật: mình chỉ vẽ viền ở nửa trái, nửa phải do công cụ tô. Ảnh chụp màn hình thật.
Sau khi có viền, màu nền và các đốm trắng, mình tắt đối xứng rồi mới đánh bóng: hồng ở góc trên trái của mũ nấm, tím sẫm ở mép phải. Ánh sáng chỉ đến từ một phía, nên phần sáng tối không được đối xứng.
Cây nấm hoàn chỉnh, 6 màu. Phần bóng được vẽ sau khi tắt đối xứng. Ảnh chụp màn hình thật.
Bảng màu: vì sao ít màu lại dễ đẹp
Công cụ có bốn bảng: Cổ điển 16 (16 màu tươi, tương phản mạnh), Dịu 16 (16 màu trầm hơn, có sẵn các bậc sáng tối của xanh dương và cam), 4 màu xanh và Đen trắng (8 mức xám). Màu trong một bảng nhỏ đã được chọn để đi với nhau, và bạn buộc phải tả khối bằng vài bậc sáng tối.
Lọ thuốc, cây nấm và đồng xu dùng Cổ điển 16. Mèo cam và bát phở dùng Dịu 16; bát phở cần tới 13 màu. Hồ đêm dùng 4 màu xanh.
Với 4 màu xanh, bạn có bốn bậc tách nhau rõ: tối, vừa, sáng và rất sáng; màu sáng nhất mình đọc được là #d5e89b. Để có thêm một bậc giữa tối và vừa, mình xen kẽ ô tối và ô vừa theo kiểu bàn cờ cho dãy núi xa. Kỹ thuật này gọi là dithering.
Hồ đêm 32 × 32 với bảng 4 màu xanh. Dãy núi xa là các ô tối và vừa xen kẽ nhau. Ảnh chụp màn hình thật.
Cần một màu ngoài bảng thì bấm ô dấu cộng ở cuối hàng màu và chọn màu. Màu mới nằm sau các màu của bảng, và vẫn ở đó khi mình đổi sang bảng khác. Đổi bảng màu không làm đổi màu những ô đã vẽ.
Nên chọn lưới bao nhiêu ô?
Trang công cụ khuyên: "Hãy bắt đầu với 16 × 16: đủ để vẽ một nhân vật, trái tim hay món đồ nhỏ mà không bị ngợp." Bảng dưới đây là cách dùng mà người vẽ pixel art hay chọn, không phải một tiêu chuẩn bắt buộc.
| Lưới | Số ô | Thường dùng cho | Hình trong bài |
|---|---|---|---|
| 8 × 8 | 64 | Icon rất nhỏ, vật phẩm tối giản, luyện đọc hình | Đồng xu, 4 màu |
| 16 × 16 | 256 | Vật phẩm, icon, nhân vật nhỏ | Lọ thuốc, cây nấm, mèo cam |
| 32 × 32 | 1.024 | Nhân vật có chi tiết, món ăn, một ô cảnh | Bát phở, hồ đêm |
| 64 × 64 | 4.096 | Chân dung, cảnh nhỏ | Mình chỉ thử xuất file |
| 128 × 128 | 16.384 | Minh hoạ nhiều chi tiết | Mình chỉ thử xuất file |
Năm cỡ lưới có sẵn ở cùng một tỉ lệ. Hai ô lớn là file thật khi mình đưa lọ thuốc 16 × 16 sang lưới 64 và 128. Bảng do ColorME dựng.
Phần gõ số: 24 × 16 cho lưới chữ nhật. Gõ 200 thì công cụ đưa về 128, gõ 12,6 thì thành 13, để trống hoặc gõ 0 thì giữ số cũ. Lưới nhỏ nhất là 1 × 1.
Đổi lưới giữa chừng: mình thử một hình 70 ô trên lưới 16, sang lưới 8 thì còn 34 ô ở góc trên trái, bấm Hoàn tác thì đủ 70 ô quay lại. Sang lưới to hơn thì hình nằm ở góc trên trái như trong ảnh. Muốn đưa vào giữa, bấm Canh giữa hình trong Tuỳ chỉnh: mình thử với 3 ô ở góc lưới 32, cả ba dời vào giữa, bấm Hoàn tác thì về chỗ cũ.
Tải PNG: mức phóng to nào ra bao nhiêu pixel?
Một hình 16 × 16 đúng nghĩa chỉ có 16 pixel mỗi chiều, và để phần mềm khác kéo to thì dễ nhoè. Công cụ nhân mỗi ô thành một khối vuông nguyên, nên bạn chọn sẵn cỡ cần dùng ở mục Phóng to khi tải.
Sáu file thật của cùng một lọ thuốc, từ 1× đến 32×, và bảng mức Tự động theo từng lưới. Bảng do ColorME dựng.
| Lưới | Mức | Tên file | Kích thước đo được |
|---|---|---|---|
| 16 × 16 | 1× | pixel-art-16x16-1x.png | 16 × 16 px |
| 16 × 16 | 16× | pixel-art-16x16-16x.png | 256 × 256 px |
| 16 × 16 | 32× (Tự động) | pixel-art-16x16-32x.png | 512 × 512 px |
| 8 × 8 | Tự động = 32× | pixel-art-8x8-32x.png | 256 × 256 px |
| 32 × 32 | Tự động = 32× | pixel-art-32x32-32x.png | 1024 × 1024 px |
| 64 × 64 | Tự động = 16× | pixel-art-64x64-16x.png | 1024 × 1024 px |
| 128 × 128 | Tự động = 8× | pixel-art-128x128-8x.png | 1024 × 1024 px |
| 128 × 128 | 32× | pixel-art-128x128-32x.png | 4096 × 4096 px |
| 24 × 16 | Tự động = 32× | pixel-art-24x16-32x.png | 768 × 512 px |
Mình đo từng file trong bảng bằng lệnh sips trên máy Mac, và cả 9 đều khớp (ba mức 2×, 4×, 8× có trong ảnh trên và cũng khớp) với phép nhân số ô × mức phóng to. Tự động chọn mức lớn nhất mà cạnh dài không quá 1024 px. File rất nhẹ: lọ thuốc 512 × 512 px nặng khoảng 7,6 KB, bát phở 1024 × 1024 px khoảng 27 KB.
Đăng mạng xã hội hay chèn vào slide thì để Tự động. Đưa vào game hoặc ghép sprite sheet thì lấy 1×.
Nền có thật sự trong suốt, khối có thật sự nét?
Mình mở từng file và đọc từng pixel thay vì nhìn bằng mắt. Ở lọ thuốc, 132 ô không tô có độ trong suốt bằng 0, tức trong suốt hoàn toàn; không có pixel nào nửa trong nửa đục. Mỗi ô của lưới thành một khối vuông đúng một màu, mép không bị làm mịn, và mã màu trong file trùng với mã màu của bảng. Đường lưới chỉ hiện trên màn hình, không đi vào file.
Hồ đêm thì không có ô nào trong suốt, vì mình tô kín cả 1.024 ô. Muốn có nền màu, bạn tự tô nền.
Cùng một file PNG của mèo cam đặt trên bốn nền. Ô caro bên trái là cách báo vùng trong suốt. Bảng do ColorME dựng.
Bản nháp và việc mở lại trang
Mình vẽ xong lọ thuốc, tải lại trang, và hình vẫn nằm đó: cùng lưới, cùng 9 màu, cùng từng ô. Có một điều khác: nút Hoàn tác mờ đi, tức các bước lùi không được giữ qua lần tải lại. Sau khi bấm Xoá hết rồi mở lại trang, mình thấy trái tim mẫu quay về.
Về việc tranh được giữ ở đâu, mình dẫn nguyên lời trang công cụ: "Tranh được lưu nháp ngay trên trình duyệt của bạn, mở lại trang là vẽ tiếp được. Tranh không được gửi lên máy chủ; ColorME chỉ ghi nhận lượt dùng kèm kích thước lưới và số màu. Xoá dữ liệu trình duyệt hoặc dùng chế độ ẩn danh thì bản nháp sẽ mất, nên hãy tải PNG khi vẽ xong."
Mình chỉ thấy một bản nháp được giữ: bắt đầu hình mới là hình cũ bị thay, nên hãy tải PNG trước khi Xoá hết.
Vẽ trên điện thoại
Mình mở công cụ ở khung rộng 390 px (giả lập điện thoại trên máy tính). Trang không trượt ngang, thanh công cụ và bảng màu xuống thành hai hàng, mỗi ô của lưới 16 × 16 rộng 22 px. Nét vẽ bằng sự kiện chạm được nhận. Mình chưa thử bằng ngón tay trên điện thoại thật. Ở khung này, bốn nút công cụ đo được 46 × 40 px, mỗi ô màu 36 × 36 px.
Trang công cụ viết rằng từ lưới 64 ô trở lên thì nên vẽ bằng máy tính hoặc máy tính bảng.
Công cụ ở khung rộng 390 px, mở lại bản nháp mèo cam vừa vẽ trên máy tính. Ảnh chụp màn hình thật (giả lập điện thoại).
Những việc công cụ chưa làm được
- Chỉ một hình tĩnh. Không có nhiều khung hình, không xuất GIF. Trang công cụ gợi ý tải từng hình ở mức 1× rồi ghép bằng công cụ Cắt & ghép sprite sheet; mình chưa thử bước ghép đó trong bài này.
- Không có layer. Viền, màu và bóng nằm chung một lớp.
- Không nhập ảnh. Muốn biến một tấm ảnh thành pixel art thì dùng công cụ Pixel art & dithering, có hướng dẫn ở bài chuyển ảnh thành pixel art.
- Không chọn vùng, không kéo dời từng phần (chỉ có Canh giữa hình cho cả hình), không có công cụ đường thẳng hay hình khối.
- Chỉ xuất PNG. Không có JPG, SVG hay GIF, không có lựa chọn màu nền khi xuất.
- Tối đa 128 × 128 ô và một bản nháp mỗi trình duyệt.
Công cụ hợp với việc luyện bảng màu và làm nhanh một icon, một vật phẩm hay một avatar; hoạt hình nhiều khung thì chưa.
Bốn lỗi người mới hay gặp
- Viền chỗ dày chỗ mỏng. Giữ viền đúng một ô.
- Quá nhiều màu. Nhìn dòng đếm màu dưới lưới; hình 16 × 16 hiếm khi cần quá 9 màu.
- Tô tối đều quanh mép. Hình sẽ phẳng như cái gối. Chọn một hướng sáng và giữ nó.
- Chọn lưới quá to. Lưới 64 có số ô gấp 16 lần lưới 16.
Câu hỏi thường gặp
Hình 16 × 16 tải về có dùng làm favicon được không?
Kích thước thì hợp: 16 × 16 px là một cỡ favicon quen thuộc. Công cụ này chỉ cho file PNG, nên để có đủ bộ ICO và các cỡ icon khác, bạn đưa file PNG sang công cụ Tạo favicon & icon app. Mình chưa thử bước đó với các hình trong bài.
Vẽ sai nhiều bước thì quay lại được bao xa?
Mình thử vẽ 130 nét rồi bấm Hoàn tác liên tục: lùi được đúng 100 bước, các nét cũ hơn thì ở lại. Hoàn tác đi qua được cả lần đổi kích thước lưới và Xoá hết. Các bước lùi mất khi tải lại trang.
Tóm lại
Cả sáu hình đi theo một trình tự: lưới và bảng màu, viền, màu phẳng, sáng tối, tải PNG. Mở công cụ Vẽ pixel art, xoá trái tim mẫu và thử một lọ thuốc 16 × 16 của riêng bạn.
