Тема этой статьи — новый дизайн ВКонтакте. Снова поменялось , теперь можно установить горизонтальную обложку в группе. Оформление вашего сообщества ВК с такой шапкой намного интереснее. Откровенно говоря, здесь не требуются знания Photoshop. А можно без особых навыков сделать красивую картинку даже в PowerPoint, Fotor, Canva, Pixlr Editor.

Перейдя в группу можно заметить, что в тех группах стали видны кнопки «Закрепленная запись», «Информация» и «Жмите меню». А раньше они были скрыты. Естественно, всё оформление групп сразу поехало.

Загрузка новой обложки

А теперь давайте разберемся, как же включить возможность установки горизонтального шапки. Давайте мы кликнем на кнопку«Управление».

Затем кликаем на последнюю, и загружаем новую обложку группы ВКонтакте. Вот тут и можно понять, что файл загрузки может быть любой величины! Но не меньше, чем размер 1590×400 px. Создаем прототип обложки в любом редакторе. Далее мы можем выделить и сохранить ту область, которая соответствует требованиям ВК. Вот подсказка, где найти изображение для обложки, каким редактором воспользоваться, чтобы

Чем интересен новый дизайн ВКонтакте?

Главное: появилось больше места для информации. Теперь здесь можно написать название группы, цель ее создания, призыв к действию и так далее. Такое оформление будет логически завершенным и более функциональным. Но можно оставить и старый дизайн, это дело вкуса каждого.

Когда вы будете оформлять горизонтальную обложку то заметите, что внутреннее меню теперь как-то выпадает из общего контекста. Думаю, лучше будет закрепить картинку для перехода в меню. И использовать его для размещения wiki-страниц в группе.

В тоже время, мне бы хотелось, чтобы разработчики добавили еще какую-то возможность для установки именно красивого перехода на Вики страницы.

Хочется отметить, что с 2016 года разработчики социальной сети Вконтакте активно стараются настроить эту сеть для продвижения бизнеса. Сделать ее более удобной для бизнеса что ли. С моей точки зрения это очень хорошо и очень востребовано у многих интернет предпринимателей.

Но самое важное, по моему мнению, им нужно тщательно продумать систему «Банов», чтобы предприниматели могли спокойно работать, не мешая тем пользователям, которые пришли развлекаться в соцсеть.

Как сделать обложку группы Вконтакте онлайн

Включайте свою креативность и выбирайте, что вам больше нравится горизонтальная обложка или уже привычный дизайн Вконтакте. Создание онлайн и установка новой обложки наглядно, по шагам, представлена в видео под статьей.

P.S. Надеюсь эта информация Вам пригодится.

P.S.S. Включайте свою креативность и удачи Вам во всех начинаниях!

Летом 2016 года разработчики социальной сети Вконтакте наконец-то удивили своих пользователей полностью обновленным дизайном. По правде говоря, завсегдатаи данного сайта восприняли свежее оформление весьма неоднозначно, в большей степени это касалось владельцев сообществ со слитой картинкой в качестве оформления (аватар+баннер). Расстояние между закрепленной новостью и аватаром увеличилось буквально вдвое, баннер заметно укрупнился и опустился ниже, а в качестве миниатюры сообщества теперь выступает не квадратная, а круглая область - все эти неловкие моменты доставили немало проблем людям, заказавшим и установившим дизайн для своих групп ранее. Единственным выходом в сложившейся ситуации оказалась переделка старого дизайна под новые требования с сохранением концепции.

Хотя оформление сообществ Вконтакте кажется делом достаточно хлопотным (особенно если сравнить с другими социальными сетями, где в основном достаточно прямоугольной обложки и квадратной аватарки), но на самом деле это не совсем так. Далее будут описаны требования к графическим изображениям и вообще способы оформить группу как таковые.

Первый способ сделать свое сообщество продающим и привлекательным — это стандартная схема «аватар+баннер+меню».

Аватар

Аватар остался в размерах 200 на 500 пикселей (но все-таки лучше 400 на 1000 с запасом качества), хотя изначально при бета-тестировании нового дизайна рассматривался такой вариант размера как 200 на 300. Миниатюра теперь круглая, но если эту окружность вписать в квадрат, то его размеры будут 200 на 200 пикселей, как и было ранее.

Баннер (закрепленная запись)

Оптимальный размер баннера — это 1024 на 680 пикселей (с запасом качества). Мне на глаза в Интернете попадались многие вариации идеального размера баннера, но все-таки при 1024 на 680 не срезаются части баннера при просмотре с компьютера, с обычной мобильной версии или с приложения на Android. Также стоит отметить, что баннер теперь находится ниже из-за дубликации названия сообщества в области над изображением и переноса даты постинга с области под картинкой на место под дубликатом названия. Еще один важный момент — это отсутствие кликабельности на баннере с мобильного устройства. Т.е. с телефона людям придется нажимать по ссылке под картинкой, а не на само изображение.

Меню

В плане оформления меню и вики-разметки в целом ничего не поменялось. Я как и раньше использую ширину меню в размере 606 пикселей и любую величину длины. Для адаптивности на мобильных устройствах лучше верстать навигацию внутри таблицы — таким образом при просмотре на телефоне она просто пропорционально сжимается до размеров экрана. Но если вы создали навигацию, где пункты просто находятся один под другим, то этого можно и не делать — способ с таблицей необходим только для тех видов меню, где количество кнопок в строке больше одной. Вообще для удобства пользователей лучше не делать меню только в виде ссылок на материалы, а создавать вики-страницы со сложной структурой.

Если нужна единая картинка для оформления, то для начала залейте в какую-нибудь группу для экспериментов аватар и баннер в виде закрепленной новости. Перепишите все данные с сообщества-образца в свою группу: статус, название (это важно, т. к. в новости эти данные дублируются) и запросите у клиента текст, который будет выше баннера.
После этого уже вы можете взять образец при помощи скриншота, который необходимо поместить в Photoshop.

Существует еще такой способ оформления, как «обложка+баннер+меню». Вообще можно оставить только обложку и вынести на нее всю самую важную информацию. Но аватар в любом случае должен быть поставлен: его не будет видно в самой группе, однако миниатюра сообщества будет браться именно с него. Оптимальный размер обложки составляет 1590 на 400 пикселей, а загрузить изображение можно при помощи команды «Управление сообществом» — «Обложка сообщества: загрузить».

Размеры изображений для дизайна вконтакте

  • Аватар: 200 на 500 пикселей (качество 400 на 1000 пикселей);
  • Миниатюра аватара 200 на 200px
  • Баннер или размер закрепленной записи в группе: 1024 на 680 пикселей, но не менее 510px по ширине;
  • Меню: ширина 606px;
  • Обложка 1590 на 400 пикселей.
Аватар и баннер для группы вк.

Сейчас стало важно при создании группы в социальной сети еще и красиво её оформить, особенно если группа создана для бизнеса, продажи товаров или услуг. Очень важно, чтобы оформление было приятно глазу и выделяло вашу группу среди конкурентов. Хорошее оформление увеличивает процент вступления в вашу группу новых участников, возможных потенциальных клиентов.

Очень часто, практически всегда делают так, чтобы с баннера в верхней части страницы можно было попасть в меню. И часто просят сделать, чтобы картинка с аватара переходила в баннер.

Этим сейчас и займемся. Чтобы все было красиво и не перекашивалось определимся с размерами. Вот эта картинка превосходно их демонстрирует, с учетом что сверху у нас написан статус длинной не больше одной строки, если статуса не будет, в некоторых браузерах идет скос, картинка будет не ровно переходить.


Между баннером и аватаркой рассмояние 10 пикселей. Если бы над баннером захотите разместить еще информацию советую воспользоваться линейкой mySize и все вымерять, примерно вот так.

Здесь например расстояние не 50 пикселей как указано на предыдущей картинке, а 206. Все это будем учитывать при проведении направляющих в фотошопе.

Итак,начнем: Открываем фотошоп -> Файл -> Создать либо Ctrl+N.
Открывается окошко, пишем название и размер, но почему я взяла 2420 на 2000. Я просто увеличила наши размеры в 4 раза, на мой взгляд, так в вк выглядит лучше.

Теперь проводим направляющие. Если по краям нет линеечек, включим их: Просмотр -> Линейки либо Ctrl+R. Направляющие можно вытаскивать из них с учетом, что они показывают пиксели, для этого щелкаем на линейке правой кнопкой мыши и выбираем пиксели, если стоит что-то другое.

Есть еще один способ поставить направляющие: Просмотр -> Новая направляющая. Открывается окошечко, выбираешь сначала какая направляющая нужна, горизонтальная или вертикальная, потом куда поставить.

Ставим следующие направляющие горизонтальные: 0, 2000 (крайние), 200, 1360 пикселей; вертикальные: 0, 2420 (крайние), 1580, 1620 пикселей. И у нас получилась заготовка для наших аватарки и баннера.

С право верхнем углу я поставила закругление 30 пикселей, вы можете поставить любое, которое понравится вам. Выберем цвет отличный от белого у меня будет голубой и нарисуем наши аватарку и баннер, по направляющим.

Теперь подберем картинку, у меня группа по тематики дизайна, пусть картинка будет такой.

Перетащим её в наш документ.

Теперь копируем и один слой перемещаем на слой над авой.

Возьмем инструмент прямоугольник и нарисуем два прямоугольника вверху и снизу авы. Сверху будем располагать название группы, снизу - призыв к действию.

