बिना चश्मे के 3 डी इमेज: 3 डी एनिमेटेड जीआईएफ कैसे बनाएं

विषय

• असली 3 डी
• 3 डी बिना चश्मे के
• मेरा पहला स्टॉप मोशन एनीमेशन
• एनिमेटेड GIF कैसे बनाये
• बाहर तोड़
• व्हाइट स्पेस को कम करना
• एक वेब पेज पर पोजिशनिंग सामग्री
• स्थिति
• 3 डी Stereograms Wiggle
• चश्मे के साथ या बिना
• कुछ और उपयोगी लिंक

मैंने एक प्रोग्राम बनाया जो फ़ोटो और वीडियो से एनिमेटेड GIF बनाता है। फिर मैंने इसका उपयोग 3 डी एनिमेशन बनाने के लिए किया।

असली 3 डी

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

सच त्रिविम छवियां बहुत अच्छी लग सकती हैं। छवि वास्तविक चीज़ से अधिक दिलचस्प लग सकती है। मैंने अपने कॉफी मग की एक तस्वीर ली और यह मेरी सबसे लोकप्रिय तस्वीरों में से एक बन गई। यह दिलचस्प है क्योंकि हैंडल स्क्रीन से बाहर आता है। समस्या यह है कि अधिकांश लोग प्रभाव नहीं देख सकते हैं। कुछ लोग स्टीरियो में नहीं देख सकते हैं और अधिकांश लोगों के पास विशेष चश्मा नहीं है। एक और समस्या यह है कि 3 डी चश्मा के बिना देखे जाने पर वे अच्छे नहीं लगते हैं।

याद रखो

3 डी ग्लास की एक उच्च गुणवत्ता वाली जोड़ी की कीमत लगभग $ 8 है।

3 डी बिना चश्मे के

विभाजन गहराई GIF बार के साथ एनिमेटेड GIF हैं। छवियां आपके समतल स्क्रीन के भीतर सम्‍मिलित हैं। एक तस्वीर पर सलाखों को रखने से ऐसा लग सकता है कि सलाखों के सामने सब कुछ है। एक बार के हिस्से को हटाने से ऐसा लग सकता है कि सलाखों के पीछे कुछ है। जब विषय अब सलाखों से बाधित नहीं होता है, तो यह उनके सामने प्रकट होता है। सलाखें बहुत सामने थीं। तब एक छवि ने इसे अतीत में स्थानांतरित कर दिया। तो यह स्क्रीन के सामने प्रतीत होता है। यह एक तीन आयामी ब्रेक आउट प्रभाव है।

रूखेपन को दूर करना इसी तरह की छवियों के बीच जल्दी से बारी द्वारा बनाया गया है। एक ही विषय की दो तस्वीरें दो अलग-अलग दृष्टिकोण से लें। फिर एक एनिमेटेड GIF या वीडियो बनाएं। जल्दी से एक दृष्टिकोण से दूसरे दृष्टिकोण पर स्विच करना गहराई की उपस्थिति को जोड़ सकता है। दोनों आंखें दोनों छवियों को देखती हैं, इसलिए यह सच है स्टीरियोस्कोपी नहीं है।

विभाजन की गहराई एनिमेशन और स्टीरियोस्कोपिक छवियों पर स्टिरियोस्कोपी को अलग करने का मुख्य लाभ यह है कि वे बिना चश्मे के त्रि-आयामी प्रभाव प्रदान कर सकते हैं। आप कुछ दिलचस्प तस्वीरें प्राप्त कर सकते हैं और उन्हें साझा करना आसान है। मुख्य नुकसान यह है कि प्रभाव सीमित है और वे बनाने के लिए कठिन हो सकते हैं। रियल 3 डी छवियां अधिक गहराई प्रदान कर सकती हैं और उन्हें 30 सेकंड में बनाया जा सकता है।

मेरा पहला स्टॉप मोशन एनीमेशन

