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

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

Для серьезного бизнеса, можно заказать профессиональное оформление сообщества.

Прежде чем начать что-либо рисовать и верстать, важно подумать, о чем должно говорить ваше меню?

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

• Если вы планируете публиковать развлекательный, контент (меню может вам и не понадобиться).
• Если вы планируете публиковать информационный контент или цель у сообщества продавать, меню должно помогать пользователям ориентироваться среди огромного количества разделов и каталогов товаров. Лучше всего поместить в него разделы, которые направляют посетителя в каталог либо конкретную его часть, о доставке, о компании, акциях и обязательно на страницу контактов.

Покажу на простом примере, как это сделать:

Делается это с помощью Вики разметки

Для этого в группе: переходим в настройки: Управление сообществом>Материалы>делаемОткрытые либо Ограниченные смотрите всплывающие подсказки.

Сохраняем изменения и переходим в группу. Под описанием группы появится раздел«Свежие новости» именно в нем создается меню.

Начинать создавать такое меню можно в любом графическом редакторе (я использую Photoshop) можете выбрать любой редактор здесь или здесь Еще можно воспользоваться Vk Profi - уникальный онлайн-сервис, который предназначен для создания креативного оформления публичных страниц и групп в ВКонтакте, которое сможет сделать любой пользователь без специальных навыков http://vkprofi.ru/ далее нужно – продумать дизайн, сделать будущие кнопки или просто написать текст

Покажу на примере редактора Photoshop, при том, что даже минимальных знаний для этого вполне достаточно.

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

Дело в том, что размер с левой стороны у всех разный, он зависит

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

Размер же правой стороны максимальный 200х500 советую делать 200х450

Итак, что я делаю:

Готовлю 2 шаблона мои размеры

1 аватарка 200х456

2 меню (для одного цельного изображения или одной кнопки) ширина 385 высота 260 (при описании группы в 4 строки + статус+местоположение "Россия")

Если Вы создаете в разделе "Свежие новости" кликабельное меню, которое будет разрезано больше чем на 1 кнопку - размер меню (общий для кнопок - должен составлять в ширину 370) или верстать табличное меню - это и адаптация для мобильных устройств и 395 больше чем 370, в таблице общую ширину можно сделать именно такой. Например так:

Подробнее>>

Загружаю их в группу

Самое главное при этой работе чтобы низ обоих изображений был ровный по высоте, это для красоты оформления.

Далее делаю скриншот группы и вставляю его в фотошоп.

Если Вы тоже работаете в Photoshop, можете воспользоваться готовыми шаблонами, они находятся в разделе документы нашей группы. Лучше сделать свои.

Нажимаем >Файл>Открыть и выбираем скрин с компьютера

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

затем отключаем слой, остается наша раскройка

Далее вставляем нашу картинку, я взяла это изображение с сайта "Яркие разноцветные фоны для фотошопа и сайтов" ниже я еще приведу примеры сайтов, где можно подобрать изображения для оформления сообщества.

