Как сделать меню вконтакте?

Не секрет, что рядовой пользователь интернета в первую очередь оценивает глазами. Именно поэтому все стараются делать свои ресурсы не только функционально удобными, но и красивыми внешне. Тот же принцип работает и в группах социальной сети VK. Стильно оформленное сообщество имеет намного больше шансов заполучить новых подписчиков. Именно поэтому сегодня мы решили подробно остановиться на популярной проблеме – как сделать меню вконтакте?

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

Как сделать меню вконтакте? Пошаговая инструкция.

Этап №1 будет заключаться в небольшой подготовительной работе. Вам понадобиться программа Photoshop любой версии (можно даже старую), моральная подготовка к работе с вики-разметкой и небольшие манипуляции в настройках сообщества. Только не пугайтесь! Вы сможете сделать все самостоятельно, даже если впервые об этом всем слышите. Главное – внимательно читайте и следуйте нашей инструкции.

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

mv1

Выберите пункт «Материалы» и установите их, как «Открытые»:

mv2

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

Этап №2 потребует от вас чуточку поработать с Photoshop. Запускаем программу и создаем новый файл:

mv3

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

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

mv4

Теперь нужно добавить текст – пункты меню, причем в том виде, в котором они будут публиковаться в меню. Шрифты, размеры, тени и другие «плюшки» используется по своему желанию. У нас же получилось вот что:

j1

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

mv6

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

j2

Практически все! Остается только сохранить нашу работу. Заходим: Файл -> Сохранить для веб и устройств. Менять ничего в стандартных опциях не нужно, разве что формат – GIF или PNG. В конечном итоге мы получаем папку с уже нарезанным меню:

j3

Этап №3 будет для нас последним. Заходите в свою группу и добавляйте нарезанное меню в любой альбом.

Заходим в пункт редактирования «Свежие новости» — на этом месте оно скоро и появится.

mv9

Активируем режим wiki-разметки:

mv10

Для добавления меню нам нужно вставить следующий код:

[[photoXXX_XXX|370px;nopadding;|page-XXX_XXX]]

Где photoXXX_XXX – это часть ссылки на элемент графики (берется с альбома, в который мы загружали картинки);
page-XXX_XXX – это либо ссылка на локальную страницу группы, либо на любой URL любого сайта;
370px – довольно стандартное решение, вы можете изменять его так, как хотите.

Теперь конкретнее о том, как получить «часть ссылки на графику». Заходим в альбом, выбираем нужное часть меню, смотрим в URL-строку вашего браузера и копируем вот эту часть:

mv11

И делаем все последовательно для каждого из пунктов и получаем такой код разметки:

mv12

Сохраняем и радуемся! Ваше меню уже красуется в группе!

j4

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