AI Studio के साथ PSD को Unity UI में 5 मिनट में कैसे आयात करें

क्यों PSD-to-Unity UI अभी भी टीमों को धीमा करता है

अधिकांश गेम UI अभी भी Photoshop में शुरू होता है। डिज़ाइनर बटन, पैनल, आइकन और टेक्स्ट स्टाइल के साथ एक लेयर्ड PSD देते हैं—फिर इंजीनियरिंग उसी पदानुक्रम को Unity के अंदर मैन्युअल रूप से बनाने में घंटों बिताती है: Canvas, RectTransform, Image, TextMeshPro, और नेस्टेड प्रीफ़ैब।

लक्ष्य सिर्फ “पिक्सेल को इंजन में लाना” नहीं है। आपको चाहिए:

• सही लेयर पदानुक्रम और नामकरण
• एंकर और सुरक्षित क्षेत्र जो विभिन्न रिज़ॉल्यूशन पर टिके रहें
• एकल-उपयोग दृश्य ऑब्जेक्ट के बजाय पुन: प्रयोज्य प्रीफ़ैब
• जब PSD बदलता है तो पुनरावृत्ति का एक रास्ता

यह मार्गदर्शिका VberAI Studio — VberAI का AI Studio — का उपयोग करके 5 मिनट का आयात वर्कफ़्लो दिखाती है, जो डिज़ाइन-से-इंजन पाइपलाइनों के लिए बनाया गया है (बाईं ओर PSD / Figma, दाईं ओर इंजन-तैयार आउटपुट)। हम यह भी कवर करते हैं कि आपको अपने PSD में क्या तैयार करना चाहिए ताकि आयात साफ रहे।

शुरू करने से पहले आपको क्या चाहिए

Unity खोलने से पहले ये इकट्ठा करें:

• Unity 2022.3 LTS या Unity 6 (UI Toolkit वैकल्पिक है; यह मार्गदर्शिका uGUI पर केंद्रित है)
• एक लेयर्ड PSD (फ्लैटन की गई PNG निर्यात नहीं)
• VberAI पर VberAI Studio (AI Studio)
• एक खाली या मौजूदा Unity प्रोजेक्ट जिसमें दृश्य में Canvas हो (Scale With Screen Size अनुशंसित)

PSD स्वच्छता जाँच सूची (सबसे अधिक समय बचाता है):

अभ्यास	यह क्यों मायने रखता है
प्रति लेयर समूह एक तार्किक विजेट	प्रीफ़ैब जड़ों से साफ मैप होता है
सुसंगत नाम (Btn_Start, Panel_HUD)	Unity Hierarchy में खोजना आसान
उन प्रभावों से बचें जिन्हें Photoshop अप्रत्याशित रूप से मर्ज करता है	Image घटकों पर कम मैन्युअल फिक्स
@1x निर्यात करें या अपने पैमाने का दस्तावेज़ीकरण करें	अत्यधिक बड़े RectTransforms को रोकता है

AI Studio के साथ 5 मिनट का वर्कफ़्लो

मिनट 1 — लेयर अपलोड और निरीक्षण करें

1. AI Studio खोलें और PSD से एक नया आयात बनाएँ।
2. अपनी .psd फ़ाइल अपलोड करें।
3. लेयर पैनल में, समूहों को UI ब्लॉक (हेडर, फ़ुटर, बटन पंक्ति, पॉपअप) से मेल खाते हुए पुष्टि करें।

AI Studio PSD संरचना को संरक्षित करता है, बजाय इसके कि आपको एक एकल टेक्सचर एटलस दे जिसे आपको रिवर्स-इंजीनियर करना हो।

मिनट 2 — कैनवास पर पूर्वावलोकन करें

1. रूट आर्टबोर्ड या मुख्य स्क्रीन समूह चुनें।
2. स्पेसिंग, फ़ॉन्ट और ओवरले क्रम सत्यापित करने के लिए केंद्र कैनवास का उपयोग करें।
3. इंस्पेक्टर में स्पष्ट समस्याओं को ठीक करें (समूहों का नाम बदलें, डीबग लेयर छिपाएँ)।

यदि कोई लेयर स्पष्ट रूप से सजावटी बनाम इंटरैक्टिव है, तो इसे अभी टैग या समूहित करें—इससे Unity में सफाई कम हो जाती है।

मिनट 3 — Unity UI सिमैंटिक्स में मैप करें

निर्यात सेटिंग्स में:

• लक्ष्य इंजन: Unity
• आउटपुट प्रकार: UI prefab / scene-ready hierarchy (केवल कच्चे स्प्राइट नहीं)
• जब उपलब्ध हो तो टेक्स्ट लेयर के लिए TextMeshPro पसंद करें
• 9-slice उम्मीदवारों (पैनल, बटन) को आकार बदलने योग्य चित्रों के रूप में रखें

AI Studio डिज़ाइन लेयर को इंजन अवधारणाओं में अनुवाद करता है: RectTransform लेआउट, Image स्प्राइट और टेक्स्ट घटक—न कि केवल Canvas पर गिराए गए फ्लैटन PNG।

मिनट 4 — Unity में निर्यात करें

1. Export to Unity पर क्लिक करें (या अपने Studio वर्कफ़्लो के अनुसार Unity पैकेज / प्रोजेक्ट पैच डाउनलोड करें)।
2. Unity में, पैकेज को Assets/UI/ (या आपकी टीम फ़ोल्डर परंपरा) में आयात करें।
3. जनरेटेड प्रीफ़ैब खोलें—Canvas चिल्ड्रन और एंकर की पुष्टि करें।

