все самое интересное о веб-дизайне

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

107

13-12-2011

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

 
 

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

 
 

Update!
25.10.2012. Некоторое время назад Вконтакт в принудительном порядке обрезал автарки. Раньше размер был 200х710, а сейчас стал 200х500 пикселей. Так что варьируйте урок исходя из этих изменений. Либо делайте независимые по низу картинки и сцепляйте рисунок только по общим внутренним краям. Либо делайте невысокое меню (382х232 и 200х500 в Шаге 1).

 
 

Шаг 1.
Создаем в фотошопе новый документ размером 630х725 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х710 пикселя и нажимаем Del. Потом выделяем прямоугольник размером 382х442 и также нажимаем Del.Как оформить группу В Контакте и создать красивое графическое меню

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

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

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

Шаг 5.
Далее во вкладке «Редактирование» вставляем код, приведенный здесь ниже под картинкой. Потом в исходном коде надо будет заменить photo на названия ваших файлов, указать высоту вашего файла (ширина уже задана 382px) и выставить урл для ссылок вашего меню вместо links. Имя файла можно взять в вашем альбоме. Если открыть картинку то она будет иметь урл приблизительно такого вида, где все что начинается с photo и есть название картинки: http://vkontakte.ru/photo72160765_272239413.Как оформить группу В Контакте и создать красивое графическое меню

[[photo|382x226px;nopadding|http://www.yoursite.com/link1]][[photo|382x50px;nopadding|http://www.yoursite.com/link2]][[photo|382x50px;nopadding|http://www.yoursite.com/link3]][[photo|382x50px;nopadding|http://www.yoursite.com/link4]][[photo|382x72px;nopadding|http://www.yoursite.com/link5]]

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

 
 

Еще один нюанс. Если вы видите в группе постоянно открытое меню, то на самом деле закрепленный вверху пост на внешнюю страницу. Там немного другой принцип оформления, не описанный в этом уроке.

  • Поделиться:
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=6209
  • Подписаться на обновления:

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью формы Facebook

Комментариев (107)

Плохо, что меню группы всегда в закрытом состоянии, и его надо открывать вручную – это портит «художественность» и восприятие. Видна только «аватарная» часть оформления, например, в Вашем случае – только последняя часть названия группы…

ОтветитьОтветить

Класс, буду делать)

ОтветитьОтветить

@Iparomoff:
Да, надо открывать вручную…

@Onegai:
Успехов )

ОтветитьОтветить

Спасибки

ОтветитьОтветить

@Василий:
Пожалуйста!

ОтветитьОтветить

Какой у вас браузер? На Firefox 8 меню группы ниже правого блока на пару пикселей.

ОтветитьОтветить

@Aneteron:
Да, я уже в курсе, что не во всех браузерах одинаково выглядит. Жаль конечно! У меня Хром. В ИЕ тоже нормально смотрится…

ОтветитьОтветить

киньте пожплуйста, ссылку на обучалку по CS как резать, вставлять картинки, ну и все остальное с этим связанное, а то как не начинаю смотреть, обучалки только как волосы перекрашивать…

ОтветитьОтветить

@Egor Pro:
Не совсем поняла какие именно ссылки от меня нужны. Вы имеете ввиду, чтобы я погуглила в интернете и приготовила для вас пакет ссылок или вам нужны ссылки именно с моего сайта?

ОтветитьОтветить

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

ОтветитьОтветить

@Анатолий:
Слово «Редактировать» появляется только если навести курсор на всю строку. Попробуйте навести курсор на «Как сделать страницу эффективнее». «Меню группы» – это я так переименовала дефолтовое название блока…

ОтветитьОтветить

блин у меня вобще ничего не получается
создаю новый слой
и дальше все полная туфта начинается

ОтветитьОтветить

@Вадим:
Да вы не торопитесь, напишите в чем проблема, на какой операции. Создаете новый слой, потом заливаете его белым цветом…

ОтветитьОтветить

Мне в контукте пишет, что можно вставить только фото разрешением не меньше 100*100 пикселей? что делать?

ОтветитьОтветить

@Мария:
Когда я оформляла свою группу, то у меня было оганичение по высоте в 50 пикселей. Возможно они повысили до 100 пикселей. Если так, то размеры одной картинки должны быть 382х100 пикселей…

ОтветитьОтветить

тогда само меню надо делать больше…а то так не влезет даже 5 пунктов шириной по 100 пикселей…

ОтветитьОтветить

