درس : كيفية عمل بنر اعلاني

كتب بواسطة مايو - 28 - 2011   |  ضمن قسم ديزاين, فوتوشوب

 

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

 
كآن وفرنا المراكض ورى السعف والنخل ( والله كان اعرستي وعيلتي بعد  )

شرح كيفية عمل بنر إعلاني

 

حبيت اطرح لكم كيفية عمل بنر اعلاني بجميع خطواته .. راح يكون تركيزنا اكثر شي على برنامج الأميج ردي وخصوصاً الانميشين .. لعمل حركات نصوصيه كانت او صوريه .. والراعي الرسمي هو شركه موبايلي  <- صحيح انك مادريت عن هوى داري بس هنك عاد تجحدها !

بدايةً لابد اننا نعرف جميع المقاسات للبنرات المستخدمه والمتداوله عبر النت ..

شرح عمل بنر إعلاني

 

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

<- ماودتس اتشقلبين نفستس وتبدين بالشرح  !

 

درس كيفية عمل بنر إعلاني

 

نفتح مقاس عمل 728 × 90 بيكسل
طبعاً [ بعد مانضبط الخلفيه ونختار الصور المناسبه ونكتب الاعلان المطلوب ونحط الحدود مع الحقوق .. وكل شغلنا هذا يكون بالفوتوشوب عقبها ننتقل لبرنامج الايمج ردي اذا كان
الاصدار الثامن .. بخلاف الاصدار العاشر فننتقل له عن طريق القائمه الرئيسية window –> Animation ]

مثل مانتم شايفين البنر يتكون من عندة حركات نصوصيه للاعلان وعلى كذا راح ناخذ كل جزئيه ونشرح فيه خطواته 

 

أولاً :  

نبدأ بحركه كلمة ( متوفر الآن )

 

نلاحظ ان حركتها هو الظهور ثم الاختفاء  !

نفتح صندوق الانميشين  

ونظهر العين على كلمة متوفر الآن .. ونضيف 2 فريم

الفريم [ 1 ]  راح نخلي اعداد الـ   Opacity على  0 %

طريقة عمل بنر إحترافي

 

الفريم [ 2 ] راح نخلي اعداد الـ Opacity على 100 %

ونحط اعدادت الوقت على 0.1 sec 

 

شرح درس عمل بنر اعلاني بالفوتوشوب والايميج ردي

 

ونضغط على (  Tween ) اشرت عليها باللون الأورانج ..

 تطلع لنا هالقائمه ونخلي الاعدادات كما هي بالصورة .. وموافق

 

شرح تصميم بنر اعلاني

 

بعد مانضغط على (  Tween ) بيكون عندنا 7 فيرمات عقب أول فرمين .. ولاحظوا حركه اظهار الحركه بعد ماكانت مختفيه ..

 

عقبه نضيف فيرم 8 ونخلي  اعداد الـ Opacity على 0 %  ونضغط على (  Tween )  مره آخرى

عشان تختفي لنا الكلمه من جديد  ..

.

.

ثانياً :

حركه شعار موبايلي [ 1 ]

راح نستخدم بهالحركه ايقونه الممحاة .. فنشتغل على الليرات هنا فخلوا صندوق الانميشن والفيرمات على جنب

راح نبدأ بالشعار كامل ونسوي له نسخ للير 2 ونمسح جزء منه  – نسخه لير 3 ونمسح جزء منه – نسخه لير 4 ونمسح جزء منه

 وهكذا لمين نخلص من الشعار كله ويختفي عنا كلياً .. فـ تقريبا يطلع لنا 14 لير

عقبه نروح لصندوق الانميشن ونضيف 14 فيرم

ونحط اعدادت الوقت على 0 sec 

 ونخفي جميع الأعين ..

أول فيرم : وراح  يبدأ لنا طبعاً من عند رقم [ 9 ]  نظهر لير العين على أول لير للشعار الممسوح رقم [ 1 ]

ثاني فيرم :  نظهر لير العين على ثاني لير للشعار الممسوح رقم [ 2 ]

