لقد تعلمنا الآن العديد من طرق صنع الرسوم المتحركة، لكننا مازلنا غير واضحين تمامًا بشأن الشكل النهائي للرسوم المتحركة. كيفية إخراج الرسوم المتحركة؟ أين يتم استخدامه؟ ما الذي يجب أن ننتبه إليه أثناء الاستخدام؟ وفي هذا الدرس سنشرح هذه المسائل بالتفصيل.
حاليًا، تنسيق الصور المتحركة الرئيسي على أنظمة Windows هو GIF، والذي يمكن أيضًا عرضه مباشرة على صفحات الويب وهو تنسيق الصور المتحركة الأكثر استخدامًا حاليًا. بما في ذلك الرسوم المتحركة في رسائل الوسائط المتعددة للهاتف المحمول المشهورة الآن، تنتمي أيضًا إلى تنسيق GIF. يدعم تنسيق GIF التعبيرات الثابتة والمتحركة. سواء كانت ثابتة أو متحركة، فإن الخصائص هي نفسها.
مبدأ تنفيذ الرسوم المتحركة بتنسيق GIF ليس معقدًا، يمكنك فهمه على أنه دمج عدة صور ثابتة (إطارات) لعرضها بدورها. كما أن هناك علاقات تشغيلية بين هذه الصور (الإطارات)، وهي تشبه عمليات أي مسار محدد، وهي الجمع والطرح والحذف. هذا لتحسين عدد البايتات للرسوم المتحركة.
في حالة إضافة إطار معين، سيتم الاحتفاظ بالإطار السابق وإضافة محتوى هذا الإطار لتكوين صورة جديدة. على سبيل المثال، تعد الرسوم المتحركة لشريط التقدم المشترك مثالًا نموذجيًا، كما هو موضح في الشكل أدناه، لنفترض أن شريط التقدم يتكون من 3 إطارات. من حيث شكل الإطار النظري الذي نراه، يبدو أنه يتم تخزين الإطارات الأقصر والمتوسطة في هذه الإطارات الثلاثة على التوالي وصورة شريط التقدم الأطول. لكن في الواقع، يحتوي الإطار الثاني فقط على وحدات البكسل غير الموجودة في الإطار الأول، ثم يعمل على الإطار الأول بطريقة إضافية، مكونًا صورة "1+2". الشيء نفسه ينطبق على الإطار 3. يؤدي هذا التحسين إلى تقليل عدد بايت الصورة بشكل فعال.
طريقة الطرح هي عكس ذلك تمامًا، فهي تمحو وحدات بكسل معينة في الإطار السابق للصورة، وهو ما يمكن فهمه من خلال "شريط التقدم العكسي". تتمثل طريقة الإزالة في مسح الإطار السابق تمامًا، ويتم استخدامه بشكل أساسي عندما لا يكون هناك ارتباط بين الإطارين قبله وبعده، على سبيل المثال، عند التغيير من اللون الأحمر بالكامل إلى اللون الأخضر بالكامل، إذا لم تكن هناك وحدات بكسل متماثلة بينهما الإطارات السابقة والقادمة، يتم استخدام طريقة الإزالة .
في الإنتاج الفعلي، سيقرر Photoshop تلقائيًا الطريقة التي سيتم اعتمادها بناءً على حالة الصورة، دون تدخل يدوي. يكفي أن نفهم طرق الحساب هذه كنوع من المعرفة. ويمكن استخدامه أيضًا كمرجع عند تصور الرسوم المتحركة.
الآن دعونا نتحدث عن الميزة المهمة التالية لتنسيق GIF، وهي الحد الأقصى لعدد الألوان. يمكن أن يدعم GIF 256 لونًا فقط كحد أقصى ، مما يعني أن صورة GIF يمكن أن تحتوي على 256 لونًا فقط كحد أقصى. يكون هذا واضحًا بشكل خاص في ملفات GIF الثابتة، حيث يصعب التعبير عن بعض الصور ذات الألوان الغنية، مثل تدرجات الألوان المتعددة، بشكل مثالي في ملفات GIF. كما هو موضح في الصورة اليسرى أدناه، جزء من الصورة (لاحظ أنه جزء، وليس الصورة الكاملة) هو صورة بتنسيق PNG24 بت وGIF256 بدون ثبات وثبات الانتشار. الصورة بأكملها هي نافذة متجر تم التقاطها في مدينة البندقية، كما هو موضح أدناه على اليمين.
يمكن أن نرى بوضوح أن PNG24 بت يتمتع بأفضل لون ويمكن اعتباره الصورة الأصلية. يحتوي تنسيق GIF على تعبير لوني رديء. بدون ثبات الألوان، تظهر بقع اللون في بعض المناطق مع انتقالات الألوان في الصورة الأصلية. في ظل ثبات الانتشار، يتم تفتيح البقع إلى حد ما، ولكن التحبب يكون أثقل، ويحدث ذلك بسبب مبدأ ثبات اللون نفسه. تم تقديم مفهوم التردد في البرنامج التعليمي الأساسي.
وتجدر الإشارة إلى أن 256 لونًا تشير إلى الصورة بأكملها. إذا كانت الصورة الأصلية بأكملها بالحجم الموضح أدناه، فإن الفرق بين 256 لونًا والصورة الأصلية ليس كبيرًا جدًا. وذلك لأنه عند تقليل الألوان إلى 256 لونًا، سيقوم Photoshop بترتيبها وفقًا للألوان الموجودة في الصورة الأصلية. وتسمى هذه العملية أيضًا بالفهرسة، وهي تجميع الألوان المتشابهة في لون واحد.
إذا كانت الألوان الموجودة في الصورة الأصلية تحتوي على تدرجات متعددة، فعند حساب متوسط الألوان البالغ عددها 256 لونًا، سيكون العدد المخصص لتدرج لوني واحد صغيرًا جدًا. على العكس من ذلك، إذا كان اللون في الصورة الأصلية هو نفسه أو قريب بشكل أساسي، فيمكن أيضًا التعبير عن 256 لونًا بشكل جيد. ولهذا السبب بدا اللون غير المقلد السابق البالغ عدده 256 لونًا وكأن البقع كانت واضحة، أما الآن فقد أصبحت البقع أقل وضوحًا. نظرًا لأن الصورة الأصلية للأول تحتوي على المزيد من الأشكال، يتم تعيين بعض الألوان للأزرق والأحمر وما إلى ذلك، ويتم تعيين ألوان أقل للمرحلة الصفراء. تحتوي الصورة الأصلية للأخيرة بشكل أساسي على المرحلة الصفراء فقط، لذلك ليست هناك حاجة لتعيين ألوان لتدرجات أخرى.
الصورة أدناه هي صورة مطلة على الشارع تم التقاطها في بياتسينكا، حيث قمنا بمقارنة أجزاء مختلفة منها. المربعات أدناه هي جداول الألوان، وتمثل المربعات الملونة 256 لونًا مستخدمًا. يمكن رؤية تأثير تركيبة ألوان الصورة الأصلية على مؤشر الألوان بسهولة في جدول الألوان. هناك تدرجات أكثر في الصورة على اليسار، لذا فإن عدد أطوار اللون الأزرق المخصصة للسماء من بين الـ 256 لوناً يكون أقل، كما توجد بقع لونية واضحة في السماء في الصورة. تحتوي الصورة الموجودة على اليمين بشكل أساسي على جزء السماء فقط، لذلك تم تخصيص معظم الألوان الـ 256 للمرحلة الزرقاء، مما يجعل أداء السماء في الصورة أفضل.
استخدم [ملف>حفظ للويب والأجهزة] [CTRL+SHIFT+ALT+S]، وسيظهر مربع إعدادات الحفظ. هذه هي وظيفة الإخراج الأكثر استخدامًا لدينا، خاصة في البرامج التعليمية لإضافات تصميم الويب التي سنتعلمها في المستقبل.
بعد الدخول إلى واجهة الإعداد، انتبه إلى السهم الأحمر، ما يجب أن تراه في علامة التبويب "التحسين" هو التأثير الفعلي بعد الإخراج، أي التأثير في المتصفح أو برنامج عرض الصور. علامة التبويب "الأصلية" هي التأثير الموجود في Photoshop ولا يمكن استخدامها كمعيار مرجعي، ويجب تذكر ذلك.
السهم الأخضر هو منطقة الإعداد المقابلة، والتي من خلالها نضبط تنسيق الصورة على GIF، ونضبط عدد الألوان على 256، ونوقف خيار التدرج. تتوافق إعداداته مع التأثير الموجود على الجانب الأيسر من الصورة أعلاه.
انتبه إلى مؤشر عدد البايتات عند السهم الأزرق، فهذا مؤشر مهم جدًا، حيث يجب علينا جعل هذا الرقم صغيرًا قدر الإمكان، وإلا فلن نتمكن من استخدام الصور أو الرسوم المتحركة بشكل فعال.
لتقليل عدد البايتات، يجب تقليل عدد الألوان، وسيتم تقليل عدد كتل الألوان في جدول الألوان وفقًا لذلك. ولكن من الواضح أن عددًا قليلًا جدًا من الألوان سيكون له تأثير كبير على جودة الصورة ويمكن أن يشكل بقعًا ملونة بسهولة. على الرغم من أن تشغيل ثبات اللون يمكن أن يقلل من بقع الألوان، إلا أنه سيؤدي أيضًا إلى زيادة عدد البايتات. إنه مثل التأرجح بين عدد البايتات والجودة، ولا يمكنك الحصول على كليهما. بالنسبة للصور التي يُقصد نقلها عبر الإنترنت، غالبًا ما يكون عدد البايتات أكثر أهمية لأن معظم الزوار لن يكون لديهم الصبر للانتظار لعدة دقائق حتى يتم عرض صفحة الويب. بالإضافة إلى الصور، تحتوي صفحات الويب أيضًا على رموز أخرى تحتاج أيضًا إلى شغل وحدات البايت، لذلك يعد تقليل عدد البايتات مبدأ أساسيًا. وبطبيعة الحال، يتعارض هذا المبدأ مع جودة الصورة، مما يتطلب منا أن يكون لدينا المهارات الكافية لتحقيق التوازن بين الاثنين في عملية التصور والإنتاج. تشمل هذه التقنيات ما يلي:
1. لا تستخدم ألوانًا غنية جدًا في الرسوم المتحركة. لقد تم ذكر السبب بالفعل. سيؤدي المزيد من الألوان إلى انخفاض جودة الصورة بعد الفهرسة وتكوين بقع لونية قبيحة. في هذه الحالة، من الأفضل استخدام لون واحد، على الرغم من أنه قد لا يكون رائعًا بدرجة كافية، إلا أنه على الأقل يمكنه تجنب ظهور العيوب مثل البقع.
2. إذا كانت الألوان الغنية ضرورية، فيجب أن تظل وحدات البكسل الموجودة في الأجزاء الغنية بالألوان ثابتة في الرسوم المتحركة. نظرًا لوجود علاقة تشغيلية بين الإطارات السابقة والتالية لرسوم GIF المتحركة، يمكن استخدام الجزء الموجود في الحالة الثابتة في الإطارات اللاحقة، وليست هناك حاجة لتخزين هذا الجزء من الصورة في تلك الإطارات اللاحقة. يمكن أن يؤدي ذلك إلى تقليل عدد البايتات بشكل فعال مع الحفاظ على اللون الغني للرسوم المتحركة بأكملها. على العكس من ذلك، إذا كانت وحدات البكسل الأكثر ثراءً تتحرك أيضًا، فيجب تخزين وحدات البكسل الأكثر ثراءً في الإطارات اللاحقة، مما سيؤدي إلى زيادة عدد البايتات الإجمالي للرسوم المتحركة بشكل كبير.
المقارنة بين الصورتين المتحركتين أدناه تحافظ على التوهج الخارجي والإسقاط والأجزاء الأخرى من الكرة دون تغيير، ويتغير الجزء المميز فقط. والثاني هو الحركة الشاملة للكرة. في ظل فرضية نفس معدل الإطارات، ونفس المدة، وكلاهما 256 وعدم التردد، فإن عدد البايتات في الأول هو 9.29 كيلو بايت، والأخير هو 57.1 كيلو بايت. الفرق يصل إلى 6 مرات. ثم سيختلف الوقت المستغرق لنقلها على الشبكة بمقدار 6 مرات.
عندما نتصور الرسوم المتحركة، يجب علينا أن نفكر في الغرض منها مقدمًا، وإذا كان سيتم استخدامها في صفحة ويب، فيجب علينا أيضًا الإشارة إلى أهميتها في صفحة الويب، وإذا لم تكن مهمة جدًا وكانت تزيينية، فحاول تقليلها بايت أكبر عدد ممكن. ويمكن تحقيق ذلك من جانبين: تقليل عدد الألوان أثناء التخزين والتخطيط الجيد للإنتاج. إذا واجهت رسمًا متحركًا يحتوي على تعليمات مهمة يجب أن تكون ملونة أو ديناميكية، فيجب عليك تقليل حجم الرسم المتحرك قدر الإمكان. نظرًا لأن إجمالي عدد وحدات البكسل في الصورة صغيرة الحجم صغير أيضًا، فإن الفهرسة ذات 256 لونًا لن تظهر ضيقة جدًا. يمكنك معرفة ذلك من خلال تجاربك الخاصة.
ميزة أخرى مهمة لـ GIF هي أنها تدعم شفافية الخلفية ، مما يسمح لها بالاندماج بشكل جيد مع خلفية صفحة الويب. يمكنك أيضًا إخراج صورة GIF بخلفية شفافة عن طريق إيقاف تشغيل طبقة الخلفية. ومع ذلك، يمكن أن تكون شفافية خلفية GIF في حالتين فقط، إما شفافة بالكامل أو معتمة بالكامل، ولكنها ليست شفافة بينهما. لذلك، ما لم تكن حدود الصورة خطوطًا أفقية أو رأسية أو قطرية بزاوية 45 درجة، فسيتم تشكيل اسم مستعار واضح بسبب الشفافية. كما هو موضح في الشكل أدناه، تظهر مجموعة من الرسومات ذات حدود مختلفة تحت ألوان خلفية مختلفة. وليس من الصعب رؤية الفرق بين الاثنين.
تجدر الإشارة إلى أن مبدأ تشكيل خشونة الحافة لا يمثل مشكلة في الصورة فحسب، بل أيضًا عوامل تتعلق بالقيود المادية للعرض. تم ذكر المعرفة ذات الصلة في البرنامج التعليمي الأساسي.
بالنسبة للصور ذات وحدات البكسل شبه الشفافة (مثل أنماط الظل المسقط)، إذا كنت تريد حفظها كخلفية شفافة، فأنت بحاجة إلى تشغيل مشروع ثبات الشفافية، بحيث يمكن استخدام النقاط الصغيرة المتناثرة ذات الكثافة المختلفة لمحاكاة الشفافية . كما هو مبين في الشكل أدناه. يمكن ملاحظة أنه على الرغم من أن ملف GIF ضمن "لا يوجد ثبات للشفافية" يحتوي أيضًا على خلفية شفافة، إلا أن الجزء الشفاف الأصلي لا يزال يحتفظ باللون الأبيض، لذلك لا يمكن تطبيقه إلا على خلفية بيضاء. هذا الأخير يمكن تطبيقه على أي خلفية. كما هو موضح أدناه على اليمين.
تجدر الإشارة إلى أن تذبذب الشفافية ليس حلاً مثاليًا، بل يمكن القول إنه حل سيئ للغاية. ولكن نظرًا للقيود المفروضة على شفافية ملف GIF نفسه، فهو يعد أيضًا حلاً. في الإنتاج الفعلي، إذا قررت استخدام تنسيق GIF، فيجب عليك تجنب إنشاء وحدات بكسل شبه شفافة عند حدود الصورة. بمعنى آخر، حاول تجنب استخدام ثبات الشفافية.
شيء آخر يجب ملاحظته هو أنه إذا كانت الرسوم المتحركة الناتجة ذات خلفية شفافة، فقد تغير علاقة الحساب لكل إطار في الحالة غير الشفافة، وقد تتسبب أيضًا في زيادة عدد بايتات الرسوم المتحركة.
الآن دعونا نتحدث بإيجاز عن استخدام الرسوم المتحركة كرسائل MMS على الهواتف المحمولة.
تسمح شركة China Mobile حاليًا بحد أقصى 100 ألف رسالة MMS، ومن الأفضل التحكم في الرسوم المتحركة التي يقل حجمها عن 95 ألفًا وترك بعض المساحة للنص ورمز الرسالة النصية القصيرة نفسها. شيء آخر يجب ملاحظته هو حجم الرسوم المتحركة. تحتوي الطرز المختلفة للهواتف المحمولة على أحجام مختلفة من الرسوم المتحركة التي يمكن عرضها بشكل مثالي نظرًا لاختلاف دقة الشاشة. ويعني ما يسمى بالعرض المثالي أن دقة شاشة الهاتف المحمول هي نفس حجم الرسوم المتحركة أو أكبر منها. إذا تجاوز حجم الرسوم المتحركة دقة شاشة الهاتف المحمول، فسيقوم الهاتف المحمول بتصغيرها للعرض. لكن جودة الرسوم المتحركة المخفضة ستصبح سيئة للغاية. أحجام الشاشات الشائعة هي:
128×128: شائع في الهواتف المحمولة المنخفضة الجودة المبكرة والحالية. إنه الحجم الأساسي لرسوم MMS المتحركة. معظم رسوم MMS المتحركة التي تم تنزيلها من الإنترنت بهذا الحجم لأنه يمكن تشغيلها على جميع الهواتف المحمولة التي تدعم رسائل MMS تقريبًا.
128×160: على الرغم من أنه يحتوي على عدد قليل من البكسلات أكثر من السابق، إلا أنه يستخدم بشكل أساسي لعرض بعض المعلومات، لذا فإن معظم أحجام الرسوم المتحركة التي يمكن تشغيلها لا تزال 128×128.
176×208، 240×320: يُستخدم بشكل شائع في الهواتف المحمولة ذات أنظمة التشغيل المفتوحة مثل Symbian وWindows Mobile، ويمكنه تشغيل الرسوم المتحركة بملء الشاشة. هناك أيضًا هواتف محمولة عادية تستخدم هذه الدقة، ولكن ليس من المؤكد ما إذا كان يمكنها دعم التشغيل بملء الشاشة.
480×640: شائع في طرازات الهواتف المحمولة المتطورة، على الرغم من أنه يمكن نظريًا دعم تشغيل الرسوم المتحركة بنفس الحجم في وضع ملء الشاشة، إلا أنه نظرًا لقيود GIF نفسها، إلا أن سلاسة التشغيل غير مضمونة.
عند إنشاء رسوم متحركة لرسائل الوسائط المتعددة، يجب أن يكون 128×128 هو الحجم الأساسي الذي يجب مراعاته، لأنه يتمتع بأفضل توافق، ونظرًا لصغر حجمه، فإن عدد بايتات الرسوم المتحركة لنفس المحتوى أصغر من الأحجام الأكبر. بالطبع، إذا تم تحديد دقة شاشة جهاز الاستقبال، فيمكن أيضًا صنعها بحجم مماثل لها. من الأفضل أن تكون خلفية الرسوم المتحركة باللون الأبيض بحيث لا يكون هناك حدود واضحة. لأن اللون الأبيض هو أيضًا لون الخلفية عندما تعرض الهواتف المحمولة رسائل الوسائط المتعددة، تمامًا مثل خلفية صفحات الويب. بالطبع، في بعض الأحيان يكون من الضروري خلق إحساس بالحدود عمدًا (مثل الخطوط العريضة للختم). يمكنك اتخاذ قرارك الخاص بناءً على الموقف المحدد. بالإضافة إلى ذلك، نظرًا لأن معظم الهواتف المحمولة لا يمكنها تغيير الخلفية عند عرض رسائل الوسائط المتعددة، فمن غير المنطقي استخدام خلفية شفافة في الرسوم المتحركة لرسائل الوسائط المتعددة.
يوجد زر "Device Central..." في الركن الأيمن السفلي من "حفظ للويب والأجهزة". بعد الضغط عليه، يمكنك معاينة تأثير الرسوم المتحركة على جهاز الهاتف المحمول المحدد. كما هو موضح أدناه. يمكنك تحديده من قائمة الأجهزة الموجودة على اليسار. الجهاز المحدد في الصورة هو Nokia 3110. يعد Adobe Device Central في الواقع قاعدة بيانات للأجهزة المحمولة توفر بيئة مركزية لأولئك الذين ينتجون الأجهزة المحمولة. بالإضافة إلى العرض العادي، يمكنه أيضًا محاكاة حالة العرض عند إيقاف تشغيل الإضاءة الخلفية لشاشة الهاتف المحمول، وتكون الشاشة الخارجية مضاءة من الخلف. ومع ذلك، فإن هذه الميزات ليست ذات أهمية كبيرة بالنسبة لنا في الوقت الحالي.
هناك مشكلة أخرى يجب الانتباه إليها وهي معدل إطارات الرسوم المتحركة على جهاز الكمبيوتر، حيث يمكن تشغيل الرسوم المتحركة بمعدل 30 إطارًا في الثانية بسلاسة، ولكن معالج الهاتف المحمول ليس أفضل من كمبيوتر سطح المكتب، وموارده محدودة. يجب ضبط معدل إطارات الرسوم المتحركة على 2 ~ 5 إطارات في الثانية بالنسبة للهواتف المحمولة ذات أنظمة التشغيل المفتوحة، نظرًا لأن أداء معالجها أفضل من الهواتف المحمولة العادية، يمكن ضبطه على 10 إطارات في الثانية أو أعلى. وفي الوقت نفسه، تؤثر أيضًا عوامل مثل الحجم والمدة الإجمالية وعدد البايتات وما إلى ذلك على تأثير التشغيل على الهواتف المحمولة. من الأفضل تجربة الرسوم المتحركة على هاتفك المحمول لمعرفة مدى سلاسة الرسوم المتحركة.
إذا كنت ترغب في إخراج رسوم متحركة بأحجام متعددة ومختلفة، فمن الأفضل استخدام تنسيق المتجه للإنتاج، كما أن تنسيق المتجه هو أيضًا أفضل تنسيق لحفظ الصورة الأصلية، وذلك تماشيًا مع مبدأ "الحفاظ على أقصى قدر من إمكانية التحرير" الذي نتبعه دائمًا دعا.