| الدعم الفني | الاستضافة | سباق المواقع | القران الكريم | دليل المواقع | قصص الانبياء | صمام العرب |

 معهد صمام العرب

اعلانات الموقع
دورة تعليم البرمجه بـ لغة php
عدد الضغطات : 9منتديات عرابجه كول
عدد الضغطات : 15للتبادل الاعلاني
عدد الضغطات : 9للتبادل الاعلاني
عدد الضغطات : 6
للتبادل الاعلاني
عدد الضغطات : 4للتبادل الاعلاني
عدد الضغطات : 3للتبادل الاعلاني
عدد الضغطات : 3للتبادل الاعلاني
عدد الضغطات : 4

مجموعات Google
لكي يصلك كل جديد في عالم البرامج والسكربتات والدروس ادخل ايميلك بالاسفل ثم قم بالضغط على اشتراك
البريد الإلكتروني:
زيارة هذه المجموعة

 

 

ملاحظة : تم بعون الله تعالى فتح كل شي للزوار - كتابة مواضيع - مشاركة - تصويت - تحميل مرفقات - الخ ...

 

ملاحظة : لم نقم باجبارك على الرد أو المشاركة حتى تقوم بالتحميل فلا تسيئ في استخدام مميزات المعهد بـ فتح كل شي للزوار

 

دعوة للإنضمام لأسرتنا
عزيزي الزائر من اجل منتدى ارقي وارقي برجاء عدم نقل المواضيع ويمكنك التسجيل معنا والمشاركة معنا والنقاش في كافه المواضيع الجاده اذا رغبت في ذالك فانا لا ادعوك للتسجيل بل ادعوك للإبداع معنا .

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


تاريخ الميلاد:    
هل انت موافق على قوانين المنتدى؟

دعوة للإنضمام لأسرتنا
عزيزي الزائر من اجل منتدى ارقي وارقي برجاء عدم نقل المواضيع ويمكنك التسجيل معنا والمشاركة معنا والنقاش في كافه المواضيع الجاده اذا رغبت في ذالك فانا لا ادعوك للتسجيل بل ادعوك للإبداع معنا .

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


تاريخ الميلاد:    
هل انت موافق على قوانين المنتدى؟


witch êيèمè ٌêà÷àٍü - َمîëîâيî ïًîِهٌٌَàëüيûé êîنه... [ الكاتب : BanderlogOFF - ]       »     ribsck golden care pharmacy [ الكاتب : worldpillpmq - ]       »     Someone help? [ الكاتب : greatfraubmar - ]       »     برنامج جميل شاشة توقف تجعل المطر ينزل على سطح المك... [ الكاتب : الاصيل - ]       »     كود تكبيرات العيد فى القطعه الجانبية [ الكاتب : الاصيل - ]       »     | ستايل افتراضي للنسخه 3.8.x معدل | للمصممين | فصل... [ الكاتب : الاصيل - ]       »     مواقع صليبية تملأ بإعلاناتها المنتديات العربية ...... [ الكاتب : الاصيل - ]       »     المسلم فى العيد ، كل عام وأنتم بخير [ الكاتب : الاصيل - ]       »     MyEcodial S 4.04_INT_NSX [ الكاتب : م/ أبو صالح - ]       »     للأذكياء فقط [ الكاتب : م/ أبو صالح - ]       »     خاص للكهربائيين [ الكاتب : م/ أبو صالح - ]       »     إقلاع ذاتي لمولدة احتياطية [ الكاتب : م/ أبو صالح - ]       »     موضوع جميل عن انواع محطات القدرة [ الكاتب : م/ أبو صالح - ]       »     المواصلات العجيبة العديمة المقاومة [ الكاتب : م/ أبو صالح - ]       »     برنامج فصل الأنترنت عن المشتركين فصل الأنترنت الت ... [ الكاتب : أبو تركي - ]       »    


العودة   معهد صمام العرب > صمام القسم التطويري > صمام ركن الستايلات > صمام دورات تعليم وتصميم الإستايــــلات

الإهداءات

اعلانات الموقع
سريال نمبر للنود
عدد الضغطات : 129ارفع البيج رانك
عدد الضغطات : 14
لكل من يهمه الأمر .. رحلة الإشراف قد بدأت
عدد الضغطات : 12| برامج منزوعه | برامج مجانيه |
عدد الضغطات : 13
  

إضافة رد
 
أدوات الموضوع التقييم: تقييم الموضوع: 3 تصويتات, المعدل 5.00. طريقة عرض الموضوع
قديم 10-23-2009, 01:16 PM   #1
مدير عام
 
الصورة الرمزية a2gate
 
تاريخ التسجيل: Oct 2009
الدولة: http://www.a2gate.com
المشاركات: 3,890
تصميم خلفية + أزرار موقع بشكل احترافي Buttons

بســـ الله الرحمن الرحيم ــــم


الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين


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


بكل الحب والخير أسعد الله جميع أوقاتكم وأهلاُ بكم


