تصميـم موقِـع إحترافـي كـامِل (الجزء الثـاني2 : القائمة) حَصريـاً لديزاد باتنة .. }

[linnou]

بَعد الصلاة والسَلام على خَير الأنام ..
موعِـدنـا اليَوم مع الجُزء الثـاني من درس مفصل تصميم واجهة interface إحتـرافية وهو الجُزء المُختص بتصميم القائمة
وهذا هو الجُزء الأوّل ([درس مفصل] تصميـم موقِـع إحترافـي كـامِل (الجزء الأول:الهيدر header) حَصريـاً لديزاد باتنة .. } (http://dzbatna.net/vb/showthread.php?t=1219390))
الدرس مفصل حَصري لمعهَد ديزاد باتنة .. وهذه هي النتيجة النِهــائية للدرس مفصل :
http://des-max.net/upload//uploads/images/design-4a2abc980f.png
تـابعوا معَنـا ..
نقوم بتحديد مستطيل عن طريق هذه الأداة http://des-max.net/upload//uploads/images/design-a086728b58.png كما في الصورة
http://des-max.net/upload//uploads/images/design-0d03366b93.png
ثُم بإستخدام نفس الأداة نضغط على زر Alt في الكيبورد ثُم نُزيل هذا الجُزء من المستطيل اللي حددناه كَمـا بالصُورة
http://des-max.net/upload//uploads/images/design-d66350af38.png
نطبّق Select>Modify>Smooth ونظبط الإعدادات كَمـا بالصُورة ..
http://des-max.net/upload//uploads/images/design-12f68c8aff.png
ننشىء مُجلد جديد في قائمة الـ Layers لكي ننظم مـا نفعلُه ..
http://des-max.net/upload//uploads/images/design-d8488cc265.png
نقوم بعمَل New Layer ونملء المستطيل اللي حددناه بأي لون ونظبط إعدادات الـ Blending Options كمـا الآتي ..
http://des-max.net/upload//uploads/images/design-3bb4eeea72.png
http://des-max.net/upload//uploads/images/design-9ae040fc42.png
ثُم نقوم بعمَل Zoom in عن طريق Ctrl + حتى نَصِل إلى هذه الصُورة ..
http://des-max.net/upload//uploads/images/design-c7a9b584ee.png



نقوم بتحديد مستطيل كَمـا بالصُورة عن طريق هذه الأداة
http://des-max.net/upload//uploads/images/design-c98d1bfc16.png
نقوم بتدوير المستطيل عن طريق Select>Transform Selection ..
http://des-max.net/upload//uploads/images/design-2cc4537a9c.png
نرسِم مربّع بلون أغمَق من لون القائِمة ..
http://des-max.net/upload//uploads/images/design-b2ddfe014b.png
ونضعـه في هذا المَكـان بقائمة الـ Layers ..
http://des-max.net/upload//uploads/images/design-a9d1dd6631.png
نضغَط ضغطة باليمين بالماوس على الـ Layer تبع المربّع ونختَـار Rasterize Layer ..
والآن نقُوم بالضغط على زر Delete بالكيبورد ونحرّك المثلث النـاتِج مرة للأسفَل ومرة لليسـار ويكون هذا الشَكل النِهـائي ..
http://des-max.net/upload//uploads/images/design-653c18a5a3.png
نحدد مستطيل كما بالصورة ..
http://des-max.net/upload//uploads/images/design-f65efbaa7c.png
نطبّق Select>Modify>Smooth ونظبط الإعدادات كَمـا بالصُورة ..
http://des-max.net/upload//uploads/images/design-7ea2b5794d.png
نملء المُستطيل بلون فاتح قليلاً عن لون القائمة ونضعه فـي هـذا المَكـان في قَـائِمة الـ Layers
http://des-max.net/upload//uploads/images/design-160a2c8fda.png
ثُم نطبّق إعدادات الـ Blending Options كمـا بالآتي ..
http://des-max.net/upload//uploads/images/design-ba6e364630.png
وهذا الشَكل إلى الآن ..
http://des-max.net/upload//uploads/images/design-234e74b900.png
نقُوم بتحديد شَكل القـائِمة عن طريق الضغط على Ctrl و نقرة بيسار الماوس على الـ Layer تبع القائمة ..
http://des-max.net/upload//uploads/images/design-de969c1a38.png
نزيل بـاقي التحديد ونكتفي بهذا الشَكل عن طريق Alt + تحديد
http://des-max.net/upload//uploads/images/design-edfacde7fc.png
نملء الشكل باللون الأسوَد .. ونقوم بتكبيره قليلاً عن طريق شد الأحرف Ctrl+T ..
http://des-max.net/upload//uploads/images/design-acf099e064.png
نطبّق Filter>Blur>Gaussian Blur ونظبط الإعدادات كَمـا بالصورة ..
http://des-max.net/upload//uploads/images/design-8e54f0678b.png
نقوم بإستخدام الممحاة http://des-max.net/upload//uploads/images/design-225e176c24.png ونختار هذه
http://des-max.net/upload//uploads/images/design-e36334840f.png
نمسَح قليلاً مِن الشَكل الأسود اللي سويناه ونخفف ظهوره إلى 60% لكي يكون شكله هكذا ..
http://des-max.net/upload//uploads/images/design-315f5ae958.png
نرسم مستطيل أسود صغير ونأتي عند أحد أحرفه ونضغط Ctrl مع الضغط بزر الماوس الأيسر والتحريك إلى أن يصبح شكله هكذا ..
http://des-max.net/upload//uploads/images/design-87dbfb376e.png
نطبّق إعدادات هذا الشكل كَمـا بالآتي ..
***
نضَع مكـانه في قائمة الـ Layers هُنـا ..
http://des-max.net/upload//uploads/images/design-d1a6428722.png
ونضعه في مكـانه على القائمة ( يسـارها ) ثُم نرسم مستطيل بالعرص بلون رمادي فاتح ونلصقهم ببعض كَمـا الشَكل ..
http://des-max.net/upload//uploads/images/design-a583558f5b.png
http://des-max.net/upload//uploads/images/design-679a0e66e4.png
نكرر اللي سويناه مرة أخرى
http://des-max.net/upload//uploads/images/design-d89e0d4789.png
والآن إنتهيـنا وبقى فقَط الكِتـابة ونستخدم أي خطوط نريدها ويفضّل باللون الأبيَض بدون تأثيرات ..
وهذا الشَكل النِهـائي ..
http://des-max.net/upload//uploads/images/design-3215c02ea4.png
يعلَم الله تعبي على ها الدَرس ..
عِند النَقل يُرجى ذكر المَصدر ..
كتَبهُ Ahmedesign (http://dzbatna.net/vb/member.php?u=32778) حصريـاً لمعهَد ديزاد باتنة (http://dzbatna.net/vb) التطويري ..
ومَـاكان من توفيقٍ فَمِن الله وحده وما كان من خطأٍ أو سهوٍ أو نسيـان فمنّي ومِن الشَيطان ..
بإنتـِظار تطبيقـاتكُم ..
أخوكُم // ميدو ,
السَلامُ عَليكُم ..




الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Lesson-2.zip (http://www.traidnt.net/vb/attachments/378076d1243670611-lesson-2.zip) (710.4 كيلوبايت, عدد مرات المشاهدة 220 مرة)


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