← ब्लॉग पर वापस

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
PSD to Unity UGUI: AI से Photoshop PSD स्लाइस कर Prefab बनाएँ

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 imageButtons हिट नहीं करते; 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 होना चाहिए

एक उपयोगी कन्वर्ज़न में ये सब शामिल हैं:

  1. स्लाइस की गई कला — button backs, icons, 9-slice panels अलग Images के रूप में।
  2. टेक्स्ट — TextMeshPro पसंद करें, texture में जले हुए glyphs नहीं (copy बदलने और localize करने के लिए यह चाहिए)।
  3. Hierarchy — groups → children, PSD groups से मेल खाते हुए, सब कुछ Canvas root पर नहीं डाला गया।
  4. 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 को चेन करें।

Canvas पर पूर्ण-स्क्रीन UI

3. sprite dump नहीं, UGUI prefab एक्सपोर्ट करें

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

एक engine चुनें और एक्सपोर्ट करें

4. इसे Canvas पर डालें और smoke-test करें

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

Engine इम्पोर्ट के बाद UI

अगर वही स्क्रीन 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 windowBrowser game canvas
इनपुटज़्यादातर उस प्लगइन के लिए नामित PSDsPSD; flat comps in-place slice से; Figma भी
एक्सपोर्ट के बादUnity के अंदर बनाना जारी रखेंCanvas पर एडिट, split, matte करें, फिर Prefab emit करें
लॉजिकहाथ से लिखे या घरेलू toolsprefab प्रोजेक्ट में आने के बाद 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
और पढ़ें

2026 में गेम डेव के लिए AI कैसे चुनें: Google AI Studio और VberAI में क्या अंतर है

2026 गेम-डेव AI चयन: पोजिशनिंग, आर्किटेक्चर, लागत और चरण फिट पर Google AI Studio बनाम VberAI—प्रोजेक्ट चरण व स्टैक से चुनें।

  • Google AI Studio
  • VberAI
  • comparison
  • game development
और पढ़ें