फ़ोटोशॉप और jQuery का उपयोग करके एक छवि स्लाइडर कैसे बनाएं

निस्संदेह, छवि स्लाइडर व्यापार वेब डिजाइन में सबसे अधिक उपयोग किए जाने वाले तत्वों में से एक है, इसके अपेक्षाकृत बड़े आकार के कारण जो साइट पर आने पर आगंतुक का ध्यान आकर्षित करने में सक्षम है। हालाँकि वेब ने छवि स्लाइडर की उपयोगिता के बारे में फिर से सोचना शुरू कर दिया है, फिर भी इसे वेब डिज़ाइन उद्योग के नवागंतुक के लिए सीखना चाहिए.

इस वेब डिज़ाइन ट्यूटोरियल में, हम फ़ोटोशॉप का उपयोग करके ऊपर कस्टम इमेज स्लाइडर बनाना सीखेंगे, जिसे आप यहाँ से अंतिम परिणाम का पूर्वावलोकन कर सकते हैं। न केवल हम इसे फ़ोटोशॉप में चित्रित करेंगे, हम इसे HTML / CSS में परिवर्तित करके और इसके भयानक स्लाइडिंग प्रभाव के लिए jQuery जोड़कर एक कार्यात्मक डिज़ाइन में बदल देंगे।.

बहुत सारे जटिल बिट्स की तरह लगता है, लेकिन वास्तव में यह बहुत सरल है और समझने में बहुत आसान है, तो चलिए शुरू करते हैं!

छवि स्लाइडर को अपनाने के बारे में अधिक रुचि और इसे रास्ते पर अनुकूलित करें? यहां आपके लिए समर्पित पोस्ट हैं.

• छवि स्लाइडर: 23 jQuery स्लाइडर
• छवि स्लाइडर: 18 WordPress प्लगइन्स

शुरू करना

इस ट्यूटोरियल के लिए आपको निम्नलिखित संसाधनों की आवश्यकता होगी:

• 26 पुनरावृत्ति पिक्सेल पैटर्न PSDfreemium से.
• jQuery पुस्तकालय
• Nivo स्लाइडर प्लगइन
• Modernizr
• VandelayPremier से कागजी बनावट मिला
• (वैकल्पिक) ओवरडोस से 13 मुख्यालय पुराने पेपर बनावट
• सियानिया द्वारा रिनजनी
• एग्नेस सिम द्वारा स्तूप
• टैलो नीनो सतरिया द्वारा
• टिमो बाल्क द्वारा की पेशकश
• उलीवतु-बाली आरिस विज द्वारा

भाग I - डिजाइनिंग इमेज स्लाइडर

चरण 1: पृष्ठभूमि की स्थापना

1000 × 700 px आकार के साथ एक नई फ़ाइल बनाकर प्रारंभ करें। रंग के साथ पृष्ठभूमि भरें # efc89e.

PSDfreemium से मुक्त पिक्सेल पैटर्न का उपयोग करके पैटर्न ओवरले जोड़ें.

चरण 2: स्लाइडर आधार

आयत उपकरण सक्रिय करें। 940 × 450 पीएक्स आकार के साथ एक आयत बनाएं। आप किसी भी रंग का उपयोग कर सकते हैं, इससे कोई फर्क नहीं पड़ता.

लेयर स्टाइल डायलॉग बॉक्स खोलने के लिए डबल क्लिक लेयर। लेयर स्टाइल ड्रॉप शैडो, आउटर ग्लो और स्ट्रोक लगाएं.

यह परिणाम है। स्लाइडर आधार में अब इसके पीछे नरम छाया के साथ एक अच्छा फ्रेम है.

चरण 3

एक तस्वीर जोड़ें और इसे स्लाइडर बेस के ऊपर रखें। Ctrl + Alt + G को हिट करने के लिए उसे क्लिपिंग मास्क में बदलें और स्लाइडर में फोटो डालें.

चरण 4: रिबन

