كيفية إنشاء منزلق صورة باستخدام Photoshop & jQuery

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

في هذا البرنامج التعليمي لتصميم الويب ، سنتعلم إنشاء شريط تمرير مخصص للصور أعلاه باستخدام Photoshop ، حيث يمكنك معاينة النتيجة النهائية من هنا. لن نوضحها في Photoshop فقط ، بل سنحولها أيضًا إلى تصميم وظيفي عن طريق تحويلها إلى HTML / CSS وإضافة jQuery لتأثيرها المنزلق الرائع.

يبدو وكأنه الكثير من البتات المعقدة المعنية ، ولكن في الواقع أنها واضحة وسهلة الفهم للغاية ، فلنبدأ بعد ذلك!

أكثر اهتماما باعتماد منزلق صورة وتخصيصها على الطريق؟ هنا هي وظائف مخصصة لك.

• شريط تمرير الصورة: 23 مسج شريط التمرير
• شريط التمرير صورة: 18 الإضافات وورد

ابدء

في هذا البرنامج التعليمي ، ستحتاج إلى الموارد التالية:

• 26 أنماط بكسل متكررة من PSDfreemium.
• مكتبة مسج
• البرنامج المساعد Nivo Slider
• Modernizr
• العثور على القوام ورقة من VandelayPremier
• (البديل) 13 HQ القوام الورق القديم من جرعة زائدة
• Rinjani بواسطة Ciaciya
• ستوبا التي كتبها أغنيس سيم
• حصيلة نينو ساتريا
• عروض تيمو بالك
• Uluwatu - بالي من قبل آريس وجاي

الجزء الأول - تصميم شريط التمرير الصورة

الخطوة 1: إعداد الخلفية

ابدأ بإنشاء ملف جديد بحجم 1000 × 700 بكسل. ملء الخلفية مع اللون # efc89e.

إضافة تراكب نقش باستخدام نقش بكسل مجاني من PSDfreemium.

الخطوة 2: قاعدة التمرير

تفعيل أداة المستطيل. قم بإنشاء مستطيل بحجم 940 × 450 بكسل. يمكنك استخدام أي لون ، لا يهم.

انقر نقرًا مزدوجًا فوق طبقة لفتح مربع الحوار Layer Style. أضف طبقة نمط إسقاط الظل ، التوهج الخارجي ، والسكتة الدماغية.

هذه هي النتيجة. قاعدة المنزلق لديها الآن إطار جميل مع ظل ناعم خلفه.

الخطوه 3

أضف صورة وضعها فوق قاعدة التمرير. اضغط Ctrl + Alt + G لتحويله إلى Clipping Mask وأدخل الصورة في شريط التمرير.

الخطوة 4: الشريط

ارسم شكل مستطيل بلون # f4e1ae لاستخدامه كشريط.

انقر نقرًا مزدوجًا فوق طبقة الشكل وقم بتنشيط Bevel and Emboss و Gradient Overlay و Pattern Overlay بالإعدادات التالية.

هذه هي النتيجة بعد إضافة أنماط الطبقة.

الخطوة 5

دعنا نضيف نسيج الورق على الشريط لجعله أكثر واقعية. ضع الملمس أعلى شكل الشريط. قم بتحويله إلى Clipping Mask بالضغط على Ctrl + Alt + G.

الخطوة 6

لنرسم بعض الظلال والضوء على الشريط. إنشاء طبقة جديدة فوق الشريط. الطلاء الأسود على الجزء السفلي من الشريط. قم بتحويله إلى Clipping Mask (Ctrl + Alt + G) ثم قلل درجة الشفافية إلى 10٪.

الخطوة 7

كرر العملية السابقة إلى الجزء العلوي من الشريط. لكن هذه المرة ، قم بإضافة تسليط الضوء باللون الأبيض ثم قم بتقليل التعتيم إلى 50٪.

الخطوة 8: غرز

تنشيط أداة القلم الرصاص. اضغط F5 لفتح إعداد الفرشاة. قم بتعيين حجم الفرشاة على 1 بكسل وزيادة المسافات حتى نحصل على خط منقط في منطقة المعاينة.

الخطوة 9

ارسم 1 × خط أسود أعلى الشريط. تقليل عتامة إلى 20 ٪. طبقة مكررة بالضغط على Ctrl + J. اضغط على Ctrl + I لعكس لونه. زيادة العتامة إلى 50 ٪. قم بتنشيط أداة التحريك ، ثم اضغط على السهم لأسفل والسهم الأيسر مرة واحدة لدفعها.

هذه هي النتيجة التي تم عرضها عند التكبير بنسبة 100٪.

الخطوة 10

كرر هذه العملية لرسم غرز أخرى على جانب آخر من الشريط.

الخطوة 11: إضافة الشكل المزخرف

اضبط اللون الأمامي إلى اللون الرمادي. استخدم فرشاة ناعمة بحجم 1 بكسل لرسم شكل مزخرف. كن مبدعًا ، يمكنك استخدام أي شكل تريده. بجانبه ، ارسم خطًا 1 بكسل ثم امسح الحافة الخارجية له باستخدام أداة ممحاة ناعمة. كرر الخط ، اقلبه أفقيًا ، ثم ضعه على الجانب الآخر.

الخطوة 12

حدد جميع الطبقات المزخرفة ودمجها في طبقة واحدة عن طريق الضغط على Ctrl + E. تكرار الشكل ثم وضعه تحت الشكل المزخرف الأصلي. اضغط على Ctrl + I لعكس لونه. قم بتنشيط أداة التحريك ، ثم اضغط على السهم لأسفل مرة واحدة لدفعها لأسفل بمقدار 1 بكسل.

الخطوة 13: معلومات الصورة

اكتب بيانات الصورة داخل الشريط.

الخطوة 14: الملاحة

بعد ذلك ، سنرسم بعض الدوائر للتنقل عبر الشرائح. ارسم شكل دائرة بلون: # 8d877c في الجزء السفلي من الشريط.

أضف Inner Shadow باستخدام الإعدادات التالية.

هذه هي النتيجة. الدائرة تتحول إلى حفرة ضحلة الآن.

الخطوة 15

اضغط مع الاستمرار على Alt ثم اسحب طبقة شكل دائرة لتكرارها.

الخطوة 16

لنقم بتعيين حالة نشطة على أحد هذه الروابط. حدد إحدى الدوائر وقم بتغيير لونها إلى # bebbb5. أضف Inner Shadow و Gradient Overlay و Stroke.

الخطوة 17

اضغط باستمرار على Ctrl ، ثم انقر فوق مصغر الشريط الأساسي في لوحة الطبقات. إنشاء طبقة جديدة تحت الشريط وملء باللون الأسود. قم بتنشيط Move Tool واضغط على السهم الأيسر والسفلي عدة مرات.

الخطوة 18

تليينه عن طريق أداء مرشح غاوسي طمس. انقر فوق تصفية> تمويه> غاوس تمويه.

الخطوة 19

ضع ظل الشريط فوق طبقة إطار التمرير. قم بتحويله إلى Clipping Mask بالضغط على Ctrl + Alt + G.

الخطوة 20

تقليل عتامة الظل إلى 40 ٪.

الخطوة 21

رسم الشريط الظل على الخلفية. تقليل درجة الشفافية إلى 20٪.

الخطوة 22

استخدم أداة القلم لرسم جزء من الشريط. اضبط لونه على # b68f63. ضعه خلف شريط التمرير.

هذه هي النتيجة التي نراها في التكبير 100 ٪.

الخطوة 23

تكرار الشكل الذي أنشأناه للتو ووضعه وراء الجزء العلوي من الشريط. الوجه رأسيا.

الخطوة 24: النتيجة النهائية في Photoshop

هذه هي النتيجة النهائية لدينا في برنامج فوتوشوب. بعد ذلك ، سنستمر في تحويله إلى شريط وظيفي.

الجزء الثاني - التحويل إلى HTML / CSS

الخطوة 25 - إعداد الملفات

إنشاء مجلد جديد يسمى بلدي صور-المتزلج. داخل هذا المجلد ، قم بإنشاء مستند HTML فارغ جديد (index.html و) ، ورقة أنماط فارغة (style.css) ، ومجلد للصور (IMG). نحتاج أيضًا إلى تضمين مكتبة jQuery و Nivo Slider في المجلد. أثناء استخدامنا لترميز HTML5 ، نحتاج إلى إضافة أداة اختراق IE لتمكين عناصر HTML5 على IE 8 أو أقل. سنستخدم برنامج نصي يسمى Modernizr لاستيعاب IE.

الخطوة 26 - ترميز HTML الأساسي

افتح index.html و في محرر الكود المفضل. تحديد DOCTYPE (نستخدم HTML5), رئيس عناصر (حيث نضيف عنوان المستندات وربط CSS و JavaScript (مكتبة jQuery و Nivo Slider و Modernizr). نضيف أيضًا شعبة غلاف (لتوسيط التخطيط), رأس العنصر ، والشريحة المجمع.

الخطوة 27 - شريحة PSD

افتح نموذج PSD وقم بقطع جميع الصور الضرورية. بالنسبة إلى الصورة ، دعنا نلتقط الصور التالية من sxc.hu (يلزم تسجيل الدخول ، إذا لم يكن لديك حساب بعد ، فيمكنك التسجيل مجانًا). قم بتغيير حجم كل الصور إلى 920 × 430 بكسل. ضع كل الصور في مجلد الصور (IMG).

1. Rinjani بواسطة Ciaciya
2. ستوبا التي كتبها أغنيس سيم
3. حصيلة نينو ساتريا
4. عروض تيمو بالك
5. Uluwatu - بالي من قبل آريس وجاي

الخطوة 28 - إنشاء رأس

أضف هذه الكود التالي بين

و

.

 
 شرائح الصور الخاصة بي 
 

الآن دعونا نضيف نمط إلى الرأس. نضيف أيضا نمط للجسم وعناصر المجمع. ضع كل الأنماط في ورقة الأنماط, style.css.

 / * Basic Styling * / body background: transparent url (img / bg.jpg)؛ font: 15px / 2 'Adobe Caslon Pro' ، Georgia ، Serif ؛ هامش: 0؛ الحشو: 0؛  a outline: 0 none #pagewrap margin: 120px auto؛ الحشو: 0؛ الموقف: النسبية. الطول: 100٪؛ العرض: 960px؛  رأس عرض: كتلة ؛ تعويم: الحق؛ الهامش اليمين: 40px؛ العرض: 192px؛ ض مؤشر: 52؛ الموقف: النسبية.  h1 الخلفية: عنوان url الشفاف (img / separator.png) أسفل مركز عدم التكرار ؛ / * إضافة سطر فاصل أسفل العنوان * / font-size: 18px؛ الخط الوزن: جريئة. الطول: 70px؛ خط الطول: 1.1؛ الهامش: 55px 10px 0 ؛ مواءمة النصوص: المركز؛ النص تحويل: الأحرف الكبيرة.  

الخطوة 29 - إضافة صورة المتزلج

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

.

ثم قم بإضافة الشريط والتعليق للصور.

 
 
 مصور فوتوغرافي:
 إنريكو نونزياتي
 موقعك:
 ناميب الصحراء
 نموذج:
 الميت فلي
 تاريخ:
 18 مارس 2011 
 
 مصور فوتوغرافي:
 لينا دهماناري
 موقعك:
 جزيرة لومبوك ، اندونيسيا
 نموذج:
 جبل رينجاني
 تاريخ:
 8 مايو 2008 
 
 مصور فوتوغرافي:
 أغنيس سيم
 موقعك:
 بوروبودور ، اندونيسيا
 نموذج:
 كبير ستوبا
 تاريخ:
 12 يونيو 2008 
 
 مصور فوتوغرافي:
 نينو ساتريا
 موقعك:
 تامان سفاري اندونيسيا
 نموذج:
 تالي الزرافة
 تاريخ:
 16 أغسطس 2009 
 
 مصور فوتوغرافي:
 تيمو بالك
 موقعك:
 اوبود ، بالي ، اندونيسيا
 نموذج:
 عروض
 تاريخ:
 20 ديسمبر 2009 
 
 مصور فوتوغرافي:
 آريس وجاي
 موقعك:
 أولواتو بالي
 نموذج:
 شاطئ جميل
 تاريخ:
 20 يوليو 2011 
 

الآن ، إذا فتحنا index.html و في المتصفح ، لدينا شيء مثل هذا:

الخطوة 30

ما زلنا بحاجة إلى إصلاح مظهر شريط التمرير باستخدام CSS.

 #slidewrap position: absolute؛ #slider position: نسبي؛ الطول: السيارات. العرض: 920px؛ الحد: 10px صلب # ff؛ box-shadow: 0 0 5px # 444؛ هامش: 10px؛  .ribbon background: عنوان url شفاف (img / info-bg.png) بلا تكرار ؛ الطول: 482px؛ العرض: 192px؛ الموقف: مطلقة؛ اليمين: 40px؛ أعلى: -3px. ض مؤشر: 50؛  #slider img position: absolute؛ قمة: 0px؛ اليسار: 0px؛ عرض لا شيء؛  

هذا ما لدينا الآن.

حاليًا ، قمنا بربط المكوّن الإضافي لـ Nivo لكننا لم نربط البرنامج النصي. لذلك دعونا ربط البرنامج النصي بإضافة وظائف JavaScript هذه بين و جزء.

الخطوة 31: شريط التمرير

الخطوة الأخيرة هي إضافة أسلوب شريط التمرير.

 / * أنماط Nivo Slider * / .nivoSlider position: نسبي؛  .nivoSlider img position: absolute؛ قمة: 0px؛ اليسار: 0px؛  / * إذا تم تغليف صورة في رابط * / .nivoSlider a.nivo-imageLink position: absolute؛ قمة: 0px؛ اليسار: 0px؛ عرض: 100٪؛ الطول: 100٪؛ الحدود: 0؛ الحشو: 0؛ هامش: 0؛ ض مؤشر: 6؛ عرض لا شيء؛  / * الشرائح والمربعات في Slider * / .nivo-slice display: block؛ الموقف: مطلقة؛ ض مؤشر: 5؛ الطول: 100٪؛  .nivo-box display: block؛ الموقف: مطلقة؛ ض مؤشر: 5؛  .nivo-directionNav display: none! important .nivo-html-caption display: none؛  .nivo-caption position: absolute؛ اليمين: 20px؛ مواءمة النصوص: المركز؛ أعلى: 130px؛ العرض: 192px؛ ض مؤشر: 60.  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute؛ أسفل: 10px؛ اليمين: 20px؛ الطول: 15px؛ العرض: 192px؛ مواءمة النصوص: المركز؛ العرض محجوب؛ ض مؤشر: 51؛  .nivo-controlNav a background: عنوان url شفاف (img / button.png) مركز عدم التكرار ؛ عرض: مضمنة كتلة. الطول: 14px؛ العرض: 14px؛ النص في الهامش: -9999px. المؤشر: المؤشر.  .nivo-controlNav .active background: transparent url (img / button_active.png)؛  

النتيجة النهائية + تحميل

هذه هي النتيجة النهائية لدينا ، انقر هنا لرؤية العرض التوضيحي للعمل.

لا يمكن تحقيق خطوة معينة؟ فيما يلي ملف PSD الخاص بالنتائج والمشروع الكامل الذي يمكنك اختباره واللعب معه.

• صورة المنزلق تعليمي مديرية الأمن العام ملف
• صورة المنزلق البرنامج التعليمي الكامل