केवल छाया और हाइलाइट रखते हुए एक डीसैचुरेटेड छवि को पारदर्शी बनाएं

Question

मैं कुछ दिनों के लिए ऐसा करने की कोशिश कर रहा हूं और मुझे उन परिणामों की आवश्यकता नहीं है। मुझे यकीन नहीं है कि मैं शीर्षक में सही शब्दावली का उपयोग कर रहा हूं, यदि नहीं, तो कृपया मुझे सही करने के लिए स्वतंत्र महसूस करें, और मैं इसे अपडेट करूंगा।

मैं इससे जाना चाहता हूं:

इस के लिए (मैं के मामले में k मान है कि मदद करता है दिखाने के लिए पारदर्शिता के एक क्षेत्र का नमूना लिया है)। ध्यान दें कि छाया / हाइलाइट वहाँ हैं, लेकिन कुछ और नहीं:

यह मुझे पारदर्शी छवि के नीचे एक ठोस रंग से भरी परत रखने की अनुमति देता है। परिणाम एक अलग रंग की शर्ट है, और छाया / हाइलाइट देखे जाते हैं:

पारदर्शी शर्ट की परत के नीचे नीले रंग से भरी परत

पारदर्शी शर्ट की परत के नीचे काले रंग से भरी परत

क्या किसी के पास कोई विचार है कि मैं इसे कैसे पूरा कर सकता हूं? मैं परिणाम के करीब पहुंचने में सक्षम हूं, लेकिन मेरी पारदर्शिता या तो पर्याप्त नहीं है या बहुत अधिक है। मैं छाया / हाइलाइट डिटेल बहुत खो देता हूं। आरंभिक छवि फाइलपाइप जेपीजी की है।

अपडेट करें:

मुझे इस तरह से PNG होने के लिए अंतिम परिणाम चाहिए:

यह पीएनजी ऐसा लगता है कि इसकी एक सफेद पृष्ठभूमि है लेकिन इसे फ़ोटोशॉप या जीआईएमपी में ले जाने से आप देखेंगे कि शर्ट पारदर्शी है। मुझे इंजीनियर को उलटने की ज़रूरत है कि यह कैसे किया गया था ताकि इसे कपड़ों के अन्य टुकड़ों में किया जा सके।

उपरोक्त PNG के बारे में दिलचस्प बात यह है कि छवि के पारदर्शी हिस्से में शैडो, हाइलाइट्स और मिडटोन्स सभी को व्यक्तिगत रूप से चुना जा सकता है। फोटोशॉप: सेलेक्ट-> कलर रेंज-> शैडो, हाइलाइट्स या मिडटोन। नीचे दी गई छवि दिखाने के लिए कि मेरा क्या मतलब है:

Comments

एक गुणा के मोड के साथ एक लेयर ब्लेंड क्यों नहीं? ऐसा लगता है कि आपके आकार में बहुत अच्छी तरह से परिभाषित किनारों हैं ताकि आप इसे बहुत आसानी से मुखौटा कर सकें।

— ckpepper02

क्योंकि ओपी छवि को पारदर्शी पीएनजी के रूप में निर्यात करना चाहता है। इसके पीछे होने के लिए एक रंग पर निर्भर करता है।

— हन्ना

फ़ोटोशॉप

— हन्ना

गुणा + मुखौटा तब जाने का रास्ता है।

— जॉन

क्या आप उस पर विस्तार कर सकते हैं, जॉन?

— हन्ना

Answer 1

पारदर्शिता के लिए अल्फा चैनल के रूप में सफेद असाइन करते समय हम अपारदर्शी हाइलाइट नहीं कर पाएंगे, क्योंकि ये प्रति परिभाषा सफेद होगी, इसलिए पूरी तरह से पारदर्शी होगी।

एक अल्फा चैनल के लिए दोनों पर प्रकाश डाला सफेद क्षेत्रों, और काली छाया हम बेहतर अल्फा प्रदान करने के लिए एक ग्रे रंग चुनते हैं।

• प्रभाव को अधिक स्पष्ट रूप से दिखाने के लिए मैंने पहली बार आपकी मूल छवि को गहरा बनाया, और इसके विपरीत वृद्धि की। आपको स्रोत के विपरीत दोनों को समायोजित करने की आवश्यकता होगी, और एक ग्रे स्तर चुनें जो बेहतर परिणामों के लिए आपकी आवश्यकताओं के अनुरूप हो।

• तब मैंने एक अल्फा चैनल को 'ग्रे' रंग (सफेद के बजाय) को सौंपा:

  

अब जब हम इस चित्र को उदाहरण के लिए एक हरे रंग की पृष्ठभूमि के साथ ओवरले करते हैं, तो हम देख सकते हैं, कि दोनों हाइलाइट, और छाया बनाए हुए हैं।

हम देख सकते हैं, कि जब गहरे रंगों पर उपयोग किया जाता है, तो मूल छवि के सफेद क्षेत्र वांछित प्रभाव के लिए बहुत उज्ज्वल हो सकते हैं। यह तब दूर हो सकता है जब हम अपने अल्फा चैनल टेम्पलेट बनाने के लिए एक सफेद स्रोत के बजाय एक ग्रे चुनते हैं।

नीचे (ऊपर बाएं) मैंने सफेद मूल पर 20% अस्पष्टता के साथ एक ग्रे बाल्टी भराव का उपयोग किया। ग्रे (शीर्ष दाएं) को एक पारदर्शिता अल्फा चैनल आवंटित करने के बाद हम नीचे की रेखा के प्रभाव को प्राप्त करने के लिए एक रंगीन पृष्ठभूमि (बाएं काले, मध्यम गहरे लाल, दाएं हाथी दांत) को ओवरले कर सकते हैं।

Comments

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

— AMMT

@ ध्वन्यात्मक: मैंने जल्दी से जिम्प के साथ ऐसा किया (पारदर्शिता के लिए किसी भी रंग का चयन करने के लिए एक मेनू प्रविष्टि है)। यह मुझे विश्वास दिलाता है कि पीएस या आपके द्वारा उपयोग किए जाने वाले आवेदन में भी ऐसा विकल्प होना चाहिए (या होना चाहिए)। हालांकि पीटर के बहुत अच्छे एवरेज , यानी हाइलाइट्स और शैडो को अलग करके एक बेहतर दृष्टिकोण दिया गया है। यह बहुत महीन समायोजन के लिए अनुमति देगा।

— तक्षक

अब मैं समझ गया। इन निर्देशों का पालन करने के लिए मुझे वही हासिल करना चाहिए जो मुझे चाहिए। बहुत बहुत धन्यवाद

— aMMT

मैं इस ट्यूटोरियल के लिए psd हो सकता है, मैं पारदर्शिता प्राप्त कर रहा है।

@ तक्कट आप दूसरे बिंदु के लिए चरणों का उल्लेख कर सकते हैं - "फिर मैंने एक अल्फा चैनल को 'ग्रे' रंग (सफेद के बजाय) को सौंपा"?

— विशाल

Answer 2

इसके लिए, आप छाया और हाइलाइट के लिए अलग चैनल बनाते हैं ।

छाया सीधे सफेद टी-शर्ट से लिया जा सकता है और एक के रूप में इस्तेमाल किया जा multiplicator शर्ट के रंग के लिए (0-100%) (परत मोड: गुणा)

