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

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

Оформляю группы Вконтакте
Качественный дизайн групп и пабликов ВК, закрепленное меню, раскрывающееся меню, внутреннее графическое меню, каталоги, внутренняя навигация — цены и портфолио .

Внимание!
В связи с очередным апдейтом ВКонтакта от 31.10.2016 данный вариант оформления групп стал неактуален. Отчасти подобное меню можно реализовать на вкладке Свежие новости в блоке под строкой статуса. Но это будет отдельное меню, а не единая композиция с аватаром.

Шаг 1.
Создаем в фотошопе новый документ размером где то 850х700 пикселей, заливаем его белым цветом. В данном примере я сразу наложила сверху интерфейс ВКонтакта для наглядности. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя и нажимаем Del. Потом выделяем прямоугольник размером 510х309 и также нажимаем Del.

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

Шаг 2.
Теперь под этим слоем располагаем все наше графическое оформление. В данном случае я положила картинку с основным фоном, потом написала текст, и потом в левом прямоугольнике .

Шаг 3.
Теперь правый прямоугольник (аватар) сразу же сохраняем отдельной картинкой размером 200х500 пикселя. Это уже готовая картинка для оформления группы. Она загружается в блок в правом верхнем углу группы, где написано «Обновить фотографию». А левую картинку надо нарезать на несколько картинок по количеству пунктов меню. В данном случае это 5 картинок шириной 510 пикселя.

Шаг 4.
На этом шаге нам надо загрузить наши нарезанные картинки ВКонтакт. Для этого сразу под описанием группы выбираем блок «Свежие новости», по-моему так он называется в оригинале. Я его переименовала в «Меню». Нажимаем «Редактировать». Важно! Во-первых, у вас должна быть именно Открытая группа, а не Страница. Поскольку на Странице такого пункта просто нет. И второе, в меню Управление сообществом > Информация > Материалы должен быть выбран пункт «Открытые».

Шаг 5.
Итак, во вкладке «Редактирование» мы нажимаем на иконку фотоаппарата и загружаем наши пять нарезанных картинок меню. ВКонтакт загрузит их по-своему, уменьшив размер до 400 пикселей по ширине и присвоив картинке тег noborder. В следующем шаге нам предстоит немного поправить код.

Шаг 6.
А именно, мы выставляем оригинальные размеры картинок и меняем тег noborder на тег nopadding. Также нам надо проставить урл ссылок с каждого пункта меню. В данном случае первая ссылка ведет на внутреннюю страницу Вконтакта, а остальные четыре ссылки ведут прямо на страницы моего сайта.

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

[][][]

Шаг 7.
Еще раз повторяю, чтобы открыть данное меню надо щелкнуть по надписи «Меню». А так оно всегда находится в свернутом виде. Читайте комментарии к посту, там много вопросов разобрано. Ну и присоединяйтесь к моей группе В Контакте .

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

Какой размер меню группы Вконтакте?

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

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

Как правило, меню группы Вконтакте состоит из двух элементов: картинки, при нажатии на которую появляется меню и самого меню. Закрепленная картинка в описании группы с меню или без него, должна составлять по ширине от 510 пикселей, а высота должна быть равной ширине или меньше – это уже с учетом нового дизайна.

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

Как вставить картинку в описание группы Вконтакте?

Элементарно. Достаточно взять подходящее изображение нужного размера и добавить его на стену группы от имени сообщества.

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

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

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

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

1. Первое, что нам нужно сделать – это зайти в настройки группы и активировать раздел «Материалы». Значение следует выставлять на «ограниченные» или «открытые».


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


3. К слову, эта картинка создана в Фотошопе менее чем за полчаса. В другом редакторе сделать это было бы сложнее. Так что рекомендую ознакомиться с курсом , о котором я писал выше. После того, как картинка выбрана, ее нужно разрезать на части и сохранить на компьютере.



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

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


5. Далее зайдите в свою группу и в разделе свежие новости нажмите на кнопку «Редактировать».


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


