PSD को PNG में कैसे बदलें (लेयर्स को सही ढंग से फ़्लैटन करें)
PSD को PNG में बदलना दिखने से ज़्यादा मुश्किल क्यों है
एक PSD फ़ाइल कोई एक अकेली इमेज नहीं है। यह एक जटिल रेसिपी की तरह है: लेयर्स का एक ढेर, एडजस्टमेंट लेयर्स, मास्क, स्मार्ट ऑब्जेक्ट्स और ब्लेंडिंग मोड्स, जो केवल Photoshop जैसे सक्षम ऐप में प्रोसेस होने पर ही एक साथ आते हैं। अगर आप इसे समझे बिना PSD को PNG में बदलने की कोशिश करते हैं, तो चीजें गलत हो जाती हैं। आपको पारदर्शिता की जगह एक सपाट सफ़ेद बैकग्राउंड मिल सकता है, टेक्स्ट गायब दिख सकता है क्योंकि फ़ॉन्ट लेयर रेंडर नहीं हुई थी, या अजीब रंग परिवर्तन दिख सकते हैं क्योंकि एडजस्टमेंट लेयर को अनदेखा कर दिया गया था। PNG एक सरल रास्टर फ़ॉर्मैट है। यह पिक्सल का एक ग्रिड स्टोर करता है, निर्देशों की सूची नहीं। यह कनवर्ज़न असल में एक रेंडरिंग का काम है। आप उन सभी Photoshop निर्देशों को एक अंतिम पिक्सल ग्रिड में समेट रहे हैं, फिर उस ग्रिड को एक दोषरहित (lossless) PNG के रूप में सहेज रहे हैं। आपकी अंतिम इमेज की गुणवत्ता पूरी तरह से इस बात पर निर्भर करती है कि वह रेंडरिंग स्रोत फ़ाइल में मौजूद हर चीज़ को कितनी अच्छी तरह से संभालती है। सबसे आम विफलताएँ तब आसानी से पहचानी जा सकती हैं जब आप जानते हैं कि क्या देखना है। पारदर्शिता को अक्सर एक ठोस सफ़ेद या काले रंग से बदल दिया जाता है। ड्रॉप शैडो और ग्लो जैसे लेयर इफ़ेक्ट्स पूरी तरह से गायब हो सकते हैं। स्मार्ट ऑब्जेक्ट्स कम रिज़ॉल्यूशन पर रेंडर हो सकते हैं क्योंकि उन्हें पहले रास्टराइज़ नहीं किया गया था। और हटाए गए कलर प्रोफ़ाइल आपकी इमेज को कैलिब्रेटेड स्क्रीन पर फीका दिखा सकते हैं। इन समस्याओं को पहले से जानने से बहुत सारी झुंझलाहट और दोबारा काम करने से बचा जा सकता है।
एक्सपोर्ट करने से पहले Photoshop में लेयर्स को फ़्लैटन करना
अगर आपके पास Adobe Photoshop है, तो मैन्युअल रूप से फ़्लैटन और एक्सपोर्ट करने से आपको पूरा नियंत्रण मिलता है। महत्वपूर्ण चुनाव 'Flatten Image' और 'Merge Visible' के बीच है। ये सुनने में एक जैसे लगते हैं, लेकिन ये बहुत अलग काम करते हैं। 'Flatten Image' (Layer > Flatten Image) हर एक लेयर को मर्ज कर देता है—छिपी हुई लेयर्स को भी—और सभी पारदर्शी क्षेत्रों को सफ़ेद रंग से भर देता है। एक PNG के लिए जिसमें पारदर्शी बैकग्राउंड की आवश्यकता होती है, यह लगभग हमेशा ही गलत कदम होता है। इसके बजाय, 'Merge Visible' (Windows पर Shift+Ctrl+Alt+E / Mac पर Shift+Cmd+Option+E) का उपयोग करें। यह शानदार शॉर्टकट सभी दिखने वाली लेयर्स की एक मर्ज की हुई कॉपी को आपके लेयर स्टैक के सबसे ऊपर एक नई लेयर के रूप में बना देता है, और आपकी मूल लेयर्स नीचे अछूती रहती हैं। फिर आप सिर्फ उस नई मर्ज की हुई लेयर को, पारदर्शिता के साथ, एक्सपोर्ट कर सकते हैं। एक्सपोर्ट के लिए, पुराने 'Save As' कमांड का उपयोग न करें। सीधे File > Export > Export As पर जाएँ। उस डायलॉग में, Format को PNG पर सेट करें और सुनिश्चित करें कि 'Transparency' बॉक्स पर टिक लगा हो। स्क्रीन पर उपयोग के लिए, 72 PPI मानक है। किसी भी हाई-रिज़ॉल्यूशन चीज़ के लिए, जैसे कि प्रिंट या Retina डिस्प्ले के लिए, 144 या 300 PPI का उपयोग करें। याद रखें, PPI मान सिर्फ़ मेटाडेटा है; 72 PPI पर 2000×2000 पिक्सल का कैनवास 2000×2000 पिक्सल का PNG एक्सपोर्ट करता है। भौतिक आयाम नहीं बदलते हैं। एक और प्रो टिप: यदि आपका PSD प्रिंट के लिए बने कलर प्रोफ़ाइल का उपयोग करता है, जैसे CMYK या Adobe RGB 1998, तो आपको वेब के लिए एक्सपोर्ट करने से पहले इसे sRGB में बदलना होगा। Edit > Convert to Profile पर जाएँ, sRGB IEC61966-2.1 चुनें, और Black Point Compensation चेक करके Relative Colorimetric रेंडरिंग का उपयोग करें। इस चरण को छोड़ना ही सबसे बड़ा कारण है कि क्यों सावधानी से बनाए गए डिज़ाइन वेब ब्राउज़र में फीके और धुले हुए दिखते हैं।
CocoConvert के साथ PSD को ऑनलाइन PNG में बदलना
हर किसी के पास Photoshop का सब्सक्रिप्शन नहीं होता, और अगर होता भी है, तो PSD से भरे फ़ोल्डर को एक-एक करके बदलना एक उबाऊ काम है। CocoConvert का [PSD से PNG कनवर्टर](/convert/psd-to-png) इस समस्या को सर्वर पर रेंडरिंग करके हल करता है। आप बस PSD अपलोड करते हैं और आपको एक सही ढंग से फ़्लैटन किया हुआ PNG वापस मिलता है, जिसके लिए आपके कंप्यूटर पर किसी डिज़ाइन सॉफ़्टवेयर की आवश्यकता नहीं होती है। यह कनवर्टर अल्फा चैनल को संरक्षित रखते हुए सभी दिखने वाली लेयर्स को समझदारी से मर्ज करता है। इसका मतलब है कि आपकी Photoshop फ़ाइल में पारदर्शी क्षेत्र अंतिम PNG में भी पारदर्शी रहते हैं, उस डरावने सफ़ेद बैकग्राउंड के बिना। यह सामान्य लेयर प्रकारों को मज़बूती से संभालता है, जिसमें रास्टर इमेज, टेक्स्ट लेयर्स (जो दस्तावेज़ के मूल रिज़ॉल्यूशन पर रेंडर होती हैं), और Levels, Curves, और Hue/Saturation जैसी बुनियादी एडजस्टमेंट लेयर्स शामिल हैं। इसका उपयोग करना सीधा है। /convert/psd-to-png पर जाएँ, अपनी PSD फ़ाइल को पेज पर ड्रैग करें या 'Choose File' पर क्लिक करें, और Convert दबाएँ। यह टूल 50 MB तक की फ़ाइलों को सपोर्ट करता है। एक सामान्य फ़ाइल के लिए प्रोसेसिंग में आमतौर पर केवल 5-15 सेकंड लगते हैं, जिसके बाद आपको दोषरहित PNG आउटपुट के लिए एक डाउनलोड लिंक मिलता है। यदि आप फ़ाइलों के एक बैच के साथ काम कर रहे हैं, जैसे कि एक आइकन सेट या UI किट, तो आप एक साथ कई PSD अपलोड कर सकते हैं। प्रत्येक को अपने आप प्रोसेस किया जाता है, और आप परिणामी PNG फ़ाइलों को अलग-अलग डाउनलोड कर सकते हैं या उन सभी को एक ही ZIP आर्काइव में प्राप्त कर सकते हैं। यह बहुत समय बचाता है।
CocoConvert क्या नहीं कर सकता (इस बारे में ईमानदार रहें)
स्वचालित टूल की सीमाएँ होती हैं, और उन्हें पहले से जानना बेहतर है, बजाय इसके कि आप किसी क्लाइंट को एसेट्स देने के बाद उन्हें खोजें। Smart Objects मुख्य चीज़ है जिस पर ध्यान देना चाहिए। यदि आपके PSD में एम्बेडेड या लिंक्ड Smart Objects हैं, तो CocoConvert उन्हें दस्तावेज़ के भीतर उनके आकार पर रेंडर करता है, न कि उनके अपने मूल रिज़ॉल्यूशन पर। उदाहरण के लिए, 1000px कैनवास में Smart Object के रूप में रखा गया 4000px का वेक्टर ग्राफ़िक 1000px पर रेंडर होगा। आप कैनवास के सापेक्ष गुणवत्ता नहीं खोते हैं, लेकिन आपको Smart Object के उच्च आंतरिक रिज़ॉल्यूशन का लाभ भी नहीं मिलता है। इसके लिए, आपको पहले Photoshop में Smart Object को रास्टराइज़ करना होगा (Layer > Smart Objects > Rasterize)। 3D लेयर्स और वीडियो लेयर्स समर्थित नहीं हैं। इन्हें रखने वाली किसी भी PSD में से वे विशिष्ट लेयर्स अंतिम PNG से हटा दी जाएँगी, और उनके नीचे जो भी लेयर थी, वह दिखाई देगी। कुछ जटिल ब्लेंडिंग मोड मुश्किल हो सकते हैं। विशेष रूप से, Dissolve, Hard Mix, और कुछ ल्यूमिनोसिटी-आधारित मोड शायद Photoshop की तुलना में थोड़ा अलग रेंडर हों। अंतर आमतौर पर मामूली होता है (प्रति चैनल कुछ रंग मान), लेकिन पिक्सल-परफेक्ट काम के लिए, आपको हमेशा Photoshop से एक संदर्भ एक्सपोर्ट के साथ आउटपुट को सत्यापित करना चाहिए। CMYK PSD फ़ाइलें प्रोसेसिंग के दौरान स्वचालित रूप से sRGB में बदल दी जाती हैं। यह कनवर्ज़न एक मानक ICC प्रोफ़ाइल का उपयोग करता है, जो अधिकांश वेब और स्क्रीन उपयोगों के लिए सटीक है। हालाँकि, यह एक कस्टम, प्रिंट-कैलिब्रेटेड वर्कफ़्लो से पूरी तरह मेल नहीं खाएगा। यदि आप ऑफ़सेट प्रिंटिंग के लिए एसेट्स तैयार कर रहे हैं, तो अधिकतम नियंत्रण के लिए Photoshop में स्वयं कलर कनवर्ज़न करें।
सही PNG सेटिंग्स चुनना: बिट डेप्थ और कम्प्रेशन
PNG मुख्य रूप से दो प्रकारों में आता है, 8-बिट और 24-बिट (जिन्हें अक्सर PNG-8 और PNG-24 कहा जाता है), और सही का चुनाव करना महत्वपूर्ण है। PNG-24 उच्च-गुणवत्ता वाला विकल्प है। यह 1.67 करोड़ रंग और साथ ही स्मूथ पारदर्शिता के लिए एक पूरा 8-बिट अल्फा चैनल स्टोर करता है। तस्वीरों, जटिल ग्रेडिएंट्स, और सूक्ष्म रंग भिन्नताओं वाली किसी भी इमेज के लिए आपको इसी की आवश्यकता है। CocoConvert डिफ़ॉल्ट रूप से PNG-24 का उपयोग करता है, जो समृद्ध PSD फ़ाइलों को बदलने के लिए सही विकल्प है। PNG-8 हल्का विकल्प है। यह 256-रंगों की पैलेट तक सीमित है और बहुत छोटी फ़ाइलें बनाता है—अक्सर 60-70% छोटी। इसका नुकसान ग्रेडिएंट्स पर दिखने वाली कलर बैंडिंग और पूरी तरह से पारदर्शी या अपारदर्शी पारदर्शिता है (एक पिक्सल या तो पूरी तरह से पारदर्शी होता है या पूरी तरह से अपारदर्शी, बीच में कुछ नहीं)। PNG-8 केवल साधारण ग्राफ़िक्स जैसे कि सपाट-रंग वाले आइकॉन के लिए उपयुक्त है जिनके किनारे कठोर हों। PNG-8 प्राप्त करने के लिए, आपको PNG-24 आउटपुट को Photoshop जैसे टूल में प्रोसेस करना होगा या pngquant जैसी कमांड-लाइन यूटिलिटी का उपयोग करना होगा। PNG कम्प्रेशन हमेशा दोषरहित (lossless) होता है, जिसका अर्थ है कि यह कभी भी इमेज की गुणवत्ता को कम नहीं करता है। कम्प्रेशन स्तर की सेटिंग पूरी तरह से फ़ाइल के आकार और फ़ाइल को सहेजने में लगने वाले समय के बीच एक समझौता है। CocoConvert स्वचालित रूप से एक संतुलित कम्प्रेशन स्तर का उपयोग करता है। यदि आप प्रदर्शन के प्रति जुनूनी हैं और वेब प्रोजेक्ट के लिए सबसे छोटे फ़ाइल आकार की आवश्यकता है, तो आप आउटपुट को oxipng या pngcrush जैसे समर्पित ऑप्टिमाइज़र के माध्यम से चलाकर और 10-20% निचोड़ सकते हैं। ये टूल डेटा को एक भी पिक्सल को छुए बिना अधिक आक्रामक रूप से फिर से कंप्रेस करते हैं। अंत में, हमेशा पूछें कि क्या PNG सही फ़ॉर्मैट भी है। यदि आपको पारदर्शिता की आवश्यकता नहीं है, तो एक उच्च-गुणवत्ता वाला JPEG नाटकीय रूप से छोटा होगा। पारदर्शिता के साथ आधुनिक वेब उपयोग के लिए, WebP और AVIF बेहतर कम्प्रेशन प्रदान करते हैं। लेकिन मास्टर फ़ाइलों, डिज़ाइन हैंडऑफ़, और ऐसी किसी भी चीज़ के लिए जिसे फिर से संपादित करने की आवश्यकता हो सकती है, PNG-24 ही बादशाह है।
पारदर्शिता को सही ढंग से संभालना: एक नज़दीकी नज़र
PNG पारदर्शिता एक अल्फा चैनल के माध्यम से काम करती है—एक अतिरिक्त 8-बिट ग्रेस्केल मैप जहाँ प्रत्येक पिक्सल को 0 (पूरी तरह से पारदर्शी) से 255 (पूरी तरह से ठोस) तक का पारदर्शिता मान दिया जाता है। यही वह चीज़ है जो नरम किनारों वाले ड्रॉप शैडो और स्मूथ एंटी-एलियास्ड टेक्स्ट को संभव बनाती है जो किसी भी बैकग्राउंड पर अच्छे लगते हैं। सबसे आम कनवर्ज़न त्रुटियों में से एक प्री-मल्टीप्लाइड अल्फा से संबंधित है। एक प्री-मल्टीप्लाइड इमेज में, रंग मान पहले से ही एक बैकग्राउंड रंग के साथ मिश्रित होते हैं, जो किनारों के चारों ओर गहरे या हल्के प्रभामंडल (halos) का कारण बन सकता है यदि देखने वाला एप्लिकेशन स्ट्रेट अल्फा की अपेक्षा करता है। जिस किसी ने भी अपने आइकॉन पर भद्दे काले झालरों से संघर्ष किया है, वह इस दर्द को जानता है। CocoConvert स्ट्रेट अल्फा PNG आउटपुट करता है, जो वेब ब्राउज़र और लगभग सभी आधुनिक सॉफ़्टवेयर द्वारा अपेक्षित मानक है। यह सुनिश्चित करने के लिए कि आपकी पारदर्शिता कनवर्ज़न में बची रही, आउटपुट का परीक्षण करें। सबसे तेज़ तरीका है PNG को एक रंगीन बैकग्राउंड वाले वेब ब्राउज़र में खोलना। बस एक बिल्कुल सरल HTML फ़ाइल बनाएँ जिसमें एक रंगीन बॉडी और आपके PNG की ओर इशारा करने वाला एक `<img>` टैग हो। यदि पारदर्शी हिस्से बैकग्राउंड का रंग दिखाते हैं और किनारे साफ़ हैं, तो आप सही हैं। यदि आपको एक सफ़ेद बॉक्स या गहरे प्रभामंडल दिखाई देते हैं, तो अल्फा चैनल को ठीक से हैंडल नहीं किया गया था। इसके अलावा, अपनी PSD की बैकग्राउंड लेयर की जाँच करें—लॉक आइकन वाली डिफ़ॉल्ट लेयर। यह लेयर हमेशा 100% अपारदर्शी होती है। यदि आपको अपने अंतिम PNG में पारदर्शिता की आवश्यकता है, तो आपको या तो उस बैकग्राउंड लेयर को हटाना होगा या उसे एक नियमित लेयर में बदलना होगा (बस Photoshop के लेयर्स पैनल में उस पर डबल-क्लिक करें और OK दबाएँ)। CocoConvert इतना स्मार्ट है कि इसकी जाँच कर लेता है; यदि किसी PSD में केवल एक अपारदर्शी बैकग्राउंड लेयर है, तो आउटपुट PNG में अल्फा चैनल नहीं होगा, जो सही और अधिक कुशल व्यवहार है।
दोहराए जा सकने वाले परिणामों के लिए एक व्यावहारिक वर्कफ़्लो
यदि आप नियमित रूप से UI किट, ब्रांड लाइब्रेरी, या क्लाइंट के काम के लिए PSD बदलते हैं, तो एक सुसंगत वर्कफ़्लो आपका सबसे अच्छा दोस्त है। यह समय बचाता है और मूर्खतापूर्ण गलतियों को समाप्त करता है। एकल फ़ाइलों या छोटे बैचों के लिए जिनके लिए Photoshop उपलब्ध है, मैन्युअल विधि पर टिके रहें। Merge Visible स्टैम्प (Shift+Cmd+Option+E) का उपयोग करें, दोबारा जाँचें कि कलर प्रोफ़ाइल sRGB है, और फिर पारदर्शिता सक्षम करके Export As का उपयोग करें। इसमें प्रति फ़ाइल एक मिनट से भी कम समय लगता है और आपको अधिकतम नियंत्रण मिलता है। बड़े बैचों के लिए या जब आपके पास Photoshop न हो, तो CocoConvert के [PSD से PNG कनवर्टर](/convert/psd-to-png) का उपयोग करें। यह भारी काम करता है। अपलोड करने से पहले, अपने PSD को जटिल Smart Objects या 3D लेयर्स के लिए जल्दी से स्कैन करना एक अच्छा विचार है। यदि पिक्सल-परफेक्ट सटीकता से कोई समझौता नहीं किया जा सकता है, तो पहले उन लेयर्स को रास्टराइज़ करें। बैच डाउनलोड करने के बाद, पारदर्शिता सही दिखने की पुष्टि करने के लिए परिणामी PNG में से कुछ की ब्राउज़र में औचक जाँच करें। प्रोडक्शन वेब एसेट्स के लिए, फ़ाइल का आकार ही सब कुछ है। बदलने के बाद, अपने PNG को oxipng जैसे ऑप्टिमाइज़र के माध्यम से चलाएँ। `oxipng -o 4 --strip safe *.png` जैसा एक सरल कमांड कम्प्रेशन और गति का एक बड़ा संतुलन देता है, और अनावश्यक मेटाडेटा को सुरक्षित रूप से हटा देता है। अंत में, अपनी टीम (और अपने भविष्य के स्वयं) का एक एहसान करें: अपनी सेटिंग्स का दस्तावेजीकरण करें। जब आप एसेट्स सौंपते हैं, तो फ़ॉर्मैट के बारे में एक लाइन का नोट शामिल करें। कुछ इस तरह, 'सभी PNG sRGB, PNG-24 हैं, पारदर्शिता के साथ, oxipng -o4 के साथ ऑप्टिमाइज़ किए गए हैं'। यह सरल कदम उस डरावनी 'ये रंग मेरी स्क्रीन पर अजीब क्यों दिख रहे हैं?' वाली बातचीत से बचाता है जो सभी का समय बर्बाद करती है।