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

Вот несколько примеров, чтобы все понимали, о чем речь.

Такие группы позволяют выделиться среди своих конкурентов и привлекать больше пользователей. Особенно, если еще и контент интересный:)
В рамках данной статьи мы поговорим о том, как это всё делается. Чтобы более подробно всё разобрать и вникнуть во все тонкости, возьмем конкретный пример. Будет небольшой мастер-класс по оформлению групп.

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

Объясняю на пальцах. Паблик — это что-то сравни блогу. Лента новостей. Иными словами, мы рассказываем своим подписчикам о каких-то вещах и они не смогут писать на стене нашего сообщества. Максимум — комментировать.

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

Глобально можно рассуждать так: если нам нужно создать сообщество для магазина, то я бы взял формат «паблик». Если же речь идет, например, о любителях рыбалки, то лучше взять «группу». Хотя, каждый волен поступать так, как считает нужным. Ведь в любой момент формат можно будет изменить. Однако, имейте в виду, что Вконтакте вводит ограничение на повторное изменение формата сообщества и после первого раза нужно будет ждать несколько дней до того момента, как вы сможете всё вернуть назад при необходимости. Поэтому тестировать функционал лучше до того, как группа начнет наполняться контентом.

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

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

Контента море, начинаем воплощать идею в жизнь!

Создание группы

Чтобы создать группу, переходим в «Мои группы» в правом меню аккаунта Вконтакте и нажимаем на синюю кнопку вверху «Создать сообщество».

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

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

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

Возрастные ограничения я ставлю в данном случае от 18, по аналогии с теми, что разработчики выставили игре. Хотя я практически не сомневаюсь, что играют и дети.

Всё. Группа создана!

Теперь можно начинать ее оформлять.

Оформление группы Вконтакте

Этот этап можно разбить на 2 составляющие: графическая и техническая. Для работы нам потребуется шаблон для создания аватарки группы и меню, а также немного воображения и базовые знания фотошопа (он же Adobe Photoshop).

Шаблон разметки

Что представляет из себя шаблон и что это вообще такое? Шаблон — это своего рода заготовка. В данном случае, в *.psd формате у нас размечены области для картинки под меню и аватарки группы.

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

Чтобы стало понятнее, вот пример.

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

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

Мы же тем временем приступаем непосредственно к графическому оформлению своей новой группы. Здесь я выбираю путь наименьшего сопротивления и для поиска частей дизайна отправляюсь в Google Картинки. Можно использовать и Яндекс. Кому что больше нравится.

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

На левом фрагменте (где надпись «Меню») можно также добавить несколько триггеров. В данном случае я решил делать без них. Всё. Дизайн аватарки готов. Жмем в фотошопе сочитание горячих клавиш Shift+Ctrl+Alt+S и сохраняем наши фрагменты в папку на жесткий диск.

Первый этап работы с графикой завершен. Возвращаемся в контакт.

Установка аватара и меню для группы

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

Добавляем картинку. Указываем поля и выбираем миниатюру. Здесь всё просто и проблем быть не должно.

Как мы видим, нужно знать id сообщества. Узнать его очень просто. Находим в своей группе меню (сразу под аватаркой) и открываем «Статистику сообщества». При этом в адресной строке браузера появится что-то похожее (цифры будут другие).

Эти цифры после «?gid=» и есть искомое id группы. Вставляем полученное значение в форму скрипта и пишем название для той страницы, которую хотим создать. В данном случае, я вбиваю «Меню».

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

Если всё сделано правильно, откроется вот такая страница.

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

Я у себя написал «Меню» и моя страница после сохранения стала выглядеть следующим образом.

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

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

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

Wiki-разметка меню группы Вконтакте

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

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

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

Разрезаем изображение на фрагменты и сохраняем их.

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

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

Если вы администратор или создатель группы (в нашем случае это так и есть), то в верху страницы будет ссылка «Редактировать». Щелкаем по ней.

Затем переходим в режим wiki-разметки (под кнопкой закрыть в верхнем правом углу странички нарисована такая рамочка с <> внутри). Когда нужный режим активирован, данная кнопка обведена серым.

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

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

и к уже вложенному параметру «noborder» дописываю второй параметр «nopadding». Первый отключает обводку фрагментов и границы у ячеек таблиц. Второй убирает отступы от края.

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

В моем случае код меню выглядит следующим образом.

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

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

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

После чего вставляем в вики-код менюшки ссылки на новые страницы в виде page-102302049_51013384, где первое число — это id группы, а второе — номер страницы. Хотя, это в общем-то и не важно. Ведь нам нужно всего лишь скопировать этот фрагмент URL и вставить в разметку.

