PSD to Unity UGUI: AI से Photoshop PSD स्लाइस कर Prefab बनाएँ
PSD to Unity prefab workflow: VberAI Studio में layered Photoshop PSD स्लाइस करें, Unity UGUI hierarchy और Prefab एक्सपोर्ट करें—not loose PNGs.
- vberai
- ai-studio
- psd
- unity
- ugui
- prefab
- ui-slicing
- psd-to-unity
- psd2ugui
- tutorial
VberAI Studio (संक्षेप: AI Studio, ≠ Google AI Studio) वे दो काम करता है जो Unity UI प्रोग्रामर को एक PSD से वास्तव में चाहिए: स्लाइस (लेयर उपयोगी sprites बन जाते हैं) और UI prefab असेंबल करना (एक Unity UGUI Prefab एक्सपोर्ट करें जिसे आप Canvas के नीचे डालते हैं)। यहाँ से शुरू करें: AI Studio। शब्दावली: PSD।
“AI का उपयोग करके PSD को स्लाइस करें और UI prefab असेंबल करें” कोई फ़िल्टर अनुरोध नहीं है। इसका मतलब है: डिज़ाइनर ने एक लेयर्ड .psd सौंपा—क्या इंजीनियरिंग “PNG एक्सपोर्ट करें → Images ड्रैग करें → स्पेसिंग ठीक करें → anchors सेट करें” को छोड़ सकती है?
स्लाइसिंग और prefab असेंबल करना एक ही चरण नहीं हैं
| काम | आपको क्या मिलता है | अभी भी मैन्युअल |
|---|---|---|
| केवल स्लाइस | PNGs / sprites का ढेर | Hierarchy में position, nesting, anchors दोबारा बनाना |
| flatten एक्सपोर्ट | एक background image | Buttons हिट नहीं करते; copy एडिट करने योग्य नहीं |
| स्लाइस + prefab असेंबल | Sprites और एक Canvas hierarchy / Prefab | क्लिक, डेटा, अतिरिक्त safe-area लॉजिक वायर करें |
पुरानी पाइपलाइन इन कामों को अलग कर देती है: Photoshop स्लाइस करता है, Unity असेंबल करता है। इन-एडिटर PSD2UGUI-शैली के प्लगइन Unity के अंदर पार्स करते हैं और आमतौर पर लेयर-नेमिंग नियमों की मांग करते हैं। AI Studio एक game canvas पर पार्स करता है: hierarchy देखें, फिर एक Prefab एक्सपोर्ट करें—बिखरी फ़ाइलों का ढेर नहीं।
मिनट-दर-मिनट इम्पोर्ट सूची PSD to Unity UI में है। यह लेख स्वीकृति की कसौटी है: “असेंबल” का क्या मतलब है, और कौन-से PSD साफ़-सुथरे असेंबल नहीं होंगे।
आउटपुट UGUI-ready होना चाहिए
एक उपयोगी कन्वर्ज़न में ये सब शामिल हैं:
- स्लाइस की गई कला — button backs, icons, 9-slice panels अलग Images के रूप में।
- टेक्स्ट — TextMeshPro पसंद करें, texture में जले हुए glyphs नहीं (copy बदलने और localize करने के लिए यह चाहिए)।
- Hierarchy — groups → children, PSD groups से मेल खाते हुए, सब कुछ Canvas root पर नहीं डाला गया।
- Prefab — मौजूदा Canvas पर ड्रैग करें; RectTransforms मोटे तौर पर डिज़ाइन निर्देशांकों से मेल खाते हैं।
यह OnClick handlers, red-dot लॉजिक, safe-area स्क्रिप्ट, TMP font assets, या आपके atlas नियमों को प्रतिस्थापित नहीं करता। वे prefab के प्रोजेक्ट में आने के बाद आते हैं। Unity MCP इंस्टॉल होने पर, Cursor / Claude Code नोड्स का बैच-रीनेम और रेफ़रेंस वायर कर सकते हैं।
स्लाइस और असेंबल होने से पहले PSD को क्या चाहिए
मॉडल किसी पोस्टर से widgets का अनुमान नहीं लगा रहा। फ़ाइल UI संरचना के जितनी करीब होगी, Prefab उतना साफ़ होगा।
| यह करें | क्यों |
|---|---|
प्रति group एक widget, पढ़ने योग्य नाम (Btn_Start, Panel_HUD) | prefab roots / button nodes से मैप होते हैं |
| plate, icon, और type को अलग लेयर पर रखें | वे एक bake के बजाय Image / TMP बनते हैं |
| अप्रत्याशित layer styles और अजीब blend modes से बचें | वरना आपको एक raster मिलता है और interaction खो जाता है |
लेयर्ड .psd सौंपें, merged PNG नहीं | Flat comps in-place slice का उपयोग करते हैं और उनमें PSD groups नहीं होते |
Group 47, पूरी तरह rasterized फ़ाइलें, और एक ही लेयर पर मुद्रित shadows को अभी भी canvas या Unity में सफ़ाई चाहिए। यह गायब संरचना है, विफल converter नहीं।
AI Studio में इसे कैसे करें
Button labels वर्तमान पैनल का पालन करते हैं।
1. लेयर्ड PSD इम्पोर्ट करें
AI Studio खोलें और .psd इम्पोर्ट करें। लेयर सूची में पुष्टि करें कि top bar, bottom bar, dialogs, और button groups अभी भी groups हैं—पहले से flattened नहीं।

