📘 CodingMarble Learn

डिजिटल इमेजरी और वेब डिज़ाइन: चित्र, मॉडल और वेब पेज कैसे बनते हैं

कैमरे का लेंस प्रकाश को लाखों पिक्सेल वाले सेंसर पर फ़ोकस करता है। हर पिक्सेल लाल, हरा और नीला (RGB) मान रखता है। ज़्यादा पिक्सेल = ज़्यादा रिज़ॉल्यूशन; ज़्यादा बिट = ज़्यादा रंग; फ़ाइल आकार = चौड़ाई × ऊँचाई × बिट ÷ 8 बाइट (संपीड़न से पहले)। 3D मॉडल तार-ढाँचे से शुरू होकर सतह, टेक्सचर और रोशनी पाते हैं; एनिमेशन हर सेकंड कई फ़्रेम दिखाता है। अच्छा डिज़ाइन डिज़ाइन के तत्वों और सिद्धांतों का उपयोग करता है और वेब पेज का लेआउट साफ़ होता है। असली प्रोजेक्ट में उपकरणों का सुरक्षित उपयोग, टीमवर्क और सबको जोड़कर एक उत्पाद बनाना ज़रूरी है।

🎬 कदम-दर-कदम कहानी

  1. वस्तु से प्रकाश लेंस से गुज़रकर सेंसर पर उल्टा पड़ता है। सेंसर छोटे-छोटे खानों का जाल है जिन्हें पिक्सेल कहते हैं।
  2. वही चित्र 4 × 4 पिक्सेल में, फिर 16 × 16 में। खाने गिनो: ज़्यादा पिक्सेल, ज़्यादा बारीकी। यही रिज़ॉल्यूशन है।
  3. स्क्रीन का हर पिक्सेल लाल, हरा और नीला प्रकाश मिलाता है। तीनों गोले पास आते हैं: जहाँ तीनों मिलते हैं वहाँ सफ़ेद।
  4. 3D मॉडल पहले तार-ढाँचा होता है, फिर रंगीन सतह पाता है। एनिमेशन में फ़्रेम एक के बाद एक दिखते हैं, जैसे हर सेकंड 24।
  5. वेब पेज का लेआउट: हेडर, मेन्यू, चित्र, पाठ और फ़ुटर। हर ब्लॉक सीध में अपनी जगह आता है।
  6. अब तुम्हारी बारी: चौड़ाई, ऊँचाई और बिट प्रति पिक्सेल बदलो। फ़ाइल का आकार पढ़ो और पिक्सेल जाल बदलता देखो।

टिप: 3D दृश्य को घुमाने के लिए खींचें। ज़ूम के लिए दो उंगलियाँ इस्तेमाल करें।

🤔 आम शंकाएँ और उनके जवाब

सेंसर पर चित्र उल्टा है तो मेरी फ़ोटो सीधी क्यों दिखती है?

कैमरे का प्रोसेसर पिक्सेल जाल को उल्टे क्रम में पढ़ लेता है। चरण 1 में सेंसर पर उल्टा चित्र दिखता है।

ज़ूम करने पर फ़ोटो डिब्बेदार क्यों दिखती है?

तुम अलग-अलग पिक्सेल देख रहे हो। चरण 2 दिखाता है कि कम पिक्सेल से बड़े डिब्बे बनते हैं।

स्क्रीन पर लाल और हरा पीला क्यों बनाते हैं, रंगों की तरह भूरा नहीं?

स्क्रीन प्रकाश जोड़ती है (योगात्मक); पेंट प्रकाश सोखते हैं (व्यवकलनात्मक)। चरण 3 में लाल और हरे गोले मिलकर पीले चमकते हैं।

क्या एनिमेटर हर फ़्रेम हाथ से बनाते हैं?

हमेशा नहीं। वे की-फ़्रेम बनाते हैं और कंप्यूटर बीच के फ़्रेम भरता है। चरण 4 में गेंद के चार फ़्रेम हैं।

वेबसाइटें मेन्यू ऊपर क्यों रखती हैं?

लोग सबसे पहले वहीं देखते हैं, इसलिए पेज जल्दी मिलते हैं। चरण 5 में मेन्यू हेडर के नीचे है।

बड़े चित्र देर से क्यों खुलते हैं?

