Самостоятельное оформление группы вконтакте. Как сделать графическое меню вконтакте

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

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

НУ что же, поехали составлять оформлять меню для групп вконтакте?

Как оформить меню в группе вконтакте самостоятельно

Да, именно самостоятельно, ведь после прочтения данной статьи, вам не понадобятся услуги фрилансеров. Хотя это дело не дорогое, за 1500 вам смогут сделать сделать меню на workzila (подробный опыт о работе с этой биржей я писал ).

Так вот, что нам потребуется для оформления группы в вк:

1. Макет (графическое расположение элементов) — мы ведь должны знать где что должно находиться.

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

3. Базовые навыки работы с фотошопом. Нужно будет вырезать куски макета нужного размера.

Где брать макеты для меню?

Макеты для оформления меню вконтакте можно брать разными способами, например:

1. На фрилансе или томже Workzilla.

2. Можно создать самому, если у вас есть навыки работы с фотошопом. Если нет — рекомендую курсы Евгения Попова , вот один из них, как раз по Фотошопу — кликай .

3. Можно загуглить и скачать уже готовые. Поверьте, таких не мало.

Ну с другой стороны… Зачем гуглить? Просто подпишитесь на обновления моего сайта. И покликайте по кнопкам соц сетей ниже.

Я специально для вас подготовил архив, в котором более 100 различных вариантов дизайнов для оформления групп вконтакте! . В распакованном виде архив занимает около 2.5 гигабайт.

Главное условия — быть подписчиком и пройтись по соц кнопкам.!

Спасибо. Теперь вы можете скачать архив по этой ссылке .
Не забудьте пройтись по остальным соц кнопкам.

Размеры аватаров и меню, которые пригодятся для оформления групп вк

Для того чтобы правильно оформить группу или паблик — нужно знать о размерах картинок, которые нужно использовать. Вот прошу обратить внимание на эту картинку.

Как видите, в группе для аватарки нужен размер 200 в ширину и 500 пикселей в высоту. А для картинки основного меню — 395 пикселей ширины и 289 пикселей высоты.

Вот, в принципе и все что нужно. Есть макеты, есть понимание размеров.

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

Как самостоятельно оформить группу вконтакте, имея макеты на руках

Итак, у нас есть макеты дизайна группы. Сейчас нужно вырезать нужные части.

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

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

Сначала немного ликбеза.

Чем отличается меню группы от меню паблика?

Отличаются они тем, что меню группы — это уже и есть по сути набор кнопок. Но это меню всегда скрыто! Всегда! А меню паблика — всегда открыто и по сути — это закрепленный пост-ссылка, ведущий на страницу с разделами самого меню (кнопками).

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

А в паблике (в группе, кстати, тоже можно) — меню — всегда открыто.

Но эта картинка — это одна большая и красивая ссылка, которая ведет на более крупной отдельное меню. Вот:

Эта картинка-кнопка на меню создается через закрепленный пост. Это просто пост в группе, который мы закрепляем навсегда! Этот пост-ссылка ведет на отдельную страницу, которую мы нежно, предварительно создадим.

Как создать отдельную страницу для меню вконтакте

Чтобы создать страницу для будущего меню (навигации) — нужно отправить запрос в вк следующий:

где XXX – номер группы, YYY – название страницы (здесь все знаки вопросов и тире обязательны).

Причем название рекомендую делать нормальным, привлекательным и осмысленным, потому что оно будет светиться и люди будут складывать о вас и вашей группе определенное впечатление по этому названию. Например «Навигация» или «Меню группы» — это нормальные названия, но вроде банальные. Используйте свою фантазию.

Я ввёл следующий запрос

И у меня открылась сразу созданная страница с возможностью её редактирования.

Вот здесь-то и нужно будет вставлять ваш код самого меню с помощью wiki-разметки. Но об этом чуть позже.

Кстати, расскажу секрет, если у вас группа (а не паблик) — стандартное меню, которое уже есть по умолчанию — оно уже само по себе — страница. Так что можно его и использовать, если будут проблемы с созданием дополнительных страниц.

