Lộ trình › Thử thách theo chủ đề › Bài 213/218

Thử thách 10: Biến đồ vật đời thường thành vật phẩm game

Thiết kế lại bốn đồ vật trong nhà thành bốn vật phẩm game trên sheet 512 × 512 px (2 × 2 ô 256 px): ấm trà thành bình hồi máu, đồng hồ báo thức thành bom hẹn giờ, chảo thành khiên, bút chì thành đũa phép – giữ bóng dáng nhận ra được, thêm màu và chi tiết "chức năng game", rồi cắt sprite cho túi đồ trong Unity 6.

Trung cấp 120 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.

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

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

Thiết kế vật phẩm hay nhất thường bắt đầu từ một đồ vật quen thuộc. Người chơi nhìn bình hồi máu hình ấm trà là hiểu ngay "đây là thứ để uống", nhìn bom có mặt đồng hồ là biết "sắp nổ". Thử thách này luyện tư duy biến hình có chủ đích: giữ lại bóng dáng nhận ra được của đồ thật (quai ấm, hai chuông đồng hồ, cán chảo, đầu chì nhọn), rồi thêm ngôn ngữ game – màu chức năng (đỏ = máu, đen + ngòi = nổ, xám thép + ngôi sao = phòng thủ, tím + sao = phép), độ phóng đại và một điểm nhấn phát sáng. Bạn sẽ vẽ hai hàng trong đầu: đồ thật → vật phẩm.

Hình mẫu

Bốn cặp biến hình: hàng trên là nét xám của ấm trà, đồng hồ báo thức, cái chảo, bút chì; mũi tên xuống hàng dưới là bình hồi máu hình ấm trà chứa nước đỏ có trái tim và nút bần, bom hẹn giờ tròn đen có mặt đồng hồ, hai chuông vàng và ngòi cháy, khiên làm từ chảo có ngôi sao vàng và đinh tán, đũa phép hình bút chì tím đầu sao phát sáng
Bốn cặp biến hình: hàng trên là nét xám của ấm trà, đồng hồ báo thức, cái chảo, bút chì; mũi tên xuống hàng dưới là bình hồi máu hình ấm trà chứa nước đỏ có trái tim và nút bần, bom hẹn giờ tròn đen có mặt đồng hồ, hai chuông vàng và ngòi cháy, khiên làm từ chảo có ngôi sao vàng và đinh tán, đũa phép hình bút chì tím đầu sao phát sáng

Thời gian ước tính: khoảng 2 giờ – 15 phút quan sát và phác đồ thật, 20 phút phác biến hình, 70 phút line, màu và hiệu ứng, 15 phút xuất và kiểm tra.

Chuẩn bị

  • Canvas (khung vẽ): 512 × 512 px (2 × 2 ô 256 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
  • Công cụ chính: Ellipse Tool và Rounded Rectangle (U) cho khối, Pen Tool (Bút tạo đường) (P) cho vòi ấm, ngòi bom, Polygon Tool với Star Ratio cho ngôi sao, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Layer Style Stroke, Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng) cho điểm sáng.
  • Thiết bị: cả bốn vật phẩm dựng chủ yếu bằng Shape nên chuột làm rất tốt. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp phác đồ thật nhanh và tự nhiên hơn ở bước quan sát – bật Pen Pressure (Lực nhấn bút) cho Size. Dùng chuột: phác bằng Polygonal Lasso (Thòng lọng đa giác) và tô mảng xám thay vì vẽ nét.
  • File mẫu: "Lưới 2 × 2 ô 256 px" ở cuối bài – đặt trên cùng, Opacity (Độ mờ đục) 50%. Góc trên trái mỗi ô có khung 64 px nét đứt để phác đồ thật (ẩn khi xuất); dấu cộng là tâm, đường đứt hồng là đáy vật.
MàuMã hexDùng cho
#e8423bThuốc hồi máu
#a01f2bThuốc bóng
#c9d3dfSứ, kim loại sáng – vòi, quai
#2b2f3aVỏ bom
#f2c14eĐồng thau – chuông, ngôi sao khiên
#5b6375Thép chảo – thân khiên
#7a5ca8Thân đũa phép
#ffd23fSao phép phát sáng
#1b1a24Viền