रिबन के रूप में इस्तेमाल होने के लिए रंग # f4e1ae के साथ एक आयत आकृति बनाएं.

आकृति की परत पर डबल क्लिक करें और निम्नलिखित सेटिंग्स के साथ बेवेल और एम्बॉस, ग्रेडिएंट ओवरले और पैटर्न ओवरले को सक्रिय करें.

लेयर स्टाइल्स को जोड़ने के बाद यह परिणाम है.

चरण 5

आइए इसे और अधिक यथार्थवादी बनाने के लिए रिबन पर पेपर बनावट जोड़ें। रिबन के आकार के ऊपर बनावट रखें। इसे Ctrl + Alt + G दबाकर क्लिपिंग मास्क में बदलें.

चरण 6

आइए रिबन पर कुछ छाया और हाइलाइट पेंट करें। रिबन के ऊपर नई परत बनाएं। रिबन के निचले हिस्से पर काला पेंट करें। इसे क्लिपिंग मास्क (Ctrl + Alt + G) में बदलें और फिर इसकी अपारदर्शिता को 10% तक कम करें.

चरण 7

रिबन के ऊपरी हिस्से में पिछली प्रक्रिया को दोहराएं। लेकिन इस बार, सफेद रंग से हाइलाइट जोड़ें और फिर इसकी अपारदर्शिता को 50% तक कम करें.

चरण 8: टाँके

पेंसिल टूल को सक्रिय करें। ब्रश सेटिंग खोलने के लिए F5 मारो। ब्रश के आकार को 1 px पर सेट करें और जब तक हमें पूर्वावलोकन क्षेत्र पर एक बिंदीदार रेखा नहीं मिलती, तब तक रिक्ति को बढ़ाएं.

चरण 9

रिबन के ऊपर 1 px काली रेखा खींचें। इसकी Opacity को 20% तक कम करें। अपने रंग को पलटने के लिए Ctrl + J. Hit Ctrl + I दबाकर डुप्लीकेट परत। अपारदर्शिता बढ़ाकर 50% करना। मूव टूल को सक्रिय करें और फिर एक बार इसे दबाने के लिए एरो और लेफ्ट एरो को दबाएँ.

यहां परिणाम 100% आवर्धन पर देखा गया है.

चरण 10

रिबन के दूसरी तरफ अन्य टाँके खींचने के लिए इस प्रक्रिया को दोहराएं.

चरण 11: अलंकृत आकृति जोड़ें

ग्रे के लिए अग्रभूमि रंग सेट करें। एक अलंकृत आकार खींचने के लिए आकार 1 पीएक्स के साथ नरम ब्रश का उपयोग करें। रचनात्मक रहें, आप अपनी पसंद के किसी भी आकार का उपयोग कर सकते हैं। इसके बगल में, 1 पीएक्स लाइन खींचना और फिर नरम इरेज़र टूल का उपयोग करके इसके बाहरी किनारे को मिटा दें। लाइन को डुप्लिकेट करें, इसे क्षैतिज रूप से फ्लिप करें, और इसे दूसरी तरफ रखें.

चरण 12

सभी अलंकृत परतों का चयन करें और इसे Ctrl + E. डुप्लिकेट आकार में दबाकर एक परत में मर्ज करें और फिर इसे मूल अलंकृत आकार के नीचे रखें। Ctrl + I को उसका रंग उल्टा करने के लिए मारो। मूव टूल को सक्रिय करें और फिर 1 पीएक्स डाउन करने के लिए एक बार नीचे तीर दबाएं.

चरण 13: फोटो जानकारी

रिबन के अंदर फोटो डेटा टाइप करें.

चरण 14: नेविगेशन

अगला, हम स्लाइड नेविगेशन के लिए कुछ मंडलियां बनाएंगे। रंग के साथ एक सर्कल आकार बनाएं: रिबन के निचले भाग पर # 8d877c.

निम्नलिखित सेटिंग्स का उपयोग करके इनर शैडो जोड़ें.

यह परिणाम है। सर्कल अब उथले छेद में बदल रहा है.

चरण 15

Alt को पकड़ें और फिर उसे डुप्लिकेट करने के लिए सर्कल शेप लेयर खींचें.

चरण 16

आइए इनमें से एक लिंक पर सक्रिय स्थिति सेट करें। सर्कल में से एक का चयन करें और उसका रंग # bebbb5 में बदलें। इनर शैडो, ग्रैडिएंट ओवरले और स्ट्रोक जोड़ें.

चरण 17

Ctrl दबाए रखें और फिर लेयर्स पैनल में रिबन बेस थंबनेल पर क्लिक करें। रिबन के नीचे नई परत बनाएं और इसे काले रंग से भरें। मूव टूल सक्रिय करें और बाएं और नीचे तीर को कुछ बार हिट करें.

चरण 18

इसे गाऊसी ब्लर फिल्टर लगाकर नरम करें। फ़िल्टर> ब्लर> गाऊसी ब्लर पर क्लिक करें.

चरण 19

स्लाइडर फ्रेम परत के ऊपर रिबन छाया रखें। इसे Ctrl + Alt + G दबाकर क्लिपिंग मास्क में बदलें.

चरण 20

छाया अपारदर्शिता को 40% तक कम करें.

चरण 21

पृष्ठभूमि पर रिबन छाया पेंट करें। इसकी अपारदर्शिता को 20% तक कम करें.

चरण 22

रिबन का पिछला हिस्सा खींचने के लिए पेन टूल का उपयोग करें। इसका रंग # b68f63 पर सेट करें। इसे स्लाइडर के पीछे रखें.

यह 100% आवर्धन पर देखा गया परिणाम है.

चरण 23

हमने जो आकृति बनाई है उसे डुप्लिकेट करें और इसे रिबन के शीर्ष के पीछे रखें। इसे लंबवत पलटें.

चरण 24: फोटोशॉप में अंतिम परिणाम

यह फोटोशॉप में हमारा अंतिम परिणाम है। अगला, हम इसे एक कार्यात्मक स्लाइडर में कोड करना जारी रखेंगे.

भाग II - HTML / CSS में परिवर्तित

चरण 25 - फ़ाइलों की स्थापना

नामक एक नया फ़ोल्डर बनाएँ मेरे-फोटो-स्लाइडर. इस फ़ोल्डर के अंदर, एक नया रिक्त HTML दस्तावेज़ बनाएं (index.html), खाली स्टाइलशीट (style.css), और छवियों के लिए फ़ोल्डर (img)। हमें फ़ोल्डर में jQuery लाइब्रेरी और Nivo स्लाइडर प्लगइन भी शामिल करना होगा। जैसा कि हम HTML5 मार्कअप का उपयोग करते हैं, हमें IE 8 या नीचे के HTML5 तत्वों को सक्षम करने के लिए IE हैक को जोड़ने की आवश्यकता है। हम IE को समायोजित करने के लिए मॉर्डनिज़्र नामक स्क्रिप्ट का उपयोग करेंगे.

चरण 26 - मूल HTML मार्कअप

खुला index.html अपने पसंदीदा कोड संपादक में। को परिभाषित करो DOCTYPE (हम HTML5 का उपयोग करते हैं), सिर तत्व (जहां हम दस्तावेज़ों का शीर्षक जोड़ते हैं और सीएसएस और जावास्क्रिप्ट (jQuery लाइब्रेरी, Nivo स्लाइडर, और मॉडर्निज़र) लिंक करते हैं। हम भी जोड़ते हैं div आवरण (लेआउट केंद्र में), हैडर तत्व, और स्लाइड आवरण.

चरण 27 - स्लाइस पीएसडी

PSD मॉकअप खोलें और सभी आवश्यक छवियों को स्लाइस करें। चित्र के लिए, चलिए sxc.hu के चित्रों का अनुसरण करते हैं (लॉगिन आवश्यक है, यदि आपके पास अभी तक कोई खाता नहीं है, तो आप मुफ्त में साइन अप कर सकते हैं)। सभी छवियों को 920 × 430 px पर आकार दें। सभी चित्र छवि फ़ोल्डर में रखें (img).

1. सियानिया द्वारा रिनजनी
2. एग्नेस सिम द्वारा स्तूप
3. टैलो नीनो सतरिया द्वारा
4. टिमो बाल्क द्वारा की पेशकश
5. उलीवतु-बाली आरिस विज द्वारा

चरण २ - हेडर बनाएँ

इन निम्नलिखित कोड को बीच में जोड़ें

तथा

.

 
 मेरा फोटो स्लाइड 
 

अब हेडर में स्टाइल जोड़ते हैं। हम शरीर और आवरण तत्वों के लिए शैली भी जोड़ते हैं। सभी शैलियों को स्टाइलशीट में डालें, style.css.

 / * बेसिक स्टाइलिंग * / बॉडी बैकग्राउंड: पारदर्शी url (img / bg.jpg); फ़ॉन्ट: 15px / 2 'एडोब कैसलॉन प्रो', जॉर्जिया, सेरिफ़; मार्जिन: 0; गद्दी: 0;  एक रूपरेखा: 0 कोई नहीं #pagewrap मार्जिन: 120px ऑटो; गद्दी: 0; स्थिति: रिश्तेदार; ऊंचाई: 100%; चौड़ाई: 960px;  शीर्ष लेख प्रदर्शन: ब्लॉक; सही नाव; मार्जिन-सही: 40px; चौड़ाई: 192px; z- सूचकांक: 52; स्थिति: रिश्तेदार;  h1 बैकग्राउंड: ट्रांसपेरेंट url (img / सेपरेटर। png) नो-रिपीट सेंटर बॉटम; / * शीर्षक के नीचे एक विभाजक रेखा जोड़ें * / फ़ॉन्ट-आकार: 18 पीएक्स; फोंट की मोटाई: बोल्ड; ऊँचाई: 70px; line-height: 1.1; मार्जिन: 55px 10px 0; text-align: केंद्र; पाठ बदलने: अपरकेस;  

चरण 29 - फोटो स्लाइडर जोड़ें

अब हम अपने दस्तावेज़ के मुख्य भाग, फोटो स्लाइडर में कोड जोड़ने जा रहे हैं। आइए पहले तस्वीरों को जोड़ते हैं। इन निम्नलिखित कोड को बीच में रखें

.

और फिर तस्वीरों के लिए रिबन और कैप्शन जोड़ें.

 
 
 फोटोग्राफर:
 एनरिको नूनाज़ती
 स्थान:
 नामीब रेगिस्तान
 आदर्श:
 मृत वेली
 दिनांक:
 १ मार्च २०११ 
 
 फोटोग्राफर:
 लीना धामनारी
 स्थान:
 लोम्बोक द्वीप, इंडोनेशिया
 आदर्श:
 रिनजनी पर्वत
 दिनांक:
 8 मई, 2008 
 
 फोटोग्राफर:
 एग्नेस सिम
 स्थान:
 बोरोबुदुर, इंडोनेशिया
 आदर्श:
 बड़ा स्तूप
 दिनांक:
 जून 12, 2008 
 
 फोटोग्राफर:
 निनो सतिया
 स्थान:
 तमन सफारी इंडोनेशिया
 आदर्श:
 टैली जिराफ
 दिनांक:
 16 अगस्त, 2009 
 
 फोटोग्राफर:
 तिमो बालक
 स्थान:
 उबुद, बाली, इंडोनेशिया
 आदर्श:
 प्रसाद
 दिनांक:
 20 दिसंबर, 2009 
 
 फोटोग्राफर:
 आरिस विज
 स्थान:
 Uluwatu बाली
 आदर्श:
 सुंदर समुद्र तट
 दिनांक:
 जुलाई २०, २०११ 
 

अब, अगर हम खोलते हैं index.html ब्राउज़र में, हमारे पास कुछ इस तरह है:

चरण 30

हमें अभी भी CSS का उपयोग करके स्लाइडर की उपस्थिति को ठीक करने की आवश्यकता है.

 # स्लीवेरेप स्थिति: निरपेक्ष; # स्लीडर स्थिति: रिश्तेदार; ऊंचाई: ऑटो; चौड़ाई: 920px; बॉर्डर: 10px ठोस #fff; बॉक्स-छाया: 0 0 5px # 444; मार्जिन: 10px;  .ribbon बैकग्राउंड: पारदर्शी url (img / info-bg.png) no-repeat; ऊँचाई: 482px; चौड़ाई: 192px; स्थिति: पूर्ण; सही: 40px; शीर्ष: -3px; z- सूचकांक: 50;  # साइडर img स्थिति: निरपेक्ष; शीर्ष: 0px; बाएं: 0px; कुछ भी डिस्प्ले मत करो;  

यह अब हमारे पास है.

वर्तमान में, हमने Nivo स्लाइडर प्लगइन को जोड़ा है, लेकिन हमने स्क्रिप्ट को हुक नहीं किया है। तो आइये इन जावास्क्रिप्ट फंक्शन्स को आपस में जोड़कर स्क्रिप्ट को हुक करते हैं तथा तत्त्व.

चरण 31: स्लाइडर शैली

अंतिम चरण स्लाइडर की शैली को जोड़ रहा है.

 / * Nivo स्लाइडर शैलियों * / .nivoSlider स्थिति: रिश्तेदार;  .nivoSlider img स्थिति: निरपेक्ष; शीर्ष: 0px; बाएं: 0px;  / * यदि कोई चित्र लिंक में लिपटा है * / .nivoSlider a.nivo-imageLink स्थिति: निरपेक्ष; शीर्ष: 0px; बाएं: 0px; चौड़ाई: 100%; ऊंचाई: 100%; सीमा: 0; गद्दी: 0; मार्जिन: 0; z- सूचकांक: 6; कुछ भी डिस्प्ले मत करो;  / * स्लाइस में स्लाइस और बक्से * / .निवो-स्लाइस प्रदर्शन: ब्लॉक; स्थिति: पूर्ण; z- सूचकांक: 5; ऊंचाई: 100%;  .nivo- बॉक्स प्रदर्शन: ब्लॉक; स्थिति: पूर्ण; z- सूचकांक: 5;  .nivo-दिशानव प्रदर्शन: कोई नहीं! महत्वपूर्ण .nivo-html- कैप्शन प्रदर्शन: कोई नहीं;  .nivo-कैप्शन स्थिति: निरपेक्ष; सही: 20px; text-align: केंद्र; शीर्ष: 130px; चौड़ाई: 192px; z- सूचकांक: 60;  .nivo-कैप्शन p मार्जिन: 0 .nivo-कैप्शन .title font-style :alalic .nivo-controlNav स्थिति: निरपेक्ष; bottom: 10px; सही: 20px; ऊँचाई: 15px; चौड़ाई: 192px; text-align: केंद्र; प्रदर्शन क्षेत्र; z- सूचकांक: 51;  .nivo-controlNav a बैकग्राउंड: पारदर्शी url (img / button.png) नो-रिपीट सेंटर सेंटर; display: inline-ब्लॉक; ऊँचाई: 14px; चौड़ाई: 14px; पाठ इंडेंट: -9999px; कर्सर: सूचक;  .nivo-controlNav। सक्रिय पृष्ठभूमि: पारदर्शी url (img / button_active.png);  

अंतिम परिणाम + डाउनलोड

यह हमारा अंतिम परिणाम है, कार्यशील डेमो देखने के लिए यहां क्लिक करें.

निश्चित कदम नहीं प्राप्त कर सकते? यहाँ परिणाम की PSD फ़ाइल और परीक्षण और आपके साथ खेलने के लिए पूरी परियोजना है.

• छवि स्लाइडर ट्यूटोरियल PSD फ़ाइल
• छवि स्लाइडर ट्यूटोरियल पूरा प्रोजेक्ट