स्क्रीनशॉट ब्यूटिफ़ायर

एक सादा स्क्रीनशॉट जहाँ भी आप paste करें सपाट दिखता है

आपकी स्क्रीन से सीधा एक स्क्रीनशॉट चारों तरफ़ एक कठोर किनारे वाला pixels का एक आयत है। अपने आप में यह एक bug report के लिए ठीक है। पर जिस पल आप इसे एक tweet, एक slide, एक landing-page hero, या एक Notion doc में गिराते हैं, यह अधूरा दिखता है — यह अपने आसपास के text से ठीक भिड़ जाता है, कोने तीखे और सस्ते लगते हैं, और image तथा background के बीच कोई अलगाव नहीं। आपने पॉलिश किया संस्करण सौ बार देखा है: एक प्रोडक्ट स्क्रीनशॉट एक नरम रंग gradient पर तैरता, इसके चारों ओर थोड़ी साँस की जगह के साथ, कोमलता से गोल किए कोने, और एक हल्की छाया ताकि यह पेज से उठे। वह रूप एक filter या एक stock template नहीं है। यह एक साथ जमी तीन छोटी चीज़ें हैं, और यह टूल ठीक वे तीन चीज़ें करता है।

आप एक स्क्रीनशॉट canvas पर गिराते हैं और यह तैयार तस्वीर आपके ब्राउज़र में लाइव रचता है। आप एक background चुनते हैं — एक preset gradient, एक ठोस रंग, या पारदर्शी — सेट करते हैं कि स्क्रीनशॉट के चारों ओर कितनी padding बैठे, corner radius चुनते हैं, और drop shadow को ऊपर या नीचे करते हैं। preview आपके चलते-चलते अपडेट होता है। जब यह सही दिखे, आप एक PNG export करते हैं। स्क्रीनशॉट, जिसमें एक email thread, एक dashboard, एक chat, account numbers, कुछ भी हो सकता है, सीधे एक <canvas> element पर बनाया जाता है और कभी tab नहीं छोड़ता। कोई अपलोड नहीं, कोई अकाउंट नहीं, और पेज लोड होने के बाद यह नेटवर्क बंद होने पर काम करता रहता है।

padding, rounding, shadow, और gradient असल में क्या करते हैं

• Padding स्क्रीनशॉट को margin देती है ताकि यह किनारे से किनारे तक ठुँसा न हो। वह अंतर ही इसे एक कच्चे capture के बजाय एक सतह पर रखी गई एक जानबूझकर वस्तु के रूप में पढ़ाता है।
• गोल किए कोने स्क्रीनशॉट पर ही चार कठोर समकोणों को नरम करते हैं। यह एक छोटा बदलाव है जो तुरंत "पकड़ा गया" के बजाय "डिज़ाइन किया गया" के रूप में पढ़ता है।
• एक नरम drop shadow स्क्रीनशॉट को background से अलग करती है, ताकि यह इस पर सपाट चिपकाए जाने के बजाय सतह से थोड़ा ऊपर बैठा दिखे। इसे हल्का रखें — वही भारी दिखे बिना गहराई बेचता है।
• एक gradient (या ठोस) background padding को रंग से भरता है। एक कोमल दो-रंग gradient वह अकेला सबसे बड़ा कारण है जिससे वे app-launch और changelog स्क्रीनशॉट महँगे दिखते हैं; एक ठोस रंग शांत, on-brand विकल्प है।

साथ में ये "product screenshot" रूप हैं, और वही टूल का पूरा दायरा है — न ज़्यादा, न कम।

जहाँ यह जा रहा है उसके लिए aspect ratios

आउटपुट Auto हो सकता है (फ़्रेम बस आपके स्क्रीनशॉट और padding को लपेटता है) या 16:9, 4:3, 1:1, या 3:4 पर बंद। अनुपात मायने रखता है क्योंकि हर जगह जहाँ आप post करते हैं उसका एक पसंदीदा आकार है: slide decks और चौड़े social cards के लिए 16:9, एक चौकोर Instagram या LinkedIn post के लिए 1:1, एक लंबी image के लिए 3:4 जो एक फ़ोन स्क्रीन का ज़्यादा भरती है। अनुपात बंद करें और padding आपके स्क्रीनशॉट के चारों ओर बाकी फ़्रेम भर देती है, ताकि export उस slot में बेढंगे तरीके से क्रॉप हुए बिना गिरे।

पारदर्शी background, जानबूझकर

background को पारदर्शी पर सेट करें और PNG padding क्षेत्र के रंगीन के बजाय साफ़ के साथ export होता है। यह वह है जो आप चाहते हैं जब आप गोल-कोने, छाया वाले स्क्रीनशॉट को Figma, Keynote, या एक thumbnail में अपने खुद के background पर रखने जा रहे हों — आप padding, radius, और shadow रखते हैं, और इसे जो भी सतह आपके पास पहले से है उस पर गिराते हैं। छाया रहती है; केवल उसके पीछे का भराव गायब होता है।

यहाँ केवल-लोकल ही मुद्दे की बात क्यों है

स्क्रीनशॉट चुपचाप उन सबसे निजी चीज़ों में से एक हैं जिनका एक संस्करण आप कभी शेयर करना चाहेंगे। एक अकेला capture एक ग्राहक का नाम, एक invoice, एक निजी DM, एक आंतरिक metric, एक URL bar में एक token दिखा सकता है। एक beautifier जो आपकी image को "process" करने के लिए एक सर्वर पर अपलोड करता है आपसे केवल एक छाया जोड़ने के लिए वह सब सौंपने को कह रहा है। यहाँ compositing आपके अपने ब्राउज़र में सादा canvas काम है, इसलिए अपलोड करने के लिए कुछ नहीं और भरोसा करने के लिए कुछ नहीं।

दायरे पर एक ईमानदार टिप्पणी: यह gradient-padding-shadow पॉलिश जोड़ता है और कुछ नहीं। यह आपके स्क्रीनशॉट को एक browser chrome या phone-frame mockup में नहीं लपेटता, और यह arrows, blur, या annotations नहीं जोड़ता — यह beautify रूप है, एक बार में एक स्क्रीनशॉट।