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

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

108

13-12-2011

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

 
 

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

 
 

 
 

Внимание!
В связи с очередным апдейтом ВКонтакта от 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. Также нам надо проставить урл ссылок с каждого пункта меню. В данном случае первая ссылка ведет на внутреннюю страницу Вконтакта, а остальные четыре ссылки ведут прямо на страницы моего сайта.Как оформить группу В Контакте и создать красивое графическое меню

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

[[photo72160765_435180097|510x95px;nopadding|page-15865937_43819846]][[photo72160765_435180100|510x50px;nopadding|http://www.designonstop.com/inspiration]][[photo72160765_435180102|510x45px;nopadding|http://www.designonstop.com/tutorials/beginners]][[photo72160765_435180103|510x46px;nopadding|http://www.designonstop.com/useful/photoshop]][[photo72160765_435180104|510x73px;nopadding|http://www.designonstop.com/themes]]

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

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

  • Понравился пост? Поддержите DesingNonstop рублём!

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

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

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

Комментариев 108 комментариев

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

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

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

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

что не так?
[[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]]

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

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

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

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

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

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

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

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

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

У меня с боку маленькая а не длинная картинка! Что делать???

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

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

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