Как делать закрепленный пост в группе или паблике

Да, и в любом типе сообщества закрепленный пост создается одинаково! Делается всё очень просто.

И в появившемся окне нажимаем кнопку «Закрепить» — все просто!

Многие группы, кстати, используют закрепленные посты как объявления. Если время актуальности этого объявления прошло — вы просто нажимаете опять на дату публикации и на кнопку «Открепить».

На самом деле все сейчас используют именно этот способ меню.

Угадайте почему?

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

Нарезка макета для оформления группы или паблика

Так, для аватарки всё понятно, мы тут ничего не нарезаем. Мы создали картинку нужного размера и залили её в ВК. Всё. С аватаркой для группы мы закончили!

Теперь меню.

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

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

Нажимаем на меню, видим картинку.

Нам нужно выделить «кликабельные» зоны.

т.е. выделить сами кнопки. Давайте я выделю эти зоны для вас красными линиями.

У нас получается сколько? 5 картинок. И не каждая из картинок будет кнопкой!! Как видим верхняя большая картинка — это не кнопка, а сама по себе…

Так, мы по этим линиям вырезали картинки. Теперь нужно из «залить» в ВК.

Если вы создавали для меню отдельную страницу, то нажимайте на кнопку «Наполнить содержимым» на только что созданной странице.

Если вы не создавали этой страницы, а использовали уже готовую страницу для меню — то перед вами сразу редактор страницы и вы сразу можете заливать фотографии:

Залили и у вас должно появится следующее:

Возможно у вас появится просто код, как на картинке ниже. Если нет — нажмите кнопку «Исходный код» , эту кнопку я выделил на верхней картинке. И увидите следующее:

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

И, чтобы между картинками не было отступов — вписать тег «nopadding», выглядеть это должно вот так:

вот это вот page-58190479_45419120 — это адрес самой страницы вконтакте, вы этот идентификатор найдете в адресной строке вашего браузера.

Вот и всё :) Правда не сложно?

Вот что получилось в коде у меня в итоге. Если у вас нечто подобное — значит всё в порядке.

Если у вас с каким-то из пунктов возникли проблемы — прошу, обращайтесь. Буду рад помочь.

Пользуясь случаем, хочу напомнить вам о том, что есть замечательные сервисы для любой раскрутки и накрутки, это:

prospero | sociate | socialtools

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

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

Как оформить группу в контакте

Создание красивого баннера

Первое, на что обращает внимание пользователь при просмотре группы Вконтакте – это аватара и меню. Ниже мы разберемся в том, как в программе 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-разметке более подробную информацию, посетите официальную группу в социальной сети Вконтакте

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

Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.

Факторы оставляющие гостя:

аватарка;
описание;
название;
красивое и практичное меню;
красочность;
контент.

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

Каким должно быть меню

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

Три основные цели групп:

продажи;
увеличение трафика;
увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Здесь должны быть самые важные кнопки:

каталог;
стоимость;
доставка;
акционные предложения;
отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Приблизительный вариант набора кнопок:

интересные статьи;
полезная информация;
подписаться;
отзывы.

Для повышения активности участников следует стимулировать их акциями, опросами и интересным и необычным контентом.

Предлагаем такие кнопки:

подписаться на новости;
задать интересный тематический вопрос;
акции;
опросник;
голосование.

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

Создаем по этапам

Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит .

Весь процесс условно делиться на 2 этапа:

работа с фотошопом;
техническое добавление.

видео: меню для паблика

Работаем с фотошопом

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

Алгоритм действий:

установите и запустите программу «Фотошоп»;
в пункте «Файл» выберете «Создать»;
в появившемся окне задайте:

Делается это с помощью инструмента «Прямоугольная область»:

Работа с графикой:

Приблизительно должно получиться вот так:

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

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

Для начала следует сделать разметку:

Создаем фрагменты:

Сохранение изображений:

Как очистить компьютер от ненужных программ? Инструкция тут.

Техническая часть

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

