Lộ trình › Pixel art chuyên sâu › Bài 178/218

Dự án 5: Cụm lá cây và bụi (foliage clusters)

Vẽ một bụi cây có quả mọng và một tán cây pixel 64 × 64 trên ảnh 128 × 64 px bằng kỹ thuật cụm lá: chia khối lá thành các cụm tròn, mỗi cụm có sáng tối riêng, mép lá lởm chởm 1 pixel – thay vì vẽ từng chiếc lá.

Nâng cao 55 phút ★★★ Dễ Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Cây cối chiếm phần lớn cảnh nền trong game phiêu lưu, nông trại, RPG. Người mới hay vẽ từng chiếc lá – mất hàng giờ và kết quả rối như nhiễu. Bí quyết của họa sĩ pixel là cụm lá (foliage cluster): coi tán lá như một chùm các quả cầu chồng lên nhau. Mỗi cụm được đổ bóng như một khối cầu nhỏ (sáng trên – trái, tối dưới – phải), khe giữa các cụm tối nhất, và chỉ ở mép ngoài mới có vài pixel lá lởm chởm gợi ý chiếc lá. Mắt người chơi sẽ tự "điền" phần còn lại.

Hình mẫu

Bụi cây có quả mọng đỏ và tán cây có thân nâu, mỗi khối lá gồm 6 cụm tròn với 4 tông xanh, mép lá lởm chởm 1 pixel – phóng to từ ảnh 128 × 64
Bụi cây có quả mọng đỏ và tán cây có thân nâu, mỗi khối lá gồm 6 cụm tròn với 4 tông xanh, mép lá lởm chởm 1 pixel – phóng to từ ảnh 128 × 64

Thời gian ước tính: khoảng 55 phút. Hãy đếm: mỗi khối lá chỉ có 6 cụm. Cụm phía sau – trên được tô tối hơn một chút, cụm phía trước – dưới sáng hơn và che lên cụm sau, tạo chiều sâu.

Chuẩn bị

  • Canvas: 128 × 64 px (2 ô 64 × 64), 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), Elliptical Marquee (Khung chọn) (M) bỏ Anti-alias (Khử răng cưa) để tạo cụm tròn nhanh, Paint Bucket (Thùng sơn) (G) Tolerance 0 bỏ Anti-alias, Eraser (Tẩy) Mode Pencil.
  • Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận) và ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh; làm việc ở 600–800%.
  • Thiết bị: chuột làm rất tốt – cụm lá tạo bằng vùng chọn tròn và Paint Bucket, phần mép lá chỉ là bấm từng pixel. Với Wacom, XP-Pen, Huion hay iPad + Apple Pencil, bạn có thể dùng Pencil 1 px tắt lực nhấn để "chấm" mép lá nhanh hơn, nhưng đừng kéo nét dài.
  • File mẫu: "Hai ô 64 × 64": các vòng xanh là vị trí gợi ý của 6 cụm cho mỗi cây, đường hồng ở y = 62 là mặt đất, vùng hồng nhạt ở ô phải là chỗ thân cây.
MàuMã hexDùng cho
#14262aViền lá (xanh đen, không dùng đen tuyền)
#1f4a3cLá tối – đáy cụm và khe giữa các cụm
#2f7a46Lá nền
#5aa84aLá sáng – nửa trên mỗi cụm
#a8d860Đỉnh cụm được nắng (vài pixel)
#5c3a2c · #8a5a3a · #b07a4aThân cây 3 tông
#c23a3a · #ff8a7aQuả mọng và điểm sáng của quả

Các bước