В итоге код меню принимает следующий вид.

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

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

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

Шаг 1. Загружаем элементы меню на сайт vk.com

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

Примечание : если у вас нет блока фотографий на главной странице, то заходим в пункт Управление сообществом (мы уже делали это в первом и втором уроках) и там напротив пункта Фотографии выбираем Открытые или Ограниченные (более подробно об альбомах и о том, какие они бывают, мы расскажем в одном из следующих уроков).

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

Осталось собрать из этих частей меню группы.

Шаг 2. Собираем меню из элементов

Заходим на страницу редактирования меню (как это сделать, ). Проверяем, чтобы был включен режим редактирования Режим wiki-разметки . Сейчас у вас здесь (если вы выполняли задания второго урока) написаны пункты вашего меню, заключенные в квадратные скобки. Их мы пока не трогаем, а пишем ниже:

уникальный_номер - это номер фотографии, который присваивается ей при загрузке на сайт vk.com. Чтобы его посмотреть, откройте загруженную фотографию, кликнув по ней, и посмотрите в адресную строку браузера:

388px - это ширина вашего меню

Noborder - означает, что вашим элементам меню не добавляется обводка по контуру черным цветом

Nopadding - означает, что между картинками не будет расстояния (что нам и нужно, чтобы меню было цельным).

Пробел в конце обязателен, иначе ничего не получится.

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

Будьте внимательны и не перепутайте порядок расположения картинок.

Заходим на главную страницу группы, обновляем ее (нажимаем кнопку Обновить в браузере или просто F5 ). Любуемся полученным результатом!

Шаг 3. Прикрепляем к меню внутренние страницы

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

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

Сразу проверяем, какой у нас установлен доступ к странице (напомним, что доступ к просмотру страницы нужно установить - Все пользователи , а доступ к редактированию - Только редакторы и администраторы ), и наполняем ее информацией.

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

Форматировать текст при помощи этой панели не сложнее, чем работать в Word: вы просто выделяете текст при помощи мыши и нажимаете нужную вам кнопку.

Поскольку вы находитесь в режиме wiki-разметки, то при применении команд форматирования к вашему тексту будут добавляться определенные символы. Например, при выборе команды курсив, то слово, которое вы хотите выделить курсивом, будет окружено кавычками. Эти символы - и есть элементы языка wiki-разметки. Чтобы посмотреть, как будет выглядеть текст на странице, нажмите кнопку Предпросмотр :

И вот, что получится:

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

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

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

Привет, друзья!

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

Что входит в оформление?

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

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

Аватарка

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

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

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

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

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

В среднем на оформление обоих элементов может уйти сутки-двое. Это я беру с запасом. Можете посчитать сколько вы можете зарабатывать сами на этом. Так вот вернусь к обучению. Вот собственно сам курс о котором идет речь: http://www.1day1step.ru/design.php . Цены там вполне себе адекватные на обучение, а отбить можно после 2 клиентов.

Меню сообщества

Теперь давайте о меню сообщества. Строится меню на дизайне и так называемой вики-разметке. Этому тоже можно обучиться и научиться.

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

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

Брендированные посты

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

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

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

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

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

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

С чего начать работу над дизайном?

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

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

Выявите слабые и сильные стороны вашего предложения по сравнению с представленными на рынке. Выпишите 3-5 преимуществ, которыми обладает ваш бизнес. Это могут быть: бесплатная доставка, гарантия 5 лет, опытные специалисты, широкий ассортимент и т.д.

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

Люди не хотят покупать товар/услугу – они хотят получить решение их проблем.

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

Важные элементы в дизайне групп Вконтакте

С контентом определились, теперь пора узнать рекомендации по оформлению элементов группы. Разберем только самые необходимые: аватар и миниатюру, обложку, баннер для закрепленного поста и меню.

Аватар

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

Используйте только качественные изображения и забудьте про клипарты с бесплатных фотостоков. Поиск картинок для эффективного дизайна группы Вконтакте нужно производить на сайтах pinterest.com, freepik.com, flaticon.com или в крайнем случае google.ru. Но лучше подбирать изображения на платных фотостоках. Поисковые запросы вводите только на английском языке. Если испытываете трудности с английским, то смело используйте Гугл переводчик.

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

1 голос

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

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

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

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

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

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

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

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

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

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

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

Фотография должна быть большой и качественной, если вы ищете в поисковых системах, то обращайте внимание на обои для рабочего стола. Если же работаете для крутого сообщества, в особенности связанного с бизнесом, то рекомендую использовать сервис 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. Правое фото добавляем как аватар. Левое вы можете просто добавить как обычную запись, а затем закрепить ее.

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