Dự án 2: Bốn kiểu dithering trên khối cầu

Khi bảng màu chỉ có vài tông, ranh giới giữa hai tông là một đường cứng – gọi là banding (sọc dải). Dithering là cách xếp xen kẽ pixel của hai tông ở vùng chuyển để mắt người "trộn" chúng thành một tông ở giữa – giống tranh chấm điểm. Đây là kỹ thuật kinh điển của game 8-bit và 16-bit, nhưng dùng sai sẽ làm hình rối như nhiễu sóng. Bài này đặt bốn kiểu dither cạnh nhau trên cùng một khối cầu để bạn thấy rõ cá tính của từng kiểu.

Hình mẫu

Thời gian ước tính: khoảng 50 phút. Ánh sáng chiếu từ trên – trái. Cả bốn khối có cùng vị trí các dải tông; chỉ cách pixel đan vào nhau ở mép chuyển là khác.

Chuẩn bị

• Canvas: 128 × 32 px (4 ô 32 × 32), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Eraser (Tẩy) Tool (E) Mode Pencil, Elliptical Marquee (Khung chọn) Tool (M) bỏ Anti-alias (Khử răng cưa), Paint Bucket (Thùng sơn) (G) Tolerance 0, Pattern ở EditChỉnh sửa›Define Pattern.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận) trong Photoshop›SettingsCài đặt›GeneralChung, bật ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh và zoom 800%.
• Thiết bị: dithering là đặt từng pixel theo quy luật – chuột làm cực tốt, thậm chí nhanh hơn bút. Với Wacom, XP-Pen, Huion hay iPad + Apple Pencil, hãy tắt lực nhấn và bấm từng điểm thay vì kéo nét, vì kéo nét rất dễ làm hỏng hoa văn xen kẽ.
• File mẫu: "Dải 4 ô 32 × 32" đặt trên cùng, khóa lại. Vòng tròn hồng là mép khối cầu (bán kính 14,5 px, tâm giữa ô).

Các bước

1. Tạo file và lưới: ⌘ Cmd+N 128 × 32 px, Transparent. Gridline Every 32 Pixels, Subdivisions 32, bật Grid (⌘ Cmd+'). Đặt file mẫu lên trên cùng, khóa layer.
2. Hình tròn sạch: layer Ball 1. Elliptical Marquee, bỏ chọn Anti-alias, Style Fixed Size 29 × 29 px, đặt vào giữa ô đầu. Tô #3f5fae bằng ⌥ Option+⌫ Delete. Kiểm tra bằng mắt: mép tròn phải là các bậc thang đều 1-2-3 pixel, không có "gai" lẻ.
3. Viền: giữ vùng chọn, EditChỉnh sửa›StrokeViền Width 1 px, Location Outside, Color #1b1a24. Vì Anti-alias đã tắt, viền chỉ có đúng một màu.
4. Nhân ra 4 khối: ⌘ Cmd+J ba lần, dùng Move Tool (Công cụ Di chuyển) (V) và phím mũi tên giữ ⇧ Shift (mỗi lần 10 px) để dời từng bản sang ô kế tiếp, tổng cộng 32, 64, 96 px. Đặt tên Checker, Ordered, Gradient (Dải màu chuyển), Texture.
5. Chia 4 dải tông (bản nháp có banding): trên khối đầu, bật Lock Transparent Pixels (Khóa vùng trong suốt) (biểu tượng ô vuông caro trong bảng Layers). Dùng Pencil vẽ các đường cong đồng tâm lệch về góc trên – trái: điểm sáng #bff0ff nhỏ ở trên – trái, vùng #59a6e0, vùng nền, vùng tối #2c2f5e hình lưỡi liềm ở dưới – phải. Copy lớp phân vùng này sang 3 khối kia để cả bốn có dải giống hệt nhau.
6. Nhận diện banding: zoom về 100% (⌘ Cmd+1). Bạn sẽ thấy 4 vòng màu như vân gỗ – đó là banding. Mỗi khối sau đây chỉ sửa mép của các vòng này, không động vào phần lõi.
7. Checker (bàn cờ): trên khối 1, ở mỗi mép chuyển tông, tô một dải rộng 2–3 pixel kiểu bàn cờ: pixel tông trên xen pixel tông dưới như ô cờ vua. Đây là kiểu dễ nhất và "8-bit" nhất, trông như một tông thứ năm ở giữa.
8. Ordered (ma trận Bayer 4 × 4): trên khối 2, mép chuyển rộng hơn (4–6 pixel) và mật độ thay đổi dần: gần tông tối thì chỉ 1/4 số pixel là tông sáng, giữa là bàn cờ 1/2, gần tông sáng là 3/4. Mẹo nhanh: tạo một ô 4 × 4 hoa văn trên file riêng, EditChỉnh sửa›Define Pattern, rồi tô bằng EditChỉnh sửa›FillTô đầy / Độ phủ bên trong Contents Pattern trong vùng chọn hình vành khăn.
9. Gradient (nấc 25 – 50 – 75%): trên khối 3, mỗi mép chuyển dùng đúng ba hàng nấc rõ ràng: một hàng 25% (cứ 4 pixel có 1), một hàng 50% (bàn cờ), một hàng 75%. Kết quả trông như dải chuyển màu mềm của máy in cổ – hợp với bầu trời và ánh sáng.
10. Texture (nhiễu hạt): trên khối 4, đặt pixel tông kề bên thành cụm 1–2 pixel không theo quy luật dọc mép chuyển, có chỗ lấn sâu, chỗ lấn ít. Khối cầu thành như đá sần hay quả cam – dither ở đây mô tả chất liệu, không chỉ làm mềm.
11. Dọn pixel mồ côi: zoom 100% và 400% luân phiên. Xóa pixel đơn lẻ nằm cô độc giữa vùng một màu (trừ khối Texture) và pixel dither chạm vào viền – chúng làm viền trông lởm chởm.
12. Đếm màu: ImageHình ảnh›DuplicateNhân bản → ImageHình ảnh›ModeChế độ (màu)›Indexed Color, Palette Exact: phải đúng 5 màu. Nếu nhiều hơn, có pixel mờ do Anti-alias – tìm bằng Magic Wand (Đũa thần) Tolerance 0, bỏ Contiguous.
13. Xuất PNG: ẩn layer mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Scale 100% → dither_spheres.png đúng 128 × 32 px. Bản khoe: Scale 400% với Resample (Lấy mẫu lại) Nearest Neighbor.
14. So sánh trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 32, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None. Sprite Editor › Slice › Grid By Cell Size 32 × 32 › Apply. Đặt 4 khối cạnh nhau, thêm component Pixel Perfect Camera vào Main Camera (Assets Pixels Per Unit 32) rồi xem ở cửa sổ Game: dither chỉ đẹp khi mỗi pixel ảnh hiện đúng bằng số nguyên pixel màn hình.

Nâng cao (tùy chọn)

• Dither có hướng: thay bàn cờ bằng các vạch chéo 2 pixel theo hướng sáng – kiểu hay gặp trên kim loại và tóc.
• Hai dải dither nhau: trộn mép giữa vùng xanh dương và một dải cam (bóng hắt) để tạo ánh phản xạ lên khối cầu mà không thêm màu mới.
• Thử dither tự động: trên bản sao, ImageHình ảnh›ModeChế độ (màu)›Indexed Color với Palette Custom (5 màu của bạn) và Dither Pattern hoặc Diffusion, rồi so với bản vẽ tay – bạn sẽ thấy vì sao họa sĩ pixel vẫn đặt tay từng điểm.