Как красиво оформить сообщество вконтакте
Добрый день. В этом посте речь пойдет про то, как самостоятельно оформить группу вконтакте. Совсем недавно, мы рассмотрели подробно создание аватара для группы или паблика вконтакте и поговорили о том, какого размера и качества должно быть изображение. Но дизайнеры пошли дальше и сейчас можно встретить множество сообществ, в которых меню и аватар представляют единое целое. Выглядит это потрясающе. И сегодня вы научитесь делать красивое оформление для группы или паблика своими руками, не прибегая к помощи фрилансеров и профессиональных веб дизайнеров.
Чтобы вы сразу поняли о чем идет речь — выкладываю пример оформленной группы:
Пример оформленной группы ВК
Если в 2-х словах, то в графическом редакторе ( том же эдоб фотошоп ) создаются в 2 картинки. Одна из них нарезается на несколько фрагментов и с помощью вики разметки вконтакте проставляются ссылки. Если не испугались этих страшных слов — я продолжу.
Шаг 1. В графическом редакторе ( лучше всего использовать adobe photoshop ) нужно создать документ размером 630 на 725 пикселей. Далее в первом слое вырезаем 2 окна, которые и будут являться меню и аватаркой. Первым делом выделаем прямоугольник размером 200 на 500 пикселей и нажимаем клавишу DEL.
__________________
Сразу оговорюсь, что в уроках на других сайтах вы можете найти советы, где говорят о том, что обрезать нужно прямоугольник размером 200*710. ЭТО НЕ ПРАВИЛЬНО. Сейчас в социальной сети вконтакте есть ограничение на высоту авы и в случае использования высоты в 710 px — она получится обрезанной.
__________________
Теперь вырезаем меню — еще один прямоугольник размером 382 на 232 и жмем также клавишу «делит». Прямоугольники должны быть соединены внизу.
Разметка меню по размеру
Заготовка готова.
Шаг 2. Теперь нашу заготовку надо обтянуть фоном. Написать текст, если это необходимо и создать будущие кнопки под меню. В примере их 5, но вы можете сделать сколько Вам необходимо, но не стоит делать их слишком мелкими, тем самым вы понизите юзабилити, заставляя пользователя увеличивать страницу или щуриться,чтобы прочитать текст.
Создание пунктов меню
Шаг 3. Правый прямоугольник можно сохранять. Не забывайте про размер 200 на 500. Это готовая аватарка для вашей группы. Можете сразу загрузить ее в правом верхнем углу группы/паблика.
Загрузить новую фотографию в сообщество
Что касается прямоугольника с размеченными пунктами меню, то его нужно будет нарезать на несколько картинок ( в данном случае 5). Ширина 382, а вот высота рассчитывается индивидуально, но должна быть не менее 50 пикселей.
Нарезка меню для сообщества
Шаг 4. Теперь нужно 5 получившихся фото загрузить в альбом сообщества.
Добавление фотографий в альбом
Как только дело сделано — нужно взяться за редактирования блока новостей в группе. Переходим в «свежие новости» и жмем на кнопку «редактировать»
Свежие новости в группе
У вас в настройках группы должны быть открытыми фотоальбомы и документы. Это важно, так как без этого вы не сможете загрузить фото и сделать меню.
Шаг 5. Во вкладке «редактирование» вставляем cследующий код:
[[photo|382x228px;nopadding|Ваша ссылка 1]]
[[photo|382x50px;nopadding|Ваша ссылка 2]]
[[photo|382x50px;nopadding|Ваша ссылка 3]]
[[photo|382x50px;nopadding|Ваша ссылка 4]]
[[photo|382x50px;nopadding|Ваша ссылка 5]]
Начинаем его править.
photo — представление ссылки на фотографию. Откройте одну из 5 загруженных вами фото с меню группы и в строке браузера в увидите что-то вроде этого —
http://vk.com/photo72120765_272239411
72120765_272239411 — и есть тот самый необходимый код фотографии. Можно просто использовать имя файла.
Далее идет выставление настроек ширины и высоты. С этим вы, думаю, разберетесь, так как оптимальные размеры вы знаете.
Теперь следует указать ссылку, куда будет вести каждая из 5 частей меню. Это может быть как внешний сайт, так и внутренняя ссылка на документы вконтакте, скажем, ссылка на фото или видео альбомы.
Вставка кода для меню группы ВК
Шаг 6. Необходимо совместить картинки от аватарки меню, если они разъехались. Для этого нужно сделать 3 вещи:
Название группы должно быть в одну строчку
Описание в 10 строк ( тут иногда нужен подгон)
Вебсайт также в одну строчку.
Вот что примерно должно у вас получиться:
Оформленная группа
Как видите, сделать оформление для группы вконтакте совсем несложно. Если у вас есть вопросы — задавайте их в комментариях, а если не хотите «париться» — вам прямая дорога на фриланс.
Создание оформления, описанного в данной статье обойдется Вам в 15-25 у.е.
Добра и мира Вам!