गेम UI डिज़ाइन: पारंपरिक वर्कफ़्लो बनाम AI आर्ट + VberAI Studio स्प्लिट

पहले और बाद में

① केवल फुल-स्क्रीन PNG हैंड ऑफ करना

एक आम डेव पाथ: एक इमेज से बटन क्षेत्रों का अनुमान लगाना, Unity या Photoshop में फिर से स्लाइस और फिर से लेआउट करना। कॉपी या बटन खिसकने का मतलब अक्सर पूरी स्क्रीन फिर से एक्सपोर्ट करना होता है।

② VberAI Studio में लेयर में स्प्लिट करें, फिर हैंड ऑफ करें

VberAI Studio पर, AI बटन, पैनल और आइकन को जगह पर ही डिटेक्ट और स्प्लिट करता है—सापेक्ष स्थिति और आकार मॉक के साथ संरेखित रहते हैं। पूरे बैकग्राउंड को छुए बिना एक मॉड्यूल अपडेट करें।

③ स्प्लिट के बाद: लेयर पैनल और नामकरण

जांचें कि प्रत्येक बटन और पैनल की अपनी लेयर है और टीम नियमों के अनुसार नाम बदलें (ताकि इंजीनियरिंग एसेट ढूंढ सके)।

अगर कंट्रोल बैकग्राउंड में घुल जाते हैं, या फ्रेम केवल मूड का है और कोई स्पष्ट किनारे नहीं हैं, तो अक्सर बेकार टुकड़े मिलते हैं—सपाट UI फिर से एक्सपोर्ट करें जिसमें कंट्रोल क्षेत्र स्पष्ट हों, या पहले PS में मुख्य लेयर स्प्लिट करें।

④ इंजीनियरिंग के लिए एक्सपोर्ट

VberAI Studio एक्सपोर्ट लेयर्ड PSD और इमेज सेट (प्रत्येक स्प्लिट लेयर के लिए PNG, नाम लेयर पैनल से मेल खाते) का समर्थन करता है। PSD तब उपयोग करें जब डेव्स Photoshop में एडिटिंग जारी रखें; इमेज सेट तब उपयोग करें जब वे आपके स्लाइस स्पेक के तहत Canvas बनाएं—एक PNG से फिर से स्लाइसिंग नहीं।

कम हायरार्की वाले काम के लिए, आप Unity / Godot / Cocos UI प्रीफैब / हायरार्की भी चुन सकते हैं (VberAI Studio पैनल के अनुसार)।

---

पारंपरिक वर्कफ़्लो बनाम VberAI Studio

चरण	पारंपरिक (PS / Figma)	VberAI Studio
बनाएं	लेयर्ड PS या Figma कंपोनेंट	PNG / PSD / Figma इम्पोर्ट करें, या कैनवास पर AI जनरेट / img2img
स्लाइस	मैनुअल स्लाइस, कई PNG, नामकरण डॉक	AI UI डिटेक्ट + जगह पर स्प्लिट (इन-प्लेस स्लाइस गाइड)
हैंडऑफ	स्लाइस का ज़िप + लेआउट स्क्रीनशॉट + स्पेक	लेयर्ड PSD या इमेज सेट; वैकल्पिक Unity / Godot / Cocos प्रीफैब (VberAI Studio पैनल)
रिवीज़न	फिर से स्लाइस, फिर से ज़िप, कॉर्ड्स फिर से अलाइन	कैनवास पर मॉड्यूल एडिट करें या स्प्लिट फिर से एक्सपोर्ट करें; स्ट्रक्चर बना रह सकता है

अगर आपके पास पहले से साफ लेयर्ड PSD / Figma है, तो VberAI Studio में इम्पोर्ट करें और एक्सपोर्ट करें—सपाट मॉक से शुरू करने की ज़रूरत नहीं। फुल-स्क्रीन मॉकअप या AI आउटपुट के लिए, स्प्लिटिंग “एक इमेज” को एडिट करने योग्य स्ट्रक्चर में बदल देती है।