7. Затем снова переходите на страницу своей группы или обновите ее (если она уже открыта). Нажмите на ссылку «Открыть меню». После этого появится дополнительная ссылка на страницу, которую мы создали. Нажмите на нее.


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

9. Далее пишем следующий код, так как на картинке ниже. В нем нужно указывать номер фото (для этого можно открыть фотографию, загруженную в свой альбом и скопировать ее адрес вроде этого «photo15535684_427525646»), размер фотографии (его можно узнать в свойствах фотографии), а также указать ссылку, на которую ведет эта фотография.


10. Чтобы убедиться, что мы все правильно сделали, нажимаем на кнопку «Предпросмотр». Ниже кода появится сделанное меню группы Вконтакте. Если все отображается правильно, то жмем на кнопку «Сохранить», а если нет – то ищем и исправляем ошибки.


11. Теперь нам понадобится картинка, которая станет заставкой нашего меню и будет находиться в описании нашей группы. Размеры картинки для описания группы Вконтакте мы писали выше, но если кто забыл – по ширине от 510 пикселей, а по высоте равной или меньше ширины. Можно использовать размеры больше, но в тех же пропорциях.


12. Затем открываем нашу созданную страницу со сделанным меню группы Вконтакте и копируем на нее ссылку. Чтобы правильно скопировать ссылку, нужно нажать «Редактировать страницу». После этого появится написанный ранее код и можно будет скопировать адрес из строки браузера, который должен выглядеть так: «https://vk.com/page-119301077_51764020».
13. Далее заходим в нашу группу и в форме отправки сообщений вставляем скопированный адрес меню. А затем и фотографию, которая будет заставкой. После этого нажимаем на кнопку «Отправить».

14. Теперь осталось только закрепить эту запись. Сделайте это также, как сделал я на картинке ниже.


15. Вот так будет выглядеть наше сделанное меню для группы Вконтакте. Если хотите посмотреть его лично, то вот

И снова рад Вас приветствовать!

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

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

Вот что у меня получилось.

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

И так. Вот основные шаги:

• Продумать основное меню
• Выбрать изображение
• Фотошоп (без фотошопа как всегда никуда 🙂)
• Раскройка изображения
• Заливка изображения в альбом контакта

Чтобы активировать свежие записи (для Вашего будущего меню) , нужно зайти в управление сообщества и включить пункт — «Материалы»

После того, как материалы будут включены, в верхней части группы появится пункт «Свежие новости», в котором и нужно будет создавать меню. Также как и с любой страницей контакта, мы попадаем в редактор, в котором можно как вручную заливать изображения или кнопочки меню, так и через wiki-разметку (кнопочка в правом верхнем углу).

Как Вы догадались, проще всего сначала нарисовать необходимую картинку в фотошопе, и заранее поместить на нее кнопочки, в будущем они будут ссылками.

В своём примере я использовал фон девушки, и поместил слева от нее 3 кнопки. Каждая кнопка — имела своё название.

Мое меню состояло из следующих пунктов:

Для внедрение готового изображения в контакт, предварительно его нужно раскроить. Для этого в фотошопе используем инструмент «Раскройка «. Думаю с этим сложностей не возникнет. Там всё просто… На всякий случай, сделал фото 🙂

Выбираем данный инструмент и начинаем «резать». У меня получилось 4 части. (самое простое, что придумал:), хотя можно изрезать его на кусочки)

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

Теперь нажимаем на каждую кнопку (или часть изображения), и присваиваем необходимый адрес (ссылку). Чтобы убрать лишние пробелы нужно использовать тег «nopadding» (в меню Wiki-разметки)

Тег «nopadding» – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.

В результате добавления тега, получилось следующее:

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

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

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

Ответ: Данную возможность насколько мне известно убрали администраторы Vkontakte. Раньше была отдельная кнопочка, чтобы меню было фиксированным — открытом. Затем эту функцию убрали, и теперь менюшки приходится открывать отдельно.

Хотя, встречал у некоторых открытые по умолчанию… и кто то даже говорил, что существует какой-то код, который справляется с этой проблемой. Но я бы не советовал использовать его. Судя по обсуждениям на многих форумах, админы это не приветствуют!