2. इसे UI के रूप में पढ़ें, पोस्टर के रूप में नहीं
Draw order, spacing, और छिपी markup layers जाँचें। एक्सपोर्ट से पहले क्लिक करने योग्य controls को decoration से अलग करें। साफ़ alpha के लिए, matting को चेन करें।

3. sprite dump नहीं, UGUI prefab एक्सपोर्ट करें
Engine को Unity पर सेट करें। UI hierarchy / Prefab पसंद करें। टेक्स्ट के लिए TMP पसंद करें; खिंचने योग्य panels पर 9-slice बनाए रखें (प्रति panel)।

4. इसे Canvas पर डालें और smoke-test करें
टीम फ़ोल्डर (जैसे Assets/UI/) में इम्पोर्ट करें, Prefab को scene Canvas के नीचे parent करें। 16:9 पर और लक्ष्य portrait ratio पर एक बार Play करें; मुख्य पथ पर क्लिक करें।

अगर वही स्क्रीन Figma में है, तो Figma → Unity का उपयोग करें। Godot / Cocos canvas साझा करते हैं; आप export target बदलते हैं। Component नाम अलग होते हैं (Control / Widget); स्वीकृति पास वही है।
Unity में पहले ये जाँचें
- क्लिक चूक रहे हैं — Canvas में Graphic Raycaster है; tappable Images पर Raycast Target on है।
- गलत type — जब यह Photoshop face न हो तो TMP Font Asset असाइन करें।
- धुंधलापन — sprite filter, Canvas Scaler, Pixels Per Unit; छोटे icons को 100% से ज़्यादा स्केल न करें।
- Anchor drift — full-bleed बनाम edge bars को अलग-अलग pin करें; safe area engine में जोड़ें, PSD में notch न बनाएँ।
- नया PSD rev — layout rebuild → Prefab दोबारा एक्सपोर्ट करें; दो button recolors → Unity में एडिट करें।
इन-एडिटर PSD-to-UGUI प्लगइन की तुलना में
| इन-एडिटर PSD2UGUI / naming-rule प्लगइन | VberAI Studio | |
|---|---|---|
| यह कहाँ चलता है | Unity editor window | Browser game canvas |
| इनपुट | ज़्यादातर उस प्लगइन के लिए नामित PSDs | PSD; flat comps in-place slice से; Figma भी |
| एक्सपोर्ट के बाद | Unity के अंदर बनाना जारी रखें | Canvas पर एडिट, split, matte करें, फिर Prefab emit करें |
| लॉजिक | हाथ से लिखे या घरेलू tools | prefab प्रोजेक्ट में आने के बाद Unity MCP |
प्लगइन उन टीमों के लिए उपयुक्त हैं जो पहले से प्लगइन के layer spec का पालन करती हैं। Canvas उन handoffs के लिए उपयुक्त है जिन्हें अभी भी visual pass और Unity / Godot / Cocos का चुनाव चाहिए। दोनों में से कोई भी उस PSD को ठीक नहीं करता जो केवल flattened mock है—उसे layer करें, या in-place slice का उपयोग करें।
सीमाएँ
- पहला एक्सपोर्ट शायद ही कभी शिप करने योग्य अंतिम होता है; fonts, locales, motion, और safe area अभी भी प्रोजेक्ट में तय होते हैं।
- भारी layer styles flatten हो सकते हैं; आप interactive controls खो देते हैं।
- VberAI Studio ≠ Google AI Studio; तुलना देखें।
समापन
आपको “एक और स्लाइस” की ज़रूरत नहीं। आपको PSD संरचना को UGUI Prefab संरचना बनाने की ज़रूरत है। Slices मध्यवर्ती हैं; यह तब मायने रखता है जब आप इसे Canvas पर डाल सकें, क्लिक कर सकें, और copy एडिट कर सकें। AI Studio में लेयर्ड PSD इम्पोर्ट करें, Prefab एक्सपोर्ट करें, फिर Unity में लॉजिक वायर करें।
FAQ
“AI slice a PSD and assemble a UI prefab” का क्या मतलब है?
एक साथ दोनों काम: layers sprites बन जाते हैं, और PSD groups एक Unity UGUI hierarchy / Prefab बन जाते हैं—sprite dump नहीं।
क्या VberAI एक PSD से UGUI Prefab बना सकता है?
हाँ। AI Studio में लेयर्ड PSD इम्पोर्ट करें, Unity UI hierarchy या prefab (प्रति panel) एक्सपोर्ट करें, इसे Canvas के नीचे parent करें, और smoke-test करें।
यह PNGs स्लाइस करने से कैसे अलग है?
PNG slices निर्देशांक और groups छोड़ देते हैं। एक prefab सापेक्ष layout और node tree बनाए रखता है, इसलिए इंजीनियरिंग को कम align करना पड़ता है।
अगर PSD लेयर्ड नहीं है तो?
controls का पता लगाने के लिए in-place slice का उपयोग करें। जब आपके पास पहले से Figma या लेयर्ड PSD हो तो उस पथ का उपयोग न करें।
क्या यह button कोड लिखता है?
नहीं। Prefab visuals और hit areas को कवर करता है। Events और data स्क्रिप्ट या Unity MCP के माध्यम से जाते हैं।
और पढ़ें
आपको ये लेख भी पसंद आ सकते हैं
Unity MCP से AI Studio HUD को हेल्थ इवेंट से जोड़ें
AI Studio से Unity HUD प्रीफ़ैब एक्सपोर्ट होने के बाद Cursor + Unity MCP से हेल्थ इवेंट सब्सक्राइब करें, HP बार और डैमेज टेक्स्ट अपडेट करें — Play मोड चेकलिस्ट और आम ब्रेक-पॉइंट फिक्स के साथ।
- Unity MCP
- AI Studio
- HUD
- Unity
Godot MCP से 2D प्लेटफ़ॉर्मर: मूवमेंट, लेवल और दुश्मन
Godot 4 प्लेयबल प्रोटोटाइप: MCP से CharacterBody2D, TileMap, दुश्मन; असली HUD/टाइटल चाहिए तब VberAI Studio।
- Godot MCP
- 2D platformer
- Godot 4
- GDScript
2026 में गेम डेव के लिए AI कैसे चुनें: Google AI Studio और VberAI में क्या अंतर है
2026 गेम-डेव AI चयन: पोजिशनिंग, आर्किटेक्चर, लागत और चरण फिट पर Google AI Studio बनाम VberAI—प्रोजेक्ट चरण व स्टैक से चुनें।
- Google AI Studio
- VberAI
- comparison
- game development