Красивый скриншот онлайн: рамка окна и фон

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

Вставьте снимок экрана сочетанием Ctrl + V — и настройте оформление. Скриншот не загружается на сервер: всё рисуется прямо в браузере.

Как пользоваться

1. Сделайте скриншот и вставьте его на страницу: Ctrl + V (на Mac — ⌘ Cmd + V). Ещё можно перетащить файл в поле или нажать на него и выбрать. Хотите сначала посмотреть — нажмите «Показать на примере».
2. Выберите рамку. Для программ и сайтов подойдут «Окно macOS», «Окно Windows» и «Браузер», для мобильных приложений — «Телефон» или «Планшет». Рядом переключается светлый и тёмный вариант рамки.
3. Подпишите окно. У окон можно задать заголовок, у браузера — адрес в строке. Пустой заголовок — тоже нормально.
4. Подберите фон. Двенадцать градиентов, свой цвет или прозрачный фон — если картинку потом будут накладывать на что-то ещё.
5. Настройте отступ, скругление и тень. Всё меняется сразу, без кнопки «Применить».
6. Выберите холст. «Авто» — по размеру скриншота, остальные варианты вписывают картинку по центру нужной пропорции: 16:9, квадрат, вертикальный пост или сторис.
7. Скачайте PNG в исходном размере или вдвое больше, либо нажмите «Скопировать» и вставьте картинку прямо в мессенджер.

Зачем оформлять скриншоты

• 📣 Соцсети и Telegram. Скриншот на цветном фоне выделяется в ленте, а холст 1:1 или 4:5 не обрежется в превью.
• 📊 Презентации. В рамке окна сразу понятно, что это интерфейс программы, а не часть слайда. Холст 16:9 ложится на слайд без полос.
• 📘 README и документация. Окно с тенью и отступом не сливается с белым фоном страницы, особенно если на самом скриншоте тоже много белого.
• ✍️ Статьи и инструкции. Рамка браузера с адресом подсказывает читателю, на каком сайте происходит действие.
• 📱 Мобильные приложения. Скриншот телефона без корпуса выглядит как обычная длинная картинка. В рамке устройства его легко узнать.

Какой размер и холст выбрать

Точные размеры для каждой площадки собраны в шпаргалке размеры картинок для соцсетей. Если нужен конкретный размер в пикселях, после оформления подгоните картинку в инструменте изменить размер фото.

Как подобрать фон

• 🎨 Контраст с рамкой. Светлое окно лучше смотрится на насыщенном или тёмном фоне, тёмное — на светлом или ярком.
• 🧩 Цвета бренда. Возьмите цвет из логотипа или интерфейса и вставьте его как «Свой цвет». Подобрать оттенок помогут конвертер HEX и RGB и пипетка цвета с картинки.
• 🌫️ Не перегружайте. Если на скриншоте много цветных элементов, выберите спокойный фон: «Облако», «Мята» или светлый сплошной цвет.
• 🔲 Прозрачный фон нужен, когда картинку будут ставить на сайт или слайд со своим фоном. Тень при этом сохраняется — она полупрозрачная.
• 📏 Отступ 6–10 % — золотая середина. Меньше — картинка выглядит тесно, больше — скриншот становится мелким в превью.

Свои градиенты можно собрать в генераторе CSS-градиентов, а удачные пары цветов подсказать подбор сочетаний цветов.

Как сделать скриншот

В Windows снимок области (Win + Shift + S) и окна (Alt + PrtSc) сразу оказывается в буфере обмена, а Win + PrtSc сохраняет весь экран в папку «Снимки экрана». В GNOME снимок и сохраняется в папку, и копируется в буфер — его можно тут же вставить на эту страницу. На Mac снимок по умолчанию сохраняется на рабочий стол, а чтобы он попал в буфер, добавьте к сочетанию Ctrl: Ctrl + ⇧ Shift + ⌘ Cmd + 4. Все способы, запись экрана и смена папки для снимков — в статье как сделать скриншот на Mac.

Частые вопросы

Скриншот загружается на ваш сервер?

Нет. Картинка открывается и рисуется в браузере на вашем устройстве, никуда не отправляется и нигде не сохраняется. После закрытия вкладки ничего не остаётся.

Почему не получается вставить скриншот через Ctrl + V?

Проверьте, что в буфере именно картинка, а не файл из проводника: некоторые программы копируют путь к файлу. В этом случае перетащите файл на страницу или выберите его кнопкой. И убедитесь, что курсор не стоит в поле для текста — там вставляется текст.

В каком формате сохраняется картинка?

В PNG: он не портит мелкий текст и чёткие края интерфейса и поддерживает прозрачный фон. Если нужен файл полегче, переведите готовый PNG в WebP в конвертере WebP или сожмите фото.

Можно ли сделать прозрачный фон?

Да, выберите «Прозрачный». Рамка и тень сохранятся, а вокруг будет прозрачная область — удобно для сайтов и слайдов со своим фоном.

Чем отличаются «PNG» и «PNG 2×»?

Обычный PNG сохраняет скриншот в его исходном размере. «2×» вдвое увеличивает картинку вместе с рамкой: рамка и текст в заголовке станут чётче, но сам скриншот новых деталей не получит.

Почему кнопки «Скопировать» нет?

Копирование картинок в буфер поддерживают не все браузеры. Если кнопки нет или браузер не разрешил копирование, скачайте PNG — результат будет тем же.

Можно ли вставить скриншот телефона в рамку ноутбука?

Можно, но смотреться будет странно: рамка подстраивается под пропорции скриншота. Для вертикальных снимков выбирайте «Телефон» или «Планшет», для горизонтальных — окна, браузер или ноутбук.

Добавляется ли водяной знак?

Нет. Никаких подписей и логотипов на картинке не появляется — только ваш скриншот, рамка и фон.