كما عودناكم دائماً على تقديم كل ماهوى جديد ومفيد من دروس وشروحات مميزة


فاليوم أقدم لكم هذا الشرح المميز والشيق ببرنامج الفوتوشوب وشرحنا بعنوان


تصميم خلفية + أزرار موقع بشكل احترافي Buttons


لأصحاب المواقع والمنتديات وكذلك ممكن استخدام مثل هذه التصاميم بأعمال أخره كثيرة


في البداية دعونا نشاهد نتيجة التطبيق على الشرح


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


مستوى الدرس ـ ـ متقدم

إصدار فوتوشوب ـ ـ *CS4 - CS3 - CS2 - CS


نتوكل على الله سبحانه وتعالى ونبدأ وإياكم بالشرح والتطبيق لهذا الدرس


نفتح برنامج الفوتوشوب ونقوم بإنشاء صفحة عمل جديدة بالمقاسات والإعدادات التالية


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد فتح صفحة العمل سنقوم بملئ الصفحة بالألوان المطلوبة


وللقيام بذلك نتابع الموضح بالشكل التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


كما نشاهد بالشكل السابقة تم تحديد القسم العلوي من صفحة العمل بعد التحديد


نقوم بملئ التحديد بالون المطلوب ونكرر نفس الخطوة مع القسم السفلي من الطبقة


لنحصل على النتيجة التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد ذلك نقوم بإنشاء طبقة جديدة نطلق عليها اسم خط افقي


ثم نعود مرة أخرة لأداة التحديد السابقة فقط مع تغيير قيمة الارتفاع إلى Height 12 PX


ثم نقوم بعمل تحديد في منطقة العمل ونملئ التحديد باللون الأبيض


كما يوضح لنا الشكل التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


الآن نقوم بإضافة المؤثرات التالية لطبقة خط افقي بنفس القيم والإعدادات التالية


Drop Shadow


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Inner Shadow


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Gradient Overlay


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Stroke


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


الآن من المفترض أن تكون قد حصلت على نتيجة مشابهة للنتيجة التالية


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بهذا الشكل نكون قد انتهينا من تصميم الخلفية ونتابع وإياكم تصميم الزر


يمكنك دمج طبقات الخلفية لو تريد الآن ولكن يفضل تركها دون دمج للرجوع لها لو احتجتها


الآن نقوم بإنشاء طبقة جديدة أعلى الطبقات ونطلق عليها اسم Button


بعد إنشاء الطبقة نقوم بأختيار أداة التحديد Rounded Rectangle Tool


ونضبط إعداداتها كما سيتم توضيحها ثم نقوم بعمل شكل بالون الأبيض


مشابه للشكل المبين بالصورة التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد رسم الشكل المطلوب والذي تم توضيحه بالشكل السابق سنقوم بحذف جزي معين من الشكل


ولعمل المطلوب تابع معي الشكل المتحرك التالي بانتباه للحصول على نتيجة جيدة


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


توضيح للعملية السابقة قم بمضاعفة نفس الطبقة أنا غيرة لونها للون الأحمر للتوضيح


ثم قم بتصغير حجم الشكل ونقله للمكان الموضح بعدها نحدد الطبقة الموضحة بالون الأحمر


ثم قم بالضغط على مفتاح Delete من لوحة المفاتيح لحذف الجزء غير المرغوب من طبقة Button


بعد هذا قم بحذف الطبقة الموضحة بالون الأحمر لأننا لم نعد بحاجة لها فقط استخدمناها للحذف


الآن نقوم بإضافة المؤثرات التالية لطبقة Button بنفس القيم والإعدادات التالية


Drop Shadow


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Inner Shadow


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Gradient Overlay


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


Stroke


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


من المفترض الآن أن يكون أصبح التصميم لديك على الشكل التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


الآن نقوم بإنشاء طبقة جديدة ونطلق عليها اسم وهج


ثم باستخدام أداة تحديد الخط الأفقي Line Tool نقوم بعمل خط بحجم PX 2


بنفس اللون الموضح وبالشكل المتحرك التالي لرسم الخط


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد ذلك نقوم بتطبيق المؤثر التالي على طبقة وهج بنفس القيم والإعدادات التالية


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد تطبيق المؤثر السابق على طبقة وهج كما تابعنا بالخطوة السابق


نقوم مجدداً بإنشاء طبقة جديدة أعلى الطبقات ونطلق عليها أسم غطاء علوي


الآن اضغط زر Ctrl من لوحة المفاتيح وبزر الماوس الأيمن على طبقة Button ليتم تحديدها


مع العلم أن الطبقة المفعلة طبقة غطاء علوي لأننا سنعمل عليها


بعد التحديد قم بملئ التحديد بالون الاسود كما هوى موضح بالشكل المتحرك التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


نعود ونذكر بأن تعبئة التحديد تمت على طبقة غطاء علوي


بعد ذلك نقوم بحذف الجزء الغير مرغوب به من طبقة غطاء علوي كما يوضح لنا الشكل المتحرك التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد ذلك نقوم بتطبيق المؤثر التالي على الطبقة بنفس القيم والإعدادات الموضحة بالشكل التالي


