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