Проделаем с прямоугольниками тоже самое, то и с картинками прилепим их к аве. И перекрасим в цвет, который нам нравиться. У меня синий.

Призыву к действию не хватает кнопочки и стрелочек. А для название сделаем подчеркивание.

Стрелки нарисуем с помощью белых линий, либо скачаем в интернете и вставим. Для кнопочки, опять берем прямоугольник со скругленными углами. Делаем все на слое ниже нашей надписи! Убираем заливку до 0.

Открываем стиль слоя и заходим в обводку, делаем её белой примерно 4 пикселя. Ту опять на ваше усмотрение.

Под названием проводим две прямые линии. Раскрашиваем их в цвета: одну - чуть темнее основного, вторю - чуть светлее.

У меня в задумке на картинке будут надписи, так что надо сделать её не такой выделяющейся. Наложим на нее однородный полупрозрачный фон. Я долго игралась с цветами и способами наложения и пришла к следующему результату. Фон бежевого цвета - непрозрачность 80%, режим наложения - умножение.

Теперь мне кажется не хватает рамки по краям, делаю копию авы, уменьшаю и проделываю те же действия,чт ои для кнопочки, убираю заливку и делаю обводку. Также поступаю и с баннером.

Теперь можно устанавливать в группу. Для авки просто жмем загрузить новую фотографию и загружаем. Для баннера. Ставим ссылку на меню.удаляем когда внизу появиться ссылка как на скрине и жмем загрузить фотографию. Жмем отправить и обязательно, чтобы было от имени группы. Потом жмем на время отправления и появиться под постом кнопочки: редактировать, удалить, закрепить. Жмем - закрепить.

А вот и наше готовое оформление.

Надеюсь объяснила более менее понятно, если возникнут вопросы с радостью на них отвечу и постараюсь помочь разобраться. С благодарностью приму обоснованную критику, так как только учусь всему этому и опыта не так много как хотелось бы.

P.S. Бонус - аватар и баннер + шрифт, которые мы делали в статье. Изменяем текст, цвета и картинку и получаем прикольный готовый дизайн.

Несмотря на его сравнительно невысокие показатели CTR, многие компании продолжат вкладывать свои бюджеты в баннеры. И на это есть причины. Медийная реклама позволяет повысить узнаваемость бренда и расширить его охват.

Баннерная реклама ВКонтакте

Площадка предлагает несколько форматов продвижения, один из которых – текстово-графический блок. Отображается он только в полной версии соцсети справа.

Баннер может ссылаться на любой внешний ресурс, группу или сообщество ВКонтакте, а также приложение. Существует 3 основных вида блоков:

  1. Изображение и текст (145х85)
  2. Большое изображение (145х165)
  3. Продвижение сообщества (145х145)

Как создать баннер ВКонтакте

Сделать баннер можно в любом графическом редакторе. Создайте изображение подходящего размера и дайте волю фантазии.

Также можно использовать онлайн-сервисы и готовые шаблоны, благодаря которым ваш баннер будет выглядеть профессиональнее. Например, Canva или Easil.

Как разместить баннер ВК

Отметьте самый подходящий вам формат и оформите баннер.

Настройте целевую аудиторию. Чем уже будет выборка, тем больше шансов привлечь внимание заинтересованных пользователей.

Установите оплату за 1000 показов или за переходы. Выбор будет зависеть от ваших целей: повысить узнаваемость бренда или привлечь трафик? Не забудьте дать название своей кампании.

Проверьте все данные и нажмите Создать объявление. После этого в разделе Рекламные кампании вы сможете запускать и останавливать показ баннера, а также отслеживать статистику.

Примеры баннеров ВКонтакте

Создать и разместить баннер несложно, но как сделать его заметным и эффективным? Ниже мы рассмотрим 50 примеров рекламных объявлений, которые привлекают внимание.

БЕСПЛАТНО

Самое заманчивое и привлекающее внимание объявление – предложение получить что-то ценное бесплатно. Пользователи активно реагируют на это “волшебное” слово и рекламодатели этим пользуются.

ВЫЗОВ

Еще один эффективный прием – вызов: “Стань!”, “Узнай!”, “Слабо?”. Подобные формулировки мотивируют совершить действие.

ЦЕННОСТЬ

Самая очевидная стратегия привлечения трафика – рассказать о предлагаемой ценности.

ИНТРИГА

ЛИЧНЫЙ БРЕНД

На большом количестве баннеров можно увидеть лица специалистов, которые предлагают сделать вашу жизнь лучше. Эффективный прием для укрепления доверия.

ИЛЛЮСТРАЦИИ

Если личный бренд – не ваш вариант, привлеките внимание при помощи яркой иллюстрации и персонажа. Посмотрите, как это работает.

МЕМ