"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
أدوات على الانترنت
برنامج تعليمي
التنقل في الموقع
برمجة
الصفحة الأمامية > برمجة > من الآلات الكاتبة إلى البكسل: رحلة مع CMYK، وRGB، وبناء متخيل الألوان

من الآلات الكاتبة إلى البكسل: رحلة مع CMYK، وRGB، وبناء متخيل الألوان

تم النشر بتاريخ 2024-11-08
تصفح:114

عندما كنت طفلاً، قمت بنشر مجلة حول القصص المصورة. كان هذا قبل فترة طويلة من حصولي على جهاز كمبيوتر، فقد تم إنشاؤه باستخدام الآلة الكاتبة والورق والمقص!

كانت المجلة في البداية باللونين الأبيض والأسود، وتم تصويرها في مدرستي. بمرور الوقت، ومع تحقيق المزيد من النجاح، تمكنت من تحمل تكاليف طباعة الأوفست باستخدام أغلفة ملونة!

ومع ذلك، كانت إدارة تلك الألوان صعبة للغاية. كان لا بد من طباعة كل غلاف أربع مرات، مرة واحدة لكل لون: سماوي، أرجواني، أصفر، ومفتاح (أسود) - يُختصر بـ CMYK.

وهذا يعني أنه كان علي تقديم أربع أوراق منفصلة، ​​كل منها مطبوعة بالحبر الأسود، ولكنها تتوافق مع لون معين.

إليك أحد الأعداد التي قمت بنشرها:

From Typewriters to Pixels: A Journey with CMYK, RGB, and Building a Color Visualizer

كل اللون الأصفر الذي تراه في الصورة أعلاه تم رسمه يدويًا باستخدام الحبر الأسود على الورقة "الصفراء". بالنسبة للون البشرة، استخدمت ما يسمى "النقاط النقطية". كانت هذه صفائح يمكنك شراؤها بنقاط سوداء ذات كثافات متفاوتة. يمكنك قص النقاط وتطبيقها - في هذه الحالة، على الورقة "الحمراء".

لقد عملت على طاولة مضيئة - طاولة رسم ذات سطح زجاجي مع إضاءة مدمجة - حتى أتمكن من رؤية الأوراق المختلفة أثناء محاذاتها بشكل صحيح.

لقد كان يستغرق وقتًا طويلاً جدًا، ولكنه أثار اهتمامًا مدى الحياة بفهم الألوان - والفرق الضخم بين ألوان الطباعة وألوان الشاشة!

على الرغم من أن CMYK يقتصر على أربعة ألوان، إلا أنه لا يزال من السهل نسبيًا فهمه. لقد استخدمنا جميعًا أقلام الرصاص الملونة على الورق ولدينا إحساس بديهي بكيفية مزج الألوان. CMYK هو نموذج ألوان

طرحي. تبدأ بورقة بيضاء، وكلما أضفت المزيد من الحبر، فإنك في الواقع تطرح الضوء. الجمع بين جميع الألوان ينقلك نحو اللون الأسود. إذا لم تقم بوضع أي حبر، فستظل الورقة بيضاء لأنها تعكس كل الضوء.

عندما حصلت على جهاز الكمبيوتر الأول، كان علي أن أفهم RGB، وهو

مختلف جدًا عن CMYK. RGB هو نموذج ألوان مضاف يستخدم للشاشات الرقمية. هنا، أنت تقوم بخلط الضوء نفسه - فإضافة المزيد من الضوء يجعل الألوان أكثر سطوعًا وينقلك نحو اللون الأبيض. قم بإيقاف تشغيل كافة مصابيح RGB (R=0، G=0، B=0)، وستتحول الشاشة إلى اللون الأسود لأنه لا يوجد ضوء منبعث.

باعتبارك مصمم جرافيك في ذلك الوقت، كان عليك معايرة شاشتك لأن الألوان التي تراها على الشاشة وتلك التي تراها مطبوعة كانت في كثير من الأحيان مختلفة

جدًا!

تصور RGB

يمثل RGB ثلاثة مصادر للضوء: الأحمر والأخضر والأزرق. عندما يكون الضوء

مطفأ، تكون قيمته 0؛ عندما يكون قيد التشغيل بشكل كامل، تكون قيمته 255. عندما تتداخل هذه الأضواء، فإنها تخلق ألوانًا مختلفة.

لفهم كيفية عمل RGB بشكل أفضل، دعونا نبني أداة صغيرة:

From Typewriters to Pixels: A Journey with CMYK, RGB, and Building a Color Visualizer

HTML

ص:التسمية> ز:التسمية> ب: التسمية> R GR Bجي بيفيلدسيت> 

  
  
  R GR BG B

  
  
  الأنماط




