पिछले कुछ वर्षों में स्क्रीन डिज़ाइन एक लंबा सफर तय कर चुका है। बिल्ली, हम कुछ साल पहले 'स्क्रीन डिजाइन' भी नहीं कह रहे थे। ग्राफिक डिजाइनर और चित्रकारों के स्कोर के रूप में स्क्रीन डिज़ाइन से निपटने के लिए विकसित होता है, इसलिए भी हमारे टूलसेट को चाहिए। हम अब कला के स्थैतिक, एकवचन रूप से किए गए टुकड़े नहीं बना रहे हैं - हम जीवित रहने की योजना बना रहे हैं, श्वास डिजाइन सिस्टम जो विभिन्न प्रकार के वातावरण में काम करना चाहिए।
मांगों के इस नए सेट ने लचीला, केंद्रित नए उपकरणों के विस्फोट को जन्म दिया है। बंच का मेरा पसंदीदा स्केच है, जो बोहेमियन कोडिंग में टीम के एक बढ़ते सितारा है।
स्केच मुझे कभी भी सपने देखने की तुलना में तेज़ी से काम करने देता है, सब कुछ करने के लिए जो मैं करता हूं उसे करने के लिए मैं सबसे अच्छा करता हूं: डिजाइन। यह तैयार होने पर उच्च-निष्ठा करने के लिए पर्याप्त रूप से प्रोटोटाइप और मजबूत होने के लिए पर्याप्त प्रकाश है। स्केच की सबसे बड़ी ताकतों में से एक यह बढ़ता समुदाय है, जिसने प्लगइन का एक बड़ा चयन बनाया है जो किसी भी दिशा में स्केच का विस्तार करता है।
क्राफ्ट
, इनविजन लैब्स से, भविष्य के डिजाइन वर्कफ़्लो को शक्ति देना है। यह उपकरण का बढ़ता सेट प्रदान करता है, सभी समय बचाने और डिजाइन करते समय यथार्थवाद जोड़ने के लिए बनाए गए हैं। समय अनगिनत बचाए गए चरणों (अलविदा प्रतिलिपि और पेस्ट!) से आता है और यथार्थवाद वास्तविक डेटा और सामग्री (अलविदा लोरम इप्सम!) तक त्वरित पहुंच से आता है।
इस पाठ में, संपर्कों की सूची के लिए एक पूर्ण और यथार्थवादी स्क्रीन डिज़ाइन बनाने के लिए, हम शिल्प से तीन प्रमुख उपकरणों का उपयोग करने पर एक नज़र डालेंगे: फोटो, प्रकार और डुप्लिकेट।
01. अपना आर्टबोर्ड सेट करें
[3 9]
आइए स्केच में एक नया दस्तावेज़ बनाकर और अंदर काम करने के लिए एक आर्टबोर्ड स्थापित करके शुरू करें। एक नए दस्तावेज़ में, हिट
डालें और जीटी; आर्टबोर्ड
या बस
ए
आर्टबोर्ड उपकरण को सक्रिय करने के लिए कुंजी।
दाएं फलक में आपको पूर्वनिर्धारित आर्टबोर्ड आकार (लोकप्रिय उपकरणों और परिदृश्यों से मेल खाने के लिए बनाया गया एक मेनू दिखाई देगा)। आईफोन 6 का चयन करें और कैनवास के केंद्र में आपके लिए एक आर्टबोर्ड बनाया जाएगा।
02. एक शीर्षलेख बनाएं
[3 9]
यद्यपि हम विशेष रूप से इस पाठ में संपर्कों की एक सूची बना रहे हैं, फिर भी हमें भ्रम को पूरा करने के लिए कुछ अतिरिक्त इंटरफ़ेस बिट की आवश्यकता होगी। आयताकार उपकरण के साथ (
डालें और जीटी; आयत
या
आर
), आर्टबोर्ड के शीर्ष पर एक शीर्षलेख तैयार करें। शीर्षक 'संपर्क', और अच्छे उपाय के लिए कुछ आइकन डालें, जैसे 'मेनू' और 'आर्टबोर्ड के बाएं और दाएं कोने में' खोज 'क्रियाएं क्रमशः।
03. पाद का निर्माण
[3 9]
एक नया संपर्क जोड़ने के लिए एक अस्थायी कार्रवाई बटन के साथ एक टैब्ड पाद लेख जोड़ें
डेटा प्राप्त करने से पहले, आइए एक नया संपर्क जोड़ने के लिए एक एफएबी (फ्लोटिंग एक्शन बटन) के साथ एक त्वरित टैब्ड पाद लेख भी बनाएं। आयताकार उपकरण के साथ, एक सफेद आयताकार निकालें और इसे आर्टबोर्ड के नीचे रखें। अंडाकार उपकरण का उपयोग करना (
डालें और जीटी; अंडाकार
या
हे
), फैब के लिए एक सर्कल ड्रा।
04. आइकन डालें
[3 9]
इसके बाद, उपयोगकर्ता को दिखाने के लिए कुछ आइकन डालें, जहां क्लिक करें: एबी के अंदर 'प्लस', बाएं टैब में 'उपयोगकर्ता' आइकन, और दाईं ओर एक 'इतिहास' आइकन। हम एक संकेतक भी जोड़ देंगे - एक साधारण ब्लैक लाइन - यह दिखाने के लिए
संपर्क
दृश्य का चयन किया गया है। अब आर्टबोर्ड पृष्ठभूमि रंग (काला) सेट करने के लिए एक अच्छा समय भी है, जिसे आप आर्टबोर्ड का चयन करके और फिर इंस्पेक्टर में रंग चुनकर कर सकते हैं।
05. एक संपर्क आइटम बनाएँ
[3 9]
हमारे मंच सेट के साथ, यह एक एकल संपर्क आइटम बनाने का समय है। यह वह आइटम है जो संपर्कों की पूरी सूची को पूरा करने के लिए डेटा, डुप्लिकेट और एक ग्रिड में व्यवस्थित किया जाएगा। आइए एक साधारण सर्कल से शुरू करें, जो अवतार के लिए प्लेसहोल्डर के रूप में कार्य करेगा (एक तस्वीर जो प्रत्येक उपयोगकर्ता का प्रतिनिधित्व करती है)।
06. कुछ पाठ परतें बनाएं
[3 9]
टेक्स्ट लेयर जोड़ें जहां आपके संपर्कों के नाम और पते बैठेंगे
ओवल के बगल में, चलिए टेक्स्ट परतों की जोड़ी भी डालें। साथ में
डालें और जीटी; टेक्स्ट
या बस
टी
कुंजी, एक परत डालने के लिए टेक्स्ट टूल का उपयोग करें जो 'नाम यहां' पढ़ता है, और दूसरा नीचे 'ईमेल' पढ़ता है। ये वे परतें होंगी जो हम शिल्प के अंदर प्रकार पैनल से डेटा भरते हैं।
07. एक नाम चुनें
[3 9]
प्रकार पैनल का उपयोग करके, कुछ यादृच्छिक नामों के साथ डिज़ाइन को पॉप्युलेट करें
सॉसेज बनाने का समय! हम एक वास्तविक नाम और एक वास्तविक ईमेल पता डालने से शुरू करेंगे। सबसे पहले, उस परत का चयन करें जो 'नाम यहां' पढ़ता है और प्रकार पैनल खोलता है (इंस्पेक्टर के बगल में शिल्प पट्टी में स्थित)। आपको चयन करने के लिए डेटा के मेनू के साथ प्रस्तुत किया जाएगा। 'नाम' चुनें, फिर नर, मादा या दोनों से चुनें। आपकी टेक्स्ट परत स्वचालित रूप से वास्तविक नाम से भर जाएगी।
08. ईमेल टेक्स्ट लेयर भरें
[3 9]
हम ईमेल टेक्स्ट परत को उसी तरह भरने जा रहे हैं जिस तरह हमने नाम किया था। 'यहां ईमेल करें' परत का चयन करें, टाइप पैनल खोलें, और एक यथार्थवादी ईमेल पता तुरंत डालने के लिए ईमेल पता का चयन करें।
09. एक यादृच्छिक चेहरा
[3 9]
एक स्रोत का चयन करें जिससे हेडशॉट खींचा जा सके
इसके बाद हम उस ग्रे सर्कल को एक असली फोटो अवतार के साथ भरना चाहते हैं, जो हम फोटो पैनल के साथ करेंगे। सर्कल परत का चयन करके शुरू करें, फिर शिल्प फलक से 'फोटो' खोलें। यहां, आपके पास कुछ विकल्प हैं, जैसे स्थानीय फ़ोल्डर, ड्रॉपबॉक्स या वेब पर वेब से सोर्सिंग।
यहां मैं वेबसाइट UIFAces.com से डाउनलोड की गई छवियों से भरा स्थानीय फ़ोल्डर का चयन कर रहा हूं। 'फोटो रखें' पर क्लिक करें और शिल्प आपके संग्रह से लिया गया एक यादृच्छिक चेहरे के साथ आपके सर्कल को भर देगा।
10. संपर्कों की एक सूची बनाएँ
[3 9]
एक ही संपर्क भरे हुए, अब संपर्कों की पूरी सूची बनाने का समय है। ऐसा करने से पहले, आइए उन परतों के नीचे एक छोटी विभाजन रेखा डालें जिन्हें हमने अभी बनाया है।
11. डुप्लिकेट
[3 9]
एक पूरी सूची में हमारे एकल संपर्क तत्व को दोहराने के लिए, हम शिल्प के डुप्लिकेट पैनल का उपयोग करने जा रहे हैं। आपके समूह के चयन के साथ, डुप्लिकेट पैनल खोलें और विकल्पों को देखें।
हमारे पास दो विकल्प हैं: चयन और विशिष्ट गिनती के अंदर। सबसे पहले आपको उस क्षेत्र का चयन करने की अनुमति देता है जिसे आप सूची में चाहते हैं, फिर इसे भरता है हालांकि कई आइटम फिट बैठते हैं। दूसरा आपको सटीक गणना को परिभाषित करने देता है ('मैं एक ग्रिड एक्स आइटम चौड़ा और वाई आइटम लंबा' चाहता हूं)।
12. अंदर के चयन का उपयोग करना
[3 9]
हम अंदर के चयन विकल्प का उपयोग करेंगे, जो मैंने पाया है स्क्रीन डिजाइन के लिए बिल्कुल सही है। चूंकि यह एक लंबवत सूची है, एक ग्रिड नहीं, हम केवल लंबवत विकल्प की जांच करने जा रहे हैं। डुप्लिकेट सामग्री पर क्लिक करें और आप देखेंगे कि कुछ चीजें होंगी।
सबसे पहले, आपका एकल संपर्क समूह तीन गुना हो गया है। दूसरा, प्रत्येक बार डुप्लिकेट इसका जादू करता है, आपके फ़ील्ड फिर से पॉप्युलेट हो जाते हैं, इसलिए प्रत्येक नया समूह ताजा डेटा का उपयोग करता है। तीसरा, आपके संपर्क समूहों के तहत बनाई गई एक नई परत है, जिसे हम उन क्षेत्र को परिभाषित करने के लिए उपयोग करेंगे जिसे हम संपर्कों से भरे रहना चाहते हैं।
13. परत का आकार बदलें
[3 9]
[18 9]
[1 9 0]
[1 9 1]
डुप्लिकेट नियंत्रण परत का आकार बदलें, और संपर्क स्थान को भरने के लिए गुणा करेंगे
संपर्क सूची को पूरी स्क्रीन भरने के लिए, हम आकार बदलने जा रहे हैं
डुप्लिकेट नियंत्रण
परत। बस आकार के नीचे हैंडल को पकड़ो और इसे अपने आर्टबोर्ड के नीचे खींचें।
जैसे ही आप जाने देते हैं, डुप्लिकेट स्वचालित रूप से नई जगह भरने के लिए अधिक संपर्क समूह बनाएगा, फिर से प्रत्येक नए समूह को ताजा डेटा के साथ भरें।
14. स्पेसिंग को ठीक करें
[3 9]
अब हमारी सूची जगह में है, आप देख सकते हैं कि रिक्ति काफी सही नहीं है। शिल्प के साथ, गटर समायोजित करना बहुत आसान है। डुप्लिकेट नियंत्रण परत चयनित के साथ, एक बार फिर डुप्लिकेट पैनल खोलें, और ध्यान दें कि बटन अब गटर समायोजित करता है। कैनवास के चारों ओर प्रत्येक नई परत को नग्न करने के बजाय, बस लंबवत गटर विकल्प को 20 में बदलें, फिर समायोजित गटर बटन दबाएं। आपकी सूची स्वचालित रूप से सही अंतर में स्नैप हो जाएगी।
15. एक शांत शीर्षलेख जोड़ें
[3 9]
हमारी सूची पूर्ण और वास्तविक दिखने वाले लोगों के साथ आबादी के साथ, आइए इंटरफ़ेस पर डबल डबल करें और कुछ फ्लेयर डालें, शायद एक पूर्ण फोटो हेडर के रूप में। हम मूल 'हेडर-बीजी' आकार का चयन करके शुरू करेंगे जिसे हमने आयताकार उपकरण के साथ आकर्षित किया, और सूची में पहले संपर्क की ओर इसे आकार बदल दिया। हेडर को शायद पहले आइटम से लगभग 20 पीएक्स बंद करना चाहिए, क्योंकि यह वही गटर है जिसे हमने हमारी सूची में उपयोग किया था।
16. सही छवि का पता लगाएं
[3 9]
Unsplash एक प्रभावशाली ऑनलाइन फोटो संसाधन है
हमारे नए आकार के आकार के चयन के साथ, चलो फोटो पैनल खोलें, और अनप्लैश टैब पर जाएं। Unsplash एक अद्भुत ऑनलाइन संसाधन है, जो रॉयल्टी मुक्त, उच्च गुणवत्ता वाली तस्वीरों से भरा है।
शिल्प आपको रंग और श्रेणी द्वारा फ़िल्टर करने देता है, इसलिए किसी भी अवसर के लिए एक आदर्श तस्वीर ढूंढना पहले से कहीं अधिक आसान है। हमारी डार्क कलर स्कीम के साथ, मुझे लगता है कि स्पेस श्रेणी ठीक करेगी। जगह पर क्लिक करें और अपनी नई तस्वीर जगह में गिर जाएगी।
17. tweaking रंग
[3 9]
चूंकि शिल्प हमारे फ़िल्टर के आधार पर एक यादृच्छिक तस्वीर रखता है, तब तक छवि को फिर से घुमाना आसान होता है, जब तक आपको पसंद नहीं मिलता है। बस उस स्थान पर क्लिक करें जब तक आप जो भी देखते हैं उसे पसंद करते हैं।
मुझे पसंद की गई तस्वीर थोड़ा उज्ज्वल है, इसलिए मैं इसे छवि के शीर्ष पर एक अंधेरा पारदर्शी भरकर एक पायदान को नीचे करने जा रहा हूं। स्केच आपको एक ही आकार पर 'ढेर' भरने की अनुमति देता है, इसलिए हमें इंस्पेक्टर के भरने अनुभाग में छोटे '+' आइकन पर क्लिक करने की आवश्यकता है। मैंने छवि के शीर्ष पर 50 प्रतिशत काली परत जोड़ा है, जो अब सही दिखता है।
18. हो गया!
[3 9]
वहाँ आपके पास यह है - डेटा से भरा एक यथार्थवादी मॉकअप
यही सब है इसके लिए! सामग्री को खोजने के लिए सामान्य पागल डैश आमतौर पर खोज, प्रतिलिपि, पेस्टिंग और दोहराने के होते हैं - अब नहीं। यथार्थवादी डेटा के साथ एक संपूर्ण लेआउट भरना केवल कुछ क्लिक दूर है, और आपको अपने पसंदीदा डिजाइन प्रोग्राम को भी छोड़ना नहीं है।
