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

Як оформити скріншот

1. Перетягніть скріншот у зону завантаження, натисніть на неї, щоб вибрати файл, або просто вставте знімок через Ctrl+V (⌘+V на Mac) одразу після створення. Кнопка Вставити з буфера обміну робить те саме там, де це дозволяє браузер.
2. Виберіть Рамку вікна: Вікно macOS (червона, жовта й зелена кнопки), Вікно Windows (згорнути, розгорнути й закрити праворуч), Вікно браузера (вкладка, кнопки навігації та адресний рядок) або Без рамки. Виберіть Тему рамки, Світла чи Темна, залежно від скріншота.
3. Введіть Заголовок вікна або URL. Він з’явиться в рядку заголовка або у вкладці й адресному рядку рамки браузера (початкове https:// відкидається, як це роблять браузери).
4. Виберіть Тло: один із шаблонів Градієнт, Однотонний колір, власне Зображення, Розмитий скріншот (м’яка розмита копія самого знімка) або Прозоре.
5. Налаштуйте Відступ, Радіус кутів, Розмір тіні, Зміщення тіні та Непрозорість тіні. Перегляд оновлюється під час руху кожного повзунка.
6. Виберіть Співвідношення сторін, якщо зображення призначене для певного місця, і Розмір результату.
7. Натисніть Завантажити PNG або Копіювати зображення, щоб вставити результат прямо в чат, документ чи слайд.

Навіщо оформлювати скріншот

Звичайний скріншот має різкі краї й зливається з білою сторінкою навколо. Якщо розмістити його на кольоровому тлі, з простором довкола й м’якою тінню, він відокремлюється від навколишнього вмісту й сприймається як окремий об’єкт: вікно, яке ви показуєте, а не шматок сторінки. Саме такий вигляд використовують у запусках продуктів, журналах змін, документації, дописах і презентаціях.

Рамки вікон малює сам інструмент, піксель за пікселем, а не копіює з операційної системи. Вони дають контекст (застосунок для комп’ютера, вебсайт) і приховують те, що знімок було обрізано. Для вебсторінок використовуйте рамку браузера: вона також показує вашу URL-адресу, що корисно в посібниках.

Співвідношення сторін для соцмереж

З варіантом Авто (за розміром скріншота) зображення – це точно скріншот плюс його відступи. Інші шаблони збільшують тло лише в одному напрямку й тримають вікно по центру, тож нічого не обрізається:

• 16:9 (X / Twitter, YouTube, слайди): співвідношення, яке X показує в стрічці без обрізання, і форма більшості презентацій.
• 1,91:1 (LinkedIn, попередній перегляд посилання Facebook): форма зображень посилань Open Graph (1200 × 628 px).
• Квадрат 1:1 (Instagram) і Портрет 4:5 (стрічка Instagram): дві форми, які стрічка Instagram показує повністю.
• 9:16 (Stories, Reels) для вертикальних форматів і 4:3 (презентації) для старіших шаблонів слайдів.

Розміри та якість

Результат зберігає повну роздільну здатність вашого скріншота, тож текст залишається чітким. Відступ – це відсоток розміру вікна, а рядок заголовка, радіус кутів і тінь масштабуються за шириною скріншота, тому знімок із Retina-екрана й маленький знімок виглядають однаково. Розмір PNG показано під переглядом. Задайте Розмір результату 50%, щоб отримати легший файл, або 200%, щоб збільшити малий знімок. Дуже великі результати зменшуються до найбільшого полотна, яке може створити будь-який браузер.

PNG зберігає все без втрат і підтримує прозорість: із Прозорим тлом лишаються тільки вікно та його тінь, готові до розміщення на будь-якому дизайні. Усе відбувається у вашому браузері: скріншот ніколи не завантажується на сервер.