تصميم صور الأقسام (القوائم) .. الحلقة الخامسة

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

بعد أن قمنا بتصميم الواجهة بشكل عام و الانتهاء منها و تركيبها على الفرونت بيج نأتي لتجميلها و هو بتصميم صور الأقسام ... باسم الله نبدأ :

و ضع القياسات التالية بالخصائص المبينة البارزة :


الآن ضع خلفية العمل بنفس لون خلفية الواجهة ... الآن أنا لون خلفية واجهتي بالكود FFF6F7 المهم إنت لون خلفية العمل بنفس لون خلفية الواجهة عن طريق أداة التعبئة :

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

بعد اختيار الأداة نضغط على خلفية الواجهة و ستجد اللون أصبح جاهزاً و قم بالذهاب إلى منطقة العمل للقائمة و اجعل الخلفية بنفس اللون بأداة التعبئة .... الآن نملك طرق كثيرة لعمل قائمة و هذا على حسب ذوق المصمم و لكن احنا سنقوم بتطبيق عمل مناسب بإذن الله للواجهة .... اختر أداة التحديد المربعة :

الآن ارسم تحديد في منطقة العمل بنفس حجم منطقة العمل و لكن قم بتصغيره بعض الشيء كما في الصورة :

الآن من قائمة Select اختر Modify و من ثم Smooth كما في الصورة :

اختر القيمة (4) بكسل و اضغط Ok و من ثم ستصبح حواف التحديد بشكل ملتوي (غير حادة) .... الآن و قبل كل شيء في منطقة الطبقات (Layers) على اليمين في الأسفل أنشئ طبقة جديدة بالضغط على Ctrl + Shift + N و من ثم Ok أو من منطقة الطبقات نفسها كما في الصورة :


اضغط على صورة الطبقة المحددة و سيتم إنشاء طبقة جديدة أعلى طبقة الخلفية و الآن و ما زال التحديد موجود بالطبع ... اضغط كلك يمين على التحديد و اختر Stroke كما في الصورة و لا تنسى أن التحديد ما زال موجود و الأداة هي أداة التحديد :


الآن اختر لون أغمق من لون الخلفية و يكون لون غامق كألوان أعمدة الواجهة عن طريق الضغط على مربع اللون و اختيار اللون المناسب و العرض = (1) بكسل كما في الصورة مع الخصائص المبينة البارزة :


الآن و بعد الانتهاء من هذه الخطوة ... نلغي التحديد بالضغط على Ctrl + D و من ثم نضغط مرتين على الطبقة (لا تضغط على اسمها) التي قمنا بإنشائها و هي طبقة التحديد الكلي للتصميم و من ثم ستظهر نافذة خصائص الطبقة ... على اليسار توجد خاصية باسم Outer Glow قم باختيارها و من ثم قم بعمل الخصائص المبينة و البارزة في الصورة التالية .. بالطبع اللون قم باختياره متناسق و غامق :


الآن قم بإنشاء طبقة (Layer) جديدة و لكن ضعها أسفل طبقة التحديد الكلي التي أنشأناها مسبقاً كما في الصورة :


الآن قم برسم مستطيل أفقي بأداة التحديد المربعة كما في الشكل :

أهم شيء ما يكون كبير كثير أفضل ... بعد ذلك اختر أداة التدرج :


إذا لم تجدها فهي موجودة مع أداة التعبئة اضغط على أداة التعبئة باستمرار و ستظهر لك أداة التدرج قم باختيارها ... الآن في الأعلى توجد منطقة التدرج كما في الصورة التالية :

اجعل اختيار التدرج على أول اختيار الأفقي البارز في الصورة ... و من ثم اضغط على منطقة التدرج التي تم توضيحها بالصورة ... ستظهر لك نافذة اختيار ألوان التدرج كما في الصورة :


