ट्यूटोरियल: एडोब फोटोशॉप के साथ एक वेब पेज को कैसे लेआउट करें

वेब पेजों को डिजाइन करने और कोड दर्ज या स्पर्श किए बिना पूरी तरह से सरल और कार्यात्मक तरीके से काम करने के लिए उपकरणों की एक विशाल विविधता है। वे असंख्य हैं, अनुप्रयोगों द्वारा प्रस्तावित (एडोब Dreamweaver एक उदाहरण है) या सीधे Wix जैसे ऑनलाइन प्लेटफार्मों द्वारा। हालांकि, एक वेब डिजाइनर के लिए, मैनुअल प्रक्रियाओं को जानना आवश्यक है। एचटीएमएल 5 और सीएसएस वेबसाइटों और लैंडिंग पृष्ठों के लेआउट के लिए मूलभूत स्तंभ हैं।

हालाँकि, जितनी बार आप उम्मीद कर सकते हैं, उससे अधिक बार आपको Indesign या जैसे अनुप्रयोगों की ओर रुख करना होगा Adobe Photoshop अपने लेआउट के काम को पूरा करने के लिए और उन्हें एक आदर्श फिनिश दें आज हम इस व्यापक ट्यूटोरियल में देखेंगे कि कैसे हम एडोब फोटोशॉप का उपयोग करके वेब पेज को लेआउट कर सकते हैं। इस पहले भाग में हम फ़ोटोशॉप से ​​विकसित किए जाने वाले काम में बने रहेंगे, हालाँकि भविष्य की किस्तों में हम देखेंगे कि कैसे हम इस काम को सीधे HTML कोड में लागू कर सकते हैं ताकि इसे क्रियाशील बनाया जा सके।

हमारे वायरफ्रेम के डिजाइन के साथ शुरू करना

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

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

हमारी वायरफ्रेम बनाने के लिए, हमें सबसे पहले एडोब फोटोशॉप एप्लिकेशन को दर्ज करना होगा और उन आयामों को शामिल करना होगा जिन्हें हम चाहते हैं कि हमारा पेज हो। इस उदाहरण में हमारा पृष्ठ 1280 पिक्सेल चौड़ा होगा। हालाँकि, अंतिम अंक या डिवाइस जिस पर हम अपने पृष्ठ को पुन: उत्पन्न करना चाहते हैं, के आधार पर आकार का मुद्दा भिन्न हो सकता है। इसमें कोई संदेह नहीं है कि एक वेब डिजाइन के लिए कार्यात्मक और कुशल होना चाहिए, यह होना चाहिए उत्तरदायी और इसे बाजार के सभी उपकरणों के अनुकूल होना चाहिए। हालांकि, इस मामले में हम एक प्रोटोटाइप बनाने के लिए काम करने जा रहे हैं जिसे हम डेस्कटॉप कंप्यूटर पर पुन: पेश करने जा रहे हैं। फिर भी, उत्तरदायी मुद्दे पर बाद में चर्चा की जाएगी, अब इस उदाहरण के साथ काम करने के लिए स्क्रीन आयामों का एक पदानुक्रम है। ध्यान रखें कि इस स्थिति में हम Adobe Photoshop में लैंडिंग पृष्ठ का एक लेआउट बनाएंगे और फिर इसे HTML5 और CSS3 में माइग्रेट करेंगे। इस छोटे से अभ्यास का उद्देश्य फ़ोटोशॉप में बनाई गई डिज़ाइन को एक प्रयोग करने योग्य और इंटरैक्टिव वेब डिज़ाइन में परिवर्तित करना है जो उपयोगकर्ता के आंदोलनों का जवाब देता है।

मोबाइल फोन के लिए माप

iPhone 4 और 4S: 320 x 480

iPhone 5 और 5S: 320 x 568

आईफोन 6: 375 x 667

आईफोन 6+: 414 x 736

नेक्सस 4: 384 x 598

नेक्सस 5: 360 x 598

गैलेक्सी एस 3, एस 4, एस 5: 360 x 640

एचटीसी वन: 360 x 640

गोलियाँ माप

iPad सभी मॉडल के साथ-साथ iPad मिनी: 1024 x 768

गैलेक्सी टैब 2 और 3 (7.0 इंच): 600 x 1024

गैलेक्सी टैब 2 और 3 (10.1 इंच): 800 x 1280

