راية الرسوم المتحركة. كيفية جعل راية متحركة gif.

اليوم سوف ننظر إلى غير بسيطة للغاية، ولكن درس مثير للاهتمام للغاية لإنشاء راية متحركة GIF.

من أجل أن تكون أكثر وضوحا ما نتحدث عنه، وأنه في النهاية سوف يتحول، وننظر إلى النتيجة النهائية لعملنا الإضافي.

اليوم، أصبحت اللافتان الأكثر شعبية تتمتع عمليا على جميع مواقع الويب وعلى جميع شبكات تبادل البانر راية بناء على الرسوم المتحركة GIF أو Flash من الحجم القياسي: 468x60، 100x100، 120x60، 88x31.

سننظر في مثال على إنشاء راية متحركة بأبعاد 468x60، وهو المثال المذكور أعلاه.

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

كما يمكن أن ينظر إليه على المثال، فإن اللافتة غير معقد على الإطلاق، ولديه ثلاث مراحل من المعلومات.

1. تعني كتلة النص الأولى "إنشاء موقع الويب الخاص بك" معلومات الاستبيان.

2. كتلة النص الثاني "يمكن لكل منهما" كما لو كانت الإجابة عليه.

3. جوهر بانر نفسه. وهذا هو، إجابة صاغ بوضوح، حيث تعلم هذا))

أعتقد أن النظرية كافية. ممارسة الرب!

يخلق مستند جديد بأبعاد 468x60 بكسل.


الآن، دعنا نضع كل جزء من معلومات الراية على طبقة منفصلة. (في الصورة أدناه، اخترقت ملفات الوضوح، يجب عليك القيام بذلك في مستند واحد، ببساطة وضع الطبقات على الآخر)


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

الآن نذهب إلى القائمة المنسدلة النافذة وتشغيل لوحة الرسوم المتحركة.

يتم عرض هنا نفس الطبقات، فقط مع إمكانية نشر كل منها.

في الحالة المنتشرة، تحتوي كل طبقة على العديد من المعلمات.

موضع - مسؤولة عن نقل الصورة الموجودة في هذه الطبقة.

عتامة. - مسؤولة عن الشفافية

أسلوب. - مسؤولة عن جلب إلى صورة طبقة أنماط، I.E. الظلال، الإضاءة، البثق وغيرها.

التفاف النص.(إذا كانت الطبقة النصية هذه) تم تصميمها لإحناء النص.

يحتوي كل من هذه المعلمات على مسار مؤقت خاص به يمكن وضع علامات، كما لو كان إصلاح الحالة الحالية.

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

فيما يلي مثال على خاصية الشفافية (العتامة).

قم بإجراء هذه الخطوة مع الرسوم المتحركة للنص تختفي في الطبقة الأولى "إنشاء موقعك". إذا نظرت بعناية إلى Banner في الجزء العلوي من الدرس، لاحظ أنه بالإضافة إلى اختفاء النص هناك أيضا إضاءة. تشبه الرسوم المتحركة الإضاءة أفعال الشفافية، ولكن عند تشغيل إضاءة الوهج الخارجي في خصائص الطبقة. الإطار الأولي هو الإضاءة مع المعلمة \u003d 0، وفي النهائي:


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

تعمل الطبقة التالية "قد تعمل كل" بنفس الطريقة، ولكن بشرط تعويض الجدول الزمني، نظرا لأن الطبقة الثانية تبدأ في عرضها بعد أن أصبح الأول شفافة تماما.

وواحد آخر، فإن الطبقة الأخيرة في رقم 3، في الجدول الزمني يبدأ في التصرف عندما أصبح الثاني شفافا تماما.

من غير المرجح أن تنجح المرة الأولى، لذلك سيحاول ذلك، لكن كل شيء يأتي مع خبرة.

بعد أن تمتثل كل جزء بوضوح لمنطقتي الوقت، يمكنك افتراض أن كل شيء جاهز. الآن انقر CTRL + SHIFT + ALT + S (حفظ للويب)ونحن حفظ راية لدينا في شكل gif.، هو، كما تعلمون بالفعل، يدعم الحفاظ على الرسوم المتحركة.

مرحبا يا أصدقاء! اليوم جئت للحديث عن كيف إنشاء الرسوم المتحركة أو في فوتوشوب. لماذا تحتاج؟ إذا كسبت مدونتك مع، فإن ذلك يحدث عادة بمساعدة اللافتات.

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

وماذا لو قررت عدم وضع الصورة التي يوفرها مالك البرنامج التابع الذي تشارك فيه، بل لجعل بنفسك؟ أو هذا الرجل الصغير لم يوفر لك أي شيء باستثناء الروابط التابعة. نعم، يحدث ذلك.

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

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

وهكذا، قم بتشغيل برنامج Photoshop. آمل أن يتم تثبيتها.

لدي نسخة سابقة من Photoshop (CS6)، لذلك سأقوم بتحسين الرسوم المتحركة الخاصة بي، وأبلغ كيف يتم ذلك بها.

في القائمة، حدد "ملف - إنشاء"، من أجل إنشاء مستند جديد.

في النافذة التي تفتح، حددنا إعداداتنا لافتة الرسوم المتحركة المستقبلية. أوصي أن الأبعاد (الارتفاع، العرض) ليست عشوائيا، ولكن اختيار المعيار. على سبيل المثال، اختر واحدة من أحجام الراية القياسية، هي 468 بكسل 60 بكسل. انقر فوق موافق".

