"कपड़ों से अभिवादन" का सिद्धांत न केवल लोगों के लिए, बल्कि साइटों के लिए भी सही है। साइट की पोशाक इसका डिज़ाइन है। और यह वह डिज़ाइन है जो उस प्रभाव को निर्धारित करता है जो आगंतुक के पास संसाधन को देखने के पहले कुछ सेकंड में होता है। यह प्रभाव विशेष रूप से महत्वपूर्ण है क्योंकि यह उसके भविष्य के व्यवहार को निर्धारित करता है। साइट पर आने वाले प्रत्येक उपयोगकर्ता द्वारा देखा जाने वाला पहला डिज़ाइन तत्व उसका "हेडर" है। टोपी वेब संसाधन का चेहरा है। इसलिए, हर नौसिखिए वेब डिज़ाइनर सबसे पहले यह सीखना चाहता है कि साइटों के लिए हेडर कैसे बनाया जाता है।
ज़रूरी
- - इंटरनेट का इस्तेमाल;
- - आधुनिक ब्राउज़र;
- - रेखापुंज ग्राफिक्स संपादक (GIMP, Photoshop);
- - वैकल्पिक: वेक्टर ग्राफिक्स एडिटर (CorelDraw);
- - वैकल्पिक: 3D मॉडलिंग वातावरण (ब्लेंडर, 3DStudio);
- - वैकल्पिक: कागज, पेंसिल या कलम की शीट।
निर्देश
चरण 1
भविष्य के साइट हेडर के लिए एक अवधारणा विकसित करें। आदर्श रूप से, अवधारणा मूल विचार पर आधारित होनी चाहिए। जब विचारों की कमी हो, तो मौजूदा अच्छे समाधानों का विश्लेषण करके प्रेरणा प्राप्त की जा सकती है। कागज के एक टुकड़े पर एक स्केच के रूप में रचनात्मक अनुसंधान के परिणाम को प्रतिबिंबित करें। स्केच को "रबर" स्थानों और छवियों से भरे क्षेत्रों के संकेत के साथ साइट के भविष्य के शीर्षलेख की संरचना को प्रतिबिंबित करना चाहिए। इस स्तर पर, हेडर के डिजाइन के लिए अनुमानित रंग योजना पर विचार करना एक अच्छा विचार है।
चरण 2
हेडर के आकार का चयन करें। दरअसल, इसके केवल एक पैरामीटर - ऊंचाई को स्पष्ट रूप से परिभाषित करना सार्थक है। एक नियम के रूप में, साइट हेडर की ऊंचाई तय की जाती है, और यह तार्किक रिज़ॉल्यूशन पर निर्भर नहीं करता है जो फोंट के प्रदर्शन मापदंडों को प्रभावित करता है। दूसरे शब्दों में, आपको हेडर की ऊंचाई के लिए पिक्सेल में एक मान चुनना चाहिए। इस मामले में, हेडर में प्रासंगिक विज्ञापन के बैनर या ब्लॉक रखने की संभावना को ध्यान में रखना समझ में आता है। चौड़ाई के संबंध में, आपको कम से कम एक "रबर" क्षेत्र को हाइलाइट करते हुए न्यूनतम मान निर्धारित करना चाहिए जो हेडर को वेब पेज के विभिन्न आकारों के अनुकूल बनाने की अनुमति देता है।
चरण 3
ग्राफिक्स एडिटर में हेडर टेम्प्लेट बनाएं। एक नए दस्तावेज़ में, एक पारदर्शी परत जोड़ें जिसमें आप चयनित ज्यामितीय मापदंडों के अनुसार स्केच को खींचेंगे। परत की ऊंचाई हेडर की ऊंचाई से मेल खाना चाहिए। चौड़ाई को मनमाने ढंग से लिया जा सकता है, लेकिन न्यूनतम आकार से बड़ा, क्षैतिज "रबर" क्षेत्रों के लिए जगह छोड़कर।
चरण 4
अपने हेडर टेम्प्लेट में रखने के लिए स्थिर चित्र खोजें या बनाएं। लोगो और कुछ अद्वितीय तत्व वेक्टर संपादक या 3D मॉडलिंग वातावरण में बनाए जा सकते हैं। इंटरनेट पर मुफ्त फोटोबैंक पर विषयगत चित्र ढूंढना काफी आसान है।
चरण 5
ग्राफ़िक्स संपादक में साइट हेडर टेम्पलेट में पृष्ठभूमि, लोगो और स्थिर चित्र सम्मिलित करें। पृष्ठभूमि और प्रत्येक छवि को एक अलग पारदर्शी परत में जोड़ें। परतों को सर्वोत्तम तरीके से व्यवस्थित करें। छवियों को परतों में ले जाकर, पहले बनाए गए टेम्पलेट के अनुरूप, उनका सही लेआउट प्राप्त करें।
चरण 6
परिणामी हेडर इमेज को सेव करें। वर्किंग प्रोजेक्ट को ग्राफिक्स एडिटर के नेटिव फॉर्मेट में सेव करें। फिर फ़्लैटेड हेडर इमेज को दोषरहित फ़ॉर्मैट में सेव करें (उदाहरण के लिए, पीएनजी)।
चरण 7
यदि आवश्यक हो तो HTML हेडर टेम्प्लेट बनाएं। संपादक में चपटी छवि खोलें। इसमें से उन छवियों को काटें जो एक निश्चित आकार के क्षेत्रों के अनुरूप हों। "रबर" क्षेत्रों से संबंधित स्थानों से, छवियों को 1 पिक्सेल चौड़ा काटें। सभी छवियों को डिस्क पर सहेजें। सहेजी गई छवियों का उपयोग करके HTML शीर्षलेख को लेआउट करें।