आपको एक प्रीफ़ैब पदानुक्रम दिखना चाहिए जो आपके PSD समूहों को दर्शाता है, जो मौजूदा Canvas के नीचे खींचने के लिए तैयार है।

मिनट 5 — दृश्य में डालें और स्मोक-टेस्ट करें

1. प्रीफ़ैब को अपने दृश्य Canvas में खींचें।
2. Play Mode दर्ज करें और 16:9 और एक लंबे फ़ोन पहलू अनुपात पर परीक्षण करें।
3. किसी भी एंकर या फ़ॉन्ट फ़ॉलबैक समस्या पर ध्यान दें; अभी PSD राउंड-ट्रिप में नहीं, बल्कि प्रीफ़ैब मोड में समायोजित करें।

यदि आप संपादक ऑटोमेशन के लिए Unity MCP का भी उपयोग करते हैं, तो आप अपने AI क्लाइंट से आयात के बाद नोड्स का बैच-नाम बदलने या बटन संदर्भों को वायर करने के लिए कह सकते हैं—यह तब उपयोगी होता है जब PSD में सामान्य लेयर नाम जैसे Group 47 हों।

मैन्युअल विकल्प (जब आप AI Studio छोड़ते हैं)

ऑटोमेशन के बिना, क्लासिक पथ है:

1. Photoshop से स्लाइस PNG के रूप में निर्यात करें
2. Unity में स्प्राइट आयात करें
3. मैन्युअल रूप से Image / Text ऑब्जेक्ट बनाएँ
4. RectTransform एंकर के साथ लेआउट का पुनर्निर्माण करें

एक स्क्रीन के लिए इसमें अक्सर 30–90 मिनट लगते हैं, यही कारण है कि टीमें आवर्ती UI कार्य के लिए डिज़ाइन-से-इंजन टूल अपनाती हैं।

आयात के बाद सामान्य सुधार

टेक्स्ट गलत दिखता है — एक TMP फ़ॉन्ट एसेट असाइन करें जो आपकी डिज़ाइन भाषा से मेल खाता हो; फ़ॉलबैक फ़ॉन्ट अक्सर Photoshop से भिन्न होते हैं।

डिवाइस पर धुंधला UI — Canvas Reference Resolution और स्प्राइट Pixels Per Unit जाँचें; छोटे आइकन को 100% से ऊपर स्केल करने से बचें।

बटन क्लिक नहीं करते — सुनिश्चित करें कि Canvas पर Graphic Raycaster और इंटरैक्टिव Images पर Raycast Target सक्षम है।

iPhone पर सुरक्षित क्षेत्र क्लिप हो गया — प्रीफ़ैब रूट पर एक रूट Safe Area लेआउट समूह या पैडिंग जोड़ें।

कब पुन: आयात करें बनाम Unity में पैच करें

स्थिति	अनुशंसा
डिज़ाइनर ने 2 बटनों पर रंग बदले	Unity में प्रीफ़ैब पैच करें
लेआउट पुनर्गठित (नया मेनू टैब)	AI Studio में PSD पुन: आयात करें
नई स्क्रीन जोड़ी गई	नया PSD आर्टबोर्ड → नया प्रीफ़ैब
स्थानीयकरण जोड़ा गया	Unity में TMP + स्ट्रिंग टेबल पसंद करें

लेआउट के लिए PSD को स्रोत के रूप में रखना, और वायरिंग और व्यवहार के लिए Unity को, मर्ज दर्द से बचाता है।

यह VberAI स्टैक में कैसे फिट बैठता है

VberAI Studio डिज़ाइन → Unity UI संरचना को संभालता है। Unity MCP (वैकल्पिक) आयात के बाद दोहराए जाने वाले संपादक कार्यों को स्क्रिप्ट करने में मदद करता है—बटन हुक करना, स्प्राइट बदलना, या प्रीफ़ैब संदर्भों को मान्य करना। AI Super Matting तब उपयोगी होता है जब आइकन लेयर को Image घटक बनने से पहले साफ अल्फा की आवश्यकता होती है।

एक साथ, वे मॉकअप से प्लेयेबल UI तक के लूप को छोटा करते हैं, बिना Photoshop को डिज़ाइन टूल के रूप में त्यागे जो आपके कलाकार पहले से उपयोग करते हैं।

निष्कर्ष

PSD को Unity UI में पाँच मिनट में आयात करना तब यथार्थवादी है जब आप PSD को संरचित डेटा के रूप में मानते हैं—एक एकल छवि के रूप में नहीं—और मैन्युअल RectTransform कार्य के बजाय Unity-तैयार पदानुक्रम उत्सर्जित करने के लिए AI Studio का उपयोग करते हैं। नामित लेयर समूह तैयार करें, Unity UI सिमैंटिक्स के साथ निर्यात करें, प्रीफ़ैब को अपने Canvas के नीचे गिराएँ, और दो पहलू अनुपातों का स्मोक-टेस्ट करें।

अपनी अगली स्क्रीन पर इसे आज़माने के लिए तैयार हैं? VberAI Studio खोलें, एक लेयर्ड PSD अपलोड करें, और एक बैठक में अपना पहला Unity UI प्रीफ़ैब निर्यात करें।