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

हालाँकि, अगर वास्तव में आपके डिज़ाइन का प्रतीक कुछ भी विशेष रूप से मूल नहीं मिल पा रहा है, तो वेब डिज़ाइन के वर्तमान रुझानों के साथ जाना "सुरक्षित" है। तो यहां वेब डिज़ाइन लेआउट का एक बहुत छोटा सा अंश है, और एक नियमित लेआउट को वेब 2.0 लेआउट में कैसे बदला जाए।

हमारे पास यही था...

14.png

और यही हम करने जा रहे हैं...

13.png

हम फ़ोटोशॉप में परत शैलियों के अलावा कुछ भी उपयोग नहीं करने जा रहे हैं; हल्के ग्रेडियेंट और छाया पर ध्यान केंद्रित करना।

गोल कोनों के साथ आयताकार आकार का उपयोग करके और एक... आयत बनाकर शुरुआत करें।

1.jpg

बैनर

हमें सबसे पहले जो करने की ज़रूरत है वह है अपने आयत को कुछ गहराई और जीवन देना। वेब 2.0 डिज़ाइन के सिद्धांतों का पालन करते हुए, केवल छाया, रूपरेखा और प्रकाश ग्रेडिएंट ही हमें यह प्रभाव देंगे। इसलिए परत शैलियों पर जाएं, और थोड़ी हल्की छाया डालें। हमने इस्तेमाल किया #96एड6 इस उद्देश्य से।

2.png

आकार को थोड़ी गहराई देने के लिए (ताकि यह एक सपाट वस्तु की तरह न दिखे), गहरे टोन के साथ हल्की आंतरिक छाया जोड़ें (हमने इसका उपयोग किया) #304f82 )

3.png

अंत में, थोड़ी रूपरेखा जोड़ना महत्वपूर्ण है। हम #FFFFFF सफेद रंग का उपयोग करेंगे, क्योंकि दोनों तरफ से हमारी छाया गहरे रंग की है, हम एक हल्की और अर्ध दृश्यमान रेखा चाहते हैं जो आकृति को समोच्च करेगी।

4.png