ثالث فيرم :  نظهر لير العين على ثالث لير للشعار الممسوح رقم [ 3 ]

رابع فيرم :  نظهر لير العين على رابع لير للشعار الممسوح رقم [ 4 ]

 

الـــــــــــخ الفيرم   [ 14 ] يظهر لنا الشعار كامل

 

درس فوتوشوب كيفية عمل بنر اعلاني

 

ثالثاً :

حركه شعار موبايلي [ 2 ]

وهي حركه سريعه يجيك الشعار راكض من اليسار لليمين  < 

مهوب حنا وقفنا عند آخر فيرم رقمه لير [ 14 ] اللي يظهر لنا الشعار كامل ! هذا انخليه كما هو

ونضيف فيرم ثاني ونظهر عين الشعار الرقم نفسه [ 14 ] ونمشي به بالماوس لجهة اليسار

ونضبط اعدادت الوقت على 0 sec 

 

ثمن نضغط على (  Tween )

ونلاحظ ان كلمة موبايلي تحركت معه على شكل حركه اظهار بسبب اننا اظهرنا العين يوم حركنا الشعار

 

درس تصميم بنر

 

رابعاً :

حركه صورة ( الأيفون )

وهي حركه اظهار الصوره .. والخطوات فيها مثل حركه كلمه ( متوفر الآن ) السابق شرحه أعلاه ..

نضبط  اعدادت الوقت على 0 sec

 

شرح تحريك البنرات بالاميجي ردي

 

خامساً :

حركه iPhone 4 in white

وهي حركه تجيك نازله من فوق وترتطم على سطح الارض وتنقز مرتن ثانيه وترجع للقاع مثل لاجدعت لك كأس وقام يناقز بالارض <- لاعاد تشرحين تكفين !

نظهر العين على كلمة ايفون

 

الفيرم الأول : نسحب الكلمه بالماوس لـ فوووق لمين تختفي

نضيف فيرم ثاني : ونسحب الكلمة بالماوس لـ تحت ونحطه بالوسط

 

ونضبط اعدادت الوقت على 0 sec 

ثمن نضغط على (  Tween )

شرح تحريك البنرات بالفوتوشوب

 

بعدها نضيف 4 فيرمات

الفيرم الأول  نرفع الكلمه لفوق بضغطتين بالماوس

 

الفيرم الثاني : ننزل الكلمه بضغطتين بالماوس 

الفيرم الثالث :  نرفع الكلمه لفوق بضغطه بالماوس

 

الفيرم الرابع : ننزل الكلمه بضغطه بالماوس 

عشان تطلع لنا حركه المناقز <-

.

.

سادساً :

حركه الـ Avilable  

ننسخ لير الكلمة مرتين بحيث يطلع لنا ليرين ..

اللير الأول : نطبق عليه من قائمة  فلتـر   Blur -->  Motion Blur  ونحط اعداداته على 50 % 

بالفيرم الأول : نظهر عين اللير الأول اللي سوينا عليه الفلتر .. ونخفي عين اللير الثاني اللي هي كلمه Avilable

 ونسوي عليه حركه الإخفاء ثم الاظهار  كما شُرح سابقاً .. بالـضغط على (  Tween )

 

الفيرم الثاني :  اللير الثاني لـ كلمه Avilable  نخليه كما هو + نخفي عين اللير الأول

 

تحريك البنرات بالايميج ردي

 

سابعاً :

حركه iPhone 4 in white

وهي حركة ( التلاشي )

 

 

مثل حركه االظهور ثم الاختفاء للكلمه بس باختلاف نقطه بسيطه

 

وهو انه نحط اعدادات الدمج لكلا الليرين Dissolve  بعد مانظهر العين على الكل

 

ونضبط التالي :

الفريم [ 1 ]  راح نخلي اعداد الـ   Opacity على  100 %

 

الفريم [ 2 ]  راح نخلي اعداد الـ   Opacity على  0 %

وناقف على الفيرم الثاني ونضغط على (  Tween )

 

