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ẽ.
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.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+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
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) (⌘ Cmd+⌥ Option+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àu | Mã hex | Vai trò trong style guide mẫu |
|---|---|---|
#3cc7a8 | Màu chủ đạo – 60% | |
#2a8f86 | Bóng của màu chủ đạo | |
#fff1c9 | Màu phụ – 30% | |
#ff7a59 | Màu nhấn – 10%, chỉ cho thứ nhặt được | |
#2b3a67 | Nền tối | |
#bfe6ff | Trời | |
#2b2240 | Màu nét viền (không dùng đen tuyền) | |
#6b4a8a | Màu bóng chung, Multiply (Nhân (làm tối)) |
Các bước
- 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.
- Dựng khung: 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". - Ô 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. - Ô 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. - 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
#000000dà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. - Ô Ánh sáng: khối cầu Ellipse Tool tô
#ff8a5c; layer kẹp (⌘ Cmd+⌥ Option+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". - Ô 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_Palettevà xuất file.acocho đồng đội (menu Swatches > Export Selected Swatches). - 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.
- Ô 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.
- 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.
- 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.
- Lưu, xuất, đặt vào dự án: lưu
doc_style_guide_v01.psd, xuất PNG vàoDocs/Artcủa dự án Unity 6 (ngoàiAssets). Mỗi khi đổi quy tắc, tăng phiên bản (_v02) và ghi ngày đổi ở góc trang. - 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.
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 () để đồng đội dùng đúng màu chỉ bằng một cú bấm.
Mẹo & trick học nhanh
"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.
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.
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.