http://sadiqa2006.googlepages.com/ani-2.gif


السلام عليكم



طبعا انا مرآآ مرآآآ مبسوطة .. عشان كل ظروفي المزعجة انتهت و الحمد لله :001:


من اليوم .. نبدأ المتآآبعة و التعليقآآت .. ومن اليوم نبدأ دروس صعبة نوعاً ما

حبيت أعوض عن الفترهـ المآآضيهـ اللي حسيت ان مستوى الدروس فيها انخفض


لكن قبل .. نتآآئج الإختبار و التحدي .. أكييـد الكل ينتظرها على احر من الجمر


ما ح أطول عليكم .. و اللي خآآيفهـ من النتيجة يا ريت تغمض عيونها خخخخخ


http://sadiqa2006.googlepages.com/ani-3.gif



نبدآ بـ ... الإختبآآآر


عآآد أحس الكل حقد عليّ بعد هذا الإختبار .. مع إنه مررهـ سهل <~~ "026"


نبدأ أولاً بـ الإجآآبات الصحيحة :035:



http://sadiqa2006.googlepages.com/ani-3.gif


× ما هو البآترن ؟

هذا سؤال من برآآ الدروس .. فـ أي إجابهـ كتبتيها أعتبرتها صح


لكن الإجابهـ النموذجيهـ .. هو عبآرهـ عن نقش أو نص أو صورهـ .. يتم تكرارها في كامل اللاير او جزء منه .. أيضـاً يستخدم في صنع العلامة المائية .. و عمل الجليتر




× ما وظيفة القفل ؟


يحمي اللاير أو العمل من أي تعديلات عليهـ




× ما هي أهم الإرشادات في استعمال أداة الكتابة ؟


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




× ما هي الستايلات ؟


هي تأثيرات على اللاير تعطيه لمسة جمآلية كـ الظل و الظل الداخلي الخ ..




× فيما تستخدم مجموعة فلاتر blur ?

http://sadiqa2006.googlepages.com/ani-1.gif

السلآآم عليكم


صبآآحكم روقآآن :48:



قبل لا نبدأ الدرس .. أبشركم بـ خبر رووعهـ لـ كل محبآت الفوتودب http://smilies.sofrayt.com/%5E/i/ura.gif .. قررت شركة Adobe .. أنها تنزل نسخة مصغرهـ عن الفوتوشوب على النت .. فوتوشوب يشتغل على المتصفح العآآدي بدون أي تثبيت أو برآآمج .. هـ الشئ في خلال الـ 6 شهور القادمهـ ..

هذه الخدمهـ جزء من حملة شركة Adobe لـ غزو عآلم الجرافيكس ببرنامج الفوتوشوب .. و برغم ان هذه الخدمهـ لن تغني عن برنآآمج الفوتوشوب .. و طبعاً لن تحتوي على كل مميزات الفوتوشوب .. لكنها خطوهـ تطويريهـ كبيرهـ http://smilies.sofrayt.com/%5E/_950/candy.gif

http://sadiqa2006.googlepages.com/ani-2.gif


درس اليوم لـ أخو الفوتوشوب .. الإيميج ردي Adobe ImageReady .. البرنامج الرآئد و الأكثر شعبية في صناعهـ التصاميم المتحركهـ ثنائية الأبعآد ..

في هذا الدرس .. نتعرف على :

× أساسيات " ايميجردية "
× النص المختفي
× صوره + حركه × تصميم

الإيميج ردي برنآآمج لـ تحريك الصور .. و هو مكمل للـ فوتوشوب .. طبعاً ما هو بـ مستوى عمآآلقهـ الحركة ثلاثية الأبعاد مثل الفلاش .. السويتش ماكس .. و المآآيآآ <~~ مايا هذا برنآمج مو اسم بنوتهـ .. للعلم فقط http://smilies.sofrayt.com/%5E/k/flag.gif خخخخ

يكفي أنه أسهل برنآآمج في نظري .. بـ العادهـ برآآمج تحريك الصور معقدهـ و اسألوني عنها http://smilies.sofrayt.com/%5E/t/pissed.gif .. لكن الإيميج ردي كسر هذهـ القآآعدهـ بـ سهولهـ إستعمالهـ .. و واجهتهـ البسيطة القريبهـ من الفوتوشوب

