फ़ोटोशॉप में डिज़ाइन वेब 2.0 इंटरफ़ेस
नीचे दिए गए ट्यूटोरियल को समझना यह तकनीक है, इसके साथ आप एक वेबसाइट के लिए अपने आप को कुछ ग्राफिकल यूजर इंटरफेस आकर्षित कर सकते हैं. साइड नेविगेशन, बटन, हेडर, उदाहरण के लिए। सभी वेब 2.0 शैली.
एक नया कैनवास लॉन्च करें; कुछ भी आकार। 450x300px से कुछ बड़ा अच्छा होगा। को चुनिए गोल आयताकार उपकरण और ऊपर की छवि में दिखाए गए अनुसार एक आयताकार को बड़ा करें.
शुरू करने के लिए गोल आयताकार की परत पर डबल क्लिक करें मिश्रण विकल्प. निम्नलिखित शैलियों के लिए सेटिंग्स को बदल दें.
परछाई डालना
अपारदर्शिता: 31% दूरी: 1px प्रसार: 0% आकार: 5px
बेवल और एम्बॉस
गहराई: 100% आकार: 0px नरम: 0px
धीरे-धीरे ओवरले
ग्रैडिएंट पर डबल क्लिक करें और निम्नलिखित स्टॉप पॉइंट सेट करें। स्थान: 0%, # 1378cd स्थान: 100% # 4da5f0
आघात
आकार: 5 पीएक्स स्थिति: अंदर का रंग: # 54abf6
आइए कुछ टेक्स्ट, एक टैगलाइन, URL या कुछ डालें। इसे मध्य और संरेखित करें ताकि बाद में बाईं ओर लोगो निवास कर सके। पाठ को शैली दें। मैं Lucida Sans यूनिकोड का उपयोग कर रहा हूं; 55pt; चिकनी; चरित्र ट्रैकिंग (पत्र रिक्ति) के लिए -120। टेक्स्ट लेयर पर डबल क्लिक करें और निम्नलिखित को सेट करें मिश्रण विकल्प.
ढाल ओवरले
ग्रैडिएंट पर डबल क्लिक करें और निम्नलिखित स्टॉप पॉइंट सेट करें। स्थान: 0%, # 9ec7eb स्थान: 100% ecf6ff
फिर आपको पाठ के बाईं ओर लोगो सम्मिलित करना होगा। मैं लोगो का प्रतिनिधित्व करने के लिए त्रिज्या 5px के साथ एक गोल आयताकार उपयोग करूँगा। यहाँ है सम्मिश्रण विकल्प गोल आयताकार के लिए सेटिंग्स.
भीतरी छाया
अपारदर्शिता: 45% दूरी: 0px आकार: 43px;
बेवल और एम्बॉस
गहराई: 100% आकार: 0px नरम: 0px हाइलाइट मोड अपारदर्शिता: 50% शैडोमीटर अपारदर्शिता: 100%
धीरे-धीरे ओवरले
ग्रैडिएंट पर डबल क्लिक करें और निम्नलिखित स्टॉप पॉइंट सेट करें। स्थान: 0% # 0e2f4a स्थान: 47% # 001a31 स्थान: 48% # 002545 स्थान: 100% # 0f4b7f
आघात
आकार: 5px डबल ग्रेडिएंट पर क्लिक करें और निम्नलिखित स्टॉप पॉइंट सेट करें। स्थान: 0% # 1468af स्थान: 100% # 50abf8
आइए इसे थोड़ा चमकदार प्रभाव दें। पकड़ CTRL और गोल आयताकार पर बाएं क्लिक करें लेयर थम्बनेल. जब पूरे गोल आयताकार का चयन किया जाता है, तो बदल दिया जाता है चौरस मार्की उपकरण, पकड़ एएलटी और चयनित क्षेत्र की दूसरी छमाही को ड्रॉ-आउट करता है; ऊपर की छवि की तरह.
एक नई परत बनाएं; इसे ऊपर खींचें ताकि यह सभी परतों के ऊपर बैठे; चयनित भाग को सफेद [#ffffff] से भरें; अपारदर्शिता को 15% तक बदलें.
ट्यूटोरियल यहां समाप्त हो जाएगा। आप इस डिज़ाइन का उपयोग कैसे करने जा रहे हैं, यह पूरी तरह आपके ऊपर है। इसके आकार और रंगों को थोड़ा बदलकर, इसे वेब हेडर या बटन के रूप में इस्तेमाल किया जा सकता है। यहाँ कुछ उदाहरण है.
वेबसाइट हैडर
वेबसाइट बटन