@Мария:
Как успехи? Получилось?

ОтветитьОтветить

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

ОтветитьОтветить

@Ane:
По-моему, дело в том, что весь код надо писать в одну строку, без перевода каретки и пробелами между строками…

ОтветитьОтветить

получилось, но вот только пришлось взять разные фотки на аватарку и меню, иначе они не совмещаются, меню уходит ниже…
а не подскажите как сделать таблицу с фотками-ссылками?

ОтветитьОтветить

А как задать этому прямоугольнику размер? А то дупля не даю, помогите!!!

ОтветитьОтветить

@Роман: во во я понял как сделать, все получается.

ОтветитьОтветить

@Мария:
Меню можно регулировать количеством строк в тексте, который в блоке над меню…
Так на вскидку не представляю. Может покажете пример, как выглядит эта таблица фоток-ссылок

@Роман:
Отлично! )

ОтветитьОтветить

@Наташа Клевер: Спасибо Вам огромное) Вот моя группа:http://vk.com/club20080768

ОтветитьОтветить

@Роман:
Всегда пожалуйста! Симпатично! Успехов в ведении группы ))

ОтветитьОтветить

@Наташа Клевер: Спасибо) Я тоже желаю Вам успехов в работе)

ОтветитьОтветить

@Роман:
И вам спасибо ))

ОтветитьОтветить

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

ОтветитьОтветить

И ещё, я Вам дал ссылку на мою группу, не подумав, что вы её можете не видеть, так как она закрытая)

ОтветитьОтветить

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

ОтветитьОтветить

@Роман:
Не совсем поняла, какие разделы вы имеете в виду. Если можно прямо на примере )

ОтветитьОтветить

@Наташа Клевер: Вот я создал красивое меню группы ( Главное меню группы ). Там есть разделы: Фотографии, Видеозаписи, Аудиозаписи и Обсуждения, ну вообщем на подобии как у Вас. Но проблема в том, что те же разделы в развернутом виде есть ниже Главного меню. Можно ли их как нибудь Скрыть, но не удалять совсем?
Надеюсь так понятнее)
Вот на примере: http://vk.com/club20080768

ОтветитьОтветить

Нет, к сожалению Вы не сможете посмотреть на Главное меню моей группы( Но надеюсь, Вы поняли, о чем разговор идет)

ОтветитьОтветить

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

ОтветитьОтветить

@Роман:
А как называется стандартный блок, который ниже главного меню. Если это блок Ссылки, то его можно перенести направо, прямо над блоком руководство…

ОтветитьОтветить

Хм. Я всегда делю меню на большее количество картинок, что бы кликабельны были только кнопки, а не фон справа в добавок.

ОтветитьОтветить

@Рэнди:
Если для вас просто нарезать на большое количество картинок, то я рада за вас. Но для большинства читателей, для начала чем проще, тем лучше. Ведь чем больше картинок, тем чувствительнее код ко всяким пробелами и переводом строки. А значит велика вероятность ошибки…

ОтветитьОтветить

Подскажите пожалуйста как в CS4 (раздел 1) выделить прямоугольник размером 200х710 пикселя и размером 382х442, где увидеть при выделении сколько пикселей уже выделено??? Спасибо заранее.

ОтветитьОтветить

@Анатолий04RUS:
Попробуйте нажать F8, должно открыться информационное окошко (Инфо), где можно видеть размер выделяемой области.

ОтветитьОтветить

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

ОтветитьОтветить

@Диана:
Возможно все дело в визуальном редакторе. Он почему то искажает многие вещи. Попробуйте пользоваться только HTML редактором, просто копируя код и вставляя его в этот самый редактор. Я об этом в Шаге 5 написала…

ОтветитьОтветить

Здравствуйте, что -то никак не пойму как вставить лого группы такое длинное. нажимаю Изменить фотографию-загрузить новую фотографию загружаю рисунок 200х710, а там окошко обрезает до 200х150. Как быть может я что не так делаю, у Вас написао о меню а лого группы такое вставить не получается.

ОтветитьОтветить

@Марина:
Честно говоря не знаю, в чем дело. Если загружать меню через визуальный редактор, то там тоже картинки уменьшаются. Но вот у баннера 200х710 почему так, не знаю. У меня вроде все сразу загрузилось. Попробуйте погуглить, может у кого уже была подобная проблема…

ОтветитьОтветить

У меня проблема в следующем, графическое меню сделала правильно, написала все как надо и Firefox отражает его нормально, но когда смотрю через Хром, то между кнопками пробелы, что с этим можно сделать?