تحريك الكلام والمؤثرات بالايميج ردي

 

وبكذا نكون انتهينا من عمل البنر عسى بس فهمتوا والا هين ..! <-  والله ماضنتي لكن لاصبختكم بالزبيريه فهمتوا   

.

.

يبقى نقطه أخيره وهي كيف نصغر البنر !

وخل نقول التصغير بمقاس 468×60  <- مافيه طريقه خاصه للتصغير لازم تعيد جميع الخطوات من جديد فقط الاختلاف انه بيوفر لك التصميم و الفكره والاخراج .. لكن الخطوات هي نفسها بتسويها بنفس البنر للصغير 
عشان كذا المصممين يطلبون سعر خاص للبنر الكبير و سعر آخر للبنر الصغير .. حنا نقدر نصغير البنر هما هو لكن بيطلع مقاسات مختلفه عن المقاس المطلوب !
عشان كذا نظراً لاختلاف مقاسات البنر ( المحدده المطلوبه من قبل الشخص ) نضطر انه نعيد التطبيق والخطوات من جديد < طبت من السطح

 

بخلاف لو بنصغره على المقاس اللي يحافظ فيه على النسبه والتناسب لحجم البنر  .. مع الاحتفاظ بجميع الخطوات ..!

فيعطينا هالمقاسات

درس بنر متحرك بالايميج ردي والفوتوشوب

 

بنر متحرك لشركة موبايلي

 

نلقاكم بدورس آخرى 

Pixel Des


8,730 زيارة  | 

الكلمات الدليلة : , , , ,

 

مواضيع عشوائية :

