Создание аватарки для группы вконтакте – Создание аватара и меню для группы ВКонтакте онлайн.

Определение

Что же такое – аватар? Это уникальная картинка, размещающаяся на публичной странице. Администраторы сообщества выбирают изображение самостоятельно – оно используется для уникализации сообщества.

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

• Небольшая вертикальная картинка – это аватарка;
• Можно сделать горизонтальную аватарку в группе ВКонтакте – она называется обложкой.

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

Требования

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

• Размер составляет 200х500 пикселей;
• Пропорции – 1 к 2,5;
• Миниатюра имеет формат 200х200 пикселей;
• Пропорции миниатюры – 1:1.

Обложка подбирается согласно следующим правилам:

• Разрешение равно 1590х400 пикселей;
• Размер не меньше 795 точек в ширину и 200 точек в высоту.

Правило для форматов общее – выбирайте только GIF, PNG, JPG.

Как сделать аватарку самому?

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

Первый способ – использование специальных сервисов, в изобилии представленных в интернете. Большинство конструкторов можно использовать бесплатно, например Canva. Как выглядит процесс создания изображения?

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

Есть и второй способ – скачайте на компьютер Фотошоп! Краткий гайд по Photoshop можно найти ниже, даже начальных знаний хватит для создания красивого лого.

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

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

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

Как поставить и изменить?

Поставить изображение на публичную страницу сможет даже новичок – ничего сложного нет:

• Наведите курсор на область изображения в боковом меню;
• Снизу появится возможность выбор опций;
• Выберите пункт «Загрузить»;

• Кликните на кнопку «Выбрать файл»;

• Найдите на устройстве интересующую вас картинку;
• Сдвиньте рамки – это область, которая будет отображаться на странице сообщества;
• Жмите на иконку «Сохранить и продолжить»;

• Выберите квадратную область миниатюры, сдвигая рамки;
• Щелкните по кнопке «Сохранить изменения».

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

Мы поговорили о небольшом размере оформления. Хотите установить обложку? Тогда читайте, как поставить горизонтальную аватарку в группе ВК:

• Откройте страницу;
• Кликните на кнопку «Настройки» в навигационном меню;

• Перейдите к блоку «Основная информация»;
• Выберите раздел «Обложка сообщества»;

• Кликните на кнопку «Загрузить»;

• Перетащите изображение или выберите лого, загруженное ранее на компьютер;
• С помощью рамки выделите область, которая будет отображаться на страничке;
• Щелкните по иконке «Сохранить и продолжить»;

• Вы увидите окошко с подтверждением.

Ура! Вы смогли сделать красивую аватарку для группы ВК сверху или сбоку – на ваш выбор. Что делать, если украсить паблик самостоятельно не получается? Ловите краткий обзор самых частых ошибок, которые возникают у начинающих пользователей.

Почему не получается загрузить аватарку?

Не получилось в группе ВКонтакте сделать большую аватарку или маленькое изображение? Рекомендуем обратить внимание на следующие параметры:

• Вы выбрали верный формат;
• Размер картинки соответствует требованиям;
• Разрешение не выбивается за установленные рамки.

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

Похожие статьи:

faqkontakt.ru

сколько стоит оформление аватарки Вконтакте у фрилансеров

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

Какой должна быть аватарка?

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

• Выполнять роль обложки
• Представлять группу
• Создавать первое впечатление о паблике

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

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

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

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

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

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

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

freelance.youdo.com

Как правильно оформить группу ВКонтакте — основные элементы и полезные фишки | DesigNonstop

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

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

1. Горизонтальная обложка (шапка)
Начнем, пожалуй, с горизонтальной обложки или шапки. Разработчики ВКонтакта уверяют нас, что обложка за счет своего размера дает большую маневренность по предоставлению и визуализации информации. Обычно, помимо красивой картинки в шапке располагается логотип, сопроводительная информация, контакты, призыв вступить в группу, адрес сайта. У меня есть подозрение, что когда-нибудь обложки станут единственно возможным вариантом оформления группы, поэтому рекомендовала бы сразу переходить на них, дабы избежать форсмажорных редизайнов впоследствии.

  
Больше примеров обложек

Как загрузить обложку
Чтобы загрузить обложку, нужно перейти в Управление сообществом >> блок Основная информация >> Обложка сообщества >> Загрузить. Рекомендуемый размер обложки 1590×400 пикселей. В шапке не может быть никаких рабочих кнопок, на которые можно нажать — по сути это картинка и все. На сегодняшний день обложка видна на мобильных устройствах, и вроде бы уже видна в приложениях и клиентах.

