Как сделать красивое меню в контакте


Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте



108

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

 
 

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

 
 

 
 

Внимание!
В связи с очередным апдейтом ВКонтакта от 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_43819846photo72160765_435180100|510x50px;nopadding|http://www.designonstop.com/inspirationphoto72160765_435180102|510x45px;nopadding|http://www.designonstop.com/tutorials/beginnersphoto72160765_435180103|510x46px;nopadding|http://www.designonstop.com/useful/photoshopphoto72160765_435180104|510x73px;nopadding|http://www.designonstop.com/themes

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

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 4.5 из 5)
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=6209
  • рублём!

Источник: http://www.designonstop.com/webdesign/practice/kak-oformit-gruppu-v-kontakte-i-sozdat-krasivoe-graficheskoe-menyu.htm


Как сделать красивое меню в контакте фото


Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Как сделать красивое меню в контакте

Далее: