زیباساز اسکرین‌شات

یک اسکرین‌شات لخت هرجا بچسبانیدش تخت به‌نظر می‌رسد

یک اسکرین‌شات مستقیم از صفحه‌تان یک مستطیل از پیکسل با یک لبه تیز روی هر چهار طرف است. به‌خودی‌خود این برای یک گزارش باگ خوب است. اما همان لحظه که در یک توییت، یک اسلاید، یک بخش شاخص لندینگ‌پیج، یا یک سند Notion می‌اندازیدش، ناتمام به‌نظر می‌رسد — درست به متن اطرافش می‌چسبد، گوشه‌ها تیز و ارزان حس می‌شوند، و هیچ جدایی‌ای بین تصویر و پس‌زمینه نیست. نسخه پرداخته را صد بار دیده‌اید: یک اسکرین‌شات محصول که روی یک گرادیان رنگی نرم شناور است، با کمی فضای تنفس دورش، گوشه‌های ملایم گردشده، و یک سایه محو تا از صفحه بلند شود. آن ظاهر یک فیلتر یا یک قالب آماده نیست. سه چیز کوچک است که روی هم انباشته شده‌اند، و این ابزار دقیقاً همان سه چیز را انجام می‌دهد.

یک اسکرین‌شات را روی canvas می‌اندازید و تصویر آماده را زنده در مرورگر شما می‌چیند. یک پس‌زمینه انتخاب می‌کنید — یک گرادیان از پیش‌تنظیم، یک رنگ توپُر، یا شفاف — تنظیم می‌کنید چقدر padding دور اسکرین‌شات بنشیند، شعاع گوشه را برمی‌گزینید، و سایه‌ی افتاده را بالا یا پایین می‌گردانید. پیش‌نمایش همان‌طور که پیش می‌روید به‌روز می‌شود. وقتی درست به‌نظر رسید، یک PNG صادر می‌کنید. اسکرین‌شات، که ممکن است یک رشته ایمیل، یک داشبورد، یک چت، شماره‌های حساب، هر چیزی را در خود داشته باشد، مستقیم روی یک عنصر <canvas> کشیده می‌شود و هرگز تب را ترک نمی‌کند. بدون آپلود، بدون حساب کاربری، و همین‌که صفحه بارگذاری شد با شبکه خاموش به کار ادامه می‌دهد.

padding، گردکردن، سایه و گرادیان واقعاً چه می‌کنند

• padding به اسکرین‌شات حاشیه می‌دهد تا لبه‌به‌لبه چپانده نشود. آن فاصله همان چیزی است که باعث می‌شود مثل یک شیء عمدی گذاشته‌شده روی یک سطح خوانده شود نه یک کپچر خام.
• گوشه‌های گردشده روی خود اسکرین‌شات چهار زاویه قائم تیز را نرم می‌کنند. تغییری ریز است که فوراً «طراحی‌شده» خوانده می‌شود به‌جای «گرفته‌شده».
• یک سایه افتاده نرم اسکرین‌شات را از پس‌زمینه جدا می‌کند، پس به‌نظر می‌رسد کمی بالای سطح نشسته نه اینکه تخت رویش چسبانده شده. محو نگهش دارید — همان چیزی است که عمق را می‌فروشد بدون آنکه سنگین به‌نظر برسد.
• یک پس‌زمینه گرادیان (یا توپُر) padding را با رنگ پر می‌کند. یک گرادیان دو‌رنگ ملایم بزرگ‌ترین دلیل تنهایی است که آن اسکرین‌شات‌های عرضه‌اپ و تغییرات‌نگار گران به‌نظر می‌رسند؛ یک رنگ توپُر جایگزین آرام‌تر و هماهنگ‌با‌برند است.

این‌ها با هم ظاهر «اسکرین‌شات محصول» هستند، و آن کل دامنه ابزار است — نه بیشتر، نه کمتر.

نسبت ابعاد برای جایی که می‌رود

خروجی می‌تواند Auto باشد (کادر فقط اسکرین‌شات به‌علاوه padding را می‌پیچد) یا قفل‌شده به ۱۶:۹، ۴:۳، ۱:۱، یا ۳:۴. نسبت مهم است چون هر جایی که پست می‌کنید یک شکل ترجیحی دارد: ۱۶:۹ برای دک‌های اسلاید و کارت‌های اجتماعی پهن، ۱:۱ برای یک پست مربع اینستاگرام یا LinkedIn، ۳:۴ برای یک تصویر بلند که بیشتر یک صفحه گوشی را پر می‌کند. نسبت را قفل کنید و padding بقیه کادر دور اسکرین‌شات را پر می‌کند، پس خروجی بدون بریده‌شدن ناجور در آن جای می‌افتد.

پس‌زمینه شفاف، عمداً

پس‌زمینه را روی شفاف بگذارید و PNG با ناحیه padding شفاف به‌جای رنگی صادر می‌شود. آن همان است که می‌خواهید وقتی قرار است اسکرین‌شاتِ گوشه‌گرد و سایه‌دار را روی پس‌زمینه خودتان در Figma، Keynote، یا یک بندانگشتی بگذارید — padding، شعاع و سایه را نگه می‌دارید، و رویش هر سطحی که از قبل دارید می‌اندازید. سایه می‌ماند؛ فقط پُرِ پشتش ناپدید می‌شود.

چرا فقط‌محلی اینجا نکته است

اسکرین‌شات‌ها بی‌سروصدا یکی از خصوصی‌ترین چیزهایی‌اند که تا به حال بخواهید نسخه‌ای ازشان را به اشتراک بگذارید. یک کپچر واحد می‌تواند نام یک مشتری، یک صورت‌حساب، یک DM خصوصی، یک معیار داخلی، یک توکن در نوار URL را نشان دهد. یک زیباساز که تصویرتان را برای «پردازش» به یک سرور آپلود می‌کند از شما می‌خواهد همه آن را فقط برای افزودن یک سایه تحویل دهید. اینجا چیدن، کار سادهٔ canvas در مرورگر خودتان است، پس چیزی برای آپلود و چیزی برای اعتماد نیست.

یک نکته صادقانه درباره دامنه: این پرداختِ گرادیان-padding-سایه را می‌افزاید و نه چیز دیگری. اسکرین‌شاتتان را در یک قاب مرورگر یا ماکاپ قاب‌گوشی نمی‌پیچد، و پیکان، محویت یا حاشیه‌نویسی اضافه نمی‌کند — ظاهر زیباسازی است، یک اسکرین‌شات در هر بار.