एनिमेटेड GIF कैसे बनाये

एनिमेटेड GIF चित्रों की एक श्रृंखला का उपयोग कर बनाया जाता है। 2 या अधिक फ़ोटो या एक छोटा वीडियो लें। फिर छवियों को एक एनिमेटेड GIF के रूप में सहेजें। वे आमतौर पर छोटे और छोटे होते हैं। ज्यादातर दोहराते रहते हैं। एक चिकनी संक्रमण के लिए, शुरुआत और अंत चित्र समान या समान होना चाहिए। उपरोक्त एनीमेशन में, मैंने छवियों को क्रम में जोड़ा। फिर मैंने उसी चित्रों को रिवर्स ऑर्डर में जोड़ा। यह शुरुआत में समाप्त होता है।

वे ऑनलाइन लोकप्रिय हैं, लेकिन उन्हें ऑफ़लाइन देखना और उनके साथ काम करना मुश्किल हो सकता है। अक्सर आपको केवल पहली तस्वीर मिलती है। मैं केवल वेब पेजों पर, ई-मेल में या ब्राउज़र के साथ चित्र खोलकर GIF देख सकता था। राइट-क्लिक करें और अपने पसंदीदा ब्राउज़र के साथ "खोलें"।आयाम जो आपके कंप्यूटर या वेबसाइट पर अच्छे दिखते हैं, यदि आयाम बहुत बड़े हैं, तो उन्हें सोशल मीडिया साइटों पर अवरुद्ध किया जा सकता है।

एनिमेटेड GIF के रूप में एक वीडियो या चित्रों की श्रृंखला को बचाने के लिए आपको एक कार्यक्रम खोजने या अपना खुद का बनाने की आवश्यकता होगी। ऑनलाइन GIF निर्माताओं को ढूंढना आसान है। आप फ़ोटोशॉप जैसे पेंट प्रोग्राम का भी उपयोग कर सकते हैं। मेरे सभी एनिमेशन 3 डी GIF मेकर का उपयोग करके बनाए गए थे जिन्हें मैंने बनाया था जब मैं सीख रहा था कि कैसे तीन आयामी चित्र बनाने के लिए जिन्हें विशेष चश्मे की आवश्यकता नहीं थी।

GIF में कम रंग होते हैं। तो यह छवियों की गुणवत्ता को कम करता है। आप वीडियो, वेबपी फाइल या APNGs के रूप में एनिमेशन करना चाहते हैं। एक APNG GIF के बजाय एनीमेशन के लिए PNG छवियों का उपयोग करता है। इन विकल्पों के साथ, आपको बेहतर गुणवत्ता और एक छोटे फ़ाइल आकार मिलता है। नकारात्मक पक्ष यह है कि इसके खेलने की संभावना कम है। ईमेल से जुड़ी होने पर मुझे PNG फ़ाइल को सहेजना होगा और एनीमेशन देखने के लिए इसे वेब ब्राउज़र में खोलना होगा।

मैंने अपने स्टार वार्स एनीमेशन के आकार को 70% कम करने के लिए टाइनीपीएनजी का उपयोग किया। सबसे छोटे आकार के लिए, मैं वेबपी या वीडियो की सलाह देता हूं। एक वेब पेज पर एक एनिमेटेड GIF की तरह एक छोटा वीडियो व्यवहार करना आसान है। नीचे दिए गए कोड में वीडियो तत्व पहला वीडियो चलाता है जो उपयोगकर्ता के ब्राउज़र के साथ काम करता है। चित्र तत्व पहले चित्र को प्रदर्शित करता है जो काम करता है।

वीडियो ऑटोप्ले लूप इनलाइन शीर्षक = "3 डी एनिमेशन"> स्रोत src = "3DVid.webm" प्रकार = "वीडियो / वेबम"> स्रोत src = "3DVid.mp4" प्रकार = "वीडियो / mp4>> / वीडियो> स्रोत> srcset = "3DAnimation.webp" प्रकार = "छवि / वेबप"> img src = "3DAnimation.gif"> / चित्र>

