How to create an animated web banner in Photoshop

Sep 10, 2025

कैसे करना है

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

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

Make this animated banner for a website below… — नीचे एक वेबसाइट के लिए इस एनिमेटेड बैनर बनाओ ... [1 9]

अगले कुछ चरणों में मैं दिखाऊंगा कि एक साधारण एनिमेटेड वेब बैनर को कैसे सेटअप और बनाएं जो एक बार महारत हासिल करने के लिए भविष्य में किसी भी नई नौकरी पर लागू होने के लिए एक हवा होगी।

01. अपना दस्तावेज़ सेट करें

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

व्यू मेनू से चुने गए दस्तावेज़ सीमाओं के साथ, दस्तावेज़ की सभी सीमाओं को स्नैप करने के लिए गाइड खींचें।

02. ग्राफिक तत्व जोड़ना

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

03. द्वितीयक स्लाइड बनाना

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

04. फ्रेम एनीमेशन बनाएं

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

सभी समय के 10 महानतम ओलंपिक खेल लोगो

05. तीर फ्लैश बनाएं और समय समायोजित करें

तीर फ्लैश को टाइमलाइन से "डुप्लिकेट चयनित फ्रेम" को दबाएं और तीर को बंद कर दें। समय को 0.5 सेकंड तक समायोजित करें और परत पैनल में तीर को चालू और बंद करने वाली प्रक्रिया को दोहराएं ताकि ऐसा लगता है कि यह चमक रहा है। अंत में आप कुछ समय को समायोजित करना चाहते हैं जब तक कि आप पूरी तरह से खुश न हों। लोगों के पास बहुत कम ध्यान दिया जाता है इसलिए फ्रेम दर के साथ धीमा होने का कोई मतलब नहीं है, लेकिन उन्हें अभी भी इसे पढ़ने में सक्षम होने की आवश्यकता है।

06. वेब और उपकरणों के लिए सहेजें

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

[15 9]

How to create an animated web banner in Photoshop

01. अपना दस्तावेज़ सेट करें

02. ग्राफिक तत्व जोड़ना

03. द्वितीयक स्लाइड बनाना

04. फ्रेम एनीमेशन बनाएं

05. तीर फ्लैश बनाएं और समय समायोजित करें

06. वेब और उपकरणों के लिए सहेजें

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

Use Framer X to build interactive prototypes

फ़ोटोशॉप में गहराई जोड़ने के लिए कलम टूल और बनावट का उपयोग करें

How to draw an elephant

Create special print finishes in InDesign

How to paint delightful miniatures

एक 3 डी मुद्रित गोब्लिन को कैसे मूर्तिकला

यथार्थवादी सीजी कपड़ा कैसे बनाएं

अपने स्केचिंग कौशल को तेज करें

श्रेणियाँ