في الصورة تم توضيح كيفية إضافة لون آخر او تعديل لون و هذا على حسب الأذواق ... بعد اختيار الألوان و إنشاء تدرج لوني بشكل يناسبك و يناسب التصميم بألوان من ألوان التصميم المتناسقة نقوم بالضغط على زر Ok ... الآن و ما زال التحديد موجود و ما زلنا باختيار الطبقة الموجود أسفل طبقة التحديد الكلي و هي التي أنشأناها أخيراً نقوم بعمل التدرج داخل التحديد إما من الأعلى للأسفل أو العكس و أنا قمت برسمه من أسفل لأعلى عن طريق السحب من أول التحديد لآخر التحديد و لكن من الجهة السفلى و أصبح الشكل هكذا :

تستطيع السحب بعد الضغط على مفتاح Shift للسحب المستقيم حتى يكون التدرج مستقيم و مفتاح Shift استخداماته لجعل أي حركة نريدها مستقيمة ... الآن نضغط Ctrl + D لإلغاء التحديد ... أنشئ طبقة جديدة فوق طبقة التدريج و أسفل طبقة التحديد الكلي أي بينهم (قبل الأخيرة) ... نقوم باختيار أداة التحديد و نرسم مستطيل صغير أفقي كما في الصورة :


نقوم باختيار أداة التدرج مرة أخرى و نرسم تدرج بالألوان اللي تعجبنا و لو تكون أغمق بقليل من الألوان التي استخدمناها بالتدرج الأول ... نقوم برسم تدرج للمستطيل و نلغي التحديد و نضغط مرتين على طبقة المستطيل (لا تضغط على اسم الطبقة) و من ثم ستظهر لنا خصائص الطبقة و على اليسار نقوم باختيار خاصية Stroke و من ثم نقوم بعمل الخصائص التالية و اللون يكون غامق بعض الشيء أفضل :


و من ثم اضغط Ok ... الآن نقوم بتكرار طبقة المستطيل هذا الصغير بالضغط على Ctrl + J ... و من ثم نضع الطبقة التي تظهر لنا أسفل الطبقة الأصلية أي تكون أسفل طبقة المستطيل الأول و أعلى طبقة المستطيل الكبير و نقوم بحسب المستطيل الأخير المكرر للأعلى بعض الشيء بمفاتيح الكيبور (أعلى - أسفل - يمين - يسار) ... سيصبح الشكل هكذا :


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

أهم شي تكون الطبقة فوق طبقة المستطيلات جميعها الثلاثة ... الآن من قائمة Select اختر Modify و من ثم Smooth بقيمة (4) بكسل و اضغط Ok ... اختر أداة التعبئة و اختر لون فاتح مناسب و قم بتعبئة التحديد ... اضغط Ctrl + D لإلغاء التحديد ... الآن اضغط مرتين على طبقة هذا المستطيل لإظهار خصائصها و قم بعمل الخصائص التالية و جميعهم باختيار ألوان غامقة بعض الشيء و كما هو مبين و بارز بالصور التالية :

Stroke :

Outer Glow :

Inner Glow :


و من ثم نضغط Ok ... الآن أصبح لدينا العمل من الأعلى جاهزاً كما في الصورة :


بعد ذلك يمكننا إضافة بعض التأثيرات الجميلة كالصور الجاهزة عن طريق اختيار أداة النجمة (الخاصة بالصور) :

و من ثم من الأعلى نقوم بالضغط على السهم المبين بجانب منطقة الأشكال كما في الصورة و نقوم باختيار السهم الموجود بالدائرة و من ثم All :

ستظهر لك نافذة اضغط على Ok ... الآن نقوم باختيار الشكل الذي نريده عن طريق الضغط على السهم كما وضحنا بالصورة السابقة و بعد اختيار شكل من الأشكال نقوم برسمه في المكان الذي يناسبنا و أنا قمت برسم الشكل في المنطقتين على اليمين و اليسار كما في الصورة :


بعد رسم الشكل ستظهر لك طبقة تلقائيا خاصة بالشكل لذلك اضغط عليها بالزر الأيمن (كلك يمين) و اختر Resterize Layer ... و من ثم اضغط مرتين على الطبقة و أعطِ الشكل الخصائص التي تناسبك ... الآن نقوم بالضغط على طبقة الخلفية و هي أول طبقة في الأسفل و من ثم ننشئ طبقة جديدة و نبدأ بالعمل في الأسفل ... و الآن الدور عليكم للعمل في الأسفل على ذوقكم و هذا ما قمت بعمله في الأسفل :


