Динамические обложки Вконтакте

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

Динамические обложки Вконтакте

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

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

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

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

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

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

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

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

Для начала отметим, какие есть методы создания:

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

Способ 1: Создание динамической обложки с помощью конструктора Dynamic Cover

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

Также стоит отметить, что существует два тарифа – бесплатный и платный. Как вы уже догадались, бесплатный – ограниченный режим. Он позволяет создать три шаблона и поддерживать только одну группу. Размер обложки можно задать только 795 x 200. Также ограничивается число виджетов для добавления.

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

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

Итак, проиллюстрируем создание простой динамической обложки.

1. В первую очередь на начальной странице выберите «Попробовать бесплатно».
2. Если вы ранее не пользовались сервисом, то откроется авторизация через сайт Вконтакте. Подтвердите авторизацию.
3. Для дальнейших действий потребуется группа или сообщества, где вы являетесь администратором. Чтобы отобразить список таких групп, нажмите «Обновить список».
4. Далее отобразиться список сообществ, для которых возможно создание динамических обложек. Выбираем то, для которого будет создаваться фон.
5. В первую очередь необходимо подключить группу к сервису. Нажмите «Подключить».
6. Отобразится информация о тарифном плане. В качестве пробного периода будет доступен полный функционал на 3 дня, после чего произойдет переход на бесплатную версию. Стоит отметить, что созданные иконки не доступные в бесплатном тарифе, не будут активны.
7. После нажатия кнопки «Хорошо», разрешите доступ к сообществу.
8. Подключение успешно произошло.
9. Далее в левой панели выберите «Создать новую обложку».
10. Отобразится пустой шаблон. Нажмите по аналогичному названию.
11. Введите название для обложки. Далее соответственно кликнете «Создать».
12. Откроется чистый лист, с которого начинается любое создание обложки.

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

Проиллюстрируем первый вариант.

1. Как вы помните дизайн на экранах смартфона и на ПК порой отличается. Чтобы создать единую обложку для любых экранов активируйте сетку для мобильных телефонов.
2. Для создания oбложки мы будем использовать картинку с размытым фоном без сюжетной линии. Это необходимо для того, чтобы не потерять смысл картинки при добавлении на облoжку. Так как она имеет определенный размер, который будет изменяться в зависимости от просмотра – на ПК и на телефоне. Ссылка на скачивание.
3. Из левой панели выберите пункт «Загрузка фонов».
4. Отобразится список доступных фонов. Так как ранее мы этим сервисом не пользовались, необходимо загрузить фон. Стоит отметить, что можно добавлять несколько картинок, но в общей сумме размер не должен превышать 30 МБ. Щелкните по иконке «Загрузить фон».
5. Откроется окно добавления. Выберите нужное изoбражение.
6. После чего будет добавлен основной фон для обложки. Здесь вы можете отрегулировать масштаб фона только в заданных пропорциях. Так же вы можете видеть, что сетка для мобильных телефонов показывает область возле краев, которая не будет доступна для просмотра на смартфонах.
7. Первый виджет, который мы добавим, будет отвечать за название сообщества. Нажмите по иконке «Текст» из левой панели.
8. На фоне отобразится область с текстом. Зажмите данную область левой кнопкой мыши. Перетащите ее к центру.
9. Кликнете по надписи левой кнопкой мыши для отображения доступных настроек.Здесь с помощью параметров X и Y можно задать расположение иконки. Y отвечает за вертикальное расположение, а X – горизонтальное. Ширина по умолчанию стоит auto.
10. Рядом перейдите во вкладку «Настройка текста». Отрегулируйте размер шрифта и межстрочного интервала. Затем задайте цвет текста и шрифт. Надпись можно сделать жирной, курсивной и прочее. Также возможно указать тип текста: статический или текст по адресу.
11. Следующий виджет, который мы рассмотрим, будет «Дата и время». Щелкните по нему в левой панели.
12. Аналогично тексту разместите его на подходящую часть обложки и кликните для настройки. Во вкладке отображение задается расположение надписи.
13. Вкладка виджeт отвечает за отображение даты и настройки времени. Формат даты по умолчанию D, d F Y H:i. Расшифруем эти значения: D отвечает за отображение дня недели; параметр d – выводит цифру дня месяца; F – полное наименование мясяца; соответственно Y – отображает год; H – отображает часы в 24-часовом формате с ведущим нулем, т.е. от 00 до 23; i – минут с ведущим нулем. Также можно дописать параметры s и u, что будет означать секунды и микросекунды. Полный список параметров можно просмотреть по ссылке. Смещение времени отвечает за выбор часового пояса.
14. Перейдите во вкладку «Настройка текста». Здесь отрегулируйте размер шрифта, задайте ему цвет и сам шрифт.
15. Далее откройте вкладку «Месяцы». Здесь вы можете для каждого месяца вписать свое название.
16. Аналогичный функционал имеют и «Дни недели».
17. Следующий виджeт, доступный в бесплатном режиме – это Подписчик. Нажмите на него.
18. Перейдите в настройки виджeта. С помощью параметров X и Y задайте расположение, а также установите высоту и ширину иконки.
19. Перейдите во вкладку виджeт. Чтобы указать тип отображающегося подписчика, раскройте список вариантов.
20. Отобразится список доступных вариантов, однако некоторые из них не будут доступны в бесплатном режиме. В качестве примера остановимся на «Последний комментатор».
21. Далее укажите номер подписчика и минимальное количество комментариев под постом подписчика.
22. Перейдите во вкладку «Изображение». Здесь возможно отредактировать стиль фона, которое будет выводиться. Задайте размер изoбражения и при необходимости округлите его. Также для изoбражения можно задать рамку. Доступны три режима: сплошная, точечная и с тире.
23. Вкладка «Имя» отвечает за редактирование имения выводимого подписчика. Можно задать различные настройки для имени. Например, его скрыть, перевести в верхний режим, на строку имени перенести фамилию, задать сложную разметку, размер и цвет шрифта.
24. Вкладка «Фамилия» задает почти такие же настройки: размер текста, шрифт, его редактирование. Также позволяет скрыть фамилию, либо перевести ее в верхний регистр.
25. Следующий бесплатный виджет – это погода.
26. Перейдите в настройки виджета. С помощью графы отображение отрегулируйте его расположение.
27. Вкладка виджет позволит задать город, для показа погоды. Также дает возможность более детально отрегулировать настройки. Например, скрыть ветер либо тип, указать с какой стороны будет отображаться тип погода, ввести текст до и после температуры.
28. Вкладка «Настройки текста» полностью соответствует своего названию. Здесь задают размер шрифта и межстрочного интервала, редактируют текст и задают цвет вместе со шрифтом.
29. Перейдите во вкладку Тип погоды. Здесь задаются иконки для каждого типа погоды. Чтобы это сделать, щелкните напротив типа гроза по первой иконке левой кнопкой мыши. Выберите понравившуюся иконку. Картинка с папкой означает, что можно загрузить собственное изображение.
    
