Перейти до вмісту

Оформити скриншот і створити мокап

Розмістіть скриншот на градієнтному тлі з тінями, заокругленими кутами та рамкою браузера чи пристрою. Усе відбувається у вашому браузері.

Перетягніть або вставте скриншотНатисніть Ctrl+V (⌘V), щоб вставити прямо з буфера обміну
Вибрати скриншотОбробка на вашому пристрої — без надсилання на сервер
Працює у браузері · без надсилання на серверЯк це працює

Як користуватися: Редактор скриншотів

  1. 1

    Вставте скриншот

    Одразу після знімка натисніть Ctrl+V (⌘V) на цій сторінці або перетягніть файл зображення.

  2. 2

    Оберіть тло

    Виберіть градієнт, сітку, суцільний колір, власне фото або прозорість.

  3. 3

    Рамка та стиль

    Додайте рамку браузера, вікна, ноутбука, планшета чи телефона; налаштуйте відступ, кути, тінь і підпис.

  4. 4

    Експорт

    Оберіть пресет розміру та 1×, 2× або 3×, потім завантажте PNG або скопіюйте його.

Ліміти та Pro

Окремі скриншоти до 25 MB з усіма рамками й тлом, експорт до 8000 px по довшому боці у 1×, 2× або 3×, без обмежень кількості та без водяних знаків.

Приймає вихідні файли понад 25 MB; окремих рамок чи стилів лише для Pro немає. Дивитися Pro

Про інструмент: Редактор скриншотів

Screenshot beautifier огортає звичайний знімок екрана в продуману композицію та експортує її як PNG. Розмір результату залежить від вашого скриншота, рамки й відступу: знімок 1280 × 800 у рамці браузера зі стандартним відступом стає приблизно 1510 × 1112 пікселів при 1× і вдвічі більшим при 2×. Пресети 16:9, 1:1, 4:5, 9:16, X і LinkedIn розширюють полотно до пропорцій платформи, не обрізаючи зображення. Експорт обмежено 8000 пікселями по довшому боці, а прозоре тло дає PNG з альфа-каналом, який зберігає й тінь.

Рамки — це узагальнені пристрої та вікна, які малює код у будь-якій роздільності: браузер з адресним рядком у світлому або темному варіанті, вікно робочого столу з кнопками керування й заголовком, ноутбук із кришкою та основою, планшет і телефони з острівцем або камерою-отвором. Доступно 12 тональних градієнтів і 6 сіткових, а також суцільний колір або фото з довільним розмиттям.

Інструмент призначений для запуску продуктів, документації, нотаток до релізів, дописів у соцмережах і презентацій. Він не додає анотацій (жодних стрілок чи виносок поверх знімка), сам не робить знімок екрана, а рамки стилізовані й не є точними копіями пристроїв будь-якого виробника.

Приватність

Уся композиція створюється на полотні у вашому браузері, тож файл не залишає ваш пристрій — знімки панелей керування та нерелізних функцій лишаються приватними. Якщо додати підпис, шрифт для нього завантажується з Google Fonts; цей запит не містить жодних даних скриншота.

Можливості

Намальовані рамки

Браузер, вікно, ноутбук, планшет і два стилі телефона, створені в будь-якій роздільності.

Градієнти та сітки

Тональні градієнти в дусі Material, сіткові переходи, суцільні кольори або ваше фото.

Пресети для соцмереж

Полотна 16:9, 1:1, 4:5, 9:16, X і LinkedIn, що ніколи не обрізають знімок.

Редактор скриншотів: поширені запитання

Як зробити, щоб скриншот виглядав професійно?
Додайте простору й глибини. Помістіть його на мʼякий градієнт із відступом 8–12%, трохи заокругліть кути, додайте ледь помітну тінь, а знімки сайтів вставте в рамку браузера зі справжньою адресою. Тло робіть спокійним, щоб увага лишалася на інтерфейсі, й експортуйте у 2×, щоб дрібний текст не втратив чіткості, коли соцмережі змінюватимуть розмір.
Який пресет розміру обрати для соцмереж?
16:9 підходить для дописів в X і мініатюр YouTube, LinkedIn — для дописів із посиланням у пропорціях 1,91:1, 1:1 або 4:5 — для зображень у стрічках Instagram і LinkedIn, а 9:16 — для Stories, Reels і Shorts. Автоматичний режим просто підганяє полотно під скриншот у рамці. Пресет лише розширює тло, тож сам скриншот ніколи не обрізається й не стискається.
Чи можна експортувати з прозорим тлом?
Так. Оберіть «Немає» в розділі «Тло», і PNG збереже альфа-канал: непрозорими лишаться тільки скриншот у рамці та його мʼяка тінь. Це зручно, щоб розмістити зображення на кольоровому слайді, у блоці лендингу чи в дизайн-файлі. Копіювання в буфер обміну теж зберігає прозорість у застосунках, що її підтримують, як-от Figma, Keynote і більшість дизайнерських інструментів.
Рамки пристроїв — це справжні зображення продуктів?
Ні. Кожну рамку код інструмента малює процедурно з прямокутників, кривих і градієнтів, а не бере з графіки виробників, тому вона масштабується до будь-якої роздільності й не містить зображень із товарними знаками. Форми навмисно узагальнені: телефон із вирізом-острівцем або камерою-отвором, ноутбук, планшет, вікно робочого столу та браузер.
Навіщо експортувати у 2× або 3×?
Екрани з високою щільністю показують два-три фізичні пікселі на один CSS-піксель, тому зображення 1× на них виглядає розмитим, а платформи на кшталт X і LinkedIn зменшують завантажені файли, ще більше розмиваючи дрібний текст. Експорт у 2× дає достатньо пікселів в обох випадках за помірного розміру файлу, а 3× підходить для друку та дуже великих дисплеїв. Масштаб змінює кількість пікселів, а не макет.