Wiki вкладка Свежие новости
В верхнем блоке под шапкой теперь могут находиться три вкладки: закреплённая запись, информация о сообществе и wiki-меню (только в группах, на публичных страницах такой вкладки нет). Акцент по-прежнему делается на закреплённую запись, однако даже при её присутствии пользователь теперь всегда будет иметь доступ к информации о сообществе, переключаясь по вкладкам. Чтобы появилась вкладка wiki-меню (она изначально называется Свежие новости), нужно перейти в Управление сообществом » Разделы » Материалы » Ограниченные (или Открытые) » Сохранить.

2. Вертикальный аватар
Теперь обратим внимание на старый добрый аватар для группы размером 200х500 пикселей. Пока он также является способом оформления группы. Обычно на аватаре располагается следующая информация: логотип, сопроводительный текст или слоган, контакты, призыв вступить в группу. В мобильных устройствах весь аватар не виден, видна только его часть — миниатюра. Для оформления группы можно использовать либо горизонтальную шапку (обложку), либо вертикальный баннер. При наличии шапки вертикальный аватар не виден. На аватаре не может быть никаких рабочих кнопок, на которые можно нажать — по сути это картинка и все.

 
 
Больше примеров аватаров

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

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

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

4.1 Баннер информационный
Распространенный вид баннера, содержащий общую информацию о фирме, группе, услуге или мероприятии с развернутым перечнем преимуществ и прочими сопроводительными материалами. Часто используется как закрепленная запись в группе. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с аватаром. Если нет связки с аватаром, то можно использовать любые размеры. Я, например, использую размер 600х350 пикселей. Также удобен и набирает популярность сейчас формат квадрата 510х510 пикселей — при таком размере баннер занимает максимально большую площадь в новостной ленте.

4.2 Баннер для входа во внутреннее меню
Если в баннер из предыдущего пункта добавить броскую надпись «Открыть меню», то мы получим баннер, основная задача которого служить точкой входа во внутреннее меню. Иногда делают обманку в виде нескольких кнопок на баннер, но это иллюзия, при нажатии пользователь все равно попадает на внутреннюю станицу, а там уже каждая кнопка имеет свою собственную ссылку. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с автаром. Если вход в меню не завязан с аватаром, то можно делать любые размеры баннера, хоть узкую кнопку с надписью «Открыть меню». Главное, чтобы ширина баннера была не меньше 510 пикселей.

4.3 Карточка для репоста, акции
В последнее время особую актуальность приобрели карточки для репостов или акций. Ее задача — призыв к конкретному действию. В основном это «Вступи в группу, сделай репост или поставь лайк и выиграй приз». Такие баннеры используются в рамках рекламных компаний или акций как в собственных группах, так и для продвижения в других группах. Я обычно использую размеры 600х350 пикселей.

 
 
Больше примеров карточек для репостов

4.4 Баннер с gif анимацией
После того, как в начале года разработчики ВК сделали больший размер для gif картинок, гифки сразу встали в один ряд с информационными баннерами. Например, на гиф баннере можно дать изображения нескольких сменяющихся товаров или текстов — движение сразу привлекает внимание. А уж когда в июне была добавлена функция автозапуска gif анимаций в новостной ленте, то гифки стали объектом пристального внимания рекламщиков и маркетологов.

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

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

 
 
Больше примеров аватар плюс закрепленный баннер

6. Внутреннее навигационное меню
Меню в виде активных ссылок располагается на внутренней странице ВКонтакта и пишется с помощью команд wiki разметки. О том, как создать саму внутреннюю страницу расписано в уроке «Как сделать внутреннюю страницу для меню группы В Контакте». С помощью меню пользователь осуществляет навигацию по группе. Ниже вы рассмотрим виды внутреннего меню, а пока остановимся на нескольких важных пунктах.

Точки входа во внутренне меню
Хочу отметить один тонкий момент, которому частенько не придают значения. Иногда клиенты заказывают у меня внутреннее меню, но при этом абсолютно не представляют, как пользователь попадет в это самое внутреннее меню. А попасть в него можно двумя способами: либо через закрепленный баннер (см. пункт 4.2), либо через текстовую ссылку в верхней вкладке под строкой статуса (см. рисунок ниже). Иногда еще текстовую ссылку располагают в блоке «Ссылки» в правом столбце интерфейса.

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

Ссылки на альбомы с фотографиями и видео открываются в новом окне. Ссылки на топики с обсуждениями (например Отзывы), на диалоговое окошко для написания сообщений, на приложения (см. пункт 10), на выборку по хештегам (см. пункт 12) открываются в том же окне и в данном случае попасть обратно в меню можно только через главную страницу сайта, либо через кнопку «Назад» в браузере. Это, пожалуй, самый неудобный момент при таких ссылках.

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

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

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

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

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

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

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

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

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

 
 
