तीखे किनारे खोए बिना पिक्सेल कला को वेक्टर में बदलें

आप पिक्सेल कला को वेक्टर में बदल सकते हैं, लेकिन पहले तय करें कि चौकोर पिक्सेल दिखते रहने चाहिए या नहीं। मूल रूप बचाने के लिए चित्र को ग्रिड या वस्तुओं से बने मोज़ेक के रूप में दोबारा बनाएँ। स्प्राइट को चिकने वक्रों वाले चित्र में बदलने के लिए कंटूर वेक्टराइज़ेशन इस्तेमाल करें। ये अलग आउटपुट हैं और सामान्य ट्रेस आपके लिए सही आउटपुट नहीं चुन सकता।

Scratch में गेम स्प्राइट संपादित करते हों तो Convert to Vector बटन बिटमैप ट्रेस किए बिना संपादन मोड बदलता है। Scratch कॉस्ट्यूम संपादन जाँचें से तय करें पिक्सेल रखें, हिस्सा दोबारा बनाएँ या ट्रेस SVG आकृतियाँ आयात करें। फिर बदले कॉस्ट्यूम का केंद्र मूल से मिलाएँ।

असली लक्ष्य वेबसाइट या गेम में स्पष्ट पिक्सेल कला दिखाना हो तो शायद SVG चाहिए ही नहीं। निकटतम-पड़ोसी जैसी स्केलिंग के साथ सही आकार वाला PNG अक्सर छोटी फ़ाइल बनाता है और स्रोत के प्रति अधिक निष्ठावान रहता है। वेब पर image-rendering प्रॉपर्टी तीखे किनारे रखने के लिए crisp-edges और pixelated व्यवहार देती है।

टूल से पहले परिणाम चुनें

• PNG रखें जब कला सही आकार में हो और केवल स्पष्ट रास्टर प्रदर्शन चाहिए।
• ग्रिड SVG बनाएँ जब हर चौकोर और सीढ़ी जैसा किनारा डिज़ाइन का हिस्सा हो।
• कंटूर वेक्टराइज़ेशन लें जब जानबूझकर चिकनी सिलुएट और संपादन योग्य वक्र चाहें।
• चिकने परिणाम को “सुरक्षित पिक्सेल कला” न कहें। वह वेक्टर पुनर्व्याख्या है।

3 अलग कामों के लिए 3 आउटपुट

यह सवाल फ़ॉर्मैट के “बेहतर” होने से अधिक इस बात का है कि उन ब्लॉक का क्या अर्थ है। पिक्सेल कला में सीढ़ी किनारे अक्सर जानबूझकर होते हैं। चिकना करना रेखाचित्र धुँधला करने जितना नुकसानदेह हो सकता है।

ग्रिड रखना और कंटूर चिकना करना अलग काम हैं

रास्ता 1: पिक्सेल ग्रिड ठीक-ठीक रखें

सबसे शाब्दिक वेक्टर रूपांतरण रास्टर के सेल को वेक्टर आयतों में बदलता है। लाल पिक्सेल लाल चौकोर बनता है। पास-पास लाल पिक्सेल अलग चौकोर रह सकते हैं या सिलुएट न बदले तो बड़े आयत में मिल सकते हैं।

पहले वास्तविक ग्रिड आयाम खोजें। 800 × 800 पिक्सेल पर दिखा स्प्राइट शायद 32 × 32 ग्रिड से निकटतम-पड़ोसी स्केलिंग में बढ़ा था। वही 32 × 32 संरचना पुनरुत्पादित करनी है, बड़ा प्रदर्शन आकार नहीं।

Illustrator Object Mosaic प्रक्रिया

Adobe एम्बेड किए गए बिटमैप को मोज़ेक में बदलने की अंतर्निहित प्रक्रिया बताता है:

1. मूल पिक्सेल कला Illustrator में रखें और एम्बेड करें।
2. चित्र चुनकर Object > Create Object Mosaic लें।
3. पता हो तो टाइल संख्या मूल पिक्सेल ग्रिड से मिलाएँ।
4. चौकोर टाइल और रंग आउटपुट इस्तेमाल करें।
5. मोज़ेक जाँचने तक स्रोत रास्टर रखें, फिर हटाएँ या छिपाएँ।
6. अधिक ज़ूम पर बाहरी सिलुएट, भीतरी अंतराल और रंग मूल से मिलाएँ।

Adobe का Create Object Mosaic दस्तावेज़ कमांड, चौकोर टाइल, रंग सेटिंग और स्रोत रास्टर सँभालना बताता है। पिक्सेल कला प्रक्रिया इसी दस्तावेज़ित व्यवहार का व्यावहारिक उपयोग है।

