شرح طريقة تصميم زر ويب 2.0

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


قد استخدمت خلال عمل الشرح فوتوشوب CS3
1. افتح الفوتوشوب وقم بإنشاء ملف جديد.
2. قم بإنشاء شكل مستطيل بحواف دائرية للزر الذي سوف تقوم بتصميمه مع تحديد استدارة الحواف او Radius كما تحب.

3. قم باستخدام زر الفأرة الايمن على طبقة المستطيل من قائمة الطبقات او Layers واختيار Blending Options

4. اضبط خيار Gradient Overlay كما تحب ولك حرية الاختيار اما انا فقد
اخترت الالوان الاتية اللون الاول والثاني 434343 والثالث 000000

5. يمكنك وضع عمل خط خارجي او Stroke باللون 363636

6. اضبط اعدادات Inner Glow كما بالصورة

7. عد عمل هذه التغييرات يجب ان يكون الشكل مشابه للتالي

8. ارسم مستطيل صغير مشابه وداخل المستطيل الاول كما بالشكل التالي ولنطلق عليها اسم glare

9. باستخدام زر الفأرة الايمن على طبقة glare ثم نختار Rasterize Layer ثم من قائمة الادوات اختر Edit in Quick Mask Mode

10. اختر Gradient Tool من قائمة الادوات ونفذ التأثير التالي

11. بعد الخروج من الـ quick mask mode بالضغط على الايقونة مرة اخرى
سوف يتم تحديد جزء قم بمسحه بالضغط على زر Delete من المفترض ان تحصل على
الشكل التالي

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

وبس انتهى الدرس

منقول من
http://www.solaf.cc/2009/03/11/how-to-create-web-2-button/