Lộ trình › Thiết kế nhân vật & sinh vật › Bài 140/218

Dự án 12: Nhân vật dân gian Việt – Thánh Gióng

Thiết kế key art 1920 × 1080 px cho nhân vật Thánh Gióng phong cách game: giáp sắt, ngựa sắt phun lửa, bụi tre nhổ bật gốc, nền hoa văn trống đồng – stylized nhưng trân trọng truyền thuyết.

Nâng cao 360 phút ★★★ Khó Hướng dẫn cho macOS · đổi sang Windows

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ở (⌘ Cmd+O).

Thánh Gióng – Phù Đổng Thiên Vương – là người anh hùng trong truyền thuyết Việt Nam: cậu bé lên ba bỗng vươn vai thành tráng sĩ, mặc giáp sắt, cưỡi ngựa sắt phun lửa đánh tan giặc Ân; khi roi sắt gãy, chàng nhổ bụi tre bên đường quật vào quân giặc, rồi bay về trời. Khi thiết kế nhân vật dân gian cho game, mục tiêu là stylized để hấp dẫn người chơi trẻ nhưng giữ đúng các biểu tượng của truyền thuyết và tinh thần trang trọng – không biến người anh hùng thành trò cười.

Hình mẫu

Tráng sĩ giáp sắt viền đồng, mũ sắt chỏm đỏ, áo choàng đỏ, giơ cao bụi tre nhổ cả gốc, cưỡi ngựa sắt bờm lửa phun lửa, nền hoa văn trống đồng trên trời hoàng hôn
Tráng sĩ giáp sắt viền đồng, mũ sắt chỏm đỏ, áo choàng đỏ, giơ cao bụi tre nhổ cả gốc, cưỡi ngựa sắt bờm lửa phun lửa, nền hoa văn trống đồng trên trời hoàng hôn

Thời gian ước tính: khoảng 6 giờ. Bốn biểu tượng không được thiếu: giáp sắt, ngựa sắt, lửa (từ miệng và bờm ngựa), bụi tre. Nền dùng vòng hoa văn trống đồng Đông Sơn (mặt trời nhiều tia ở tâm, các vòng đồng tâm) để định vị văn hóa Việt ngay lập tức.

Chuẩn bị

  • Canvas: 1920 × 1080 px (16:9 – ảnh bìa game, màn hình tải), Resolution (Độ phân giải) 72, RGB Color, Background Contents: White.
  • Tư liệu: xem ảnh trống đồng Ngọc Lũ hoặc Đông Sơn, tranh dân gian Đông Hồ về Thánh Gióng, ảnh tượng đài Thánh Gióng ở Sóc Sơn. Ghi lại hình dạng tia mặt trời trên mặt trống và tư thế ngựa phi.
  • Công cụ chính: Brush (Cọ vẽ) Tool (B), Pen Tool (Bút tạo đường) (P), Ellipse Tool + Polygon Tool cho hoa văn, Gradient (Dải màu chuyển) Tool (G), Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), Color Dodge (Làm sáng rực), Overlay (Phủ chồng), Layer Mask (Mặt nạ lớp).
  • Thiết bị: đây là bài Khó – nét phác dáng ngựa phi và lửa cần sự liền mạch. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (Pen Pressure (Lực nhấn bút) cho Size và Opacity (Độ mờ đục)) là lựa chọn tốt nhất. Dùng chuột vẫn hoàn thành được: dựng ngựa từ các khối elip và trụ (Shape), lửa bằng Pen Tool nhiều thùy, ánh lửa bằng Gradient Radial thay cho Brush mềm.
  • File mẫu: "Khung bố cục Thánh Gióng" – đặt trên cùng, Blend Mode Multiply, khóa lại.
MàuMã hexDùng cho
#4a5568Giáp sắt (bóng #2f3646)
#c98a3aViền đồng, móng ngựa
#3a4150Ngựa sắt (bóng #262b36, sáng #6b7590)
#ff7a2fLửa (lõi #ffd23f)
#d62f3aÁo choàng, chỏm mũ (bóng #a01f2b)
#5fb04aThân tre (lá #7bd96b)
#ffb35cTrời trên (gradient)
#e8573bTrời giữa – hoàng hôn
#ffe0a0Hoa văn trống đồng (Opacity 45%)

Các bước

Sáu giai đoạn: phác dáng ngựa phi và đường hành động, nét viền, màu nền, đổ bóng kim loại, ánh lửa, nền trống đồng và chữ
Sáu giai đoạn: phác dáng ngựa phi và đường hành động, nét viền, màu nền, đổ bóng kim loại, ánh lửa, nền trống đồng và chữ
  1. Thumbnail bố cục: trên canvas tạm 480 × 270 px vẽ 4 thumbnail đen trắng trong 10 phút: ngựa phi sang phải, chàng giơ tre lên trời; ngựa chồm hai chân trước; nhìn từ dưới lên… Chọn bản có đường hành động mạnh nhất – một đường cong từ vó ngựa sau lên tới ngọn tre.
  2. Phác lớn (Sketch): trên canvas 1920 × 1080, theo khung mẫu: ngựa chiếm 1/3 dưới – giữa, thân ngựa là elip nghiêng, cổ vươn về phía phải, 2 chân trước co lên (đang phi), 2 chân sau trụ đất. Tráng sĩ ngồi trên lưng, tay phải giơ bụi tre chéo lên góc trên – phải.
  3. Tỉ lệ người anh hùng: dù stylized, Gióng là tráng sĩ khổng lồ – vẽ người cưỡi to so với ngựa hơn tỉ lệ thật (đầu khoảng 3 đầu cho toàn thân), vai rộng, ngực ưỡn. Biểu cảm quyết tâm: lông mày xiên, miệng mím.
  4. Nét viền ngựa sắt: layer Line_Horse, Brush cứng 8 px (hoặc Pen Tool + Stroke Path). Chia khối như tượng sắt đúc: cổ, thân, đùi là các mảng lớn có đường nối tấm sắt. Mắt ngựa là một chấm lửa vàng.
  5. Nét viền tráng sĩ: layer Line_Hero: mũ sắt tròn có chỏm tua đỏ, giáp ngực chia 2 vạch đồng, vai giáp tròn, đai đồng ở hông, áo choàng đỏ bay ngược về sau (cho thấy tốc độ).
  6. Bụi tre: 3 thân tre thẳng tỏa ra từ tay, mỗi thân có đốt (vạch ngang ngắn), ngọn có các lá dài nhọn; gốc tre có vài sợi rễ – chi tiết "nhổ bật gốc" rất quan trọng với truyền thuyết.
  7. Màu nền (Flat): tô màu từng khối dưới layer nét. Kim loại giáp và ngựa dùng xám xanh lạnh, đối lập với lửa và trời hoàng hôn nóng – tương phản nóng/lạnh làm nhân vật nổi bật.
  8. Đổ bóng kim loại: layer Multiply kẹp vào giáp và ngựa, tô mảng bóng cứng #262b36 ở nửa dưới thân ngựa và mặt khuất của giáp. Kim loại sẫm có tương phản mạnh: vùng tối rất tối, vệt sáng rất sáng, ít tông trung gian.
  9. Lửa: Pen Tool vẽ bờm lửa nhiều ngọn dọc cổ ngựa, đuôi lửa, và luồng lửa phun ra từ miệng ngựa hướng về phía phải. Mỗi ngọn lửa có lõi vàng #ffd23f trên layer kẹp.
  10. Ánh lửa phản chiếu: layer mới Blend Mode Color Dodge, Brush mềm (hoặc Gradient Radial) màu #ff7a2f Opacity 30%, tô nhẹ lên mép kim loại gần lửa: cổ ngựa, giáp vai, mặt tráng sĩ. Đây là bước làm kim loại "sống" – nó nhận ánh sáng từ lửa.
  11. Nền trời và trống đồng: layer nền dưới cùng, Gradient Linear 3 điểm #ffb35c – #e8573b – #7a2238. Trên đó, layer Drum: Ellipse Tool vẽ 4 vòng tròn đồng tâm (nét liền, nét đứt), ở tâm vẽ ngôi sao nhiều tia bằng Polygon Tool (Star, 14 cánh). Màu #ffe0a0, Opacity 45%, đặt tâm trống sau đầu ngựa – chiếc "vầng hào quang" văn hóa.
  12. Mặt đất và tiền cảnh: đồi tối #4a1a2a uốn lượn ở đáy, vài bóng giáo giặc gãy đổ – chỉ là bóng đen nhỏ, không vẽ cảnh bạo lực chi tiết. Ánh sáng tập trung vào người anh hùng.
  13. Chữ tiêu đề và kiểm tra: Type Tool (T) gõ "THÁNH GIÓNG" bằng font có dấu tiếng Việt đầy đủ (Be Vietnam Pro, Montserrat…), Layer Style Stroke và nền dải tối 75%. Thu nhỏ 25%: ngựa, tre và lửa vẫn đọc được. Xuất FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG hoặc JPG chất lượng 90 → thanh_giong_keyart.png 1920 × 1080 px.
  14. Đưa vào Unity 6: dùng làm màn hình tải hoặc menu chính: Texture Type Sprite (2D and UI), Max Size 2048, Compression Normal Quality. Trong Canvas (Canvas Scaler: Scale With Screen Size, Reference 1920 × 1080, Match 0.5), thêm Image phủ toàn màn hình. Nếu tách layer ngựa + người, nền và lửa ra 3 PNG, bạn có thể làm hiệu ứng parallax nhẹ hoặc cho lửa nhấp nháy bằng Animation đổi Alpha.
Mẹo: Trước khi stylized, liệt kê "biểu tượng không thể thay đổi" của nhân vật dân gian (với Gióng: giáp sắt, ngựa sắt, lửa, tre) và "vùng tự do sáng tạo" (kiểu mũ, hoa văn giáp, màu áo choàng). Sáng tạo thoải mái trong vùng tự do, giữ nguyên biểu tượng – người xem Việt sẽ nhận ra và thấy được tôn trọng.
Lỗi hay gặp: Vẽ Thánh Gióng giống hiệp sĩ châu Âu (giáp tấm phương Tây, khiên có huy hiệu, ngựa bọc giáp xích) hoặc samurai. Hãy dùng các yếu tố gợi văn hóa Việt cổ: hoa văn Đông Sơn, giáp vảy đơn giản, tre, màu đỏ – đồng.

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

  • Hai giai đoạn của truyền thuyết: làm thêm thẻ nhân vật "cậu bé làng Gióng" (3 tuổi, nằm im) cạnh "tráng sĩ" – hai trạng thái của cùng một nhân vật trong game.
  • Sơn Tinh – Thủy Tinh: áp dụng quy trình cho cặp đối thủ: Sơn Tinh tông xanh lá – nâu đất với núi đồi, Thủy Tinh tông xanh biển với sóng nước; hình chủ đạo vuông (núi vững) và tam giác/lượn sóng (nước dữ).
  • Phiên bản sprite: từ key art, rút gọn thành nhân vật game 512 × 512 (ít chi tiết, nét dày hơn) để dùng trong màn chơi.

Mẹo & trick học nhanh

Nóng – lạnh để nổi bật

Giáp và ngựa sắt tông lạnh (xám xanh) đặt trên nền và lửa tông nóng (cam đỏ) – tương phản nhiệt độ màu giúp người anh hùng tách khỏi nền mà không cần viền dày.

Hoa văn nền vừa đủ

Trống đồng ở nền chỉ Opacity 40–50% và ít chi tiết. Nếu hoa văn quá rõ, nó tranh mất sự chú ý của nhân vật.

Font có dấu tiếng Việt

Kiểm tra font hiển thị đúng "Ó" và "Á" trước khi chọn. Nhiều font trang trí tiếng Anh làm vỡ dấu – chữ tiêu đề trông cẩu thả.

Kiểm tra nhanh

1 Biểu tượng nào KHÔNG nên lược bỏ khi stylized Thánh Gióng?
2 Vì sao dùng Color Dodge tô nhẹ màu cam lên mép kim loại gần lửa?
3 Yếu tố nền nào giúp định vị văn hóa Việt ngay lập tức trong hình mẫu?
4 Thiết lập Canvas Scaler nào giữ key art 1920 × 1080 vừa mọi màn hình trong Unity?

Bài tập: Key art nhân vật dân gian Việ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