30. Далее щелкните по второй иконке и задайте для нее картинку. Соответствующее действие повторите для всех типов.
31. Чтобы сократить время настройки, можно было просто щелкнуть по списку «Выбор шаблона» и указать соответствующий.
32. В графе иконка укажите размер изображения.
33. Далее виджет, который мы рассмотрим будет – Курс валют. Однако он не относится к бесплатным виджетам. Но является одним из самых популярных.
34. Отобразите настройки. И задайте его расположение.
35. В графе виджет выберите валюту и курс. Также задайте условное округление.
36. Перейдите во кладку Настройка текста. Отредактируйте оформление.
37. Далее осталось всего два бесплатных виджета, которые можно использовать – это картинка и фигура. Рассмотрим для начала добавление картинки. Ранее нами было добавлено отображение курса валют, однако одна эта цифра подписчикам мало что может сказать. Поэтому было бы логичном добавить условное изображение, которое поможет понять, о чем эта цифра говорит. Для начала скачаем вектор, либо картинку без фона. Перейдите по ссылке для отображения google картинок. Щелкните из панели по вкладке «Инструменты».
38. Отобразятся настройки поиска. Задайте в качестве критерия – прозрачный цвет.
39. Сохраните понравившуюся картинку.
40. Снова перейдите в конструктор. Выбeрите из списка – Картинка.
41. Прежде чем добавить иконку перейдите в Галерею изображений.
42. Выбeрите «Добавить» для загрузки новой иконки.
43. Откройте нужное изображение.
44. Далее оно должно отобразиться в галерее изображений.
45. Кликните снова по иконке картинка и перейдите во вкладку Виджет. Выбeрите графу «Добавить изображение из галереи».
46. Нажмите по соответствующей иконке. Укажите «Выбрaть изображение».
47. Задайте нужный размер.
48. Прежде чем сохранить шаблон не статической картинки, просмотрим, как она будет смотреться на телефоне. Выберите в правой панели «Предпросмотр».
49. Теперь вы видите, как будет выглядеть изображениях на различных устройствах.
50. Если вас всё устраивает, выберете «Сохранить». Далее «Вернуться в панель управления».
51. Подтвердите действие.
52. Вас перебросит на панель редактирования обложек группы. Раскройте список «Выберите обложку». Нажмите на созданную.
53. Примените ее.
54. Теперь если вы обновите страницу группы, то увидите применение динамического изображения в действии.

Способ 2: Частичное создание динамической обложки с помощью Photoshop и конструктора

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

1. Как основной фон была добавлена стоковая картинка. Его можно скачать по ссылке, нажав «Download free». Стоит отметить, что в последнее время очень популярно использовать однотонный фон – это выглядит строго и эффектно.
2. Запустите Adobe Photoshop.
3. Стоит помнить, что размер бесплатной обложки для конструктора может составлять параметры – 795 на 200. Именно поэтому стоит создать слой такого размера. Перейдите Файл – Создать. Откроется окно создания основного слоя. Размер 795 х 200.
4. Далее снова перейдите Файл – Открыть. Выберите скаченную картинку.
5. Откроется указанное изображение. Во вкладке слои уберите замок с основного слоя. Теперь нажмите по картинки и, не отпуская левой кнопки мыши, перетащите ее на созданный ранее слой.
6. Согласитесь на копирование изображения на новый слой.
7. Нажмите по скопированному слою правой кнопкой мыши. Выберите «Преобразовать в смарт-объект». Это нужно, чтобы при редактировании размера изображения, качество не терялось.
8. Одновременно зажмите CTRL + T. Теперь отредактируйте размер изображения, зажав SCHIFT. После завершение нажмите – ENTER.ч
9. Теперь, чтобы продолжить работу необходимо создать сетку для наглядного представления, как будет смотреться изображение на телефоне. Для этого добавим направляющие. Создайте две направляющее слева и справа отступом 90 пикселей. Вверху отступ составляет 35 пикселей. Ориентируйтесь по линейке в фотошопе. Для создания направляющей щелкните по линейке левой кнопкой мыши и не отпуская ведите ее по направлению изображения.
10. Подобно конструктору создадим прямоугольник, на котором будет отображаться текст. Из панели инструментов выберите прямоугольник. Задайте цвет заливки черный цвет.
11. Чтобы отредактировать угол разворота, зажмите STRL + T. Угол наклона выберите 15 градусов.
12. Задайте непрозрачность для прямоугольника 60 процентов.
13. Далее выделите Прямоугольник и первоначальный слой.
14. Вверху панели отобразится выравнивание, выберите как на скриншоте.
15. Теперь добавим текст. Аналогичным образом выровняйте его с фoном. В качестве цвета шрифта нами был указан белый цвет. Сам шрифт – Ubuntu. 
16. Теперь добавим тень тексту, что нельзя сделать в конструкторе. Нажмите по значку fx. Выберете пункт – Тень.
17. Режим наложения выберите – Нормальный. Остальные настройки укажите по желанию. Можете воспользоваться, как на скриншоте.
18. Нами было добавлено еще 2 фигуры с прозрачностью 20%, по желанию можете этого не делать. Сохраните изображение в формате jpg.
19. Перейдите в конструктор. Выберете «Создать новую обложку».
20. Нажмите «Загрузка фoнов».
21. Выберите «Загрузить фoн».
22. Откройте созданную картинку и поставьте галочку «Сетка для мобильных».
23. Теперь осталось добавить несколько виджетов. Мы будем использовать только бесплатные – погода, дата и время. Для начала добавим день недели. Нажмите на соответствующий виджет – Дата и время. Перейдите в его настройки. В формате даты оставьте только параметр D.
24. Аналогичным образом теперь добавим дату. Нажмите по виджету «Дата и время». Перейдите в настройки. Оставьте параметры d F Y.
25. Теперь добавим время. Оставьте только конечные параметры H:i.
26. Отредактируйте формат текста для всех виджетов «Дата и время», как было рассмотрено в предыдущем способе. Так для дня недели был указан размер шрифта – 24, для даты – 16, а времени – 24.
27. Добавим вектор, который будет отображаться рядом со временем. Перейдите на сайт бесплатных иконок. Выберите понравившуюся и цвет скачиваемой иконки.
28. Перейдите «Галерея изображений».
29. Выберите «Добавить». Откройте скаченную картинку.
30. Запустите виджет Картинка. В графе настроек Виджет выберите пункт «Добавить изображение из галереи».
31. Выберете нужное. Далее задайте размер картинки.
32. Теперь добавим виджет, отображающий погоду. Выберите соответствующий пункт из списка.
33. Так как картинке погода не будет видна на фоне, добавим собственные иконки.
34. Скачаем для каждого типа соответствующий вектор. Для этого перейдите на сайт с бесплатными векторами и скачайте изображения для каждого типа погоды.
35. Загрузите в галерею новые иконки, как это делалось раньше. Далее для каждого типа погоды установить новые иконки из галереи.
36. Для просмотра шаблона, как он будет выглядеть на мобильном устройстве, нажмите «Предпросмотр».
37. Сохраните получившийся шаблон. Далее вернитесь в панель управления.
38. Примените новую обложку для группы.
39. После обновления будет отображаться новая динамическая картинка сообщества.

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