पिक्सेल-आधारित वेबसाइट संसाधन, ट्यूटोरियल और उदाहरण
आधुनिक शैली की तुलना में पिक्सेल शैली की कलाकृति का उपयोग करके एक वेब इंटरफेस डिजाइन करना अपेक्षाकृत अस्पष्ट है। आपको वास्तव में कुछ अच्छे उदाहरण खोजने के लिए इंटरनेट पर मुट्ठी भर वेबसाइटों के माध्यम से खुदाई करने की आवश्यकता है; यह कठिन है लेकिन असंभव नहीं है.
इस लेख में मैंने एकत्र किया है पिक्सेल-आधारित वेबसाइट डिज़ाइन के लिए आपको जो कुछ भी चाहिए, उसका एक मेगा-संकलन. शुरुआती और विशेषज्ञों के लिए दर्जनों स्वस्थ ट्यूटोरियल समान हैं। मैंने कुछ उपयोगी उपकरण और संसाधन भी शामिल किए हैं, जिन्हें आप आगे विषय का पता लगाने के लिए खेल सकते हैं। यदि आप वीडियो गेम ग्राफिक्स या आइसोमेट्रिक पिक्सेल कलाकृति में रुचि रखते हैं तो आपको यह संग्रह पसंद आएगा.
साधन
ये वेब स्क्रिप्ट और डिजिटल ग्राफिक्स के लिए कुछ अद्वितीय विकास संसाधन हैं। जैसा कि आप पिक्सेल-वेबसाइट लेआउट बनाने में देरी करते हैं, तो आप हमेशा डॉट को सब कुछ का पालन करने की आवश्यकता महसूस नहीं करेंगे। वेब-आधारित संसाधनों का यह संग्रह बहुत अच्छी तरह से काम में और समय में फिर से आ सकता है.
spritely
मैं ओपन सोर्स कोड के साथ काम करने का आदी हो गया हूं। यही कारण है कि स्प्रिट की तरह एक jQuery प्लगइन ढूँढना हमेशा एक रोमांचक स्थिति है। त्वरित डायनामिक स्प्राइट एनीमेशन और स्क्रॉलिंग पृष्ठभूमि के लिए आप इस स्क्रिप्ट को अपनी वेबसाइट में शामिल कर सकते हैं.
संपूर्ण प्लगइन जावास्क्रिप्ट और HTML / CSS द्वारा संचालित है; कोई फ़्लैश या किसी अन्य बैकएंड भाषा की आवश्यकता नहीं है। प्रलेखन पृष्ठ सरल है फिर भी आपको आरंभ करने के लिए पर्याप्त है। डेवलपर्स के पास बहुत सारे नमूना डेमो हैं जिन्हें आप भी डाउनलोड कर सकते हैं.
वर्तमान स्थिर रिलीज़ संस्करण 0.6.1 है जो मध्यम रूप से अपडेट किया गया है। एनीमेशन प्रभाव ओपेरा, क्रोम, सफारी, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर 6+ के साथ संगत हैं। साथ ही Android या iOS पर चलने वाले किसी भी स्मार्टफोन ब्राउज़र को पूरी तरह से प्रस्तुत करना चाहिए.
FatPixels
यह मैटिस मार्टिनेज द्वारा विकसित एक शक्तिशाली ओपन सोर्स स्प्राइट स्क्रिप्ट है। FatPixels को ठीक से चलने के लिए केवल jQuery लाइब्रेरी की आवश्यकता होती है। हालांकि मैं कहूंगा कि स्प्रिटली एक अधिक जटिल एनीमेशन लाइब्रेरी है, वेब डेवलपर्स के लिए फैटपिक्सल बाजार में एक आला है.
आप एक .gif छवि बनाए बिना आसानी से एनिमेटेड स्प्राइट का निर्माण कर सकते हैं। वास्तव में, आप .jpg के रूप में सभी छवियों को निर्यात करने में सक्षम होंगे, और एक लंबे एनिमेटेड प्रभाव के लिए स्प्राइट्स की एक कतार बना सकते हैं। FatPixels होमपेज में इसे बनाने के लिए उपयोग किए जाने वाले jQuery कोड के ब्लॉक के साथ एक उत्कृष्ट डेमो है। यदि आप अपने स्प्राइट को चेतन करने के लिए कुछ हल्का देख रहे हैं तो फैटपिक्सल जाने का रास्ता है.
SmartSprites
"स्प्राइट" शब्द का उपयोग करते समय इसके विभिन्न अर्थ हैं। वीडियो गेम वर्ण या एनिमेटेड स्प्राइट आमतौर पर बहुत कम पिक्सेल के साथ प्रदान की जाने वाली छोटी छवियां होती हैं। हालांकि सीएसएस में, शब्द स्प्राइट एक एकल छवि को संदर्भित करता है जो आपकी वेबसाइट के लिए आइकन की एक शीट के रूप में कार्य करता है.
व्यक्तिगत छवियों के बजाय आपको एकल स्प्राइट शीट का उपयोग करने का कारण सर्वर संसाधनों पर कटौती करना है। कई छोटी लेकिन अलग-अलग छवियों के बजाय अपने सभी माउस को पकड़े हुए एक बड़ी छवि डाउनलोड करना बहुत जल्दी है। लेकिन इन सभी आइकन को फोटोशॉप में एक साथ रखना एक वास्तविक परेशानी हो सकती है; जरूरी नहीं कि मुश्किल भी हो, सिर्फ दोहराव और समय लेने वाली.
शुक्र है कि SmartSprites CSS जेनरेटर इस स्थिति के लिए एक शानदार संसाधन है। आप अपनी सभी छवियों के साथ GIF या PNG प्रारूप में तेज़ी से एक पिक्सेल-परिपूर्ण शीट उत्पन्न कर सकते हैं। इसके अतिरिक्त आप जल्दी से अपने क्या निर्धारित कर सकते हैं पृष्ठभूमि स्थिति x / y निर्देशांक प्रत्येक व्यक्तिगत आइकन के लिए होना चाहिए.
स्क्वीडफिंगर बीजी पैटर्न
पृष्ठभूमि छवियों को दोहराने का एक अच्छा सेट डिजाइन करना बहुत मुश्किल है। सीमलेस चित्र बनाने से पहले आपको कई दिन लग सकते हैं। लेकिन शुक्र है कि मुफ्त पृष्ठभूमि टाइलें डाउनलोड करने के लिए ऑनलाइन संसाधन हैं.
स्क्वीडफिंगरर्स पैटर्न गैलरी एक ऐसा संसाधन है। यह 150 से अधिक विभिन्न पिक्सेल-शैली पैटर्न प्रदान करता है जिन्हें आप अपनी परियोजनाओं पर डाउनलोड और उपयोग कर सकते हैं। शैलियों बहुत गतिशील और रंगीन हैं, और इस तरह की विविधता के लिए, यह काम रखने के लिए एक उत्कृष्ट संसाधन है। डाउनलोड लिंक .zip प्रारूप में हैं जो उन्हें कंप्यूटर के बीच स्थानांतरण करने के लिए छोटा और आसान बनाता है.
स्प्रिट संसाधन
मैं स्प्राइट्स रिसोर्स के बारे में पर्याप्त बातें नहीं कह सकता। यह एक वेबसाइट है जहां आप स्प्राइट शीट के लिए सभी विभिन्न गेमिंग सिस्टम के माध्यम से खोज कर सकते हैं। इनमें नक्शे, भवन, मेनू स्क्रीन, चरित्र स्प्राइट, आइकन और बहुत कुछ शामिल हो सकते हैं!
वे 2001 से ऑनलाइन हैं और वीडियो गेम की सूची में जबरदस्त वृद्धि हुई है। TSR के पीछे ग्राफिक डिजाइनरों के साथ एक पूरा समुदाय है जो इन विभिन्न गेमिंग स्प्राइट्स को चीर सकता है। यदि आप वीडियो गेम डिज़ाइन या ऑनलाइन फ़ैनसाइट्स के किसी भी रूप में रुचि रखते हैं, तो आपको इस अद्भुत गैलरी की जांच करनी होगी.
और भी दिलचस्प बहन की कुछ वेबसाइटें हैं जो TSR से दूर हैं। गेमिंग प्रशंसकों ने आधार बनावट और तेज चरित्र मॉडल को रिप करने में भी मदद की। कुल मिलाकर यह डिजिटल कलाकृति में स्प्राइट्स के साथ काम करने का एक बहुत बड़ा समुदाय है.
400 पिक्सेल
यह एक बहुत अच्छा वेब ऐप है जो एक आवश्यक मूल्य प्रदान नहीं करता है, लेकिन यह निश्चित रूप से साफ है। 400 पिक्सेल आपको एक पिक्सेल दस्तावेज़ ऑनलाइन बनाने और छवि को उनके ग्रिड में संग्रहीत करने देता है। साइट को एक समान फैशन में मिलियन डॉलर के होमपेज पर डिज़ाइन किया गया है, जिसमें प्रत्येक चित्र समग्र छवि में एक वर्ग ब्लॉक ले रहा है.
आप उनके वेब इंटरफ़ेस में कुछ वास्तव में नासमझ कलाकृति बनाकर खेल सकते हैं। यह कुछ ऐसा नहीं है जिसे आप तुरंत उठा लेंगे, लेकिन इसे लटकाए जाने के साथ खेलना मजेदार है। और यह एक अच्छा उपकरण है जिसे आप किसी भी कंप्यूटर से काम कर सकते हैं जिसमें इंटरनेट की सुविधा है.
प्रमुख उत्पादन
400 पिक्सेल के समान एक नस में आप पिक्सेल कलाकृति के लिए निजी ऑनलाइन स्टूडियो के रूप में मेजर आउटपुट का उपयोग कर सकते हैं। यह अभी भी विकास के शुरुआती चरण में है, लेकिन सभी मुख्य उपयोगकर्ता कार्यक्षमता पहले से ही उपलब्ध है। आप निशुल्क खाते के लिए पंजीकरण कर सकते हैं और तुरंत पिक्सेल कला बनाना शुरू कर सकते हैं.
प्रत्येक छवि को स्थानीय रूप से उनके सर्वर पर संग्रहीत किया जाता है जिसे आप वेबसाइटों और मंचों पर हॉटलिंक कर सकते हैं। कई चित्र जनता के लिए खुले हैं और आप उन्हें विभिन्न लेखकों या टैग के माध्यम से क्लिक करके देख सकते हैं। एक खोज बॉक्स भी है, लेकिन मुझे लगता है कि खोज परिणामों की गुणवत्ता हमेशा महान नहीं होती है.
मेजर आउटपुट एक अन्य सामुदायिक उपकरण की तरह लगता है जिसके बारे में जानने में मज़ा आता है, लेकिन शायद पिक्सेल कलाकारों के लिए बहुत अधिक शिक्षा मूल्य प्रदान नहीं कर सकता है.
ट्यूटोरियल
अब जब आपके पास संसाधन हैं, तो आइए इंटरनेट पर बिखरे हुए कई शिक्षा केंद्रों और मददगार ब्लॉग पोस्ट द्वारा उपलब्ध कराए गए ट्यूटोरियल देखें। मैंने वास्तव में काम का एक छोटा सा सेट एक साथ रखा है शुरुआती और मध्यवर्ती डिजाइनरों के लिए पिक्सेल कला ट्यूटोरियल. इनमें से कई ट्यूटोरियल गियर एडोब फोटोशॉप की ओर ध्यान केंद्रित करते हैं, लेकिन आप लगभग किसी भी उन्नत छवि संपादक के साथ अनुसरण कर सकते हैं.
डेरेक यू द्वारा पिक्सेल स्प्राइट ट्यूटोरियल
स्पष्ट रूप से Google पर दसियों सैकड़ों पिक्सेल-स्प्राइट ट्यूटोरियल हैं, लेकिन डेरेक यू की वेबसाइट पर यह विशेष ट्यूटोरियल यह शिक्षित करने में कई अलग-अलग चरणों से गुजरता है कि आप पिक्सेल स्प्राइट कैसे बनाते हैं। अधिकांश प्रक्रिया को सुव्यवस्थित और एक तरह से समझाया गया है जिससे शुरुआती लोग तुरंत कार्रवाई में कूद सकें.
वीडियो गेम के प्रशंसक इस ट्यूटोरियल को पसंद करेंगे क्योंकि आपको इन विशिष्ट ग्राफिक्स को बनाने में पीछे-पीछे के दृश्य मिलते हैं। मैं वीडियो गेम पिक्सेल कलाकृति के साथ एक वेबसाइट लेआउट ढूंढना पसंद करता हूं जो पूरे डिजाइन में फंसा हुआ है। यह उदासीनता का एक अनूठा अर्थ प्रदान करता है, और यह कुछ ऐसा है जो आपको हर जगह नहीं मिलता है। डेरेक के 10-स्टेप ट्यूटोरियल सीरीज़ पर जो भी कारण शुरू हो सकता है, उसके लिए कोई भी अपना खुद का पिक्सेल स्प्रिट बनाना चाहता है.
ब्रैंडन ट्रेब द्वारा पिक्सेल कला के लिए फ़ोटोशॉप को कॉन्फ़िगर करना
यहाँ पिक्सेल कलाकृति के क्षेत्र में शुरुआती की ओर एक और सही ट्यूटोरियल है। ब्लॉग पोस्ट ब्रैंडन ट्रेब द्वारा लिखा गया है जो एक शानदार डिजाइनर और मोबाइल डेवलपर है। आप इस विस्तृत गाइड में पिक्सेल-आधारित फ़ोटोशॉप कला के सभी प्रकार की उपयोगी जानकारी पा सकते हैं.
आपको पता होना चाहिए कि फ़ोटोशॉप में वरीयताओं को कैसे सेटअप करना है ताकि निर्यात करते समय आपकी पिक्सेल कलाकृति अजीब न दिखें या गुणवत्ता खो दें। आप वास्तव में एक अच्छी तस्वीर की गुणवत्ता प्राप्त करने के लिए आवश्यक है बहुत अनुकूलन जानने के लिए आश्चर्य हो सकता है.
रसेल टेट द्वारा ड्रॉइंग हैंड-क्राफ्टेड पिक्सल्स
यहां फ़ोटोशॉप में हाथ से खींची गई पिक्सेल कला के लिए तकनीकों से भरा एक और अद्भुत ट्यूटोरियल है। पिक्सेल कला तकनीकों का यह संग्रह केवल आश्चर्यजनक है। किसी को भी जो सामग्री के माध्यम से skims सबसे अधिक संभावना है कि कुछ वे पहले पता नहीं था मिल जाएगा.
घास और छाल पर बनावट बनाने के बारे में विस्तृत विवरण हैं; पिक्सेल कलाकृति को क्लोन करने के तरीके पर भी ध्यान दें कि आपने इसे एक आइकन डिज़ाइन में बदल दिया है। यह सब हर क्षेत्र में अभ्यास और सटीक करने के लिए नीचे आता है। जो लोग वास्तव में भावुक हैं, वे इसे कुछ महीनों के भीतर अपने पिक्सेल-शैली के विचारों के लिए एक ठोस तकनीक ढूंढेंगे.
डैनियल स्टर्नलिच द्वारा एक सीएसएस / जेएस गेम पोर्टफोलियो विकसित करना
यहां सीएसएस / जेएस के साथ गेमिंग पोर्टफोलियो को कोड करने के तरीके के बारे में स्मैशिंग पत्रिका का एक ट्यूटोरियल है, जो पोकेमॉन गेम श्रृंखला से कई स्प्राइट्स का उपयोग करता है। लेखक डैनियल स्टर्नलिच हैं, जो इस गेमिंग-आधारित लेआउट पर अपने व्यक्तिगत पोर्टफोलियो को चलाने के लिए भी होते हैं.
वेबसाइट एक आरपीजी दुनिया के रूप में कार्य करती है जहां आप कीबोर्ड के साथ किसी वर्ण को नियंत्रित करते हैं। आप विभिन्न भवनों में प्रवेश कर सकते हैं जो फिर संपर्क विवरण और पोर्टफोलियो प्रविष्टियों जैसी जानकारी लाते हैं.
मैं वास्तव में इस ट्यूटोरियल से प्यार करता हूं, और यह वेबसाइट विकास के साथ पिक्सेल कलाकृति को संयोजित करने का एक रोमांचक तरीका है। भले ही आप जावास्क्रिप्ट के बारे में ज्यादा न जानते हों लेकिन यह अभी भी एक सुपर दिलचस्प लेख है। मैं कुछ कोड के माध्यम से चला गया हूं और इस तरह के एक रचनात्मक ट्यूटोरियल के लिए डैन को जबरदस्त तारीफ करनी चाहिए। कोई भी पोकेमॉन कट्टरपंथी निश्चित रूप से अपने विचारों के साथ प्यार में पड़ जाएगा.
मैट्रिअक्स द्वारा आइसोमेट्रिक पिक्सेल ट्यूटोरियल
इस छोटी सी वेबसाइट gas13.ru में मेरे द्वारा देखे गए कुछ सबसे विलक्षण और पेशेवर पिक्सेल ट्यूटोरियल हैं। आइसोमेट्रिक पूल ट्यूटोरियल में आपको चमकदार ब्लॉक और पानी की बनावट बनाने के लिए पेश किया जाता है। इसके अतिरिक्त आपको साइडबार में अन्य सभी आइसोमेट्रिक पिक्सेल टट्स के लिए संसाधन मिलेंगे.
सीखने के लिए बहुत कुछ है: आप वीडियो गेम और वेबसाइट पृष्ठभूमि के लिए एक स्टोरफ्रंट, पिक्सेल स्प्राइट, या यहां तक कि विस्तृत बनावट भी डिज़ाइन कर सकते हैं। मुझे यकीन नहीं है कि यह लेखक अभी भी सक्रिय रूप से सामग्री प्रकाशित कर रहा है, लेकिन मौजूदा लेख शुरुआती जानने के लिए मूल बातें सीखने के लिए पर्याप्त से अधिक हैं.
केविन चालौक्स द्वारा स्टूडियो पुरलौक्स पिक्सेल ट्यूटोरियल
अब जब मैं सभी सर्वश्रेष्ठ पिक्सेल ट्यूटोरियल सूचीबद्ध कर रहा हूं तो मैं निश्चित रूप से शुरुआत के लिए इस अधिकार को शामिल करूंगा। पिक्सेल कलाकृति पर यह संपूर्ण ट्यूटोरियल न्यूबॉक्स् के लिए एक महान अनुवर्ती लेख है। आपको बहुत शुरुआत से ओपन सोर्स सॉफ्टवेयर जैसे GIMP या Paint.NET में पेश किया जाएगा.
आप सीखेंगे कि छवियों और पिक्सेल डिज़ाइन के कई पहलुओं को कैसे निर्यात करें जैसे कि डीथरिंग और एंटी-अलियासिंग। इसके साथ पालन करने के लिए कई अलग-अलग तकनीकें हैं। आपको रेट्रो 8-बिट और 16-बिट वीडियो गेम को देखकर कुछ डिज़ाइन विचारों को चुनना चाहिए.
लेखक केविन चेल्क्स ने डेरेक यू के पिक्सेल स्प्राइट ट्यूटोरियल (पहले सूचीबद्ध) का श्रेय दिया है और उल्लेख किया है कि यह प्रेरणा का एक स्रोत के रूप में है जब यह पहली बार शुरू होता है.
कायला नाइट द्वारा एक बेहतर फ़ेविकॉन बनाएं
वेब डिजाइनर अक्सर यह भूल जाते हैं कि फ़ेविकॉन (पसंदीदा आइकन) छवि किसी भी ब्रांडिंग योजना का एक बड़ा हिस्सा है। सभी सबसे लोकप्रिय वेबसाइटों को उनके 16 × 16 फ़ेविकॉन द्वारा पहचाना जा सकता है। जब आप इस तरह के सीमित कैनवास के साथ काम कर रहे होते हैं, तो आप पिक्सेल-घनी कलाकृति और चित्रों से निपटने के लिए मजबूर होते हैं। OXP का यह फ़ेविकॉन ट्यूटोरियल दोनों विचारों के संयोजन का एक उत्कृष्ट काम करता है.
इस ट्यूट से, आप समझ सकते हैं कि फ़ेविकॉन बनाते समय पिक्सेल कला इतनी फायदेमंद क्यों होती है। एक .ico फ़ाइल निर्यात करने के लिए उपकरण और ठोस तकनीकें भी हैं। इसमें शामिल है वेब के चारों ओर से लोकप्रिय फेविकॉन्स का एक छोटा शोकेस.
यह एक और संसाधन है जो मुझे लगता है कि सभी वेब डिजाइनरों को फायदा हो सकता है। यह फ़ेविकॉन बनाने और सख्त पिक्सेल सीमाओं के साथ काम करने के लिए खुद को शिक्षित करने का अधिकार है.
शोकेस गैलरी
मैं इस लेख को पिक्सेल स्टाइल वेबसाइट डिजाइन की एक अच्छी गैलरी के साथ बंद करना चाहता हूं। मैंने कई विविध कलात्मक विज़न के साथ विभिन्न लेआउट के 40 उदाहरणों को शामिल किया है। पिक्सेलयुक्त कलाकृति का चलन केवल मुख्यधारा की वेबसाइटों के भीतर फिर से उभरने की शुरुआत है। मुझे उम्मीद है कि पिक्सेल साइटों का यह अलग शोकेस दुनिया भर के वेब डेवलपर्स के लिए प्रेरणा का स्रोत पेश कर सकता है.
अर्थबाउंड सेंट्रल
PixelJam
रेड रोक इंटरएक्टिव मार्केटिंग
ईजॉय ब्लॉग
तमागो पिक्सेल
pixelHugger
पिक्सेल देवी ग्राफिक्स
8-बिट एचटीएमएल 5 कैनवस साइकिल
डैनियल स्टर्नलिच
ट्रोल्स की सेना
ब्लॉकहेड पिक्स ऐप
madPXL
supertott 2.0
ClassicGaming
आरपीजी टूलकिट ट्यूटोरियल
शहर निर्माता
अंतिम काल्पनिक XIII-2
कवइहन्नह पिक्सेल कला
सैंडबॉक्स
मिस्टर गलत
पिक्सेल फ्रीक
नैस्क पिक्सेल आर्ट
Paxjah
FoolsTown
सिर के बल
LOVEPIXEL
हेंक नीबॉर्ग
Iriescope
iamnotadoll
SweetPIX
Megapont
मिनी महानगर
हायो वैन रीक
Pixeltemple स्टूडियो
निंदा करना
पिक्सेल संग्रहालय
QuickHoney
Polpo.net
spiv.cz
4 असली आटा
