Как сделать красивое меню для группы ВКонтакте

Как сделать красивое меню для группы ВКонтакте

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

Принимаем на ОФИЦИАЛЬНУЮ УДАЛЕННУЮ РАБОТУ! Выдаем диплом гос.образца и гарантированно трудоустроим! Средняя зар.плата от 50 000 рублей! ПОЛУЧИТЬ РАБОТУ

Здрасти, мои почетаемые читатели. Давайте сейчас я расскажу, как создать прекрасное меню для группы ВКонтакте и совсем безвозмездно. К слову научившись создавать такие темы можно незначительно заработать на этом -))). Уже ни один коммерческий веб-сайт не работает без сотворения собственного общества в соц сетях в индивидуальности ВК, что гарантированно помогает привести новейших клиентов, также раскрутить собственный бизнес.

Как сделать красивое меню для группы ВКонтакте

Но если Ваше общество будет не презентабельно и как у всех то, кто захотит там остаться? Я думаю никто!!! Так давайте украсим свои группы высококачественным дизайном и научимся созодать это весьма стремительно. Перед тем как начать создавать графику и наше будущее меню нужно установить программку фотошоп на собственный комп для предстоящей вырезки картинок. Почти все спросят для чего совершенно необходимо порезать рисунки. здесь дело в том, что для каждой ссылки меню мы должны будем сделать отдельную полоску из общего баннера.

Существует на сей день несколько видов создаваемого меню:

  • Открытое с активными пт;
  • Закрытое в виде закрепленной записи;
  • С отдельными картинами либо общей смежной картинкой баннера и меню.

Сущность сотворения обоих вариантов одна и та же. Лишь основное отличие в доп элементах и типов записи и о этом подробнее будет в данной нам статье.

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

Закрытое меню группы ВК

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

Вид меню, будет последующим:

Как сделать красивое меню для группы ВКонтакте

Открытое меню группы (закрепленный материал)

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

Как сделать красивое меню для группы ВКонтакте

Как создать прекрасное меню для группы ВКонтакте: пошаговая {инструкция}

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

Я рекомендую применять последующие размеры:

  • Для аватарки 200х332 пикселя;
  • Для основного баннера меню 395х282 пикселей.

Как вы могли увидеть высота изображений различается и это изготовлено для того, чтоб рисунки не съезжали по высоте и были на этом же уровне потому что высота наименования общества и статус занимают около 50 px и как раз эту величину нам нужно будет убрать из высоты меню.

Чтоб было понятно если высота главной аватарки группы 332, то от нее мы отнимаем 50 и получаем высоту основного меню равную 282. Если же размеры не имеют значения, то высоту можно будет выставлять произвольную.

Как сделать красивое меню для группы ВКонтакте

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

Как сделать красивое меню для группы ВКонтакте

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

Сделаем новое полотно в фотошопе размерами 600х350 пикселей которое мы будем применять в качестве трафарета вырезав в нем просветы для наших картинок. Для работы нам нужно перевести размеры всех частей и линеек в пикселе и делается это по последующему пути: «Редактировать-установка-основное» и здесь уже выставляем пиксели.

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

Как сделать красивое меню для группы ВКонтакте

Используя левую клавишу мыши, как как будто вы выделяете область, нужно выделить блоки подходящих нам размеров и опосля всякого выделения жмем клавишу удалить «Delete» и избираем 50% сероватого. Такие деяния приведут к тому, что блоки будут подходящих размеров и выделены цветом хорошим от основного фона.

Обязано получиться последующее:

Как сделать красивое меню для группы ВКонтакте

А сейчас просто избираем ластик и функцией «магический ластик» нажимаем на любой сероватый блок и получим трафарет с вырезами. Последующим шагом мы избираем наше основное изображение и подкладываем под фон и получим готовые рисунки на который можно будет написать текст с заглавием меню ли остальные маркетинговые элементы.

Как сделать красивое меню для группы ВКонтакте

Непревзойденно. Опосля того как вы расположили картину нашего дизайна нам остается избрать «сохранить для Web» и на выходи мы получаем 2 наши рисунки. сейчас идем опять в нашу группу и можем заливать главную аватарку (вертикальную). баннер для меню мы будем применять чуток позднее при работе с кодом wiki-разметки.

Давайте сделаем само меню, с активными пт, которые будут перенаправлять юзера на нужные разделы постороннего веб-сайта либо же на альбомы и сборники в самой группе. Применять будем новое изображение для контраста -))).

Итак, перебегаем опять в фотошоп и создаем новейший холст с размерами 400х300 пикселей. Опосля чего же избираем в разделе: файл-поместить и избираем картину для фона меню.

На картинке размещаем клавиши нашей будущей менюшки и нарезаем картину как мы делали выше методом выделения подходящих блоков. Опосля чего же также избираем «сохранить для web» и получаем папку с нашими вырезками. В моем случае вышло 4 рисунки в отдельной папке.

Как сделать красивое меню для группы ВКонтакте

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

Обратите внимание что у вас обязано быть:

  • Открыты материалы в режиме «ограниченные»;
  • Включены обсуждения;
  • сейчас остается настроить нашу страничку где и будет отображаться на менюшка. Для этого перебегаем на главную страничку общества и избираем свежайшие материалы и редактировать и называем «НАШЕ МЕНЮ».

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

    Как сделать красивое меню для группы ВКонтакте

    Работая в редакторе текста если опосля загрузки картинок, мы нажмем на иконку в виде скобок в правом верхнем углу то должны узреть вот таковой код:

    Узнайте прямо сейчас: Как устроиться на официальную удалённую работу с нуля и получить диплом гос.образца и трудоустройство! Средняя зар.плата от 50 000 рублей! ПОЛУЧИТЬ РАБОТУ

    [[photo-116682062_405277613|400x49px| ]]

    [[photo-116682062_405277617|400x68px| ]]

    [[photo-116682062_405277636|400x77px| ]]

    [[photo-116682062_405277644|400x106px| ]]

    Совет: Принципиальным моментом опосля загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.

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

    [[photoxxxxx|nopadding;yyyyypx|ваша ссылка]]
    где xxxxx — id вашей рисунки
    yyyyy — ширина в пикселях (не наиболее 388)

    Обязано в итоге получиться вот так:

    [[photo-116682062_405277613| nopadding;400x49px| ]]

    [[photo-116682062_405277617| nopadding;400x68px| ]]

    [[photo-116682062_405277636| nopadding;400x77px| ]]

    [[photo-116682062_405277644| nopadding;400x106px| ]]

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

    И вот мы подошли к самому принципиальному и крайнему пт сотворения нашего меню вконтакте. сейчас нам нужно сохранить нашу страничку с картинами и скопировать ее адресок. В моем случае он смотрится вот так:

    HTTP://vk.com/Page-116682062_51411604?act=edit&hid=183950676&section=edit

    Как сделать красивое меню для группы ВКонтакте

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

    Перебегаем на главную страничку и делаем последующее:

    Шаг №1.

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

    Шаг №2.

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

    Как сделать красивое меню для группы ВКонтакте

    Шаг №3.

    сейчас опосля публикации записи жмем на время сотворения в нижней левой части записи и избираем «ЗАКРЕПИТЬ».

    Как сделать красивое меню для группы ВКонтакте

    Как сделать красивое меню для группы ВКонтакте

    Непревзойденно!!! На этом заканчиваем. сейчас вы умеете создавать классные меню и сможете зарабатывать на этом хорошие средства. Советую все созодать в последующем порядке:

    • Придумываем структуру и заказываем изображений меню;
    • Делаем подгонку размеров и вырезку всех изображений;
    • Вставляем в альбомы рисунки;
    • Редактируем в редакторе все вырезки и публикуем на главные странички группы.

    В итоге работы мы получим вот такое меню.

    Как сделать красивое меню для группы ВКонтакте

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

    Как сделать красивое меню для группы ВКонтакте

    ВАЖНО: Опосля смены дизайна ВК в 2016 году внесены новейшие конфигурации при разработке изображений и требования к картинам о которых читаем вот здесь.

    Скачать шаблон меню группы ВК + все исходники урока

    Как сделать красивое меню для группы ВКонтакте

    Надеюсь материал был полезен, и вы с легкостью сейчас сообразили, как создать прекрасное меню для группы ВКонтакте. Подписывайтесь на обновления блога и до скорых встреч в новейших постах. Если остались вопросцы пишите их в комментах, и я непременно помогу Для вас.

    Прикладываю видеоролик для закрепления прочитанного -))).

    Также советую почитать статьи:

    • Как раскрутить группу ВК безвозмездно;
    • Как заработать на группах ВКонтакте;

    С почтением, Галиулин Руслан.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *