[شرح] كيفية تصميم زر ويب 2.0

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

قد استخدمت خلال عمل الشرح فوتوشوب CS3

• افتح الفوتوشوب وقم بإنشاء ملف جديد


• قم بإنشاء شكل مستطيل بحواف دائرية للزر الذي سوف تقوم بتصميمه مع تحديد استدارة الحواف او Radius كما تحب



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



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



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



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



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



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



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



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



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



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

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