Bạn học Photoshop trên máy nào? Phím tắt và hướng dẫn sẽ hiển thị đúng theo lựa chọn của bạn.

Lộ trình › Art 2D cho Game › Bài 29/158

Thiết kế nhân vật bằng Silhouette

Dùng hình bóng, ngôn ngữ hình khối và thumbnail để tạo nhân vật dễ nhận ra ngay cả khi chỉ là một khối đen nhỏ trên màn hình.

Nâng cao 35 phút 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.

Trong game, nhân vật thường chỉ cao vài chục pixel và di chuyển liên tục. Người chơi không có thời gian ngắm chi tiết – họ nhận ra nhân vật qua hình bóng (silhouette). Vì vậy các studio luôn bắt đầu thiết kế bằng những khối đen đặc, trước cả khi nghĩ tới đường nét hay màu sắc.

Một silhouette tốt vẫn nhận ra được nhân vật khi tô đen hoàn toàn
Một silhouette tốt vẫn nhận ra được nhân vật khi tô đen hoàn toàn

Vì sao silhouette quan trọng?

Hãy thử tô đen toàn bộ nhân vật. Nếu bạn vẫn đoán được đó là ai, cầm vũ khí gì, tính cách ra sao – thiết kế đó đọc được (readable). Nếu nó chỉ là một khối tròn mờ nhạt, thêm chi tiết cũng không cứu được.

  • Phân biệt nhân vật: trong một trận đánh đông người, mỗi nhân vật cần một hình bóng riêng.
  • Gameplay: người chơi phải nhận ra ngay kẻ địch nguy hiểm hay vô hại.
  • Tiết kiệm thời gian: sửa một khối đen mất vài giây, sửa một bản vẽ màu hoàn chỉnh mất cả buổi.

Ngôn ngữ hình khối (Shape language)

Não người gắn cảm xúc với hình dạng cơ bản. Hãy chọn một hình chủ đạo cho mỗi nhân vật:

HìnhCảm giácVí dụ
TrònThân thiện, dễ thương, mềm mạiLinh vật, NPC bán hàng, slime
VuôngVững chắc, đáng tin, nặng nềHiệp sĩ, tank, người khổng lồ
Tam giácNguy hiểm, nhanh nhẹn, gian xảoPhản diện, sát thủ, quái vật có gai

Kết hợp hình phụ để tạo chiều sâu: một hiệp sĩ thân vuông với mũ nhọn tam giác sẽ vừa vững chắc vừa có chút hung hăng.

Phóng đại (Exaggeration)

Nhân vật game thường có tỉ lệ phóng đại: đầu to hơn, vũ khí lớn hơn, tay chân dày hơn. Nếu giữ tỉ lệ ngoài đời thật, ở kích thước 64 px mọi thứ sẽ bị hòa vào nhau. Hãy đẩy đặc điểm nổi bật nhất (cái mũ, thanh kiếm, cái đuôi) lên gấp 1,5–2 lần.

Thực hành: vẽ thumbnail bằng Lasso

  1. Tạo file mới Ctrl+N kích thước 1920 × 1080 px, nền trắng. Tạo layer mới bằng Ctrl+Shift+N.
  2. Chọn Lasso (Dây thòng lọng) Tool (L). Vẽ nhanh một hình bóng nhân vật cao khoảng 300 px. Giữ Alt để chuyển sang Polygonal Lasso (Thòng lọng đa giác) khi cần cạnh thẳng.
  3. Nhấn D để về màu đen/trắng rồi tô đầy vùng chọn bằng Alt+Backspace. Bỏ chọn bằng Ctrl+D.
  4. Giữ Shift khi vẽ lasso để cộng thêm vùng (vũ khí, tóc), giữ Alt để trừ bớt (khoảng hở giữa tay và thân) rồi tô tiếp.
  5. Lặp lại để có ít nhất 6 thumbnail cạnh nhau. Mỗi cái thử một hình chủ đạo hoặc một điểm phóng đại khác nhau.
  6. Thu nhỏ màn hình (Ctrl+-) cho tới khi mỗi thumbnail chỉ còn cỡ ngón tay. Cái nào vẫn đọc được là ứng viên tốt.
Mẹo: Để lại khoảng hở âm (negative space) giữa tay và thân, giữa hai chân. Khoảng trắng đó giúp silhouette rõ tư thế hơn rất nhiều.

Bảng màu riêng cho từng nhân vật

Khi đã chọn được silhouette, hãy khóa trong suốt layer (nút Lock Transparent Pixels (Khóa vùng trong suốt) hoặc phím /) rồi thử màu. Mỗi nhân vật nên có 3–5 màu chính: một màu chủ đạo chiếm diện tích lớn, một màu phụ và một màu nhấn nhỏ ở điểm muốn người chơi chú ý. Lưu các màu vào Swatches (Bảng mẫu màu) (WindowCửa sổ›SwatchesBảng mẫu màu) theo nhóm tên nhân vật để dùng lại cho sprite và icon sau này.

Lỗi hay gặp: Vẽ nét chi tiết ngay từ đầu rồi mới tô đen để "kiểm tra". Lúc đó bạn đã tiếc công sức và không dám thay đổi. Hãy bắt đầu bằng khối đặc, chi tiết để sau cùng.

Turnaround cơ bản

Turnaround là bản vẽ nhân vật ở nhiều góc: chính diện, 3/4, nghiêng và sau lưng. Nó giúp bạn (và animator) vẽ nhất quán ở mọi hướng.

  • Kẻ các đường ngang bằng Guides (Đường gióng) (ViewHiển thị›GuidesĐường gióng›New Guide) ở đỉnh đầu, cằm, vai, hông, gối và bàn chân.
  • Vẽ góc chính diện trước, sau đó dùng các đường guide để giữ chiều cao từng bộ phận khớp nhau ở các góc khác.
  • Với game 2D side-scroller, góc nghiêng thường là góc quan trọng nhất vì người chơi nhìn thấy nó nhiều nhất.

Mẹo & trick học nhanh

Lật ngang để soát lỗi

Dùng ViewHiển thị›Flip HorizontalLật ngang để lật khung nhìn. Mắt sẽ "tươi" lại và thấy ngay chỗ lệch tỉ lệ.

Thumbnail nhỏ, số lượng nhiều

Vẽ 20 thumbnail xấu nhanh còn hơn 1 thumbnail đẹp chậm. Số lượng giúp bạn tìm ra ý tưởng bất ngờ.

Test ở kích thước thật

Nhân đôi layer bằng Ctrl+J, thu nhỏ bằng Ctrl+T xuống đúng cỡ nhân vật trong game (ví dụ 64 px) để xem còn đọc được không.

Một điểm nhấn là đủ

Chọn một đặc điểm "chữ ký" (khăn quàng, cái sừng, chiếc balo) và phóng đại nó. Nhiều điểm nhấn quá sẽ làm rối silhouette.

Kiểm tra nhanh

1 Cách kiểm tra nhanh nhất xem một thiết kế nhân vật có "đọc được" hay không là gì?
2 Bạn muốn thiết kế một phản diện nhanh nhẹn và nguy hiểm. Hình chủ đạo phù hợp nhất là?
3 Khi vẽ thumbnail bằng Lasso Tool, tổ hợp phím nào tô đầy vùng chọn bằng màu Foreground?
4 Vì sao nhân vật game thường được phóng đại tỉ lệ (đầu to, vũ khí lớn)?
5 Trong bản turnaround, công cụ nào giúp giữ chiều cao các bộ phận khớp nhau giữa các góc nhìn?

Bài tập: 6 thumbnail silhouette cho một nhân vật

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