Дизайн и графическое меню для группы во ВКонтакте?

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

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

Шаг 1. А начать я предлагаю с вывода пункта «Мои Группы» в меню аккаунта. Так будет проще ориентироваться в дальнейшем. Для этого найдите в меню пункт «Мои Настройки» и на вкладке «Общее» открывшейся страницы установите галочку «Мои Группы» в секции «Дополнительные сервисы».

добавить пункт Мои Группы в меню во ВКонтакте

Шаг 2. Чтобы ничего не пропустить я создам отдельную группу. Для этого нам понадобится кликнуть появившийся пункт меню «Мои Группы» и на открывшейся странице кликнуть ссылку «Создать сообщество».

создать сообщество во вконтакте

В открывшемся окне укажите название и вид сообщества (группа), а потом нажмите кнопку «Создать сообщество».

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

После того, как группа будет создана, вы попадёте на страницу её настроек. Здесь вы можете указать красивый адрес страницы (вместо сгенерированного по умолчанию), описание сообщества и т.д. Главное, что нас тут интересует это опция «Материалы». Выберите вариант «Подключены». Именно в блоке «Свежие новости», на главной странице группы и будет размещаться наше меню. После того как всё будет выполнено, нажмите кнопку «Сохранить».

настройка группы и подключение материалы во вконтакте

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

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

Запустите программу и создайте холст 597x500 пикселей. Для удобства, в нижнем левом углу разметьте направляющими линиями блок 382x345 пикселей под наше меню, а справа блок 200х500 пикселей под фотографию группы. Дабы не мучить вас подробностями, предлагаю скачать PSD заготовку под дизайн группы ВКотакте тут. Выглядит всё это следующим образом:

заготовка под дизайн и графическое меню группы во вконтакте

Теперь возьмём любую достаточно большую фоновую картинку. Для этого советую воспользоваться поиском картинок Google. Укажите в строке поиска «wallpaper» и уточняющее ключевое слово, например, «fire». На странице результата поиска рекомендую выбрать размер «Большие» и (если нужно) указать цвет. Подбирайте фон так, чтобы он подошёл под серые области в заготовке.

поиск фоновой картинки в Google

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

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

Вернёмся в фотошоп и к нашей заготовке. Вставьте (Ctrl+V) скопированную картинку фона в заготовку. Появится новый слой. При необходимости, используйте Edit > Transform > Scale для изменения размера и перемещения фонового слоя.

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

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

примеры дизайна групп во вконтакте

Шаг 4. И так у нас есть картинка и меню на нём. В своей группе я использовал ссылки на страницы блога, но тут уж смотрите сами. Нам же нужно нарезать картинку на кусочки (срезы). Для удобства вы можете использовать всё те же направляющие линии. Об их создании можете прочесть, например, тут. Далее, используя инструмент «Slice Tool» и нарезаем нашу картинку по направляющим линиям. Об этом инструменте и его использовании достаточно неплохо написано здесь, учитесь и пользуйтесь.

нарезка картинки в Photoshop

После того как сделаны нужные срезы, жмём комбинацию Alt+Shift+Ctrl+S, т.е. «Save for Web…». В открывшемся окне выбираем формат (например, JPEG) и качество (например, Hight) картинок, а потом жмём кнопку «Save». Указав базовое имя файла, жмём кнопку «Сохранить». Будет создана папка images/ с картинками срезов.

Примечание. Просмотрите картинки срезов. Некоторые из них будут нам не нужны. Речь идёт о пустых полях и т.п. К слову, если вы используете мою основу то там нарезка уже есть под предложенную основу (см. example) и нужные нам файлы срезов будут иметь нужные названия: menu1.jpg, menu2.jpg... menu5.jpg и sidebar.jpg, остальное удаляем.

Шаг 5. Возвращаемся к группе ВКонтакте. Один из срезов (в моём случае sidebar.jpg) устанавливаем как фотографию группы. Для этого используйте ссылку «Загрузить фотографию» на главной странице группы. Здесь я отмечу два момента. Первое: после загрузки картинки нужно будет указать «видимую область» - выбирайте всю. И второе: надо будет выбрать квадратную область под маленькую фотографию (честно говоря, это одна из слабых сторон моего дизайна) - в дальнейшем ее можно будет легко перевыбрать.

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

