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

تاريخ النشر: 11/03/09 | الكاتب: | القناة: دروس | التعليقات: 28 | 5٬255 قراءة

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

كيفية تصميم زر ويب 2.0

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

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

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

كيفية تصميم زر ويب 2.0

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

Be Sociable, Share!

أرسل الموضوع

| وسائل إضافية:
Be Sociable, Share!

      كلمات مفتاحية

       ,  ,  ,  ,  ,  ,  ,  , 

      التعليقات:

      • 1. ماجد :

        عمل جدا جدا رئع واتمنى منك المزيد منك مثل هذه الدروس الموضحة بالصور

      • 2. العاب اندوميدا :

        رايت مثل هذا الدرس في ترايدنت فهل انت مقدمة هناك ام ان الموضوع منقول

      • 3. www.samexe.net :

        شكرآ يا غالي !…{{ عـلي الزراير الشديدة دي< شكرآ آ آ

      • 4. فراس :

        يعطيك العافيه يالغلا
        مبدع كالعاده

      • 5. سائد :

        إن لم أكن مخطأ فهذا إسمه درس عمل زر زجاجي
        صراحة انا عندي فكرة عن الويب 2 غير مرة عن ما ذكرت اخي في الشرح

        لا افهم كثيرا في البرمجة لكن حسب ما فهمت من المختصين فالويب 2 هي بمثابة تطوير جديد ونقلة في لغات البرمجة
        و في كل الاحوال فالويب 2 لا علاقة له بالمظهر..

        وفقك الله

      • 6. dr moes :

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

        شرح مفيد جدا

        و لكن شيء ما يحيرني !!!

        عندما أقرر أن أصنع أيقونات و أشكال ويب 2 , هل يجب أن أكون متخصص بالتصميم إلى درجه كبيره ؟

        أم أني لا أمتلك الأبداع لعمل تلك الأشياء

      • 7. ياسر :

        جميل جداً ,,
        أبدعت أحمد ,,
        هذا تطبيقي //
        http://dc01.arabsh.com/i/00242/n9akzjyqg4zk.jpg

        دمت بخير

      • 8. ذؤيب :

        شكرا لك أخي الحبيب ، شرحت فأجدت جزاك الله خير الجزاء.
        تحياتي!

      • 9. hrofi.com :

        رائع درسك ، بالتوفيق

      • 10. دردشة عشق :

        الله يعطيك العافية على الدرس الجميل ..~

        لكن وانا اخوك كنت اتمنى .. دروس اكثر عن الويب 2.0 في التصميم ،، الى التركيب ..~

        لكن درسك مفيد جداً ..

        وجاري التطبيق ..

        بانتظآرك على امل المتابعة ..~

        تحيتي

      • 11. ayman :

        درس حلو كتير ..
        بارك الله فيك أخي ..

      • 12. احمد حمودة :

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

      • 13. برامج :

        درس روعة ..

        بالتوفيق للجميع ..

      • 14. SEOOO! :

        شكرا اخي الكريم علي الشرح الرائع الطريقة سهلة جداً ………

      • 15. X-NaDoRi :

        يعطيك العافية عزيزي على الشرح الجميل جداً
        موضوعك مفيد للغاية

      • 16. abdullah_36 :

        شكراً لك اخي الكريم ،، طبقت الدرس ولكن استبدلت المرحلة الأخير وذلك لعدم فهمي لك ،،

        عموماً اعتقد ان التطبيق ملائم بشكل كبير ،،

        وهذا تطبيقي :
        [IMG]http://www.alnhdi.net/vb/uploaded/35_1257849183.jpg[/IMG]

        شكراً لك اخي الكريم .. وجزاك الله خير ..

      • 17. احمد حمودة :

        سعيد بإنك قد قمت بتنفيذ الدرس و ظهور النتيجة بشكل جيد 🙂
        الخطوة الأخيرة ببساطة أن تضيف النص الذي تريده أن يكون على الزر (مثال: دخول أو تسجيل) وهكذا …

      • 18. المحترفين المصريين :

        درس جميل جدا اشكرك

      • 19. الرحال :

        تم حفظ الشرح وإن شاء الله سيتم تطبيقه أنا أرجوا منك أن تقوم بتقديم المزيد من الشروحات المتعلقة بالتصميم ..

        وأتمنى لك التوفيق .

      • 20. manpower :

        بالرغم من جمال الشرح وقد لاحظت كثرة الدروس المطبقة على هذا البرنامج PhotoShop إلا أنه عندما حاولت الحصول عليه وجدت أن ثمنه 2700 ريال سعودي وهذا كثير بالنسبة للكثير حسب ما أرى !! لماذا لا يكون هذا الشرح على برنامج مشابه من الفئة المجانية مفتوحة المصدر ؟؟ مثلاً برنامج GIMP أو Paint.NET فهو مشابه للفوتوشوب ولكنه مجاني ولن يحتاج كل مستخدم إلى مد يده والسرقة (السيريال أو الكراك) لكي يتعلم وهذا ولم نذكر شيء عن المضار النفسية والعملية المترتبة على الحصول على تلك البرامج عن طريق السرقة والعمل عليها والله أعلم .

      • 21. فجر :

        رائع
        شكرا

      • 22. شات :

        شرح مميز وجميل

      • 23. شات كتابي :

        الله يوفقك

      • 24. سولاف (الإدارة) :

        ولك ايضا النجاح والتوفيق

      • 25. mido :

        جزاك الله خيرا درس رائع ومفيد بالتوفيق

      • 26. سولاف (الإدارة) :

        ولك من الخير مثله

      • 27. وظايفنا :

        كم نحتاج لأمثالك من المبدعين و الذين لا يبخلون على الناس بالعلم و فعلاً خير الناس انفعهم للناس.

      • 28. عبدو :

        جيد مشكور ^-^

      أكتب تعليق: