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

101

Веб-дизайн / Практика13-12-2011

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


 
 

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

 
 

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

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

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

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

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

[[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

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

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

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

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

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

@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]]
Вот мой код, но в просмотре высвечивается все равно текст. Подскажите ошибки.

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

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

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

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

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