http://sadiqa2006.googlepages.com/ani-3.gif

الإيميج ردي ما يحتآآج تحميل .. لأنه يجي مع الفوتوشوب .. لـ فتحهـ .. في أكثر من طريقهـ بس أخص بـ الذكر

× من صندوق الأدوات في الفوتوشوب .. اضغطي على زر " الإنتقال الى الإيميج ردي "

http://sadiqa2006.googlepages.com/ima-3.gif



× أو .. من قائمة إبدأ \ Start .. اختآآري برنآآمج الإيميج ردي ..

http://sadiqa2006.googlepages.com/ima-4.gif


هذهـ هي وآآجهـ الإيميج ردي

http://sadiqa2006.googlepages.com/ima-1.gif


قريبهـ جداً من الفوتوشوب .. طبعاً مو كل الأدوات و الأوامر موجودهـ بـ الإيميج ردي .. لكنها تفي بـ الغرض :)

نلاحظ وجود قائمة يديد .. قائمة slices أو شرائح .. ما اعتقد بتفيدج الا اذا كنتي مصممة مواقع

تلأأحظون بعد أن في صنآآديق بـ عدد شعر رآآسي http://smilies.sofrayt.com/%5E/v/hairraise.gif .. لن تحتآآجي لها .. أغلقيهـا و اتركي صندوقي layer + color .. بالإضافة لصندوق الأداوت طبعا

و الخطوهـ الأخيرهـ لـ إعداد الإيميج ردي للـ إنطلآآق .. هي إستدعآآء صندوق Animation

من قائمة windows اضعطي على Animation

http://sadiqa2006.googlepages.com/ima-2.gif

سيظهر لك الصندوق بـ هذآآ الشكل

http://sadiqa2006.googlepages.com/ima-5.gif

1 × الفريم frame
2 × سرعـهـ الإنتقآآل بين الفريمات
3 × العودهـ الى أول فريم
4 × إستعراض الحركة
5 × العودهـ الى أخر فريم
6 × إنشاء مجموعهـ توائم
7 × إنشاء فريم جديد
8 × حذف فريم


العمل في الإيميج ردي أشبهـ بـ عمل الكارتون أو الإنمي .. كلنا نعرف أن مشهد الإنمي الواحد مكون من عدهـ صورهـ تتابع بشكل سريع جداً .. مشهد ويا مشهد تتكون حلقهـ إنيمي ..

هكذا الإيميج ردي .. الفريم عبآآرهـ عن جزء من المشهد .. اذا سوينا استعراض لكل الأجزاء تكون ويانا المشهد الكآآمل

شايفين هذا السمايل الصغير ؟ "027" .. هذا السمايل مكون من 36 فريم .. سرعهـ الإنتقال بين كل فريم هي جزء من عشرة أجزاء من الثانية أو 0.1 من الثانية

طبعاً مو كل التصاميم المتحركة بهذا العدد من الفريمات .. في وايد تصاميم مكونة من فريمين أو ثلاثة فقط .. و هي تكون حركهـ بسيطة مثل هذا الشكل http://www.banaat.com/vb/images/icons/icon18.gif

مو لآآزم تحفظي كووول هذا .. لكنهـ يساعدج أكثر على فهم آليهـ عمل الإيميج ردي


http://sadiqa2006.googlepages.com/ani-2.gif



نبدأ في التطبيق الأول للـ حركة بالإيميج ردي .. النص المختفي http://smilies.sofrayt.com/%5E/u/merlin.gif

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

ما شفت أحد بـ حيآآآآتي يستعمل الطريقة اللي استعملها ^^؛ .. أحسها صعبة اذا كنتي مبتدئة .. بالإضافهـ الى انها ما تسمح لج بـ التراجع أو التعديل .. عشان كذا فضلت أشرح هذه الطريقة ^.^

http://sadiqa2006.googlepages.com/ani-3.gif

هذا هو التصميم اللي نبي نحرك النص فيهـ

http://sadiqa2006.googlepages.com/nasmo-1.gif

و هذا صندوق اللايرز في الفوتوشوب .. مهم جدا يكون النص في لاير منفصل

http://sadiqa2006.googlepages.com/nasmo-2.gif