Gradient Overlay


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


الآن من خلال مفاتيح الاسهم بلوحة المفاتيح نقوم بسحب الطبقة للأعلى بمقدار PX 1


بعد هذا يفترض أن يكون قد أصبح تصميمك على هذا الشكل


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


بعد ذلك نقوم بإنشاء طبقة جديدة أعلى الطبقات ونطلق عليها اسم خط حفر


ثم نقوم برسم خط بشكل أفقي بمقدارPX 1 بنفس الأداة السابقة Line Tool


وكذلك بنفس اللون الموضحة بالشكل المتحرك التالي


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


الآن نكون قد وصلنا لنهاية الشرح ومن المفترض أن تكون قد وصلت

للنتيجة النهائية للتطبيق وهذه نتيجة تطبيقي النهائية للشرح


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


طبعاً من المأكد بأنه سيكون لك لمساتك السحرية المميزة للتصميم


بإضافت بعض اللمسات السحرية من أناملك المبدعة للتصميم مأكد سيكون أكثر جمالاً


ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ط´ط¨ظƒط© ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨ , ظ…ظ†طھط¯ظٹط§طھ ط¨ظˆط§ط¨ط© ط§ظ„ط¹ط±ط¨


لم يعد بوسعي سوى شكركم لحسن المتابعة والتطبيق


وأسأل الله العلي القدير بأن أكون قد وفقت بالشرح وقدمت مايفيدكم ويسركم


وإلا أن ألقاكم بموضوع جديد وتطبيق آخر لكم مني خالص الشكر والتقدير

الموضوع الأصلي: عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] & الكاتب: عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] & المصدر: عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]
عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]


__________________
a2gate غير متواجد حالياً   رد مع اقتباس

رسالة لكل الزوار معهد صمام العرب

عزيزي الزائر أتمنى انك استفدت من الموضوع ولكن من اجل منتدى ارقي وارقي برجاء عدم نقل الموضوع ويمكنك التسجيل معنا والمشاركة معنا والنقاش في كافه المواضيع الجاده اذا رغبت في ذالك فانا لا ادعوك للتسجيل بل ادعوك للإبداع معنا . للتسجيل اضغظ هنا .

إضافة رد

الكلمات الدليلية (Tags - تاق )
أزرار, موقع, buttons, احترافي, تصميم, بشكل, خلفية


أدوات الموضوع
طريقة عرض الموضوع تقييم هذا الموضوع
تقييم هذا الموضوع:

تعليمات المشاركة
تستطيع إضافة مواضيع جديدة
تستطيع الرد على المواضيع
تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

اعلانات الموقع
منتديات :: جيل النهضة :: 2010,منتديات قلب المسلم,

الساعة الآن 01:47 PM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd diamond
Ads Management Version 3.0.1 by Saeed Al-Atwi
جميع الحقوق محفوظه لـ معهد صمام العرب

Security byi.s.s.w

 



أقسام المنتدى

صمام القســـــــــم العــــــــــام @ صمام الركن الــعـــام للمواضيــع العامــة @ صمام ركــن البرامــج العامــة المشروحة @ صمام ركن الاتصالات وتطبيقات الجيل الثالث @ صمام دروس عامـة في عــالم التصميــم @ صمام دورات تعليم وتصميم الإستايــــلات @ صمام ركن مشاكل الإستايلات والقوالب @ صمام ركن الستايلات @ صمام ركـــن تطوير منتديـــــ vb ــات @ صمام القسم التطويري @ صمام ركـــن تطويــــر المواقـــــــــــــع @ صمام ركن تقنيات المواقع SEO و XML و RSS و محركات البحث @ صمام ركــن التبادل الإعلاني والتجاري @ صمام القســـــــــم الاداري @ صمام الاقتراحات والشكاوي @ صمام المواضيع المكررة والمحذوفة @ صمام الإعلانات الإداريـــــــــــــة @ صمام الاسلاميات العام @ صمام قسم دورة تعليم البرمجه بـ لغة php @ صمام منتدى الربح من الانترنت @ صمام الاسطوانات التجميعيه @ صمام الدعم الفني @ صمام الدعم الفني للعملاء @ صمام الدعم الفني للاعضاء @ صمام القسم التجاري @ صمام عروض الاستضافة التصاميم والدعم الفني والبرمجة والنطاقات @ صمام طلبات التصاميم والدعم الفني والبرمجة والنطاقات @ القسم الرياضي @ صمام الدورات التعليمية @ ركن الاستفسارات المتعلقة بدورة الـ php @ ركن الأقسام الهندسية @ ركن الهندسة الكهربائية @ ركن الهندسة الميكانيكية @ ركن الهندسة المدنية @ ركن هندسة الحاسب الألي @ ركن البرامج الهندسية @ ركن الهندسة العامة @ ركن المكتبة الهندسية @


سبق لك تقييم هذا الموضوع: