Вконтакте

Как оформить группу Вконтакте?

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

Отметим, что примерно в двадцатых числах октября администраторы Вконтакте обрезали аватарки групп, сделав их 200*500 пикселей. Исходя из этого немного подправьте урок. Или же просто сделайте невысокое меню: 382*232 и 200*500.

Оформление группы Вконтакте

В фотошопе создаем новый документ белого цвета 630*725 пикселей. В слое вырезаем два окна, через которые будет виднеться графическое оформление, а именно прямоугольник 200*710 и нажмите Del и прямоугольник 382*442, прямоугольники соединяем внизу и опять нажимаем Del.
Оформление группы вконтакте
Под этим слоем расположим наше графическое оформление. Мы положили картинку, далее текст, в левом прямоугольнике создаем пять пунктов (количество зависит от того сколько вам нужно).
Оформление группы вконтакте
Правый прямоугольник сохраняем отдельной картинкой 200*710. Вот и готова первая картинка для оформления. Ее необходимо загрузить в блок, расположенный в правом верхнем углу группы «Загрузить фотографию». Левую картинку нарезаем по количеству пунктов. У нас получается 5 картинок 50*382.
Оформление группы вконтакте
Загружаем все пять картинок в основной альбом страницы группы («Мои фотографии» — «Мои альбомы» — «Добавить фотографии»). Переходим на страницу группы и под описанием видим блок «Новости» (можно его переименовать) — «Редактировать».
Оформление группы вконтакте
Так во Вконтакте произошли некоторые изменения, после предыдущего пункта переходим в закладку «Редактировать» и нажимаем на кнопку справа «Режим вики разметки». В открывшееся окно помещаем следующий код:
Оформление группы вконтакте
Переходим в закладку «Исходный код» и вставляем туда следующий код (визуальным редактором лучше не пользоваться, он сбивает настройки):

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

Не забудьте в коде изменить слово photo, на название своих файлов и укажите высоту файла (ширина уже задана), а так же выставьте url ссылок меню.

Для того чтобы картинки были совмещены, название группы должно помещаться в одну строку, описание группы в 10 строк, а url веб сайта в 1. Кликните по картинке, что бы наглядно увидеть, как это работает.

оформление группы Вконтакте

Если вам помогла или понравилась данная статья, не забудьте поставить свой лайк, это поможет другим пользователям найти её быстрей. А я смогу узнать, что интересует вас больше всего, чтобы подготовить и написать еще больше интересных и полезных статей! С уважением, Вячеслав.
Также стоит прочитать:
  • Вика

    Поч у меня не получаеться сделать «Оформление группы Вконтакте» У меня есть фото шоп а как кнопки сделать что бы люди могли нажимать на них и переходить ?

  • никалай

    Как зделат свою группу ?

  • НикОлай

    Никалай, ты баран))))))))))))))))))

  • НикОлай

    Вика, кроме наличия в компе Фотошопа, крайне желательно наличие более одной извилины в голове….

  • НикОлай

    Спасибо автору за предоставленный макет и полезную информацию. Так случилось что необходимо было срочно создать и немного оформить группу при отсутствии опыта. Получилось

  • Александр

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

  • Эльдар

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

  • Dmitry 007

    Я не парился, заказал. При том, что это не дорого сейчас. Вот тут vk.com/sh.design Мне все понравилось. Аватар, баннер, навигацию внутреннюю сделали. Я доволен

  • Дамир Сафин

    вот тут крутое видео по оформлению https://www.youtube.com/watch?v=nCsbyMKFSWw

  • Динара Белая

    почему не получается Альт и этот клик????????????????????????

    • Юрий Фролов

      Что у вас не получается?

  • Алексей Зарожевский

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

    • Юрий Фролов

      Я думаю, что для этого нужно создать внутреннюю страницу. По описанному здесь способу получается только так как показано. То есть картинка открывается по нажатию кнопки «Меню».

  • Няшка Рая

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

  • Оля Мироненко

    Как добавлять цветочки, сердечки и разные элементы не могу добавить очень надо подскажите

  • Константин Чибизов

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

    • Антон Капылович

      хотелось бы узнать))

    • Алексѣй Варфоломеевъ

      И мне расскажите, пожалуйста

  • Максим Гринченко

    Как сделать чтоб менюга всегда оставалась открытой, а не открывалась только при нажатии?

  • Альберт Шульцбургер

    710px уже не актуально

  • Наталья Прохорова (Сальникова)

    Делала все по инструкции. В предпросмотре выдает не картинки, а кода, которые я писала. Перепроверила все на 100 раз. Не могу понять, что делаю не так. Помогите, пожалуйста.