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 › Quy trình làm việc ở studio game › Bài 239/248

Dự án 6: Style guide (art bible) một trang cho cả đội

Viết style guide một trang như studio thật: quy tắc hình khối theo phe, độ dày và màu nét viền, hướng sáng và số tông bóng, bảng màu với tỉ lệ 60 – 30 – 10, và cặp ví dụ Làm / Không làm – để năm họa sĩ vẽ ra một game trông như do một người vẽ.

Nâng cao 150 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).

Khi đội có từ hai họa sĩ trở lên, câu hỏi lớn nhất là: làm sao để mọi thứ trông như do một người vẽ? Câu trả lời của studio là style guide (còn gọi là art bible) – tài liệu ghi lại các quy tắc hình ảnh của game. Art bible của game lớn có thể dày hàng trăm trang, nhưng với đội nhỏ và game indie, một trang được ghim lên tường hiệu quả hơn nhiều: năm ô, mỗi ô một hình mẫu và một – hai dòng quy tắc ngắn. Quan trọng nhất là ô "Làm / Không làm": một ví dụ sai rõ ràng dạy nhanh hơn mười đoạn mô tả.

Hình mẫu

Style guide một trang của game Đảo Mây: ô Hình khối với tròn thân thiện, vuông vững chắc, tam giác nguy hiểm; ô Nét viền với mẫu viền 3 px màu tím đen đúng và viền đen dày sai; ô Ánh sáng với khối cầu chiếu từ trên trái và hai tông; ô Màu với tám màu và thanh tỉ lệ 60, 30, 10; ô Làm và Không làm với slime viền màu hai tông được tích và slime gradient mờ viền đen bị gạch
Style guide một trang của game Đảo Mây: ô Hình khối với tròn thân thiện, vuông vững chắc, tam giác nguy hiểm; ô Nét viền với mẫu viền 3 px màu tím đen đúng và viền đen dày sai; ô Ánh sáng với khối cầu chiếu từ trên trái và hai tông; ô Màu với tám màu và thanh tỉ lệ 60, 30, 10; ô Làm và Không làm với slime viền màu hai tông được tích và slime gradient mờ viền đen bị gạch

Thời gian ước tính: khoảng 2,5 giờ – 30 phút rút quy tắc từ các bài bạn đã vẽ, 90 phút vẽ hình mẫu cho năm ô, 30 phút viết câu quy tắc và thử với "họa sĩ mới".

Chuẩn bị

  • Canvas (khung vẽ): 1920 × 1080 px, Resolution (Độ phân giải) 72, RGB Color, nền #f5f6f8. Một trang vừa màn hình – không cuộn, nhìn một lần thấy hết.
  • Công cụ chính: Ellipse / Rectangle / Polygon Tool (U), Brush (Cọ vẽ) Tool (B) Hard Round, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G) cho bóng, Layer Style Stroke để làm nét viền mẫu, Type Tool (T), Swatches (Bảng mẫu màu) panel.
  • Thiết bị: ô Nét viền nên vẽ bằng bút – Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar, Astropad) với Pen Pressure (Lực nhấn bút) cho Size – để thể hiện đúng độ thon của nét bạn quy định. Dùng chuột: làm nét bằng Pen Tool (Bút tạo đường) (P) rồi Stroke Path với tùy chọn Simulate Pressure; các ô còn lại dựng bằng Shape rất ổn.
  • File mẫu: "Khung style guide 1 trang" ở cuối bài. Nên lấy hình mẫu từ chính nhân vật, đồ vật bạn đã vẽ ở các chặng trước – style guide mô tả phong cách của bạn.
MàuMã hexVai trò trong style guide mẫu
#3cc7a8Màu chủ đạo – 60%
#2a8f86Bóng của màu chủ đạo
#fff1c9Màu phụ – 30%
#ff7a59Màu nhấn – 10%, chỉ cho thứ nhặt được
#2b3a67Nền tối
#bfe6ffTrời
#2b2240Màu nét viền (không dùng đen tuyền)
#6b4a8aMàu bóng chung, Multiply (Nhân (làm tối))

Các bước

Sáu giai đoạn: chia năm ô, đặt tiêu đề từng ô, vẽ mẫu hình khối và nét viền, đổ bóng khối mẫu ánh sáng, thêm thanh tỉ lệ màu, viết ví dụ làm và không làm có tích và gạch
Sáu giai đoạn: chia năm ô, đặt tiêu đề từng ô, vẽ mẫu hình khối và nét viền, đổ bóng khối mẫu ánh sáng, thêm thanh tỉ lệ màu, viết ví dụ làm và không làm có tích và gạch
  1. Rút quy tắc từ bài đã vẽ: mở 3–4 bài bạn thích nhất ở các chặng trước, đặt cạnh nhau. Tự hỏi: viền dày bao nhiêu? Mấy tông bóng? Ánh sáng từ đâu? Màu nào lặp lại? Style guide tốt ghi lại điều bạn đã làm tốt, không phát minh phong cách mới.
  2. Dựng khung: FileTệp›NewTạo mới 1920 × 1080 px, đặt file mẫu, tạo 5 Group: sec_shape, sec_line, sec_light, sec_color, sec_dodont. Tiêu đề trang: tên game + "trang 1/1".
  3. Ô Hình khối: vẽ ba hình cơ bản bằng Shape: tròn #5fd17a, vuông #3d6fd6, tam giác #e8423b. Dưới mỗi hình một từ: Thân thiện (NPC, vật hồi máu), Vững chắc (đồ vật, nhà), Nguy hiểm (quái, bẫy). Đây là ngôn ngữ hình khối (shape language) của game.
  4. Ô Nét viền – quy tắc có số: vẽ một nét thon hai đầu và một khuôn mặt mẫu. Ghi rõ: "viền ngoài 3 px, nét trong 1,5 px, màu #2b2240". Quy tắc có con số thì ai cũng làm theo được; "nét vừa phải" thì không.
  5. Ví dụ sai trong ô Nét viền: bên cạnh, vẽ cùng khuôn mặt với viền đen tuyền #000000 dày 5 px và gạch chéo đỏ. Người đọc thấy ngay khác biệt mà không cần giải thích.
  6. Ô Ánh sáng: khối cầu Ellipse Tool tô #ff8a5c; layer kẹp (Ctrl+Alt+G) chế độ Multiply tô bóng #6b4a8a ở nửa dưới phải; một đốm sáng ở trên trái. Vẽ mặt trời và mũi tên chỉ hướng 45° từ trên trái, ghi "2 tông: nền + bóng, bóng Multiply".
  7. Ô Màu – bảng 8 màu: tám ô vuông với đúng mã hex. Lưu vào Swatches thành nhóm DaoMay_Palette và xuất file .aco cho đồng đội (menu Swatches > Export Selected Swatches).
  8. Thanh tỉ lệ 60 – 30 – 10: một thanh ngang chia ba đoạn: 60% màu chủ đạo, 30% màu phụ, 10% màu nhấn. Ghi quy tắc kèm theo: "màu cam nhấn chỉ dành cho thứ người chơi nhặt được" – màu có nhiệm vụ gameplay.
  9. Ô Làm / Không làm: vẽ cùng một con slime hai lần. Bên trái đúng style: viền màu, hai tông cel, đốm sáng gọn – dấu tích xanh. Bên phải sai: gradient mềm, Gaussian Blur, viền đen dày – dấu gạch đỏ. Chú thích một dòng dưới mỗi con.
  10. Viết quy tắc ngắn: mỗi ô tối đa hai dòng, mỗi dòng dưới 10 chữ. Bắt đầu bằng động từ hoặc con số: "Viền ngoài 3 px", "Sáng trên trái 45°", "Không dùng màu ngoài bảng". Đọc lại – câu nào có từ "nên", "có thể", "khoảng" thì sửa thành quy tắc rõ ràng.
  11. Thử với "họa sĩ mới": đưa trang cho một người bạn (hoặc tự làm sau một ngày), yêu cầu vẽ một bình thuốc chỉ theo trang này trong 15 phút. Chỗ nào họ vẽ khác ý bạn – quy tắc ở đó chưa đủ rõ, sửa lại.
  12. Lưu, xuất, đặt vào dự án: lưu doc_style_guide_v01.psd, xuất PNG vào Docs/Art của dự án Unity 6 (ngoài Assets). Mỗi khi đổi quy tắc, tăng phiên bản (_v02) và ghi ngày đổi ở góc trang.
  13. Kiểm tra trong Unity 6: đặt 3 asset vẽ theo style guide vào một Scene, chụp màn hình và đặt cạnh trang style guide. Ở kích thước thật trong game, viền 3 px có còn đọc được không? Nếu không, sửa con số trong quy tắc – style guide phục vụ hình ảnh trong game, không phải trên canvas phóng to.
Mẹo: Ví dụ "Không làm" nên là lỗi thật mà bạn hoặc đồng đội đã từng mắc. Lỗi tưởng tượng thì ai cũng tránh; lỗi thật mới là thứ lặp lại.
Lỗi hay gặp: Style guide toàn chữ mô tả cảm xúc: "phong cách tươi sáng, dễ thương, có chiều sâu". Mỗi người hiểu một kiểu. Thay mỗi tính từ bằng một hình mẫu và một con số – "dễ thương" thành "đầu chiếm 1/2 chiều cao, mắt to, viền bo tròn".

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

  • Trang 2 – nhân vật: tỉ lệ đầu / thân, độ to mắt, số ngón tay (3 hay 4?), cách vẽ tóc – các quy tắc riêng cho nhân vật.
  • Trang 3 – UI: font, bo góc nút, độ dày khung, màu trạng thái hover và disabled.
  • Libraries cho cả đội: đưa bảng màu và Layer Style viền vào một Library (WindowCửa sổ›Libraries) để đồng đội dùng đúng màu chỉ bằng một cú bấm.

Mẹo & trick học nhanh

Quy tắc phải có con số

"Viền 3 px màu #2b2240" ai cũng làm theo được. "Viền vừa phải, màu tối" thì mỗi người một kiểu.

Không làm dạy nhanh hơn Làm

Một cặp ví dụ đúng – sai đặt cạnh nhau giải thích phong cách nhanh hơn cả đoạn văn. Dành ít nhất 1/4 trang cho ô Làm / Không làm.

Màu có nhiệm vụ

Gán nhiệm vụ gameplay cho màu nhấn ("chỉ cho thứ nhặt được"). Người chơi sẽ học quy tắc đó mà không cần hướng dẫn.

Kiểm tra nhanh

1 Câu quy tắc nào hữu ích nhất trong style guide?
2 Tỉ lệ màu 60 – 30 – 10 nghĩa là gì?
3 Cách tốt nhất để kiểm tra style guide đã đủ rõ chưa?
4 Nên lưu style guide ở đâu trong dự án Unity 6?

Bài tập: Style guide một trang cho game 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