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 236/248

Dự án 3: Quy ước đặt tên layer, file và cấu trúc thư mục

Học cách đặt tên như một đội chuyên nghiệp: tiền tố loại asset, tên tiếng Anh không dấu, số thứ tự hai chữ số, tên layer mô tả bộ phận – rồi dựng sơ đồ thư mục dự án Unity 6 ngay trong một file PSD mà chính tên layer của nó cũng đúng quy ước.

Nâng cao 60 phút ★★★ Dễ 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).

Một game 2D nhỏ cũng có vài trăm file ảnh. Nếu mỗi người đặt tên một kiểu – Layer 1 copy 3, nhanvat moi FINAL (2).png, untitled-4.psd – thì sau ba tuần không ai tìm được gì, lập trình viên nạp nhầm phiên bản, và animator mở PSD ra thấy 80 layer không tên. Studio nào cũng có một naming convention (quy ước đặt tên) và dành buổi đầu tiên của dự án để thống nhất nó. Làm đúng quy ước là cách nhanh nhất để một họa sĩ mới được đồng đội tin tưởng – vì file của bạn "mở ra là hiểu".

Hình mẫu

Sơ đồ quy ước đặt tên: cây thư mục dự án Unity bên trái với Assets, Art, Characters, Environment, UI, Source và các file như chr_hero_idle_01.png; bên phải bảng Layers có group hero và các layer head, hair_front, arm_L, arm_R, body, leg_L, leg_R, shadow; cột tên sai bị gạch đỏ, cột tên đúng có dấu tích xanh; mẫu tên loại_tên_biến thể_số và các tiền tố chr, env, ui, fx, itm
Sơ đồ quy ước đặt tên: cây thư mục dự án Unity bên trái với Assets, Art, Characters, Environment, UI, Source và các file như chr_hero_idle_01.png; bên phải bảng Layers có group hero và các layer head, hair_front, arm_L, arm_R, body, leg_L, leg_R, shadow; cột tên sai bị gạch đỏ, cột tên đúng có dấu tích xanh; mẫu tên loại_tên_biến thể_số và các tiền tố chr, env, ui, fx, itm

Thời gian ước tính: khoảng 1 giờ – 15 phút đọc và chọn quy ước, 30 phút dựng sơ đồ trong PSD, 15 phút đổi tên toàn bộ layer và kiểm tra.

Chuẩn bị

  • Canvas (khung vẽ): 1920 × 1080 px, Resolution (Độ phân giải) 72, RGB Color, nền #eef1f6. Bài nộp là file PSD – vì thứ được chấm chính là tên layer bên trong.
  • Công cụ chính: Layers panel (F7), bấm đúp vào tên layer để đổi tên, Group (Ctrl+G), Rectangle Tool (U), Type Tool (T), LayerLớp›Rename Layer, FileTệp›Export›Layers to Files để thử xuất theo tên.
  • Thiết bị: bài này là gõ phím và sắp xếp – chuột và bàn phím là đủ. Người dùng bút Wacom, XP-Pen, Huion hay iPad (Sidecar, Astropad) vẫn nên đặt bút xuống và dùng bàn phím để gõ tên; phím Tab khi đang đổi tên layer sẽ nhảy sang layer tiếp theo.
  • File mẫu: "Sơ đồ thư mục" ở cuối bài – bản tham khảo đầy đủ cây thư mục, mẫu tên file và bảng tiền tố. Bạn dựng lại theo dự án của mình, không chỉ chép ảnh.
Thành phầnQuy ướcVí dụ
Tiền tố loại3 chữ hoặc ít hơnchr, env, itm, ui, fx, bg
Têntiếng Anh, chữ thường, không dấuhero, tree_oak, btn_play
Biến thể / trạng tháimột từidle, run, normal, pressed, a, b
Số thứ tự2 chữ số01, 02 … 12
Phiên bản (chỉ PSD nguồn)_v + 2 chữ sốchr_hero_v03.psd
Tên layerbộ phận + phíaarm_L, leg_R, hair_front, shadow
MàuMã hexDùng cho
#ffb020Biểu tượng thư mục
#31a8ffFile PSD, mẫu tên
#e8423bVí dụ tên sai
#2ecc71Ví dụ tên đúng
#3a404bChữ chính

Các bước