А на сегодня всё. До связи!

Группы Вконтакте - это дополнительная возможность не только зарабатывать в интернете, но и раскручивать собственный бизнес. От чего зависит успех группы? От того, насколько активно вы будете заниматься её продвижением, а также насколько грамотно она будет оформлена.

При оформлении группы Вконтакте, необходимо сделать следующее:

• Составить описание группы.
• Подобрать оптимальную аватарку.
• Добавить интересный контент.
• Придумать эффективное название.
• Создать меню для группы.

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

Инструкция по создания меню для группы Вконтакте

Настройка.

Для начала вам потребуется перейти в настройки группы и включить материалы:

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

2. Новое поле в группе.

После настройки, в вашей группе должно появиться новое поле «Свежие новости»:

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

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

3. Создание меню для группы Вконтакте.

Для представления примера, мы воспользуемся программой Photoshop и создадим новое меню. После открытия графического редактора, создаем новый файл и устанавливаем приблизительные размеры 700 на 1050. После этого добавляем фоновый рисунок и рисуем кнопки меню с надписями:

4. Разделение картинки на части.

Для того чтобы отдельные элементы картинки были копками, нам потребуется инструмент «Раскройка»:

Этим инструментом выделите область вокруг каждой кнопки:

Теперь в меню выбираем специальное сохранение созданного меню:

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

5. Вставляем картинки.

Теперь возвращаемся в редактор поля «Свежие новости» и добавляем туда картинки:

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

6. Настройка кода.

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

А теперь самое главное, указываем ссылку на страницу, после горизонтального слеша в каждой строчке, вот пример:

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

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

Дизайн меню группы, полезные советы.

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

1. После создания Wiki разметки (код меню), сохраните его в текстовом файле. Вдруг что-то пойдет не так, у вас будет возможность восстановить меню.
2. В интернете можно легко найти шаблон меню группы Вконтакте. Это пригодится всем, кто не умеет работать с Фотошопом и другими графическими редакторами.
3. Также для облегчения работы, кнопки меню для группы Вконтакте можно скачать в интернете и просто установить их на любой фон.
4. Не берите слишком мелкие картинки для меню, лучше наоборот использовать огромный формат, иначе теряется качество.
5. Ширину меню лучше не делать больше 610 пикселей, иначе она может не корректно отображаться на страничке.
6. Для работы с Wiki разметкой есть специальные редакторы, но в них придется разбираться отдельно, они создаются для профессионалов.
7. Не спешите заканчивать работу в графическом редакторе, попробуйте разные цветовые гаммы, шрифты, фоны и так далее.
8. Меню в группе ВК выглядит лучше, если его объединить с аватаркой. Для этого нужно подгонять размер картинки.

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

Красивое меню группы за 100 рублей

Создано много разных конструкторов, чтобы сделать меню группы Вконтакте онлайн. Расценки везде отличаются, так же как и доступные функции. Сравнивая сервисы, можно с уверенностью сказать, что Menumake - это лучший вариант. Даже у новичка уйдет не больше 5 минут на создание меню, а система автоматически его добавит в нужную группу. Как это всё происходит?

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

1. Открывается редактор, в центре находится кнопка «Выбрать шаблон». Жмём на неё и выбираем готовый шаблон меню Вконтакте, выбор большой:

1. После этого добавляются пункты меню. Тут всё просто, указываешь текст меню и напротив добавляешь ссылку, куда будет направляться пользователь при нажатии:

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

1. Справа находится предпросмотр создаваемого меню. Настраивайте параметры, пока не получите желаемый результат, а потом жмите на кнопку «Загрузить меню в группу»:

1. Перед началом загрузки откроется окно, в котором клиентам напоминают, что нужно заплатить 100 рублей за эту услугу. В неё входит добавление альбома, размещение графического меню в группе Вконтакте и его кода:

Оплату на этом сайте можно провести с помощью банковской карты или через PayPal . Также администрация готова принять другие электронные деньги, через систему Яндекс.Касса. Всего за 100 рублей у вас появится меню группы Вконтакте, а новый дизайн обязательно поможет в развитии площадки.