एक और ट्रिक

बाधाओं और सीमाओं को बनाओ। फिर उनके माध्यम से तोड़ो।

बाहर तोड़

स्क्रीन प्रभाव से बाहर निकलना बेहतर काम करता है जब ऑब्जेक्ट कैमरे के करीब हो रहे हैं। जैसे-जैसे यह करीब आता जाता है यह थोड़ा बड़ा होता जाता है। सलाखों को जोड़ना केवल एक छवि 3D-ईश बनाने का एकमात्र तरीका नहीं है। आप एक ऑप्टिकल भ्रम पैदा कर रहे हैं। नकली सीमाओं को बनाकर गलत धारणा बनाने में दर्शक को बरगलाने की कोशिश करें।

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

व्हाइट स्पेस को कम करना

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

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

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

पारदर्शिता का समर्थन करने वाले फ़ाइल प्रकारों में PNG, WebP, WebM, Mov और GIF शामिल हैं। चित्र और वीडियो देखे जा सकते हैं। एक उदाहरण देखने के लिए मेरे स्टार वार्स एनीमेशन देखें। इसे काले रंग की पृष्ठभूमि के साथ देखने के लिए एक नए टैब में खोलें। मैं पारदर्शी पृष्ठभूमि वाले GIF बनाने की अनुशंसा नहीं करता। चिकना किनारा दांतेदार बन सकता है।

एक वेब पेज पर पोजिशनिंग सामग्री

नीचे दिया गया कोड पृष्ठ पर पाठ की स्थिति को बदलता है इसलिए यह छवि के नीचे है। GetBoundingClientRect को छवि का स्थान और आयाम मिलता है। स्थिति यह बताती है कि पृष्ठ पर कोड का उपयोग करके स्थिति निर्धारित की जा रही है। बाएं और शीर्ष मान सेट करना यह बताता है कि पाठ कहाँ प्रदर्शित होना चाहिए। आप कोड को कॉपी कर सकते हैं और इसे एक तस्वीर के साथ निर्देशिका में नोटपैड जैसे टेक्स्ट एडिटर में सेव कर सकते हैं।

फ़ाइल नाम "पारदर्शी.गिफ़" को उस फ़ाइल में बदलना चाहिए जिसे आप उपयोग करना चाहते हैं। सर्वोत्तम परिणामों के लिए एक पारदर्शी GIF का उपयोग करें। फ़ाइल आपके डिफ़ॉल्ट वेब ब्राउज़र में खुलेगी। वेब पेज पर सामग्री की स्थिति को बदलना विशेष प्रभाव, गेम और ऑनलाइन छवि संपादकों के लिए बहुत उपयोगी हो सकता है।

स्थिति

