البيانات التصويرية (الإنفوجرافيك)

1. تعلمت في الدرس السابق مفهوم الوسائط المتعددة وعناصرها اللازمة لإنتاجها، وهنا سنتطرق لإحدى الموضوعات الرئيسة في الوسائط المتعددة وهي البيانات التصويرية (الإنفوجرافيك).
2. ولنتعرف على مفهوم البيانات التصويرية، قم بالنشاط الآتي:

نشاط (١): مفهوم الانفوجرافيك تأمّل الشّكل أدناه، ثمّ أجب عن التّساؤلات التي تليها:

• ما أنواع البيانات المستخدمة في الشّكل أعلاه؟
• كم عدد أبواب المسجد الأقصى؟ وما أسماؤها؟
• ما موقع حائط البراق في الشّكل؟
• اكتب موضوعا حول المسجد الأقصى يشمل كلّ المعلومات الواردة في الشّكل من حيث: موقعه، وأسماء بواباته المفتوحة والمغلقة مواقعها، المعالم الدينية المحتوى داخل سور المسجد الأقصى، ووصف لكل معلم منها.

لعلّك لاحظت في النشاط السابق سرعة إجابتك عن التساؤلات المطلوبة، وهذا عائد لطريقة ترتيب النصوص والصور بشكل جذاب وواضح وسهل الفهم للجمهور، مما يؤثر في سرعة استجابتهم وتفاعلهم مع الموضوع المطروح، وهنا تكمن أهمية ما يُعرف بـ (البيانات التصويرية) أو (الإنفوجرافيك) مقارنةً بنص الموضوع التعبيري الطويل والذي يطرح كمية معلومات مماثلة ولكن بشكل ممل ومنفر للجمهور، ولكن: ما هو الإنفوجرافيك؟ يُعرف (الإنفوجرافيك) بأنه أسلوب وفن إيصال المعلومة بالصور والرسومات والرموز. يستخدم هذا الأسلوب على نطاق واسع انتشر حديثاً في عدة مجالات، منها: الاقتصاد والنشرات الإخبارية والعلوم والصحة ومراكز الإحصاء والتسويق الالكتروني وغيرها.

ابحث في شبكة الانترنت عن بعض الصور الإنفوجرافيكية حول مواضيع: التدخين، مرض السكري، الجرائم الصهيونية عام 1948م، احصاءات متعلقة باللاجئين الفلسطينيين من الجهاز المركزي للإحصاء الفلسطيني.

أنواع البيانات التصويرية من حيث طريقة العرض:

1. الإنفوجرافيك الثابت ⁦Static Infographic⁩

عبارة عن وحدة واحدة تتم قراءتها من اليمين إلى اليسار، أو من الأعلى إلى الأسفل، وبشكل خطي.

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

3. الإنفوجرافيك المتحرك ⁦Motion Infographic⁩

ويتم من خلالها استخدام الرسوم المتحركة والصوت والفيديو لإيصال الفكرة مما يعطيها تأثيراً أعمق وأكثر جاذبية.

تمعن الإنفوجرافيك المجاور، ثم اكتب أنواع الإنفوجرافيك من حيث التخطيط، مع ذكر مثال عليه.

هناك العديد من الأدوات المساعدة في تصميم الإنفوجرافيك من خلال توفيرها بقوالب جاهزة وبأشكال مختلفة؛ كالمخططات البيانية والانسيابية، والجداول الزمنية، ونماذج المقارنة. ومن أهم هذه الأدوات نذكر ما يأتي:

Animate, PowerPoint, Inkscape, Adobe Illustrator

www.Venngage.com, www.Canva.com, www.InfoGr.am

نستعرض بعض البرامج المجانية مفتوحة المصدر، والتي لاقت شهرة في مجال التصميم، والمستخدمة في معالجة العناصر المكوّنة للإنفوجرافيك والوسائط المتعددة.

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

يُعد أحد البرامج مفتوحة المصدر والتي لاقت انتشاراً واسعاً في مجال التصميم، ومن مميزات البرنامج نذكر ما يأتي:

• شبيه إلى حد ما ببرنامج «الفوتوشوب» الشهير في مجال التصميم.
• مجاني مفتوح المصدر، ويدعم اللغة العربية.
• يستخدم لإنتاج الرموز، والأيقونات وعناصر التصميم الرسومية وواجهات المستخدم.
• يدعم الطبقات ⁦(Layers)⁩ في تصميم الصور والرسومات.
• يدعم أنواعاً مختلفة من الملفات، أهمها: ⁦PSD, BMP⁩, ⁦JPEG⁩, ⁦TIFF, GIF⁩.

من خلال شبكة الانترنت، وبمساعدة معلمك، قم بتحميل برنامج ⁦GIMP⁩ من خلال الرابط ⁦https⁩://⁦www.gimp.org/downloads⁩ أو من أي موقع تراه مناسباً، ثم قم بتنصيبه على جهازك.

يمكنك العمل على منصة ⁦GIMP⁩ أونلاين من خلال الرابط: ⁦https⁩://⁦www.rollapp.com/app/gimp⁩

نشاط (3): مكونات الشاشة الرئيسة

قم بفتح برنامج ⁦GIMP⁩، واستكشف مكونات الشاشة الرئيسة.

ملاحظة: للحصول على نمط النافذة الواحدة القريب من معظم البرامج الشهيرة الأخرى (مثل الفوتوشوب)، قم بما يأتي: ⁦Mode Window Single⁩ <- ⁦Windows⁩

نشاط (4): طرق إدراج صور

