छवियाँ और तस्वीरें · ब्राउज़र छवि और ड्राइंग एडिटर
रेखापुंज बनाम वेक्टर ग्राफ़िक्स: फ़ोटो पर चित्र पिक्सेल क्यों बन जाते हैं
· पेजभूमि
छवि संपादन कैनवास ब्राउज़र-प्रसंस्करण
रेखापुंज छवियाँ पिक्सेल की ग्रिड हैं; वेक्टर ग्राफ़िक्स आकृतियाँ बनाने के निर्देश हैं। यह पोस्ट इस अंतर को स्पष्ट करती है कि क्यों एक तस्वीर केवल रेखापुंज ही हो सकती है, और आप उस पर जो कुछ भी बनाते हैं उसका निर्यात पर भी वही भाग्य क्यों होता है।
वह लोगो जो धुंधला हो गया और वह फोटो जो कभी भी 'वेक्टरीकृत' नहीं किया जा सका - एक स्पष्टीकरण के साथ दो रोजमर्रा की उलझनें
धुंधले लोगो और एनोटेटेड तस्वीर को अक्सर एक ही समस्या के लिए दोषी ठहराया जाता है, लेकिन वे विभिन्न प्रकार की सामग्री के रूप में शुरू होते हैं। एक वेक्टर लोगो पथ, स्ट्रोक और भरण के लिए निर्देशों का एक सेट है; एक तस्वीर नमूना रंग का एक सीमित क्षेत्र है। एडिटर तस्वीर को कैनवास के आकार के रेखापुंज बिटमैप के रूप में खोलता है, इसलिए इसकी कामकाजी दुनिया एक रेखा या आयत खींचने से पहले ही पिक्सेल का एक ग्रिड है।
फ़ोटो के ऊपर एक बॉक्स बनाएं, उसे निर्यात करें और किनारे पर ज़ूम करें। परिणाम एक रेखापुंज छवि है जिसका एनोटेशन तस्वीर के साथ-साथ पिक्सेल पर है। बड़े डिस्प्ले आकार में उस फ़ाइल की तुलना मूल SVG से करें और अंतर दिखाई देने लगता है: निर्यात को बड़ा करने से उसका ग्रिड फिर से नमूना हो जाता है, जबकि SVG को बड़ा करने से उसका पथ फिर से गणना हो जाता है। यह एडिटर पहली वस्तु को दूसरी वस्तु में नहीं बदलता है।
रेखापुंज: रंगीन कोशिकाओं का एक ग्रिड - PNG, JPEG और WebP चित्रों को कैसे संग्रहीत करते हैं और स्केलिंग पिक्सेल का आविष्कार क्यों करती है
रेखापुंज छवियां ग्रिड में स्थितियों पर रंग रिकॉर्ड करती हैं। PNG, JPEG, और WebP उनके एन्कोडिंग और संपीड़न में भिन्न हैं, लेकिन प्रदर्शित होने पर निर्यातित चित्र अभी भी पिक्सेल में हल हो जाता है। अंतिम छवि में एक-पिक्सेल सीमा, एक एंटी-अलियास्ड वक्र और एक छोटा कैप्शन सभी सीमित नमूने हैं। फ़ाइल को ऊपर की ओर स्केल करने से अतिरिक्त नमूनों का अनुमान लगाने के लिए एक इंटरपोलेशन प्रक्रिया की आवश्यकता होती है; यह मूल ड्राइंग निर्देश पुनर्प्राप्त नहीं करता है।
वह सीमा तब मायने रखती है जब एक एनोटेशन को कई आकारों में स्पष्ट रहना चाहिए। एक निश्चित डिस्प्ले के लिए बनाया गया स्क्रीनशॉट कॉलआउट रैस्टर एक्सपोर्ट के रूप में बिल्कुल सही हो सकता है, जबकि संकेतों, प्रिंट और कई इंटरफेस के लिए बनाया गया एक ब्रांड चिह्न सामान्य रूप से एक वेक्टर संपत्ति के रूप में उपलब्ध रहना चाहिए। समग्र छवि के लिए एडिटर का उपयोग करें, न कि स्रोत कलाकृति के विकल्प के रूप में जिसे स्वतंत्र रूप से स्केल किया जाना चाहिए।
वेक्टर: गणितीय रूप से वर्णित आकृतियाँ - SVG जैसे प्रारूपों में पथ, स्ट्रोक और भरण, और वे बिना नुकसान के स्केल क्यों करते हैं
वेक्टर प्रत्येक प्रदर्शित पिक्सेल को संग्रहीत करने के बजाय ज्यामिति का वर्णन करते हैं। एक SVG पथ एक वक्र, एक स्ट्रोक चौड़ाई, एक भरण और एक परिवर्तन निर्दिष्ट कर सकता है; फिर एक रेंडरर वर्तमान आकार के लिए उपयुक्त पिक्सेल की गणना करता है। इसीलिए एक ही साधारण निशान कई आयामों पर रखे जाने पर साफ रह सकता है। स्पष्टीकरण प्रारूप-स्तरीय पेजभूमि है, यह दावा नहीं है कि यह एडिटर ऐसे निर्देशों को उत्सर्जित या संरक्षित करता है।
ब्राउज़र एडिटर अस्थायी रूप से रेखा और आकार के इशारों के लिए ज्यामितीय जानकारी का उपयोग करता है, जो पूर्वावलोकन को रिलीज़ से पहले पॉइंटर का अनुसरण करने देता है। एक बार जब इशारा समाप्त हो जाता है, तो परिणाम एक रेखापुंज परत में चित्रित हो जाता है। निर्यात दृश्य परतों को संयोजित करता है और PNG, JPEG, या WebP के लिए canvas.toBlob को कॉल करता है। इस पथ में कोई SVG निर्यात या वेक्टर प्रोजेक्ट दस्तावेज़ नहीं है, इसलिए ज्यामिति एक स्वतंत्र वस्तु के रूप में जीवित नहीं रहती है।
तस्वीरें स्वाभाविक रूप से रेखापुंज क्यों होती हैं - सेंसर नमूने पकड़ते हैं, आकार नहीं, और कोई रूपांतरण इसमें बदलाव नहीं करता है
तस्वीरें रेखापुंज सामग्री हैं क्योंकि एक कैमरा एक सेंसर में प्रकाश के नमूने रिकॉर्ड करता है और उन नमूनों को छवि डेटा के रूप में संग्रहीत करता है। किसी तस्वीर को वेक्टर के रूप में वर्णित करने के लिए एक ऐसी व्याख्या की आवश्यकता होगी जो इसकी बनावट, शोर, छायांकन और अनियमित विवरण को आविष्कृत आकृतियों से बदल दे। अपस्केलिंग या इसे अलग तरीके से निर्यात करने से ग्रिड बदल सकता है, लेकिन कोई भी ऑपरेशन यह नहीं बदलता कि मूल कैप्चर में किस प्रकार की जानकारी है।
यह अंतर यह भी बताता है कि क्यों एक फोटो और एक लोगो एक ही चीज़ बने बिना एक संपादन में एक साथ रह सकते हैं। लोगो कहीं और एक वेक्टर के रूप में शुरू हो सकता है, फिर भी इस एडिटर में एक रेखापुंज फोटो पर खींचे जाने के बाद, संयुक्त परिणाम एक पिक्सेल ग्रिड है। भविष्य में पुन: उपयोग के मामले में मूल लोगो को अलग से सुरक्षित रखें, और ब्राउज़र निर्यात को उसके वर्तमान उद्देश्य के लिए तैयार छवि के रूप में मानें।
रास्टर पर आरेखण: एडिटर क्या करता है - जब आप संपादित करते हैं तो एनोटेशन आकार हो सकते हैं, लेकिन निर्यात की गई छवि एक एकल ग्रिड होती है
एक इशारे के दौरान, रेखा और आकार टूल कॉम्पैक्ट ज्यामितीय निर्देशों की तरह व्यवहार कर सकते हैं: एडिटर प्रारंभ बिंदु, अंतिम बिंदु, रूपरेखा और वर्तमान पूर्वावलोकन जानता है। रिलीज़ होने पर, उन निर्देशों को एक रेखापुंज परत में प्रस्तुत किया जाता है। ब्रश के निशान बनाए जाने पर रैस्टर पेंट होते हैं, और टेक्स्ट को चल टेक्स्ट ऑब्जेक्ट के रूप में बनाए रखने के बजाय प्लेसमेंट पर रैस्टराइज़ किया जाता है। इसलिए सत्र बाद में ऑब्जेक्ट-स्तरीय संपादन क्षमता का वादा किए बिना सुविधा प्रदान करता है।
निर्यात सीमा को स्पष्ट करता है। दृश्यमान रेखापुंज परतों को एक कैनवास में संयोजित किया जाता है, फिर ब्राउज़र के माध्यम से PNG, JPEG, या WebP के रूप में एन्कोड किया जाता है। उस फ़ाइल को दोबारा खोलने पर आपको तस्वीर और निशान सामान्य पिक्सेल के रूप में मिलते हैं; यह प्राप्तकर्ता को चयन योग्य आयत, पुन: प्रयोज्य पथ या संपादन योग्य कैप्शन नहीं देता है। यदि आपको केवल चित्र साझा करने के बजाय एनोटेशन बदलने की आवश्यकता हो तो स्तरित सत्र या स्रोत संपत्ति रखें।
कार्य के लिए सही प्रकार का चयन करना - वेक्टर लोगो के लिए कब पूछना है और रैस्टर निर्यात बिल्कुल वही है जो आप चाहते हैं
जब चिह्न को स्वयं यात्रा करनी हो तो एक वेक्टर संपत्ति चुनें: एक लोगो को कई आकारों की आवश्यकता होती है, एक आरेख को संशोधित किया जा सकता है, या एक प्रतीक को कई पेजभूमियों पर रखा जाना चाहिए। जब लक्ष्य एक रेडी-टू-शेयर स्क्रीनशॉट, कॉलआउट के साथ एक प्रमाण, या एक दृश्यमान नोट वाला फोटोग्राफ हो तो रैस्टर एक्सपोर्ट चुनें। सही निर्णय अगले उपयोग से होता है, इस विश्वास से नहीं कि एक प्रारूप हमेशा श्रेष्ठ होता है।
ब्राउज़र छवि और आरेखण एडिटर दूसरी कैटेगरी के लिए उपयुक्त है। यह किसी फोटो पर ब्रश, रेखा, आयत, दीर्घवृत्त और रेखापुंज पाठ चिह्न रख सकता है, फिर समग्र को रेखापुंज फ़ाइल के रूप में निर्यात कर सकता है। यह SVG को आउटपुट नहीं कर सकता या वेक्टर ऑब्जेक्ट मॉडल को संरक्षित नहीं कर सकता। यदि कोई ग्राहक एक स्वतंत्र संपत्ति के रूप में लोगो मांगता है, तो संपादित पिक्सेल से एक बड़ा संस्करण निकालने के बजाय मूल वेक्टर स्रोत पर वापस लौटें।
टेकअवे: जानें कि आपके पास कौन सा है - ब्राउज़र इमेज और ड्रॉइंग एडिटर रैस्टर छवियों को कैसे संपादित करता है और डिज़ाइन के अनुसार रैस्टर छवियों को निर्यात करता है
विश्वसनीय मानसिक मॉडल सरल है: एडिटर किसी हावभाव का वर्णन करने के लिए ज्यामिति का उपयोग कर सकता है, लेकिन दस्तावेज़ और उसका निर्यात रेखापुंज छवियां हैं। प्रत्येक खुली हुई तस्वीर और एडिटर परत में एक सीमित पिक्सेल ग्रिड होता है। उस ग्रिड को बड़ा करना मौजूदा जानकारी को फिर से नमूना देता है, और दृश्यमान परतों को दूसरे रैस्टर में निर्यात करता है। इस वर्कफ़्लो में कोई भी चरण उस पंक्ति से पुन: प्रयोज्य वेक्टर पथ नहीं बनाता है जो पहले से ही पिक्सेल बन चुका है।
चित्र बनाने से पहले फ़ाइल प्रकार और इच्छित प्राप्तकर्ता की जाँच करें। यदि प्राप्तकर्ता को एक तैयार चित्र देखने की आवश्यकता है, तो रैस्टर को निर्यात करें और वास्तविक प्रदर्शन आकार पर उसके किनारों का निरीक्षण करें। यदि प्राप्तकर्ता को चिह्नों को संपादित करने, लोगो को फिर से रंगने या कलाकृति को बार-बार स्केल करने की आवश्यकता है, तो एक उचित वेक्टर या स्तरित स्रोत प्रदान करें। यह अंतर तकनीकी रूप से वैध निर्यात को एक अलग प्रकार की डिलीवरी योग्य समझने से रोकता है।