المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح عمل بنر متحركـ درس سهل


سارق عيونك
23-09-2007, 11:11 صباحاً
بناء على طلب الاخ أبو الورد
هذا شرح لعمل بنر متحرك

************************************
السلام عليكم ..


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

http://upload79.jeeran.com/banner/image001.gif
وسيكون الشرح إن شاءالله لبرنامج "Image Ready" الذي ينزل تلقائيا مع برنامج الفوتوشوب..


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

http://upload79.jeeran.com/banner/image002.jpg

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

http://upload79.jeeran.com/banner/image003.jpg

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


http://upload79.jeeran.com/banner/image004.jpg
ملحوظة :
(( أنا سويت التوقيع 500 × 300 )) يعني أكبر من البنر شوي ..

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


http://upload79.jeeran.com/banner/image005.jpg
بعد تجهيز شكل البانر.. نقوم بإضافة الجمل المطلوبة للبانر..

- نكتب أول جملة.. وهي على سبيل المثال "سبحان الله وبحمده" :


http://upload79.jeeran.com/banner/image006.jpg
بعدها نقوم بتكوين طبقة جديدة لكتابة الجملة الثانية.. ولكي نكون طبقة جديدة نذهب إلى :
Layer --> New --> Layer..


http://upload79.jeeran.com/banner/image007.jpg
بعدها نضغط أوكي.. وستلاحظ إن الطبقة الجديدة تكونت..
(إذا لم تكن نافذة الطبقات ظاهرة.. تستطيع إظهارها من :
( s --> Layers

http://upload79.jeeran.com/banner/image008.jpg
وقبل أن تكتب الجملة الثانية.. هناك ملاحظة مهمة يفضل تطبيقها حتى لا يحدث خطأ.. وهي إخفاء طبقة الكتابة الأولى.. ولكي نخفيها نضغط على صورة العين في الطبقات :
(المحددة بالمربع الأحمر)


http://upload79.jeeran.com/banner/image008.jpg


ثم نختار الطبقة الجديدة ومن ثم نكتب الجملة الثانية المطلوبة..وهي على سبيل المثال "عدد خلقه"..

- وهكذا نكرر الطبقات والجمل التي نريدها إلى أن ننتهي من كتابة كل الجمل المطلوبة..

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

Files --> Jumb To --> Adobe Image Ready

http://upload79.jeeran.com/banner/image009.gif



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


- والآن قبل أن نكمل الخطوات.. أرجو أن تتحقق من ظهور نافذتين مهمتين جداً هما :

"Layers" (الطبقات) و "Animation" (للتحكم بالحركة)

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


http://upload79.jeeran.com/banner/image010.jpg


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


http://upload79.jeeran.com/banner/image011.jpg


كل إطار سيكون لجملة.. لذا عدد الإطارات التي تحتاجها هي بحسب عدد الجمل التي تريد ظهورها..

- في البانر الذي نصممه في درسنا نحتاج إلى "خمس" إطارات (Frames) .. لكل جملة إطار..

- ولتكوين إطار جديد.. نضغط على الدائرة التي على اليمين التي بداخلها سهم.. ومن ثم New Frame :



lhttp://upload79.jeeran.com/banner/image012.gif

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




http://upload79.jeeran.com/banner/image013.jpg

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


http://upload79.jeeran.com/banner/image014.jpg

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

- بعدها ننتقل إلى الإطار الثاني.. نضغط عليه :



http://upload79.jeeran.com/banner/image015.jpg

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



http://upload79.jeeran.com/banner/image016.jpg
وهكذا إلى أن ننتهي من تنسيق جميع الإطارات والطبقات..


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

- ويمكننا تحديد مدة ظهور الإطار من خلال الضغط على الرقم الموجود في الاطار

- عند الضغط عليها ستظهر قائمة أرقام.. الأرقام هي مدة ظهور الإطار بالثواني..

اختار الوقت الذي تريده من القائمة.. أو إذا لم يكن الوقت المطلوب موجوداً يمكنك تحديده من خلال اختيار "Other.." :


- ومن ثم نطبق الخطوة السابقة على جميع الإطارات الأخرى..

- بعدها نقوم بتحديد حركة البانر..
هل تريدها دائمة؟ أم تريده أن يتحرك مرة واحدة ومن ثم يتوقف؟

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

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

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

File --> Save Oprimized


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


- ويمكننا تحديد مدة ظهور الإطار من خلال الضغط على الرقم الموجود في الاطار (كما في الصورة) :



http://upload79.jeeran.com/banner/image017.jpg

عند الضغط عليها ستظهر قائمة أرقام.. الأرقام هي مدة ظهور الإطار بالثواني..

اختار الوقت الذي تريده من القائمة.. أو إذا لم يكن الوقت المطلوب موجوداً يمكنك تحديده من خلال اختيار "Other


http://upload79.jeeran.com/banner/image018.gif

ومن ثم نطبق الخطوة السابقة على جميع الإطارات الأخرى..


- بعدها نقوم بتحديد حركة البانر..
هل تريدها دائمة؟ أم تريده أن يتحرك مرة واحدة ومن ثم يتوقف؟

هذا الاختيار تستطيع تحديده من خلال الضغط على كلمة"Forever" في الإطارات :



http://upload79.jeeran.com/banner/image019.gif


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


http://upload79.jeeran.com/banner/image020.gif


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

http://upload79.jeeran.com/banner/image021.jpg

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

File --> Save Oprimized

http://upload79.jeeran.com/banner/image022.gif

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


http://upload79.jeeran.com/banner/image001.gif

بو هشام
23-09-2007, 11:28 صباحاً
اي هيك الشغل يبلاش

بدك بوسة بعيونك اخي سارق العيون

جزاك الله كل خير درس مهم ومفيد للغاية

يعطيك العافيه

سارق عيونك
23-09-2007, 12:43 مساءً
اي هيك الشغل يبلاش

بدك بوسة بعيونك اخي سارق العيون

جزاك الله كل خير درس مهم ومفيد للغاية

يعطيك العافيه


وإيـاك حبيبي

مشكور ع المرور :)

خ ــادم الإسلام
23-09-2007, 05:47 مساءً
جزاك الله كل خير يا سارق عيونك
,, كفييت ووفيت صراحة :)

سارق عيونك
23-09-2007, 09:13 مساءً
جزاك الله كل خير يا سارق عيونك
,, كفييت ووفيت صراحة :)



وإيـاك حبيبي

مشكور ع المرور

JuSt SmiLe
02-10-2007, 06:43 صباحاً
بارك الله فيك

نبع الوفا
03-11-2007, 09:10 صباحاً
مشكور أخوي على الموضوع

المحبوب
04-11-2007, 08:59 صباحاً
عز الله انك ذيب

كفيت وفيت يالغالي

سارق عيونك
04-11-2007, 04:15 مساءً
حياك حبيبي

مشكور ع المرور

عمر
06-01-2008, 03:20 مساءً
جزاك الله كل خير
وما تقصر يا الغالي