बैनर कैनवस के लिए नहीं, क्रॉप के लिए बनता है

प्रोफ़ाइल बैनर एक जगह पर एक तस्वीर नहीं है। वह एक तस्वीर है जो फ़ोन, टैबलेट, डेस्कटॉप ब्राउज़र और कुछ प्लेटफ़ॉर्म पर टीवी पर अलग-अलग क्रॉप होती है, और इन सब में दिखने वाला इकलौता हिस्सा बीच से गुज़रती एक पट्टी है।

पूरे कैनवस के लिए डिज़ाइन करना और फिर पता चलना कि फ़ोन पर लोगो कट गया, आम अनुभव है। कैनवस अपलोड का आकार है; डिज़ाइन की जगह उससे छोटी है।

सेफ़ एरिया इतना छोटा क्यों है?

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

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

व्यावहारिक नतीजा यह है कि बैनर को दो बार काम करना है: डेस्कटॉप के लिए पूरी चौड़ाई की रचना के रूप में, और बाक़ी सबके लिए अकेली बीच की पट्टी के रूप में।

इसे परखने में कुछ नहीं लगता और लगभग कोई नहीं परखता। प्रोफ़ाइल पेज देखते हुए ब्राउज़र की खिड़की को पूरी चौड़ाई से फ़ोन की चौड़ाई तक सिकोड़ने पर क्रॉप सामने होता दिखता है, और दस सेकंड में पता चल जाता है कि डिज़ाइन के कौन-से हिस्से बचते हैं।

प्रोफ़ाइल फ़ोटो कहाँ बैठती है?

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

जिस बैनर का विषय वहीं है जहाँ अवतार आता है, उसका विषय किसी एक लेआउट पर हमेशा ढका रहता है। उस हिस्से को जान-बूझकर ख़ाली छोड़ना इलाज है, और इसकी कोई क़ीमत नहीं।

हिस्सा क्या बदलता है
बैनर की चौड़ाई स्क्रीन पतली होने पर बीच से क्रॉप होती है
अवतार की जगह डेस्कटॉप पर कोने में, फ़ोन पर अक्सर बीच में
अवतार की शक्ल ज़्यादातर प्लेटफ़ॉर्म पर गोल, कुछ पर चौकोर
ऊपर का टेक्स्ट कुछ प्लेटफ़ॉर्म तस्वीर पर नाम जोड़ते हैं

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

कवर और बैनर अलग क्यों हैं?

क्योंकि वे अलग काम करते हैं। कवर किसी पेज के ऊपर बैठता है और आम तौर पर उसकी शक्ल तय होती है; बैनर एक पट्टी है जो ढल जाती है। बातचीत में दोनों एक-दूसरे की जगह इस्तेमाल होते हैं और बर्ताव अलग करते हैं।

इवेंट कवर सबसे बँधे हुए हैं, क्योंकि प्लेटफ़ॉर्म तस्वीर के एक हिस्से पर तारीख़ और शीर्षक लिख देता है और वह टेक्स्ट वैकल्पिक नहीं। वहाँ रखा हर डिज़ाइन उससे होड़ करता है।

स्ट्रीमिंग प्लेटफ़ॉर्म की पैनल तस्वीरें उलटा मामला हैं: छोटी, तय, और ग्रिड में दिखाई जाने वाली, इसलिए वे बैनर से ज़्यादा आइकन के क़रीब हैं और बारीक होने के बजाय एक नज़र में पढ़ी जाने से फ़ायदे में रहती हैं।

ऑडियो कवर आर्ट का क्या?

वह सबसे सख़्त है, क्योंकि बहुत छोटा और अक्सर चौकोर दिखाया जाता है। पॉडकास्ट और एल्बम का आर्टवर्क पूरे आकार से ज़्यादा थंबनेल के आकार पर देखा जाता है, जिससे बारीक डिटेल और छोटा टेक्स्ट बेकार हो जाते हैं।

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

म्यूज़िक ऐप के लिए बने खड़े फ़ॉर्मैट दूसरा छोर हैं: पूरी खड़ी स्क्रीन में एक छोटा दोहराता दृश्य, जहाँ डिज़ाइन को नीचे के प्लेबैक कंट्रोल से ढके जाने के बावजूद बचना है।

ये कितनी बार बदलते हैं?

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

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

स्रोत फ़ाइल को सेफ़ एरिया के चारों ओर खुले हाशियों के साथ रखना बाक़ी को ढक देता है। जो बैनर दोबारा बनाए बिना फिर से क्रॉप हो सके, वह अगले रीडिज़ाइन से बच जाता है।

लोग जो पूछते हैं

क्या डार्क मोड के लिए अलग बैनर चाहिए? प्लेटफ़ॉर्म उन्हें बदलते नहीं, इसलिए एक ही तस्वीर को दोनों पर पढ़ी जानी है। ऐसी पृष्ठभूमि से बचें जो किसी एक को मानकर चले।

क्या बैनर में लोगो दोहराऊँ? एक बार, छोटा, अवतार वाले हिस्से से बाहर। वह पेज पर प्रोफ़ाइल फ़ोटो के रूप में पहले से है।

क्या बैनर में URL डाल सकता हूँ? वह क्लिक नहीं होता और अक्सर कट जाता है। इसके लिए प्रोफ़ाइल का लिंक वाला फ़ील्ड है।

मेरा बैनर धुँधला क्यों दिखता है? वह प्लेटफ़ॉर्म की चौड़ाई से कम पर अपलोड हुआ और बड़ा किया गया। बताए गए आकार पर या उससे ऊपर अपलोड करें।

क्या पारदर्शी PNG चलेगी? पारदर्शिता आम तौर पर ऐसी पृष्ठभूमि पर चपटी कर दी जाती है जो आप नहीं चुनते। जो पृष्ठभूमि चाहिए उसके साथ एक्सपोर्ट करें।

बीच डिज़ाइन करें, किनारे सजाएँ। इमेज क्रॉप करें गोल मास्क लगाता है ताकि आप देख सकें कि क्या बचता है, और इमेज रीसाइज़ करें चौकोर मास्टर बनाता है। डाइमेंशन ख़ुद एक तालिका हैं, फ़िलहाल अंग्रेज़ी में: सोशल मीडिया इमेज साइज़ में Instagram, Facebook और TikTok के अवतार और X, LinkedIn, Twitch और उसके पैनल, Discord, Reddit, Facebook इवेंट, Pinterest बोर्ड, पॉडकास्ट आर्ट और Spotify Canvas के बैनर हैं। YouTube बैनर और Facebook कवर फ़ोटो के अपने पेज हैं।