Оформление скриншотов

Голый скриншот выглядит плоским, куда бы вы его ни вставили

Скриншот прямо с вашего экрана — это прямоугольник пикселей с жёстким краем со всех четырёх сторон. Сам по себе для баг-репорта он годится. Но в момент, когда вы вставляете его в твит, слайд, главный блок лендинга или документ Notion, он выглядит незаконченным — упирается прямо в текст вокруг, углы кажутся острыми и дешёвыми, и нет разделения между изображением и фоном. Вы видели отшлифованную версию сотни раз: продуктовый скриншот, парящий на мягком цветном градиенте, с небольшим воздухом вокруг, деликатно скруглёнными углами и лёгкой тенью, чтобы он приподнимался над страницей. Этот вид — не фильтр и не стоковый шаблон. Это три мелочи, сложенные вместе, и этот инструмент делает ровно эти три вещи.

Вы бросаете скриншот на холст, и он компонует готовую картинку вживую в вашем браузере. Вы выбираете фон — готовый градиент, сплошной цвет или прозрачность, — задаёте, сколько отступа вокруг скриншота, выбираете радиус углов и крутите тень вверх или вниз. Превью обновляется по ходу. Когда выглядит верно, вы экспортируете PNG. Скриншот, который может содержать тред писем, дашборд, чат, номера счетов, что угодно, рисуется прямо на элемент <canvas> и никогда не покидает вкладку. Без загрузки, без аккаунта, и как только страница загружена, она продолжает работать с выключенной сетью.

Что на самом деле делают отступ, скругление, тень и градиент

• Отступ даёт скриншоту поле, чтобы он не был втиснут край в край. Этот зазор и делает так, что он читается как намеренный объект, размещённый на поверхности, а не как сырой снимок.
• Скруглённые углы на самом скриншоте смягчают четыре жёстких прямых угла. Крохотное изменение, которое мгновенно читается как «спроектировано», а не «схвачено».
• Мягкая тень отделяет скриншот от фона, так что он выглядит слегка приподнятым над поверхностью, а не приклеенным к ней плоско. Держите её лёгкой — именно это продаёт глубину, не выглядя тяжело.
• Градиентный (или сплошной) фон заполняет отступ цветом. Мягкий двухтоновый градиент — самая главная причина, по которой скриншоты запусков приложений и списков изменений выглядят дорого; сплошной цвет — более спокойная, брендовая альтернатива.

Вместе это и есть вид «продуктового скриншота», и в этом весь охват инструмента — не больше и не меньше.

Соотношения сторон под то, куда он идёт

Вывод может быть Авто (рамка просто оборачивает ваш скриншот плюс отступ) или зафиксирован на 16:9, 4:3, 1:1 или 3:4. Соотношение важно, потому что у каждого места, куда вы постите, есть предпочтительная форма: 16:9 для слайдов и широких социальных карточек, 1:1 для квадратного поста в Instagram или LinkedIn, 3:4 для высокого изображения, заполняющего больше экрана телефона. Зафиксируйте соотношение, и отступ заполняет остаток рамки вокруг вашего скриншота, так что экспорт ложится в этот слот без неудачной обрезки.

Прозрачный фон, намеренно

Поставьте фон прозрачным, и PNG экспортируется с чистой областью отступа вместо цветной. Это тот вариант, что нужен, когда вы собираетесь поместить скриншот со скруглёнными углами и тенью на свой собственный фон в Figma, Keynote или превью — вы сохраняете отступ, радиус и тень и кладёте его на любую поверхность, что у вас уже есть. Тень остаётся; исчезает только заливка за ней.

Почему «только локально» здесь и есть суть

Скриншоты тихо одна из самых приватных вещей, версией которых вы когда-либо захотите поделиться. Один снимок может показать имя клиента, счёт, приватную личку, внутреннюю метрику, токен в адресной строке. Украшатель, который загружает ваше изображение на сервер, чтобы «обработать» его, просит вас отдать всё это только ради добавления тени. Здесь компоновка — это простая работа с холстом в вашем браузере, так что нечего загружать и нечему доверять.

Одна честная заметка об охвате: он добавляет полировку градиент-отступ-тень и больше ничего. Он не оборачивает ваш скриншот в браузерную рамку или макет телефона и не добавляет стрелки, размытие или аннотации — это вид украшения, по одному скриншоту за раз.