Các bước

Sáu giai đoạn: nét đồ thật làm tham khảo, nét viền vật phẩm giữ bóng dáng, màu theo chức năng, đổ bóng Clipping Mask, ánh sáng, hiệu ứng phát sáng và nhãn
Sáu giai đoạn: nét đồ thật làm tham khảo, nét viền vật phẩm giữ bóng dáng, màu theo chức năng, đổ bóng Clipping Mask, ánh sáng, hiệu ứng phát sáng và nhãn
  1. Quan sát đồ thật: lấy (hoặc tìm ảnh) ấm trà, đồng hồ báo thức, cái chảo, bút chì. Trong khung 64 px góc mỗi ô, phác mỗi đồ vật bằng 3–5 nét – chỉ ghi lại bóng dáng: thân tròn, vòi, quai, nắp của ấm; mặt tròn, hai chuông, hai chân của đồng hồ…
  2. Gạch chân "đặc điểm nhận ra": với mỗi đồ vật, khoanh đỏ 1–2 bộ phận mà thiếu nó thì không ai nhận ra: vòi và quai ấm, hai chuông đồng hồ, cán chảo, đầu nhọn và phần gỗ của bút chì. Những bộ phận này bắt buộc giữ ở vật phẩm.
  3. Chọn chức năng và màu chức năng: người chơi đọc chức năng qua màu trước khi đọc hình. Hồi máu = đỏ, nổ = đen + cam lửa, phòng thủ = xám thép + vàng, phép = tím + vàng. Ghi màu chức năng cạnh mỗi ô.
  4. Ấm trà → bình hồi máu: Ellipse Tool vẽ thân ấm tròn 90 × 70 px, Pen Tool vẽ vòi cong và quai. Thân ấm thành thủy tinh chứa nước đỏ: Fill #e8423b Opacity 90%; vòi và quai giữ màu sứ #c9d3df để vẫn nhận ra là ấm. Nắp ấm đổi thành nút bần nâu – dấu hiệu "bình thuốc" kinh điển.
  5. Trái tim chức năng: giữa thân bình, Custom Shape Heart (trong WindowCửa sổ›Shapes › Legacy Shapes and More, hoặc vẽ bằng Pen Tool) 24 px màu #ffd9e0. Biểu tượng nhỏ này nói "hồi máu" ngay cả với người chơi không đọc chữ.
  6. Đồng hồ báo thức → bom hẹn giờ: thân đồng hồ thành quả cầu đen #2b2f3a 76 px. Giữ hai chuông vàng trên đỉnh và mặt đồng hồ trắng có hai kim đỏ. Thêm ngòi bom cong bằng Pen Tool và tia lửa hình sao cam ở đầu ngòi. Hai chuông là "chữ ký" – không có chúng, đây chỉ là quả bom thường.
  7. Chảo → khiên: mặt chảo thành thân khiên elip #5b6375, vành trong sáng hơn #9aa3ae. Cán chảo thu ngắn lại thành tay cầm bọc da ở bên trái. Thêm 6 đinh tán quanh vành và một ngôi sao vàng ở tâm (Polygon Tool, 5 cạnh, Star Ratio 45%). Nhìn nghiêng một chút để thấy vẫn là chảo.
  8. Bút chì → đũa phép: giữ thân lục giác dài, đầu gỗ vót và vòng kim loại – đổi màu thân sang tím #7a5ca8. Đầu đũa là ngôi sao vàng 40 px thay cho cục tẩy. Xoay chéo 30° (Ctrl+T) để đũa có cảm giác đang vung.
  9. Viền thống nhất: mọi khối dùng Layer Style Stroke 3 px Inside màu #1b1a24, chép bằng Copy Layer Style. Bốn vật phẩm cùng viền sẽ trông như cùng một bộ túi đồ.
  10. Đổ bóng: layer kẹp chế độ Multiply (Nhân (làm tối)) cho mỗi khối, tô màu bóng tương ứng (#a01f2b cho thuốc, #1b1e26 cho bom, #3a404b cho khiên, #55407a cho đũa) ở phía dưới phải. Bóng đổ elip mờ dưới mỗi vật để chúng "đặt" trên đường đáy.
  11. Ánh sáng và chất liệu: thủy tinh: vệt sáng trắng cong Opacity 70% bên trái thân bình. Kim loại khiên: một vệt sáng sắc ở vành trên trái. Bom: một chấm sáng nhỏ xám xanh – bom bóng loáng nhưng tối. Mỗi chất liệu một kiểu vệt sáng.
  12. Điểm nhấn phát sáng: layer Linear Dodge (Add), cọ Soft Round, màu #ffd23f Opacity 30%: quầng quanh sao đũa phép, quanh tia lửa ngòi bom. Chỉ hai vật phép thuật và nguy hiểm được phát sáng – bình thuốc và khiên không, để giữ thứ bậc.
  13. Xuất và đưa vào Unity 6: ẩn khung phác đồ thật và lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) → items_everyday.png 512 × 512 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Sprite Editor › Slice › Grid By Cell Size 256 × 256, đặt tên sprite item_teapot_potion, item_clock_bomb, item_pan_shield, item_pencil_wand. Tạo một ScriptableObject ItemData chứa sprite, tên và chỉ số cho từng vật phẩm để túi đồ hiển thị bằng UI Image.
