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

[abohmam]

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

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

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

http://www.abc4web.net/upload/images2/5ji6amon0xf1jqu.jpg (http://www.abc4web.net/upload/)


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

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

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

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

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

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

http://www.abc4web.net/upload/images2/mscpoltbdb6qjnc.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/twqfkfsoyzexzas.jpg (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/cuzn0btelrvkdux.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/z1yyg6pjistv5jd.gif (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/4nbffhiosqeouvx.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/aztgwpvnyztqh1k.gif (http://www.abc4web.net/upload/)

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


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

http://www.abc4web.net/upload/images2/vlmok9katjysqwj.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/64ocourwgfbqfnn.jpg (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/jtxuuts74on6ntv.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/0wevmvnd0lkpsmh.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/jlvvhplz09wza2i.jpg (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/xwgobi7jptstof7.gif (http://www.abc4web.net/upload/)


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

http://www.abc4web.net/upload/images2/zjo6x0il0igyg7r.gif (http://www.abc4web.net/upload/)

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

http://www.abc4web.net/upload/images2/slbrvk4ztmkqtqf.gif (http://www.abc4web.net/upload/)


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


http://www.abc4web.net/upload/images2/5ji6amon0xf1jqu.jpg (http://www.abc4web.net/upload/)


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

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

:fasel6:
أبوهمام
.

[أبو يوسف]

:teslam:

جزاك الله خيرا اخي ابو همام ؛ سأحاول التطبيق إن شاء الله

.

[أبو الوليد]

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

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

جزاكم الله خيرا اخوانى

أشكر لكم مروركم العطر وتواصلكم الجاد ودعائكم

موفقين دائما لما فيه الخير

[إُلقنـآصّ]

جزاك الله خيرا اخي ابو همام

[أبو فارس]

موفق بإذن الله ... لك مني أجمل تحية .

[غريب يا فؤادي]

درس قمة في الروووووعه

جزاك الله عالي الجناااااان