वस्तुओं से बना मोज़ेक संरचनात्मक रूप से स्रोत के अनुरूप होकर भी अक्षम हो सकता है। 64 × 64 स्प्राइट में मिलाने से पहले 4,096 सेल हैं। पूर्ण पारदर्शी सेल हटाएँ, जहाँ संभव समान रंग के पास वाले आयत जोड़ें और अंतिम SVG में अदृश्य वस्तुएँ न रखें।

रास्ता 2: Illustrator के बिना ग्रिड SVG बनाएँ

पिक्सेल समझने वाली स्क्रिप्ट या खास कन्वर्टर से समान फ़ाइल बना सकते हैं। सिद्धांत ऐप से अधिक महत्वपूर्ण है:

1. स्रोत मूल ग्रिड आकार पर पढ़ें।
2. हर गैर-पारदर्शी पिक्सेल को सटीक वेक्टर आयत दें।
3. एंटी-अलायसिंग किए बिना रंगों के मान बनाए रखें।
4. पड़ोसी सेल केवल तब मिलाएँ जब वही दृश्य ग्रिड बने।
5. मूल ग्रिड आयामों से मेल खाते SVG viewBox में निर्यात करें।
6. पूर्णांक और गैर-पूर्णांक प्रदर्शन आकारों पर SVG जाँचें।

ओपन-सोर्स vectorize-pixelart प्रोजेक्ट पिक्सेल विशेष रूपांतरण का उदाहरण है। यह सामान्य सीमा भी दिखाता है: बड़े या जटिल ग्रिड भारी SVG आउटपुट बना सकते हैं। पुराने टूल को पहले शोध सामग्री मानें। उत्पादन में जोड़ने से पहले कोड और रखरखाव स्थिति देखें।

SVG मार्कअप जानते हों तो छोटा स्प्राइट <rect> तत्वों से हाथ से भी बना सकते हैं। 12 × 12 आइकन के लिए यह उचित है। किसी विस्तृत दृश्य के लिए इस काम में पूरी दोपहर लगाना समझदारी नहीं होगी।

रास्ता 3: जानबूझकर आकृतियाँ चिकनी करें

कभी-कभी पिक्सेल कला की पहचान के बजाय शुरुआती मसौदा होते हैं। आप पात्र, फूल या आइकन को गोल कंटूर वाले साफ़ स्टिकर, प्रिंट ग्राफ़िक या लोगो में बदलना चाह सकते हैं।

यदि आप जानबूझकर चिकनी आकृतियों वाली व्याख्या चाहते हैं, तो PerfectVector कंटूर प्रक्रिया के लिए उपयुक्त है। कला का उपलब्ध सबसे बड़ा निकटतम-पड़ोसी संस्करण अपलोड करें, फिर नए चित्र की तरह परखें:

1. पहले एंटी-अलायस हटाएँ। नरम किनारी पिक्सेल अतिरिक्त रंग और छोटी आकृतियाँ बनाते हैं।
2. रंग सीमित रखें। स्रोत में 8 रंग हों, तो ट्रेस को संपीड़न या धुँधलेपन के कारण दर्जनों नए रंग नहीं बनाने चाहिए।
3. सीढ़ी वाले विकर्ण देखें। तय करें कि कौन-से विकर्ण सीधे खंडों में और कौन-से वक्रों में बदलने चाहिए।
4. छेद और एक पिक्सेल अंतराल देखें। पड़ोसी क्षेत्र सरल होने पर छोटे खुले हिस्से बंद हो सकते हैं।
5. नोड संख्या देखें। चिकना करने का उद्देश्य हर चौकोर कोने को कई छोटे वक्रों से बदलना नहीं है।
6. गंतव्य आकार पर जाँचें। पोस्टर पर अच्छा चिकना वक्र आइकन आकार पर चेहरा या हाथ मिटा सकता है।

यह रास्ता कला को बदलता है। स्रोत PNG को SVG के साथ सहेजकर रखें ताकि कोई वेक्टर व्याख्या को सटीक अभिलेख संस्करण न माने।

तैयारी की समस्याएँ जो हर रास्ता बिगाड़ती हैं

स्रोत चिकनी स्केलिंग से बदला था। मूल स्प्राइट पर वापस जाएँ या निकटतम-पड़ोसी इंटरपोलेशन से आकार दें। एक बार किनारों के नए मिश्रित रंग फ़ाइल में स्थायी रूप से जुड़ जाएँ, तो मूल ग्रिड वापस पाना अधिक कठिन हो जाता है।

फ़ाइल JPG है। संपीड़न हर तीखे पिक्सेल किनारे पर रंग ब्लॉक और छल्ले बनाता है। जहाँ संभव मूल PNG लें।

