Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator
Design

इलस्ट्रेटर से ब्राउज़र में एक वेब डिज़ाइन प्राप्त करने की युक्तियां

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

परिदृश्य: कोई आपको अपने नवीनतम वेब लेआउट के साथ एक इलस्ट्रेटर डॉक्यूमेंट को हाथ रखता है और इसे HTML और CSS के काम में बदलने के लिए आपका काम है। आइए देखें कि आप यह कैसे कर सकते हैं।

नोट: इस ट्यूटोरियल का उद्देश्य वेब उपयोग के लिए डिज़ाइन पूरी तरह से पुन: तैयार नहीं करना है। इसके बजाय, हम इलस्ट्रेटर के भीतर कार्यप्रवाह और सुविधाओं का पता लगाने के लिए इसका उपयोग करने जा रहे हैं जो हमें ऐसा करने में मदद करता है।

इलस्ट्रेटर फ़ाइल

आइए सवाल में डॉक्यूमेंट पर एक नज़र डालें:

इस ट्यूटोरियल में देखें कि हमारा उदाहरण लेआउट कैसे बनाया गया था

यह 404 पृष्ठ के लिए एक लेआउट है; एक पृष्ठ जो उपयोगकर्ताओं को बताता है कि जो भी वे ढूंढ रहे हैं वे नहीं मिल सकते हैं और उन्हें शायद कुछ और प्रयास करना चाहिए। हम एक शीर्षक, कुछ अनुदेशात्मक पैराग्राफ, एक सर्च फ़ॉर्म और बटन देख सकते हैं, साथ ही बहुत नीचे के टूलटिप्स वाले कुछ बटन देख सकते हैं।

पूरी चीज पृष्ठ के बीच में क्षैतिज और लंबवत रूप से फ्लोट दिखाई देती है इसमें पीले रंग का बैकग्राउंड, कुछ गर्म लहजे और यहां और वहां के शादौस को छोड़ दिया गया है। हम कहाँ शुरू करें?

आराम से!

हम इसके लिए पहिया को फिर से बदलने के लिए नहीं जा रहे हैं, चलो इसे खुद पर जितना संभव हो उतना आसान बनाते हैं। इलस्ट्रेटर इस के लिए HTML, CSS और JavavScript के एक साफ पैकेज का उत्पादन नहीं कर रहा है, न ही हम अपना समय बर्बाद करने से सब कुछ बर्बाद करने जा रहे हैं, तो हम इस परियोजना को एक किक-स्टार्ट देने के लिए Bootstrap की एक कॉपी ले लें।

वर्तमान में v3.1.1, जैसा कि आप देख सकते हैं..

मैंने Bootstrap डाउनलोड किया है, कुछ CSS और फ़ॉन्ट फाइलों को छूटा जिनकी हमें ज़रूरत नहीं है, फिर Mark Otto द्वारा Cover template पर आधारित एक index.html फ़ाइल को जोड़ा गया। माउस-क्लिक करने के चार मिनट और मेरे पास एक basic page है जो मोटे तौर पर जैसा दिखता है।

यह बहुत ज्यादा दिखाई नहीं दे सकता है, लेकिन हमने सिर्फ एक टन का समय बचाया है..

इस बिंदु से जारी रखने के लिए स्रोत फाइलें, 1-starting-point फ़ोल्डर में, GitHub रेपो में उपलब्ध हैं।

मार्कअप जोड़ना

अगले तार्किक कदम हमारे index.html (फिर से, इलस्ट्रेटर हमारे लिए ऐसा करने वाला नहीं है) को संरचनात्मक मार्कअप जोड़ना होगा। हमारे पास पहले से ही एक केंद्र-संरेखित कंटेनर है, div जिसमें क्लासेज inner cover: के साथ होती हैं:

इसके कुछ अतिरिक्त टुकड़े जोड़ते हैं:

हमने <h1> और <h2> शीर्षक टैग, कुछ पैराग्राफ और कुछ विशिष्ट Bootstrap फॉर्म मार्कअप (आप बूटस्ट्रैप डॉक्स से अधिक उदाहरण प्राप्त कर सकते हैं) जोड़ दिया है। प्रपत्र में form-inline का एक वर्ग है, एक मूल Bootstrap क्लास है जो हमारे फ़ॉर्म तत्वों को एक पंक्ति के साथ रखता है।