नेक्सस 7: 603 x 966

नेक्सस 10: 800 x 1280

Microsoft सरफेस W8 RT: 768 x 1366

Microsoft सरफेस W8 प्रो: 720 x 1280

डेस्कटॉप कंप्यूटर के लिए माप

छोटी स्क्रीन (उदाहरण के लिए नेटबुक में प्रयुक्त): 1024 x 600

मध्यम स्क्रीन: 1280 x 720/1280 x 800

बड़ी स्क्रीन: चौड़ाई 1400 पिक्सेल से अधिक, उदाहरण 1400 x 900 या 1600 x 1200।

हमारे वेब मॉकअप के भीतर तत्वों को वितरित करना और अनुभागों को असाइन करना शुरू करने के लिए, यह बहुत महत्वपूर्ण है कि हम एक पठनीय और मधुर खत्म सुनिश्चित करने के लिए अनुपात को ध्यान में रखें। यह आवश्यक होगा कि आप नियमों और मार्गदर्शिकाओं के विकल्पों का उपयोग करें जिन्हें आप शीर्ष मेनू में देख सकते हैं। आनुपातिक और सटीक तरीके से काम करने के लिए, यह सबसे अच्छा है कि हम प्रतिशत से काम करें। हम विभाजन के तौर-तरीकों को चुनने के लिए दृश्य मेनू पर और फिर «नई गाइड» पर क्लिक करेंगे। इस मामले में हम 25% पर चार ऊर्ध्वाधर विभाजन करेंगे और हम उन्हें हेडर में अपनी छवियों और हेडर में हमारे लोगो की छवि को रखने के लिए एक संदर्भ के रूप में लेंगे।

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

यह हमारे लिए अंतिम परिणाम होगा wireframe। जैसा कि हम देख सकते हैं, यह इमेज से बना हेडर में विभाजित है जिसमें लोगो मिलेगा और जो होम पेज के लिंक के रूप में दो टैब, एक सर्च इंजन और सर्च बॉक्स पर चार बटन के साथ काम करेगा। इसके अलावा, पहले से ही शरीर के भीतर, हमने एक साइड बार को एक विभाजित बार और श्रेणियों की एक श्रृंखला से बना दिया है जो उस प्रकार की सामग्री को वर्गीकृत करते हैं जो हमारी वेबसाइट पर होगी। नंबर के साथ एक और खंड जिसमें प्रविष्टियाँ शामिल हैं जो हमारी साइट पर मौजूद होंगी, और अंत में हमारी साइट पर सबसे अधिक प्रतिनिधि मेटा टैग या लेबल के साथ एक सूची होगी।