لدينا وثيقة نظيفة التي سنقوم بها بالفعل الرسوم المتحركة.

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

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


الآن نطفئ الطبقة بالنص الأول بالنقر فوق مقلة العين بجانب الطبقة المرغوبة، ومرة \u200b\u200bأخرى عن طريق تحديد أداة "النص"، اكتب السلسلة التالية. يظهر النص الجديد مرة أخرى على الطبقة الجديدة.


الآن لدينا ثلاث طبقات. الطبقة الأولى هي خلفية يمكنك أن تصب بأي لون، وطبقتين مع نص.

طبقاتنا لإنشاء الرسوم المتحركة (راية الرسوم المتحركة) جاهزة. ننتقل الآن إلى إنشاء الرسوم المتحركة الماشية، وإحياء راية لدينا.

في القائمة، انتقل عبر علامة التبويب "نافذة" ووضع علامة بجوار عنصر "المقياس الزمني".

في أسفل نافذة Photoshop، يجب أن تظهر نافذة أداة "التوقيت الزمنية" الإضافية. لديها بالفعل الإطار الأول من الرسوم المتحركة لدينا. نظرا لأن الرسوم المتحركة الخاصة بي ستتألف من إطارات اثنين فقط، فأنا خلق إطارا آخر. للقيام بذلك، انقر فوق أيقونة "نسخ نسخة إنشاء" (انظر الشكل).


الآن لدينا إطارات مع نفس المحتوى. كنا بحاجة إلى أن محتويات الموظفين ستكون مختلفة بحيث يتم تغيير النص أو صورة لافتة الرسوم المتحركة عندما يظهر الإطار.

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

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

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

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

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

هذا ما حدث في لي على طول هذا الدرس.

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

في المرة القادمة سننظر في ذلك عند النقر فوقه، يمكنك الذهاب إلى مواقع أخرى.

هذا كل شئ! إلى اجتماعات جديدة.

من الذي سوف تتعلم منه كيفية جعل راية الرسوم المتحركة GIF للموقعوبعد بالإضافة إلى ذلك، سوف ينظر الدرس في العملية تحسين الرسوم المتحركة الرسم وقضية تثبيت راية إلى الموقع. لذلك، سيكون مثيرا للاهتمام. اذهب.

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

ما هو راية؟

كما يقول موسوعة ويكي الذكية، ثم

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

ما هي حجم لافتات الرسوم؟

هناك عدد لا يحصى من أشكال مختلفة من اللافتات. سأقدم لك قائمة غير مكتملة فقط أحجام قياسية لللافتات:

88 × 31، 100 × 100، 100 × 200، 120 × 60، 120 × 90، 120 × 240، 120 × 600، 125 × 125، 125 × 250، 160 × 60، 160 × 120،160 × 240،160 × 600، 240 × 400، 250 × 250، 336 × 280، 460 × 60، 728 × 90 وغيرها الكثير.

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

راية - كصري نفسي

الإعلان، والإعلان، ولكن أين بدونها. الإعلان - كما يقولون، هذا محرك تجاري، وجعل أعمال الإعلان، بحاجة الى راية فعالة، لذلك لجذب. لذلك أردنا البضائع والخدمات للإعلان عن راية.

يحب لكى يفعل سحر بانر؟ وهؤلاء الأصدقاء هم علم كامل. لا تصدق؟ ثم تأكد من أن تجد وقراءة كتب فيكتور أورلوفا (سحر النصوص الخاصة بك، والتوجه السوبر، حقوق الطبع والنشر نفسها، الكلمات السحرية). بعد القراءة التي، لن تكون لديك شكوك حول كيفية عمل نص إعلاني لافتة بشكل صحيح.

إذا تمكنت من وصف متعددة، فإن جذب العميل يذهب إلى عدة خطوات:

  • نشير إلى المشكلة في السؤال (الصداع؟ مطلوبة المال؟ نحن بحاجة إلى موقع؟ إلخ)
  • نحن نعلم أن هناك قرص سحري
  • اريد معرفة المزيد؟ ودعوة للعمل (شراء، انقر، النظام، انظر هنا، انقر فوق الرابط، إلخ)

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

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

كيفية جعل راية gif المتحركة في الأعرج؟

الخطوة 1.يركض محرر Gimp. وإنشاء مشروع جديد. ل هذا المثال اخترت حجم راية 468 × 60 بكسل. يمكنك اختيار الآخر الذي تريده أكثر.

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

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

لإنشاء نقش نصي، اختر أداة "النص" وإنشاء نقش

الخطوه 3. الآن تحتاج إلى الجمع بين طبقة النص مع اللون الأبيض السفلي. انقر فوق الزر أعلى طبقة الماوس الأيمن واختر "دمج مع واحد السابق".

الخطوة 4.هذا هو الإطار الأول، الذي يدل على المشكلة، نحن جاهزون. نذهب أبعد من ذلك وإنشاء طبقة جديدة مع ملء أبيض من خلال النقر على أيقونة "إنشاء طبقة جديدة"

بعد ذلك، نختار مرة أخرى أداة "النص" وكتابة النقش

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

الخطوة 5.إنشاء طبقة بيضاء أخرى ونص. هذه المرة اخترت لون النص الأسود، وليس أحمر.

تغيير لون المقدمة على اللون الأزرق.

اختيار أداة "فرشاة" ورسم النقش "هنا". هذا ما فعلته.


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

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

المؤشر أضف إلى أعلى الطبقة