Больше примеров внутреннего меню

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

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

8.1 Каталог картинка плюс текст
Представляет собой ряды миниатюр с текстом под ним.

8.2 Каталог графический
Представляет собой ряды красивых графических карточек или иконок.

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

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

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

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

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

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

10.3 Пожертвования
Принимайте пожертвования от ваших подписчиков. Приложение позволяет интегрировать форму приема платежей от Яндекс.Денег, PayPal, Cloudpayments и информацию о вашем кошельке Qiwi в сообщество. Добавить приложение можно через Управление сообществом >> вкладка Приложения >> Пожертвования. Как это реализовано на практике, можно посмотреть у меня в группе.

11. Промо материалы для рекламы ВКонтакте
В связи с ростом всеобщей коммерциализации соцсетей очень часто у меня стали заказывать пакеты промо материалов для рекламы ВКонтакте. Реклама Вконтакте может быть двух видов — таргетинг и реклама в сообществах. Для рекламы в сообществах подходит карточка для репоста, описанная в пунктах 4.1 и 4.3.

А для таргетинга существуют специальные форматы рекламных объявлений. Подробнее об этом можно почитать в статье Форматы рекламных объявлений. Вкратце для таргетинга необходимы следующие форматы — простое изображение 145х85px, большое изображение 145х165px, для продвижения сообществ 145х145px, специальный формат 256х256px.

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

Также существуют локальные хешкеги (только для латиницы), осуществляющие поисковую выборку в пределах конкретного сообщества. Для этого после хештега добавляется символ @ и буквенный домен сообщества (не id). Например, хештег в моей группе #books@designnonstop — по этой ссылке будет выдаваться подборка постов про книги.

www.designonstop.com

Как создать идеальную аватарку для сообщества В Контакте. Часть 1. Высота — freesmm.ru

Читайте все Секреты в Контакте

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

В самом начале я думал что это будет простая статейка, которая быстренько опишет то, как должна выглядеть идеальная аватарка для группу В контакте. И я начал писать… Написав порядка 2 000 символов я понял, что все то, что я написал никуда не годится, потому что если бы я был на вашем месте, то я бы ничего не понял 🙂

Поэтому я решил разбить статью на части:

• Часть 1: Высота идеальной аватарки для группы В Контакте
• Часть 2: Миникопия и что должно быть на аватарке В Контакте
• Часть 25: мало ли:)

В первой части будет описан «всего лишь» процесс нахождения высоты для аватарки группы vk.com

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

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

Делать аватарку по принципу «и так сойдет», или «авось прокатит», или «эта фоточка заебись» – НЕЛЬЗЯ. 

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

Максимальные значения для ширины и высоты аватарки ВК — 200*700 (200 в ширину и 700 по высоте)

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

Часть 1: Высота

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

Монитор (разрешение)

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

Какое же разрешение стоит выбрать?

В феврале 2012 года случилось эпичное событие: разрешение 1024*768 перестало быть самым популярным. С первого места его сместило разрешение 1366*768, которое стоит на большинстве ноутбуков (все пересели с настольных ПК на ноутбуки).

Значит, по высоте мы ограничены в 768 пикселей (на картинке ошибка: перепутал высоту и ширину)

Самая популярная операционная сеть — Win 7, как ни крути. Внизу у нас есть плашка панели задач, которая тоже сжирает место по высоте.

Качество фотографии не ахти. Хотелось порисовать.

И так, минимум панель задач в Вннде 7 сжирает 40 пикселей. Итого у нас по высоте уже 768-40=728. Идем дальше. (на картинке ошибка: перепутал высоту и ширину)

Самый популярный браузер в мире — Google Chrome. Он тоже отнимает драгоценное пространство по высоте

Милый хром своими вкладками сжирает 30 пикселей, а адресной строкой 31 (а может и 30. мерил на глаз). Итого 60-61 пиксель обязательно сожрет браузер и никуда от этого не деться. Про другие браузеры чуть позже.

Кроме вкладок и адресной строки, которые никуда не денешь, у многих пользователей могут быть открыты закладки. Я, например, их постоянно держу развернутыми, так как это экономит время (быстрый доступ к часто используемым сайтам). Закладки отнимают еще 30 пикселей. Итого Google Chrome по высоте может отнимать от 61 до 91 пикселя.

Значит получаем 728 — 61(91) = 667(637) , а это уже меньше максимально допустимой высоты аватарки в 700 пикселей.

Дальше вступают ограничения самого Контакта.

