Lộ trình › Dự án game theo chủ đề › Bài 98/218

Dự án 16: Character turnaround 3 góc

Vẽ bảng turnaround nhân vật mặt trước – nghiêng – sau trên khung 2400 × 1200 px: chiếu đường tỉ lệ ngang, giữ cùng chiều cao và bảng màu – tài liệu chuẩn để làm animation và rig trong Unity 6.

Nâng cao 360 phút ★★★ Khó 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).

Khi một nhân vật được giao cho người làm animation, rig xương hay dựng 3D, họ cần biết nó trông thế nào từ mọi phía. Bảng turnaround (quay vòng) vẽ nhân vật ở các góc cố định – tối thiểu là trước, nghiêng, sau – với cùng chiều cao và các đường tỉ lệ ngang chung. Đây là dự án cuối của module và cũng là mảnh portfolio được nhà tuyển dụng game rất quan tâm.

Hình mẫu

Turnaround ba góc trước, nghiêng, sau với các đường ngang đỉnh đầu, cằm, vai, thắt lưng, gối, gót chân
Turnaround ba góc trước, nghiêng, sau với các đường ngang đỉnh đầu, cằm, vai, thắt lưng, gối, gót chân

Thời gian ước tính: khoảng 6 giờ: 1,5 giờ mặt trước, 1,5 giờ mặt nghiêng, 1 giờ mặt sau, 2 giờ màu, bóng và kiểm tra.

Chuẩn bị

  • Canvas: 2400 × 1200 px (tỉ lệ 2 : 1), RGB Color, 3 cột 800 px.
  • File mẫu: "Khung turnaround" – các đường ngang: đỉnh đầu y 120, cằm y 400, vai y 470, thắt lưng y 730, gối y 930, gót chân y 1130; tâm 3 cột ở x 400, 1200, 2000. Nhân vật cao khoảng 3,6 đầu – tỉ lệ chibi vừa phải cho game.
  • Brush (Cọ vẽ): Hard Round 6–10 px có lực nhấn cho nét, Pencil (Bút chì) hoặc Lasso (Dây thòng lọng) để tô mảng.
  • Thiết bị: dự án này nhiều nét dài và đường cong mặt, lực nhấn rất có lợi. Bút XP-Pen/Huion: bật Windows Ink (Windows Ink (bút Windows)) trong driver; Wacom: kiểm tra Pen Pressure (Lực nhấn bút) ở F5. Chuột: Smoothing (Làm mượt nét) 40–50% và dùng Pen Tool (Bút tạo đường) + Stroke Path (Simulate Pressure) cho đường bao lớn. iPad qua Sidecar/Astropad: Apple Pencil như bút thường.
MàuMã hexDùng cho
#ffd7b5Da
#e8a987Bóng da
#ff9f43Tóc
#c9651fBóng tóc
#3ecf6eÁo
#228a4aBóng áo
#e63946Khăn quàng
#3d3f63Quần
#6b3e26Giày
#1b1a24Viền

Các bước

