Dự án 1: Dải màu ramp 5 tông có hue shifting
Tự tay xây 5 dải màu (ramp), mỗi dải 5 tông từ tối tới sáng, trong đó tông tối ngả về tím – xanh còn tông sáng ngả về vàng – cam; kiểm tra độ sáng bằng ảnh xám rồi tô thử một cây nấm pixel chỉ bằng 25 màu đó trên canvas 160 × 80 px.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Trong pixel art, bạn không có hàng triệu màu để "đánh bóng" như vẽ tranh kỹ thuật số. Mỗi vật được tô bằng một dải màu (ramp): vài tông cùng họ xếp từ tối tới sáng. Người mới thường làm dải bằng cách giữ nguyên màu và chỉ kéo độ sáng lên xuống – kết quả trông bệt và "bẩn". Họa sĩ pixel chuyên nghiệp dùng hue shifting: càng tối thì sắc độ (Hue) càng xoay về phía tím – xanh (lạnh), càng sáng thì xoay về phía vàng – cam (ấm), giống ánh nắng ấm và bóng râm lạnh ngoài đời. Dự án này là nền móng cho cả chặng: mọi dự án sau đều bắt đầu bằng việc dựng dải màu.
Hình mẫu
Thời gian ước tính: khoảng 45 phút. Hãy nhìn dải đỏ từ trái sang phải: tím mận → đỏ rượu → đỏ → cam → kem cam. Độ sáng tăng đều, còn sắc độ "trượt" dần từ tím sang vàng – đó là hue shifting.
Chuẩn bị
- Canvas (khung vẽ): 160 × 80 px, Resolution (Độ phân giải) 72, RGB Color 8 bit, Background Contents: Transparent. Nửa trái (80 × 80) là bảng 25 ô màu 16 × 16; nửa phải là chỗ vẽ vật mẫu.
- Công cụ chính: Pencil (Bút chì) Tool cỡ 1 px (nhấn Shift+B cho tới khi ra biểu tượng bút chì), Rectangular Marquee (Khung chọn) Tool (M) với Style: Fixed Size 16 × 16 px, Paint Bucket (Thùng sơn) Tool (G) Tolerance 0 và bỏ chọn Anti-alias (Khử răng cưa), Eyedropper (Ống hút màu) Tool (I) Sample Size: Point Sample.
- Phóng to không mờ: › Image Interpolation: Nearest Neighbor (Điểm lân cận) (preserve hard edges). Bật để thấy lưới từng pixel khi zoom từ 600% trở lên.
- Thiết bị: bài này chủ yếu là chọn màu và tô ô, nên chuột là công cụ lý tưởng – mỗi cú bấm ra đúng 1 pixel, không run tay. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (dùng làm màn hình vẽ cho Photoshop trên máy tính qua Sidecar hoặc Astropad) vẫn dùng tốt: chỉ cần tắt lực nhấn ở Brush Settings (Cài đặt cọ) › Shape Dynamics (Biến đổi hình dạng) và chạm dứt khoát để không tạo pixel lạc.
- File mẫu: "Bảng ô màu 5 × 5" ở cuối bài – mở bằng , đặt trên cùng, khóa layer. Viền hồng đánh dấu cột tông nền (cột thứ 3).
| Màu | Mã hex (tối → sáng) | Dùng cho |
|---|---|---|
#3b1730 · #7a2340 · #c23a3a · #f0703a · #ffc078 | Dải đỏ: mũ nấm, quả, máu | |
#1d2b3a · #1f5a4a · #3a8f4a · #8cc84a · #e0f080 | Dải xanh lá: cỏ, lá | |
#1a1838 · #2c3f7a · #3f74c0 · #5cb8e8 · #b8f0f0 | Dải xanh dương: nước, đá quý | |
#4a2a32 · #8f4f3a · #d88a4a · #f2c46a · #fff0b0 | Dải da – gỗ: thân nấm, gỗ, da | |
#1b1a24 · #3d3a55 · #6a6888 · #9ea0b8 · #dcdde8 | Dải đá xám tím: đá, kim loại, màu viền |
Các bước
- Tạo file: (Ctrl+N), Width 160, Height 80 Pixels, Background Contents: Transparent. Zoom 600% (Ctrl+Plus vài lần). : Gridline Every 16 Pixels, Subdivisions 16, rồi (Ctrl+').
- Đặt file mẫu: chọn
d7-ramp-swatch-160x80.png, nhấn Enter, đổi tên layer thành Guide, bấm biểu tượng ổ khóa trong bảng Layers. Tạo layer mới Ctrl+Shift+N tên Ramps nằm dưới Guide. - Chọn 5 màu nền (cột giữa): Rectangular Marquee, Style Fixed Size 16 × 16, bấm vào ô hàng 1 cột 3 (x = 32). Bấm ô Foreground (Màu tiền cảnh), nhập hex
#c23a3a, Alt+Backspace để tô. Lặp lại xuống 4 hàng dưới với#3a8f4a,#3f74c0,#d88a4a,#6a6888. Màu nền là màu "bình thường" của vật dưới ánh sáng trung bình – độ bão hòa vừa phải, độ sáng B khoảng 55–85%. - Đọc màu bằng HSB: trong Color Picker (Bảng chọn màu), nhìn ba ô H (sắc độ, độ °), S (độ bão hòa %), B (độ sáng %). Ví dụ đỏ nền
#c23a3alà H 0°, S 70%, B 76%. Mọi tông khác của dải sẽ được tính bằng cách dời ba con số này. - Tông tối 1 (cột 2): từ màu nền, giảm B khoảng 25–30 điểm, tăng S 0–5 điểm, và xoay H khoảng 20° về phía xanh – tím. Với đỏ: H 0° → 340°, ta được
#7a2340– đỏ rượu hơi tím. Với xanh lá: H xoay từ 130° lên khoảng 160° (về phía xanh lam) →#1f5a4a. - Tông tối 2 (cột 1): làm tiếp như bước 5 từ tông tối 1: B giảm thêm 20–25 điểm, H xoay thêm 15–20°. Đỏ thành
#3b1730(tím mận). Tông tối nhất của dải đá#1b1a24sẽ dùng làm màu viền chung – đen ngả tím, mềm hơn đen tuyền#000000. - Tông sáng 1 (cột 4): từ màu nền, tăng B 15–20 điểm, giảm S một chút, và xoay H khoảng 15–20° về phía vàng (60°). Đỏ H 0° → 18° thành cam
#f0703a; xanh dương H 215° → 200° thành#5cb8e8. - Tông sáng 2 (cột 5): B gần 100%, S giảm mạnh (còn 30–55%), H xoay thêm về phía vàng. Kết quả gần như kem:
#ffc078,#e0f080,#b8f0f0. Đây là màu điểm sáng – chỉ dùng vài pixel trên mỗi vật. - Lưu vào Swatches (Bảng mẫu màu): , bấm biểu tượng thư mục để tạo nhóm Ramp 25. Dùng Eyedropper bấm từng ô (trái → phải, trên → dưới) rồi bấm Create new swatch. Xếp đúng thứ tự giúp bạn chọn màu kế bên trong một giây.
- Kiểm tra độ sáng (value): thêm Adjustment Layer (Lớp điều chỉnh) lên trên cùng. Mỗi hàng phải thành 5 bậc xám tăng đều; nếu hai ô kề nhau gần như cùng màu xám thì chỉnh lại B của một ô. Tắt layer Black & White (Trắng đen) khi xong.
- Vật mẫu – bóng dáng và tô phẳng: layer mới Object. Ở nửa phải, dùng Pencil 1 px vẽ viền cây nấm mũ tròn trên tảng đá dẹt, thêm vũng nước và vài cọng cỏ. Tô phẳng bằng Paint Bucket (Tolerance 0, Contiguous bật): mũ
#c23a3a, thân#d88a4a, đá#6a6888, cỏ#3a8f4a, nước#3f74c0. - Đổ khối bằng chính dải màu: ánh sáng chiếu từ trên – trái. Mỗi vùng dùng 3–4 tông của dải của nó: tông tối ở mép dưới – phải và dưới vành mũ, tông sáng ở đỉnh – trái, 2–4 pixel tông sáng nhất làm điểm sáng. Viền ngoài bằng
#1b1a24. Không mượn màu từ dải khác để đổ bóng. - Đếm màu: , trên bản sao chọn (đồng ý gộp layer), Palette Exact – ô Colors phải ≤ 25. Bấm Cancel, đóng bản sao không lưu. Ẩn layer Guide rồi (Alt+Shift+Ctrl+W), PNG, Scale 100% →
ramps.pngđúng 160 × 80 px. - Dùng trong Unity 6: kéo
ramps.pngvào thư mục Assets/Art. Ở Inspector: Texture Type Sprite (2D and UI), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, Apply – nhờ vậy Unity giữ đúng từng mã hex, không làm mờ hay trộn màu. Bạn có thể dùng ảnh này làm "bảng màu tham chiếu" của dự án: mọi họa sĩ trong nhóm đều lấy màu từ đây.
#1b1a24) làm viền cho cả bộ, thế là bạn tiết kiệm được một màu và viền hòa với bóng đổ thay vì "cắt" cứng như mực tàu.Nâng cao (tùy chọn)
- Dải dùng chung: thử để hai dải "chạm" nhau – ví dụ tông tối nhất của dải xanh lá cũng là tông tối 2 của dải xanh dương. Bảng màu nhỏ hơn mà cảnh vẫn hài hòa.
- Bảng màu theo thời điểm: nhân bản file, dùng Adjustment Layer Hue/Saturation (Sắc độ/Độ bão hòa) kẹp vào từng dải để tạo bản hoàng hôn (xoay H về cam) và bản đêm (xoay H về xanh, giảm B) – rồi kiểm tra lại bằng Black & White.
- Color Table: sau khi chuyển bản sao sang Indexed Color, mở và bấm Save để lưu file
.act– mở lại bằng Swatches › Import Swatches trong file khác.
Mẹo & trick học nhanh
Khoảng cách độ sáng B giữa các tông nên gần bằng nhau (ví dụ 23 – 48 – 76 – 94 – 100). Một bậc quá gần sẽ "biến mất" khi xem ở cỡ thật, một bậc quá xa sẽ tạo đường gãy trên khối tròn.
Tông nền và tông tối 1 thường có S cao nhất; hai đầu dải (tối nhất, sáng nhất) giảm S. Nếu tông tối nhất quá rực, bóng sẽ trông như phát sáng.
Khi đã có nhóm Ramp 25, đừng mở Color Picker nữa. Bấm thẳng vào ô màu trong Swatches – bạn sẽ không bao giờ vô tình tạo ra màu thứ 26 chỉ lệch 1 đơn vị.