Mẹo: Thử nghiệm "che tên": cho một người xem riêng hàng dưới và hỏi "cái này làm gì trong game, nó từng là đồ vật gì?". Nếu họ trả lời đúng cả hai, thiết kế đạt. Nếu chỉ đúng câu đầu, bạn đã làm mất bóng dáng đồ thật; chỉ đúng câu sau, bạn chưa đủ "ngôn ngữ game".
Lỗi hay gặp: Biến đổi quá tay đến mức đồ thật biến mất – bình thuốc chỉ còn là một chai tròn, không ai nhận ra từng là ấm trà. Ngược lại, giữ nguyên đồ thật và chỉ đổi màu thì vật phẩm trông như đồ gia dụng, không có sức hút. Giữ 1–2 đặc điểm nhận ra, phóng đại chúng, và đổi mọi thứ còn lại.

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

  • Đồ vật Việt Nam: làm thêm hàng thứ ba với đồ quen thuộc ở Việt Nam: nón lá thành khiên tre, phin cà phê thành bình tăng tốc, quạt nan thành vũ khí gió, cái mẹt thành bàn chế tạo.
  • Ba cấp độ hiếm: vẽ bình thuốc ấm trà ở 3 cấp: sứ trắng thường, gốm men lam hiếm, vàng ròng huyền thoại – cùng bóng dáng, khác chất liệu và độ phát sáng.
  • Animation nhỏ: bom đồng hồ 4 frame: kim giây nhảy và tia lửa ngòi lóe to nhỏ, sheet 1024 × 256 px – dùng làm icon cảnh báo trước khi bom nổ.

Mẹo & trick học nhanh

Một đặc điểm nhận ra là đủ

Quai và vòi ấm, hai chuông đồng hồ, cán chảo, đầu chì vót. Giữ đúng 1–2 bộ phận đó và cho chúng to hơn thật một chút – người chơi sẽ tự hiểu phần còn lại.

Màu nói chức năng

Người chơi đọc màu trước hình. Đỏ là máu, xanh dương là mana, đen có ngòi là nổ, xám thép là phòng thủ. Dùng đúng quy ước để vật phẩm "tự giải thích".

Chỉ cái nguy hiểm mới phát sáng

Đặt glow cho vật phép thuật và vật nguy hiểm, không đặt cho mọi thứ. Khi tất cả cùng sáng, không còn cái nào nổi bật.

Kiểm tra nhanh

1 Khi biến đồng hồ báo thức thành bom hẹn giờ, bộ phận nào nên giữ?
2 Vì sao thân bình hồi máu nên màu đỏ?
3 Trong Unity 6, vì sao nên tạo ScriptableObject ItemData cho mỗi vật phẩm?

Bài tập: Bốn đồ vật biến hình 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