Sáu giai đoạn: dựng hai khung thư mục và layer, đặt tiêu đề, viết cây thư mục, so sánh tên sai và đúng, viết mẫu tên, thêm bảng tiền tố
Sáu giai đoạn: dựng hai khung thư mục và layer, đặt tiêu đề, viết cây thư mục, so sánh tên sai và đúng, viết mẫu tên, thêm bảng tiền tố
  1. Hiểu vì sao phải theo quy ước: Unity sắp file theo bảng chữ cái, lập trình viên có thể nạp sprite bằng tên trong code, và công cụ tìm kiếm trong Project window lọc theo chữ. Tên đúng giúp chr_ nằm cạnh nhau, run_01…run_06 đúng thứ tự frame.
  2. Chọn tiền tố cho dự án: ghi bảng tiền tố (xem bảng trên). Quy tắc vàng: cả đội dùng chung một bảng. Nếu studio đã có quy ước khác (ví dụ spr_ cho mọi sprite) thì theo studio – quan trọng là nhất quán, không phải bảng nào "đúng nhất".
  3. Viết mẫu tên: loại_tên_biến thể_trạng thái_số.png. Chỉ chữ thường a–z, số, gạch dưới. Không dấu tiếng Việt, không khoảng trắng, không chữ hoa (trừ hậu tố phía _L, _R nếu đội đã quen).
  4. Danh sách từ cấm: final, new, copy, moi, sua, untitled, ngày tháng trong tên file. Phiên bản được quản lý bằng _v01 (ở PSD nguồn) hoặc bằng hệ thống quản lý phiên bản của đội – không bằng chữ "final".
  5. Tạo file PSD: FileTệp›NewTạo mới 1920 × 1080 px, nền #eef1f6. Đặt tên file ngay: doc_naming_convention_v01.psd. Đặt file mẫu lên trên để tham khảo, đặt tên layer mẫu là ref_template.
  6. Khung trái – cây thư mục: Rectangle Tool (U) vẽ khung trắng bo góc, đặt tên layer panel_folders. Type Tool (T) gõ cây thư mục, mỗi cấp thụt vào: Assets / Art / Characters / Hero, Enemies, Environment, Items, UI, FX và Source cho PSD gốc.
  7. Biểu tượng thư mục và file: vẽ hình thư mục màu #ffb020 bằng Shape, nhân bản bằng Ctrl+J cho mỗi dòng; file PSD dùng ô xanh #31a8ff. Gom vào Group icons_folders.
  8. Khung phải – nhân vật mẫu tách layer: đặt (hoặc vẽ nhanh) một nhân vật đơn giản tách thành các bộ phận, mỗi bộ phận một layer: head, hair_front, arm_L, arm_R, body, leg_L, leg_R, shadow. Gom vào Group hero. Đây là phần quan trọng nhất của bài – tên layer thật trong file của bạn.
  9. Quy ước phía L / R: thống nhất _L là bên trái của nhân vật (không phải bên trái màn hình). Ghi rõ điều này lên sơ đồ – đây là chỗ animator và họa sĩ cãi nhau nhiều nhất.
  10. Cột sai và đúng: gõ 4 ví dụ tên sai (gạch đỏ #e8423b) và 3 ví dụ đúng (tích xanh #2ecc71). Dùng ví dụ thật từ máy bạn – ai cũng có vài file Untitled-2.
  11. Đổi tên mọi layer trong chính file này: không layer nào được tên "Layer 12" hay "Rectangle 3". Mẹo: bấm đúp tên layer, gõ, rồi nhấn Tab để sang layer dưới mà không cần bấm chuột. Text layer tự lấy nội dung làm tên – đổi thành txt_title, txt_rules…
  12. Thử xuất theo tên: FileTệp›Export›Layers to Files chọn PNG-24 cho Group hero (ẩn các layer khác) – các file ra sẽ mang đúng tên layer. Đây là lý do tên layer quan trọng: nhiều công cụ xuất dùng thẳng tên đó.
  13. Áp dụng trong Unity 6: tạo đúng cây thư mục trong cửa sổ Project của Unity 6 (chuột phải > Create > Folder). Thư mục Source chứa PSD thường đặt ngoài Assets hoặc trong một thư mục mà đội đã thống nhất, để Unity không import file PSD nặng nếu không cần. Lưu PSD bài tập với tên đúng quy ước.
Mẹo: Dán bảng tiền tố lên cạnh màn hình (hoặc làm thành một layer ẩn trong file template của bạn). Sau hai tuần bạn sẽ gõ chr_, env_ không cần nghĩ – đó là lúc quy ước trở thành thói quen.
Lỗi hay gặp: Đặt tên có dấu tiếng Việt hoặc khoảng trắng (cây dừa 1.png). Trên Windows có thể vẫn mở được, nhưng hệ thống quản lý phiên bản, máy chủ build hay đồng đội dùng macOS có thể đọc sai ký tự, và code nạp asset theo tên sẽ lỗi. Luôn dùng chữ không dấu và gạch dưới.

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

  • Template PSD của riêng bạn: tạo file template_character.psd có sẵn các Group line, color, shadow, light đặt tên đúng – mỗi nhân vật mới chỉ cần mở template.
  • Đổi tên hàng loạt: thử FileTệp›Scripts›Image Processor hoặc công cụ đổi tên hàng loạt của hệ điều hành để chuẩn hóa một thư mục ảnh cũ.
  • Tài liệu một trang: xuất sơ đồ thành PNG, đặt vào Docs/Art của dự án để người mới vào đội đọc trước tiên.

Mẹo & trick học nhanh

Tab để đổi tên nhanh

Bấm đúp vào tên layer, gõ tên mới, nhấn Tab – Photoshop chuyển sang layer kế tiếp ở chế độ đổi tên. Đổi tên 20 layer chỉ mất một phút.

Số luôn hai chữ số

Viết run_01 … run_10 thay vì run_1 … run_10, để máy sắp đúng thứ tự frame (không bị 1, 10, 2, 3…).

Phía của nhân vật

arm_L là tay trái của nhân vật. Nhân vật nhìn về phía bạn thì tay trái nằm bên phải màn hình – ghi quy ước này lên sơ đồ.

Kiểm tra nhanh

1 Tên file nào đúng quy ước?
2 Vì sao nên đánh số frame là 01, 02 … thay vì 1, 2 …?
3 Phiên bản của PSD nguồn nên ghi thế nào?

Bài tập: File PSD sơ đồ quy ước đặt tên – mọi layer đều đúng tê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