PSD sang Unity UGUI: cắt PSD Photoshop bằng AI

VberAI Studio (viết tắt: AI Studio, ≠ Google AI Studio) làm hai việc mà lập trình viên UI Unity thực sự cần từ một tệp PSD: cắt (các layer trở thành sprite dùng được) và lắp ghép một prefab UI (xuất ra UGUI Prefab của Unity để bạn thả dưới Canvas). Bắt đầu tại đây: AI Studio. Thuật ngữ: PSD.

“Dùng AI để cắt PSD và lắp ghép prefab UI” không phải là một yêu cầu về bộ lọc. Nó có nghĩa là: nhà thiết kế đã giao một tệp .psd phân lớp—liệu đội kỹ thuật có thể bỏ qua bước “xuất PNG → kéo Image → chỉnh khoảng cách → đặt anchor” không?

Cắt và lắp ghép prefab không phải là cùng một bước

Công việc	Bạn nhận được gì	Vẫn phải làm thủ công
Chỉ cắt	Một đống PNG / sprite	Dựng lại vị trí, lồng ghép, anchor trong Hierarchy
Xuất bản dẹt	Một ảnh nền duy nhất	Nút bấm không ăn; chữ không sửa được
Cắt + lắp ghép prefab	Sprite và cấu trúc Canvas / Prefab	Nối sự kiện click, dữ liệu, logic safe-area bổ sung

Quy trình cũ tách hai việc đó ra: Photoshop cắt, Unity lắp ghép. Các plugin kiểu PSD2UGUI chạy trong editor phân tích ngay bên trong Unity và thường đòi hỏi quy tắc đặt tên layer. AI Studio phân tích trên một game canvas: xem cấu trúc, rồi xuất ra một Prefab—không phải một đống tệp rời rạc.

Danh sách từng phút khi nhập liệu nằm trong PSD sang Unity UI. Bài này là mức chuẩn nghiệm thu: “lắp ghép” nghĩa là gì, và những PSD nào sẽ không lắp ghép sạch sẽ.

Kết quả phải sẵn sàng cho UGUI

Một chuyển đổi dùng được bao gồm tất cả những điều sau:

1. Hình ảnh đã cắt — nền nút, icon, panel 9-slice thành các Image riêng biệt.
2. Chữ — ưu tiên TextMeshPro, không phải chữ được nướng vào texture (bạn cần điều này để đổi nội dung và bản địa hóa).
3. Cấu trúc — nhóm → con, khớp với nhóm trong PSD, không phải mọi thứ đổ hết xuống gốc Canvas.
4. Prefab — kéo thả vào Canvas có sẵn; RectTransform gần khớp với tọa độ thiết kế.

Nó không thay thế các handler OnClick, logic chấm đỏ, script safe-area, TMP font asset, hay quy tắc atlas của bạn. Những thứ đó đến sau khi prefab đã nằm trong dự án. Khi đã cài Unity MCP, Cursor / Claude Code có thể đổi tên node hàng loạt và nối tham chiếu.

Một PSD cần gì trước khi có thể cắt và lắp ghép

Mô hình không đoán widget từ một tấm poster. Tệp càng gần với cấu trúc UI, Prefab càng sạch.

Nên làm điều này	Vì sao
Mỗi widget một nhóm, tên dễ đọc (Btn_Start, Panel_HUD)	Ánh xạ thành gốc prefab / node nút bấm
Giữ nền, icon và chữ trên các layer riêng	Chúng trở thành Image / TMP thay vì một khối nướng chung
Tránh layer style khó đoán và blend mode lạ	Nếu không bạn chỉ nhận một ảnh raster và mất tính tương tác
Giao tệp .psd phân lớp, không phải PNG đã gộp	Ảnh dẹt dùng cắt tại chỗ và không có nhóm PSD

Group 47, tệp đã raster hóa hoàn toàn, và bóng đổ đóng dấu lên một layer vẫn cần dọn dẹp trên canvas hoặc trong Unity. Đó là thiếu cấu trúc, không phải bộ chuyển đổi thất bại.

Cách làm trong AI Studio

Nhãn nút bấm theo panel hiện tại.

1. Nhập PSD phân lớp

Mở AI Studio và nhập tệp .psd. Trong danh sách layer, xác nhận thanh trên, thanh dưới, các hộp thoại và nhóm nút vẫn là nhóm—chưa bị làm dẹt.

2. Đọc nó như UI, không phải như poster

Kiểm tra thứ tự vẽ, khoảng cách và các layer markup ẩn. Tách các control có thể click khỏi phần trang trí trước khi xuất. Để có alpha sạch, nối tiếp bước tách nền.

3. Xuất một prefab UGUI, không phải một đống sprite

Đặt engine là Unity. Ưu tiên UI hierarchy / Prefab. Ưu tiên TMP cho chữ; giữ 9-slice trên các panel co giãn được (theo từng panel).

4. Thả vào Canvas và kiểm tra nhanh

Nhập vào thư mục của nhóm (ví dụ Assets/UI/), đặt Prefab làm con dưới Canvas của scene. Chạy thử một lần ở 16:9 và ở tỷ lệ dọc mục tiêu; click theo luồng chính.

Nếu cùng màn hình đó cũng có trong Figma, dùng Figma → Unity. Godot / Cocos dùng chung canvas; bạn chỉ đổi đích xuất. Tên component khác nhau (Control / Widget); bước nghiệm thu vẫn như vậy.

Kiểm tra những điều này trong Unity trước

• Click không ăn — Canvas có Graphic Raycaster; các Image có thể chạm có Raycast Target bật.
• Sai kiểu chữ — gán một TMP Font Asset khi nó không phải font trong Photoshop.
• Mờ — filter của sprite, Canvas Scaler, Pixels Per Unit; đừng phóng icon nhỏ quá 100%.
• Anchor lệch — ghim riêng phần tràn viền và thanh sát cạnh; thêm safe area trong engine, đừng vẽ notch vào PSD.
• Bản PSD mới — dựng lại layout → xuất lại Prefab; đổi màu hai nút → sửa trong Unity.

So với plugin PSD-to-UGUI trong editor

	Plugin PSD2UGUI / quy tắc đặt tên trong editor	VberAI Studio
Chạy ở đâu	Cửa sổ Unity editor	Game canvas trên trình duyệt
Đầu vào	Chủ yếu PSD đặt tên theo plugin đó	PSD; ảnh dẹt qua cắt tại chỗ; cả Figma
Sau khi xuất	Tiếp tục dựng trong Unity	Sửa, tách, tách nền trên canvas, rồi phát ra Prefab
Logic	Viết tay hoặc công cụ tự làm	Unity MCP sau khi prefab đã nằm trong dự án

Plugin phù hợp với những nhóm đã tuân theo đặc tả layer của plugin. Canvas phù hợp với những lần bàn giao vẫn cần một lượt duyệt hình ảnh và lựa chọn Unity / Godot / Cocos. Cả hai đều không sửa được một PSD chỉ là bản mock đã làm dẹt—hãy phân lớp nó, hoặc dùng cắt tại chỗ.

Giới hạn

• Lần xuất đầu tiên hiếm khi là bản cuối có thể phát hành; font, ngôn ngữ, chuyển động và safe area vẫn phải hoàn thiện trong dự án.
• Layer style nặng có thể bị làm dẹt; bạn mất các control tương tác.
• VberAI Studio ≠ Google AI Studio; xem so sánh.

Tổng kết

Bạn không cần “thêm một lần cắt nữa.” Bạn cần cấu trúc PSD trở thành cấu trúc UGUI Prefab. Các lát cắt chỉ là trung gian; chỉ tính khi bạn có thể thả nó vào Canvas, click nó và sửa nội dung. Nhập một PSD phân lớp trong AI Studio, xuất một Prefab, rồi nối logic trong Unity.

Câu hỏi thường gặp

“AI cắt PSD và lắp ghép prefab UI” nghĩa là gì?
Cả hai việc cùng lúc: layer trở thành sprite, và nhóm PSD trở thành cấu trúc UGUI / Prefab của Unity—không phải một đống sprite.

VberAI có thể dựng một UGUI Prefab từ PSD không?
Có. Nhập một PSD phân lớp trong AI Studio, xuất một cấu trúc UI hoặc prefab Unity (theo từng panel), đặt nó làm con dưới Canvas, và kiểm tra nhanh.

Khác gì so với cắt PNG?
Cắt PNG làm mất tọa độ và nhóm. Một prefab giữ nguyên bố cục tương đối và cây node, nên đội kỹ thuật căn chỉnh ít hơn.

Nếu PSD không phân lớp thì sao?
Dùng cắt tại chỗ để nhận diện các control. Đừng dùng cách đó khi bạn đã có Figma hoặc một PSD phân lớp.

Nó có viết code cho nút bấm không?
Không. Prefab bao gồm phần hình ảnh và vùng chạm. Sự kiện và dữ liệu đi qua script hoặc Unity MCP.