फ़ाइल आकार चौड़ाई × ऊँचाई × बिट के साथ बढ़ता है। दोनों भुजाएँ दुगुनी करो तो आकार चार गुना। चरण 6 में आज़माओ।

कैमरा और इमेजिंग प्रणालियाँ

डिजिटल कैमरे में: लेंस जो प्रकाश को मोड़कर (अपवर्तन) फ़ोकस करता है, अपर्चर (छेद) जो प्रकाश की मात्रा तय करता है, शटर जो समय तय करता है, और इमेज सेंसर (CCD या CMOS) जिसमें लाखों प्रकाश-संवेदी पिक्सेल हैं। प्रोसेसर संकेतों को फ़ाइल बनाकर मेमोरी कार्ड में रखता है।

विज्ञान: प्रकाश सीधी रेखा में चलता है, उत्तल लेंस वास्तविक उल्टा प्रतिबिंब बनाता है, और सेंसर प्रकाश को विद्युत आवेश में बदलता है (प्रकाश-विद्युत प्रभाव)।

पिक्सेल, रिज़ॉल्यूशन, रंग और फ़ाइल आकार

बिना संपीड़न आकार (बाइट) = चौड़ाई × ऊँचाई × बिट ÷ 8। अनुपात = चौड़ाई : ऊँचाई (16:9, 4:3)। छपाई का आकार (इंच) = पिक्सेल ÷ PPI।

इमेज एडिटिंग, एनिमेशन और 3D मॉडलिंग

इमेज एडिटिंग

परतें (layers), मास्क, क्रॉप, लेवल्स व कर्व्स (चमक और कंट्रास्ट), रंग संतुलन, क्लोन और रीटच। बिना नष्ट किए एडिटिंग मूल फ़ाइल सुरक्षित रखती है। ईमानदारी से एडिट करो: बदली फ़ोटो से किसी को धोखा मत दो।

एनिमेशन

एनिमेशन तेज़ी से दिखाए गए स्थिर फ़्रेमों की शृंखला है। फ़िल्म 24 fps, वीडियो 25–30 fps, गेम 60 fps। की-फ़्रेम मुख्य मुद्राएँ तय करते हैं और सॉफ़्टवेयर बीच के फ़्रेम (tweening) भरता है।

3D मॉडलिंग

मॉडल शीर्ष (vertices), किनारे (edges) और फलक (faces/polygons) से बनी मेश है (तार-ढाँचे में दिखती है)। फिर सामग्री व टेक्सचर, रोशनी, कैमरा और रेंडरिंग (कंप्यूटर अंतिम चित्र बनाता है)। रिग (कंकाल) से पात्र हिलते हैं।

डिज़ाइन के सिद्धांत और वेब डिज़ाइन

डिज़ाइन के तत्व: रेखा, आकृति, रंग, बनावट (texture), स्थान, रूप, मान (उजाला-अँधेरा) और टाइपोग्राफ़ी।

डिज़ाइन के सिद्धांत: संतुलन, कंट्रास्ट, ज़ोर (केंद्र बिंदु), संरेखण, दोहराव, निकटता, पदानुक्रम और ख़ाली जगह। तिहाई का नियम मुख्य विषय को 3 × 3 जाल की रेखाओं पर रखता है।

वेब पेज लेआउट

ज़्यादातर पेजों में हेडर (लोगो, शीर्षक), नेविगेशन मेन्यू, मुख्य सामग्री (चित्र और पाठ) और फ़ुटर (संपर्क, लिंक) होते हैं। पेज HTML (ढाँचा) और CSS (शैली) से बनते हैं और रिस्पॉन्सिव होते हैं: फ़ोन पर लेआउट बदल जाता है। वेब के चित्र छोटे और संपीड़ित हों ताकि पेज जल्दी खुले, और उनमें alt टेक्स्ट हो।

रचनात्मक प्रक्रिया: ब्रीफ़ → शोध → स्केच → ड्राफ़्ट → प्रतिक्रिया → अंतिम।

उपकरणों का सुरक्षित उपयोग, टीमवर्क और निर्माण

उपकरण सुरक्षा

कैमरा पट्टे और लेंस-कैप के साथ ले जाओ; गद्देदार बैग; ट्राइपॉड और लाइट स्टैंड को रेत की थैली से टिकाओ; तारों को टेप से चिपकाओ; गरम लाइटें ठंडी होने दो; सॉफ़्टवेयर लगाते समय लाइसेंस नियम मानो।

टीमवर्क

फ़ाइलें साफ़ नाम वाले साझा फ़ोल्डर में रखो, हर सदस्य को भूमिका दो (निर्देशक, फ़ोटोग्राफ़र, एडिटर, डिज़ाइनर), छोटी बैठकें करो, ऐसा विचार-मंथन करो जिसमें हर विचार लिखा जाए, विनम्र और साफ़ प्रतिक्रिया दो और साझा समय-सारिणी रखो।

निर्माण

योजना (स्टोरीबोर्ड या वायरफ़्रेम) → कैप्चर (फ़ोटो, मॉडल) → एडिट → चित्र, पाठ, ध्वनि और एनिमेशन को एक शैली में जोड़कर एक उत्पाद → जाँच → प्रकाशन।

करके देखो

फ़ोन से एक फ़ोटो लो और फ़ोटो की जानकारी में पिक्सेल आकार देखो। W × H × 24 ÷ 8 से बिना संपीड़न आकार निकालो और असली JPEG आकार से तुलना करो। फिर चरण 6 में दूसरे आकार आज़माओ।

मुख्य सूत्र और परिभाषाएँ

हल किए गए उदाहरण

1. चित्र 1920 × 1080 पिक्सेल है। कितने मेगापिक्सेल?

1920 × 1080 = 20,73,600 पिक्सेल ≈ 2.1 MP।

2. 1920 × 1080, 24-बिट चित्र का बिना संपीड़न आकार MB में?

1920 × 1080 × 24 ÷ 8 = 62,20,800 बाइट ≈ 6.2 MB।

3. 8-बिट चित्र कितने रंग दिखा सकता है?

2⁸ = 256 रंग।

4. 3000 × 2400 पिक्सेल फ़ोटो 300 PPI पर छपी। आकार?

3000 ÷ 300 = 10 इंच, 2400 ÷ 300 = 8 इंच, यानी 10 × 8 इंच (लगभग 25 × 20 cm)।

5. 12 सेकंड का एनिमेशन 24 fps पर। कितने फ़्रेम?

24 × 12 = 288 फ़्रेम।

आम गलतियाँ

अभ्यास क्विज़

1. कैमरे का कौन-सा भाग प्रकाश को विद्युत संकेत में बदलता है?
2. पूरी तीव्रता पर लाल + हरा + नीला प्रकाश देता है:
3. कौन-सा चित्र प्रकार बिना गुणवत्ता खोए बड़ा होता है?
4. 24 fps का अर्थ:
5. वेब पेज का कौन-सा भाग नीचे संपर्क लिंक रखता है?

अभ्यास: खुद जवाब दो

अपना जवाब लिखो या चुनो, फिर जाँचें दबाओ। अटको तो संकेत देखो; जवाब देने के बाद पूरा हल दिखेगा।

अक्सर पूछे जाने वाले प्रश्न

डिजिटल चित्र में रिज़ॉल्यूशन क्या है?

चित्र में पिक्सेल की संख्या (जैसे 1920 × 1080), या छपाई में हर इंच में कितने पिक्सेल (PPI)।

रास्टर और वेक्टर चित्र में क्या अंतर है?

रास्टर पिक्सेल का जाल है, फ़ोटो के लिए अच्छा, बड़ा करने पर धुंधला। वेक्टर गणितीय आकृतियाँ हैं, लोगो और आइकन के लिए अच्छा, हर आकार में साफ़।

वेब पेज लेआउट के मुख्य भाग कौन-से हैं?

हेडर, नेविगेशन मेन्यू, मुख्य सामग्री (पाठ और चित्र) और फ़ुटर। कई पेजों में साइडबार भी होता है, और सब फ़ोन स्क्रीन के हिसाब से बदलने चाहिए।

यह कहाँ पढ़ाया जाता है

कनाडा (ओंटारियो)Grade 12A. Communications Technology Fundamentals
कनाडा (ओंटारियो)Grade 12B. Communications Technology Skills

पहले यह पढ़ें

आगे पढ़ें

इससे जुड़े पाठ

सभी कंप्यूटर विज्ञान पाठ