Как создать обложку для сообщества ВКонтакте с помощью ChatGPT
Обложку для сообщества ВКонтакте нельзя просто сделать в красивом размере и загрузить. Точнее, можно. Но потом выяснится, что на компьютере всё выглядит нормально, на телефоне часть текста обрезалась, кнопки интерфейса закрыли важную информацию, а лицо оказалось где-то за названием сообщества.
Я прошла весь этот путь на собственной обложке: сначала пыталась сразу получить готовый макет в ChatGPT, затем отдельно разбиралась с размерами, безопасными зонами и композицией.
В итоге рабочая схема получилась такой:
- Определить, какие версии обложки нужны.
- Создать в ChatGPT изображение без текста.
- Собрать финальную композицию в Figma.
- Проверить результат не только в макете, но и после загрузки во ВКонтакте.
Ниже — весь процесс по шагам.
Автор:
Алёна Быстрова
коуч, проектный менеджер, автор блога
Какие обложки нужны для сообщества ВКонтакте
Для сообщества понадобятся две отдельные версии:
• горизонтальная обложка для компьютера;
• вертикальная живая обложка для мобильного приложения.
Это не один макет, который ВКонтакте автоматически адаптирует под разные устройства. У горизонтальной и вертикальной обложек разные пропорции, композиция и безопасные зоны.
Обложка для компьютера
Размер макета — 1590 × 400 px.
При этом часть изображения может перекрываться элементами интерфейса. Поэтому заголовок, логотип, контакты и другую важную информацию нельзя располагать вплотную к краям.
Мобильная обложка
Размер вертикального макета — 1080 × 1920 px.
Но использовать под текст весь макет нельзя. Верхняя и нижняя части могут перекрываться названием сообщества, аватаром, кнопками и другими элементами интерфейса.
На схеме ниже показаны:
• полный размер макета;
• безопасная область;
• зоны, которые могут обрезаться или перекрываться интерфейсом.
Главный вывод: сначала нужно создать сетку и отметить безопасную область. Только после этого размещать заголовок и остальные элементы.
Почему я не стала делать всю обложку сразу в ChatGPT
ChatGPT хорошо справляется с изображением, светом, фоном и общей атмосферой кадра. Но когда я просила его создать сразу готовую обложку, появлялись проблемы:
• текст искажался;
• буквы менялись;
• надписи оказывались слишком близко к краям;
• композиция не учитывала интерфейс ВКонтакте;
• при исправлении одной детали менялось всё изображение;
• результат выглядел как генерация, а не как готовый профессиональный макет.
Поэтому я разделила работу на две части.
В ChatGPT создаю только изображение. Без заголовка, иконок, контактов и декоративных надписей.
Текст, линии, кнопки и остальные элементы добавляю отдельно в Figma. Так я могу управлять композицией и не переделывать всю картинку из-за одной неправильной буквы.
Что подготовить до генерации изображения
До того как писать промт, нужно определить:
размер изображения;
где будет находиться человек или главный объект;
с какой стороны останется место для текста;
каким должен быть фон;
какое нужно освещение;
какие цвета уже используются в оформлении сообщества;
какие детали обязательно сохранить;
что нейросеть не должна добавлять.
Если на обложке будет фотография человека, лучше сразу прикрепить её к запросу. Чем точнее исходник и описание композиции, тем меньше случайных деталей придётся исправлять дальше.
В моём случае важно было не просто получить портрет на тёмном фоне. Нужно было заранее оставить свободную полосу под информацию и разместить человека относительно всего кадра так, чтобы после загрузки его не перекрывал интерфейс.
Промт для создания обложки
Промт лучше писать как техническое задание на изображение, а не как абстрактную просьбу «сделай красиво».
Создай вертикальное изображение для мобильной обложки сообщества ВКонтакте в размере 1080 × 1920 px.
Используй прикреплённую фотографию как референс внешности человека. Сохрани узнаваемость лица, естественные пропорции, цвет кожи и основные черты внешности.
Человек должен располагаться в кадре так же, как на исходной фотографии, и занимать примерно одну треть композиции. Оставь достаточно свободного пространства для текста. Не размещай важные детали в верхней и нижней частях изображения, потому что там будут находиться элементы интерфейса ВКонтакте.
Фон тёмный, графитовый, профессиональный, без лишних объектов. Освещение нейтральное, без жёлтого оттенка. Изображение должно выглядеть чётким и качественным, без пиксельности, чрезмерной ретуши и пластиковой кожи.
Не добавляй текст, буквы, логотипы, иконки, интерфейс, рамки и декоративные надписи. Нужен только готовый фон с человеком.
Если используется конкретная фотография добавь в конце промта:
Используй прикреплённую фотографию как основной источник. Не меняй позу, выражение лица, направление взгляда, причёску и одежду без отдельного указания. Не дорисовывай окна, мебель, предметы и архитектурные элементы, которых нет в исходном изображении.
Как вносить правки в изображение
Не нужно каждый раз заново переписывать весь промт. Лучше точно указать, что именно получилось неправильно и что нужно оставить без изменений.
Например:
Сохрани размер, композицию, расположение человека и тёмный графитовый фон. Убери жёлтый оттенок. Верни нейтральный цвет кожи и холодное освещение. Не меняй лицо, позу, одежду и пропорции кадра. Повысь детализацию и качество изображения. Не добавляй текст и новые объекты.
Или:
Не меняй левую часть изображения. Добавь справа свободную тёмную полосу шириной около одной трети кадра для размещения текста. Полоса должна быть частью общего фона, без видимой границы, рамки или отдельного прямоугольника.
Чем конкретнее описана ошибка, тем выше вероятность, что нейросеть исправит нужную часть, а не пересоберёт весь кадр.Формулировка «сделай лучше» здесь почти бесполезна. Нужно написать, что именно сейчас не работает: изменился свет, появилась желтизна, лицо стало менее похожим, пропала свободная зона или нейросеть добавила лишний объект.
Как добавить текст в Figma
Когда изображение готово, его можно переносить в Figma и собирать финальную обложку.
Я создаю два отдельных фрейма:
1590 × 400 px для компьютерной версии;
1080 × 1920 px для мобильной.
Дальше добавляю направляющие безопасной зоны и только внутри неё размещаю:
• основной заголовок;
• короткое пояснение;
• имя или название проекта;
• контакты;
• навигационные подсказки;
• декоративные элементы.
Не нужно пытаться заполнить всё свободное пространство. На мобильной обложке человек видит изображение несколько секунд. Он должен сразу понять, куда попал и о чём это сообщество.
Лучше один понятный заголовок и нормальная композиция, чем семь сообщений, которые невозможно прочитать.
Что проверить перед загрузкой
Перед сохранением проверьте:
• весь ли текст находится внутри безопасной зоны;
• достаточно ли контраста между текстом и фоном;
• читается ли заголовок без увеличения;
• не находится ли лицо под названием сообщества или кнопками;
• не слишком ли близко элементы стоят к краям;
• совпадает ли оформление с аватаром и остальной страницей;
• нет ли на изображении искажённых деталей после генерации.
Но проверка в Figma — не последняя.
После загрузки нужно открыть сообщество:
• на компьютере;
• в мобильном приложении;
• на нескольких размерах экрана, если есть такая возможность.
Интерфейс ВКонтакте может перекрывать часть изображения, которую в макете ничего не закрывало.
Что в итоге делает ChatGPT, а что всё равно приходится делать самостоятельно
ChatGPT в этой работе помогает:
создать фон;
подобрать освещение;
изменить композицию;
улучшить исходную фотографию;
убрать лишние объекты;
подготовить несколько визуальных вариантов.
Но финальный макет всё равно лучше собирать вручную.
Нейросеть не знает, какой текст для меня главный, не видит реальное отображение обложки на всех устройствах и не может стабильно работать с русской типографикой внутри изображения.
Поэтому ChatGPT здесь не заменяет дизайнера. Он сокращает ту часть работы, для которой раньше понадобились бы фотосессия, ретушь или поиск подходящего изображения.
А размеры, безопасные зоны, иерархия текста и итоговая композиция всё равно остаются на человеке.
Коротко: весь процесс
1. Создать два макета под компьютерную и мобильную версии.
2. Отметить безопасные зоны.
3. Решить, где будут находиться человек и текст.
4. Сгенерировать в ChatGPT изображение без надписей.
5. При необходимости точечно исправить фон, свет и композицию.
6. Перенести изображение в Figma.
7. Добавить текст и остальные элементы.
8. Загрузить обе версии во ВКонтакте.
9. Проверить результат на компьютере и телефоне.
10. Вернуться в макет и исправить то, что перекрыл интерфейс.
