एडोब फोटोशॉप का उपयोग करके 3D बटन कैसे बनाएं

ऐसी बहुत सी अद्भुत चीज़ें हैं जिन्हें आप बना सकते हैं एडोब फोटोशॉप जो ऑनलाइन उपयोगी होते हैं, साधारण चित्र फ़्रेम से लेकर जटिल UI तक। फ़ोटोशॉप में आपके द्वारा बनाई जा सकने वाली सबसे उपयोगी चीज़ों में से एक 3D बटन हैं, जो कस्टम इंटरफ़ेस के साथ ब्लॉग या वेबसाइट चलाने पर आपके काम आएंगे।

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

चरण 1: अपना दस्तावेज़ तैयार करें

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

फोटोशॉप में 3D बटन बनाने के लिए, आपको इसके लिए एक कस्टम दस्तावेज़ बनाना होगा। ऐसा करने के लिए, फोटोशॉप खोलें, और पर क्लिक करें नया बनाएं > कस्टम . अपने मूल्यों में टाइप करना प्रारंभ करें।

एक 3D बटन बनाने के लिए, आपको एक क्षैतिज दस्तावेज़ की आवश्यकता होगी। हमारे लिए, हमने इस्तेमाल किया:

९०० x ३०० पिक्सेल ऊँचा
३०० पिक्सेल/इंच
आरजीबी रंग मोड

हालांकि ये विनिर्देश निश्चित रूप से एक कठिन और तेज़ नियम नहीं हैं, यह सुनिश्चित करेगा कि आपके पास काम करने के लिए पर्याप्त जगह है, और आपके बटन के आकार को आवश्यकतानुसार ऊपर और नीचे स्केल करने की क्षमता है।

चरण 2: अपने 3D बटन के लिए अपना आयत सेट करें

अपनी फ़ाइल के लिए विशिष्टताओं को सेट करने के बाद, आपको अपने कार्यक्षेत्र में लाया जाएगा। आपके पास एक परत में एक क्षैतिज सफेद कैनवास होगा, और यहीं से आप अपना बटन बनाना शुरू करेंगे।

अपना 3D बटन बनाने के लिए, पर क्लिक करें गोल आयत उपकरण आपकी स्क्रीन के बाईं ओर, यहां लाल रंग में दिखाई दे रहा है। आप शॉर्टकट का भी उपयोग कर सकते हैं यू इसे एक्सेस करने के लिए।

अपनी सफ़ेद परत पर एक बार क्लिक करें: यह स्वचालित रूप से आपकी गोल आयत बनाएं डिब्बा। आप अपने आयत के आयामों को निर्दिष्ट करने के लिए इस बॉक्स का उपयोग करेंगे।

हमारे बटन के लिए, हम साथ गए:

300 पिक्सेल चौड़ा
75 पिक्सेल ऊँचा

हमने यह भी सुनिश्चित किया कि कोनों को 10 पिक्सेल से गोल किया गया हो। न ज्यादा ऊंचा, न ज्यादा नीचा। फिर हमने दबाया ठीक है .

ध्यान दें: बटन आकार और आकार के अनुसार भिन्न होते हैं, इसलिए ऐसा महसूस न करें कि आपको इन सटीक आयामों का उपयोग करना है। इसके अतिरिक्त, यदि आप शॉर्टकट के बारे में अधिक जानकारी की तलाश में हैं, तो यहां कुछ हैं सबसे उपयोगी फोटोशॉप कीबोर्ड कमांड .

जब आप दबाते हैं ठीक है , फ़ोटोशॉप आपकी परत के अंदर इन आयामों के साथ एक गोल आयत बनाएगा। आप इसे बदल सकते हैं भरना तथा आघात आपकी स्क्रीन के ऊपरी बाएँ कोने में ड्रॉपडाउन मेनू का उपयोग करके रंग।

इस ट्यूटोरियल के उद्देश्य के लिए --- और यह समझाने के लिए कि 'अप' और 'डाउन' बटन कैसा दिख सकता है --- हम अपने 'डाउन' बटन को लाल करने जा रहे हैं।

चरण 3: अपना बटन 3D बनाएं

अपना मूल बटन बनाने और उसका रंग चुनने के बाद, आप इसे इसमें समायोजित करना चाहेंगे परत की शैली संवाद बकस। यह इसे और अधिक 3D दिखने के लिए है।

अपने तक पहुँचने के लिए परत की शैली डायलॉग बॉक्स, आप जा सकते हैं परत> परत शैली शीर्ष मेनू से। आप उस परत पर डबल-क्लिक भी कर सकते हैं जिसमें आपका बटन है, इसे स्वचालित रूप से ऊपर लाने के लिए। यह तरीका बहुत तेज है और हम व्यक्तिगत रूप से इसे पसंद करते हैं।

एक बार जब आपका लेयर स्टाइल बॉक्स तैयार हो जाए, तो विकल्प पर जाएं बेवल एंबोस्स . इसे चालू करो।

यह आपके बटन के किनारों को अधिक उभरे हुए, '3D' रूप देने का एक तेज़ और आसान तरीका है। इस ट्यूटोरियल के लिए, ये वे सेटिंग्स हैं जिनका हमने उपयोग किया है:

संरचना

अंदाज: भीतरी उठाव
तकनीक: छेनी नरम
गहराई: 605
दिशा: यूपी
आकार: 5
नरम करना: 1

लकीर खींचने की क्रिया

कोण: 90
ऊंचाई: 37
हाइलाइट मोड: रंग चकमा, 55% अस्पष्टता
परछाई मोड: एकाधिक, 25% अस्पष्टता

ट्रिक यह है कि सेटिंग्स को इतना ऊंचा बनाया जाए कि आप कुछ अंतर देख सकें, लेकिन इतना मजबूत नहीं कि यह भारी हो।

बेवेल एंड एम्बॉस के साथ समाप्त करने के बाद, हम गए कंटूर और उसे भी चालू कर दिया। कंटूर बेवेल और एम्बॉस की परिभाषा को थोड़ा मजबूत बनाता है, और इस ट्यूटोरियल के लिए हमने सेटिंग को चुना शंकु - उल्टा .

अगला, चालू करें ढाल ओवरले . यह वही है जो एक बटन देता है जो गोल, थोड़ा 'चमकदार' दिखता है। सेटिंग्स इस प्रकार हैं:

मिश्रण मोड: उपरिशायी
अस्पष्टता: 90
अंदाज: रैखिक
कोण: 90
पैमाना: 100

अंत में, हमने चालू किया परछाई डालना , किसी वेबसाइट या ब्लॉग की सफेद पृष्ठभूमि से बटन को थोड़ा 'उठाया' दिखाने के लिए। फिर से, यहाँ सेटिंग्स हैं:

कैसे बताएं कि आपका राम खराब है

संरचना

मिश्रण मोड: विभिन्न
अस्पष्टता: 35
कोण: 90
दूरी: 2
फैलाव: 6
आकार: 8

गुणवत्ता

कंटूर: रैखिक
शोर: 0
लेयर नॉक आउट ड्रॉप शैडो: पर

अब इन स्पेक्स को लेयर स्टाइल के रूप में सहेजने का समय आ गया है।

चरण 4: एक परत शैली के रूप में सहेजें

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

ऐसे।

क्लिक करने से पहले ठीक है में परत की शैली डायलॉग बॉक्स, पर क्लिक करें नई शैली . जब आप ऐसा करते हैं, तो फ़ोटोशॉप इस परत शैली को सहेज लेगा जिसे आपने अपने बटन के लिए बनाया है।

यदि आप Photoshop CC का उपयोग कर रहे हैं, तो यह नई शैली आपके में सहेजी जाएगी पुस्तकालयों अनुभाग, जैसा कि आप ऊपर देख सकते हैं। यह बहुत तेज़ और आसान पहुँच है।

चरण 5: सहेजी गई परत शैली का उपयोग कैसे करें

अब जब आपने अपना बटन डिज़ाइन कर लिया है और आपने इसे एक परत शैली के रूप में सहेज लिया है, तो आइए इसे अपनी 'ऊपर' स्थिति के लिए क्रिया में देखें। झूठ का कोई शब्द नहीं, इससे आपका काम करने का समय आधा हो जाएगा।

