منتديات تو زوو - تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

منتديات تو زوو (http://www.2zoo.com/vb/index.php)

- قسم التصميم والفوتوشوب (http://www.2zoo.com/vb/forumdisplay.php?f=91)

تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

http://dc12.arabsh.com/i/02905/ewp0lfj4zkoy.png
بســـــــــــم الله الرحمـــــــــن الرحيـــــــــم

الســـــــــــــلام عليكم ورحمة الله وبركــــــــاته

تابع الــــــــــدرس الثــــــــــالث

عمل شريط الـLoading بطريقتين

النتيجة النهائية بعد تنفيذ الدرس بالطريجة الاولى ..

http://dc311.4shared.com/img/DyV57Psw/s3/7_online.gif

النتيجة النهائية بعد تنفيد الدرس بالطريجة الثانية ..

http://dc311.4shared.com/img/pI9oC9No/s3/22_online.gif

في الموضوع السابق شرحت الطريجة الاولى وفي هالدرس

بشرح الطريجة الثانية ..

خطوات الطريجة الثانية

من قائمة ابـــدء --> Photoshop CS4 ..

نختــــــــار .. new<------- File بالعربي ملف -----> يديد

http://dc12.arabsh.com/i/02905/ahtjsb0a6tva.jpg

هني نختار الـ width ( العرض ), و الـ Height ( الارتفاع )

http://dc12.arabsh.com/i/02905/kjfhtvaavcsh.jpg

انا هني اخترت العرض 400 و الارتفاع 200

http://dc311.4shared.com/img/DfXKMDn...3/3_online.jpg

هذي اهي مساحة العمل ظهرت لنا بالمقاسات لي اخترناها

http://dc12.arabsh.com/i/02905/dkmn9d3x9bb8.jpg

هني على اليمين مثل مانتم شايفين الادوات ..

نختار الاداة المحددة بالصورة ..الي اهي مال الاشكال التلقائية ..

http://dc371.4shared.com/img/Pt_cY7e...6/5_online.jpg

احين لمن ضغظنا عليه شوفوا شنو طلع لنا فوق

مثل مانتم شايفين انا شنو محددة ..

المستطيل الاول لي عـ اليسار .. نختار منه الشكل الي عـ اليسار

والمستطيل الوسطي .. نختار واحد من الاشكال لي جدامكم ..

طبعا على حسب انتم شلون تبون الشريط ..

والمستطيل الاخير الي عـ اليمين نضغط على السهم الصغير .. والصورة لي بعدها بتوضح قصدي

http://dc371.4shared.com/img/3FYXLOW...9/6_online.jpg

لمن نضغط على السهم بتنسدل لنا قائمة بنختار منها الشكل لي انا محددته ..

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

ومن الداخل موب معبئ يعني فارغ ..

http://dc371.4shared.com/img/eGizgEk...8/7_online.jpg

هذه مساحة العمل لي نشتغل عليها وفيها الشكل لي رسمناه من شوي

http://dc311.4shared.com/img/yV5xCST-/s3/8_online.jpg

في شغلة مهمة حيل : احين بعد مانرسم الشكل التلقائي ..

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

ونحدد طبقة غيرها رح يختفي الشكل

فعشان جذيه شنو رح نسوي عشان نحل ذي المشكلة ..

نروح عند الطبقة الي فيها الشكل لي رسمناه ( الي اهوا المستطيل ) ..

حتى لو اختفى موب مشكلة ..

والصورة موضحة اننا محددين الطبقة .

http://dc371.4shared.com/img/4joKXl9...1/1_online.jpg

احين بنضغط على الطبقة نفسها دبل كليك .. رح تطلع لنا هالنافذة ..

رحح نحط صح عند الخيار لي انا محددته وبنضغط عليه ..

http://dc371.4shared.com/img/jX9ORxE...7/2_online.jpg

احين عقب ماضغطنا عليه فتحت لنا النافذة فيها خصائص ..

ممكن احين نغير اللون والحجم ..

انزين لون شنو وحجم شنو ..

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

بنختار هني لون حدوده .. وبنختار حجم الحدود نبيها عريضة لو رفيعة الخ ..

http://dc371.4shared.com/img/P9FfoCf...4/3_online.jpg

هني انا اخترت حجمه 1 ولونه اسود .

http://dc149.4shared.com/img/1rH5sJc...99067/22_2.jpg

احين بعد مانخلص من ذي الخطوة في شغلة مهمة رح تتغير ..

لي اهي اننا لو حددنا طبقة غير الطبقة لي فيها المستطيل مارح يختفي..

موب مثل قبل لا ننفذ ذي الخطوة كان مجرد نحدد طبقة ثانية غير طبقة المستطيل

يختفي المستطيل ..

http://dc14.arabsh.com/i/02906/ds47fya1vxye.jpg

احين بنرد نختار الشكل الي شايفينه ..

http://dc311.4shared.com/img/uufLZcr.../16_online.jpg

احين لمن ضغظنا عليه شوفوا شنو طلع لنا فوق

المستطيلات لي بالاحمر الي انا محددتهم ..

المستطيل الاول لي عـ اليسار .. نختار منه الشكل الي عـ اليسار

والمستطيل الوسطي .. نختار الشكل الثاني من اليسار..

والمستطيل الاخير احين اقولكم شنو نختار منه

http://dc311.4shared.com/img/mB5w-Fn3/s3/17_online.jpg

نختار مثل ما انا موضحة بالصورة .. لاننا احين نبي الشكل يكون معبى من الداخل مو مثل

اول كنا نبيه فارغ ..

http://dc311.4shared.com/img/xbXtVTC...35515/18_2.jpg

احين انا رسمت ذا الشكل داخل المستطيل مثل مالصورة موضحة ..

http://dc12.arabsh.com/i/02906/xioz8azxifsx.jpg

احين نحدد الطبقة لي موجود فيها ذا الشكل الضغير الي تو راسمته داخل المستطيل ..

http://dc12.arabsh.com/i/02906/40s8xa7rj1gh.jpg

هني نسوي مضاعفة للطبقة .. نضاعف الطبقة الى مايصير المستطيل الكبير ممتلى بالمستطيلات الحمراء الصغار ..

بعدين بنحركهم وبنخليهم يم بعض ..

يعني لمن نضاعف الطبقة للمرة الاولى ,, بتصير عندنا طبقة يديدة بنروح عندها

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

وبنحرك الشكل وبنخليه يمهم .. لين مايصير عندنا كل الاشكال الحمراء ومرتبين يم بعض

..]في شغلة احب انبه عليها انه لازم نحدد الطبقة بعدين نحرك الشكل

لانه ماكو شي بيتحرك الا اذا حددنا الطبقة الي اهوا فيها

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

اذا كانت تحت حددوها وحركوها خلوها تصير فوق كل الطبقات الثانية

http://dc12.arabsh.com/i/02906/dieiyt4ulht9.jpg

احين ذي الصورة توضح عقب مارتبنا الاشكال الصغيرة يم بعض ,,

http://dc363.4shared.com/img/cPETqYT.../20_online.jpg

نروح لقائمة Animation <--- Windows

http://dc149.4shared.com/img/38rPZFE...503716/1_2.jpg

ذا الصورة توضح شريط الانميشن وفيه فريم واحد ..

http://dc363.4shared.com/img/ga-SgQn...58407/22_3.jpg

احين بنحدد الفريم لي في شريط الانميشن وبنروح

يم كل الطبقات لي فيها شكل احمر وبنشيل العين من يمها عشان تختفي ..

وبس بنترك الطبقة الاولى الي فيها الشكل الاحمر مابنشيل العين من يمها ..

يعني بيصير عندنا الفريم الاول ظاهرة فيه الطبقة الاولى مال الشكل الاحمر ..

عقب هالخطوة بنختار الشكل لي جدامكم وخبرتكم قبل انه لاضافة فريم يديد ..

http://dc363.4shared.com/img/n-VGMMk...73198/23_2.jpg

احين بنكرر نفس الخطوة بمعنى انكم تتبعون الاتي وبالترتيب لازم بالترتيب ..

-اضافة فريم

- وضع العين امام الطبقة الي تحتوي على الشكل الاحمر ..

شلون يعني ..

يعني كل مرة بتضيفون فريم .. بتروحون عند الطبقات الي فيهم الاشكال الحمراء ..

لي شلنا من يمهم العين وبتردون العين امام طبقة واحدة فقط ..

يعني مع كل اضافة فريم نرد عين وحدة ..

ولازم نرد العين يم الشكل الاحمر الي بعد الطبقة الاولى ..

يعني تردون العيون بالترتيب ..

وهالصورة توضح الي الحجي لي قلته ..

http://dc363.4shared.com/img/90WG0QQK/s3/24_online.jpg

وهني عقب ماردينا العيون يم الطبقات بالترتيب مع كل اضافة لفريم نرد عين

http://dc363.4shared.com/img/-7rLzX7...168703/333.jpg

هني تحددون وقت التنقل بين الفريمات ولي متى تبونه يتنقل ..

طبعا هالخطوة وضحتها بالتفصيل بالدروس السابقة عشان جذيه مارح افصلها

http://dc312.4shared.com/img/NIpcbh4...671527/9_2.jpg

وهني تحفظون الصورة من ..save for web and devices <-- File

http://dc312.4shared.com/img/rJRzc-n...26758/10_2.jpg

تـــــــــــــم بحـــــــــــمدالله

المـــــــــوضــــــــوع من مجهـــــــودي الشخصي ..و اي ســـــــــــؤال انا حاضـــــــرة

فـــــــلا تنسوني من صالح دعــــائكم .

اختـــــكم في الله : الهـــــــــام

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

طبقت وشوي معتفس :D
http://www.2zoo.org/get-4-2011-2zoo_org_pdkdba9v.gif

الهام الخلفية تكون بيضاء ليش ما نسوي خلفية شفافة ترانسبرنت :o

انتظر درس جديد بصورة متحركه ;)

شكرا مرة اخرى
الى امام ثورة ثورة :D

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

ماشاء الله ...
معلومه جديده

يعطيك العافيه ع المجهود

دمتي بود

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

بآآآآك بالتطبيق

استخدمت خلفيه شفافه *_^

http://www.2zoo.org/get-4-2011-2zoo_org_hr0hfa41.gif

ان شاء الله يكون صح

فيه سؤال ..
هل اقدر اتحكم في المسافه بين كل مستطيل صغير بطريقه مختصره ودقيقه ؟؟

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

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

اقتباس:

المشاركة الأصلية كتبت بواسطة soul2006 (المشاركة 2102449)

ماشاء الله انت الطالب المثابر عندي ..

تطبق الدروس اول باول ..

وبالنسبة للخلفية الشفافة ..

شيل العين من يم الطبقة الاساسية مال الخلفية

وتصير شفافة ..

موفق اخوي وتطبيقك رائع

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

اقتباس:

المشاركة الأصلية كتبت بواسطة da7om (المشاركة 2102469)

ماشاء الله ...
معلومه جديده

يعطيك العافيه ع المجهود

دمتي بود

ربي يعافيك اخوي

اقتباس:

المشاركة الأصلية كتبت بواسطة da7om (المشاركة 2102506)

تطبيقك جيد .. بس عندك خطأ مفروض مايكون في ظل للمستطيل الكبير ولا للمستطيلات الصغار

