اصنع بانر متحرك الآن ! البانر ، لا سيما المتحرك ، يعد وسيلة فعــّالة للإعلان عن شئ ما ، وذلك لما يتميز به من عنصر التشويق ولفت إنتباه المشاهد ، مع إمكانية إضافة نص أكثر محتوى من مثيله في البانر الثابت . سنتطرق في هذا الدرس لعملية بسيطة تشرح كيفية عمل هذا البانر المتحرك ... إضافة لبرنامج الفوتوشوب ، سنحتاج برنامج آخر " بغض النظر عن نوعه " يقوم بربط تلك الصور مع بعضها البعض وإعطاء زمن معين بين كل صورة والأخرى ... مفاجئة !! يقدم لكم موقع مـازن ، برنامج سهل جدا جدا ... يقوم بصنع هذه البانرات ... والمميز فيه أن حجمه قليل جدا | |
<TABLE style="BORDER-BOTTOM-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-COLLAPSE: collapse; BORDER-TOP-STYLE: outset; BORDER-LEFT-STYLE: outset" id=AutoNumber15 border=1 cellSpacing=0 borderColor=#111111 cellPadding=0 width="25%" bgColor=#e6e6e6> <TR> <td width="100%">[center] اضغط هنا لسحب البرنامج | |
قم بإنشاء ملف فوتوشوب جديد ، بالمقاس المطلوب منك ، وإذا لم يحدد لك مقاس معين ، فالجدول أدناه فيه قياسات مقترحة | |
<TABLE style="BORDER-BOTTOM-STYLE: dotted; BORDER-BOTTOM-COLOR: #c0c0c0; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-COLOR: #c0c0c0; BORDER-COLLAPSE: collapse; BORDER-TOP-STYLE: dotted; BORDER-RIGHT-COLOR: #c0c0c0; BORDER-LEFT-STYLE: dotted; BORDER-LEFT-COLOR: #c0c0c0" id=AutoNumber16 border=1 cellSpacing=0 borderColor=#111111 cellPadding=0 width="18%"> <TR> <td width="100%"> <TABLE style="BORDER-COLLAPSE: collapse" id=AutoNumber17 border=0 cellSpacing=0 borderColor=#111111 cellPadding=0 width="93%" height=64> <TR> <td bgColor=#c9d6e0 height=16 width="50%" align=middle> الطول</TD> <td bgColor=#c9d6e0 height=16 width="50%" align=middle>العرض</TD></TR> <TR> <td height=16 width="50%" align=middle>70</TD> <td height=16 width="50%" align=middle>205</TD></TR> <TR> <td height=16 width="50%" align=middle>70</TD> <td height=16 width="50%" align=middle>470</TD></TR> <TR> <td height=16 width="50%" align=middle>80</TD> <td height=16 width="50%" align=middle>400</TD></TR></TABLE> | |
لنفترض أننا سنقوم بعمل اعلان لهذا الموقع " موقع مازن " فسوف نقوم بعمل الفريم الأول " الصورة الأولى " في البداية ... وإن راق لنا ، فسنقوم ببناء باقي الفريمات على نفس طريقة هذا التصميم . | |
من المستحسن جدا ً أن لا نقوم بإغلاق هذا الملف وإنما يكفي أن نزيل " العين " من الشفيفة ... عملية اخفاء للشفيفة . " ولا نخفي إلا الشفائف لتي لا نريدها أن تظهر في الفريم التالي " | |
نحاول إيجاد طريقة مميزة للحركة وهذه بعض الأمثلة - يمكنك وضع حد " Stroke " على الجزء الذي تريد تمييزه - يمكنك وضع " Glow " على الجزء الذي تريد تمييزه - يمكنك تكبير الجزء الذي تريد تمميزه - يمكنك وضع ظل " Shadow " على الجزء المراد تمييزه ويمكنك ابتكار طرق من مخيلتك | |
نستمر على هذه الطريقة في باقي الفريمات ثم نقوم بحفظها بصيغة GIF ملاحظة / يحسن بك اخي الكريم ، أن تقوم بجمع الصور المصدّرة من الفوتوشوب في مجلد واحد | |
بهذا نكون قد فرغنا من برنامج الفوتوشوب ... وقد خرجنا بأكثر من صورة والآن نقوم بتشغيل البرنامج الذي ذكرناه في الخطوة رقم 1 | |
<TABLE style="BORDER-COLLAPSE: collapse" id=AutoNumber18 border=0 cellSpacing=0 borderColor=#111111 cellPadding=0 width="90%"> <TR> <td width="33%"></TD> <td width="33%"></TD> <td width="34%"></TD></TR> <TR> <td width="100%" colSpan=3> </TD></TR> <TR> <td width="33%"></TD> <td width="33%"> </TD> <td width="34%"></TD></TR></TABLE> | |
بعد تشغيل البرنامج ، اتجه إلى المجلد الذي توجد به الصور التي قمت بتصديرها من برنامج الفوتوشوب ، وقم بالضغط .. " مع إبقاء الضغط " .. والسحب باتجاه المكان الأبيض الفارغ ، حتى تظهر لك علامة " + " ، معنى هذه العلامة .. " أنك الآن تقوم بإضافة هذه الصورة في القائمة ! .." | |
<TABLE style="BORDER-BOTTOM: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #c0c0c0 1px dotted; BORDER-RIGHT: #c0c0c0 1px dotted" id=AutoNumber19 border=1 cellSpacing=0 borderColor=#111111 cellPadding=0 width="15%" bgColor=#c9d6e0> <TR> <td width="100%"></TD></TR></TABLE> | |
كرر الخطوة السابقة حتى ينتج لك الشكل المطلوب مع مراعاة الوقت في خيار Frame delay وبعد ذلك قم بالضغط على زر Make animated GIF | |
<TABLE style="BORDER-BOTTOM: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-COLLAPSE: collapse; BORDER-TOP: #c0c0c0 1px dotted; BORDER-RIGHT: #c0c0c0 1px dotted" id=AutoNumber12 border=1 cellSpacing=0 borderColor=#111111 cellPadding=0 width="21%"> <TR> <td width="100%"></TD></TR></TABLE> | |
<TABLE style="BORDER-COLLAPSE: collapse" id=AutoNumber13 border=0 cellSpacing=0 borderColor=#111111 cellPadding=0 width="86%" height=111> <TR> <td height=38 width="5%"></TD> <td height=38 width="95%"> يمكنك التلاعب بتكرير صورة أكثر من مره كما فعلت في البانر .. فلو تلاحظ القائمة في الشكل التابع للخطوة رقم " 2 " تجدني قمت بتكرار الصورة رقم 1 و 2 . </TD></TR><TR> <td height=15 width="100%" colSpan=2> </TD></TR> <TR> <td height=27 width="5%"></TD> <td height=27 width="95%">حاول أن يكون البانر ذو حجم معقول ، فكلما قل حجم البانر كلما زادت سرعته في التحميل . وكذلك كلما قل عدد الفريمات في البانر ... كلما زادت سرعته في التحميل .</TD></TR> <TR> <td height=9 width="100%" colSpan=2> </TD></TR> <TR> <td height=15 width="5%"></TD> <td height=15 width="95%">من الأمور التي يجب مراعاتها ، هو استحسان وجود " حد عام " للبانر " إطار للبانر " وعادة ما يكون باللون الأسود </TD></TR> <TR> <td height=4 width="100%" colSpan=2> </TD></TR> <TR> <td height=8 width="5%"></TD> <td height=8 width="95%">يلاحظ أن البرنامج الخاص بعمل الحركة " ليس بقوة بعض البرامج الأخرى " وإنما وضع هنا لسهولته ، ولقلة حجمه ... وإنما هناك برامج أخرى أقوى منه بمراحل ومن بينها : Ulead GIF Animator 4.0 Adobe ImageReady وغيرها كثير </TD></TR></TABLE> |
اصنع بانر متحرك الآن !
احمد شعلان- المدير العام
- الاوسمة :
رقم العضوية : 1
الدولة :
عدد المساهمات : 427
التقييم : 27374
السٌّمعَة : 0
تاريخ التسجيل : 17/08/2010
الموقع : https://shalan.ahlamontada.net/
العمل/الترفيه : معلوماتي
تعاليق : مسلم وافتخر عربي وافتخر مصري وافتخر
هواياتي النت والكمبيوتر موهبتي رسم الشخصيات الكارتونيه ميال لكتابة الشعر بس مش كتير امارس لعبة الكونغ فو وبعض حركات الجمباز وقتال الشوارع واللياقة البدنيه احب مشاهدة الافلام الهنديه
غير ميال للكراهية محب للخير لا احب المتكبرين
واحاول ان اكون محبوبا
اتحمل كل ما يقال ضدي باعتبار ذلك وجهات نظر
احب ان اعيش الحياه ببساطة مبتسم دايما ومتفاءل احاول اسعاد من معي بكل الطرق الممكنه
- مساهمة رقم 1