شريط ازرار الهيدر بتأثير Rollover

- متطلبات الدرس:

Abstract Nebula Textures

الخطوة 1

• أولا سنقوم بتصميم الشريط الرئيسي ، ثم سنقوم بإنشاء مجموعة الأزرار.

•  لذلك دعونا نبدأ مع إنشاء عمل جديد مع العرض 70 والارتفاع 60 بكسل.

الخطوة 2

حدد أداة Pain bucket واملأ الخلفية بلون  # 000000.

الخطوة 3

الآن حدد أداة Rectangle Tool وقم بإنشاء مستطيل.

الخطوة 4

• والآن سنقوم بإضافة القليل من تدرج الألوان إلى المستطيل.

• انتقل لقائمة  Layer> Layer style> Gradient Overlay .

• استخدام من نافذة gradient اللون الأسود.

الخطوة 5

اختر أداة  Line Tool  وإنشاء خط مع 1 بكسل ولون # aaaaaa.

الخطوة 6

لإضافة outer glow للخط المرسوم، اذهب لقائمة  Layer> Layer style> Outer glow.

الخطوة 7

الآن اختر أداة Line Tool مرة أخرى ، وإنشاء خط عمودي مع لون# 111111 لتقسيم الأزرار.

خطوة 8

الخط المرسوم يحتاج اضافة Drop Shadow لذلك اذهب لقائمة  Layer> Layer style> Drop Shadow.

الخطوة 9

الآن اختر أداة Text Tool النص وإضافة نص أزرار الهيدر مع اللون # ffffff.

الخطوة 10

من قائمة Layer> Layer style ، اختار a light gradient و من stroke اختار اللون الأسود مع حجم صغير.

• الآن اكتمل الزر لحفظ الصورة، اانتقل لقائمة File > Save for web.

• ثم اختر PNG من القائمة المنسدلة لأسفل. ولا تنسى دائما نختار مع الأزرار  PNG لضمان جودة عالية للصورة.

الخطوة 11

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

الخطوة 12

والآن سوف نقوم بتصميم شكل rollover للأزرار. لذلك اختار أداة Rounded rectangle tool  وأشىء مستطيل في الوسط.

الخطوة 13

من قائمة Layer> Layer style> Pattern Overlay. استخدام الباترن المذكور بمتطلبات الدرس بالأعلى.

الخطوة 14

الآن إضافة النص ويطبق تأثير  rollover.

الخطوة 15

كرر نفس الخطوات لباقى الأزرار واحفظ الصور كما شرحنا سابقا.

الخطوة 16

• الآن لدينا كل 5 أزرار بالشكل الأساسى وبتأثير rollover.

• باستخدام برنامج Dreamweaver. إنشاء ملف HTML جديد.

الخطوة 17

اختار من قائمة   Insert> Image objects> Rollover image .

الخطوة 18

استعرض الزر الرئيسي في “original image” ، وبتأثير roll over في “Roll over image”.

الخطوة 19

• كرر نفس العملية مع كل زر ثم قم بحفظ الملف  “Navigation.html.

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

•  ببساطة غير الارتفاع أو العرض بإضافة أى رقم جديد.

- أخيرا، لدينا شريط أزرار الهيدر جاهز.