وهالشي اثر على شكل الشريط لمن صارت الخلفية موب نفس لون الظل ..

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

وبالنسبة لسؤالك ..اي ممكن تتحكم في المسافة بطريجتين ..

الطريجة الاولى :

اختار من قائمة Grid <-- Show<--- View تحط صح عندها

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

http://dc228.4shared.com/img/dWwxugO.../78_online.jpg

وعقب ماتخلص تسوي نفس الطريجة عشان تشيل ذي الاخطوط ..

من قائمة Grid <-- Show<--- View تشيل الـ صح من عندها

الطريجة الثانية :

بعد ما ترسم اول مستطيل صغير الي بالاصفر ..

اضغط على الطبقة ماله .. بتطلعلك ذي القائمة ..

اختار منها Duplicate layer( مضاعفة الطبقة ) مرة وحدة ..

http://dc12.arabsh.com/i/02906/dieiyt4ulht9.jpg

بعد ما تضعف الطبقة مرة وحدة بيصير عندك مستطيلين صفر ..

الاصلي والي من شوي طلع لمن سوينا مضاعفة للطبقة ..

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

وخلهم يم بعض ..

بعدين اضغط على CTRL وحدد الطبقتين الي فيهم المستطيلات ..

واضغط دبل اكليك رح تطلعلك نفس القائمة ..

اختار منها Duplicate layer( مضاعفة الطبقة ) مرة وحدة

طبعا رح يصير عندك 4 طبقات .. لانك سويت مضاعفة لطبقتين

فكل طبقة تضاعفت مرة فالمجموع النهائي 4 طبقات ..

احين رح تلاحظ انه الطبقتين لسه محددتين

فحرك بالاسهم لي بالكيبورد .. الطبقتين وجذيه بتصير المسافة نفسها ..

وممكن تكررها اكثر من مرة وتضاعف اكثر من طبقتين بنفس الوقت عشان

تطلع المسافة متساوية ..

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

بالتوفيق

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

إلهآم أنا الإصدآر CS5 و هذي الأداة موجودة بس لما أضغط عليها
http://www.2zoo.org/get-5-2011-2zoo_org_nmj0hwtb.jpg

ما يطلعون هذول تطلع أشياء ثآنيه
http://www.2zoo.org/get-5-2011-2zoo_org_dphp6yx2.jpg

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

اقتباس:

المشاركة الأصلية كتبت بواسطة أحبك توتو (المشاركة 2106014)

حبيبتـــــي ذي اداة الشكل التلقائي ..

شنو يطلع لج لمن تضغطين عليها ..؟.

ياليــــت تحطين الصورة عشان اساعدج ..

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

عندي cs5 وظاهرة الاداة

رد: تابع الــــدرس الثالث ( عمل شريط الـLoading بطريقتين ) مدعم بالصور

السلام عليكم ورحمة اللهـ وبركاتهـ .

انقطعت عن التعلم على الفوتو لمدة ليست بالقصيرهـ بسبب بعض الظروف الإجباريهـ . :(

لكن الحمدللهـ رجعت لهـ وبنفس الحماس السابق . :12:

يعطيكـ ربي ألف عافيهـ الهام على مواصلتكـ للمجهود في دروسكـ .

وتم تطبيق الدرس بعد (( الكثير )) من المحاولات :p :

http://www.2zoo.org/get-5-2011-2zoo_org_6kq0bbw2.gif

وراح أتدرب أكثر وأكثر عليهـ وعلى دروسكـ السابقهـ والقادمهـ .:88:

على فكرهـ كل درس أطبقهـ منكـ يتم اضافتهـ فورا للمفضلهـ .:freind:

ألف شكر لكـ ,, وكل التوفيق لكـ .