सबसे पहले, लाल बटन परत के ठीक ऊपर एक और बटन बनाते हैं, जैसे। आइए इसे हरा-भरा बनाएं, जोर देने के लिए।

अगला --- परत को ऊपर लाने के लिए स्वयं परत पर डबल-क्लिक करने के बजाय परत शैलियाँ डायलॉग बॉक्स --- अपने में लेयर स्टाइल पर डबल-क्लिक करें पुस्तकालयों पैनल।

जब आप ऐसा करते हैं, तो फ़ोटोशॉप आपकी सहेजी गई शैली को अपने नए रंग और आकार को बनाए रखते हुए, आपकी नई बटन परत पर स्वचालित रूप से लागू कर देगा। अब आपके पास दो बटन हैं --- एक ऊपर की स्थिति में, और एक नीचे की ओर --- और यह करना बहुत आसान है। मुझे यह शॉर्टकट पसंद है।

चरण 6: अपने बटन में टेक्स्ट जोड़ें

इसके बाद, हम बटन में टेक्स्ट जोड़ने जा रहे हैं।

टेक्स्ट जोड़ने के लिए, अपनी दो बटन परतों के ऊपर एक नई परत बनाएं। दबाएं टूल टाइप करें टाइपिंग शुरू करने के लिए।

इस ट्यूटोरियल के लिए, हम 'सब्सक्राइब' शब्द लिखने जा रहे हैं क्योंकि यह कुछ ऐसा है जिसे आप अक्सर वेबसाइटों और सोशल मीडिया प्लेटफॉर्म पर देखते हैं।

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

हालांकि, यह हो जाने के बाद भी, इस पाठ को 'पॉप' करने के लिए आपको कुछ और सूक्ष्म परिवर्तन करने होंगे।

सबसे पहले, उस परत पर डबल-क्लिक करें जिसमें आपका टेक्स्ट है ताकि आप इसे अपने में ऊपर ला सकें परत की शैली संवाद बकस।

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

संरचना

मिश्रण मोड: गुणा
अस्पष्टता: 35
कोण: 90
दूरी: 2
गला घोंटना: 4
आकार: 1

गुणवत्ता

कंटूर: रैखिक
शोर: 0

अगला, लागू करें a ढाल ओवरले उन अक्षरों के लिए, उन्हें फ्लैट दिखने के बिना बटन में अधिक आसानी से मिश्रण करने के लिए। फिर से, हमारे लिए सेटिंग्स हैं:

मिश्रण मोड: रंग जला
अस्पष्टता: 90
अंदाज: रैखिक
कोण: 90
पैमाना: 100

चरण 7: समाप्त करना

इस पाठ शैली को बनाने के बाद --- विशेष रूप से यदि आप इसे फिर से उपयोग करना चाहते हैं --- पर जाएं नई शैली और क्लिक करने से पहले इसे सेव करें ठीक है .

इसके साथ, आप अपनी दो बटन परतों के बीच दृश्यता पर जल्दी से आगे और पीछे स्विच कर सकते हैं, यह देखने के लिए कि 'ऊपर' और 'नीचे' स्थिति कैसी दिखती है।

बहुत बढ़िया, हुह? अपनी फ़ाइल सहेजने के लिए, जाएँ फ़ाइल> इस रूप में सहेजें , और जिस भी प्रोजेक्ट पर आप काम कर रहे हों, उसके लिए इसे उचित फ़ाइल स्वरूप के रूप में सहेजें।

3D बटन और विजेट के साथ अपने ब्लॉग को अनुकूलित करें

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

अन्य चीजों के बारे में जानना चाहते हैं जो आप इस कार्यक्रम के साथ कर सकते हैं? यहाँ है फोटोशॉप में बैकग्राउंड कैसे हटाएं .

साझा करना साझा करना कलरव ईमेल Android पर Google के बिल्ट-इन बबल लेवल को कैसे एक्सेस करें

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

आगे पढ़िए संबंधित विषय

रचनात्मक
एडोब फोटोशॉप
छवि संपादन युक्तियाँ
फोटोशॉप ट्यूटोरियल

लेखक के बारे में शियाने एडेलमेयर(136 लेख प्रकाशित)

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

Shianne Edelmayer की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें