Как оформить группу в контакте. Как красиво оформить группу в Контакте
Вконтакте радует своих пользователей большим количеством интересно оформленных групп. Многие из них внешне не уступают полноценному сайту. Такой эффект обеспечивает грамотное оформление группы, в частности, меню и аватары. Опытные пользователи легко справятся с данной задачей, если же вы новичок, то статья будем вам полезна.
Как красиво оформить группу в Контакте
Создание баннера
При просмотре группы пользователь в первую очередь обращает внимание на аватару и меню. Ниже будет рассказано о том, как создать две картинки в программе Photoshop, правильно одну из них нарезать и написать специальный код с указанием
Этап 1
Открываем Photoshop, создаем новый документ с размерами 630х725 пикселей. Заливаем его белым цветом. Вырезаем в слое два окна. Сквозь эти окошки будет выглядывать графическое оформление Контакта. Вначале выделим прямоугольную область размером 200х710 пикселей, нажмем кнопку "Del". Далее выделяем прямоугольную область размером 382х442 пикселя, совмещаем получившиеся прямоугольники понизу и нажимаем клавишу "Del".
Этап 2
Под полученным слоем расположим графическое оформление группы. Лучше всего на картинке с основным фоном заранее написать нужный текст, а кроме этого создать нужное количество пунктов меню.
Этап 3
Далее правую прямоугольную область размером 200х710 пикс. сохраним как отдельное изображение. Получился полностью готовый рисунок для оформления группы. Его нужно загрузить в блок, который расположен в верхнем углу страницы справа. Для этого нажмите кнопку "Загрузить фотографию".
Для чего же левая картинка? Мы разрезаем ее на несколько частей (зависит от количества пунктов меню). К примеру, у нас меню имеет 5 пунктов, значит, на выходе получится 5 картинок 382х50 пикселей.
Этап 4
Пять полученных картинок нужно загрузить в альбом группы. Далее заходим на страничку группы и выделяем блок "Новости", переименовываем его в "Меню группы", после чего нажимаем "Редактировать".
Этап 5
Вот мы и подошли к заключительному этапу руководства "Как красиво оформить группу в Контакте". Открываем вкладку с названием "Исходный который находится в нижнем окошке, необходимо скопировать, а затем вставить в "Исходный код". В тексте кода заменяем photo на наименования файлов и отмечаем высоту файла (382 пикселя). Теперь вставляем адреса ссылок меню. Наименование файла берется из альбома.
Этап 6
Для идеального совмещения картинок нужно выполнить несколько условий:
Наименование группы должно умещаться в одну строку;
Адрес сайта - тоже одна строка.
Описание должно содержать 10 строк.
Wiki-разметка Вконтакте
Чтобы понять, как красиво оформить нужно также ознакомиться с понятием Wiki-разметки.
Что это такое?
Итак, Wiki-разметка - это система, предназначенная для редактирования страниц аналогично HTML. Перед началом оформления группы Вконтакте, определитесь с его видом. Оформление бывает графическое и текстовое.
Оформление текстового меню
Код для меню будет выглядеть вот так:
Начало и конец кода обозначаются тегами. Каждая иконка будет иметь вид [], затем описание.
Графическое меню
Код такого меню будет составляться по такому принципу:
! !! !!
Конечно, эта информация лишь поверхностно затрагивает тему Wiki-разметки. Узнать о ней больше можно, посетив официальную группу Вконтакте. Там представлено много полезной информации и видеоуроков о том, как красиво оформить
Социальная сеть Вконтакте способна порадовать своих пользователей огромным количеством красиво оформленных групп. Некоторые группы выглядят ни чем не хуже полноценного сайта. Все это благодаря грамотному оформлению аватары и меню группы. Для опытных пользователей оформление группы Вконтакте является простой задачей, но если вы новичок, наша статья поможет вам.
Как оформить группу в контакте
Создание красивого баннера
Первое, на что обращает внимание пользователь при просмотре группы Вконтакте – это аватара и меню. Ниже мы разберемся в том, как в программе photoshop создать две картинки, правильно нарезать одну из них и оформить специальный код с внешними ссылками.
Этап 1
Открываем программу photoshop и создаем в ней новый документ, который должен иметь размер 630х725 пикселей. Затем этот документ заливаем белым цветом. После этого в слое вырезаем два окна. Через эти окна и будет проглядывать графическое оформление нашей группы. Для начала выделим прямоугольник размером 200х710 пикселей и нажимаем кнопку Del. Выделяем следующий прямоугольник размером 382х442, совмещаем оба прямоугольника по низу и нажимаем кнопку Del.
Этап 2
Под созданным слоем располагаем графическое оформление нашей группы. Удобней всего будет заранее на картинке с основным фоном написать требуемый текст и создать несколько пунктов меню.
Этап 3
Теперь правый прямоугольник размером 200х710 пикселя сохраняем как отдельную картинку. Мы получили полностью готовое изображение для оформления нашей группы. Его следует загружать в блок, находящийся в правом верхнем углу группы, там вы найдете кнопку «Загрузить фотографию».
Что делаем с левой картинкой? Левую картинку нарезаем на несколько частей в зависимости от количества пунктов меню. Например, если у нас 5 пунктов меню, то в итоге мы получаем 5 картинок имеющих ширину 382 пикселя и высоту не меньше 50 пикселей.
Этап 4
Полученные 5 картинок загружаем в альбом группы: Мои фотографии - Мои альбомы - Добавить фотографии. После этого переходим на страничку группы и выбираем специальный блок «Новости», который можно переименовать в «Меню группы». Нажимаем кнопку «редактировать».
Этап 5
Переходим на вкладку «Исходный код». Код, расположенный в нижнем окошке следует скопировать и вставить в «исходный код». В коде меняем photo на названия файлов и указываем высоту файла (ширина 382 пикселя). Затем вставляем url ссылок меню. Имя для файла берем из альбома. Открытая картинка имеет примерно такой http://vkontakte.ru/photo7236095_23453800. Все, что идет после photo, является названием картинки.
Этап 6
Для того, чтобы картинки идеально совместились, название группы должно быть в одну строку, описание в десять строк, а url веб-сайта в одну строку.
Wiki-разметка Вконтакте
Как оформить группу Вконтакте с помощью wiki-разметки
Что такое wiki-разметка?
Wiki-разметкой называется система редактирования страниц, аналог HTML. Кроме социальной сети Вконтакте, wiki-разметка используется для редактирования статей в Википедии. Wiki-разметка намного проще html и разобраться в ней несложно даже новичку.
Прежде чем вы соберетесь оформлять вашу группу Вконтакте, определитесь с видом оформления. Оформление может быть текстовым или графическим.
Как оформить группу Вконтакте, оформление меню
Текстовое меню с иконками
Код для данного меню будет иметь такой вид:
Код начинается и заканчивается с помощью тегов. Каждая иконка имеет вид [] и текст описания.
Графическое меню
Код для данного меню выглядит так:
! !! !!
Мы поверхностно разобрались, в чем состоит wiki-разметка и для чего она предназначена. Если вы хотите узнать о wiki-разметке более подробную информацию, посетите официальную группу в социальной сети Вконтакте
Сегодня я продолжу свой «Погружение в группы ВК». В третей части «сериала», я рассказывала и показывала, . Сегодня же, поговорим об оформлении меню группы вконтакте!
В первой статье о создании менюшки, в комментах было много вопросов, поэтому прежде чем начать новую тему, отвечу на частые вопросы.
Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»
Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):
Что бы проверить в каком вы редакторе: подведите мышкой на эту кнопку, напишите какой-нибудь текст и выделите его жирным - если появляются не обычные символы, значит - это код
Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками?? »
Ответ 2: Признаю, сама испугалась, когда впервые у клиента «поехала» менюшка. Сейчас я это быстро правлю, а тогда было не весело. Смотрите:
Добавь тег nopadding; и все станет на свои места!
Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для , это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:
Шаблон: [] Пример: []
Обычно картинки меню раздвигаются потому, что из кода выпадает nopadding ; — вставляем его на место и все выравнивается. Перед тем как сохранять результат, жмите на кнопку «Предпросмотр», что бы убедиться в том, что все ровно стало.
Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).
Кстати, вмести с обрезкой, ВК ввел еще одно нововведение относительно фотографий групп: теперь кликнув на аватар, мы так же как в аккаунте, сможем увидеть все альбомы сообщества. Это удобно! И из этого рисуется новый функционал в коммуникациях группы.
Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!
Шаг 1. Как создать меню в контакте и сделать вложенные страницы:
Первым делом убедимся в том, что вы знаете, как создать меню группы в контакте и пробежимся по небольшой инструкции:
Как вам моя шпаргалка?
Вот такая шпаргалка у меня получилась! Для большей ясности, распишу каждую цифру:
Проделайте, эту операцию со всеми вложенными страницами и ваше меню будет готово.
Есть! Меню создали, внутренние страницы сделали, заполнили их, теперь перейдем к созданию красивого графического меню.
Шаг 2. Как создать красивое графическое меню в контакте и поставить его:
Всю теорию о том, как устроена wiki разметка в контакте, я вам давать не буду, у нас сейчас другие цели. Для создания визуального меню в группе ВК, всей вики-разметки знать не нужно. Перейдем к созданию визуального меню!
Для начала покажу вам код и результат своего меню:
Признаюсь, я его сделала специально, что бы написать эту статью. Все «руки не доходили», знаете, как «сапожник без сапог». Но теперь и я с визуальным меню в группе ВК!
Как рисовать картинку для меню, я рассказывать не буду, это дело дизайнеров, я сама рисую, но не столь профессионально. , в конце статьи, я давала видео о том, как в фотошопе рисовать простенькое меню, ознакомьтесь, возможно вы справитесь своими силами. Если нет закажите картинку меню у .
Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:
370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей
И max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.
После того как картинка разрезана на нужное количество объектов и сохранена в отдельный альбом, загружаем этот альбом в ВК. Загружаем в профиль аккаунта, а не в группу! Так как в альбомах группы больше нет возможности скрывать альбомы. Технических альбом в корпоративной (например) группе, совсем не нужен, поэтому прячем элементы меню в альбом аккаунта:
Технический альбом ВК
После того как вы настроили конфиденциальность «Только Я». Переходим к установке самого меню. Дам вам пример кода, что бы был для вас шаблоном и разберем из чего он состоит:
[]
где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:
С первой картинки, начнем вставлять меню в группу вконтакте
Вам нужен короткий адрес картинки, для этого перейдите в сам альбом:
Перейдите в сам альбом, что бы получить нужный адрес картинки!
…и начиная с первой картинки, переносите их в меню группы.
Добавляем размер картинки в код меню!
Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; - он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.
Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120 . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.
Уточнение 2: когда мы ссылаемся на внутренние страницы без картинок, то для обсуждений, альбомов и внешних ссылок ставим одинарные квадратные кавычки.
Строчки, в которых у вас два и более элемента, в код вставляем без пробелов. Вставляйте каждую строку картинки друг за другом. Потому, что если вы нажмете Enter после строки с картинкой, то картинка перепрыгнет на новую строку и меню сдвинется. Нам нужно, что бы меню отображалось цельным, поэтому ни каких лишних пробелов и «иртеров» нам не надо!
После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!
Сегодня мы опять возвращаемся к теме оформления групп В Контакте. Ранее мы уже научились . Сегодня мы будем учиться делать графическое меню с закрепленным верхним баннером и ссылкой на внутреннюю страницу с пунктам расширенного меню. В общем то, на внутренней странице может быть любая информация. Особенно удобно там располагать, например каталоги с ассортиментом продукции. И у раскрывающегося меню и у закрепленного меню есть свои плюсы и минусы. Основной минус раскрывающегося меню — то, что он по умолчанию находится в закрытом состоянии. Но зато на нем можно разместить сразу несколько ссылок.
Закрепленное меню смотрится более эффектно за счет общего впечатления, но у него может быть только одна ссылка, ведущая либо на внутреннюю страницу Вконтакта, либо на внешний сайт (причем на внешний сайт ссылка будет идти не с картинки а с текстовой ссылки под картинкой). Также из очевидных минусов то, что на мобильных устройствах графическое меню представлено в виде обычной записи в ленте, стоящей сверху, а не в виде закрепленной рядом с аватаром. В общем, при выборе оформления стоит учитывать эти нюансы. Итак, давайте посмотрим, как создается закрепленное верхнее меню со ссылкой на внутреннюю страницу.
Оформляю группы Вконтакте
Качественный дизайн групп и пабликов ВК, закрепленное меню, раскрывающееся меню, внутреннее графическое меню, каталоги, внутренняя навигация — цены и портфолио .
Шаг 1
Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 510х352 (выравниваем по нижней линии аватара и делаем расстояние между фигурами 50 пикселей) и также нажимаем Del.
После очередного апдейта дизайна ВКонтактом (31.10.2016) размеры баннера стали 510х307 (а не 510х352).
Шаг 2
Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.
Шаг 3
После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки — одна аватар (справа), вторая меню с кнопкой кликнуть (слева).
Шаг 4
Также в фотошопе создаем графическое меню, состоящее из нескольких пунктов. Ширина этого меню должна быть 600 пикселей, высота по усмотрению, в зависимости от количества пунктов. В помощь используйте урок « «.
Шаг 5
Нарезаем наше меню на несколько горизонтальных полосок в соответствии с количеством пунктов меню. Сохраняем в виде отдельных файлов.
Шаг 6
Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» (при нажатии на три точки под автаром открывается выпадающее меню) и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.
Шаг 7
Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Обновить фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для круглой миниатюры.
Шаг 8
Теперь нужно создать внутреннюю страницу. О том, как это сделать, подробно расписано в уроке . Еще один альтернативный способ создания внутренней страницы расписан в уроке « » в Шаге 5 и 6.
Шаг 9
После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовала в «Меню») и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.
Шаг 10
Теперь нам надо создать графическое меню из пяти пунктов. Для этого мы загружаем в альбом группы наши пять картинок из Шага 5. Мы нажимаем на значок фотоаппарата и загружаем нарезанные картинки с компьютера. Хранится картинки будут где-то на серверах ВКонтакта с привязкой к группе, поэтому создавать отдельный альбом для картинок-нарезок не обязательно. Загружать картинки нужно в режими Вики-разметки.
Шаг 11
Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Подробнее о создании кода в вики-разметке рассказано в Шаге 4 и Шаге 5 урока « «. Там же приведен шаблон кода для вставки. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.
Шаг 12
Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».
Шаг 13
Подводим курсор к трем точкам рядом с заголовком поста и в выпадающем окошке выбираем пункт «Закрепить». Соответственно также новость и открепляется, если необходимо.
Шаг 14
Есть один нюанс. Иногда, после того, как открепляешь новость, она уходит далеко вниз ленты, согласно дате создания, и бывает достаточно трудно вновь ее отыскать. Поэтому лучше сразу где-нибудь записать урл закрепленной новости. Для этого надо подвести курсор ко времени создания новости и нажать на ссылку.
Шаг 15
Теперь обновляем главную страницу группы. Наше графическое меню будет вверху соседствовать рядом с аватаром. А при нажатии на картинку, мы попадаем на внутреннюю страницу с меню из пяти пунктов.
Сегодня у каждой организации, да и большинства пользователей есть своя группа в социальной сети Вконтакте. И среди большого количества групп можно найти поистине красиво оформленные. Так как же делают оформление группы Вконтакте ? Сразу же отметим, что для оформление группы необходимо изучить вики разметку.
Отметим, что примерно в двадцатых числах октября администраторы Вконтакте обрезали аватарки групп, сделав их 200*500 пикселей. Исходя из этого немного подправьте урок. Или же просто сделайте невысокое меню: 382*232 и 200*500.
Оформление группы Вконтакте
В фотошопе создаем новый документ белого цвета 630*725 пикселей. В слое вырезаем два окна, через которые будет виднеться графическое оформление, а именно прямоугольник 200*710 и нажмите Del и прямоугольник 382*442, прямоугольники соединяем внизу и опять нажимаем Del.
Под этим слоем расположим наше графическое оформление. Мы положили картинку, далее текст, в левом прямоугольнике создаем пять пунктов (количество зависит от того сколько вам нужно).
Правый прямоугольник сохраняем отдельной картинкой 200*710. Вот и готова первая картинка для оформления. Ее необходимо загрузить в блок, расположенный в правом верхнем углу группы «Загрузить фотографию». Левую картинку нарезаем по количеству пунктов. У нас получается 5 картинок 50*382.
Загружаем все пять картинок в основной альбом страницы группы («Мои фотографии» — «Мои альбомы» — «Добавить фотографии»). Переходим на страницу группы и под описанием видим блок «Новости» (можно его переименовать) — «Редактировать».
Так во Вконтакте произошли некоторые изменения, после предыдущего пункта переходим в закладку «Редактировать» и нажимаем на кнопку справа «Режим вики разметки». В открывшееся окно помещаем следующий код:
Переходим в закладку «Исходный код» и вставляем туда следующий код (визуальным редактором лучше не пользоваться, он сбивает настройки):
[]
[]
[]
[]
[]
Не забудьте в коде изменить слово photo, на название своих файлов и укажите высоту файла (ширина уже задана), а так же выставьте url ссылок меню.
Для того чтобы картинки были совмещены, название группы должно помещаться в одну строку, описание группы в 10 строк, а url веб сайта в 1. Кликните по картинке, что бы наглядно увидеть, как это работает.
Если вам помогла или понравилась данная статья, не забудьте поставить свой лайк , это поможет другим пользователям найти её быстрей. А я смогу узнать, что интересует вас больше всего, чтобы подготовить и написать еще больше интересных и полезных статей! С уважением, Вячеслав.
