Lộ trình › Luyện nền tảng vẽ › Bài 108/218

Đá & địa hình stylized

Biến khối hộp thành tảng đá ba mặt phẳng có vết nứt, mép sáng và rêu, rồi ghép thành cụm đá và mỏm vách cho game platformer.

Trung cấp 50 phút ★★★ Vừa 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.

Đá xuất hiện trong gần như mọi màn chơi: tảng đá chắn đường, vách núi, bậc thang hang động, mặt đất platformer. Đá stylized đẹp không nhờ texture chi tiết mà nhờ mặt phẳng rõ ràng. Hãy nghĩ về đá như một khối hộp bị đẽo góc: mặt trên đón sáng, mặt trước tông giữa, mặt bên tối.

Hình mẫu

Cụm ba tảng đá lớn – vừa – nhỏ có rêu, vách đá platformer có mép cỏ và tầng đá, chú giải ba mặt phẳng
Cụm ba tảng đá lớn – vừa – nhỏ có rêu, vách đá platformer có mép cỏ và tầng đá, chú giải ba mặt phẳng

Thời gian ước tính: 50 phút. Ánh sáng từ trên – trái: mặt trên #c9ccd6, mặt trước #8e93a3, mặt bên #5d6273, vết nứt #2f3340, mép sáng #eef0f5, rêu #6fbf4f.

Chuẩn bị

  • Canvas: 1024 × 512 px (sprite sheet cho Unity), Background Contents: Transparent.
  • Công cụ chính: Polygonal Lasso (Thòng lọng đa giác) (nhấn Shift+L tới khi thấy biểu tượng đa giác) – mỗi mặt phẳng là một vùng chọn.
  • Thiết bị: chuột làm bài này cực tốt: nhấp từng đỉnh đa giác bằng Polygonal Lasso, nhấp đúp để đóng vùng chọn, tô Alt+Backspace. Bút XP-Pen/Huion/Wacom hay iPad: nét nứt và mép sáng đẹp hơn khi bật Pen Pressure (Lực nhấn bút) cho Size.

Các bước

Sáu bước: khối hộp thô → cắt góc → chia mặt phẳng → ba tông → vết nứt và mép sáng → rêu và bóng đổ
Sáu bước: khối hộp thô → cắt góc → chia mặt phẳng → ba tông → vết nứt và mép sáng → rêu và bóng đổ
  1. Tạo file: Ctrl+N 1024 × 512 px, Transparent. Chia đôi bằng một Guide dọc ở 512 px: nửa trái cho cụm đá, nửa phải cho mỏm vách.
  2. Khối hộp thô: layer Sketch, vẽ một khối hộp dẹt nhìn hơi từ trên xuống (mặt trên là hình thang). Đây là "phôi" của tảng đá.
  3. Cắt góc: layer Flat, Polygonal Lasso vẽ một đa giác 7–9 cạnh bên trong khối hộp, cắt bớt các góc theo kiểu đẽo đá. Các cạnh dài – ngắn xen kẽ, không đều nhau. Tô màu tông giữa.
  4. Chia mặt phẳng: layer Line, kẻ ranh giới: một đa giác cho mặt trên, phần còn lại chia thành mặt trước và mặt bên bằng một cạnh gãy đi xuống.
  5. Ba tông: layer Planes Clipping Mask (Mặt nạ cắt) vào Flat. Polygonal Lasso chọn mặt trên tô #c9ccd6, chọn mặt bên phải tô #5d6273. Mặt trước giữ tông giữa.
  6. Vết nứt: layer Cracks, Hard Round 4 px màu #2f3340. Vẽ vết nứt hình chữ Y – bắt đầu từ mép, chia nhánh ở giữa, nhỏ dần. Vết nứt chạy theo mặt phẳng và đổi hướng khi qua cạnh.
  7. Sứt mép: dùng Polygonal Lasso cắt vài mảnh tam giác nhỏ ở cạnh trên và góc dưới, tô tông của mặt bên cạnh – đá trông bị va đập, cũ kỹ.
  8. Mép sáng: layer Edge Light, Hard Round 3 px màu #eef0f5, vẽ nét mảnh dọc cạnh giữa mặt trên và mặt trước. Một nét này làm đá "cứng" hẳn lên.
  9. Rêu: layer Moss, chỉ ở mặt trên: Lasso (Dây thòng lọng) vẽ mảng rêu viền lượn sóng, tô #6fbf4f, mép dưới thêm vài răng cưa xanh đậm #3f8a35 rủ xuống mặt trước.
  10. Cụm đá: nhân bản Group tảng đá (Ctrl+J) hai lần, Ctrl+T thu nhỏ còn 60% và 30%, lật ngang một bản (EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang). Xếp đá lớn – vừa – nhỏ chồng lên nhau, không xếp hàng ngang.
  11. Mỏm vách platformer: ở nửa phải, vẽ khối vách hình chữ nhật xù xì: mặt trước tông giữa, cạnh phải tông tối, chia 2–3 tầng đá ngang bằng dải sáng mảnh. Phía trên là dải cỏ #6fbf4f có mép dưới răng cưa và vài rễ cây rủ xuống.
  12. Bóng đổ và xuất: layer Shadow dưới cùng, Multiply (Nhân (làm tối)) 30%, elip tối dưới chân mỗi cụm đá. Xuất PNG 1024 × 512 px nền trong suốt.
Mẹo: trong Unity, mép cỏ của mỏm vách nên nằm sát mép trên sprite để nhân vật "đứng" đúng trên cỏ. Đặt Pivot (Điểm neo) của sprite ở Top Center khi cắt bằng Sprite Editor sẽ dễ căn hơn.
Lỗi hay gặp: vẽ đá tròn trịa như bánh bao rồi tô chuyển mềm. Đá như vậy trông như cục bột. Đá cần cạnh thẳng, góc gãy và ranh giới mặt phẳng sắc nét.

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

  • Đá phát sáng: thêm một viên pha lê xanh mọc ra từ khe nứt, dùng Outer Glow để làm đá cho hang động.
  • Tile lặp: vẽ mỏm vách thành tile 256 × 256 px lặp ngang, kiểm tra bằng FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng).
  • Đổi mùa: nhân bản file, thay rêu bằng tuyết trắng xanh #e6f3ff và hạ bão hòa đá – có ngay phiên bản màn băng.

Mẹo & trick học nhanh

Đa giác bằng chuột

Với Polygonal Lasso, giữ Shift khi nhấp để khóa cạnh theo góc 45° hoặc 90°; nhấn Backspace để xóa đỉnh vừa đặt nếu nhấp sai.

Ba tông, không hơn

Mỗi tảng đá chỉ cần 3 tông mặt phẳng + nét nứt + mép sáng. Nhiều tông hơn làm đá trông bẩn khi thu nhỏ trong game.

Kích thước khác nhau

Cụm đá đẹp theo tỉ lệ lớn – vừa – nhỏ khoảng 100% – 60% – 30%. Ba tảng bằng nhau trông như ba quả trứng.

Kiểm tra nhanh

1 Với ánh sáng từ trên – trái, mặt nào của tảng đá sáng nhất?
2 Vết nứt trên đá stylized nên có dạng thế nào?
3 Rêu và cỏ nên đặt ở đâu trên tảng đá?

Bài tập: Nộp sprite sheet đá và mỏm vách

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