كيفية إنشاء زر متحرك في متصفحك

[سمـاء]

في هالدرس راح نقوم بصنع زر متحرك ، الدرس شوي طويل لكن سهل واتمنى يعجبكم
1.في إيمدج ريدي ،قم بإنشاء صورة جديدة بنفس حجم الزر الي حاب تنشئه ، حاليا انا راح اقوم بوضع العرض والطول 200 بكسل والخلفية راح تكون شفافة.
2.أنقر فوق أداة المستطيل ذي الحواف المستديرة rounded rectangle من صندوق الادوات . إذا لم تكن هذة الاداة ظاهرة فانقر على shape الظاهر في صندوق الادوات واحتفظ بزر الفأرة مضغوطا وعندما تظهر القائمة
الصغيرة التي تحتوي على الادوات التي تقع بنفس الموقع اختر منها اداة rounded rectangle لإنشاء مستطيل مستدير الحواف يشمل الصورة بأكملها.(الصورة التاليه توضح هذه الخطوة)


3.أنشئ شريحة من البكسلات التي تحتوي على لون فقط باختيار أمر new layer based slice من قائمة layer .

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 لاظهارها ولاحظ ان الزر الذي انشأته يظهر في اللوحة .( لاحظ الصورة التوضيحية التالية)

7. أنشئ حالة جديدة في الزر باختيار امر new state بالضغط على المكان الموضح بالصورة التاليه. ستظهر الحالة الجديدة في اللوحة ويتم تعيين الحالة over لها تلقائيا.

ستظهر الحالة الجديدة في اللوحة ويتم تعيين الحالة over لها تلقائيا.

8.غير الألوان باختيار layer ثم layer style ثم color overlay (وغير درجة الشفافية لو حبيت)كرر الخظو الرابعة .
9. انشئ حالة جديدة مرة اخرى بنقر زر new state كما اشرت بالخطوة السابعة. ستظهر حالة جديدة في اللوحة ويتم تعيين الحالة down لها تلقائيا.

10.غير الالوان مرة اخرى كما ذكرنا بالخطوة الرابعة .
11. الان انتهينا ويمكنك القيام بالمعاينة بالضغط على preview من لوحة الادوات (الرمز موضح بالصورة وهو عبارة صورة يد تضغط اصبع منها على شئ مشع كنجمة )

12. لاحظ الان عندما لا يكون الماوس على الزر يكون بالون وعندما تضع الماوس على الزر يتغير لونه واذا قمت بالنقر عليه بالماوس ستحصل على لون اخر.
13.الان طريقة الحفظ ، لتوليد اوامر html وجافاسكربت اللازمة اذهب الى امر save optimized as من قائمة file قم بتسمية الملف قبل النقر فوق زر الحفظ save تاكد من تحدد خيار selected slices الموجود اسفل مربع حوار save as . يطلب هذا الخيار ان يحفظ من ايمدج ريدي ان يحفظ الشريحة التي تحتوي على الزر فقط.
14. بهالطريقة احنا خلصنا راح تشوف ملف فيه اسمه اميج على الديسك توب او اي مكان اخترت التخزين فيه
وبتلاقي صفحة html طبعا راح تاخذ نوع المتصفح الي انت تستخدمه افتحها راح تشوف الزر الي انت صنعته
والنتيجة بتكون نفس الملف المضغوط الي ارفقته
بالنهاية ارجو انكم استمتعم وانت تجربون الدرس والي عنده اي سؤال او استفسار يسئل..
تحياتي،، أختكم سماء

[Pepo]

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

تقبلى مرورى اختى الغالية.

[سمـاء]

اشكر لك مرورك وتطبيقك خيو واتمنى اني قدرت اوصل المعلومة بشكل جيد،،

[kamaya]

يعطيك الف عافية مشكورة بزااااااااااااااااااااااااااااااااااااااف

[abbasforex]

الشرح جميل