Важно! Заливка меню отличается от обычно загрузки фото или картинок.

Все по порядку:

Теперь самое важное, собственно для чего все это и делалось. Добавить функциональности меню. Отдельной картинке необходимо присвоить «свою» ссылку.

найдите необходимую запись;
кликните по ней левой кнопкой мыши;
скопируйте URL в адресной строке.

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

Сохраните изменения соответствующей кнопкой внизу окна.

Внимание! Изменения могут не сразу отобразиться. Рекомендуется выйти на свой основной профиль, а затем снова зайти в группу.

Как создать меню в группе Вконтакте вики разметка

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

Данный инструмент позволяет создавать:

эффекты;
необычные меню;
таблички;
элементы навигации;
форматировать текст.

Словом, данная разметка позволяет создать мини сайт ВКонтакте. Это очень удобно, особенно для продаж и набора подписчиков.

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

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

Видео: меню с поиском по рубрикам

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Вот так: []

Основные теги представлены в таблице ниже:

Работа с картинками

[] .

Где options заменяется на:

noborder - снятие рамки вокруг изображения;
nopadding - снятие пробелов между изображением;
plain - вставка ссылки на картинку. Оформляется в виде текста, без графики;
nolink - снятие ссылки на картинку;
box - открытие изображения в окне;
NNNxYYYpx или NNNpx - задает размер фото в пикселях.

Создание таблицы

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

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

Факторы оставляющие гостя:

аватарка;
описание;
название;
красивое и практичное меню;
красочность;
контент.

Каким должно быть меню

Три основные цели групп:

продажи;
увеличение трафика;
увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Здесь должны быть самые важные кнопки:

каталог;
стоимость;
доставка;
акционные предложения;
отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Приблизительный вариант набора кнопок:

видео: меню для паблика

Работаем с фотошопом

Алгоритм действий:

Делается это с помощью инструмента «Прямоугольная область»:

Работа с графикой:

Приблизительно должно получиться вот так:

Для начала следует сделать разметку:

Создаем фрагменты:

Сохранение изображений:

Техническая часть

Важно! Заливка меню отличается от обычно загрузки фото или картинок.

Все по порядку:

найдите необходимую запись;
кликните по ней левой кнопкой мыши;
скопируйте URL в адресной строке.

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

Сохраните изменения соответствующей кнопкой внизу окна.

Внимание! Изменения могут не сразу отобразиться. Рекомендуется выйти на свой основной профиль, а затем снова зайти в группу.

Как создать меню в группе Вконтакте вики разметка

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

Данный инструмент позволяет создавать:

эффекты;
необычные меню;
таблички;
элементы навигации;
форматировать текст.

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

Видео: меню с поиском по рубрикам

Нюансы создания

Вот так: []

Основные теги представлены в таблице ниже:

Фото: теги используемые для разметки

Работа с картинками

Где options заменяется на:

noborder - снятие рамки вокруг изображения;
nopadding - снятие пробелов между изображением;
plain - вставка ссылки на картинку. Оформляется в виде текста, без графики;
nolink - снятие ссылки на картинку;
box - открытие изображения в окне;
NNNxYYYpx или NNNpx - задает размер фото в пикселях.

Создание таблицы

{| символ начала таблицы, без него таблицы быть не может. Используется всегда;
|+ отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
| обозначает начало новой строки и ячейки;
| символ, делающий ячейку прозрачной;
! делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
|} означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.

При заполнении таблицы, содержание каждой ячейки необходимо ставить после знака |, а при разделении ячеек, нужно продублировать типы строки вот так: || или!!.

Особенности разметки

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

С целью избегания основных ошибок следует ознакомиться с основными из них:

необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
ширина картинки не должна превышать 610px;
на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
список внутри таблицы следует создавать с помощью тега
;
в одной строке разметки должно быть не больше 8 элементов списка.

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

Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.

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

1 голос

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

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

К концу этой статьи у вас получится эффектная и единая картинка.

Метод для ленивых

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

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