كما تعلمنا .. ننتقل الى الإيميج ردي عن طريق الزر بـ صندوق الأدوات

ثم انتقلي لـ صندوق Animation .. و اضغطي على السهم الصغير .. و اختاري make frames from layers

http://sadiqa2006.googlepages.com/nasmo-3.gif

نلاحظ صآآر عندنآ أكثر من فريم .. هـ الشئ حسب عدد لايرات التصميم .. في تصميمنا .. اصبح عندنا اثنين

http://sadiqa2006.googlepages.com/nasmo-4.gif

نضغط على الفريم الأول

http://sadiqa2006.googlepages.com/nasmo-5.gif

و تأكدي من صندوق اللايرز أن لاير الخلفية عليهـ علامة العين .. اما النص لا ..

http://sadiqa2006.googlepages.com/nasmo-6.gif


الحين نضغط على الفريم الثاني

http://sadiqa2006.googlepages.com/nasmo-7.gif

و مرهـ ثانية نتجه لـ صندوق اللايرز .. و نظهر علامة العين على لاير الخلفية

http://sadiqa2006.googlepages.com/nasmo-82.gif


الحين .. اضغطي على السهم الصغير بـ جوار سرعهـ الإنتقال بين الفريمات .. في الفريم الأول

http://sadiqa2006.googlepages.com/nasmo-83.gif


أختآآري السرعهـ المناسبة .. لا تتركيها على صفر الا اذا كنتي تسوين جليتر .. السرعة الأفضل بالنسبة لي في كل أنواع الحركآآت .. هي بين 0.1 من الثانية لين ثانيتين .. جربي لين تختاري المناسب بـ النسبة لج .. أنا اخترت 0.2


كرري العملية من الفريم الثاني

http://sadiqa2006.googlepages.com/nasmo-84.gif


الحين استعرضي الحركهـ .. هل السرعة مناسبة ؟ هل في اي اخطآآء ؟

http://sadiqa2006.googlepages.com/nasmo-85.gif


اذا بغيتي تغيري مكآآن النص مثلاً .. كل ما عليج هو انج تفعلي لاير النص ..

http://sadiqa2006.googlepages.com/nasmo-87.gif


ثم اختآآري أداة السهم http://sadiqa2006.googlepages.com/nasmo-86.gif .. وبالضغط مع السحب غيري مكان النص

http://sadiqa2006.googlepages.com/nasmo-88.gif

http://sadiqa2006.googlepages.com/ani-3.gif


و اخيراً نجي للـ حفظ .. وهي طريقة موحدهـ ما تختلف .. نلاحظ ان الإيميج ردي ما يحفظ الا بـ ثلاثة صيغ صيغة الـ psd .. صيغة gif .. صيغة html و هي صيغة صفحات الويب

من قائمة file .. نختار الأمر save optimized as

http://sadiqa2006.googlepages.com/nasmo-89.gif


و مثل الفوتوشوب .. تظهر نافذهـ حواريهـ لتحديد اسم الصورهـ و مكان الحفظ .. حدديهم و اضغطي save

http://sadiqa2006.googlepages.com/nasmo-90.gif

مهم جداً ... لا تغيري صيغة الحفظ .. الصيغ الباقيهـ تفيد مصممات المواقع فقط

هذهـ هي النتيجة النهائية

http://sadiqa2006.googlepages.com/nasmo-91.gif



يـــآآ حوووبي لك يالإيميج ردي :032:

http://sadiqa2006.googlepages.com/ani-2.gif


الحين .. جيبوا لكم مج نسكآآفيهـ .. ويآآ حبتين بندول .. و مافي مانع كيس شيبس لايز ..بشرط خلوا نص الكيس لي :018: خخخخ .. لأن الجزء الأخير من الدرس معقد شوي .. و يبيلهـ صبر

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

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


http://sadiqa2006.googlepages.com/edafa-1.gif

ثم انتقلي للـ إيميج ردي

خل التصميم شوي على جنب .. و من قائمة file .. اختاري الأمر open

http://sadiqa2006.googlepages.com/edafa-2.gif

و كما الفوتوشوب ..حددي مكان الصورة المتحركة اللي ودج تضيفينها على التصميم الثابت .. ثم اضغطي open

