Розмістити фон за скріншотом — найшвидший спосіб зробити його завершеним. Скріншот перестає бути голим прямокутником і стає об'єктом, що лежить на поверхні — з полем навколо, пом'якшеними кутами і дещицею глибини. Цей посібник охоплює три варіанти фону (градієнт, суцільний, прозорий), коли брати кожен, і як усе зробити, не передаючи скріншот на сервер.
Чому фон змінює все
У сирого скріншота немає поля й немає відокремлення від того, на що він потрапляє. Додайте фон — і ви отримаєте відступ, смугу кольору навколо скріншота, яка одразу читається як навмисна. Заокругліть кути скріншота та киньте за ним ледь помітну тінь — і він відривається від фону, а не лежить пласко. Це частини, що працюють разом: фон — це полотно, відступ — простір для дихання, тінь — глибина.
Градієнтний фон
М'який двоколірний градієнт — саме тому скріншоти запуску застосунку та списку змін виглядають дорого. Він заповнює відступ ніжним переливом кольору, який притягує погляд до скріншота, не змагаючись із ним. Беріть градієнт, коли хочете, щоб зображення відчувалося як анонс релізу чи головний кадр — щось із дещицею енергії.
Перетягніть скріншот на полотно, оберіть один із готових градієнтів і підлаштуйте відступ, доки смуга кольору не стане врівноваженою. Попередній перегляд оновлюється наживо, тож ви бачите всю композицію — скріншот, кути, тінь, фон — ще до експорту PNG.
Суцільний колір фону
Суцільний колір — спокійніший, брендовий вибір. Коли у вас є колір бренду і ви хочете, щоб скріншот акуратно сидів усередині нього, пласка заливка тримає весь фокус на скріншоті й читається як продумана, а не показна. Це безпечний вибір для документації, серйозного анонсу чи набору зображень, які мають виглядати узгоджено між собою.
Прозорий фон
Задайте фону прозорість — і PNG експортується з ділянкою відступу чистою, а не залитою. Це те, що потрібне, коли ви завершуєте зображення не тут — а несете скріншот із заокругленими кутами і тінню у Figma, Keynote, мініатюру чи власний макет і кладете на фон, який уже маєте. Ви зберігаєте відступ, радіус кутів і тінь; зникає лише заливка за тінню. Це найгнучкіший варіант, бо повертає остаточну поверхню у ваші руки.
Відступ, кути й тінь
Хоч би який фон ви обрали, результат формують три регулятори:
- Відступ визначає, скільки кольору навколо скріншота. Більший відступ робить скріншот меншим і навмиснішим; менший — тримає його щільно і густо.
- Заокруглені кути скріншота пом'якшують його різкі краї. Малий радіус читається як відшліфований; тримайте його тонким.
- М'яка тінь відокремлює скріншот від фону. Тримайте її ледь помітною, щоб додати глибини, не виглядаючи важкою.
Можна також зафіксувати вивід у певному співвідношенні сторін — Авто, 16:9, 4:3, 1:1 чи 3:4 — і відступ дозаповнить кадр під нього, тож експорт підійде туди, куди йде.
Усе лишається на вашій машині
Компонування відбувається на полотні у вашому браузері, тож скріншот ніколи не завантажується. Це важливіше, ніж звучить: скріншот може містити приватне повідомлення, рахунок, панель або токен в URL. Додавання фону не повинне означати надсилання чогось із цього на сервер — і тут не означає: немає завантаження, немає облікового запису, а після завантаження сторінки все працює офлайн.
Одне чесне зауваження: це додає вигляд «градієнт-відступ-тінь» і нічого більше. Воно не обгорне ваш скріншот у макет браузера чи телефона і не додає стрілок чи анотацій. Для чистого фону за окремим скріншотом — це саме та робота.