Где заказать меню для группы Вконтакте?

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

Wiki разметки и фотографии для загрузки в отдельный альбом.

Ошибки при создании меню группы Вконтакте

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

Ошибка 1.

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

Ошибка 2.

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

Ошибка 3.

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

Ошибка 4.

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

Ошибка 5.

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

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

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

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

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

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

Примеров для создания навигации в группе можно приводить много. Ну а теперь давайте перейдем к практике.

Создаем меню

Необходимые настройки в группе

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

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

Теперь в меню справа перейдите на вкладку «Разделы» и в полях «Обсуждения» и «Материалы» выберите «Открытые» или «Ограниченные». Нажмите «Сохранить».

Подготовка изображений для меню и аватарки в Photoshop

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

Меню может быть продолжением изображения, которое стоит на аватарке;

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

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

Открываем Photoshop и создаем в нем новый файл – Ctrl+N. Значение ширины установите 760, высоты – 500 пикселей.

Теперь, используя инструмент Slice Tool, нужно разрезать лист на несколько областей. Выделите инструментом область справа и кликните по ней два раза, чтобы открыть окно с меню. Установите значение ширины – 200, высоты – 500. Это будет аватарка нашей группы.

Тем же инструментом, выделяем еще одну область, слева от предыдущей. Для нее ширина 50, высота – 500. Это расстояние между будущими пунктами и аватаркой, нам эта часть изображения будет не нужна.

Выделяем область слева вверху. Для нее ширина 510, высота 182. Эта область нашего изображения соответствует в группе той области, в которой написано название группы, статус, показаны некоторые вкладки. То есть, она нам тоже не нужна.

В итоге, должно получиться следующее – изображение разбито на 4 области. Область справа – это аватарка группы, слева внизу – будут пункты меню, и еще 2 области, которые будут не нужны.

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

Дальше откройте в Photoshop изображение, которое Вы выбрали для аватарки и меню. Используя инструмент Move Tool, перетащите картинку на разрезанный ранее лист. Можете подвигать картинку, чтобы была видна нужная область.

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

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

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

На этом все готово. Справа наша аватарка, слева внизу – пункты навигации. Две остальные части изображения будут не нужны.

На данном этапе, можете на область справа (аватарка), добавить еще и логотип компании, или красиво написать ее название.

Сохраняем сделанное изображение: File – Save for Web & Devices, или используете сочетание клавиш Alt+Shift+Ctrl+S.

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

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

Затем вернитесь на главную страницу группы и выберите аватарку – «Загрузить фотографию». Это одно из тех изображений, которые мы только что сделали в Photoshop.

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

Создание меню с помощью wiki-разметки

Приступим к созданию самого меню. Заходим в группу и переходим на вкладку «Свежие новости». Затем нажмите на кнопочку «Редактировать».

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

Кликните по одному из только что добавленных в свой профиль изображений.

После этого, оно появится на странице редактирования.

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

Когда все пункты будут добавлены, кликните по двум стрелочкам в правом верхнем углу, чтобы перейти в режим wiki-разметки.

Здесь удалите все ненужные теги, вроде

, и уберите пробелы между всеми строками. Теперь посмотрите на верхний скриншот – у нас есть пробелы между добавленными изображениями. Чтобы их убрать, перед размером картинки пишем nopadding и ставим «;».

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

Вот так будет выглядеть код, после того, как Вы добавите «nopadding;» и ссылку.

В результате должно быть так: изменено название вкладки (МЕНЮ), убраны пробелы между строками, убраны пробелы между изображениями (nopadding;), добавлены ссылки. Нажимайте «Сохранить страницу» и возвращайтесь на главную страницу в группе.

На этом процесс создания навигации для группы Вконтакте завершен. У меня получилось так. Изображение аватарки и меню – одно целое. Перейдя на вкладку «МЕНЮ» пользователь может выбрать то, что его интересует, и перейти по указанной мной ссылке.

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