पारदर्शी पृष्ठभूमि सफ़ेद हुई। सफ़ेद पृष्ठभूमि हज़ारों अनचाहे सेल या एक बड़ी ट्रेस आकृति बन सकती है। पहले पारदर्शिता लौटाएँ, फिर विपरीत रंग कैनवास पर जाँचें। पारदर्शी SVG पृष्ठभूमि मार्गदर्शिका यह जाँच बताती है।

कला में आंशिक पारदर्शी प्रभाव हैं। चमक, छायाएँ और आंशिक अपारदर्शिता पारंपरिक पिक्सेल सेल नहीं हैं। तय करें कि उन्हें रास्टर प्रभावों के रूप में रखना है, ठोस रंगों के सीमित समूह में बदलना है या वेक्टर संस्करण के लिए दोबारा डिज़ाइन करना है।

वेबसाइट के लिए वेक्टर चाहिए?

ज़रूरी नहीं। गेम स्प्राइट या इंटरफ़ेस आइकन में PNG सही मूल रह सकता है। मूल आकार वाला संसाधन इस्तेमाल करें, संभव हो तो उसे पूर्णांक गुणकों में बढ़ाएँ और ब्राउज़र या रेंडरिंग इंजन को पिक्सेलयुक्त या निकटतम-पड़ोसी इंटरपोलेशन इस्तेमाल करने के लिए कॉन्फ़िगर करें।

ग्रिड SVG तब मदद करता है जब रंगों को वस्तुओं की तरह संपादित करना हो, कला को बड़े आकार में प्रिंट करना हो या फ़ाइल देने की प्रणाली विशेष रूप से वेक्टर माँगती हो। छोटा स्क्रीन संसाधन अपने-आप हल्का नहीं बनता। हर सेल की वेक्टर वस्तु छोटे PNG से भारी हो सकती है।

यह उन स्थितियों में है जहाँ “SVG हमेशा बढ़ सकता है” सच लेकिन अधूरा है। कला को लगातार बड़ा किया जा सकता है, लेकिन उसे सहेजना, संपादित करना या रेंडर करना महँगा हो सकता है। PNG और SVG मार्गदर्शिका व्यापक फ़ॉर्मैट निर्णय बताती है। चित्र वेक्टराइज़ेशन का अर्थ समझाता है कि सामान्य ट्रेस पिक्सेल ग्रिड से अधिक आकृति क्यों पसंद करते हैं।

फ़ाइल देने से पहले अंतिम जाँच

फ़ाइल देने से पहले उसके मूल आकार और इच्छित आउटपुट आकार, दोनों पर उसकी तुलना मूल चित्र से करें।

• ग्रिड आयाम स्रोत जैसे हैं।
• एंटी-अलायस किनारी रंग नहीं जोड़े गए।
• पारदर्शी सेल पारदर्शी हैं।
• सुरक्षित रखने वाले रास्ते में सीढ़ी सिलुएट जस की तस है।
• कंटूर रास्ते में चिकने किनारे जानबूझकर हैं।
• एक पिक्सेल अंतराल, आँखें, चमकीले हिस्से और भीतरी छेद सही समझ आते हैं।
• समान रंग के दोहराए गए सेल केवल तभी सरल किए गए हैं जब चित्र बिल्कुल समान रहता है।
• SVG में गलती से मूल रास्टर एम्बेड नहीं हुआ है। यदि हुआ है, तो वह फ़ाइल एक्सटेंशन के बावजूद पिक्सेल वाला दिख सकता है।

सबसे साफ़ प्रक्रिया वह है जो अपना समझौता बताती है। पिक्सेल ही कला हों तो ग्रिड रखें। नई वेक्टर व्याख्या चाहिए तो कंटूर चिकने करें। वेक्टर उपयोगी नियंत्रण न दे तो PNG रखें।

स्रोत

1. Adobe Illustrator — स्केच और मोज़ेक बनाना — Object Mosaic कमांड, चौकोर टाइल, रंग आउटपुट और रास्टर को एम्बेड करने की आवश्यकता।
2. MDN — CSS image-rendering — वेब पिक्सेल कला का निकटतम-पड़ोसी जैसा रेंडर।
3. W3C — PNG विनिर्देश, तीसरा संस्करण — PNG का बिना हानि रास्टर मॉडल और अल्फ़ा चैनल व्यवहार।
4. W3C — SVG की बुनियादी आकृतियाँ — सीधे ग्रिड सेल SVG की आयत ज्यामिति।
5. W3C — SVG निर्देशांक और viewBox — मूल ग्रिड की निर्देशांक प्रणाली को SVG व्यूपोर्ट से जोड़ना।

---

सुरक्षित ग्रिड के बजाय चिकने कंटूर चाहिए तो कला PerfectVector से बदलें, फिर इस्तेमाल करने से पहले सिलुएट, एक पिक्सेल के अंतराल और छोटे विवरणों की तुलना मूल पिक्सेल फ़ाइल से करें।