:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع)

Admin عدد الرسائل : 15 تاريخ التسجيل : 21/11/2007

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

والصلاة والسلام على اشرف الانبياء والمرسلين سيدنا محمد

عليه افضل الصلوات والتسليم

اولا احب ان اقدم اعتذاري عن تأخري عن اكمال الدروس

حقوق الدرس محفوظة للأستاذ المعاقب

واليوم اعود لكم بالدرس الرابع من هذه الدوره وهو من اطول دروسها

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

سأقوم بتقسيم هذا الدرس الى قسمين الاول (ما تبقى من الوسط)
الثاني (القوائم )

لنقل بسم الله ونبدا

اختر اداة البن توول :::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

ارسم شكلا حسب الصوره بالاسفل او اي شكل حسب ذوقك

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان قم بالضغط بأستمرار على كل نقطه مع ALT واجعل تحديد الزوايا بشكل منحني

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان لنقم بوضع بعض التعديلات على الخصائص

اذهب الي Blending options
وضع هذه الاعدادات

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

ملاحظه: بالنسبة للألوان عند الـ Drop shadow اختر لون فاتح قليلا وعند Inner Glow
اختر لون اغمق

الان قم بتكرير اللير وضعه اسفل اللير السابق (فوق الخلفية مباشره )

واختر Layer>>Layer style>>clear لمسح الاعدادات السابقه عن اللير الجديد

اضغط على Ctrl+t وقم بتكبير حجمه قليلا وجعله على طول الواجهة

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان لنقم بأعطائه الخصائص التالية

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

واجعل الشفافيه 58%

الان قم بتكرير اللير واضغط على Ctrl+T ثم
Edit>>>transform>>>flip horizontal

وضعه في الجهة المقابله

ملاحظة مهمه: ادخل على خصائص اللير الاول (الصغير) وعدل التالي
Drop Shadow غير الـ Angel من 180 الى صفر

وايضا خصائص اللير الثاني( الكبير)
Inner Shadow عدل الـ Angel من صفر الى 180

الان قم بتكرير لير الخلفية الاصليه وضع له هذه الخصائص

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان لننتقل الى القسم الثاني من الدرس وهو القوائم

طبعا هناك عدة افكار بالنسبة للقوائم وكل مصمم وافكاره

ورايت فكره اعجبتني (فوكس) واحببت ان اطبقها في هذا الدرس مثلا انا اخترت الشكل الدائري

ولكن انت تستطيع ان تختار الشكل الذي تريد ....

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

وضع له هذه الخصائص:
:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

وهذه النتيجه

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

والان اختر اداة البن توول وارسم شكلا على ان يكون مطابقا لشكل القائمة كالتالي:

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان لنقم بوضع الاعدادات التالية للشكل الجديد
:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان قم بأختيار احد الاشكال للتصميم مثلا هذا

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

وضعه على زاوية القائمة ولتقم بوضع الخصائص التالية لهذا الشكل

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الان كرر اللير واقلبه وضعه على جميع الاشكال الخاصه بالقوائم

وهذه هي النتيجة.....
:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

لنقم بالعبث قليلا بالمنتصف :::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Bleh

اختر اداة رسم المربعات
:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

ولنرسم شكلا مربعا

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

ضع اللير اسفل جميع الليرات وفوق الخلفية وضع له هذه الخصائص

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

الشفافية 100%

ثم Filter>>disort>>zig zag

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

ثم كرر الفلتر من 4 الى 6 مرات بالضغط على Ctrl+F

لنقم الان بصنع مربع غير اخر اصغر من السابق واعطائه هذه الخصائص

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

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

Filter>>disort>>Twirl

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

اختر ما شئت من الاشكال وزين اطراف اخر مربع قمنا برسمه

وهذه هي نتيجة درس اليوم

:::4:::درس تصميم [الوسط+القوائم](دورة تصميم واجهة موقع) Pic

اتمنى ان اكون قد وفقت في الشرح

واي استفسار انا جاهز الدرس طويل شوي ومتعب

لكن العلم بيحتاج تعب

يلا وروني تطبيقاتكم اخواني

والسموحة على القصور

دمتم بكل ود

^__^