[ تصميم الواجهات ]... [ الدرس الاول ]كيفية تصميم الواجهه بالفوتشوب [الجزء الثالث]

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


بدأنا منذ فترة في تصميم واجهه موقع وبالتفصيل الممل بفضل الله تعالي


وأتفقنا ان هذه الواجهه سنجعلها يعدل عليها بالفرنت بيج..


لذلك راعينا الكثير أثناء التصميم


وقد تم طرح المزيد من الدروس
[ تصميم الواجهات ]... [ الدرس الاول ]كيفية تصميم الواجهه بالفوتشوب [الجزء الأول]
[ تصميم الواجهات ]... [ الدرس الاول ]كيفية تصميم الواجهه بالفوتشوب [الجزء الثاني]


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


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


ولنبدأ الدرس وكلي أمل في تطبيقككم


أولاً أفتح الفوتوشوب ثم أختر الاداة الموضحة بالشكل التالي





أرسم مستطيل كما بالشكل التالي ويكون حجمه متناسب مع المستطيل الذي بالصورة





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





الان أختر إداة المربع ذو الحواف المنحنية كما بالصورة





أرسم شكل .. كما بالصورة التالية علي ان يكون تحت المستطيل الذي رسمناه .. طبعاً تنزلة بالاسفل من خلال نافذة الليرات





طبق الان عليه الاعدادات التالية بالضبط








الان أصبح الشكل كما بالصورة ..





بنفس الاداة نرسم شكل أخر ولكنه أصغر .. كما بالصورة القادمة بالضبط





وطبق عليه الاعدادات التالية







ليصبح الشكل بهذا المظهر اللامع وتدرج جميل





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





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





طبق عليه الاعدادات كما بالشكل .. والاعدادات طبقناها بالشكل العلوي ..





الان علينا بعمل أزرار بداخل القوائم .. قم بعمل مستطيل داخل القائمة كما بالشكل





الان طبق عليه أعدادات كما نطبقها دائماً مثل أعلي القائمة أو أي أعداد يعجبك ويكون مظهره حلو
وسيظهر لك كما بالصورة





الان كرر الطبقات الخاصة بالزر ووزعها لحين تحصل علي الشكل التالي





أدمج طبقة القائمة بكاملها .. ثم كرر الطبقة الخاصة بالقائمة ثم أنقلها لليمين كما بالشكل





الان قم بعمل قائمة بالمنتصف مثل ما قمنا بعمل القائمة اليسري ولكن لاحظ بمقاسات أكبر قليلاً..كما بالشكل





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





الان انتظر التطبيقات واتمني يكون الدرس واضح.. واستعدوا لدرس التقطيع القادم بأمر الرحمن


أخوكم
Abo_ELleal

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

تسلم لي على هالابداعات

ومنتظرينك وكما تعودنا ان نرى منكـ الجديد

والى الامام يالغالي

اخوك فهمي عبدالله