CodeKitHubЧто это за инструмент?
Генератор историй Instagram — это инструмент для создания макетов в браузере, воссоздающий вертикальный экран истории Instagram: сегментированные полоски шкалы прогресса вверху, круглый аватар с градиентным кольцом рядом с @именем пользователя и относительной меткой времени, фон-фото или градиент на весь экран, текст по центру и закруглённую панель ответа «Отправить сообщение» с иконкой сердечка — чтобы вы могли ввести собственный контент и экспортировать его как вертикальное изображение для публикации.
Только для развлечения и дизайна: этот инструмент создан для шуток, мемов, слайдов презентаций, UI/UX-прототипов и контента для соцсетей. Его никогда нельзя использовать для фабрикации мошеннических доказательств, преследования или клеветы, а также для выдачи себя за реальную историю реального человека — в зависимости от юрисдикции это может быть незаконно и полностью противоречит назначению этого инструмента.
Ничто из того, что вы вводите, никогда не покидает ваше устройство — вся история рисуется с помощью HTML Canvas API прямо в вашем браузере, а PNG создаётся и скачивается локально. Никакой отправки на сервер, никакого аккаунта, никакого отслеживания вашего контента.
Зачем его использовать?
- Вы делаете мем вокруг вымышленной истории, которую кто-то мог бы выложить в конкретный абсурдный момент, и шутка сработает, только если она выглядит точь-в-точь как реальный экран истории, а не текст поверх фона.
- Вы презентуете клиенту рекламу или тейковер в формате историй и хотите показать, как реально будут смотреться текст и панель ответа в настоящих пропорциях 9:16, прежде чем заказывать реальную съёмку.
- Как UX-дизайнер вы хотите проверить, как текст разной длины ложится между шкалой прогресса и панелью ответа, без необходимости вытаскивать кадры из настоящей сессии Instagram.
- Вы готовите слайд туториала или курса, объясняющий анатомию истории (шкала прогресса, аватар, метка времени, панель ответа), и вам нужен чистый подписанный пример, а не скриншот с чужим реальным контентом.
- Хотите заранее увидеть, как конкретная строка текста реально центрируется и переносится на фоне, прежде чем публиковать настоящую историю с этим текстом.
- 100% локальный рендеринг — ваш текст никогда не попадает на сервер.
Как использовать
- Задайте имя пользователя (@handle), метку времени, цвет аватара или загрузите фото.
- Переключите заглушку фонового изображения и выберите её базовый цвет.
- Введите текст, который будет отображаться по центру истории.
- Настройте текст-заглушку панели ответа внизу.
- Наблюдайте, как вертикальное превью обновляется в реальном времени, затем нажмите «Download PNG», чтобы сохранить изображение.
Пример
Ввод
Имя пользователя: «@alex.rivera» · Метка времени: «4ч» · Текст поверх фото: «Настроение выходных 🌅» · Панель ответа: «Send message»Результат
Вертикальное PNG-изображение 360×640, показывающее историю Instagram: три сегмента шкалы прогресса вверху, аватар с градиентным кольцом рядом с «alex.rivera» и «4h», фон с градиентом от фиолетового к розовому, «Weekend vibes 🌅» по центру экрана и закруглённую панель ответа «Send message» с иконкой сердечка внизу.Изображение генерируется мгновенно в canvas живого превью и скачивается одним кликом — без ожидания, без загрузки на сервер.
Что можно настроить
- Имя пользователя (@handle), метка времени, цвет аватара или загруженное фото.
- Сегментированная шкала прогресса вверху, соответствующая реальному индикатору истории из нескольких слайдов.
- Текст по центру с тенью, точно как в реальных подписях историй.
- Закруглённая панель ответа внизу с редактируемым текстом-заглушкой и иконкой сердечка.
Ответственное использование
Этот генератор создан, чтобы легко делать явно вымышленные изображения историй Instagram для юмора, историй и дизайна. Это не инструмент для фабрикации доказательств, организации травли или введения кого-либо в заблуждение относительно того, что фейковая история настоящая. Если вы планируете делиться изображением, созданным этим инструментом, рассмотрите возможность добавить пометку (например, «фейк» или «макет»), чтобы зрители понимали, что это не настоящая история Instagram — особенно если изображённое можно спутать с реальным человеком или реальными событиями.
Баланс между длиной текста и числом сегментов
Слишком много сегментов под одной короткой фразой создаёт впечатление, что на невидимых слайдах есть дополнительный контекст — это может смазать шутку или сообщение, если это не входило в замысел. Подбор числа сегментов под объём текста делает макет заметно убедительнее.
| Число сегментов | Какая длина текста смотрится естественно |
|---|---|
| 1 | Короткое слово или пара эмодзи |
| 2–3 | Одно предложение, как обычная подпись |
| 4 и больше | Более короткий текст, намекающий на продолжение в других слайдах |
Часто задаваемые вопросы
Законно ли и этично ли использовать этот инструмент?
Сам инструмент законен для использования в развлекательных, макетных, презентационных и дизайнерских целях. Незаконно и неэтично использовать созданное изображение, чтобы кого-то обмануть — например, выдавая его за настоящую историю для мошенничества, преследования или клеветы на человека, либо выдавая его за реальный контент кого-либо. В зависимости от места вашего проживания такое злоупотребление может представлять собой мошенничество, клевету или преследование. Пожалуйста, используйте это только в явно вымышленных или иллюстративных целях.
Загружает ли инструмент мой текст куда-либо?
Нет. Всё, что вы вводите, остаётся в памяти вашего браузера и рисуется прямо на элементе canvas с помощью JavaScript. Файл PNG создаётся и скачивается на вашем устройстве — ничего никогда не отправляется на сервер.
Можно ли использовать своё настоящее фото в качестве фона истории?
Фон по замыслу представляет собой сплошной цвет или градиент-заглушку — это сделано, чтобы инструмент оставался простым и не возникало соблазна выдать чужое реальное фото за собственную историю. Для круглого аватара по-прежнему можно загрузить настоящее фото.
Почему изображение вертикальное?
Истории Instagram используют вертикальное соотношение сторон 9:16, поэтому превью и экспортированный PNG создаются в этом же портретном формате, чтобы выглядеть естественно при публикации или вставке в презентацию.
Использовать этот генератор или другой генератор макетов Instagram?
Если вы делаете макет временной полноэкранной вертикальной истории с текстом поверх фото, используйте этот генератор историй. Если вам нужен постоянный пост ленты с подписью и счётчиком лайков/комментариев, используйте Генератор постов Instagram; для цепочки комментариев — Генератор комментариев Instagram; для целой страницы профиля — Генератор профилей Instagram.
Можно ли показать несколько сегментов шкалы прогресса, чтобы намекнуть на историю из нескольких слайдов?
Да — сегментированная шкала прогресса вверху сделана так, чтобы имитировать настоящий индикатор нескольких слайдов Instagram, поэтому вы можете обозначить историю из нескольких слайдов, даже экспортируя только один конкретный кадр из этой последовательности.
Можно ли настроить метку времени, например показать «только что» вместо конкретного числа часов?
Да — поле метки времени принимает любой введённый текст, точно как сам Instagram показывает относительное время («4ч», «23м», «только что»), а не точное время по часам, так что вы можете задать любую «свежесть», нужную для макета.
Панель ответа действительно работает или это просто декорация?
Это статичный визуальный элемент, а не функциональное поле ввода — текст-заглушка и иконка сердечка рисуются точно так же, как выглядели бы в настоящей истории, для завершённости внешнего вида, но при клике ничего не происходит, поскольку это экспорт статичного изображения, а не интерактивный прототип.
Можно ли добавить больше одной строки текста поверх фото, например подпись плюс маленькую наклейку-лейбл?
Поле текста поверх фото рассчитано на один центрированный блок текста, что покрывает самый распространённый стиль подписи в историях. Если нужно несколько отдельных текстовых элементов в разных позициях, их придётся объединить в один блок с переносами строк, поскольку сейчас инструмент не поддерживает отдельно позиционируемые текстовые слои.