سلسلة من الدروس حول إنشاء رسوم متحركة مستوية في Photoshop CS3 (1): نظرة عامة.
مبدأ تكوين الرسوم المتحركة هو أن العين البشرية تتمتع بخاصية استمرارية الرؤية ويعني ما يسمى باستمرارية الرؤية أنه بعد رؤية الجسم، حتى لو اختفى الجسم بسرعة، فإنه سيظل يترك صورة مستمرة في العين. فترة معينة من الزمن وهذا صحيح عندما يكون الكائن مشرقًا نسبيًا، ويكون ذلك واضحًا بشكل خاص في حالة . الشيء الأكثر شيوعًا هو استخدام الفلاش عند التقاط الصور ليلاً، على الرغم من أن الفلاش قد انطفأ لفترة طويلة، إلا أن الهالة ستظل موجودة في عيون الهدف وتستمر لفترة من الوقت.
ربما يكون أول تطبيق لهذه الميزة قد قمنا به عندما كنا في المدرسة الابتدائية، وكان ذلك من خلال رسم حركات العديد من الشخصيات على تذييل الكتاب المدرسي، ثم التنقل فيها بسرعة للحصول على صور متواصلة في العيون هي الرسوم المتحركة. تجدر الإشارة إلى أن الرسوم المتحركة هنا لا تشير إلى الرسوم المتحركة الكرتونية، على الرغم من أن مبادئ إنتاج الرسوم المتحركة الكرتونية هي نفسها، إلا أن الرسوم المتحركة هنا تشير بشكل عام إلى جميع الصور المستمرة.
باختصار، ما يسمى بالرسوم المتحركة هو استخدام صور ثابتة متعددة للتشغيل بشكل مستمر واستخدام ثبات الرؤية لتشكيل صورة مستمرة. على سبيل المثال، تستخدم الأفلام التقليدية سلسلة طويلة من الأفلام لتسجيل إطارات فردية بشكل مستمر، وعرضها على الشاشة مع تسلسل الأضواء بسرعة معينة. هناك متطلبات السرعة هنا تخيل أننا إذا قمنا بتصفح الكتاب المدرسي ببطء، فسوف نواجه فقط صورًا ثابتة متعددة بدلاً من الصور المستمرة. وينطبق الشيء نفسه على تشغيل الأفلام، إذا كانت السرعة بطيئة للغاية، فإن ما يراه الجمهور يعادل عرض شرائح دوار. من أجل السماح للجمهور بتجربة الصور المستمرة، يتم تشغيل الفيلم بسرعة 24 إطارًا في الثانية، أي أنه يتم عرض 24 صورة ثابتة بشكل مستمر على الشاشة في ثانية واحدة. وحدة سرعة تشغيل الرسوم المتحركة هي fps، حيث f هي الكلمة الإنجليزية Frame (صورة، إطار)، p هي Per (per)، وs هي Second (ثانية). باللغة الصينية، يعني كم عدد الإطارات في الثانية، أو كم عدد الإطارات في الثانية. تبلغ سرعة الأفلام 24 إطارًا في الثانية، ويُشار إليها غالبًا بـ 24 إطارًا.
الأجهزة الأخرى التي يمكنها إنتاج صور في الحياة الواقعية لديها أيضًا مفهوم معدل الإطارات، مثل إشارات التلفزيون. تنسيق PAL المستخدم في الصين وأوروبا هو 25 إطارًا، وتنسيق NTSC المستخدم في اليابان والأمريكتين هو 29.97 إطارًا. إذا تم تشغيل الرسوم المتحركة على شاشة الكمبيوتر، فيمكن لـ 15 إطارًا تحقيق تأثير الصور المستمرة. بهذه الطريقة، عندما تقوم بإنشاء مقاطع فيديو في المستقبل، عليك أن تفكر في الجهاز الذي تريد نشرها عليه وتعيين معدلات إطارات مختلفة.
دقة التعرف للعين البشرية هي في الواقع أعلى بكثير من معدلات الإطارات المذكورة أعلاه، لأن النظام البصري المكون من العين البشرية والدماغ متطور للغاية. إنه يتمتع بمستويات حساسية مختلفة اعتمادًا على البيئة، على سبيل المثال، في البيئة المظلمة، يكون وقت الثبات البصري لمصادر الضوء الأكثر سطوعًا أطول، لذلك يتطلب الفيلم 24 إطارًا فقط. بالمناسبة، جانبًا، هناك عدد قليل فقط من الحيوانات لديها عيون تتفوق على البشر في بعض الجوانب، ولكن جميعها تعاني من قصور خطير في جوانب أخرى. على سبيل المثال، النسر، "ملك التفاصيل"، مصاب بعمى الألوان، بينما البومة، "ملك الرؤية الليلية"، لديها عيون ثابتة وعليها أن تدير رأسها لمراقبة محيطها.
في دروس تصميم Photoshop التي شاهدناها في Tianji Design Online، يُستخدم Photoshop في الغالب لإنشاء صور ثابتة مثل الملصقات والمخطوطات المطبوعة، وقد ذكرنا أن لديه القدرة على إنتاج الرسوم المتحركة. سنقوم الآن بإنشاء رسم متحرك يتكون من إطارات متعددة في Photoshop. توسيع شاشة واحدة إلى شاشات متعددة. وإنشاء نوع من استمرارية الصورة بين هذه المشاهد المتعددة لإضفاء شكل على الرسوم المتحركة.
في الوقت الحاضر، يمكن أن تأتي العديد من الرسوم المتحركة المنتجة باستخدام Flash مع الدبلجة والتفاعل، مما يجعل الرسوم المتحركة بأكملها أكثر حيوية. لا يمكن تسمية الرسوم المتحركة التي ينتجها Photoshop إلا بالرسوم المتحركة البسيطة، ويرجع ذلك أساسًا إلى أنها تحتوي على صور فقط ولا يمكنها إضافة صوت، ولا يمكن للجمهور مشاهدتها إلا بطريقة ثابتة. لكن البساطة لا تعني الفظاظة، على الرغم من أن الأول يوفر المزيد من أساليب الإنتاج والتعبير، إلا أن الأخير لا يزال يتمتع بمزاياه الفريدة. على سبيل المثال، يمكن للرسوم المتحركة بأسلوب الطبقة إنشاء بعض الأشياء الجميلة التي يصعب تحقيقها باستخدام تفاصيل الرسوم المتحركة الأخرى. علاوة على ذلك، كما أن الرسم على الورق هو عمل بسيط للغاية، فإن الأشخاص المختلفين يرسمون بشكل مختلف. لذلك، الرسوم المتحركة الممتازة لا تتطلب بالضرورة تكنولوجيا معقدة، المهم هو الإبداع الممتاز.
بغض النظر عن البرنامج، فإن مبادئ الإنتاج الخاصة بهم هي نفسها، تمامًا مثل وضع ألوان RGB الذي درسناه بجد، ويمكن تطبيقه في كل مكان. لذا فإن مهمتنا الحالية هي استخدام المعرفة الأساسية التي تعلمناها عن برنامج Photoshop، وتوسيع نطاقها لتشمل إنتاج الرسوم المتحركة، وتعلم المهارات والأساليب العامة لإنتاج الرسوم المتحركة. لا يزال من الممكن تطبيق هذه المعرفة على جوانب أخرى لاحقًا. وسنقدم أيضًا كيفية تحويل الرسوم المتحركة بالفوتوشوب إلى مقاطع فيديو وإضافة الصوت إليها.
بالإضافة إلى الاختلافات في الإنتاج، هناك أيضًا اختلافات في الاستخدام. غالبًا ما يتم وضع الرسوم المتحركة في منطقة معينة من صفحة الويب للتأكيد على محتوى معين، مثل الرسوم المتحركة الإعلانية. عادةً ما يكون لهذا النوع من الرسوم المتحركة أحجام ثابتة مقابلة وفقًا لمواقع المواضع المختلفة، مثل 468x60، 140x60، 90x180، إلخ. يمكن أيضًا تطبيق الرسوم المتحركة على رسائل الوسائط المتعددة (MMS) للهاتف المحمول (خدمة رسائل نصية متعددة الوسائط يمكنها إرسال الصور والأصوات ومقاطع الفيديو). ولكل من هذه الاستخدامات خصائصه الخاصة، وهناك عوامل أخرى يجب مراعاتها إلى جانب الحجم. مثل الحد الأقصى لعدد البايتات، ووقت بقاء الإطار، وما إلى ذلك. سنشرح ذلك خطوة بخطوة في البرنامج التعليمي.
ملاحظة: قبل البدء بهذه السلسلة من البرامج التعليمية، نطلب من القراء أن يتعلموا أساسيات Photoshop، وأن يفهموا ويتقنوا المفاهيم والعمليات مثل طبقات الضبط، وأنماط الطبقة، وما إلى ذلك، مثل "كيفية إنشاء طبقة ضبط منحنى" وما إلى ذلك. سيتم تقديم مقدمة مختصرة فقط عن العملية، ولن يتم شرح المبادئ بالتفصيل. لذلك، يوصى بأن يتعلم القراء الجدد الأساسيات أولاً.
بالإضافة إلى ذلك، فإن الإصدار Photoshop CS3 Extended (الموسع) هو الوحيد الذي يحتوي على وظيفة إنتاج الرسوم المتحركة، وهي غير متوفرة في الإصدار العادي. يأتي إصدار CS2 مزودًا بوظائف إنشاء الإجراء، والعملية مشابهة لـ CS3 Extended. تتطلب CS والإصدارات الأقدم برنامج ImageReady المجمع لإنتاج الرسوم المتحركة. يوصى باستخدام نفس إصدار CS3 Extended مثل البرنامج التعليمي.
نظرًا لأنه يسمى رسوم متحركة، فهو يعني جعل الصور الموجودة على الشاشة تتحرك، فلنرسم وننشئ رسمًا متحركًا "بسيطًا وخامًا" الآن.
أنشئ صورة فارغة جديدة بمقاس 150 × 150، وأنشئ طبقة جديدة وارسم مستطيلًا، تقريبًا كما هو موضح على اليسار أدناه، ولوحة الطبقات كما هو موضح على اليمين. يمكن أن نرى من هذا أن هذه طبقة شبكية عادية، ويجب عليك استخدام الطبقات المتجهة قدر الإمكان في العمليات الفعلية. وسننتبه أيضًا إلى ذلك في البرامج التعليمية التالية.
افتح لوحة الرسوم المتحركة من خلال [Window_Animation]، كما هو موضح في الصورة اليسرى أدناه. في هذا الوقت، هناك أيضًا بعض الخيارات الإضافية في لوحة الطبقات، كما هو موضح بالسهم الأحمر في الصورة اليمنى أدناه. إذا قمت بإغلاق لوحة الرسوم المتحركة، فسيتم إعادتها إلى حالتها الأصلية. لا تقلق بشأن ذلك في الوقت الراهن. بالإضافة إلى ذلك، غالبًا ما يتم دمج لوحة الرسوم المتحركة مع لوحة تسجيل القياس، ولا علاقة لها بالمحتوى الحالي ويمكن إيقاف تشغيلها.
بعد فتح لوحة الرسوم المتحركة، يمكننا البدء في إنشاء الرسوم المتحركة. انقر فوق الزر "نسخ الإطار المحدد" الموجود على السهم الأحمر في لوحة الرسوم المتحركة. 
، سترى إضافة إطار جديد. كما هو موضح أدناه. وفقًا لعاداتنا السابقة، يجب أن يمثل هذا الرمز طبقة جديدة، مثل طبقة جديدة، وما إلى ذلك. على الرغم من أن الشرح الحرفي هنا هو نسخة، إلا أنه في الواقع إطار جديد، لكن الإطار المضاف حديثًا هو في الواقع نفس الإطار السابق نفس المحتوى . وفي المقابل، يجب أن يكون الجميع قادرين على التخيل 
وظيفة الزر هي حذف الإطار.
تأكد من أن الإطار الثاني المنسوخ محدد حاليًا في لوحة الرسوم المتحركة، ثم استخدم أداة النقل لتحريك المربع في الطبقة لمسافة معينة، تقريبًا كما هو موضح في الصورة اليسرى أدناه. في هذا الوقت، تكون لوحة الرسوم المتحركة كما هو موضح في الصورة الوسطى أدناه. ويمكن ملاحظة أنه على الرغم من تغير موضع الكتلة في الإطار 2، إلا أن موضع الكتلة في الإطار 1 يظل دون تغيير. هذه ميزة مهمة جدًا.
كرر هذه العملية المتمثلة في نسخ الإطار أولاً ثم تحريك الكتلة عدة مرات، وفي النهاية ستحصل على شيء مثل الصورة الموجودة على اليمين أدناه (مماثلة لهذا). الآن لدينا 7 إطارات، والكتل في مواقع مختلفة في كل إطار. انتبه إلى الجملة "يختلف موضع المربعات في كل إطار"، ثم انظر إلى لوحة الطبقات، ومن الواضح أن هناك طبقة واحدة فقط (لا يتم احتساب طبقة الخلفية في الوقت الحالي)، مما يؤدي إلى ميزة: بالنسبة لطبقة واحدة، يمكن تحديد موضعها (أو إحداثياتها) بشكل فردي في إطارات مختلفة. وفقا لهذه الميزة، يمكننا تحريك حركة الكائنات باستخدام طبقة واحدة فقط.
الآن يمكنك الضغط على زر التشغيل في لوحة الرسوم المتحركة 
، يمكنك رؤية تأثير تحرك المربع في نافذة الصورة، ولكنه يتحرك بسرعة كبيرة. وذلك لأنه لم يتم ضبط وقت تأخير الإطار. لاحظ أن هناك الآن "0 ثانية" أسفل كل إطار في لوحة الرسوم المتحركة وهذا هو وقت تأخير الإطار (أو وقت المكوث). يشير وقت تأخير الإطار إلى مدة عرض الإطار أثناء الرسوم المتحركة. على سبيل المثال، إذا تم ضبط تأخير إطار معين على ثانيتين، فعند تشغيل هذا الإطار، سيبقى لمدة ثانيتين قبل الاستمرار في تشغيل الإطار التالي. التأخير الافتراضي هو 0 ثانية، ويمكن ضبط التأخير بشكل مستقل لكل إطار.
طريقة ضبط تأخير الإطار هي النقر على الوقت الموجود أسفل الإطار وتحديد الوقت المقابل في القائمة المنبثقة. كما هو موضح في الصورة اليسرى أدناه، اضبط الإطار من 7 إلى 0.5 ثانية. "لا يوجد تأخير" في القائمة هو 0 ثانية إذا لم يكن هناك وقت تريد ضبطه، يمكنك تحديد "أخرى" وإدخال القيمة بنفسك (بالثواني). يمكنك أيضًا تعديل التأخير بشكل موحد بعد تحديد إطارات متعددة. طريقة تحديد إطارات متعددة هي نفس طريقة تحديد طبقات متعددة. انقر أولاً على الإطار 1 في لوحة الرسوم المتحركة لتحديده، ثم اضغط باستمرار على مفتاح SHIFT وانقر على الإطار 6 ما عليك سوى اختيار الإطارات من 1 إلى 6. ثم قم بتعيين المنطقة الزمنية لأي إطار، كما هو موضح في الصورة اليمنى أدناه، واضبطها على 0.1 ثانية. هذا هو وقت التأخير الأكثر استخدامًا.
قم بتشغيل الرسوم المتحركة مرة أخرى وسترى أن الكتلة تتحرك بشكل أبطأ وتبقى لفترة أطول في نهاية الحركة. من الواضح أن هذا يرجع إلى التأخير الطويل الذي تم ضبطه عليه. يلعب هذا التأخير الطويل دورًا بارزًا في الواقع، ويمكن استخدام هذه الميزة لتسليط الضوء على موضوع معين في الإنتاج الفعلي. سنجد أيضًا وقتًا لإدخال بعض تقنيات التعبير في الدروس اللاحقة.
بالإضافة إلى وقت التأخير، هناك ميزة أخرى للرسوم المتحركة وهي أنه يمكنك ضبط عدد حلقات التشغيل. لاحظ أنه يوجد "إلى الأبد" أسفل الإطار الأول من لوحة الرسوم المتحركة، وهو عدد الحلقات. بعد النقر، يمكنك اختيار "مرة واحدة" أو "للأبد"، أو تحديد عدد الدورات بنفسك. ثم قم بتشغيل الرسوم المتحركة مرة أخرى لترى تأثير إعداد رقم الحلقة.
على الرغم من أنه في معظم الحالات يتم تكرار الرسوم المتحركة بشكل مستمر (أي إلى الأبد)، إلا أنه يتم استخدام حلقات فردية أو عدة مرات (2 إلى 3 مرات) أيضًا في بعض الأماكن، خاصة عند استخدام الرسوم المتحركة لإنشاء مكونات الويب. على سبيل المثال، قم بتحريك اسم عمود من الصفر ليظهر تدريجيًا، بحيث عندما يتم عرض الاسم بالكامل، يجب أن يكون ثابتًا، ولا يمكن أن يختفي مرة أخرى ثم يتلاشى مرة أخرى. في هذا الوقت، من الضروري استخدام إعداد الدورة "مرة واحدة".
اضغط على 〖CTRL+S〗[ملف>حفظ] لحفظ إعدادات الرسوم المتحركة، ويكون تنسيق الملف هو psd. يعد تنسيق الملف هذا ملكية خاصة ببرنامج Photoshop ويمكنه تسجيل جميع المعلومات ذات الصلة. ومن المستحسن أن يقوم الجميع بحفظ أعمالهم بهذا التنسيق لتسهيل التعديلات المستقبلية. إذا كنت بحاجة إلى ملف رسوم متحركة مستقل يمكن استخدامه على صفحات الويب، فأنت بحاجة إلى استخدام [CTRL+ALT+SHIFT+S] [ملف>حفظ للويب والأجهزة]، وستظهر نافذة كبيرة كما هو موضح على اليسار أدناه . هذه النافذة الكبيرة لديها الكثير لتغطيه. ولكن الآن ما عليك سوى الرجوع إلى الإعدادات الموجودة في منطقة السهم الأحمر.
وفي الوقت نفسه، سيظهر زر التشغيل وخيارات الحلقة في منطقة السهم الأخضر أسفل يمين النافذة. سيؤدي تغيير عدد الحلقات هنا أيضًا إلى تغيير الإعدادات في الملف المصدر. لاحظ أنه إذا لم يتم تحديد ملف GIF داخل منطقة السهم الأحمر، فلن يكون زر التشغيل متاحًا. وذلك لأن تنسيق GIF فقط هو الذي يدعم الرسوم المتحركة، وإذا قمت بحفظها بالقوة بتنسيقات أخرى مثل JPG أو PNG، فستحتوي الصورة التي تم إنشاؤها على الإطار الأول فقط.
أثناء عملية التخزين، قد تظهر رسالة التحذير كما هو موضح على اليمين أدناه، لا تتجاهلها وقم فقط بالتأكيد. يمكنك أيضًا جعله غير مرئي مرة أخرى. ومع ذلك، يجب على الجميع الانتباه إلى استخدام اللغة الإنجليزية أو الأرقام بنصف العرض عند تسمية الملفات، وعدم استخدام الأحرف ذات العرض الكامل أو الأحرف الصينية. وهذا ليكون متوافقًا على نطاق أوسع مع متصفحات اللغات المختلفة.
في هذا الفصل، ما يحتاج الجميع إلى إتقانه هما سمتان للرسوم المتحركة، وهما وقت تأخير الإطار وعدد الحلقات. بالإضافة إلى ذلك، تحتاج إلى إتقان طرق إنشاء رسوم متحركة بسيطة لإزاحة الكائن مثل "نسخ الإطارات وتحريك الطبقات". واستخدم هذه الطريقة لإنشاء رسم متحرك مع إزاحة كائنين في نفس الوقت. التأثير مشابه للصورة أدناه.
في القسم التالي نقدم الجزء الثاني: خصائص الانتشار للإطار الأول.