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







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

 بعد أن قمنا بتصميم الواجهة بشكل عام و الانتهاء منها و تركيبها على الفرونت بيج نأتي لتجميلها و هو بتصميم صور الأقسام ... باسم الله نبدأ : افتح الفوتوشوب (لا تنسى كاسة الشاي ) و من ثم اذهب لقائمة File و اختر New كما في الصورة :

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

الآن ضع خلفية العمل بنفس لون خلفية الواجهة ... الآن أنا لون خلفية واجهتي بالكود 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 و انقلها إلى الجهة المقابلة و سيصبح لدنيا هذا الشكل و هو الشكل النهائي للقائمة :

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

http://www.traidnt.net/vb/showthread.php?p=9799456#post9799456


الحلقة الاولي __ الحلقة الثانية __ الحلقة الثالثة __ الحلقة الرابعة _ الحلقة الخامسة _ الحلقة السادسة_ الحلقة السابعة__ الحلقة الثامنة