अपने ब्राउज़र में डिजाइन एसवीजी ग्राफिक्स

Sep 11, 2025
कैसे करना है

Vecteezy संपादक एक नि: शुल्क वेक्टर संपादन सूट है जो आपके ब्राउज़र में सही चलता है। इस ट्यूटोरियल में मूल आकार उपकरण और संपादन टूल शामिल हैं जिनका उपयोग आप साइट पर किसी भी वैक्टर को संपादित करने के लिए कर सकते हैं। इस तरह आप सापेक्ष आसानी से बैज, बटन, लोगो, या कुछ भी बना सकते हैं।

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

हम vecteezy से इन शॉपिंग आइकन का उपयोग करने जा रहे हैं।

बस आइकन पृष्ठ पर जाएं और 'संपादित करें & amp; डाउनलोड 'बटन। यह आपके ब्राउज़र में संपादक को सही खोलता है ताकि आप इन ग्राफिक्स को अनुकूलित और निर्माण कर सकें। इस ट्यूटोरियल के लिए, हम आपको दिखाएंगे कि इनमें से कुछ आइकन कैसे एनएबी करें और उन्हें एक बड़ी प्रगति बार ग्राफिक में परिवर्तित करें - किसी भी ईकॉमर्स होमपेज के लिए सही विकल्प।

तो वेक्ट्रीजी संपादक में उन खरीदारी आइकन के साथ, हम शुरू कर सकते हैं!

01. आइकन चुनें

Click into the icon group and select one icon, then click Duplicate at the top

[5 9] आइकन समूह में क्लिक करें और एक आइकन का चयन करें, फिर शीर्ष पर डुप्लिकेट पर क्लिक करें

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

शॉपिंग बैग का चयन करें और पृष्ठ के शीर्ष पर डुप्लिकेट पर क्लिक करें। यह आपको पूरे आइकन का डुप्लिकेट देना चाहिए। इसे ऊपर की ओर ले जाएं और अन्य दो को डुप्लिकेट करें।

नोट: उपहार बॉक्स पूरी तरह से समूहीकृत नहीं है, इसलिए जब आप डुप्लिकेट करने के लिए क्लिक करते हैं तो आप केवल आइकन का एक टुकड़ा चुनेंगे। इसे ठीक करने के लिए, बस पूरे उपहार आइकन पर एक चयन बॉक्स खींचें, फिर शीर्ष पर संपादित करें- & gt; समूह। अब, आप एक क्लिक के साथ पूरे वर्तमान आइकन को डुप्लिकेट कर सकते हैं।

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

02. बकवास को साफ़ करें

[7 9] Change the background opacity if you want it to be white instead of transparent

[5 9] यदि आप इसे पारदर्शी के बजाय सफेद होना चाहते हैं तो पृष्ठभूमि अस्पष्टता को बदलें

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

ऐसा करने के लिए, बस बहुत करीब ज़ूम करें और पृष्ठभूमि सर्कल का चयन करें। फिर हटाएं दबाएं, और इसे गायब होना चाहिए।

यदि पूरा आइकन गायब हो जाता है - घबराओ मत। बस शीर्ष के पास पूर्ववत करें या CTRL / CMD + Z दबाएं और पुनः प्रयास करें। आइकन समूह के अंदर जाने के लिए आपको डबल-क्लिक करने की आवश्यकता हो सकती है।

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

03. पाठ जोड़ना

Add text labels under each icon with the same font settings

[5 9] एक ही फ़ॉन्ट सेटिंग्स के साथ प्रत्येक आइकन के नीचे टेक्स्ट लेबल जोड़ें

यह प्रगति पट्टी अविश्वसनीय रूप से सरल होगा; बस एक ईकॉमर्स की दुकान के तीन चरणों का विज्ञापन करें।

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

यह टेक्स्ट को स्वत: चुनता है ताकि आप इसे चारों ओर ले जा सकें और अच्छी स्थिति ढूंढ सकें। लेकिन यदि आप फिर से टेक्स्ट टूल का चयन करते हैं, तो आप फ़ॉन्ट परिवार, रंग, आकार, अक्षर रिक्ति और अन्य सुविधाओं को बदल सकते हैं।

मैं एक -1.50 अक्षर रिक्ति के साथ ओपन सैन्स अर्ध-बोल्ड आकार 30 का उपयोग कर रहा हूं। पाठ रंग # 525252 है।

इस पाठ को दो बार डुप्लिकेट करें और अन्य आइकन के नीचे डुप्लिकेट रखें। क्रेडिट कार्ड आइकन के तहत 'पे' का उपयोग करें और उपहार बॉक्स के नीचे 'प्राप्त' करें।

आपको पाठ के ऊपर दिए गए आइकन को पुनर्स्थापित करने के लिए चयन उपकरण का उपयोग करना चाहिए। इसके अलावा, यदि संभव हो तो समतुल्य के करीब प्रत्येक आइकन स्थान।

04. ग्राफिक्स समायोजित करना

Shift+click to select the ribbon shapes and change the background colour

[5 9] SHIFT + रिबन आकार का चयन करने के लिए क्लिक करें और पृष्ठभूमि रंग बदलें

प्रगति पट्टी बनाने से पहले, आप आइकन में किसी भी रंग को बदल सकते हैं।

ऐसा करने के लिए, किसी भी आइकन समूह को दर्ज करने के लिए डबल-क्लिक करें, फिर जो भी आकार बदलना चाहते हैं उसका चयन करें। इस मामले में, मैं रंग को नीले से हरे रंग में बदलने के लिए उपहार बॉक्स रिबन को संपादित करूंगा।

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

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

# 518531 दर्ज करें और दर्ज करें। यह परिणाम को सहेजना चाहिए और एक बार में सभी तीन आकारों को अद्यतन करना चाहिए। किसी भी अन्य रंग सेटिंग्स के साथ खेलने के लिए स्वतंत्र महसूस करें जिन्हें आप बदलना चाहते हैं!

05. प्रगति पट्टी शुरू करना

Click the top-left circle in the Elements panel to add a new circle to the canvas

[5 9] कैनवास में एक नया सर्कल जोड़ने के लिए तत्व पैनल में शीर्ष-बाएं सर्कल पर क्लिक करें

एक प्रगति पट्टी बनाने के लिए, आपको केवल दो आकार की आवश्यकता होती है: मंडल और आयताकार। शुक्र है, ये दोनों उपकरण मेनू के बहुत नीचे स्थित तत्व पैनल में उपलब्ध हैं।

तत्व पैनल पर क्लिक करें और सर्कल आकार का चयन करें, जो सूची में पहला आइटम है। यह स्वचालित रूप से आपके कार्यक्षेत्र के केंद्र में एक गहरा भूरा चक्र लगाएगा।

आप कोने या चयन सीमा में छोटे सफेद वर्ग के बक्से खींचकर सर्कल का आकार बदल सकते हैं। यह अच्छी तरह से काम करता है, लेकिन यह प्रत्यक्ष आकार बदलने की सुविधा के रूप में सटीक नहीं है।

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

दोनों फ़ील्ड में 100 दर्ज करें और अपने पहले सर्कल को पहले आइकन के नीचे खींचें।

06. मलबे की डुप्लिकेटिंग

[1 9 6] [1 9 7] [1 9 8]

[5 9] सर्कल का आकार बदलें और दो बार डुप्लिकेट करें, फिर उन्हें प्रत्येक शॉपिंग आइकन के नीचे ले जाएं

आपके सर्कल आकार के चयन के साथ, शीर्ष मेनू में डुप्लिकेट पर क्लिक करें। अब, इस डुप्लिकेट को पुनर्स्थापित करें ताकि यह आपके मूल सर्कल के साथ निकटता से संरेखित हो जाए। इसे पहले सर्कल के शीर्ष पर सही करने का प्रयास करें ताकि वे एक आकार की तरह दिखें।

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

ऐसा तब तक करें जब तक कि आपके पास 100 x 100 पर तीन अलग-अलग सर्कल आकृतियां हों, प्रत्येक तीन आइकन के नीचे रखा गया हो।

07. कुछ कनेक्टिंग लाइनें जोड़ें

Select the rectangle shape and arrange it behind the three circles

[5 9] आयताकार आकार का चयन करें और इसे तीन मंडलियों के पीछे व्यवस्थित करें

तत्व पैनल पर वापस जाएं और स्क्वायर आकार ढूंढें। कैनवास पर एक वर्ग जोड़ने के लिए क्लिक करें।

इस आकार के साथ चयनित उपकरण पर वापस जाएं और चौड़ाई / ऊंचाई आकार पैनल खोजें। चूंकि इस आयत को प्रगति पट्टी की पूरी चौड़ाई का विस्तार करना चाहिए, हमें बस एक बहुत लंबा आकार चाहिए। तो ऊंचाई को 10 में बदलें और अपनी सभी सर्किलों को एक साथ जोड़ने के लिए आपको जो भी संख्या की आवश्यकता है, उसकी चौड़ाई बदलें। मेरा 750 चौड़ा है।

अब, स्थिति में इस आयताकार के साथ, चयन पैनल के नीचे की ओर देखो जहां यह कहता है कि व्यवस्था & amp; फ्लिप। शीर्ष पंक्ति में दूसरे आइकन पर क्लिक करें, जो आपको अन्य आकारों के पीछे किसी भी चयनित आकार को स्थानांतरित करने देता है।

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

08. रिकॉलोरिंग

[24 9] Recolour all the shapes and include a small stroke on the three circles

[5 9] सभी आकृतियों को दोहराएं और तीन सर्कल पर एक छोटा स्ट्रोक शामिल करें

वर्तमान प्रगति पट्टी थोड़ा अंधेरा दिखता है, तो चलो रंग थोड़ा सा बदल दें।

लंबी आयत का चयन करने के लिए क्लिक करें और उपकरण पैनल में भरें सेटिंग्स खोजें। रंग को # c5c5c5 में बदलें और एंटर दबाएं।

