Как оформить группу В Контакте и создать красивое графическое меню
86
Наташа Клевер
Веб-дизайн / Практика
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 строку. Щелкните по картинке, чтобы посмотреть, как это все выглядит в реальности. Ну и соответственно присоединяйтесь к моей группе В Контакте.
И еще, убедительная просьба, читайте пожалуйста комментарии ниже! Здесь уже столько вопросов обсуждалось, что скорее всего вы найдете ответ и на свой вопрос.
Написать комментарий с помощью формы ВКонтакте
Написать комментарий с помощью формы Facebook
Комментариев (86)
|
Класс, буду делать) Ответить | |
|
@Iparomoff: @Onegai: Ответить | |
|
Спасибки Ответить | |
|
@Василий: Ответить | |
|
Какой у вас браузер? На Firefox 8 меню группы ниже правого блока на пару пикселей. Ответить | |
|
@Aneteron: Ответить | |
|
киньте пожплуйста, ссылку на обучалку по CS как резать, вставлять картинки, ну и все остальное с этим связанное, а то как не начинаю смотреть, обучалки только как волосы перекрашивать… Ответить | |
|
@Egor Pro: Ответить | |
|
Что делать если у меня нет слова: «Редактировать», так как у вас изображено на картинке и строка эта у меня подписона не меню группы, а «Как сделать страницу эфективнее», подскажите как переименовать и куда девалось слово редактировать… Ответить | |
|
@Анатолий: Ответить | |
|
блин у меня вобще ничего не получается Ответить | |
|
@Вадим: Ответить | |
|
Мне в контукте пишет, что можно вставить только фото разрешением не меньше 100*100 пикселей? что делать? Ответить | |
|
@Мария: Ответить | |
|
тогда само меню надо делать больше…а то так не влезет даже 5 пунктов шириной по 100 пикселей… Ответить | |
|
@Мария: Ответить | |
|
Подскажите ,пожалуйста,у меня в меню вертикальные пробелы между обрезанными кнопками,как убрать их,чтобы сделать вид цельной картинки? Ответить | |
|
@Ane: Ответить | |
|
получилось, но вот только пришлось взять разные фотки на аватарку и меню, иначе они не совмещаются, меню уходит ниже… Ответить | |
|
А как задать этому прямоугольнику размер? А то дупля не даю, помогите!!! Ответить | |
|
@Роман: во во я понял как сделать, все получается. Ответить | |
|
@Мария: @Роман: Ответить | |
|
@Наташа Клевер: Спасибо Вам огромное) Вот моя группа:http://vk.com/club20080768 Ответить | |
|
@Роман: Ответить | |
|
@Наташа Клевер: Спасибо) Я тоже желаю Вам успехов в работе) Ответить | |
|
@Роман: Ответить | |
|
Извините за беспокойство, можно один вопросик? Ответить | |
|
И ещё, я Вам дал ссылку на мою группу, не подумав, что вы её можете не видеть, так как она закрытая) Ответить | |
|
А можно ли вместо слова «меню» Вставить картинку, чтобы виднее было? Я чуть чуть попытался – не получается, в названии изображается только код, который я написал для вставки изображения. Ответить | |
|
@Роман: Ответить | |
|
@Наташа Клевер: Вот я создал красивое меню группы ( Главное меню группы ). Там есть разделы: Фотографии, Видеозаписи, Аудиозаписи и Обсуждения, ну вообщем на подобии как у Вас. Но проблема в том, что те же разделы в развернутом виде есть ниже Главного меню. Можно ли их как нибудь Скрыть, но не удалять совсем? Ответить | |
|
Нет, к сожалению Вы не сможете посмотреть на Главное меню моей группы( Но надеюсь, Вы поняли, о чем разговор идет) Ответить | |
|
Нет, ну почему не сможете, в настройках Главного меню, в параметре: Кто может просматривать страницу стоит галочка напротив Все пользователи, так что если Вы можете увидеть. Ответить | |
|
@Роман: Ответить | |
|
Хм. Я всегда делю меню на большее количество картинок, что бы кликабельны были только кнопки, а не фон справа в добавок. Ответить | |
|
@Рэнди: Ответить | |
|
Подскажите пожалуйста как в CS4 (раздел 1) выделить прямоугольник размером 200х710 пикселя и размером 382х442, где увидеть при выделении сколько пикселей уже выделено??? Спасибо заранее. Ответить | |
|
@Анатолий04RUS: Ответить | |
|
Картинка-меню при раскрытии меню отображается в уменьшенной копии, а не в полный размер, хотя параметры в коде прописаны. Почему так? Как исправить? Ответить | |
|
@Диана: Ответить | |
|
Здравствуйте, что -то никак не пойму как вставить лого группы такое длинное. нажимаю Изменить фотографию-загрузить новую фотографию загружаю рисунок 200х710, а там окошко обрезает до 200х150. Как быть может я что не так делаю, у Вас написао о меню а лого группы такое вставить не получается. Ответить | |
|
@Марина: Ответить | |
|
У меня проблема в следующем, графическое меню сделала правильно, написала все как надо и Firefox отражает его нормально, но когда смотрю через Хром, то между кнопками пробелы, что с этим можно сделать? Ответить | |
|
@Alfa: Ответить | |
|
Вроде хорошо вышло) Ответить | |
|
@Артём Мызин: Ответить | |
|
я вот это не пойму Шаг 2. как под слой свою картинку загнать ??? Ответить | |
|
@Иван: Ответить | |
|
простите, оказывается просто перетащить в меню слоев Ответить | |
|
@Иван: Ответить | |
|
Большое спасибо за обзор. Все в принципе понятно, кроме одного: я все нарезала в фш, и загрузила в альбом одну картинку для проверки, но не понимаю какую часть адреса картинки мне брать для кода. Код у меня такого вида – http://cs302212.userapi.com/v302212222/1b78/bhQuAnkC220.jpg Ответить | |
|
@Ольга: Ответить | |
|
Дело в том, что у меня все адреса именно такого вида как я написала выше. В этом то и проблема. Ответить | |
|
@Ольга: Ответить | |
|
Спасибо вам! )) Вот, это я затупила ))) Ответить | |
|
@Ольга: Ответить | |
|
Всё рассказано супер,но у меня не получается.Вместо картинок в «меню» то,что я писала.То есть эти буквы,цифры…Почему,не подскажете? Ответить | |
|
@Кристина: Ответить | |
|
@Наташа Клевер: Спасибо.Теперь получилось.Но опять же есть проблема…У меня 5 кнопок в меню.И они работают через одну.И ава не совпадает с картинкой в меню.Хотя размеры я делала такие,какие сказаны. Ответить | |
|
@Кристина: Ответить | |
|
спасибо за подробну информацию. сделал себе. Ответить | |
|
@Тема: Ответить | |
|
У меня там подсказки, типа «Добавить мероприятия» и внизу идёт «Что у Вас нового?» У меня нету Новости и рядом редактировать… Где взять?) Ответить | |
|
@Рамиль: Ответить | |
|
У кого получилось???Помогите мне пожалуйста а то у меня нет Ответить | |
|
а вы не подскажите как текстовые документы в меню вносить?тобишь кликаешь на пункт в меню,а там бац,и текст разворачивается))) Ответить | |
|
@Татьяна: Ответить | |
|
хорошая тема, не раз делал и переделывал себе меню Ответить | |
|
Мануалы по вики-разметке http://vk.com/wiki Ответить | |
|
наверно от количества подписчиков зависит появление кнопки Новости, у меня тож ее нетю. Ответить | |
|
понятно, все дело в группе, а у меня публичная страница ) Ответить | |
|
@Ирина: Ответить | |
|
у меня нет «Новости» и нет редактировать, стоит только обсуждения и потом фотографии и аудизаписи Ответить | |
|
@Марина: Ответить | |
|
Вопрос уже поднимался выше: как скрыть альбом с фотографиями меню в группе? Я не могу скрыть альбом, даже нет такой функции! Альбом на своей странице можно, а в группе нет. Если писать ссылку на фото в своем альбоме, ничего не получается( Ответить | |
|
А вот вопрос такой, загружаю изображения со страницы редактирования меню группы (да даже в альбом), а фотки при этом становятся ужасным качеством. Ответить | |
|
@MakLeR: Ответить | |
|
Как сделать чтоб в группе меню не закрывалось? Ответить | |
|
@Rio: Ответить | |
|
Не получается совместить картинки для меню и авы((((Подскажите подробнее как? Ответить | |
|
Уже разобрался, спасибо. Ответить | |
|
@Сергей: Ответить | |
|
Здрасте) Совсем не понятно откуда ссылки брать? [[photoтутцифры|390x94px| а здесь какую ссылку вставить ]] Ответить | |
|
@Анатолий: @Анатолий: Чувак- это по тому, что у тебя не группа а паблик ))))) Ответить | |









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