редактирование блока свежие новости подключенных материалов во вконтакте

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

  1. Нажмите иконку «Добавить фотографию» на панели визуального редактора.
  2. В открывшемся окне вашего альбома жмём «Загрузить фотографию» или выбираем одну из уже загруженных фотографий.

    загрузка картинок через визуальный редактор во вконтакте

  3. Кликните по картинке и в открывшемся окне «Изменение фотографии» укажите ссылку для неё. Указывать «текст» бесполезно, оно не сработает. Нажмите кнопку «Изменить».

    редактирование параметров картинки через визуальный редактор во вконтакте

  4. Установите курсор в конец (Ctrl+End) в редакторе и вставьте следующую картинку.
  5. После вставок всех картинок перейдите в режим wiki разметки, кликнув соответствующую кнопку на панели редактора. Там вы увидите, например, такой код:

    [[photo58447324_302649807|382x115px|http://www.wmascat.ru/p/about.html]][[photo58447324_302649808|382x40px|http://www.wmascat.ru/p/faq.html]][[photo58447324_302649809|382x38px|http://www.wmascat.ru/p/guest-post.html]][[photo58447324_302649811|382x42px|http://www.wmascat.ru/p/blogmap.html]][[photo58447324_302649812|382x110px|http://www.wmascat.ru/p/other.html]]

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

    [­[photo***_***|Опции|Описание / Ссылка]]

    Всё начинается с двух квадратных скобок ([[). Потом идёт идентификатор фотографии (photo***_***). По сути, это имя файла, но лучше с ним не заморачиваться. Из-за этого я и рекомендую использовать визуальный редактор. Далее идёт опции, разделённые символом точки с запятой (;). В частности, можно указать размер фотографии в пикселях и склейку изображений nopadding (не будет отступов между картинок). Далее идёт описание и ссылка. С описанием у меня лично ничего не получилось, что-то там не так или я чего-то не понимаю. Так что рекомендую обойтись без него. Ну и заканчивается всё это двумя квадратными скобками (]]).

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

    [[photo58447324_302649807|382x115px;nopadding|http://www.wmascat.ru/p/about.html]][[photo58447324_302649808|382x40px;nopadding|http://www.wmascat.ru/p/faq.html]][[photo58447324_302649809|382x38px;nopadding|http://www.wmascat.ru/p/guest-post.html]][[photo58447324_302649811|382x42px;nopadding|http://www.wmascat.ru/p/blogmap.html]][[photo58447324_302649812|382x110px;nopadding|http://www.wmascat.ru/p/other.html]]

    Обращаю ваше внимание на то, что ссылки буду автоматически заменены на редирект: away.php?to= – прямых ссылок сделать ВКонтакте здесь не получится.

  6. Не забудьте нажать кнопку «Сохранить».
Примечание. По умолчанию меню во ВКонтакте скрыто и появится оно только после нажатие ссылки. Для того же чтобы меню не было слишком высоко, просто увеличьте объём описания группы или добавьте соответствующих данных.

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

Twitter Facebook ВКонтакте Одноклассники Google+

40 комментариев:

Ната Решетник
Кость, огромное спасибо за пост, описание у тебя как всегда доступно и понятно) Сделаю мену дам ссылку на проверку))) ;-) но это уже после выходных, на выходных у моей красавицы дочи 5 лет. Так что мы все празднуем %-)
Ната Решетник
трендец но оказалось то что у меня фотошоп руссифицированный проблема....я теперь не могу в нем найти функцию нарезки %-) описанную в четвертом пункуте
Константин Кирилюк
Ната, ориентируйтесь по внешнему виду. На картинке примера нарезки я специально добавил панель инструментов фотошопа с выделенным инструментом нарезки.
Ната Решетник
ппц или я туплю пострашному или не наю что Но поделить рисунок на фрагменты у меня не получатся((( хоть сноси нафиг русскую версию фотошопа и ставь английскую((((
Константин Кирилюк
Ната, ты инструменты резки нашла? Как сохраняешь файл?
Ната Решетник
линии как сделать нашла, а вот поделить на фрагменты не могу( сохраняю как у тебя написано Alt+Shift+Ctrl+S, только у меня хоть убей получается все однимфрагментом((( может у меня руки не оттеля ростут?
Константин Кирилюк
Ната, направляющие линии это просто для удобства. Далее тебе нужен "Slice Tool". По русски кажется "Раскройка" вызывается нажатием Shift+K. Дальше нарезка идёт также как если бы ты выделяла некую область.
Ната Решетник
блин не прошло и полгода как до меня дошло да еще как...даже теперь странички в меню нашла как делать с картинками О_О

прошу оценить мои мучения http://vk.com/club43041602
Константин Кирилюк
Ещё одну строку в описание группы добавь, а то меню немного выше чем надо.
Ната Решетник
ну вроде все исправила и руку набила на менюшках (http://vk.com/tamadgemel , http://vk.com/kloyn_v_gomele и http://vk.com/velereyame) но у меня как всегда проблема (краснею до самых кончиков ушей) Меню, которое делится только на кнопочки вдоль вроде получается делать, а вот если к примеру кнопочки в два столбика это сплошной ППЦ уже кучу разного видео пересмотрела и ничего не получается(. В предпросмотре конфетка, а сохраняю получается лажа(((
Константин Кирилюк
Ну, здесь нужна играть с переносом строк или использовать таблицу. Неплохо о wiki разметке таблиц во ВКонтакте рассказано тут.
Ната Решетник
Спасибки за наводку пойду "играться" и эксперементировать, главное не перестораться ))))
Ната Решетник
все наигралась, что бы кнопки были в столбик вопервых нужно их нарезать с ювелирной точностью ... тоесть они должнфы быть обсалютно одинакового размера до пикселя ина че не получится %-(
Анонимный
Вот это объяснений!!!!!!Все получилось с первого раза, спасибо громадное!!!!
Анонимный
Это самый лучший урок из всех, что я нашла в сети! Спасибо огромное! Все получилось.
Михаил Одинцов
Кто нибудб разобрался как описание сделать
Константин Кирилюк
2Михаил Одинцов: какое описание?
Валентина Мазурова
Огромное спасибо! Это , действительно, самое лучшее и доступнейшее описание!!!
Константин Кирилюк
2Валентина Мазурова: на самом деле сейчас высота фотографии справа стала 500 пикселей, но как-то не нахожу времени внести изменения в пост.
Евгений Сухорука
Спасибо огромное,очень интересно и доходчиво.Может вы сможете подсказать,как сделать так,что бы вместо описания группы было кликабельное изображение с переходом на графическое меню группы..вот как тут http://vk.com/ds.mixcolor
Константин Кирилюк
@Евгений Сухорука этот вопрос мне задают не в первый раз потому решил написать об этом, читайте тут.
Alex Andreev
Спасибо, очень полезно!
Viajera
Спасибо большое!
Юлия Ступко
Скажите, как исправить ситуацию: после создания меню альбом с нарезками и сами нарезки видны при входе в группу и не найду даже как, хотя бы, на этот альбом замок поставить.
Заранее благодарю за помощь
Константин Кирилюк
@Юлия Ступко честно говоря, я вообще удалился полностью из ВКонтакта. Начиная от груп и заканчивая аккаунтом. Так что ничего помочь не могу... только то, что есть.
Анонимный
Здравствуйте. А как сделать меню в описании группы? То есть как закрепить страницу меню в описание, чтобы был в записи баннер, а не ссылка на страницу? То есть чтобы была картинка, при нажатии на которую открывалась бы страница меню. Как так сделать???
Константин Кирилюк
2Анонимный О нужном Вам варианте читайте здесь.
Екатерина Шабанова
Скажите можно ли сделать нарезку не имеется фотошоп, а например в пайн нет?
Константин Кирилюк
Екатерина Шабанова не использовал Paint.NET, но вроде бы есть плагин для обеспечения поддержки PSD для него, см. <a href="http://psdplugin.codeplex.com/'>тут</a>, может и получится.
Andrey.m
Начал делать меню по вашей методике, но уперся в то, что в настройках Группы - опции параметра "Материалы": Выключены/Открытые/Ограниченные. Вариант "Подключены" отсутствует, так же как и Свежие новости + кнопка Редактировать - тоже не появляются после сохранения с любой из возможных опций для Материалов. Подскажите, как в настоящее время можно включить wiki и сделать меню группы?
Константин Кирилюк
2Andrey.m попробуйте выбрать вариант "Открытые", т.е. элемент будет доступен всем.
Сергей Гончаров
Здравствуйте! Столкнулся с такой проблемой: Загрузил все фотографии, но в блоке "свежие новости" фото сворачивается. В чем может быть причина?
http://vk.com/club62328881
Константин Кирилюк
2Сергей Гончаров в том, что так и должно быть... увы ВКонтакте уже давно так сделали и обойти это уже не получается :(
Александр Судник
Очень хорошие и понятные уроки.Правда не много помучился но потом все получилось.Вот мой результат http://vk.com/club75250107
Александр Чернов
не могу понять, что за ссылку надо указывать в изменении фото??
Вероника Малина
Добрый день, Константин! Извините за беспокойство. Есть пара вопросов по вики-разметке, вы не могли бы помочь? Когда прописываю код, например: [[photo-48249652_297601976|130x46px;nopadding;|http://ссылка]], нажимаю "сохранить", выхожу из режима вики-разметки, чтобы посмотреть результат, возвращаюсь обратно и из разметки исчезает nopadding. Почему так происходит? И ещё, как сделать меню, если у меня не одна картинка, разрезанная на несколько частей горизонтально, как в вашем уроке, а картинка разрезанная по горизонтали и по вертикали? Заранее благодарю!
Константин Кирилюк
2Вероника Малина По моему в коде лишняя точка с запятой, должно быть так:

[[photo-48249652_297601976|130x46px;nopadding|http://ссылка]]

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

Впрочем, сейчас меню не столь актуально... из-за того что оно по умолчанию скрывается.
Vlad Snow
Здравствуйте, подскажите как можно сделать такое же как в вас в примерах в начале статьи.
http://2.bp.blogspot.com/-fFaLu8l4Sp8/UFM3zAVMrqI/AAAAAAAAEUQ/182OYNKVOqo/s1600/examples.jpg
Мне нужно, чтобы картинка с меню не перекрывала описание группы. Как это можно добиться?
Константин Кирилюк
2Vlad Snow так оно и не перекрывает... просто сейчас меню спрятано по умолчанию.
Ольга Тарудько
Здравствуйте! Подскажите что делать если на главной странице группы отсутствует блок "Свежие новости", хотя материалы подключены? Как можно без этого блока сделать меню в группе?
Отправить комментарий