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

И так друзья, открываем наш любимый фотошоп, и создаем новый документ размером 600х750, думаю этого нам вполне хватит. Теперь нам необходимо в это документе вырезать два окна, первое окно это само меню, а второе окно, это непосредственно сама аватарка. Размеры меню (382х232) размеры аватарки (200х500) выглядит все примерно так:

Далее друзья, оформляем все по своему вкусу. Я конечно не гуру в фотошоп, и все что пришло мне в голову это найти просто интересную картинку, и разрезать её на 2 части, первая часть это меню, а вторая часть соответственно аватарка, вот что получилось:

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

Ого, уже совсем не плохо. Мне уже начинает нравится=). Друзья, теперь нам необходимо разрезать нашу область меню, для этого лучше всего использовать направляющие линии в фотошопе, что бы у вас получилось все ровно и точно. После обвода линиями у меня получилось вот что:

Теперь осталось все это дело разрезать ровно по линиям, вот собственно и сам результат после того как я разрезал все по направляющим линиям.

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

 

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

Затем нам необходимо добавить все фотографии которые мы разрезали, и желательно добавлять все картинки по порядку, что бы в конечном итоге все разрезанные картинки могли составлять полноценную картинку. Для того что бы добавить картинки соответственно нажмите на иконку фотоаппарата, и вперед. Не будем забывать что мы будем пользоваться wiki разметкой, соответственно при добавлении наших картинок, вы будете видеть wiki код, а не саму картинку. И так после того как вы добавили все картинки у вас должен появится примерно такой код:

[tip]

[[photo175208549_310246730|382x71px;nopadding|]]
[[photo175208549_310246731|382x46px;nopadding|]]
[[photo175208549_310246732|382x46px;nopadding|]]
[[photo175208549_310246734|382x70px;nopadding|]]

[/tip]

Давайте по быстрому разберем данный код. На самом деле тут все предельно ясно. Первое photo и цифры, это сгенерированное название альбома с картинками, и непосредственно название самой картинки. Ещё такой момент друзья, ;nopadding вы должны будете добавить сами, так как этот wiki позволяет убрать отступы между разрезанными картинка, и превращает их практически в цельную картинку. Окей по моему тут все ясно, и мы с вами тут без роблем разобрались, теперь остался наверное последний шаг, нам необходимо добавить ссылки к нашим меню, ведь куда то же меню все равно должно вести, это могут быть ссылки на какие нибудь обсуждения в вашей группе, либо вести на какой нибудь фото или видеоальбом особенно часто это используют в группах где есть сериалы или какие нибудь другие фильмы. Че то я сильно отошел от темы, и так давай прикрепим ссылки, в данном случае все ссылки у меня будут идти на мой блог. 

[tip]

[[photo175208549_310246730|382x71px;nopadding|http://www.wordpressu.ru ]]
[[photo175208549_310246731|382x46px;nopadding|http://wordpressu.ru/category/ ]]
[[photo175208549_310246732|382x46px;nopadding|http://wordpressu.ru/category/plaginyi ]]
[[photo175208549_310246734|382x70px;nopadding|http://wordpressu.ru/karta-sayta ]]

[/tip]

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

А вот ссылка на саму группу vk.com/wordpressu, если хотите по подробнее рассмотреть. Так вроде ничего нигде не забыл. Если будут вопросы прошу в комментарии. Так же друзья, буду благодарен если вы сделаете ретвиты, или репост в социальные сети.






Так же друзья, советую почитать и эти статьи!!!