Как сделать меню в группе «вконтакте»?

Привет, в этой статье будет описана пошаговая инструкция о том как сделать меню в группе вконтакте. Я просто на днях закончил работу над своим меню, для группы realwebjob, потом мои друзья из сообщества rockbottom спросили — а как? сложно, нет? Я сказал: нет, читайте в ближайшее время на realwebjob.ru.

Up от 2016-07-19

Итак дорогие друзья небольшой «АП» от 2016.07.19. сегодня я зашел в vk по ссылке new.vk.com. В общем это тот же vk, но в его новом обличье. Конечно же до этого я видел и слышал что есть тестовая группа людей кому доступен новый дизайн, но пока сам не столкнулся не решался что-то менять. Хотя бы конкретно в своей группе. В общем сразу как зашел в vk с новым дизайном, увидел то что и ожидал увидеть, меню разъехалось:

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

В общем буду обновлять статью под новый дизайн vk!

Мое меню

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

Клик по картиночке слева и открывается меню!

Спасибо 2015 году и плиточному дизайну. Сегодня эти кнопки выглядят не так убого, в 2008 или 2009 году я бы парился и переживал что они не объемные и не глянцевые. Получается минимализм заметно ускорил дело, спасибо ему за это.

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

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

Шаг 1. Макет меню на бумаге

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

Шаг 2. Поиск необходимой картинки или классного фона

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

Спасибо firestock за предоставленное изображение!

Хотя и была попытка нарисовать картинку самому. План был таков: абстрактный фон на нем надписи красивым текстом. Уже скачал пару современных и интересных фонов, подставил, но не покидало ощущение что фон на себя перетягивает одеяло, слишком нагружает. Если все же решите креативить то вам поможет сайт фотошоп-мастер. Там есть уроки, кисти, фоны и многое другое. Думаю у вас получится уловить нужные нотки вдохновения для создания вашего шедевра.

Шаг 3. Создание «аватарки» и её продолжения

На данном шаге важно учесть размеры и соблюсти пару отступов. Давайте картинку слева условно называть — «баннер». Я использовал следующие размеры аватарка: 200x389px, а баннер: 395x289px. Расстояние между баннером и верхним краем 50px, а расстояние между аватаркой и баннером 10px. Новый документ в фотошопе я создал следующих размеров: 605x389px.

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

Скачать psd-файл.

Кратко опишу что сделал:

  • создал новый документ 605x389px;
  • новый слой, заливаю черным, вырезаю два окошка 200x389px и 395x289px;
  • слой с черной сеткой должен быть поверх всех слоев;
  • открываем фон, изменяем размер как вам нужно ctrl+t (свободное трансформирование);
  • Создаю подвал — новый слой, на нем заливаю белую полосу, внизу, высотой 50px на аватарке;
  • Пишу текст, подгоняю по размеру, изменяю стиль слоя (добавляю обводку, наложение цвета, тень);
  • Аналогично создается шапка для аватара и надпись «меню».

Советую включить линейки и использовать направляющие!

Ctrl+R — вкл/выкл отображение линеек (просмотр — линейки).

Направляющие появляются если потянуть ту или иную линейку на рабочую область. Они помогут вам все расчертить, а на максимальном зуме уже можно все подогнать в плоть до пикселя!

Шаг 4. Раскройка и сохранение.

Теперь нужно выбрать инструмент раскройка (C), обводим при помощи него наши два окошечка. Опять же по направляющим. После того как элемент выделили, например первое окно, выберите инструмент  лупа и пройдитесь по периметру. Нужно убедиться что вы попали точно и линии раскроя проходят в правильных местах. Далее выделяйте раскройкой второе окошко.

Сохранение:

Файл — Сохранить для Web и устройств (alt+shift+ctrl+s)

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

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

Шаг 5. Теперь нужно сделать меню.

Итак, до этого мы  создали баннер кликнув по которому открывается само меню. Но оно у нас не создано, поэтому сейчас нужно этим заняться. Делал я меню простое, кнопки в цвет оформлению социальной сети, создаются простой заливкой на которых пишется текст. Все делал по нарисованному шаблону из шага №1. Размер у моего меню 600x550px.

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

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