सामग्री क्षेत्र में, जिसे एक अनुभाग द्वारा परिभाषित किया जाएगा जिसमें शामिल होगा स्व-प्रबंधनीय सामग्री, हम अपने लेखों की सामग्री पाएंगे। इस मामले में, ब्रेडक्रंब या ब्रेडक्रंब (जो हमारी वेबसाइट की जैविक संरचना को इंगित करता है, लेख का शीर्षक, मेटाडेटा, पाठ के एक निकाय के रूप में एक पैराग्राफ, जिसके भीतर एक छवि शामिल है।

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

एक बार जब हमने अपने पृष्ठ की मूल संरचना या कंकाल को परिभाषित कर लिया, तो हमें अगले स्तर पर जाना होगा। यह हमारी वेबसाइट के प्रत्येक क्षेत्र के उचित डिजाइन से मिलकर बनेगा। दूसरे शब्दों में, हम इन क्षेत्रों में से प्रत्येक में "भरने" के लिए शुरू करेंगे जो अंततः हमारी वेबसाइट पर डाली जाएगी। यह अनुशंसा की जाती है कि हम वायरफ्रेम पर काम करने से पहले इन तत्वों को डिजाइन करना शुरू न करें क्योंकि यह बहुत संभावना है कि यदि हम इसे इस क्रम में करते हैं, तो हमें बाद में उनके अनुपात को संशोधित करने की आवश्यकता होगी। हम अपनी छवियों को विकृत करने का जोखिम चलाते हैं और तत्वों में से प्रत्येक के डिजाइन को फिर से करना, जो समय की बर्बादी या कम गुणवत्ता के परिणाम बन जाएगा।

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

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

संरचनाएं 1, 2, 3 और 4 का हिस्सा होंगी पृष्ठभूमि हमारी वेबसाइट से, इसलिए यह वास्तव में एडोब फोटोशॉप से ​​निर्यात करने के लिए हमारे लिए आवश्यक नहीं होगा, हालांकि हम यह कर सकते हैं, यह आवश्यक नहीं है। जब यह आता है सपाट रंग (फ्लैट डिजाइन और सामग्री डिजाइन की आवश्यक विशेषताओं में से एक, उन्हें सीएसएस स्टाइलशीट का उपयोग करके कोड के माध्यम से पूरी तरह से लागू किया जा सकता है)। हालाँकि, हमारे HTML कोड में बाकी तत्वों को बाद में डालने के लिए सहेजा जाना चाहिए। इस छोटे आरेख में हमने उन क्षेत्रों को भी पुन: पेश किया है जो पृष्ठ की पृष्ठभूमि से संबंधित हैं ताकि हमें स्पष्ट रूप से पता चल जाए कि हमारी साइट का अंतिम स्वरूप क्या होगा।

जैसा कि आप महसूस कर पाएंगे, एडोब फोटोशॉप में इस योजना को बनाने का अर्थ प्रत्येक तत्व के वास्तविक आयाम को प्राप्त करना है, और प्रत्येक तत्व की व्यवस्था और संरचना को स्पष्ट करना है। बेशक, पाठ्य सामग्री की प्रक्रिया के इस चरण में कोई स्थान नहीं है क्योंकि यह होना चाहिए हमारे कोड संपादक से आपूर्ति की। हमें यह भी बताना चाहिए कि इस अभ्यास में, हम बटन और स्थिर तत्वों के साथ काम करने जा रहे हैं, हालांकि आमतौर पर ये बूटस्ट्रैप जैसे फ्रेमवर्क से या सीधे Jquery से लागू होते हैं।

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

यह महत्वपूर्ण है कि हम किसी भी वस्तु को स्वतंत्र रूप से सहेजना सीखें ताकि उनके पास मौजूद आयामों के साथ और सटीक तरीके से बचा सकें। कोई भी त्रुटि, हालाँकि यह न्यूनतम हो सकती है, आपकी वेबसाइट के सभी तत्वों को प्रभावित कर सकती है। ध्यान रखें कि वे एक-दूसरे से संबंधित होंगे और उनके पास सही आयाम होंगे ताकि उन्हें अंतिम वेब में HTML से दर्ज किया जा सके। इस मामले में, हमें निम्नलिखित तत्वों को स्वतंत्र रूप से काटने और बचाने की आवश्यकता होगी:

• हमारा लोगो।
• सभी बटन (जो मुख्य मेनू और बाकी हिस्से का हिस्सा हैं)।
• सभी छवियों।

हम इसे कई तरीकों से कर सकते हैं और शायद आपको ऐसा विकल्प मिल जाएगा जो आपके लिए अधिक प्रभावी हो। लेकिन अगर यह पहली बार है कि आप इस प्रकार का लेआउट बनाने जा रहे हैं, तो मेरा सुझाव है कि आप निम्नलिखित युक्तियों का पालन करें।

• सबसे पहले, आपको उस फ़ोल्डर में जाना चाहिए जहां PSD फ़ाइल जिसमें हमारा वायरफ्रेम स्थित है और इसे कई बार डुप्लिकेट करें जैसे कि उन तत्वों को जिन्हें आप निर्यात करने जा रहे हैं। इस मामले में हमने मूल से 12 प्रतियां बनाई हैं और उन्हें एक ही फ़ोल्डर में सहेजा है। इसके बाद, आप प्रत्येक प्रतियों का नाम बदलेंगे और उनमें से प्रत्येक को उस तत्व का नाम बताएंगे, जिसमें यह शामिल है। हमारी 12 प्रतियों का नाम बदला जाएगा: लोगो, मेनू बटन 1, मेनू बटन 2, खोज बार, ऊपरी बटन 1, ऊपरी बटन 2, ऊपरी बटन 3 और ऊपरी बटन 4. शेष चार का नाम बदल दिया जाएगा: छवि 1, छवि 2 छवि 3 और छवि 4।
• एक बार यह हो जाने के बाद हम लोगो के नाम वाली फाइल को खोलेंगे।
• हम अपनी लेयर पैलेट में जाएंगे और उस लेयर का पता लगाएंगे जिसमें हमारा लोगो है। फिर हम प्रेस करेंगे Ctrl / Cmd जब हम उक्त परत के थंबनेल पर क्लिक करते हैं। इस तरह से लोगो का चयन अपने आप हो जाएगा।
• अगला कदम फ़ोटोशॉप को यह बताना होगा कि हम चाहते हैं कि हम उस लोगो को सटीक तरीके से काटें। इसके लिए हमें केवल कुंजी या कमांड से क्रॉपिंग टूल पर कॉल करना होगा C.
• एक बार ऐसा करने के बाद हम कट की पुष्टि करने के लिए अपने Enter बटन पर क्लिक करेंगे।
• अब हम शीर्ष फ़ाइल मेनू पर जाएँगे कि कैसे सहेजें पर क्लिक करें। हम नाम का चयन करेंगे, जो इस मामले में «लोगो» होगा और हम एक प्रारूप प्रदान करेंगे पीएनजी, वेब पर उच्चतम गुणवत्ता प्रदान करने वाली फ़ाइल होने के लिए।
• हम सभी प्रतियों और तत्वों के साथ प्रक्रिया को दोहराएंगे। जब आप छंटनी कर लें, तो सुनिश्चित करें कि हमारे पैलेट में बाकी परतें हैं अदृश्य या खत्म कर दिया। इस तरह हम पारदर्शी पृष्ठभूमि के साथ प्रत्येक तत्व को बचा सकते हैं।

इस मामले में हम अपने पैलेट बटन को लेयर्स पैलेट से चुन रहे हैं। आप स्क्रीनशॉट में देख सकते हैं कि हमारे बटन की सीमाएँ कैसे स्वतः चुनी गई हैं।

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

अब एक-एक करके उन सभी तत्वों को सहेजने का समय है जो हमारी वेबसाइट का हिस्सा हैं और उन्हें इमेज फोल्डर में शामिल करते हैं और जिनका हम बाद में उपयोग करेंगे। हम अपने कोड से कॉल करेंगे और हम अपने लेआउट के साथ जारी रखेंगे, लेकिन अब से हमारे कोड संपादक से।

हालाँकि वेब पेज को लेआउट करने के लिए कई उपकरण और विकल्प हैं और यह प्रक्रिया पूरी तरह से सहज बनाती है, यह बहुत महत्वपूर्ण है कि हम इसे करना सीखें गाइड। इस तरह हम जानेंगे कि वेब पेज के डिजाइन के पीछे की बुनियादी बातें क्या हैं।

सारांश:

1. डिज़ाइन करें संरचना उस वेबसाइट पर विशेष ध्यान देना जिस सामग्री को आप प्रसारित करना चाहते हैं और जो खंड आपको अपनी वेबसाइट पर बनाने हैं।
2. अपने कंकाल पर काम करें या wireframe Adobe Photoshop यह दर्शाता है कि किन क्षेत्रों में सामग्री दिखाई देगी और उनका प्रारूप।
3. उन उपायों और ब्रांडों पर भरोसा करना जो आपने पहले विकसित किए हैं, शुरू करें डिज़ाइन वेब की सतह। सभी तत्व शामिल हैं (फ्लोटिंग और फिक्स्ड दोनों)। संबंधित बटन, लोगो और छवियों को शामिल करना न भूलें।
4. एक-एक करके उन सभी तत्वों को काटें जो परियोजना का हिस्सा हैं। सुनिश्चित करें कि उनके पास सही उपाय हैं और वे बाद में आपको समस्याएँ पैदा नहीं करेंगे।
5. सभी तत्वों को प्रारूप में सहेजें पीएनजी परियोजना फ़ोल्डर के अंदर छवियों फ़ोल्डर में एचटीएमएल.
6. ध्यान रखें कि इस परियोजना का वेब विंडो में एक आउटपुट होगा, इसलिए यह बहुत महत्वपूर्ण है कि आप रंग मोड को ध्यान में रखें और आवेदन करें आरजीबी.
7. अन्य वेब पृष्ठों से प्रेरित हों, जिन्हें आप काम करने से पहले स्वीकार करते हैं, और अपने टीम के सदस्यों के साथ इस पर चर्चा करना न भूलें। मामले में यह एक ग्राहक के लिए एक परियोजना है, के लिए छड़ी की कोशिश करो ब्रीफिंग जहां तक ​​संभव हो।