Turnaround: đường tỉ lệ, dáng trước, chiếu sang nghiêng, mặt sau, màu phẳng, bóng và kiểm tra chiều cao
Turnaround: đường tỉ lệ, dáng trước, chiếu sang nghiêng, mặt sau, màu phẳng, bóng và kiểm tra chiều cao
  1. Đặt khung: tạo file 2400 × 1200 px, kéo "Khung turnaround" vào làm layer trên cùng, blend mode Multiply (Nhân (làm tối)), khóa. Thêm guide thật trùng các đường ngang bằng ViewHiển thị›GuidesĐường gióng›New Guide (Horizontal, 120, 400, 470, 730, 930, 1130 px) để bật Snap.
  2. Mặt trước – dựng khối: cột giữa trái (x 400), layer Front Sketch: đầu hình trứng từ đỉnh đầu tới cằm, cổ ngắn, vai rộng khoảng 1,6 lần đầu, thân áo hình thang tới thắt lưng, chân tới gót. Vẽ nửa trái thật kỹ.
  3. Đối xứng mặt trước: chọn nửa trái bằng Rectangular Marquee (Khung chọn), Ctrl+J, EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang, dời sang để hai nửa gặp nhau đúng trục x 400. Sửa lại những gì không đối xứng (ngôi tóc, khăn quàng buộc một bên).
  4. Nét mặt trước: layer Front Line, nét 8 px có lực nhấn. Đây là góc "chuẩn" – mọi góc khác sẽ đối chiếu theo nó, nên dành thời gian cho nó đúng tỉ lệ.
  5. Chiếu đường ngang sang nghiêng: ngoài 6 đường chính, kẻ thêm guide ở mắt, mũi, cằm, nách, gấu áo, cổ giày dựa theo mặt trước. Ở cột x 1200, mọi bộ phận của mặt nghiêng phải nằm đúng trên các đường này – đó là ý nghĩa của "chiếu" (project).
  6. Mặt nghiêng: layer Side Line: đầu nhìn ngang có trán, mũi, cằm; tóc dồn về sau gáy; thân hẹp hơn mặt trước (độ dày ngực và lưng); một tay đặt giữa thân che bớt; hai chân một trước một sau lệch nhẹ, chân phía xa tô tối hơn. Khăn quàng bay ra sau lưng.
  7. Kiểm tra độ dày: chiều rộng nhân vật ở mặt nghiêng (từ ngực tới lưng) phải hợp lý so với mặt trước: đầu rộng gần bằng, thân mỏng hơn, giày dài hơn. Nhờ ai đó nhìn nhanh: có tin đây là cùng một người không?
  8. Mặt sau: nhân đôi Group mặt trước sang cột x 2000, Flip Horizontal (Lật ngang). Xóa khuôn mặt, vẽ tóc phủ kín sau đầu (có đường chia tóc), gáy, lưng áo, đuôi khăn quàng rủ sau lưng, gót giày. Mọi đường bao giữ đúng như mặt trước.
  9. Màu phẳng chung bảng: tạo nhóm Swatches (Bảng mẫu màu) Turnaround với 10 màu trong bảng; layer Flat cho mỗi góc, tô bằng Magic Wand (Đũa thần) + Expand + Alt+Backspace. Tuyệt đối không pha màu mới cho riêng một góc.
  10. Bóng thống nhất: ánh sáng từ trên – trái ở cả 3 góc (quy ước cho bảng turnaround). Layer Shadow kẹp vào Flat: bóng dưới cằm, dưới khăn, phía phải thân và chân, bóng tóc ở gáy (mặt sau).
  11. Kiểm tra chiều cao: ẩn các layer phụ, bật guide: đỉnh đầu, vai, thắt lưng, gót chân của 3 góc phải chạm đúng cùng đường. Dùng Ruler Tool (nhấn Shift+I tới khi chọn được) kéo đo nếu nghi ngờ; lệch quá 10 px là phải sửa.
  12. Trình bày: thêm nhãn "Trước", "Nghiêng", "Sau" dưới mỗi góc, tên nhân vật, chiều cao theo đơn vị đầu, dải màu nhỏ. Có thể thêm góc 3/4 làm ảnh phụ ở góc trên.
  13. Xuất: lưu PSD giữ layer. Xuất hero_turnaround.png 2400 × 1200 px. Nếu định rig trong Unity, lưu thêm bản FileTệp›Save AsLưu thành bản khác định dạng Photoshop Large Document Format (*.PSB) với mặt nghiêng tách thành các layer bộ phận (đầu, thân, tay trên, tay dưới, đùi, cẳng chân…).
  14. Dùng trong Unity 6: bảng turnaround là tài liệu tham chiếu cho animator. Để làm animation xương 2D, cài gói 2D Animation và 2D PSD Importer (Package Manager), kéo file .psb vào Project: Unity tạo sẵn sprite cho từng layer bộ phận; mở Skinning Editor trong Sprite Editor để đặt xương, rồi thêm component Sprite Skin và làm animation bằng cách xoay xương trong cửa sổ Animation.
Mẹo: Bật guide ở ViewHiển thị›Snap To›GuidesĐường gióng và vẽ các đường bao chính (đỉnh đầu, vai, gót) bằng Line Tool bám guide. Khi các góc "chạm" đúng đường ngang, người xem cảm nhận ngay sự chuyên nghiệp của bảng.
Lỗi hay gặp: Mặt nghiêng vẽ "theo cảm giác" rồi mới so, dẫn tới đầu to hơn, chân ngắn hơn mặt trước. Luôn chiếu đường ngang từ mặt trước sang trước khi vẽ nét đầu tiên của mặt nghiêng.

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

  • Góc 3/4: thêm hai góc 3/4 trước và 3/4 sau – bảng 5 góc là chuẩn của nhiều studio.
  • Bảng biểu cảm: 6 khuôn mặt (vui, buồn, giận, ngạc nhiên, sợ, tự tin) ở góc trước, cùng đường tỉ lệ mắt – mũi – miệng.
  • Bảng đạo cụ: vẽ vũ khí và túi của nhân vật ở 2 góc với tỉ lệ so với chiều cao nhân vật.

Mẹo & trick học nhanh

Guide chính xác bằng số

ViewHiển thị›GuidesĐường gióng›New Guide cho phép gõ đúng vị trí (ví dụ 470 px). Kéo guide sai chỗ thì giữ Ctrl và kéo guide về lại thước để xóa.

Vẽ một nửa, lật một nửa

Mặt trước và mặt sau gần đối xứng: vẽ nửa trái rồi Ctrl+J và EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang. Nhớ sửa lại chi tiết chỉ có ở một bên.

Đo bằng Ruler Tool

Ruler Tool nằm chung nhóm Eyedropper (I, nhấn Shift+I để đổi). Kéo một đường, thanh Options hiện chiều dài L và góc A – tiện so chiều cao giữa các góc.

Kiểm tra nhanh

1 Mục đích chính của bảng turnaround là gì?
2 Khi vẽ mặt nghiêng, vì sao phải chiếu đường ngang từ mặt trước sang?
3 Cách nhanh nhất để bắt đầu mặt sau là gì?
4 Trong Unity 6, gói nào đọc file .psb nhiều layer thành các sprite bộ phận để rig xương?

Bài tập: Bảng turnaround 3 góc

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