स्केच.ऐप में वेबसाइट डिजाइन। भाग २.१: सौंदर्य लाना

पहला भाग प्रोटोटाइप के बारे में है।



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

मॉड्यूलर ग्रिड

आप ग्रिड को दो स्थानों से कॉन्फ़िगर कर सकते हैं। प्रदर्शन - कार्यक्रम सेटिंग्स से:



आकार और टूलबार पर मेनू से कॉलम / सेल की संख्या:



चलो कॉलम को 60px की कॉलम चौड़ाई और स्तंभों के बीच 30px की दूरी के साथ लें। हम मुख्य पाठ को 16pks आकार में बनाएंगे, इसलिए आधार रेखा जीपिक्स (डेढ़ अंतराल) है। लेकिन हम क्षैतिज गाइडों को आधा (12 पीसी) छोटा बनाते हैं - यह मेरे लिए अधिक सुविधाजनक है।

मेनू

हम मुख्य फ़ॉन्ट को डिफ़ॉल्ट रूप से छोड़ देंगे - चलो Helvetika। शीर्षकों के लिए, पीटी सेरिफ़ लें। हम मेनू को संरेखित करते हैं और हमारे स्टोर का नाम लिखते हैं। ठीक है, "हेडफ़ोन" होने दो। परतों को संरेखित करने के लिए, ऊपरी दाएं कोने पर जाएं:



मेनू में, ग्रिड पर अत्यधिक दाएं और बाएं लिंक संरेखित करें। और उन दोनों के बीच अंकों के वितरण के लिए भी एक व्यवस्था है-> वस्तुओं को वितरित करें-> क्षैतिज रूप से।



मेनू बहुत अधिक विस्तृत हो गया (आइटमों के बीच की दूरी मेनू से खोज की तुलना में अधिक है), इसलिए मैंने सही लिंक को थोड़ा स्थानांतरित किया और फिर से सब कुछ संरेखित किया:
को



के बाद



हम खोज क्षेत्र 24px उच्च और सब्सट्रेट में "दबाया" बनाते हैं।



(हम हल्के भूरे रंग में पेंट करते हैं और दो आंतरिक छायाएं जोड़ते हैं। स्केच में, आप अंदर और बाहर कई छाया जोड़ सकते हैं, जैसे कि आप स्ट्रोक या भर सकते हैं।)



उदाहरण के लिए, Cursive Helvetica बहुत सुंदर नहीं लगती, इसे PT Sans में बदल दें।
को



के बाद



हम भविष्य के लिए शैली रखेंगे - हमारे पास अभी भी फ़िल्टर में फ़ील्ड हैं।







मेनू में पाठ शैली भी सहेजी गई है। अपना नाम लिखना आवश्यक नहीं है: शैली के तहत पैरामीटर लिखे गए हैं, इसलिए सब कुछ अच्छी तरह से समझा जाता है।





फिर हम शेष मेनू आइटम का चयन करते हैं और प्रत्येक को एक स्टाइल देते हैं।

स्लाइड

फ़्लिकर पर मुफ्त छवियां पाई जा सकती हैं। ऐसा करने के लिए, "उन्नत खोज" में "क्रिएटिव कॉमन्स के साथ लाइसेंस प्राप्त" विकल्प चुनें।



मुझे लंबे समय तक स्क्रॉल करना पड़ा, लेकिन फिर भी मुझे कम या ज्यादा उपयुक्त फोटो मिला।
स्टब आयत का चयन करें, फिर ऊपर (हमेशा शीर्ष पर) छवि आयात करें। हम एक तस्वीर के साथ एक स्टब का चयन करते हैं और जादू बटन दबाते हैं "एक मुखौटा बनाएं"।



अब आपको स्लाइड पर पाठ से निपटने की आवश्यकता है। चलो इसे सफेद बनाते हैं।



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



सब्सट्रेट के किनारे से 20 पिक्सल का अंतर बहुत अधिक है, हम इसे 15. से करेंगे। ध्यान दें: ऊपर और नीचे हम निचले अक्षरों (x-height) की ऊंचाई से इंडेंट की गणना करते हैं, और हम एक्सटेंशन तत्वों को ध्यान में नहीं रखते हैं। ऐसा इसलिए है कि पृष्ठभूमि के केंद्र में पाठ की रेखा संतुलित है।



स्केच में एक अच्छी दूरी मीटर है, लेकिन यह पाठ वस्तुओं के साथ अच्छी तरह से काम नहीं करता है - पाठ में हमेशा आंतरिक पैडिंग होती है। (वस्तुओं को जल्दी से बदलने के लिए, Cmd + → / Cmd + width (चौड़ाई) या Cmd + d / Cmd + ↑ का उपयोग करें। यदि आप समानांतर में शिफ्ट रखते हैं, तो आकार 10px बढ़ जाएगा।)



अब स्लाइड विवरण और मूल्य टैग के साथ भी ऐसा ही करें।



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



हम पत्रक लेते हैं। आइए इसे प्रोटोटाइप की तुलना में थोड़ा आसान बनाते हैं। केवल तीर छोड़ें, लेकिन उन्हें इतना बड़ा करें कि आपको निशाना न लगाना पड़े। सबसे पहले, तिरछी रेखाएं खींचें, फिर उन्हें एक गोल स्ट्रोक बनाएं। अगला हम समूह और उदाहरण के लिए "<>" कहते हैं।



डॉट्स बस के रूप में सरल हैं। रंग के साथ चयनित भरें, बाकी केवल एक स्ट्रोक छोड़ दें।



आइए स्लाइड्स की ऊंचाई अधिकतम करें ताकि वे अधिक प्रभावी दिखें।



अभी के लिए बस इतना ही। अगले अध्याय में हम सामग्री भाग से निपटेंगे।

मूल तीन सप्ताह पहले