अंत में, आप तीन एंकर देखेंगे, सभी btn और btn-primary क्लासेज के साथ। यह हमारे बटन के रूप में काम करेगा। इस चरण में हमारे पास क्या है:

इस बिंदु पर हमने स्टाइल के मामले में कुछ भी नहीं किया है, CSS की एक भी पंक्ति नहीं, फिर भी धन्यवाद, Bootstrap के लिए हमने अपने पेज को प्रभावी ढंग से बनाया है, पॉलिश करने के लिए तैयार है।

टूल टिप्स को वर्किंग करें

कुछ भी जो बूटस्ट्रैप हमें मदद करने वाला है; टूलटिप्स आप Bootstrap docs में हमारे लिए उपलब्ध विभिन्न विकल्पों के बारे में अधिक पढ़ सकते हैं, लेकिन अभी के लिए हम अपने HTML के लिए आवश्यक सामग्री जोड़ते हैं।

प्रत्येक बटन को हम एक अतिरिक्त क्लास tip जोड़ते हैं, जो किसी टूलटिप की आवश्यकता होती है। हमें एक title attribute की आवश्यकता होती है जो टूलटिप के भीतर वास्तव में दिखाएगा:

bootstrap.min.js फ़ाइल जो हम पहले से ही खींच रहे हैं टूलटिप्स के लिए आवश्यक सभी JavaScript आवश्यक हैं। वास्तव में, इसमें अन्य JavaScript खिलौनों का भार है, जिनमें से बहुत से हमें इसकी ज़रूरत भी नहीं है, इसलिए किसी उत्पादन परिवेश में यह केवल उन चीजों को शामिल करना बुद्धिमान हो सकता है जो हम उपयोग कर रहे हैं। Bootstrap टूलटिप्स ऑप्ट-इन हैं, इसलिए वे स्वचालित रूप से कार्य नहीं करते हैं, हमें उन्हें प्रारंभ करने की आवश्यकता है। चलिए हमारे पृष्ठ के नीचे स्क्रिप्ट टैग के नीचे ऐसा करते हैं, जहां हमने अन्य JavaScript को बुलाया है:

हो गया। हमारे पास अब यह है:

भारी अंतर!

अब चलो कुछ स्टाइल्स की कोशिश करो

मैंने theme.css नामक परियोजना में एक तीसरी CSS फाइल डाल दी है और डॉक्यूमेंट <head> से इसकी ओर इशारा किया है। लेकिन स्टाइलशीट में हम क्या जोड़ते हैं?

हम मुख्य कंटेनर से शुरू करने जा रहे हैं। इलस्ट्रेटर में कंटेनर ऑब्जेक्ट का चयन करें और आप Layers पैनल में नोटिस करेंगे, इसका main नाम दिया गया है।

यह प्रासंगिक है। टीम की स्थिति में यह समझना बुद्धिमान है कि कैसे इस तरह के ऑब्जेक्ट का नाम होना चाहिए। आप देखेंगे कि हम CSS पैनल को क्यों खोलते हैं।

CSS प्रॉपर्टीज

उसी नाम के पैनल को प्रकट करने के लिए Window > CSS Properties पर जाएं। हमारे मुख्य ऑब्जेक्ट का चयन करके इसमें सभी प्रासंगिक स्टाइल्स शामिल होंगी जो हम सीधे हमारे स्टाइलशीट में पेस्ट कर सकते हैं। आप देखेंगे कि ये स्टाइल्स .main चयनकर्ता को लागू की गई हैं, जैसे कि हमारे ऑब्जेक्ट का नाम दिया गया है।

आगे बढ़ो और आप जो देखते हैं उसे प्रतिलिपि करें, फिर इसे theme.css फ़ाइल में सीधे पेस्ट करें। इन नियमों को हमारे कंटेनर तत्व पर लागू करने के लिए, हमें चयनकर्ता को वास्तव में क्या इस्तेमाल कर रहे हैं, उसे बदलने की आवश्यकता होगी (रखते हुए .main चयनकर्ता थोड़ा जोखिम भरा है क्योंकि हम इसे हमारे संपूर्ण साइट में कहीं और इस्तेमाल कर सकते हैं)। .main से बदलने के लिए .inner.cover और आपको अपने कंटेनर तत्व को एक सुंदर सुनहरा पीला, गोल कोनों और यहां तक कि एक बॉक्स शैडो के साथ बदलना चाहिए, सभी सभ्य क्रॉस-ब्राउज़र CSS के साथ लागू होते हैं।

CSS आयाम

आप देखेंगे कि हमारे CSS नियम यहां किसी भी चौड़ाई या ऊंचाइयों को शामिल नहीं करते हैं। यह एक अच्छी बात है; Bootstrap बहुत ज्यादा सबकी देखभाल कर रहा है, इसलिए हम वास्तव में सौंदर्यवादी स्टाइल्स की तलाश कर रहे हैं। CSS Properties Export Options बदलकर हमारे यहां हमारे आयाम शामिल हो सकते हैं, लेकिन हम उन्हें बाहर निकाल देंगे।

हमारे कंटेनर थोड़ी चौड़ी हैं, पहले से ही लागू स्टाइल्स के कारण, तो आइए उन आयामों को निम्न मीडिया क्वेरी से ओवरराइड करते हैं:

यह cover.css में पाया गया नियमों को ओवरराइड करता है, हमें स्क्रीन पर 400px की चौड़ाई कम से कम 992px चौड़ा दे। 400px डिजाइन के लिए बिल्कुल सही नहीं है, लेकिन मुझे व्यक्तिगत रूप से सच आयाम और फ़ॉन्ट-आकार थोड़ा छोटा लगता है, इसलिए मैं इसे vetoing कर रहा हूँ!

जब हम यहां होते हैं, तो मैं स्टाइल्स को बदलना चाहता हूं, इसलिए हम इस मीडिया क्वेरी के भीतर गोलाकार कोनों को भी लागू करते हैं। उन नियमों से निकालें जिन्हें आपने इलस्ट्रेटर से चिपकाया था और उन्हें इस तरह लागू करें:

अब हमें बड़ी स्क्रीन पर ऐसा कुछ होना चाहिए:

..और यह छोटे परदे पर:

विशिष्ट मापन

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

इलस्ट्रेटर में Measure Tool का चयन करें (आप इसे Eyedropper tool के साथ देखेंगे) और डिज़ाइन के किसी भी क्षेत्र को मापने के लिए कर्सर को खींचें। हम देख सकते हैं कि हमारे बाद के पैडिंग 25px हैं, तो आइए कि मैन्युअल रूप से हमारे स्टाइल्स पर लागू करें।

बेहतर

अन्य स्टाइल्स

हमारे पास बहुत से स्टाइल्स और ऑब्जेक्ट हैं, और यहां पर, यदि सब कुछ ठीक उसी तरह से नामित किया गया था, जैसा कि हम चाहते हैं, तो हम (इन प्रिंसिपल) आउटपुट को इलस्ट्रेटर से CSS का एक बड़ा ढेर बना सकते हैं ताकि यह सब काम करे। हालांकि, यहां ऑब्जेक्ट नामकरण के साथ कुछ विसंगतियाँ हैं (इससे बचने के लिए कुछ करीबी डिजाइनर / डेवलपर संचार की आवश्यकता होगी) और हम कुछ बाहरी कोड के साथ समाप्त कर सकते हैं जिनकी हमें आवश्यकता नहीं है।

इसके बजाय, अपने ऑब्जेक्ट का चयन करने और संबंधित CSS को आउटपुट करने के लिए तत्व से तत्व तक धैर्यपूर्वक काम करें। टाइपोग्राफी के साथ शुरू करें और देखते हैं कि इलस्ट्रेटर कितनी अच्छी तरह से करता है।

फोंट्स

पहली बातों में से एक आप देखेंगे कि किसी भी प्रकार के ऑब्जेक्ट में CSS शामिल हैं: font-family: Open Sans;

Open Sans एक मानक सिस्टम फ़ॉन्ट नहीं है और किसी भी ब्राउज़र में प्रदर्शित नहीं होगा, जहां उपयोगकर्ता ने इसे स्थापित नहीं किया है। इसलिए आपको Google फोंट पर जाने और वेबफ़ॉन्ट के जादू के माध्यम से पृष्ठ में इसे खींचने के लिए CSS लिंक को पकड़ना होगा।

Buttons

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

कोई CSS कोड उत्पन्न नहीं हुआ था। अनाम वस्तुओं के लिए CSS बनाने के लिए, या तो लेयर पैनल में ऑब्जेक्ट का नाम दें, या CSS निर्यात विकल्प संवाद में 'ऑब्जेक्ट्स के लिए CSS जेनरेट करें' विकल्प को सक्षम करें।

आगे बढ़ो और विकल्पों को खोलें जैसे हमने पहले चर्चा की थी, फिर सुनिश्चित करें कि आपने CSS के लिए जेड जेनरेट किए गए ऑब्जेक्ट्स की जांच की है। विकल्प हमारे बटन को एक नाम देना होगा, लेकिन विकल्प यहां ठीक है।

अब, हमारे सभी बटनों के चयन के साथ, हम Generate CSS को दबा सकते हैं और हमारे लिए स्टाइल्स का उत्पादन कर सकते हैं। दुर्भाग्य से, इलस्ट्रेटर प्रत्येक व्यक्तिगत ऑब्जेक्ट के लिए पूर्ण स्टाइल्स का उत्पादन करेगा, भले ही वे सभी एक ही नियम साझा करते हों। ऐसा लगता है कि हम आम Graphic Styles, Character Styles, Paragraph Styles, या सभी वस्तुओं को समान नाम भी देते हैं तो भी। वहां सुधार के लिए कक्ष, लेकिन हम कम से कम सामान्य स्टाइल्स को पकड़ सकते हैं और उन्हें एकाधिक ऑब्जेक्ट्स पर मैन्युअल रूप से लागू कर सकते हैं।

मैंने सर्च बटन के लिए स्टाइल्स की नकल की है, फिर इसे .btn, .btn:hover पर लागू किया है सुनिश्चित करें कि सभी Bootstrap स्टाइल्स को उपयुक्त रूप से अधिलेखित किया गया था। मैंने एक border: none;  Bootstrap की नीली सीमा से छुटकारा पाने के लिए देखते हैं कि हमें क्या मिलता है!

बुरा नहीं है, लेकिन सही नहीं है

यह बुरा नहीं है, लेकिन यह एकदम सही है। टेक्स्ट-शादौस का पालन नहीं किया गया है (वे पारदर्शिता की कमी महसूस कर रहे हैं), बटन पर ग्रिडियंट्स सही नहीं हैं और वे पूरी तरह से अपने बॉक्स-शादौस को गुम कर रहे हैं।

क्यूं करे?

संक्षेप में, इलस्ट्रेटर CSS निर्यात इस प्रकार की जटिल संरचना के लिए तैयार नहीं है (यह निष्पक्ष होना, यह बहुत जटिल है)। आइए सर्च बटन को देखें, जिसका हम लक्ष्य बना रहे हैं:

ये सुन्दर है। लेकिन इसे कितना भरता है, इसे बनाने के लिए ग्रेडिएंट्स और शादौस हैं:

आउच। शायद ही आश्चर्य की बात है कि इलस्ट्रेटर ने No कहा। सीमा-रेडियस भी समीकरण से बाहर रह गया है क्योंकि चीजें बहुत जटिल हो गई हैं।

आप मजाक नहीं कर रहे हैं..

इसके बजाय, मैं बस कुछ साधारण स्टाइल्स को लागू करने जा रहा हूँ और जटिल CSS (इस ट्यूटोरियल के बारे में है कि सब कुछ के बाद इलस्ट्रेटर हमारे लिए क्या कर सकता है) को दबाएं। संशोधित .btn स्टाइल इस तरह दिखते हैं:

CSS दक्षता के संदर्भ में यह सब वांछित होने के लिए बहुत कुछ छोड़ देता है, लेकिन हम प्रदर्शन के लिए जो इलस्ट्रेटर हमें देता है उसके साथ हम काम कर रहे हैं। आप बाद में वापस जाने के लिए और CSS को साफ करने के लिए बुद्धिमान होंगे, शायद CSSLint जैसे उपकरण का उपयोग कर भी।

Icons

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

बिटमैप निर्यात करना

प्रत्येक ग्राफ़िक का चयन करके, आप CSS को उसी तरीके से जेनरेट कर सकते हैं जो हमारे पास पहले है। Illustrator PNG फ़ाइलों के रूप में जटिल पथ निर्यात करने का विकल्प चुनता है, फिर उन तत्वों का उपयोग अपने तत्वों के लिए बैकग्राउंड के रूप में करें।

आपको उपयोग करने के लिए संपत्ति का एक समूह दिया जाएगा:

लेकिन, फिर से, यह सही नहीं है, और डिजाइन के कुछ पहलुओं को छोड़ देगा, अन्य मामलों में संदिग्ध स्टाइल्स को आउटपुट कर देगा, इसलिए यह दृष्टिकोण आपके भाग में कुछ परिष्कृत होगा। यह दृष्टिकोण भी रेटिना डिस्प्ले को खाते में लेने में विफल रहता है, संभावित रूप से हमें कुछ स्क्रीन पर उप-मानक ग्राफिक्स दे रहा है। वैसे भी, इन ग्राफिक्स के लिए outputted CSS इस तरह दिखता है:

SVG

मेरी वरीयता, एक वेब डिजाइनर के रूप में, इस मामले में एसवीजी के लिए जाना होगा, जो कुछ इलस्ट्रेटर बहुत अच्छा कर रहा है।

सबसे पहले, एक आइकन चुनें, फिर उसे सामान्य तरीके से क्लिपबोर्ड पर कॉपी करें (command + C)। उस ऑब्जेक्ट के SVG डेटा अब आपके लिए टेक्स्ट एडिटर (अद्भुत) में पेस्ट करने के लिए उपलब्ध है। अपनी वेब प्रोजेक्ट में एक नई फाइल खोलें, इसे "icon-contact.svg" पर कॉल करें और इसमें क्लिपबोर्ड सामग्री को पेस्ट करें।

अब आप उस SVG को अपनी index.html के मार्कअप में एक इमेज के रूप में सीधे जोड़ सकते हैं:

नमस्ते..

सभी प्रकार के तरीकों से आप एक वेब पेज में SVG को लागू कर सकते हैं; CSS के माध्यम से, पहले XML को बेस64 में परिवर्तित करके, इसे आपके मार्कअप इनलाइन में चिपकाकर, पसंद आपकी है (SVG फाइलों पर एक नज़र डालें: इलस्ट्रेटर से वेब पर अधिक जानकारी के लिए) हमारा दृष्टिकोण अभी ठीक है, हालांकि, आधुनिक ब्राउज़रों में कम से कम, इसलिए हम इसके साथ रहेंगे।

अन्य चिह्नों की प्रक्रिया दोहराएं, और..

हमने कर लिया!

थोड़े से अधिक tweaking (मैं फार्म तत्व में कुछ padding जोड़ दिया है) के साथ आप ऐसा कुछ होना चाहिए था:

बुरा नहीं! यह 100% Illustrator ग्राफिक को प्रतिबिंबित नहीं करता है, लेकिन हम इलस्ट्रेटर द्वारा मुख्य रूप से स्टाइल आउटपुट पर भरोसा रखते हैं, मुझे लगता है कि हम बहुत खुश हो सकते हैं। किसी भी अन्य सुधार को हाथ से बनाना होगा, इलस्ट्रेटर ने हमारे लिए इस बिंदु पर ऐसा किया है।

क्या आपके पास ऐसे कोई सुझाव हैं जो इलस्ट्रेटर को इस वेब लेआउट को सीधे सुधारने में मदद कर सकता है? हमें टिप्पणियों में बताएं!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.