нажимаем >Файл>Открыть и выбираем изображение с компьютера, подгоняем наше изображение под шаблон (для этого нажимаем "редактирование > трансформирование > масштабирование"

Сервисы для поиска бесплатных «чистых» картинок

Найти качественные фотографии в интернете, не нарушая авторских прав, достаточно легко, только надо знать, где искать.

1. Unsplash.com

Здесь вы можете подписаться на новостную рассылку и получить по 10 фото на почту каждые 10 дней.

Все фото под лицензией CCO, так что вы можете свободно использовать их в своих проектах.

2. images.google.com

Здесь хранятся миллионы исторических фотографий реальных людей и событий. Чтобы найти такие фото, к обычному поисковому запросу нужно добавить «source:life» и вы увидите только фотографии из жизни. Эти изображения можно использовать для личных, некоммерческих проектов.

3. flickr.com

Здесь можно найти качественные фотографии под лицензией CCO. Главное, сразу установить в настройках поиска этот фильтр.

Ещё на фликре есть специальный раздел The British Library (Британская библиотека), где можно найти миллионы винтажных фотографий, бесплатно скачать их и использовать для своих нужд.

4. picjubmo.com

Здесь вы найдете фотографии в высоком качестве для личного и коммерческого использования. Владелец сайта сам делает эти фото, и всё, что он требует взамен — указание его авторства. Здесь также можно подписаться на рассылку и получать фотографии на e-mail.

5. pixabay.com

Все фотографии с этого ресурса находятся под лицензией CCO, и вы можете использовать их где угодно. Как и на Flickr, здесь можно просмотреть фотографии по модели камеры.

6. publicdomainarchive.com

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

7. commons.wikimedia.org

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

8. superfamous.com

Ещё один крутой ресурс, где можно скачать фотки с высоким разрешением, от которых просто дух захватывает. Изображения лицензированы Creative Commons и require attribution.

9. nos.twnsnd.co

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

10. Stock Exchange - freeimages.com

Это одно из самых больших хранилищ бесплатных фото и графики, но чтобы скачивать картинки, надо зарегистрироваться.

11. morguefile.com

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

Так что вы можете сначала подправить фото, как вам надо, а потом уже скачать для своего сайта.

12. gettyimages.com

Если вам нужны профессиональные фотографии, но вы не хотите платить за лицензию, можно попробовать Getty. Вы бесплатно вставляете фотографии с Getty Image на свой сайт, хотя в будущем на них может появиться реклама. Получается модель видео с Youtube — вы ничего не платите, но возмещаете рекламой.

Далее создаем новый слой и делаем кнопку инструментом «прямоугольник» я сделаю его полупрозрачным, что бы было видно картинку (для этого установлю заливку 30%

количество кнопок зависит от количества тем, для которых нужны переходы (для этого сделайте дубликат слоя с уже имеющейся кнопки - столько раз сколько нужно кнопок)

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

Далее опять создаем новый слой и пишем текст, количество слоев зависит от количества текста, (для этого сделайте дубликат слоя с уже имеющимся текстом - столько раз сколько нужно и на каждой копии измените текст) можете выбрать шрифт, размер, цвет и т.д.

Далее каждую часть картинки, на которой находятся кнопки нужно еще раз раскроить, для того что бы они были кликабельными.

ВНИМАНИЕ!!! При размере изображения высота которого менее 30 пикселей, в коде не поддерживается функция nopadding. Рекомендую делать высоту больше 30 пикселей, даже если в просмотре с Вашего браузера изображения отображаются без пробелов, то с другого браузера пробелы будут видны.

Затем сохраняем: в меню «Файл» строку «Сохранить для Web и устройств» (можно использовать комбинацию клавиш Al+Ctrl+Shift+S). В настройках сохранения выбираем тип файла JPEG, ставим максимальное качество. Нажимаем кнопку «Сохранить».

Теперь жму «Готово»

Photoshop сохранит всё это как html-файл с картинками (картинки находятся в папке images, лишние картинки удаляем).

Загружаем наши картинки в группу. Правая часть (аватарка) у нас просто загружается, для того что бы загрузить левую часть заходим в раздел «Свежие Новости», нажимаем «Редактировать»

В новом открывшимся окне загружаем фотографии (нажимаем на значок фотоаппарат).

Можно загрузить изображения сразу на wiki-страницу с компьютера, а можно в фотоальбом группы. Как только закончите загрузку в фотоальбом, возвращайтесь в текстовый редактор раздела «Свежие новости»

Строку «Свежие новости» есть возможность переименовать, например: в «Меню». Для того чтобы начать непосредственную работу над созданием меню надо активировать режим wiki-разметки. Сделать это можно одним нажатием на пиктограмму ромба.

Загруженные фотографии уже ,будут отображены wiki - разметкой

У меня вики-разметка загрузилась в одну строку, перенесу их в столбик для дальнейшего редактирования

Темы должны быть созданы заранее:

Копируем ссылку на раздел или страницу, которая должна выводиться посредством клика на определенный пункт меню.И прописываем в следующий код:

[­[photo239952196_322501460|400px72;nopadding;|page-11053617_29800171]]

photo239952196_322501460 – это ссылка на фотографию. Ее номер вверху адресной строке браузера, если вы загрузили фотографии в альбом (я загружаю с компьютера сразу)

400px72 — это размер фотографии (отображается автоматически, размер можно изменять)

nopadding — это тег, убирающий пробелы между картинками

page-11053617_29800171 — это ссылка, на которую будут переходить пользователи группы, щелкая на данный текст на картинке (я загружаю полный адрес страницы из браузерной строки). Узнать ее можно так же как и ссылку на фотографию, просто открыв нужную страницу и скопировав ее из верхней адресной строки браузера.

Далее смотрим в пред просмотре, что получилось (картинка должна быть единым изображением и должны работать переходы на темы).

Устраивает? Тогда жмем «Сохранить страницу» и проверяем ее работу непосредственно на странице группы.

Вот что получилось у меня: