Сколько про размеры обложки для сообщества ВК ни читай, все равно с первого раза нарисованная обложка или смотрится не красиво, или перекрывается аватаркой или на версии с компьютера, или при просмотре сообщества с мобильного телефона.
Вообще боль, да?
Честно говоря, у меня возникло ощущение, что единственная задача существующих руководств по размерам обложки, это получить трафик по запросам: «размер обложки сообщества вк, мобильная обложка сообщества вк размеры, размер обложки вк сообщества мобильная версия, какой размер обложки в вк для сообщества размер обложки +в вк +для сообщества 2024» — а не помочь вам с первого раза нарисовать удобный и привлекательный дизайн.
Рассказываю, почему не получится просто узнать размер обложки сообщества в ВК и сразу все сделать.
ВК говорит нам, что размер обложки для загрузки в сообщество это 1920×768 пикселей. Но он не говорит нам, что на декстопе надо вычесть с верхней границы примерно 150 пикселей (не использовать их в дизайне, чтобы картинка не обрезалась). А еще вк не говорит, что часть вашей картинки для обложки сообщества будет нагло перекрыто аватарой группы, что при просмотре с телефона, что при присмотре с компьютера. И ни одно руководство это тоже не говорит. В итоге вид сообщества становится унылым, и вы бежите картинку перерисовывать.
Показываю! Я специально взяла тестовую группу и снабдила ее клеточным оформлением.
Как с учетом этих данных выбрать правильный размер?
При размещении значимых (не фона) элементов: адрес, скидки, слоган — мы делаем отступ сверху около 200 пикселей, и слева — 600 пикселей (чтобы слоган не закрыло логотипом).
Вот как это будет выглядеть для декстопной версии на картинке для размера 1920×768
Вот как это будет выглядеть для мобильной версии на картинке для размера 1920×768
В наложении, чтобы понятнее было (но у вас все равно будет ссылка для скачивания шаблона psd со слоями).
Область темно-серого цвета та, которая будет хорошо видна при открытии вашего сообщества с любого устройства.
Ну и ссылка для скачивания.
Скачать шаблон обложки ВК 1920 на 768 с полями видимости для телефона и компьютера (это ссылка на скачивание)
Этот же шаблон вы можете сохранить, и использовать в том числе в редакторе SUPA — просто добавив его как подложку, и размещая важные для вас элементы в пределах серого поля.
Счастливого творения! Традиционно, кому пригодилось, спасибо можно сказать по кнопке на оригинале статьи https://webzodchij.ru/2024/03/25/razmery-oblozhki-dlya-soobshhestva-vk-s-telefona-i-s-kompyutera/