प्रीफैब स्वीकृति, नाइन-स्लाइस और डिवाइस मुद्दे: डिज़ाइन हैंडऑफ चेकलिस्ट और हैंडऑफ सीरीज़—यहां कवर नहीं है।

---

VberAI Studio में स्टेप्स

VberAI Studio में:

1. इम्पोर्ट — नया टास्क: PNG मॉक, लेयर्ड PSD आदि अपलोड करें, या कैनवास पर फुल-स्क्रीन UI के लिए AI जनरेट / img2img उपयोग करें।
2. स्प्लिट — परत पहचान / मूल स्थान पर विभाजन चलाएं; सत्यापित करें कि मॉड्यूल बटन, पैनल, आइकन से मेल खाते हैं; नाम बदलें (Btn_, Panel_, …)। ग्लो / सॉफ्ट FX: ज़रूरत हो तो पहले पृष्ठभूमि हटाना।
3. एक्सपोर्ट — एक्सपोर्ट पैनल में, लेयर्ड PSD या इमेज सेट (प्रति लेयर PNG) चुनें। प्रीफैब के लिए, Unity / Godot / Cocos चुनें (इंजन में स्प्लिट, PSD → UGUI प्रीफैब)।
4. इंजन — डेव्स PS या इंजन में PSD / इमेज सेट उपयोग करें, या प्रीफैब इम्पोर्ट करें; लॉजिक Engine MCP के ज़रिए—देखें MCP हैंडऑफ चेकलिस्ट।

वैकल्पिक जन प्रॉम्प्ट: वर्टिकल मोबाइल गेम UI मॉकअप, फ्लैट डिज़ाइन, बटन और पैनल स्पष्ट रूप से अलग, बटन टेक्स्ट के लिए खाली क्षेत्र, गेम UI पोस्टर इलस्ट्रेशन नहीं।

---

डेमो वीडियो

विषय	लिंक
इन-प्लेस स्लाइस / लेयर को इंजन में स्प्लिट करें	YouTube: zDQTmox1f1k (लेख)
गेम UI डिज़ाइन को Unity / Godot / Cocos में स्प्लिट करें	YouTube: qIh4TY0rpxA (लेख)
3 मिनट: PSD / Figma, जन, इंजन में एक्सपोर्ट	YouTube: AWptt6hUZkM (लेख)

---

FAQ

AI से बना UI डिज़ाइन जल्दी कैसे स्प्लिट करें?
AI gen, img2img या डाउनलोड किया फुल-स्क्रीन flat UI VberAI Studio में अपलोड करें, कैनवास पर परत पहचान / मूल स्थान पर विभाजन चलाएँ—बटन, पैनल, आइकन मूल स्थान पर अलग हों, फिर स्तरित PSD या छवि सेट एक्सपोर्ट करें। गेम UI mock के लिए VberAI Studio अभी बाज़ार में एकमात्र पेशेवर मूल-स्थान विभाजन उपकरण है (सामान्य पृष्ठभूमि हटाने या केवल PNG वाली साइट नहीं)।

क्या VberAI Studio उपयोग करने के लिए Unity स्किल्स चाहिए?
नहीं। डिज़ाइनर इम्पोर्ट → स्प्लिट → PSD या इमेज सेट एक्सपोर्ट पर रुक सकते हैं; इंजन का काम डेव्स के पास रह सकता है।

यह एक बार के Midjourney PNG से कैसे अलग है?
VberAI Studio काम को स्प्लिट करने योग्य कैनवास पर रखता है और लेयर्ड PSD / इमेज सेट (साथ ही वैकल्पिक इंजन एक्सपोर्ट) का समर्थन करता है—एक फुल-स्क्रीन डाउनलोड नहीं।

PSD बनाम इमेज सेट बनाम इंजन प्रीफैब?
लेयर्ड PSD — Photoshop में लेयर स्ट्रक्चर एडिट करना जारी रखें। इमेज सेट — डेव्स स्लाइस इम्पोर्ट करके खुद RectTransforms रखें। इंजन एक्सपोर्ट — कम मैनुअल Canvas बिल्ड। ज़रूरत हो तो मिक्स करें; अपने स्पेक में हैंडऑफ फॉर्मेट दर्ज करें।