ОтветитьОтветить

@Alfa:
А киньте, плиз, ссылку на группу, я тоже посмотрю через Хром…

ОтветитьОтветить

Вроде хорошо вышло)
а расстояние у меня каждого меню – 50 px ровно!
главное чтобы самая нижняя картинка была не больше 70 px

ОтветитьОтветить

@Артём Мызин:
Поздравляю! Отличный результат ))

ОтветитьОтветить

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

как под слой свою картинку загнать ???

ОтветитьОтветить

@Иван:
Положить картинку новым слоем под слой с «окошками» из первого шага.

ОтветитьОтветить

простите, оказывается просто перетащить в меню слоев :) Иногда сам себя удивляю :(

ОтветитьОтветить

@Иван:
Ну и отлично, что разобрались ))

ОтветитьОтветить

Большое спасибо за обзор. Все в принципе понятно, кроме одного: я все нарезала в фш, и загрузила в альбом одну картинку для проверки, но не понимаю какую часть адреса картинки мне брать для кода. Код у меня такого вида – http://cs302212.userapi.com/v302212222/1b78/bhQuAnkC220.jpg
Если я беру bhQuAnkC220 – не получается. ((
Подскажите пожалуйста.

ОтветитьОтветить

@Ольга:
Урл картинки должен быть такого вида http://vkontakte.ru/photo72160765_272239413
Из этого урл вы копируете для вставки в код эту часть photo72160765_272239413

ОтветитьОтветить

Дело в том, что у меня все адреса именно такого вида как я написала выше. В этом то и проблема.
Может быть я не правильно смотрю?
Захожу в альбом, открываю загруженню и правой кнопкой «Свойства изображения» и там именн ов таком виде http://cs302212.userapi.com/v302212222/1b78/bhQuAnkC220.jpg

ОтветитьОтветить

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

ОтветитьОтветить

Спасибо вам! )) Вот, это я затупила )))

ОтветитьОтветить

@Ольга:
Ничего страшного! Главное, что во всем разобрались ))

ОтветитьОтветить

Всё рассказано супер,но у меня не получается.Вместо картинок в «меню» то,что я писала.То есть эти буквы,цифры…Почему,не подскажете?

ОтветитьОтветить

@Кристина:
Значит ошибка в коде. Посмотрите чтобы код был один в один как из 5 шага, только с вашими картинками и ссылками.

ОтветитьОтветить

@Наташа Клевер: Спасибо.Теперь получилось.Но опять же есть проблема…У меня 5 кнопок в меню.И они работают через одну.И ава не совпадает с картинкой в меню.Хотя размеры я делала такие,какие сказаны.

ОтветитьОтветить

@Кристина:
Ава может не совпадать, поскольку я пост делала давно, а Вконтаткте с тех пор были какие то изменения и выравнивание сдвинулось. Надо подгонять по месту.

ОтветитьОтветить

спасибо за подробну информацию. сделал себе.
P.S. Для тех у кого не сходятся картинки – я написал в описании группы 10 строк без URL сайта и картинки сошлись

ОтветитьОтветить

@Тема:
Спасибо за ценное дополнение, многим пригодится ))

ОтветитьОтветить

У меня там подсказки, типа «Добавить мероприятия» и внизу идёт «Что у Вас нового?» У меня нету Новости и рядом редактировать… Где взять?)

ОтветитьОтветить

@Рамиль:
При наведении должна высветиться надпись «Редактировать». Ищите по этому признаку.

ОтветитьОтветить

У кого получилось???Помогите мне пожалуйста а то у меня нет
кнопки редактировать даже если навожу на «как сделать страницу эфективней»!!
Мне срочно нужно.Кто может сделать мне меню для группы тому дам голос обращайтесь в личку мне
http://vk.com/id153345493

ОтветитьОтветить

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

ОтветитьОтветить

@Татьяна:
может это поможет http://www.designonstop.com/?p=7221 ))

ОтветитьОтветить

хорошая тема, не раз делал и переделывал себе меню

ОтветитьОтветить

Мануалы по вики-разметке http://vk.com/wiki

ОтветитьОтветить

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

ОтветитьОтветить

понятно, все дело в группе, а у меня публичная страница )

ОтветитьОтветить

@Ирина:
Да, все правильно, именно поэтому ))

ОтветитьОтветить

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

ОтветитьОтветить

