الدرس مفصل الاول ( تصميم البنر +تصميم الفوتر + الازرار ) تصميم ستايل style للمبتدئين

[walid]

http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط¯ط±ط³ ط§ظ„ط§ظˆظ„ ( طھطµظ…ظٹظ… ط§ظ„ط¨ظ†ط± +طھطµظ…ظٹظ… ط§ظ„ظپظˆطھط± + ط§ظ„ط§ط²ط±ط§ط± ) طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ظ„ظ„ظ…ط¨طھط¯ط¦ظٹظ† (http://www.dzbatna.com/t1096316/)




http://i164.photobucket.com/albums/u23/shahryar2000/alsalam.gif

اللهم صل على محمد وعلى آله وصحبه أجمعين




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

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


رابط الموضوع الأصلي
http://www.a4rb.com/vb/showthread.php?t=1750


الدورة عبارة عن الاتي :-

الدرس مفصل الاول : وهو عبارة عن تصميم استايل style مكون من بنر + فوتر + الازرار
الدرس مفصل الثاني : وهو عبارة عن طريقة تقطيع الاستايل style ومن ثم تركيب installة علي المنتدى forum


سنبدأ اليوم ان شاء الله بالدرس مفصل الاول وهو مكون من بنر + فوتر + الازرار
واتمني اشوف تفاعل مع الدورة حتي اقوم بتكملة الدورة والبدء ان شاء الله بالدورة الثانية وهيا راح تكون
عبارة عن تصميم احترافي متعدد الالوان ويشمل بنر وفوتر ملئ بالمنحنيات والاضافات الحركية


لنبدء علي بركة الله

شكل البنر النهائي ان شاء الله سيكون كالتالي

http://www.a4rb.com/style/20.jpg

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

http://www.a4rb.com/style/1.jpg

ثم قم بتحديد لونين مختلفين علي زوقك انت

مثال

http://www.a4rb.com/style/2.jpg

طبعا يفضل يكون لون غامق ولون فاتح

طيب نبدء باختيار الاداة

http://www.a4rb.com/style/3.jpg

ومن ثم نبدء برسم مستطيل البنر

http://www.a4rb.com/style/4.jpg

طيب نعمل الان تأثير بسيط عالبنر
من هنا

http://www.a4rb.com/style/5.jpg

نختار تدرج لوني بين الغامق للفاتح

http://www.a4rb.com/style/6.jpg

بعد اضافة التأثير اصبح الشكل هكذا

http://www.a4rb.com/style/7.jpg

طيب نروح نعمل مستطيل صغير

http://www.a4rb.com/style/8.jpg

ونخلية تحت البنر بشوي

http://www.a4rb.com/style/9.jpg

ومن ثم نروح فوق المستطيل الصغير ونعمل نفس الشكل التالي

http://www.a4rb.com/style/10.jpg

ثم فوقة نعمل

http://www.a4rb.com/style/11.jpg

طيب حتي الان احنا مشيين تمام

نروح نضيف بعض الازرار بالبنر بالاعلي او بالاسفل
وهذا يرجع الي زوقك انت

مثال : تطبيق بسيط علي البنر

http://www.a4rb.com/style/12.jpg

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

http://www.a4rb.com/style/13.jpg

طبعا كل مصمم ولة زوقة الخاص وفكرتة الخاص
حاول ان لاتطبق نفس التطبيق بظبط
ولاكن حاول تطبق الفكرة ولاكن بزوقك انت


يجي الان دور تركيب install الصور

اطلع بصورتين من جهازك
ولنبدء بتركيب installة الصورة الاولي بيمين البنر

مثلا انا اختارت الصورة التالية

http://www.a4rb.com/style/14.jpg

طيب اسحبها فوق البنر ومن ثم قم بدمجها بالبنر

http://www.a4rb.com/style/15.jpg

ومن ثم اختار الاداة

http://www.a4rb.com/style/16.jpg

ولا تنسي تختار لون البنر من القائمة

http://www.a4rb.com/style/2.jpg

ولنبدء باستخدام الاداة بظبط الوان الصورة لتتناسق مع البنر

قم بسحب الاداة بخط مستقيمة من الشمال لليمين

شوف الصورة

http://www.a4rb.com/style/17.jpg

قم بسحب الاداة بخط مستقيمة من الشمال لليمين

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

http://www.a4rb.com/style/18.jpg

شوف الان شكل الصور بعد تنسيقها بالبنر

http://www.a4rb.com/style/19.jpg

الان قم بتطبيق نفس الشئ مع الصورة الثانية
وقم بوضع بعض من لمساتك الجيدة
ومن ثم قم بالمتابة علي البنر
لينتج معك البنر بالشكل التالي

http://www.a4rb.com/style/20.jpg

هكذا انتهينا من البنر

لنبدء بالفوتر وهو بسيط وسهل جدا

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

http://www.a4rb.com/style/3.jpg

ومن ثم نقوم برسم مستطيل اسفل الفوتر

http://www.a4rb.com/style/21.jpg

ثم قم بأختيار الاداة التالية من القائمة

http://www.a4rb.com/style/22.jpg

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

http://www.a4rb.com/style/23.jpg

ثم قم من القائمة بالاعلي اختار

http://www.a4rb.com/style/24.jpg

ثم

اكتب 20

http://www.a4rb.com/style/25.jpg

ثم قم بتلوينة لينتج لديك الشكل هكذا

http://www.a4rb.com/style/26.jpg

الشكل النهائي مع منطقة التمدد

http://www.a4rb.com/style/27.jpg

هكذا انتهي الدرس مفصل الاول

انتظرونا بالدرس مفصل الثاني ان شاء الله

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

وانتظر تطبيقاتكم بفارغ الصبر


لتحميل صور الشرح طريقة او صور الدرس مفصل علي جهازك

فقم بتحميلة

اضغط هنا لتحميل صور الدرس مفصل (http://www.a4rb.com/style/style.zip)


رابط الموضوع الأصلي
http://www.a4rb.com/vb/showthread.php?t=1750


جميع الحقوق محفوظة لدي المبدعين العرب

تقبلوا تحياتي






التعديل الأخير كان بواسطة a4rb.com; 16 - 01 - 2014 الساعة 03:53

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©