40 пикселей кушает верхняя навигационная панель ВК. Еще 29 пикселей прямоугольник(«тип»), на которой написан тип сообщества и 10 пикселей отступ от «типа» до заветной аватарки.

Итого 40+29+10=79 пикселей на навигацию ВК.

667(637) — 79 = 588 (558 — с панелью закладок)

558 пикселей — максимальная высота аватарки в ВК, которую будет полностью видно на первом экране ноутбука с разрешением 1366*768 пикселей. Но это еще не все!

Если вы хотите, чтобы люди могли подписаться на ваше сообщество легко и без лишних действий, то вам надо учитывать следующие моменты:

Кнопка «подписаться» должна быть на первом экране

Любой специалист по юзабилити скажет вам, что важные элементы должны быть на первом экране. Кнопка «подписаться» таковым элементом является. А это значит, что она уменьшит высоту нашей «идеальной» аватарки.

Давайте разберемся в размерах:

• блок «подписатьсявступить в группу» съедает 77 пикселей
• если это публичная страница и её упоминали в своих записях пользователи, то появляется блок «упоминания» публичной страницы. Вместе со всеми отступами он сожрет 43 пикселя

Итого у нас получается:

• 588 (558)  — 77 = 511(481 — с панелью закладок) — для группы
• 588 (558)  — (77+43) = 468(438 — с панелью закладок)

Давайте допустим, что панель закладок открыта у всех. Значит максимальная высота аватарки, которая будет на первом экране с кнопкой подписаться для группы равна 481px, а для публичной страницы — 438px

Другие браузеры

Я пользуюсь Хромом, потому что он экономит пространство экрана под то, что важно — веб-страницу. Все элементы браузера скомпонованы так, что по высоте он максимум отнимает всего 61-91 пиксель. Тот же Firefox без всякой установленной фигни сожрет больше. Тут еще конечно стоит вспомнить про яндекс.бар и другие панели, устанавливаемые в браузерах типа лисы и осла, наверное и в опере что-то есть, но я ей пользовался всего пару раз.

Так вот, панели. Они тоже отнимают какое-то пространство по высоте, и я бы накидывал к полученным выше значениям высоты аватарки для группы и публичной странице по 50px … то есть отнимал!

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

• для группы — 431 пиксель +50*
• для публичной страницы — 388 пикселей +50*

*50 — это запас для других браузеров. Можно не использовать.

P.s. Если вы хотите посмотреть процесс «рисования» и нахождения высоты «идеальной» аватарки, то это можно сделать здесь, либо в на публичной странице в альбоме http://vk.com/album-38369814_162302457

P.p.s. В статье написано полное ИМХО. Не согласны? Прошу в комментарии обосновать это. Я свою точку зрения обосновал так, что не подкопаешься 🙂

Интересное видео: интересный кейс продвижения Nivea

freesmm.ru

Как сделать аватарку для группы «ВКонтакте»? Три самых распространенных способа

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

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

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

Какой должна быть аватарка группы?

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

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

Ищем готовую картинку

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

Делаем аватарку с помощью онлайн-редакторов

Второй вариант – редактирование готовых изображений (или создание новых) с помощью онлайн-редакторов. К счастью, сейчас существует много сервисов, позволяющих разработать свой аватар как «с нуля», так и с помощью одного из готовых шаблонов. Вам достаточно определиться с тем, что вы хотели бы видеть на изображении для авы, а дальше о том, как сделать аватарку для группы «ВКонтакте» без «Фотошопа», можете даже не переживать – ресурс сделает все в автоматическом режиме. Таких готовых решений сейчас в Сети достаточно много. Они бесплатны и многофункциональны. Единственный минус работы с такими сайтами – это водяной знак — адрес ресурса, который сделал вам аватар, размещенный где-нибудь в нижнем углу.

Делаем аватарку в «Фотошопе»

Если не знаете, как сделать аватарку для группы «ВКонтакте» без ссылки на чужой сайт, — вам придется воспользоваться наиболее популярной программой для редактирования изображений. Это «Фотошоп». Работа с ним достаточно проста, главное – понять азы, разобраться с элементарными понятиями и категориями, с которыми функционирует программа. Если у вас уже есть хотя бы минимальный опыт взаимодействия с ней – создать аватар для вас будет несложно. Если же вы не знаете вообще, как сделать аватарку для группы «ВКонтакте» в «Фотошопе», — у вас останется два варианта. Первый – это обратиться за помощью к человеку, который умеет работать в программе, второй – заняться изучением особенностей редактора самостоятельно: найти уроки, примеры работ, попрактиковаться самому.

Создаем аватарку

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

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

fb.ru