Sáu giai đoạn: bóng dáng tổng, chia thành các cụm tròn, tô phẳng có viền, thêm tông tối dưới mỗi cụm, tông sáng trên đỉnh cụm, rồi mép lá lởm chởm và quả
Sáu giai đoạn: bóng dáng tổng, chia thành các cụm tròn, tô phẳng có viền, thêm tông tối dưới mỗi cụm, tông sáng trên đỉnh cụm, rồi mép lá lởm chởm và quả
  1. Tạo file: Ctrl+N 128 × 64 px, Transparent. Gridline Every 64 Pixels, Subdivisions 8. Đặt file mẫu lên trên cùng, Opacity (Độ mờ đục) 50%, khóa layer.
  2. Bóng dáng bụi cây: layer Bush. Vẽ một khối tròn dẹt rộng khoảng 56 px, cao 40 px, đáy phẳng chạm đường y = 62. Nhìn ở 100% – bóng dáng phải đọc được là "bụi cây" ngay cả khi chỉ một màu.
  3. Chia cụm: Elliptical Marquee bỏ Anti-alias, vẽ 6 hình tròn đường kính 18–24 px chồng lên nhau theo vòng gợi ý: 2 cụm sau (trên), 1 cụm đỉnh, 3 cụm trước (dưới). Mỗi cụm tô tạm một màu xen kẽ #2f7a46 / #5aa84a để thấy rõ ranh giới. Cụm to nhất đặt ở giữa phía trước.
  4. Tô phẳng và viền: tô tất cả về #2f7a46. Ctrl + bấm thumbnail layer, EditChỉnh sửa›StrokeViền 1 px Outside màu #14262a. Sửa các góc chữ L dày 2 px trên viền.
  5. Vẽ lại ranh giới cụm: bật Lock Transparent Pixels (Khóa vùng trong suốt). Với từng cụm từ sau ra trước, dùng Pencil #1f4a3c vẽ cung đáy của cụm (nửa dưới – phải của hình tròn). Cụm trước che cung của cụm sau – chỗ hai cụm chạm nhau thành khe tối, tách các cụm.
  6. Tông tối: trong mỗi cụm, tô vùng lưỡi liềm dày 2–4 pixel ở phía dưới – phải bằng #1f4a3c. Cụm phía sau – trên tô vùng tối rộng hơn (chúng bị cụm trước che sáng).
  7. Tông sáng: mỗi cụm có một vùng tròn nhỏ hơn lệch lên trên – trái, tô #5aa84a. Chỉ cụm ở đỉnh và cụm trước – trái mới có 3–6 pixel #a8d860 – đó là chỗ nắng chiếu thẳng nhất.
  8. Mép lá lởm chởm: quanh viền ngoài, cứ khoảng 4–6 pixel thêm một "mấu" 1 pixel nhô ra ngoài (rồi viền lại mấu đó). Mấu ở mép trên dùng tông sáng, mấu ở mép dưới dùng tông tối. Chỉ làm ở mép ngoài – bên trong khối không cần.
  9. Quả mọng: 4 quả 2 × 2 pixel #c23a3a, mỗi quả có 1 pixel #ff8a7a ở góc trên – trái. Đặt rải rác, phần lớn ở mép cụm và trong vùng tông nền – quả nằm trong vùng tối sẽ bị chìm.
  10. Thân cây (ô phải): layer Tree. Thân rộng 8 px, loe rộng ra ở gốc thành rễ (12–16 px), tô 3 tông: sáng #b07a4a ở mép trái, nền #8a5a3a, tối #5c3a2c ở mép phải. Ngay dưới tán, tô một dải 2–3 pixel tối – bóng của tán đổ lên thân.
  11. Tán cây: lặp lại bước 3–8 cho tán cây với 6 cụm nhỏ hơn (đường kính 16–24) xếp thành hình tròn hơi rộng ngang, che phần trên của thân. Thêm 2–3 điểm sáng #a8d860 rời để gợi ý lá đơn lẻ bắt nắng.
  12. Kiểm tra trên nền cỏ: layer tạm dưới cùng tô #3a8f4a. Hai cây phải tách rõ khỏi nền nhờ viền và khe tối. Xem ở 100%: nếu các cụm "dính" thành một khối phẳng, đậm thêm khe tối; nếu rối, bớt mấu lá.
  13. Đếm màu và xuất: bản sao › Indexed Color, Palette Exact: không quá 12 màu. Ẩn mẫu và nền thử, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → foliage.png đúng 128 × 64 px.
  14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Sprite Editor › Slice › Grid By Cell Size 64 × 64, Pivot (Điểm neo) Bottom. Với game nhìn từ trên xuống, đặt Sprite Sort Point là Pivot và EditChỉnh sửa›Project Settings›Graphics (hoặc 2D Renderer Data) Transparency (Độ trong suốt) Sort Mode Custom Axis (0, 1, 0) để nhân vật đi sau – trước cây đúng thứ tự.
Mẹo: Muốn có 5 bụi cây khác nhau mà chỉ vẽ 1: nhân bản, lật ngang (EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang – lật không làm mờ pixel), đổi vị trí 1–2 cụm và quả. Tránh xoay 90° vì hướng sáng sẽ sai.
Lỗi hay gặp: "Pillow shading" – tô tối đều quanh viền rồi sáng dần vào giữa như cái gối. Khối lá trông phồng và giả. Sáng tối phải theo hướng sáng: sáng ở trên – trái, tối ở dưới – phải của từng cụm.

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

  • Gió thổi 2 frame: nhân bản sheet, dời vài mấu lá ở mép trên 1 pixel sang phải và các cụm đỉnh 1 pixel – xen kẽ 2 frame ở 2–3 fps là cây "thở" theo gió.
  • Bốn mùa: dùng Magic Wand (Đũa thần) (Tolerance 0, bỏ Contiguous) chọn từng tông xanh và đổi sang dải cam – đỏ cho mùa thu, hoặc thêm cụm trắng phía trên cho tuyết.
  • Cây cao 2 tầng: canvas 64 × 128 với hai tầng tán cách nhau bởi đoạn thân – tầng dưới tối hơn vì bị tầng trên che.

Mẹo & trick học nhanh

Ít cụm mà rõ

Một bụi cây 64 px chỉ cần 5–7 cụm. Nhiều cụm nhỏ hơn 12 px sẽ thành nhiễu ở cỡ thật. Cụm càng gần mặt trước càng to.

Khe tối là bí quyết

Dải tông tối nhất ở chỗ hai cụm chạm nhau quan trọng hơn mọi chi tiết lá. Có khe tối, mắt tự hiểu đây là nhiều chùm lá chồng lên nhau.

Lật được, xoay không

Lật ngang giữ đúng pixel và gần đúng hướng sáng nếu nguồn sáng ở trên. Xoay 90° hay 45° bằng Free Transform làm pixel méo và ánh sáng sai hướng.

Kiểm tra nhanh

1 Kỹ thuật cụm lá (foliage cluster) là gì?
2 Cụm lá nào nên được tô tối hơn?
3 Trong Unity 6, vì sao đặt Pivot của sprite cây là Bottom?

Bài tập: Bụi cây và tán cây của bạn

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập