मुझे ख़ुशी है कि अधिक आरामदायक, आसान, सरल और सस्ते साधनों की तलाश में अधिक से अधिक डिज़ाइनर Adobi से दूर दिख रहे हैं। और चुनने के लिए कुछ है। आज मैं Sketch.app में एक वेबसाइट डिज़ाइन बनाने की अपनी प्रक्रिया के बारे में बात करूँगा। मुझे उम्मीद है कि आप मुझसे कुछ विचार उधार लेंगे, आप कभी भी उसी तरह से कुछ नहीं करेंगे, लेकिन आप अपने तरीके से कुछ करेंगे। हमारे साथ रहो।
अब मैं बीटा 2.4 पर काम कर रहा हूं। यदि आपके पास एक पुराना संस्करण है, तो यह करेगा - मतभेद बहुत कट्टरपंथी नहीं हैं।
प्लग-इन
वर्तमान स्केच jstalk पर एक्सटेंशन का समर्थन करता है। इस विषय पर एक
छोटा सा निर्देश है । बात बहुत उपयोगी है, क्योंकि यह अनावश्यक मांसपेशी आंदोलनों को समाप्त करती है। मैं इस प्रक्रिया में सक्रिय रूप से कुछ प्लगइन्स का उपयोग करता हूं, इसलिए जिस तरह से मैं उनके बारे में भी बात करूंगा।
सेटिंग से एक्सटेंशन समर्थन सक्षम करें:
फिर हम
गितूब में बॉम्बरस्टुडिओस पर जाते हैं, प्लगइन विवरण पढ़ते हैं और जो हमें पसंद है उसे डाउनलोड करते हैं। हम फिर फ़ाइलों को एक फ़ोल्डर में छोड़ देते हैं और इसे किसी भी तरह से खुद के लिए स्पष्ट रूप से नाम देते हैं। "लाइब्रेरी" को कॉपी करना सुनिश्चित करें - कुछ स्क्रिप्ट इसके बिना काम नहीं करती हैं।
नामों में मैं शुरुआत में
वर्ण जोड़ता हूं - फिर स्केच मेनू में प्लगइन्स को खूबसूरती से क्रमबद्ध किया जाता है:
हम क्या आकर्षित करते हैं?
अब मैं घर की रिकॉर्डिंग के लिए सस्ते हेडफ़ोन की तलाश कर रहा हूं, इसलिए हम एक विषय पर एक वेब स्टोर करेंगे। अधिक सटीक रूप से, केवल प्रारंभ पृष्ठ - उदाहरण के लिए, मुझे लगता है कि यह पर्याप्त है। यह लेख तकनीक से अधिक-कैसे-कैसे-कैसे सिद्धांत पर है, लेकिन शायद मैं कई बार स्मार्ट हूं।
कागज के एक टुकड़े पर प्रोटोटाइप
आमतौर पर यह सब पेंसिल स्केच से शुरू होता है। मैं खुद के लिए इस तरह का एक प्रोटोटाइप बना रहा हूं, ताकि यह तय हो सके कि क्या, कहां, कैसे, क्यों और विचारों को ठीक करना है। सभी समान, मैं ग्राहक को कागज नहीं दिखाता हूं, इसलिए सटीकता और सुंदरता पर बहुत समय बिताने के लिए आवश्यक नहीं है, मुख्य बात यह स्पष्ट करना है कि यहां क्या खींचा गया है।
यह पृष्ठ के मुख्य भागों का एक स्केच है।
1. ऊपर से हम एक लोगो, मेनू और खोज करते हैं।
2. फिर उत्पादों, नाम, छोटे विवरण और कीमत के साथ स्लाइड।
3. नीचे हेडफ़ोन की श्रेणियां प्रकार (बड़ी तस्वीरें) और निर्माता (छोटे) द्वारा दी गई हैं।
4. अगला एक छोटा पाठ होगा जो खरीदार को यह तय करने में मदद करता है कि उसके लिए कौन से विकल्प उपयुक्त हो सकते हैं। आप अभी भी एक छोटा फिल्टर बना सकते हैं।
5. और पाद के बहुत निचले हिस्से में मुख्य वर्गों के लिंक के साथ और खोज।
संक्षेप में, कुछ भी अमानक नहीं है।
हां, मैं लगभग भूल गया: प्रारंभ पृष्ठ पर कोई लॉगिन / पासवर्ड / पंजीकरण नहीं। ऐसे मामले, यदि यह वास्तव में आवश्यक है, तो ऑर्डर देने की प्रक्रिया में पहले से ही पूछना बेहतर है।प्रोटोटाइप
प्रोटोटाइप के लिए, मेरे पास अभी भी एक ही स्केच है, अन्तरक्रियाशीलता और टिप्पणियों के लिए -
इंविज़न ।
मान लें कि हमें केवल साइट का "डेस्कटॉप" संस्करण चाहिए। फिर लेआउट को लगभग 1200 पिक्सेल चौड़ा किया जा सकता है।
हम 3000 तक आकार का एक कैनवास बनाते हैं (ताकि यह संभवतः ऊंचाई में पर्याप्त हो):
कैनवस को भविष्य के लिए एक टेम्पलेट के रूप में सहेजा जा सकता है। इसे नाम दें, उदाहरण के लिए, "1200x3000" और इसे पहले से निर्मित आकार के टेम्पलेट के साथ पैनल में जोड़ें:
अगला, आपको चित्र के लिए एक स्टब ("प्लेसहोल्डर", हां) बनाने की आवश्यकता है। हमारे पास एक स्टोर है, इसलिए बहुत सारी तस्वीरें होंगी।
सब कुछ, सामान्य रूप से, बहुत सरल है: हम एक वर्ग खींचते हैं, इसके शीर्ष पर 45 के कोण पर दो लाइनें हैं और उन्हें समूहित करें।
उसी समय, समूह के अनुपात को बनाए रखना बेहतर होता है: हमें स्टब के आकार को स्वतंत्र रूप से बदलने की आवश्यकता है।
यदि आप ऑब्जेक्ट की डिफ़ॉल्ट शैली से संतुष्ट नहीं हैं, तो बस इसे अपने तरीके से बदलें, छाया / स्ट्रोक जोड़ें और मेनू से डिफ़ॉल्ट रूप में Edit-> सेट स्टाइल चुनें। मैं आमतौर पर डिफ़ॉल्ट छोड़ देता हूं: स्ट्रोक के बिना ग्रे फिल।
प्रोटोटाइप चरण में, मैं आमतौर पर ग्रिड को बिल्कुल चालू नहीं करता हूं। ग्रिड के साथ, यह कॉलम और शासकों में सब कुछ संरेखित करना शुरू करने के लिए प्रलोभन दे रहा है, और यह मेरे लिए या ग्राहक के लिए भी महत्वपूर्ण नहीं है।
तो, चलो क्रम में चलते हैं। स्टब "img" के साथ परतों का नाम दें। एक परत का नाम बदलने के लिए, एक अंतर्निहित संयोजन Cmd + R है। यदि आपको एक बार में कई नामों की आवश्यकता है, तो आप उपयोग कर सकते हैं ...
स्क्रिप्ट नंबर 1 : परत के नाम के लिए पूछता है, और फिर इसे वर्तमान में चयनित सभी के लिए सेट करता है। यह कीबोर्ड शॉर्टकट (मेरे लिए - Ctrl + N) द्वारा काम करता है। कीबोर्ड शॉर्टकट को परिभाषित करने के दो तरीके हैं। सेटिंग्स के माध्यम से ओएस एक्स में मानक:
या प्लगइन कोड में ही:
और स्क्रिप्ट नंबर 2 को सही: सब कुछ समान है, लेकिन नाम के साथ "1" से शुरू होने वाले सीरियल नंबर को जोड़ा जाता है। यानी आप 5 ऑब्जेक्ट का चयन करते हैं, Ctrl + Shift + N दबाएं (उदाहरण के लिए), विंडो में "img" नाम दर्ज करें, और स्क्रिप्ट ऑब्जेक्ट्स को "img 1", "img 2", आदि कहते हैं। बहुत बात यह है कि जब आपको पूर्वावलोकन के एक सेट की आवश्यकता होती है।
काम में स्क्रिप्ट:
“Img” कॉपी करें और भविष्य की स्लाइड्स के अनुमानित आकार तक खिंचाव।
अगला मेनू अब तक, बस एक लंबी मौत। हम अपना पहला "img" उसके ऊपर डालेंगे - यह, जैसे, एक लोगो है। मेनू को तुरंत लिखने के लिए बेहतर है क्योंकि यह कार्य स्थल पर होगा।
आगे की स्लाइड्स पर
ठीक है, अगर वे सिर्फ सुंदर चित्र नहीं हैं, लेकिन खरीदार के लिए भी उपयोगी होंगे। उदाहरण के लिए, उनके पास उत्पाद की एक छवि, इसका संक्षिप्त विवरण और कीमत हो सकती है: व्यक्तिगत रूप से यह मेरे लिए अधिक सुविधाजनक है जब मैं तुरंत देखता हूं कि कितना है। स्लाइड के लिए पत्रक छोटे बिंदुओं के साथ सर्वोत्तम नहीं हैं, जो आपको टचपैड पर हॉर्सरैडिश मिलेगा, लेकिन सामान्य बड़े बटन के साथ। संकेतक के रूप में अंक फिट होने की अधिक संभावना है।
उन जगहों पर जहां यह अभी तक ज्ञात नहीं है कि पाठ क्या होगा, आप पैराग्राफ के लिए एक रिक्त जैसे कुछ का उपयोग कर सकते हैं - सामान्य
लोरेम इप्सम , लेकिन
BLOKK फ़ॉन्ट के साथ।
प्रत्येक बार इस तरह के पाठ को नए सिरे से नहीं बनाने के लिए, आप ऑटोमेकर में एक छोटा अनुप्रयोग बना सकते हैं जो पैराग्राफ को क्लिपबोर्ड पर कॉपी कर देगा।
पहले ब्लॉक में, लोरम-इप्सम के पैराग्राफ को डालें, और फिर फॉन्ट पैनल के माध्यम से आकार (मेरे पास 16 है) और BLOKK Neue फ़ॉन्ट चुनें। हेडसेट में सिरिलिक विकल्प नहीं है।
और फिर इस प्रक्रिया में, आप बस स्पॉटलाइट "लोरेम इप्सम" (हमारे मिनी-एप्लिकेशन का नाम) में टाइप कर सकते हैं और दर्ज कर सकते हैं। फिर लेआउट पर Cmd + V।
श्रेणी।
हम तीन प्रकार के हेडफ़ोन दिखाते हैं, और निर्माताओं के ठीक नीचे जो आप हमसे खरीद सकते हैं।
फिर हम कुछ पैराग्राफ बनायेंगे कि कौन से हेडफ़ोन हैं, उनके बीच क्या अंतर है और उन्हें सामान्य रूप से कैसे चुनना है।
और एक फिल्टर। चलो उदाहरण के लिए, यैंडेक्स.मार्केट से पैरामीटर लेते हैं - लेकिन वे नाराज नहीं होंगे।
मैं आमतौर पर मैन्युअल रूप से रेखांकित करता हूं: मैं लगभग 50% की पारदर्शिता के साथ पाठ रंग रेखाएं खींचता हूं। यह सूक्ष्म रूप से और खूबसूरती से निकलता है। स्टैंडर्ड अंडरलाइन बहुत क्रूड है। छोटे आकार में, सबकुछ ठीक है, लेकिन आकार जितना बड़ा होगा, रेखा उतनी ही मोटी होगी, और यह हमें शोभा नहीं देता है। लेकिन प्रोटोटाइप में आप परेशान नहीं कर सकते।
खैर, एक पाद था।
सब कुछ, प्रोटोटाइप तैयार है। गहरी खुदाई करने के इच्छुक लोगों के लिए
फाइल । अगले भाग में फोंट, रंग, स्टाइल, ग्रिड, लेयर्स के साथ काम करने के बारे में विवरण होगा, प्लगइन्स के बारे में थोड़ा और, वास्तव में, साइट का अंतिम लेआउट।
मैं टिप्पणियों में प्रश्नों और आपत्तियों की प्रतीक्षा करता हूं, मैं कोशिश करूंगा कि किसी को ध्यान दिए बिना न छोड़ूं।