! DOCTYPE html> html> सिर> मेटा चारसेट = "utf-8"> मेटा आईडी = "व्यूपोर्ट" नाम = "व्यूपोर्ट" सामग्री = "उपयोगकर्ता-स्केलेबल = नहीं, प्रारंभिक-स्केल = १, चौड़ाई = उपकरण-चौड़ाई, ऊंचाई = डिवाइस-ऊंचाई "/> शीर्षक> एक चित्र / शीर्षक के तहत चल रहा पाठ> / सिर> शरीर> केंद्र> img आईडी =" pic1 "शैली =" अधिकतम-चौड़ाई: 90% ";> div आईडी =" div0 "शैली = "फ़ॉन्ट-आकार: 120%; पाठ-संरेखित: औचित्य; दृश्यता: छिपा हुआ;"> एक पारदर्शी छवि को उसके नीचे पाठ या छवियों को रखने से छोटा दिखाई देता है। : निरपेक्ष; फ़ॉन्ट-आकार: 120%; मार्जिन-वाम: ऑटो; मार्जिन-राइट: ऑटो; चौड़ाई: 100%; पाठ-संरेखित: औचित्य; zIndex: 0 "/ div> / केंद्र> स्क्रिप्ट> var Pic1 = दस्तावेज़ .getElementById ("pic1"), Div0 = document.getElementById ("div0"), Div1 = document.getElementById ("div1"); function onload () // तैयार {Pic1.onload = function () {Pic1.onload = ""; const rect = Pic1.getBoundingClientRect (); var LeftMargin = rect.width * 14; Pic1.style.marginLeft = LeftMargin + "px"; Div0.style. उपलब्धता = rect.width + LeftMargin + "px"; Div1.style. उपलब्धता = Div0.style. उपलब्धता; const rect2 = Div0.getBoundingClientRect (); Div1.innerHTML = Div0.innerHTML; Div1.style.left = rect2.left + "px"; Div1.style.top = (rect.top + rect.height *। 85) + "px"; Div0.style.display = "कोई नहीं"; } Pic1.src = "पारदर्शी.जीआईएफ"; }; window.onload = onload (); Div1.style.zIndex = "-1"; / स्क्रिप्ट> / बॉडी> / html>

3D- ईश छवियां

स्प्लिट डेप्थ जीआईएफ लगभग 3 डी हैं।

3 डी Stereograms Wiggle

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

विग्लिंग GIF बनाना वास्तव में आसान है, लेकिन इसे बनाना कठिन हो सकता है जिसे लोग देखना पसंद करते हैं। झटकों की मात्रा को सीमित करें। आमतौर पर आप चाहते हैं कि दोनों चित्र मुख्य विषय पर केंद्रित हों इसलिए चित्र का विषय मुश्किल से चलता है। ऐसा नहीं लगना चाहिए कि आप भूकंप दर्ज कर रहे हैं।

आंशिक रूप से 3 डी छवियां

Wiggle stereograms दोनों आँखों से देखा जाता है ताकि आपको पूर्ण प्रभाव न मिले।

चश्मे के साथ या बिना

Wiggle stereoscopy सच्ची त्रिविम छवियों की सस्ती दस्तक की तरह है। चित्र अस्थिर हैं और वे स्क्रीन से बहुत दूर नहीं निकलते हैं। रियल 3 डी छवियां बहुत बेहतर दिखती हैं, लेकिन उन्हें विशेष चश्मे की आवश्यकता होती है। यदि आप अधिक लोगों को प्रभाव देखना चाहते हैं, तो विगली स्टीरियोस्कोपी का उपयोग करें। बेहतर परिणाम के लिए असली 3D का उपयोग करें। आप दोनों को करने के लिए समान चित्रों का उपयोग कर सकते हैं।

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

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

कुछ और उपयोगी लिंक

• थ्री-डी के बिना 3D इमेज और वीडियो कैसे बनाएं ...
  2D को 3D में बदलना सीखें। त्रि-आयामी तस्वीरें बनाना आसान और त्वरित हो सकता है। मैं 30 सेकंड में एक अच्छी तीन आयामी छवि बना सकता हूं। जब आप गहराई का भ्रम जोड़ सकते हैं तो फ्लैट चित्रों के लिए क्यों व्यवस्थित करें। इसके लिए विशेष चश्मे की आवश्यकता होती है लेकिन वे ए
• अदृश्यता वीडियो प्रभाव का उपयोग करके कैमरे पर अदृश्य कैसे बनें - विशेषज्ञ परिणाम
  क्या आप अदृश्य बनना चाहेंगे? मैंने यह देखने के लिए प्रयोग किया कि क्या मैं रंगों को पारदर्शी बनाकर अपने वेबकैम पर वस्तुओं के माध्यम से देख सकता हूं। अदृश्यता प्रभाव का उपयोग करके जानें कि अदृश्यता कैसे काम करती है और आसानी से अदृश्य कैसे हो जाती है।