Генератор зображень-заповнювачів

Створюйте зображення-заповнювачі в готових розмірах для соцмереж, реклами та мініатюр — із градієнтною або випадковою заливкою, діагональними чи сітчастими візерунками, багаторядковими підписами й експортом @2x.

Завантаження інструмента…

Генератор зображень-заповнювачів — Виберіть розмір із поширених пресетів для соцмереж, реклами та мініатюр або задайте власний, оберіть суцільний, градієнтний чи випадково згенерований фон і накладіть діагональний або сітчастий візерунок. Додайте багаторядковий підпис, розміщений будь-де, із власним сімейством шрифту, товщиною та розміром, а потім експортуйте PNG, JPG, WebP або SVG — за бажанням у @2x для retina-екранів. Усе малюється у вашому браузері за допомогою API canvas і SVG, тож нічого з уведеного не завантажується на сервер.

Що таке Генератор зображень-заповнювачів?

Генератор зображень-заповнювачів — це безкоштовний інструмент у браузері для дизайнерів і фронтенд-розробників, яким потрібна графіка-заповнювач під час створення макетів, прототипів, реклами та бібліотек компонентів. Почніть із пресету — допис в Instagram, мініатюра YouTube, OG-картка або рекламне місце на кшталт лідерборда 728×90 — або введіть точні розміри в пікселях. Оформіть фон як один колір, двоколірний діагональний градієнт чи випадкову палітру, додайте діагональний або сітчастий візерунок і розмістіть багаторядковий підпис в одній із дев’яти позицій шрифтом без засічок, із засічками чи моноширинним. Увімкніть накладання розмірів, щоб проставити ширину й висоту в кутку, і експортуйте як PNG, JPG, WebP або копійовний SVG з необов’язковим масштабом retina @2x для растрових форматів.

Як користуватися Генератор зображень-заповнювачів

  1. Виберіть готовий розмір (соцмережі, мініатюра чи реклама) або введіть точну ширину й висоту в пікселях.
  2. Відкрийте Налаштування, щоб задати фон: суцільний, двоколірний градієнт або натисніть Випадково для безпечних випадкових кольорів.
  3. За потреби накладіть діагональний або сітчастий візерунок і ввімкніть накладання розмірів.
  4. Введіть підпис — використовуйте нові рядки для багаторядкового тексту — потім задайте його положення, сімейство шрифту, товщину й розмір.
  5. Виберіть PNG, JPG, WebP або SVG і ввімкніть @2x для растрового експорту в retina.
  6. Перевірте попередній перегляд у реальному часі й натисніть Завантажити (для SVG можна також скопіювати розмітку).

Приклади

Допис в Instagram 1080×1080

Виберіть пресет Instagram Post, задайте двоколірний градієнтний фон, відцентруйте жирний підпис у два рядки й завантажте PNG, готовий для макета стрічки.

Реклама-лідерборд 728×90

Виберіть пресет Ad Leaderboard, залиште суцільний сірий фон із сітчастим візерунком і ввімкненим накладанням розмірів та експортуйте WebP-заповнювач для рекламного місця.

Мініатюра YouTube для retina

Виберіть пресет YouTube Thumbnail (1280×720), увімкніть експорт @2x і завантажте PNG 2560×1440, що лишається чітким на екранах високої щільності.

Поширені запитання

Які готові розміри доступні?
Розміри для соцмереж (допис, портрет і сторіс Instagram, обкладинка Facebook, допис і шапка X, банер LinkedIn, мініатюра YouTube, OG-картка) та стандартні рекламні формати (лідерборд, середній прямокутник, широкий хмарочос, білборд). Виберіть один, щоб заповнити ширину й висоту, або введіть будь-який власний розмір.
Як працюють параметри фону та візерунка?
Фон може бути одним кольором, двоколірним діагональним градієнтом або випадковою палітрою за кнопкою Випадково, що використовує безпечний генератор випадкових чисел браузера. Зверху можна накласти візерунок із діагональних ліній або сітку, намальовані кольором тексту.
Чи може підпис займати кілька рядків і переміщуватися?
Так. Вводьте нові рядки в полі підпису для багаторядкового тексту, розміщуйте блок в одній із дев’яти позицій (верх/центр/низ × ліворуч/по центру/праворуч) і обирайте шрифт без засічок, із засічками чи моноширинний зі звичайною або жирною товщиною та автоматичним чи фіксованим розміром. Залиште підпис порожнім, щоб автоматично надрукувати розміри.
Що робить експорт @2x?
Для растрових форматів (PNG, JPG, WebP) він малює полотно з подвоєними розмірами в пікселях, щоб файл лишався чітким на retina- та екранах із високим DPI. SVG уже незалежний від роздільної здатності, тож @2x до нього не застосовується.
Чи завантажуються мої зображення або тексти кудись?
Ні. Кожен заповнювач малюється повністю у вашому браузері за допомогою API canvas і SVG, а завантаження відбуваються локально — нічого з уведеного чи згенерованого не надсилається на сервер, тож інструмент працює офлайн і зберігає конфіденційність вашої роботи.

Схожі інструменти

Код у зображення

Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.

Перевірка контрастності кольорів

Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.

Змішувач кольорів

Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.

Генератор відтінків кольору

Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.