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

اهلا ومرحبا بك عزيزي الزائر,,,
التسجيل مجاني,,
او سجل دخوللك ,,
ونتمني لكم قضاء امتع الاوقات....
مع تحيات الاداره,,,

انضم إلى المنتدى ، فالأمر سريع وسهل

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

اهلا ومرحبا بك عزيزي الزائر,,,
التسجيل مجاني,,
او سجل دخوللك ,,
ونتمني لكم قضاء امتع الاوقات....
مع تحيات الاداره,,,

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

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



3 مشترك

    شرح تصميم بانر متحرك بـالصور ! !

    نمر
    نمر
    نائب المدير
    نائب المدير


    ذكر الجدي القط عدد الرسائل : 305

    تاريخ الميلاد : 01/01/1976
    العمر : 45
    المكان : محافظة حلوان
    المزاج : تمام التمام
    تاريخ التسجيل : 26/08/2007

    GMT + 3 Hours شرح تصميم بانر متحرك بـالصور ! !

    مُساهمة من طرف نمر الإثنين 01 أكتوبر 2007, 12:26 pm

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



    وسيكون الشرح إن شاءالله لبرنامج Image Ready الذي ينزل تلقائيا مع برنامج الفوتوشوب.

    أولاً ... نفتح ملف جديد في برنامج الفوتوشوب.

    شرح تصميم بانر متحرك بـالصور ! ! Image002


    ثم نحدد المقاس وهو 460 × 60 ( هذا هو المقاس الموحد للبانرات في صفحات الإنترنت ).



    شرح تصميم بانر متحرك بـالصور ! ! Image003



    - أو يمكنك اختيار " Web Banner " من المقاسات الجاهزة في برنامج الفوتوشوب ... إذا لم تكن تعرف المقاس :


    شرح تصميم بانر متحرك بـالصور ! ! Image004


    بعدها صمم الشكل الذي تريده للبانر ... وفي درسنا سنستخدم هذا الشكل :


    شرح تصميم بانر متحرك بـالصور ! ! Image005




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




    شرح تصميم بانر متحرك بـالصور ! ! Image006


    - بعدها نقوم بتكوين طبقة جديدة لكتابة الجملة الثانية ... ولكي نكون طبقة جديدة نذهب إلى : Layer --> New --> Layer..



    شرح تصميم بانر متحرك بـالصور ! ! Image007




    - بعدها نضغط أوكي ... وستلاحظ إن الطبقة الجديدة تكونت ... ( إذا لم تكن نافذة الطبقات ظاهرة.. تستطيع إظهارها من ) : ( Windows --> Layers )
    - وقبل أن تكتب الجملة الثانية.. هناك ملاحظة مهمة يفضل تطبيقها حتى لا يحدث خطأ.. وهي إخفاء طبقة الكتابة الأولى.. ولكي نخفيها نضغط على صورة العين في الطبقات : ( المحددة بالمربع الأحمر )




    شرح تصميم بانر متحرك بـالصور ! ! Image008






    - ثم نختار الطبقة الجديدة ومن ثم نكتب الجملة الثانية المطلوبة ... وهي على سبيل المثال " عدد خلقه ".
    - وهكذا نكرر الطبقات والجمل التي نريدها إلى أن ننتهي من كتابة كل الجمل المطلوبة.
    - الآن يفضل أن نقوم بحفظ الملف ... بعدها ننتقل إلى برنامج " Image Ready " ... ونستطيع الانتقال إلى البرنامج مباشرة من خلال برنامج الفوتوشوب عن طريق : Files --> Jumb To --> Adobe Image Ready




    شرح تصميم بانر متحرك بـالصور ! ! Image009




    - ستلاحظ بعدما يفتح البرنامج أن الملف الذي كنت تعمل عليه يفتح تلقائيا مع البرنامج.
    - والآن قبل أن نكمل الخطوات ... أرجو أن تتحقق من ظهور نافذتين مهمتين جداً هما : " Layers " ( الطبقات ) و" Animation " ( للتحكم بالحركة ) وتستطيع التأكد من ظهورهما من قائمة Windows حيث يجب أن يكون عليهما علامة صح، فإن لم تكن علامة الصح موجودة اضغط على الاختيار وستظهر النافذة المطلوبة :



    شرح تصميم بانر متحرك بـالصور ! ! Image010

    الآن لاحظ ... في نافذة الـ( Animation ) يوجد إطار واحد فقط ... ( الإطار هو المربع الموجود في الصورة ) :

    شرح تصميم بانر متحرك بـالصور ! ! Image011

    - كل إطار سيكون لجملة ... لذا عدد الإطارات التي تحتاجها هي بحسب عدد الجمل التي تريد ظهورها.
    - في البانر الذي نصممه في درسنا نحتاج إلى " خمس " إطارات ( Frames ) ... لكل جملة إطار.
    - ولتكوين إطار جديد ... نضغط على الدائرة التي على اليمين التي بداخلها سهم ... ومن ثم New Frame :
    شرح تصميم بانر متحرك بـالصور ! ! Image012




    - بعد ما نكون الإطارات المطلوبة ... نضغط على الإطار الأول :



    شرح تصميم بانر متحرك بـالصور ! ! Image013




    ومن ثم نخفي جميع الـ( Layers )( الطبقات )، ما عدا الطبقة التي نريدها أن تظهر :




    شرح تصميم بانر متحرك بـالصور ! ! Image014





    عندها ستظهر الجملة المكتوبة فقط وليس باقي الجمل.
    - بعدها ننتقل إلى الإطار الثاني ... نضغط عليه :

    شرح تصميم بانر متحرك بـالصور ! ! Image015



    ومن ثم نخفي جميع الطبقات ما عدا الطبقة التي نريد ظهورها في هذا الإطار :

    شرح تصميم بانر متحرك بـالصور ! ! Image016

    [color=red]- وهكذا إلى
    أن ننتهي من تنسيق جميع الإطارات والطبقات.
    - الآن سننتقل إلى مرحلة تحديد مدة ظهور كل إطار ... ( وهذه هي الخطوة الأهم في تصميم البانر والتي ستجعل شكل البانر ملفت وجذاب ).
    - ويمكننا تحديد مدة ظهور الإطار من خلال الضغط على الرقم الموجود في الاطار ( كما في الصورة ) :

    شرح تصميم بانر متحرك بـالصور ! ! Image017


    - عند الضغط عليها ستظهر قائمة أرقام ... الأرقام هي مدة ظهور الإطار بالثواني ... اختار الوقت الذي تريده من القائمة ... أو إذا لم يكن الوقت المطلوب موجوداً يمكنك تحديده من خلال اختيار " Other.. " :
    شرح تصميم بانر متحرك بـالصور ! ! Image018


    ومن ثم نطبق الخطوة السابقة على جميع الإطارات الأخرى.
    - بعدها نقوم بتحديد حركة البانر ... هل تريدها دائمة ؟ أم تريده أن يتحرك مرة واحدة ومن ثم يتوقف ؟ ... هذا الاختيار تستطيع تحديده من خلال الضغط على كلمة " Forever " في الإطارات :

    شرح تصميم بانر متحرك بـالصور ! ! Image019



    وستظهر لك قائمة تحدد منها اختيارك ... " Once " تعني أن البانر سيعمل لمرة واحدة فقط ومن ثم يتوقف ... و" Forver " تعني إلى الأبد، أي أن البانر سيبقى متحركا بدون توقف :



    شرح تصميم بانر متحرك بـالصور ! ! Image020


    أو يمكنك تحديد عدد مرات معينة عن طريق اختيار " Other "، وعندها سيظهر لك هذا المربع الذي تحدد منه عدد المرات المطلوبة :





    شرح تصميم بانر متحرك بـالصور ! ! Image021




    الآن وصلنا إلى الخطوة الأخيرة ... وهي خطوة حفظ البانر ... البانر المتحرك يجب أن يحفظ بصيغة " Gif "، ولكي نحفظه على هذه الصيغة نذهب إلى : File --> Save Oprimized


    شرح تصميم بانر متحرك بـالصور ! ! Image022



    وأخيرا أصبح البانر بهذا الشكل :

    شرح تصميم بانر متحرك بـالصور ! ! Image001


    [color:ff48=darkgreen:ff48]إلى هنــا انتـهـى الشـــرح شرح تصميم بانر متحرك بـالصور ! ! Smile

    تمنياتي ان تستفيـــدوا
    شرح تصميم بانر متحرك بـالصور ! ! Smile

    Admin
    Admin
    صاحب اللليله دي كلها
    صاحب اللليله دي كلها


    ذكر عدد الرسائل : 349

    المكان : في منتدي ابوحجر
    تاريخ التسجيل : 30/07/2007

    GMT + 3 Hours رد: شرح تصميم بانر متحرك بـالصور ! !

    مُساهمة من طرف Admin الخميس 18 أكتوبر 2007, 1:39 pm

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


    _________________
    سبحان الله الحمد لله لااله الا الله والله اكبر Very Happy
    شرح تصميم بانر متحرك بـالصور ! ! 7c985310
    avatar
    النسر الذهبى
    اداره
    اداره


    ذكر عدد الرسائل : 231

    المكان : منتدى الادبيه
    تاريخ التسجيل : 30/07/2007

    GMT + 3 Hours رد: شرح تصميم بانر متحرك بـالصور ! !

    مُساهمة من طرف النسر الذهبى الأحد 09 ديسمبر 2007, 5:52 pm

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

      الوقت/التاريخ الآن هو الثلاثاء 07 ديسمبر 2021, 9:49 am