Дизайн и графическое меню для группы во ВКонтакте?

Дорогие друзья, по мере своих сил и возможностей я стараюсь отвечать на ваши вопросы, помогать в решении тех или иных задач и т.д. Сегодняшний пост опубликован по просьбе Наты Решетник, автора блога Велереи. Как я понял из переписки, у её подруги есть группа (сообщество) в социальной сети ВКонтакет и теперь она (подруга) хочет создать для неё (группы) графическое меню. Ход правильный, но реализация требует определённых знаний.

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

Шаг 1. А начать я предлагаю с вывода пункта «Мои Группы» в меню аккаунта. Так будет проще ориентироваться в дальнейшем. Для этого найдите в меню пункт «Мои Настройки» и на вкладке «Общее» открывшейся страницы установите галочку «Мои Группы» в секции «Дополнительные сервисы».

Шаг 2. Чтобы ничего не пропустить я создам отдельную группу. Для этого нам понадобится кликнуть появившийся пункт меню «Мои Группы» и на открывшейся странице кликнуть ссылку «Создать сообщество».

В открывшемся окне укажите название и вид сообщества (группа), а потом нажмите кнопку «Создать сообщество».

После того, как группа будет создана, вы попадёте на страницу её настроек. Здесь вы можете указать красивый адрес страницы (вместо сгенерированного по умолчанию), описание сообщества и т.д. Главное, что нас тут интересует это опция «Материалы». Выберите вариант «Подключены». Именно в блоке «Свежие новости», на главной странице группы и будет размещаться наше меню. После того как всё будет выполнено, нажмите кнопку «Сохранить».

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

Шаг 3. Теперь нам нужно подготовить дизайн группы ВКонтакте. Несмотря на то, что тема достаточно старая, мне так и не удалось найти онлай генератор дизайна и графического меню для групп ВКонтакте. Поэтому пойдём по пути наибольшего сопротивления и воспользуемся программой Photoshop (фотошоп).

Запустите программу и создайте холст 597x500 пикселей. Для удобства, в нижнем левом углу разметьте направляющими линиями блок 382x345 пикселей под наше меню, а справа блок 200х500 пикселей под фотографию группы. Дабы не мучить вас подробностями, предлагаю скачать PSD заготовку под дизайн группы ВКотакте тут. Выглядит всё это следующим образом:

Теперь возьмём любую достаточно большую фоновую картинку. Для этого советую воспользоваться поиском картинок Google. Укажите в строке поиска «wallpaper» и уточняющее ключевое слово, например, «fire». На странице результата поиска рекомендую выбрать размер «Большие» и (если нужно) указать цвет. Подбирайте фон так, чтобы он подошёл под серые области в заготовке.

Найденную картинку проще всего скопировать в буфер обмена (память) компьютера. Для этого наведите курсор на картинку в браузере и нажмите правую кнопку мыши. В открывшемся меню выберите пункт «Копировать изображение».

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

Вернёмся в фотошоп и к нашей заготовке. Вставьте (Ctrl+V) скопированную картинку фона в заготовку. Появится новый слой. При необходимости, используйте Edit > Transform > Scale для изменения размера и перемещения фонового слоя.

Примечание. Для пропорционального изменения размера слоя используйте кнопку Shif. Подробней о трансформации слоёв в Photoshop вы можете прочесть, например, здесь.

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

Шаг 4. И так у нас есть картинка и меню на нём. В своей группе я использовал ссылки на страницы блога, но тут уж смотрите сами. Нам же нужно нарезать картинку на кусочки (срезы). Для удобства вы можете использовать всё те же направляющие линии. Об их создании можете прочесть, например, тут. Далее, используя инструмент «Slice Tool» и нарезаем нашу картинку по направляющим линиям. Об этом инструменте и его использовании достаточно неплохо написано здесь, учитесь и пользуйтесь.

После того как сделаны нужные срезы, жмём комбинацию Alt+Shift+Ctrl+S, т.е. «Save for Web…». В открывшемся окне выбираем формат (например, JPEG) и качество (например, Hight) картинок, а потом жмём кнопку «Save». Указав базовое имя файла, жмём кнопку «Сохранить». Будет создана папка images/ с картинками срезов.

Примечание. Просмотрите картинки срезов. Некоторые из них будут нам не нужны. Речь идёт о пустых полях и т.п. К слову, если вы используете мою основу то там нарезка уже есть под предложенную основу (см. example) и нужные нам файлы срезов будут иметь нужные названия: menu1.jpg, menu2.jpg... menu5.jpg и sidebar.jpg, остальное удаляем.