باستخدام برنامج ⁦Gimp⁩، أدرج الصورة المجاورة في البرنامج، ثم ناقش مع زملائك التغييرات التي حدثت مع إدراج الصورة، والمشار إليها بالأرقام 1، 2، 3.

2. الأدوات في برنامج ⁦Gimp⁩

• أدوات التحديد ⁦Selection Tools⁩

  تلك الأدوات التي يمكن من خلالها عزل جزء محدد من الصورة عن بقية الصورة لمعالجتها، ومن أدواته:

• أداة التحديد الضبابي ⁦Select Fuzzy⁩

  عند اختيار الأداة

، ثم النقر على لون معين، يتم تحديد المنطقة التي تحمل هذا اللون، انظر الشكل المجاور.

• أداة التحديد اللوني ⁦Select By Color⁩

  عند اختيار الأداة

، ثم النقر على لون معين، يتم تحديد جميع المناطق في الصورة التي تحمل هذا اللون.

• أداة المقص الذكي ⁦Select Scissors⁩

  ويتميز بالمرونة في التمييز بين لون التحديد واللون المجاور له، وتعديل التحديد بناءً على ذلك، كما في الشكل أدناه.

يستخدم التحديد في برنامج ⁦Gimp⁩ لرسم الأشكال وليس لتحديدها فقط، وهذه ميزة خاصة بالبرنامج.

• أدوات النقل والتحجيم ⁦Tools Transform⁩

  وتستخدم لنقل الجزء المحدد من مكان لآخر، أو تعديل مساحته، كما يمكن تدويره، وتغيير منظور الرؤية.

نشاط (٥): أدوات التحديد والقص

باستخدام الأدوات اللازمة، قم بتحويل صورة النسر إلى ما يقابلها من الأشكال أدناه، ثم اكتب أسماء الأدوات التي استخدمتها وناقش وظيفتها مع زملائك.

• أدوات الرسم ⁦Tools Paint⁩

وتشمل العديد من الأدوات الشائعة التي سبق لك استخدامها في برامج مختلفة، أهمها:

أداة حرق الصورة وإضاءتها ⁦Dodge⁩

أداة مزج الألوان ⁦Smudge⁩

أ. أداة النسخ ⁦Clone⁩

ويتم النسخ من خلال اختيار الأداة، ثم ضغط مفتاح ⁦(Ctrl)⁩ عند النقطة المركزية التي يُراد النسخ انطلاقاً منها، وبعد وضع المؤشر على المكان المراد النسخ إليه يتم التحريك والنسخ، كما في الشكل أدناه.

ويمكن نسخ جزء من صورة أخرى باستخدام ⁦Layer As Open⁩ ليتم فتح الملف الصورة على طبقة جديدة داخل نفس الملف، ويتم النسخ منها قبل الانتقال إلى الطبقة المراد النسخ عليها.

ب. أداة المعالجة ⁦Heal⁩

نشاط (٦): استخدام الأدوات

ما هي الأداة الأنسب لحذف الحقيبة في الصورة أدناه؟ وهل يمكن إنجازه بأدوات أخرى؟

ابحث عن طريقة لعلاج التشوه في اليد في الصورة أدناه:

الطبقات ⁦(Layers)⁩

الصورة في برنامج ⁦GIMP⁩ عبارة عن حاوية من الورق الشفاف، وكل شفافية مفردة منها تسمى طبقة ⁦(layer)⁩ كما في الشكل أدناه.

مثال:

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

من العمليات على الطبقات تمعّن الشكل أدناه.

إزالة الخلفية من الصورة

يمكن من خلال برنامج ⁦GIMP⁩ إزالة الخلفية من الصورة لتبقى فقط المكونات التي نريد إظهارها، أو نقلها إلى خلفية أخرى، ويتم ذلك من خلال تحديد الجزء المراد إظهاره من الصورة باستخدام أداة التحديد الذكي، ثم ضغط مفتاح ⁦Enter⁩ لتثبيت التحديد، بعد ذلك، انقر بالزر الأيمن للفأرة على الجزء المحدد ثم اختار ما يأتي:

Selection < - Mask <- Layer New Add <- Layers

تمّعن تسلسل الصور الآتية، ثمّ أجب عن التساؤلات التي تليها.

قامت أداة التحديد الذكي بعزل الصورة اعتماداً على مبدأ -------------------------------------------------- القيام بإنشاء طبقة جديدة بهدف --------------------------------------------------

أكتب المصطلح المناسب أمام كل عبارة من العبارات الآتية:

1. ( ) تدعم تدرجات لونية كبيرة (أكثر من ١٦ مليون لون) ولا تستخدم آليات ضغط للصور.
2. ( ) تعتبر الصيغة التي من خلالها يتم تخزين ملفات ⁦Gimp⁩
3. ( ) صيغة تحمل عدة مستويات للشفافية بعكس ⁦Gif⁩ التي تحمل مستوى شفافية واحد.
4. ( ) صيغة تمثل الصور المتجهة القابلة للتعديل.
5. ( ) أداة في برنامج ⁦Gimp⁩ تستخدم في نسخ الصور.

قارن بين كلّ ممّا يأتي:

• أ. أداة تحديد اللّون ⁦select Color tool⁩ وأداة التحديد الضّبابي ⁦Fuzzy Tool⁩.
• ب. برنامج ⁦Gimp⁩ وبرنامج ⁦Photoshop⁩ من حيث التكلفة.
• ج. الصور النقطيّة والصّور المتّجهة من حيث الحجم التّخزيني، الدّقّة، سهولة الانجاز.