تويت
[frame="10 90"]
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
تصميم قائمة بتأثير الجلوسي فى فوتوشوب 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%
وبذلك إنتهينا ويمكننا بعد ذلك إستخدام الزر وتكراره بالنسخ للعدد الذى نريد ونضيف المسميات مثل الشكل التالى وهو العمل النهائي
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
[/frame]
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
تصميم قائمة بتأثير الجلوسي فى فوتوشوب 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%
وبذلك إنتهينا ويمكننا بعد ذلك إستخدام الزر وتكراره بالنسخ للعدد الذى نريد ونضيف المسميات مثل الشكل التالى وهو العمل النهائي
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
تعليق