أي قمت برسم مستطيل صغير لعمل نهاية في الأسفل للقائمة ... الآن و الخطوة النهائية كما نرى أن هناك على الحواف خارج التحديد الكلي الصور و المستطيلات التي قمنا بعملها تظهر و هذا يعطي شكل غير لائق للقائمة كما ترى في الصورة :


الآن نقوم باختيار أداة التحديد دون إنشاء طبقة جديدة و نرسم مستطيل من الأعلى للأسف كما في الشكل :

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

الآن و ما زال التحديد موجود نبدأ باختيار الطبقة الموجودة فوق طبقة الخلفية من الأسفل و من ثم نضغط مفتاح Delete و من ثم نقوم باختيار الطبقة التي تليها و نضغط مفتاح Delete إلى أن نصل إلى الطبقة الأخيرة و هي طبقة التحديد الكلي لا نقوم بالصغط على مفتاح Delete ... الآن نقوم بنقل التحديد إلى الجهة اليمنى و بنفس الطريقة إلى أن ينطبق على التحديد الكلي و نبدأ من الطبقة الموجودة فوق طبقة الخلفية مرة أخرى و نقوم بالضغط على مفتاح Delete و هكذا ... الآن ما قمنا بعمله هو حذف الزوائد الموجودة خارج التحديد و أصبح الشكل كالتالي :


الآن نلغي التحديد Ctrl + D ... بعد ذلك نرسم مستطيل أفقي كما في الصورة :


الآن نسحب المستطيل للأعلى إلى أن ينطبق على التحديد و نقوم بعمل نفس الطرق السابقة تمام بواسطة الضغط على مفتاح Delete و من ثم نسحبه للأسفل و بنفس الطرق أيضاً ... أخيراً نضغط Ctrl + D لإلغاء التحديد ... الآن على حواف التحديد الكلي و خاصة في الأسفل نجد زوائد مثل زوائد المستطيل كما ترى في الصورة التالية :

الآن نقوم باختيار طبقة المستطيل السفلي و من ثم نقوم باختيار أداة الممحاة :


و من ثم نقوم بمسح الزوائد ... و الزوائد صغير نوعاً ما لذلك انتبه بالمسح حتى لا تمسح المستطيل من الداخل ... الآن أصبح هذا هو الشكل النهائي :

لآن ما علينا سوى إنشاء طبقة جديدة بعد طبقة الخلفية مباشرة و اختيار أداة التحديد المربعة و من ثم رسم عامود بحجم بكسل واحد و بحيث يكون في نفس المكان المبين كما في الشكل :


الآن نقوم بالضغط على الزر الأيمن للماوس (كلك يمين) و من ثم اختر Stroke و اجعل الحجم (1) بكسل و اللون غامق بعض الشيء و اضغط Ok ... الآن قم بعمل تكرار للطبقة Ctrl + J و انقلها إلى الجهة المقابلة و سيصبح لدنيا هذا الشكل و هو الشكل النهائي للقائمة :

أتمنى أن أكون قد وفقت في هذا الشرح و إن كان هناك أي خطأ إملائي أو في الشرح فالعذر من الله ثم منكم إخواني ... أتمنى لكم التوفيق ... انتظرونا في حلقة جديدة ... شكراً لكم ... و السلام عليكم
منقووووووووول للفائده

يعطيك العافية امجد على الشرح

ومشكور عـ الموضوع

,,
,
يعطيكـ الف عافيه اخوي
بارك الله فيك
وعساك عالقوه دوم يارب

يعطيك ربي الف عافيه

www.zf-15.com
www.mrr7.com

مشكوررر اوى ليك ياخى على الموضوع الاكثر من رائع
وبارك الله فيك موفق يا اخى الكريم ان شاء الله

جزاك الله كل خير