http://sadiqa2006.googlepages.com/edafa-3.gif

الحين .. في الإيميج ردي عندنا عملين .. التصميم الثابت .. و هذا اتركيهـ الحين .. و الصورهـ المتحركة اللي نبي نشتغل عليها

http://sadiqa2006.googlepages.com/edafa-4.gif

من صندوق انيميشن .. اضغطي على السهم الصغير و اختاري select all frames

http://sadiqa2006.googlepages.com/edafa-5.gif

نلاحظ أن كل الفريمات تحددت

http://sadiqa2006.googlepages.com/edafa-6.gif

ومن نفس القائمة المختصرة من السهم .. نختار copy frames

http://sadiqa2006.googlepages.com/edafa-7.gif


الحين نرجع لـ تصميمنا الثابت .. ومن صندوق الإنيميشن .. و من السهم الصغير اختاري paste frames

http://sadiqa2006.googlepages.com/edafa-8.gif


ستظهر لك نافذهـ حواريهـ .. اختاري past over selection .. ثم اضغطي ok

http://sadiqa2006.googlepages.com/edafa-82.gif

نلاحظ أن عدد الفريمات زآد .. و أن الصورهـ المتحركهـ موجوده في أقصى طرف التصميم .. و ايضاً لايرز الصوره اضيفت الى لايرز التصميم

اضغطي على الفريم الثاني .. أو الفريم الخالي من الخلفية

http://sadiqa2006.googlepages.com/edafa-83.gif

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

http://sadiqa2006.googlepages.com/edafa-84.gif

و كرري العملية اذا كان عندج اكثر من فريم الخلفيهـ غير ظاهرهـ فيهم

أيضاً تأكدي ان كل الفريمات لها نفس السرعهـ

و لتغيير مكان الصورهـ المتحركة .. اربطي بين كل لايراتها .. لاحظي الصورهـ

http://sadiqa2006.googlepages.com/edafa-85.gif

ثم بأداة السهم http://sadiqa2006.googlepages.com/edafa-86.gif .. و بالضغط مع السحب .. انقليها للمكان المناسب

http://sadiqa2006.googlepages.com/edafa-87.gif


كما العادهـ .. استعرضي الحركة ثم احفظيهـ كما تعلمنا

و هذه النتيجة :046:

http://sadiqa2006.googlepages.com/edafa-88.gif



http://sadiqa2006.googlepages.com/ani-3.gif

قبل التطبيق .. بـ أعطيكم الوصآآيا الأربعة للـ إيميج ردي خخخخ

× جربي كووول شئ .. اغلب المحترفين تعلموا الإيميج ردي بـ التجربة و التجربة و التجربة .. شخبطي و لخبطي مثل ما تبين .. و طبقي اكبر عدد ممكن من الدروس

× لا تيأسي اذا غلطتي .. لا يأس مع الحيآآة ولا حياة لمن تنادي :018: .. لا تعتبري نفسج فاشلة لـمجرد أنج اخفقتي اكثر من مرهـ .. الفاشل هو اللي ما يقدر على الوقوف بعد السقوط

× لا تخجلي من السؤال .. اذا لم تسألي .. لن تتعلمي

× بالنسبة لـ إضافهـ صورهـ متحركة على تصميم ثابت .. ابدئي بـ صورة ذات فريمين أو ثلاثة على الأكثر .. ثم تدريجياً .. لا تبدأ بصورهـ ذات عدد كبير من الفريمات لأنها ح تجننك و تلخبطك :012:


http://sadiqa2006.googlepages.com/ani-3.gif


بآآقي الأستآآذ تطبيق

أبي كل وحدهـ تصمم توقيع بحجم 400×200 بـ المهارات اللي تعلمناها على مدار الـ 10 دروس السابقة .. و تسوي فيه حركة وحدة بس اما النص المختفي أو اضافة صورهـ متحركة لتصميم ثابت

ابي اشووووف الإبدآآعآآت الكووول :023:


التطبيق عليه 5 درجآآت .. اما تسجيل الحضور فـ ما عليه أي درجآآت <~~ وحدهـ بخيلهـ خخخ :030:

و أي استفسآآر أنــآآ بـ الخدمهـ

سي يآآآآ :011:
http://sadiqa2006.googlepages.com/ani-2.gif