अब, आयताकार को अचयनित करने के लिए कहीं भी ऑफ-कैनवास पर क्लिक करें। हम सर्कल रंगों को भी बदलना चाहते हैं, और उन्हें एक सीमा के रंग के रूप में गहरा भूरे रंग का उपयोग करके हल्का होना चाहिए।

शिफ्ट पकड़ो, और तीन मंडलियों में से प्रत्येक पर क्लिक करें। भरें रंग को # F5F5F5 में समायोजित करें, एंटर दबाएं और फिर फ़िल रंग का चयन करें पैनल को बंद करने के लिए एक्स आइकन पर क्लिक करें। नीचे, आपको स्ट्रोक सेटिंग्स मिल जाएगी। स्ट्रोक भरें # c5c5c5 पर भरें और एंटर दबाएं।

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

09. प्रगति कदम जोड़ना

Add a text label into the first circle and duplicate the text for all three shapes

[5 9] पहले सर्कल में एक टेक्स्ट लेबल जोड़ें और सभी तीन आकारों के लिए पाठ को डुप्लिकेट करें

चलिए प्रगति बार डिजाइन को अंतिम रूप देने के लिए प्रत्येक सर्कल में कुछ संख्याएं जोड़ें।

टेक्स्ट टूल पर क्लिक करें और पहले सर्कल में नंबर 1 दर्ज करें। मैं सीमाओं से मेल खाने के लिए रंग # c5c5c5 के साथ ओपन सैन्स अतिरिक्त-बोल्ड, आकार 45 का उपयोग कर रहा हूं। इस पाठ को खींचें ताकि यह सर्कल के केंद्र में स्थित हो।

पाठ तत्व को डुप्लिकेट करें और इसे '2' के साथ दूसरे सर्कल में ले जाएं। टेक्स्ट '3' के साथ तीसरे सर्कल के लिए भी ऐसा ही करें।

10. पहले चरण को हाइलाइट करें

Recolour the first circle blue so it appears like the active progress step

[5 9] पहले सर्कल नीले को दोहराएं, इसलिए यह सक्रिय प्रगति चरण की तरह दिखाई देता है

एक परिष्कृत स्पर्श के रूप में, आइए हल्के नीले रूपरेखा का उपयोग करके पहले चरण को हाइलाइट करें। सबसे पहले आपने '1' नंबर का चयन किया है, और भरने को # 4976 ए 3 में बदलें। फिर पाठ के पीछे सर्कल का चयन करने के लिए क्लिक करें। स्ट्रोक सेटिंग्स खोजें और स्ट्रोक रंग को # 4976 ए 3 में बदलें। इसे सर्कल के चारों ओर एक गहरी नीली सीमा जोड़ना चाहिए। सर्कल के साथ अभी भी चुना गया है, भरें सेटिंग्स पर क्लिक करें और रंग को # e2ebfa में बदलें।

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

या यदि आप इसे भविष्य में परिवर्तनों के लिए सहेजना चाहते हैं, तो बस फ़ाइल पर जाएं & gt; बाद में सहेजें। आपको एक नि: शुल्क वेक्टीजी खाता बनाना होगा, लेकिन भविष्य में संदर्भ के लिए यह आपके कड़ी मेहनत को सहेजने का एक शानदार तरीका है।

यह लेख मूल रूप से दिखाई दिया नेट पत्रिका अंक 295. इसे खरीदें [32 9] यहां

।

अधिक पढ़ें:

    [2 9] उत्तरदायी एसवीजी के लिए 10 गोल्डन नियम
[2 9] SVG 2 में रोमांचक नई सुविधाओं का अन्वेषण करें [2 9] GSAP के साथ सुपरचार्ज एसवीजी एनिमेशन
[35 9]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

फ़ोटोशॉप में झुर्रियों को कैसे हटाएं

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: जेसन पार्नेल-ब्रूक्स) [1 9] यह ट्य..

Affinity Designer: How to use effects and styles

कैसे करना है Sep 11, 2025

(छवि क्रेडिट: सेरिफ़) [1 9] वेक्टर और रास्टर उपक..

10 tips for mastering Apple's Photos app

कैसे करना है Sep 11, 2025

मैकोस फोटो ऐप ने आईफोटो के रूप में जीवन शुरू किया: ..

How to build an AR app

कैसे करना है Sep 11, 2025

पेज 1 में से 3: एक एआर ऐप बनाएं: चरण 01-10 ..

12 tips for realistic 3D lighting

कैसे करना है Sep 11, 2025

प्रकाश किसी भी में मौलिक है 3 डी कला आप जिस पर..

हुदिनी में पौधों को बढ़ाएं

कैसे करना है Sep 11, 2025

हुदिनी का मजबूत बिंदु हमेशा इसकी प्रक्रियात्मक �..

How to capture the light with oils

कैसे करना है Sep 11, 2025

प्रकाश ऐसा कुछ है जो हमेशा चित्रकारों को प्रेरित ..

इलस्ट्रेटर में एक लोगो बनाएं

कैसे करना है Sep 11, 2025

इस हफ्ते ने एडोब के इसे अब प्लेलिस्ट पर कुछ नए वीडियो की रिहाई देखी, एक मिन..

श्रेणियाँ