И не мельчите с кнопками, я в начале пытался резать кнопки по периметру и хотел разместить белые обрезки как картинки заглушки, ну или отступы. Но «контакт» попросту не дал мне залить картинки не стандартных размеров. Потом раскроил как показано выше и все картинки были исправно загружены в альбом группы.

Шаг 7. Создаю wiki-страницу, расставляю все на свои места.

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

Как проверить открыты ли материалы?

Ответ: Под аватаркой группы жмем на ссылку: «Управление сообществом». На вкладке «информация», ищите данную настройку.

Далее нам необходимо узнать ID нашей группы, требуется это для создания wiki-страницы.

Как узнать ID группы?

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

Как создать wiki-страницу?

Нужно составить url следующего вида:

http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

у меня получилась ссылка вида:

http://vk.com/pages?oid=-65429907&p=Меню

XXX — заменяем на id группы

Нaзвание_страницы — название страницы, символ подчеркивания будет заменен на пробел. Где то читал что потом уже не переименовать страницу, так что внимательнее!

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

Код wiki-разметки: меню realwebjob

Во всем моем меню по сути используется один и тот же код для каждого элемента, разберу этот код:

[[photo-65429907_388888261|600x96px;noborder;nopadding;|http://realwebjob.ru/]]

photo-65429907_388888261 — ссылка на фотографию, точнее хвостик ссылки все что идет после «https://vk.com/». Ссылку сможете найти в альбоме группы, в которой загрузили пункты меню.

600x96px — размер картинки, он должен соответствовать размеру вашей картинки, если размер не будет совпадать то меню разъедится. Размер можно посмотреть вызвав свойства файла на жестком диске вашего компьютера.

noborder — без рамки.

nopadding — без отступов.

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

http://realwebjob.ru/ — ссылка куда произойдет переход после нажатия на кнопку.

После того как код каждой картинки был расположен на своем месте, меню приняло свой вид. Внимание! Если у вас кнопки нарезаны как у меня. В одном ряду может быть 4 кнопки то соответственно и wiki код пишется слитно, а если нужно перейти на другой ряд то просто переходите на новую строку.

Шаг 8. Последний

Пишем новый пост на стене сообщества со следующим содержанием:

  1. Вставляем ссылку на wiki-страницу (это ваше меню).
  2. Прикрепляем  изображение — наш баннер (картинка которая является продолжением аватарки).
  3. Опубликованный на стене пост, нужно закрепить в новостях группы.

Как узнать url wiki-страницы?

пишите в адресной строке url вида:

http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

Я ее выше собирал, в шаге №7.

Затем жмете «Редактирование» и смотрите в адресную строку, часть этого адреса и будет ссылка на вашу страничку. Подробнее на скриншоте:

Как закрепить пост?

Кликните по времени публикации вашего поста, он раскроется и под ним будет доступна кнопка «закрепить». Собственно на этом все!

Создания меню вконтакте полезные материалы

Считаю будет полезно изучить и другие возможности разметки, лучше пока ресурса не нашел: сообщество, wiki-разметка вконтекте.

Теперь чужие публикации:

Как оформить группу В Контакте и создать красивое графическое меню

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

Как создать меню в группе Вконтакте

Я в них больно не вчитывался, смотрел спорные моменты. Да что мне жалко что ли, во время создания открыты были на вкладках, значит должен упомянуть! Моя статья все равно получится лучше и в топе их подвинет. Шучу. Если понравился материал то поделитесь им со своими друзьями. Спасибо за внимание!

Как сделать меню в группе «вконтакте»?: 5 комментариев

  1. я через menumake.ru все делаю, там автоматически все делается и устанавливается безо всякого фотошопа, да и нет у меня его

    1. Главное что бы соотношение цена/качество устраивало. Конечно же если есть качественные решения которые работают из коробки их нужно использовать!

  2. Да, статья отличная, много полезного контента. Для оформления сообществ я пользуюсь бесплатным сервисом http://vkprofi.ru, там можно сделать меню для группы и аватарку.

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

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