22 تعليقات حتى الأن.

  1. Mr. A قال:

    لو سمحتي يا أختي، عندي الكونكت له اسبوع ما يشبك .. وحاولت اضبط الإعدادات وماضبط معي .. ظنك شسوي فيه ؟

    < <-- لا تلوميني، حسيتك مديرة موبايلي خلاص

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

    شاكرين لك هذه الدرس، ولا تنسين تردين علي بخصوص الكونكت

  2. ammar قال:

    بالله نبي واحد بيتزا وثلاثه فطاير لبنه سامع انك خبازه على كلام مستري <<<< يسمع شطف <<< ياقرب pixel واطيتني ومستر بشيول

    الله يعطيك العافيه على الشرح الوافي بصراحه درس مهم ورائع يستاهل المفضله

    وانا والله مايحوم تسبدي فيه الا حاجه وحده اذا سويت المشروع وخمتك تغيرين كلمه في نص العمل تحصلينها رقت فوق ولا تحت ياكود وزنتها

    اشكرك بعنف على جهودك الجباره التي تثمر عقولنا وتنقلنا من غياهب الجهل الى نور التصميم

    بنتظار جديدك

  3. CIS قال:

    ماشالله تبارك الله
    انتي بجد موهوبه و محترفه وتسوين شغلك برهى

    انا لو منك و اعرف اسوي بس خط بالفوتوشوب او اي برنامج على طول فتحت بزنس وبزنس كارد بعد
    انتي امكانياتك كبيره بس مااستغليتها كلها ،
    في موقعك اعرضي خدماتك و اقضي على البطاله
    وقولي للناس انا موظفه
    موفقه

  4. refiah قال:

    ماشاء الله .. ابدآآآآع ..
    اتعب وانا اقول مبدعه

    جزاك الله خير

  5. درس طيب .ٌ .مع اني مافهمت شي لكن من طولة حسيت انك تعبتي ٌ. فيييه
    ي الله ارزقنآ الاخلاص .. في القول والعمممممل .

  6. pixel قال:

    Mr.A

    تعال خذ الكونكت حقي متبرعتن به لك لانه شرهتك على اللي عرف وشلون يشحن به ولاتسالن من وين لتس لأني ماني قايلتن لك هديه من موبايلي هومن مادري الا وصاكن بعين < والله طل بوجهتس يعطونتس يابنت خيخي  

    الله مير يسلمك ويعافيك ماسوينا الا المفيد

  7. شليويح قال:

    كفووو والله

    بس اخوي الفوتوشوب ميشتغل عندي يطلعلي هل الكلام

    هذآـ

    شوف

    Errror Number:0×80040303 Description

    setuo will now terminate

    Unhandled Exception

    • Mr. A قال:

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

  8. شليويح قال:

    هع والله يالذيب حملته

    من كل منتدى عياء نفس المشكله

    تكفى دورلي حل

  9. شليويح قال:

    الوندوز سفن

    وندوز 7

  10. شليويح قال:

    حملت لين قلت بس والله

    عياء تكفى ساعدني

  11. pixel قال:

    ammar

    يالله انه اتحييك سكرنا المحل ومعروض للتقبيل

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

    أما اذا وقفت على ثاني فريم .. وحركت الكلمه معناته انك ” فقط حركة الكلمه من الفريم الثاني ” أما الفريم الثالث و…. والخ ماراح تتحرك الكلمه وراح يختلف التوازن الكلمة وتتغير أماكنهن مثل ماحصل معك

    العفووو وحياك الله .. ولو ان الرد كان تأخر لكن السموحه

  12. pixel قال:

    [ CISٍ ]

    الله مير يسلمك على هالثناء جدا اخجلني وانا للاسف مااستحي
    وهذا الحاصل ان شاء الله بفتح لي متجر للفوتوشوب <- ذي اللي متأثره باالإبُل
    الله يعطيك العافيه

    [ refiah ]

    مشكوره يابعدي شرفتينا والله
    واياك ان شاء الله وجميع المسلمين

    [ بقآيآ آنسآن ]

    يمكنك مو راعي فوتوشوب عشان كذا مافهمت بس صدقني لو بتدخل هالمجال بتفهم عليه ان شاء الله
    الله يعطيك العافيه ويجزااااك خير يارب

  13. pixel قال:

    [ شليويح ]

    مشكلتك هذي تطلع أثناء تثبيت الفوتوشوب صح ؟
    يعني انت اساسا للحين ماثبته عشان تفتحه ..

    فاتوقع انك تستخدم فوتوشوب الاصدار الثامن .. لكن انا مجربه هالاصدار على الفيستا وويندوز 7 وكلهن يشتغلن ممتازات

    أما اذا كنت امثبته فـ رح لم أيقونه الفوتوشوب الموجوده على سطح المكتب واضغط كليك يمين واختار ” خصائص الفوتوشوب ” ومنها اختار نافذة ” التوافق ”
    واختار وضع التوافق مع ويندوز 7

    http://www.pixel-d.com/blog/wp-content/uploads/t.png

    طبعا انا يطلع لي كذا لان نظامي فيستا واصداري العاشر من الفوتو
    أنت اختار اللي يناسبك ..

    /

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

    من هنا
    تحميل البرنامج + السيريـال
    الاول :

    http://www.mediafire.com/?sharekey=4…ac15fdc5aeb6ba

    /

    الثاني :
    وهذي روابط مُجزأه أخرى ..

    4shared -- MEMO_PS_III -- shared folder -- free file sharing and storage

    ملاحظة :
    اختار يالأول .. يالثاني وآحد منهن ..
    لكن لازم اتحمل كل الاجزاء ..

    طبعا كل الروابط مجربه وسبق واشتغلت معي الحمد لله وان شاء الله تضبط معك

    /

    ٍ[ Mr. A ]

    الله يعطيك العافيه على المساعدات ماقصرت والله

  14. Edge قال:

    والله كذا الوضع مايخارج

    لابد من الشرح بالفديوا غير كذا بالمره ماينفع

    ع العموم تسلم دياتك خيتي

    • Pixel Des قال:

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

  15. mbe-111 قال:

    إبــــــــــــــــــداع قليله بحقــــــك
    يا بخت اللي أنت له

  16. virus-of-love قال:

    شرح رائع وجميل ويعطيك الف عافيه واستمري على ابداعك


                                          

أخبرني بوجود تعليقات جديدة .

صفحة جديدة 2