شرح طريقة تصميم زر ويب 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. اضف طبقة نص التي تريد استخدامها لعمل الزر ثم ايقونة جانبية اذا احببت و قم بضبط اعدادات الظل كما تريد او كما ترى في الصورة التالية (اقتراح فقط)
وبس انتهى الدرس 
عمل جدا جدا رئع واتمنى منك المزيد منك مثل هذه الدروس الموضحة بالصور
رايت مثل هذا الدرس في ترايدنت فهل انت مقدمة هناك ام ان الموضوع منقول
شكرآ يا غالي !…{{ عـلي الزراير الشديدة دي< شكرآ آ آ
يعطيك العافيه يالغلا
مبدع كالعاده
إن لم أكن مخطأ فهذا إسمه درس عمل زر زجاجي
صراحة انا عندي فكرة عن الويب 2 غير مرة عن ما ذكرت اخي في الشرح
لا افهم كثيرا في البرمجة لكن حسب ما فهمت من المختصين فالويب 2 هي بمثابة تطوير جديد ونقلة في لغات البرمجة
و في كل الاحوال فالويب 2 لا علاقة له بالمظهر..
وفقك الله
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته
شرح مفيد جدا
و لكن شيء ما يحيرني !!!
عندما أقرر أن أصنع أيقونات و أشكال ويب 2 , هل يجب أن أكون متخصص بالتصميم إلى درجه كبيره ؟
أم أني لا أمتلك الأبداع لعمل تلك الأشياء
جميل جداً ,,
أبدعت أحمد ,,
هذا تطبيقي //
http://dc01.arabsh.com/i/00242/n9akzjyqg4zk.jpg
دمت بخير
شكرا لك أخي الحبيب ، شرحت فأجدت جزاك الله خير الجزاء.
تحياتي!
رائع درسك ، بالتوفيق
الله يعطيك العافية على الدرس الجميل ..~
لكن وانا اخوك كنت اتمنى .. دروس اكثر عن الويب 2.0 في التصميم ،، الى التركيب ..~
لكن درسك مفيد جداً ..
وجاري التطبيق ..
بانتظآرك على امل المتابعة ..~
تحيتي
درس حلو كتير ..
بارك الله فيك أخي ..
العاب اندوميدا ..
الدرس قمت بكتابته كاملاً ولم اقم بنقله من اي مكان الا من مدونتي
اخي سائد ..
فعلاً الويب 2 هو تطبيقات في المقام الاول والاخير
ولكن عند عمل مواقع الويب الجديدة توجب على المصممين النهوض بتصميماتهم وابتكار تصميمات جديدة
وواكب ظهور الافكار الجديدة مع ثورة الويب 2 لذا التصق اسم التصميمات بالويب 2 ايضاً
ولكن في رأيي يجب ان يرتبط الويب 2 مع المظهر لانه مفهوم الويب 2 ايضاً قد اهتم بان يكون التصميم جاذباً للزائر ..
اشكر كل من قام بالتعليق والاهتمام بالتدوينة وخاصة ياسر تطبيقك جميل وروعة في اختيار الالوان والشكل ..
درس روعة ..
بالتوفيق للجميع ..
شكرا اخي الكريم علي الشرح الرائع الطريقة سهلة جداً ………
يعطيك العافية عزيزي على الشرح الجميل جداً
موضوعك مفيد للغاية
شكراً لك اخي الكريم ،، طبقت الدرس ولكن استبدلت المرحلة الأخير وذلك لعدم فهمي لك ،،
عموماً اعتقد ان التطبيق ملائم بشكل كبير ،،
وهذا تطبيقي :
[IMG]http://www.alnhdi.net/vb/uploaded/35_1257849183.jpg[/IMG]
شكراً لك اخي الكريم .. وجزاك الله خير ..
سعيد بإنك قد قمت بتنفيذ الدرس و ظهور النتيجة بشكل جيد
الخطوة الأخيرة ببساطة أن تضيف النص الذي تريده أن يكون على الزر (مثال: دخول أو تسجيل) وهكذا …