Для тех, кто хочет научиться

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

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

Вам понадобится…

Фотошоп.
Базовая картинка.

Фотография должна быть большой и качественной, если вы ищете в поисковых системах, то обращайте внимание на обои для рабочего стола. Если же работаете для крутого сообщества, в особенности связанного с бизнесом, то рекомендую использовать сервис http://ru.depositphotos.com . Там вы найдете именно рекламные изображения.

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

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

Затасканные фотографии никто не любит. Если они используются сплошь и рядом, то шанс получить клиентов уменьшается. Про качество, грамотно выставленный свет и т.д. я даже говорить не буду. Надеюсь, вы это и так понимаете. Такие варианты, как на фото ниже, уже лет 5 не катят.

Из личного опыта… над одним из проектов я работал с очень крутым менеджером по рекламе. Каждую картинку мы разбирали по косточкам. Объект должен находиться на определенном расстоянии от центра, под специфическим углом, желательно еще в правильной оптимистичной гамме.

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

Делаем шаблон будущей красивой группы

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

Так-с, открываем контакт. Если вы поищите стандартные размеры постов Вконтакте, то увидите 200х500 и 700х500. Однако, если воспользоваться линейкой, то можно убедиться, что миниатюры не соответствуют этим показателям. Сервис сжимает их при загрузке.

С картинкой на аву все так, она действительно 200х500.

С постом все иначе.

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

Мой вариант подходит только для закрепленных постов. Самый простой и популярный метод оформления.

Откройте свою или любую другую группу, где сверху закреплен пост с фотографией. Как на моем рисунке. Можете забрать и эту фотографию, нажав на нее правой клавишей мыши и «Сохранить как…». Правда я не уверен что у вас в результате все получится верно. Есть время на эксперимент? Поделитесь результатами в комментариях.

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

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

Нажмите на Ctrl+V, тем самым вы вставите свой скрин в рабочее поле программы. Теперь берете инструмент «Прямоугольное выделение» и работаете с левым блоком.

Ведите прямо по краю изображения. У вас не должно получиться на рисунке внизу. Это неправильно.

Двигайтесь строго по краю.

Схватитесь курсором за левый верхний угол прямоугольника и ведите в правый нижний. Чтобы не морочить голову с лупой используйте увеличение при помощи кнопки Alt и колесика мыши.

Теперь нажмите на Ctrl+J. Тем самым вы перенесете выделенный фрагмент на новый слой, он появится над фоном.

То же самое нужно проделать и с аватаркой. Выделяем и переносим на новый слой (Ctrl+J)

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

Затем от фона можно будет избавиться. Нажмите на замок рядом с этим слоем, это позволит производить над ним манипуляции.

Перетаскиваем слой в корзину, как обычный файл с рабочего стола.

С этим закончили. Шаблон создан.

Уникальное изображение для группы

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

Перетаскиваем фото, которое будем использовать в качестве основного.

Он отражается неправильно.

Если у вас произошла такая же ерунда, просто сделайте его самым верхним. Затем при нажатой кнопке Alt кликните по слою 1 и слою 2. Чтобы оба они подсветились.

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

Если вы нажмете на Ctrl, а затем на эскиз только что созданного слоя. По краям объектов с нового слоя забегают муравьи, которые подскажут как выставлять нижнюю картинку. Убрать их можно нажав Ctrl+D. То, что сейчас находится во внутренней части, впоследствии будет вставлено в вк.

Если вы начнете перемещать фотографию, то вместе с ней «поедут» и бегающие муравьи. Могу посоветовать вам выставить направляющие. Не умеете работать с ними? Посмотрите вот это видео.

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

Но я люблю второй. Он быстрее. Нажмите на Alt и наведите курсор между двумя слоями, он визуально изменится. Затем кликните левой мышкой.

В результате получилось вот такое фото.

Каждую часть можно вырезать при помощи инструмента «Рамка», а затем сохранить в jpeg. Правое фото добавляем как аватар. Левое вы можете просто добавить как обычную запись, а затем закрепить ее.

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