أولاً، لنقم بإنشاء شبكة مقاس 9×8:


.rgb {
  الكل: غير محدد؛
  نسبة العرض إلى الارتفاع: 9 / 8؛
  نوع الحاوية: حجم مضمّن؛
  العرض: الشبكة؛
  حجم الخط: 1.75cqi؛
  أعمدة قالب الشبكة: كرر (9، 1fr)؛
  صفوف قالب الشبكة: كرر (8، 1fr)؛
  العرض: 100%؛
}


  
  
  R GR BG B
إنه حجم غير عادي، ولكن ذلك لأن دوائرنا R وG وB هي 5x5 و
تتداخل:

.r، .g، .b {
  نسبة العرض إلى الارتفاع: 1 / 1؛
  نصف قطر الحدود: 50%؛
  العرض: الشبكة؛
  حجم الخط: 5cqi؛
  وضع المزج والمزج: الفرق؛
}


  
  
  R GR BG B
إن CSS لـ .r و .g و .b هو:


.ر {
  لون الخلفية: rgb(var(--r), 0, 0);
  منطقة الشبكة: 1 / 3 / 6 / 8؛
}

ز {
  لون الخلفية: rgb(0, var(--g), 0);
  منطقة الشبكة: 4 / 1 / 9 / 6؛
}

.ب {
  لون الخلفية: rgb(0, 0, var(--b));
  منطقة الشبكة: 4 / 5 / 9 / 10؛
}


  
  
  R GR BG B
لقد استخدمت منطقة الشبكة كثيرًا مؤخرًا. يتيح لك وضع عنصر الشبكة في موقع محدد جدًا:



بداية الصف / بداية الصف / نهاية الصف / نهاية العمود



من الأسهل تصور ذلك إذا قمت بتمكين متخيل الشبكة 
 لأدوات التطوير:


From Typewriters to Pixels: A Journey with CMYK, RGB, and Building a Color Visualizer
هل لاحظت خصائص CSS المخصصة الثلاثة، --r، --g و --b؟ سنقوم بتحديث هذه العناصر في مقتطف JS صغير:


const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})


  
  
  R GR BG B
 وهذا كل شيء في الأساس. لقد أضفت بعض عناصر  وتعديلات طفيفة... ولكني نسيت تقريبًا أن أذكر 
السطر الأكثر أهمية لتشغيل المتخيل:


وضع المزج والمزج: الفرق



اقرأ عنها هنا - من الممتع جدًا التنقل عبر جميع الأوضاع.








  
  
  تجريبي




 إليك Codepen. انقر وقم بتحرير الأرقام الموجودة أسفل R وG وB، ولاحظ كيف تتغير خلفية الصفحة والأجزاء المتداخلة للدوائر الثلاث.







          


            
        
            

            
            

                        

              بيان الافراج
              
                تم إعادة إنتاج هذه المقالة على: https://dev.to/madsstoumann/from-typewriters-to-pixels-a-journey-with-cmyk-rgb-and-building-a-color-visualizer-484b?1إذا كان هناك أي التعدي، يرجى الاتصال بـ [email protected] للحذف               
              
            

                      

          

          

            

              أحدث البرنامج التعليمي
              أكثر>
            

            
          

        

        

          

            

              تصنيفأكثر>
            

            

                            تعلم اليابانية
                            تعلم اللغة الكورية
                            تعلم اللغة الصينية
                            تعلم لغة أجنبية
                            لعبة
                            مشكلة شائعة
                            ملحقات التكنولوجيا
                            منظمة العفو الدولية
                            برنامج تعليمي
                            برمجة
                            شرط
                          

          

          

            

              
دراسة اللغة الصينية

            

            
          

          

            

              أداةأكثر>
            

            

                            
                
                

                  
فك تشفير الصورة Base64

                

              
                            
                
                

                  
بينيين الصينية

                

              
                            
                
                

                  
ترميز يونيكود

                

              
                            
                
                

                  
JS ضغط تشفير التشويش

                

              
                            
                
                

                  
أداة تشفير URL الست عشري

                

              
                            
                
                

                  
أداة تحويل ترميز UTF-8

                

              
                            
                
                

                  
أدوات تشفير وفك تشفير Ascii عبر الإنترنت

                

              
                            
                
                

                  
أداة التشفير MD5

                

              
                            
                
                

                  
أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت

                

              
                            
                
                

                  
تشفير SHA عبر الإنترنت

                

              
                          

          

          

        

      

    

    
    
    

    

        
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected].
          سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

        
Copyright© 2022 湘ICP备2022001581号-3