مدرسة التصميم >>  الدروس العملية >>  اصنع بانر متحرك الآن !

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

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

 الطول العرض
70 205
70 470
80 400

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

من المستحسن جدا ً أن لا نقوم بإغلاق هذا الملف وإنما يكفي أن نزيل " العين " من الشفيفة ... عملية اخفاء للشفيفة . " ولا نخفي إلا الشفائف لتي لا نريدها أن تظهر في الفريم التالي "

نحاول إيجاد طريقة مميزة للحركة وهذه بعض الأمثلة
- يمكنك وضع حد "
Stroke " على الجزء الذي تريد تمييزه
- يمكنك وضع "
Glow "  على الجزء الذي تريد تمييزه
- يمكنك تكبير الجزء  الذي تريد تمميزه
- يمكنك وضع ظل "
Shadow " على الجزء المراد تمييزه
ويمكنك ابتكار طرق من مخيلتك :)

نستمر على هذه الطريقة في باقي الفريمات ثم نقوم بحفظها بصيغة
GIF
ملاحظة / يحسن بك اخي الكريم ، أن تقوم بجمع الصور المصدّرة من الفوتوشوب في مجلد واحد

بهذا نكون قد فرغنا من برنامج الفوتوشوب ... وقد خرجنا بأكثر من صورة  والآن نقوم بتشغيل البرنامج الذي ذكرناه في الخطوة رقم 1

 
 

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

كرر الخطوة  السابقة حتى ينتج لك الشكل المطلوب
مع مراعاة الوقت في خيار
Frame delay
وبعد ذلك قم بالضغط على زر
Make animated GIF



يمكنك التلاعب بتكرير صورة أكثر من مره كما فعلت في البانر .. فلو تلاحظ القائمة في الشكل التابع للخطوة رقم " 2 " تجدني قمت بتكرار الصورة رقم 1 و 2 .


حاول أن يكون البانر ذو حجم معقول ، فكلما قل حجم البانر كلما زادت سرعته في التحميل .
 وكذلك كلما قل عدد الفريمات في البانر ... كلما زادت سرعته في التحميل .

من الأمور التي يجب مراعاتها ، هو استحسان وجود " حد عام " للبانر " إطار للبانر " وعادة ما يكون باللون الأسود :)

يلاحظ أن البرنامج الخاص بعمل الحركة " ليس بقوة بعض البرامج الأخرى " وإنما وضع هنا لسهولته ، ولقلة
حجمه ... وإنما هناك برامج أخرى أقوى منه بمراحل ومن بينها :
Ulead GIF Animator 4.0
Adobe ImageReady
وغيرها كثير :)


 تطبيفات على الدرس

 كاتب الدرس /

 مناقشة الدرس في المنتدى /


 مـازن©