تصميم قائمة للموقع بتأثير لامع فى فوتوشوب Glossy Menu Bar

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

تصميم قائمة بتأثير الجلوسي فى فوتوشوب glossy menu Bar

حياكم الله جميعا

سنشرح اليوم تصميم قائمة لمواقع الويب مع أزرار بها تأثير لامع رائع سيظهر جماله أكثر عند إستخدام أكواد CSS لإضافة تغير التأثير عند اللمس مثلا أو بتأثيرات الجافا الرائعة

ويمكن الإستفادة من الشروحات السابقة للحصول على الأكواد البرمجية لذلك .

نبدأ الشرح على بركة الله

1- نقوم بإنشاء طبقة جديدة وبإستخدام أداة التحديد ( Rectangular Marquee Tool ) نقوم بإنشاء مستطيل بحجم القائمة الذي نريد ونملئها باللون الرصاصي ( 272727#) أنظر الشكل أدناه .

2- نقف على الطبقة ومن خيارات Blending Options نضيف هذه القيم

سنحصل على هذا الشكل

3- نقوم بإنشاء طبقة جديدة ونرسم خطين باللون الأبيض حجم 1 بيكسل كما يوضح ذلك الشكل التالي :

ثم نجعل الشفافية Opacity=10%

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

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

5- لإنشاء الأزرار نقوم بإنشاء طبقة جديدة ونستخدم أداة التحديد الدائرية Rounded Rectangular Tool ونجعل قيمة الدوران (Radius = 5px ) ونرسم زرار كما فى الشكل التالي :

6- نقف على الطبقة ومن خيارات Blending Options نضيف هذه القيم :

وسوف نحصل على هذه النتيجة

7- نقوم بإضافة طبقة جديدة ونرسم نفس الشكل السابق ولكن داخل الشكل الأول ( أصغر قليلا )

8- نقف على الطبقة ومن خيارات Blending Options نضيف هذه القيم :

سوف نحصل على الشكل التالي :

9- نقوم بإضافة لمعة الزجاج كما تعلمنا فى السابق وذلك بتحديد هذه الطبقة وقطع التحديد نصفين ثم نملئ الطبقة باللون الأبيض هكذا :

نجعل الشفافية Opacity=10%

وبذلك إنتهينا ويمكننا بعد ذلك إستخدام الزر وتكراره بالنسخ للعدد الذى نريد ونضيف المسميات مثل الشكل التالى وهو العمل النهائي

أتمنى لكم جميعا الفائدة من هذه المشاركة

ولاتنسونا من صالح دعائكم

_________________