Шаг 5. Возвращаемся к группе ВКонтакте. Один из срезов (в моём случае sidebar.jpg) устанавливаем как фотографию группы. Для этого используйте ссылку «Загрузить фотографию» на главной странице группы. Здесь я отмечу два момента. Первое: после загрузки картинки нужно будет указать «видимую область» - выбирайте всю. И второе: надо будет выбрать квадратную область под маленькую фотографию (честно говоря, это одна из слабых сторон моего дизайна) - в дальнейшем ее можно будет легко перевыбрать.

Далее нас интересует блок «Свежие новости», который появился после подключения «Материалы». Наведите на него курсор мыши и кликните появившуюся ссылку «Редактировать».

На открывшейся странице мы увидим визуальный редактор wiki-разметки. Нам осталось лишь вставить картинки и проставить для них ссылки. Сделать это просто, но нужно признать, визуальный редактор достаточно корявый, потому будем действовать следующим образом.

1. Нажмите иконку «Добавить фотографию» на панели визуального редактора.

2. В открывшемся окне вашего альбома жмём «Загрузить фотографию» или выбираем одну из уже загруженных фотографий.

   

3. Кликните по картинке и в открывшемся окне «Изменение фотографии» укажите ссылку для неё. Указывать «текст» бесполезно, оно не сработает. Нажмите кнопку «Изменить».

   

4. Установите курсор в конец (Ctrl+End) в редакторе и вставьте следующую картинку.

5. После вставок всех картинок перейдите в режим wiki разметки, кликнув соответствующую кнопку на панели редактора. Там вы увидите, например, такой код:

   [[photo58447324_302649807|382x115px|http://www.wmascat.ru/p/about.html]][[photo58447324_302649808|382x40px|http://www.wmascat.ru/p/faq.html]][[photo58447324_302649809|382x38px|http://www.wmascat.ru/p/guest-post.html]][[photo58447324_302649811|382x42px|http://www.wmascat.ru/p/blogmap.html]][[photo58447324_302649812|382x110px|http://www.wmascat.ru/p/other.html]]

   Там могут быть лишние, пустые строки, теги и т.д. Для того чтобы всё сделать нормально, нам надо разобраться, как вставить картинку во ВКонтакте. Общий формат wiki-разметки картинки во ВКонтакте можно представить следующим образом:

   [­[photo***_***|Опции|Описание / Ссылка]]

   Всё начинается с двух квадратных скобок ([[). Потом идёт идентификатор фотографии (photo***_***). По сути, это имя файла, но лучше с ним не заморачиваться. Из-за этого я и рекомендую использовать визуальный редактор. Далее идёт опции, разделённые символом точки с запятой (;). В частности, можно указать размер фотографии в пикселях и склейку изображений nopadding (не будет отступов между картинок). Далее идёт описание и ссылка. С описанием у меня лично ничего не получилось, что-то там не так или я чего-то не понимаю. Так что рекомендую обойтись без него. Ну и заканчивается всё это двумя квадратными скобками (]]).

   По сути мне понадобилось добавить только параметр nopadding и у меня получилось следующее:

   [[photo58447324_302649807|382x115px;nopadding|http://www.wmascat.ru/p/about.html]][[photo58447324_302649808|382x40px;nopadding|http://www.wmascat.ru/p/faq.html]][[photo58447324_302649809|382x38px;nopadding|http://www.wmascat.ru/p/guest-post.html]][[photo58447324_302649811|382x42px;nopadding|http://www.wmascat.ru/p/blogmap.html]][[photo58447324_302649812|382x110px;nopadding|http://www.wmascat.ru/p/other.html]]

   Обращаю ваше внимание на то, что ссылки буду автоматически заменены на редирект: away.php?to= – прямых ссылок сделать ВКонтакте здесь не получится.

6. Не забудьте нажать кнопку «Сохранить».

Примечание. По умолчанию меню во ВКонтакте скрыто и появится оно только после нажатие ссылки. Для того же чтобы меню не было слишком высоко, просто увеличьте объём описания группы или добавьте соответствующих данных.

Понимаю, что мой пост получился очень обобщённым, но теперь вы знаете в каком направлении двигаться и что искать. В противном случае мне пришлось бы писать целое эпическое произведение, а это было бы излишне. На этом у меня всё. Спасибо за внимание. Удачи!