के रूप में प्रकाश डाला , यह वास्तव में सामग्री पर निर्भर करता है। कपड़ा सतह पर बहुत अधिक प्रकाश को प्रतिबिंबित नहीं करता है, इसलिए इसका अधिकांश रंग विसरित प्रकाश (शर्ट के रंग) से आता है। स्पेक्युलर लाइट निकालने के लिए, मैं व्हाइट शर्ट की इमेज पर हाई-पास फिल्टर (हिस्टोग्राम अडेप्टेशन: केवल ब्राइट कलर्स और डार्क कलर में से कोई भी नहीं) का इस्तेमाल करूंगा और शर्ट को ब्राइट करने के लिए इस्तेमाल करूंगा , लेकिन केवल 20% के साथ (कम प्रतिबिंब)।

परतें:

परिणामी छवियां:

Comments

यह भी खूब रही। क्या पारदर्शी पीएनजी के रूप में अंतिम छवि प्राप्त करने का कोई तरीका है? यहां अंतिम लक्ष्य एक वेबसाइट पर 1 एकल png छवि का उपयोग करना है, और HTML div की पृष्ठभूमि का रंग बदलकर जिसमें छवि शामिल है, शर्ट का रंग प्रभावी रूप से बदल जाएगा।

— AMMT

मुझे हाइलाइट लेने में परेशानी हो रही है। मुझे लगता है कि मुझे एक कदम याद आ रहा है क्योंकि एक उच्च-पास फिल्टर को लागू करने के बाद, जिस शर्ट में मैंने उच्च-पास फ़िल्टर लागू किया है वह बहुत ग्रे दिखने के लिए है (आपकी हाइलाइट परत में जैसा दिखता है, वैसा इसके विपरीत नहीं है) । मैंने पहले हाई-पास फ़िल्टर पर 20 पिक्सेल त्रिज्या का उपयोग किया और फिर कुछ अलग-अलग त्रिज्या मानों की कोशिश की, लेकिन मैं आपके हाइलाइट परत में जो देखा जा रहा है, उसके करीब नहीं जा रहा हूं। मुझे क्या याद आ रही है?

— AMMT

उसी विधि का उपयोग करें, अपनी छवि की पृष्ठभूमि / बाहरी को सफेद में भरें और अपने सीएसएस को नीचे की परत के रूप में कार्य करने दें। शर्ट एक अर्ध-पारदर्शी खिड़की होगी।

— जॉन

काश मैं इस जवाब को बेहतर तरीके से समझ पाता क्योंकि यह वाकई बहुत अच्छा लगता है।

— हन्ना

इस आशय के लिए ब्लेंड मोड्स (बहुतायत से रोशन) की आवश्यकता होती है, जबकि HTML केवल सामान्य सम्मिश्रण (एक दूसरे के ऊपर पारदर्शी चित्रों को चित्रित करना) का उपयोग करता है। एचटीएमएल 5 + एसवीजी एक विकल्प होगा, लेकिन एसवीजी मिश्रण मोड ब्राउज़र द्वारा अभी तक समर्थित नहीं हैं। Dev.w3.org/SVG/modules/compositing/master/… देखें । ब्राउज़र में इस आशय का एक प्रभावी तरीका पृष्ठ में एम्बेडेड एक छोटे जावा प्रोग्राम (Java2d मिश्रण मोड) के साथ होगा।

— पीटर वालसर

Answer 3

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

Answer 4

सीएसएस फिल्टर बल्कि कई छवियों का प्रयोग करें

वेबसाइट के लिए इमेज को कलर करने के लिए आपको CSS फिल्टर्स का उपयोग करना चाहिए ।

लाभ इस प्रकार हैं।

1. केवल एक छवि की आवश्यकता है।
2. छोटी छवि फ़ाइल आकार।
3. एक छवि संपादक का उपयोग किए बिना अपने रंगों पर अधिक नियंत्रण।
4. मोबाइल के अनुकूल।
5. तेजी से लोड समय।
6. बेहतर एसईओ।

---

के लिए ह्यू इस सीएसएस फिल्टर का उपयोग करें:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

के लिए चमक उपयोग:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

के लिए संतृप्ति उपयोग करें:

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

के लिए ग्रेस्केल उपयोग करें:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}