@Марина:
Почитайте комментарии, тут уже много об этом говорилось. Возможно у вас страница, а не группа.

ОтветитьОтветить

Вопрос уже поднимался выше: как скрыть альбом с фотографиями меню в группе? Я не могу скрыть альбом, даже нет такой функции! Альбом на своей странице можно, а в группе нет. Если писать ссылку на фото в своем альбоме, ничего не получается(

ОтветитьОтветить

А вот вопрос такой, загружаю изображения со страницы редактирования меню группы (да даже в альбом), а фотки при этом становятся ужасным качеством.
Размеры не нарушаю.
Как это обойти?

ОтветитьОтветить

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

ОтветитьОтветить

Как сделать чтоб в группе меню не закрывалось?

ОтветитьОтветить

@Rio:
Официально никак. Хотя некоторые умельцы добавляют какой то код к урл. Подробностей не знаю.

ОтветитьОтветить

Не получается совместить картинки для меню и авы((((Подскажите подробнее как?

ОтветитьОтветить

Уже разобрался, спасибо.

ОтветитьОтветить

@Сергей:
Отлично! Если что – читайте комментарии, тут уже много вопросов поднималось.

ОтветитьОтветить

Здрасте) Совсем не понятно откуда ссылки брать? [[photoтутцифры|390x94px| а здесь какую ссылку вставить ]]
Откуда мне ссылку взять? если вводишь так [[О нас]] , то проблем нет, ссылка сама создается, а с картинками вообще не пойму.

ОтветитьОтветить

@Анатолий: @Анатолий: Чувак- это по тому, что у тебя не группа а паблик )))))

ОтветитьОтветить

почему у меня в редактировании меню нет вкладки «исходный код»?

ОтветитьОтветить

@Света:
Исходного кода ни у кого нет. Читайте внимательнее текст.

ОтветитьОтветить

Такой вопрос- сделал все коды,картинки,ссылки; ставлю в предпросмотр все ок- по 2 картинки на строку (всего 8 картинок и соответственно 4 строки), когда сохраняю и выхожу в меню готовое все картинки под каждой, т.е. вертикально в 1 полоску,а было по 2 картинки в строку, как только не менял все равно такая ерунда что делать?

ОтветитьОтветить

А я недавно в контакте увидела интересное оформление: графическое меню, но уже открытое, насколько я поняла, код вставлен в описании группы. Я мучилась, но ни фига не получилось. Если кто знает секрет, делитесь!)

ОтветитьОтветить

наверное глупый вопрос, но задавался два раза, и без ответа, меню в группе создано, фотографии нарезанные сохранены в альбоме в ГРУППЕ. как сделать, чтобы подписчики не могли видеть этот альбом? кнопки скрыть нет. подскажите!!! очень прошу!!!

ОтветитьОтветить

@Александра:
По моему где то во вконтактовских комментариях этот вопрос уже обсуждался. Надо закрыть альбом для публичного просмотра «Редактировать альбом» и там поставить «Кто может просматривать» – Только я. По моему как то так.

ОтветитьОтветить

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

ОтветитьОтветить

Скажите как сохранить правый прямоугольник?

ОтветитьОтветить

Очень полезная страница, все по пунктам сделал и отлично получилось, можно посмотреть тут: http://vk.com/arendainstrumentov

ОтветитьОтветить

Спасибо огромное,вы чудо!!! делала первый раз,через обычный Paint. Все получилось!!!!

ОтветитьОтветить

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

ОтветитьОтветить

Надо будет попробовать )))

ОтветитьОтветить

[[photo35389634_321011855|600x102px;nopadding|http://vk.com/page]]
Вот мой код, но в просмотре высвечивается все равно текст. Подскажите ошибки.

ОтветитьОтветить

Кто подскажет
Хочу в обычный пост поставить сначала картинку , а потом текст.
Но не получается, текст всегда оказывается в начале?

ОтветитьОтветить

Спасибо за пост! Все очень просто описано и доступно!

ОтветитьОтветить

что не так?
[[photo82758840_347785051|382x382px;nopadding|https://vk.com/docs?oid=-82758840]]
[[photo82758840_347785053|382x45px;nopadding|https://vk.com/album-82758840_207979969]]
[[photo82758840_347785052|382x45px;nopadding|https://vk.com/board82758840]]

ОтветитьОтветить

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

ОтветитьОтветить

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

ОтветитьОтветить

Нужно заняться созданием меню всё таки. Правда красивее хоть будет.

ОтветитьОтветить

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

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!