اخر الاخبار: --- كل ما تحتاج معرفته لتصميم صفحات هبوط فعّالة بكل سهولة --- البرامج التي تهدف إلى تعطيل عملية تشغيل الحاسب --- لم اجد حل سهل في حل مشكله من الهاكات ومني لكم هذا --- هل يمكن الحصول علي هاك الشكر --- هاك شكل جديد لحالة العضو --- هل يوجد --- هاك Theme Color Changer --- هاك الأحصائيات الشاملة --- هاك استايل للهاتف --- شرح اضافة كود ميتا تاغ لوصف المنتدى في محركات البحث --- وضع اعلانات ادسنس داخل المواضيع لمنتديات ماي بيبي mybb 1.8 --- طريقة اضافة بادئة للمواضيع بشكل انيق لمنتديات mybb --- شرح رفع وتفعيل هاك لمنتديات ماي بيبي mybb 1.8 --- مشكلة واريد حل في اسرع وقت --- ممكن هاك --- هاك DVZ Shoutbox 2.1. للنسخة 1.8 --- هاك انشاء صفحات اضافية (OUGC-Pages-1.0.0) --- هاك ايقونه حسابك بالفيس - Facebook profile link on Postbit 1.8 --- هاك القايمه الجانبيه المتحركه - sidebar mybb 1.8 --- هاك الطقس - weather for mybb 1.8 ---

تحديث آخر نسخة 1.8.37

تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
كيفية إنشاء زر متحرك في متصفحك
#1
Icon4 
في هالدرس راح نقوم بصنع زر متحرك ، الدرس شوي طويل لكن سهل واتمنى يعجبكم
1.في إيمدج ريدي ،قم بإنشاء صورة جديدة بنفس حجم الزر الي حاب تنشئه ، حاليا انا راح اقوم بوضع العرض والطول 200 بكسل والخلفية راح تكون شفافة.
2.أنقر فوق أداة المستطيل ذي الحواف المستديرة rounded rectangle من صندوق الادوات . إذا لم تكن هذة الاداة ظاهرة فانقر على shape الظاهر في صندوق الادوات واحتفظ بزر الفأرة مضغوطا وعندما تظهر القائمة
الصغيرة التي تحتوي على الادوات التي تقع بنفس الموقع اختر منها اداة rounded rectangle لإنشاء مستطيل مستدير الحواف يشمل الصورة بأكملها.(الصورة التاليه توضح هذه الخطوة)
[صورة: 52687a8a7a.jpg]
[صورة: 025fdd0b27.jpg]
3.أنشئ شريحة من البكسلات التي تحتوي على لون فقط باختيار أمر new layer based slice من قائمة layer .
[صورة: f8a853e7d8.jpg]
4. اختر لونا للشكل بفتح قائمة layer ثم اختيار امر layer style ثم أمر color overlay.وفي لوحة الألوان التي ستظهر لك ،انقر عينة الالوان . وعندما يظهر مربع حوار color picker ضع علامة صح امام خيارweb safe
ثم انقر احد الالوان الموجودة في المربع.
5.أضف تاثير البروز والشطف للزر بفتح قائمة layer ثم اختيار امر layer style ثم امر bevel and emboss .
6. لمستخدمين فوتوشوب 6 إذا لم تكن لوحة rollover ظاهرة فاختر show rollover من قائمة window لاظهارها. لاحظ ان الزر الذي انشأته يظهر في اللوحة.
بالنسبة لمستخدمي فوتوشوب سي اس والي حاليا استخدمه وراح احط الصورالتوضيحية عليه اعتبارا اني استخدمه واتوقع ان المعظم يستخدمونه ..
اذا لم تكن لوحة web content ظاهرة فاختر show web content من قائمة window لاظهارها ولاحظ ان الزر الذي انشأته يظهر في اللوحة .( لاحظ الصورة التوضيحية التالية)
[صورة: fe4f212359.jpg]
7. أنشئ حالة جديدة في الزر باختيار امر new state بالضغط على المكان الموضح بالصورة التاليه. ستظهر الحالة الجديدة في اللوحة ويتم تعيين الحالة over لها تلقائيا.
[صورة: 1584015cb8.jpg]
ستظهر الحالة الجديدة في اللوحة ويتم تعيين الحالة over لها تلقائيا.
[صورة: 6f30b37506.jpg]
8.غير الألوان باختيار layer ثم layer style ثم color overlay (وغير درجة الشفافية لو حبيت)كرر الخظو الرابعة .
9. انشئ حالة جديدة مرة اخرى بنقر زر new state كما اشرت بالخطوة السابعة. ستظهر حالة جديدة في اللوحة ويتم تعيين الحالة down لها تلقائيا.
[صورة: f455e7cc5f.jpg]
10.غير الالوان مرة اخرى كما ذكرنا بالخطوة الرابعة .
11. الان انتهينا ويمكنك القيام بالمعاينة بالضغط على preview من لوحة الادوات (الرمز موضح بالصورة وهو عبارة صورة يد تضغط اصبع منها على شئ مشع كنجمة )
[صورة: 0815a7a38f.jpg]
12. لاحظ الان عندما لا يكون الماوس على الزر يكون بالون وعندما تضع الماوس على الزر يتغير لونه واذا قمت بالنقر عليه بالماوس ستحصل على لون اخر.
13.الان طريقة الحفظ ، لتوليد اوامر html وجافاسكربت اللازمة اذهب الى امر save optimized as من قائمة file قم بتسمية الملف قبل النقر فوق زر الحفظ save تاكد من تحدد خيار selected slices الموجود اسفل مربع حوار save as . يطلب هذا الخيار ان يحفظ من ايمدج ريدي ان يحفظ الشريحة التي تحتوي على الزر فقط.
14. بهالطريقة احنا خلصنا راح تشوف ملف فيه اسمه اميج على الديسك توب او اي مكان اخترت التخزين فيه
وبتلاقي صفحة html طبعا راح تاخذ نوع المتصفح الي انت تستخدمه افتحها راح تشوف الزر الي انت صنعته
والنتيجة بتكون نفس الملف المضغوط الي ارفقته
بالنهاية ارجو انكم استمتعم وانت تجربون الدرس والي عنده اي سؤال او استفسار يسئل..
تحياتي،، أختكم سماء


الملفات المرفقة
.zip   images.zip (الحجم : 10.55 ك ب / التحميلات : 28)
[صورة: 124429204046f3f632a63cb.gif]
الرد
شكر من طرف :
#2
والله درس هايل وجميل انا نفسى ماكانش عندى فكرة عن هذه الميزة فى الأيميدج ريدى وهذا هو تطبيقى على الدرس

تقبلى مرورى اختى الغالية.
الرد
شكر من طرف :
#3
اشكر لك مرورك وتطبيقك خيو واتمنى اني قدرت اوصل المعلومة بشكل جيد،،
[صورة: 124429204046f3f632a63cb.gif]
الرد
شكر من طرف :
#4
يعطيك الف عافية مشكورة بزااااااااااااااااااااااااااااااااااااااف
[صورة: mybbsig.gif]
الرد
شكر من طرف :
#5
الشرح جميل
الرد
شكر من طرف :


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


يقوم بقرائة الموضوع: بالاضافة الى ( 2 ) ضيف كريم