Динамические изображения для социальных сетей


Оглавление (нажмите, чтобы открыть):

Оформление группы в ВКонтакте: меню, анимированные обложки, размеры изображений и прочие тонкости

Содержание

Зачем группе оформление

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

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

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

Возможности Вконтакте

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

Обложка

Размеры: 1590×400 px, видимая зона для мобильной версии 1196×400 px.

Это вытянутая горизонтальная картинка в шапке сообщества, она некликабельна.

Обложка нашей группы vk.com/prcyru

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

Группа без обложки

Общие рекомендации к обложке

Чтобы качество обложки не портилось, администрация Вконтакте советует загружать изображение размером 1590×400 px. Но в мобильной версии вся обложка не умещается в экран, края справа и слева обрезается на 197рх, поэтому все данные, тексты и изображения, которые нельзя резать, лучше помещать в видимой зоне, это 1196×400 px. А сверху примерно 83 рх занимает полоска с индикаторами связи, уровня заряда и прочих.

Схема обложки с разметкой

Чтобы вам не размечать области самостоятельно, мы сделали шаблон в формате psd с направляющими, разграничивающими области. Его можно скачать.

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

Обрезалось часть названия на обложке

Многие советуют делать на обложке стрелки, побуждающие нажать на подписку или написать сообщение.

Стрелка указывает на кнопку подачи заявки

Стрелка показывает на кнопку с сообщением

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

Скриншот статистики группы PR-CY

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

Стрелка указывает на аватарку

Стрелка указывает на пустое поле

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

Размеры: такие же, как у обычной обложки.

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

Пример с выводом аватарок активных участников на обложку

Аватарка нового подписчика на обложке

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

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

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

Анимационная обложка на мобильных

Размеры: вертикальные фото и видео 1080×1920 px или другие в пропорции 9:16.

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

Обложка группы в мобильном просмотре

Обложка группы по клику в мобильном просмотре

Включается эта возможность в Настройках сообщества:

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

Какой размер материалов выбрать:

Для фото рекомендуем разрешение 1080×1920 или другое в пропорции 9:16 вертикальной ориентации. Размер видео такой же, длительность до 30 с, размер до 30 Мб, MP4, видеокодек H.264, аудиокодек AAC.

Аватарка

Размеры: не меньше 200х500 px и не больше 7000 px, соотношение сторон 2 к 5.

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

Если в группе установлена обложка, аватар будет представлен только как миниатюра, полную версию можно будет посмотреть по клику. Если обложки нет, будет выводиться полностью. Для сравнения группа PR-CY с обложкой и аватаркой и вариант той же группы без обложки:

С обложкой и аватаркой

Только с аватаркой

Аватар может быть любого размера не меньше 200х500 px и не больше 7000 px с каждой стороны, но максимальное соотношение сторон — 2 к 5. То есть сильно вытянутую картинку установить не получится, мы пробовали:

Редактор не дает выделить более вытянутое поле.

Меню с кнопками

Размеры: картинка для кнопки от 376х266 точек.

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

Лента меню в группе

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

Настройка кнопок меню

Название кнопки не может быть больше 20 символов, но на смартфоне и эти символы не помещаются, так что дополнительно проверьте, чтобы название было понятным:

Меню на смартфоне

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

Вики-меню

Размеры: ширина внутренней страницы 607 px, обложка не менее 600 px в ширину.

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

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

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

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

Фрагмент разделов внутри меню

Ширина поля у вики-страниц — 607 пикселей. Картинки можно растянуть или сделать меньше, указав размер в редакторе, который открывается по клику на изображение. Но при растягивании и уменьшении портится качество. Автоматически картинки загружаются с высотой 400 px.

Редактор изображений в вики

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

Тестовый пост с вики-меню

Посты

Размеры: не менее 700 px в ширину для обычных постов, не меньее 510х288 px для статьи в редакторе.

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

Ответ поддержки о влиянии размера картинки на позицию в выдаче

Основатель Церебро Таргет Феликс Зинатуллин утерждает, что картинка должна быть не менее 700 пикселей в ширину. Как показывает его опыт, у постов с картинками шириной в 700 пикселей и с шириной в 699 может быть разница охватов в два раза.

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

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

Есть другой формат поста — статья в редакторе. Обложка для нее должна быть горизонтальной, картинка сожмется до размера 510х288 px. Какие-либо изображения лучше помещать дальше от центра, заголовок тоже писать не нужно, он автоматически встанет посередине. Заголовок пишется белым шрифтом, но подсвечивается тенью, так что темные иллюстрации смотрятся лучше, но и на светлом текст не теряется.

Иллюстрация для статьи со светлым фоном Иллюстрация для статьи с темным фоном

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

Охваты у одинаковых постов

Товары

Размеры: не меньше 600 px.

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

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

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

Миниатюра товара из товарного ряда

Открытая карточка товара

Чтобы качество не портилось, рекомендуем брать размер не менее 600 px. Как видно, с горизонтальной иллюстрацией образуются пустые поля, так что выгодным решением мы считаем квадратные иконки. Для своего товарного ряда мы их и выбрали:

Ряд с товарами в группе PR-CY

Открытая карточка товара

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

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

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

Если вы хотите знать больше о ведении групп в социальных сетях, вам может быть интересны другие наши статьи из цикла SMM:

Размеры изображений для социальных сетей


В размерах изображений для социальных сетей легко запутаться, ведь даже в одной и то же соц.сети требуются разные размеры для разных форматов. Здесь мы расскажем про самые популярные в России ВКонтакте, Одноклассники, Facebook и Instagram.

ВКонтакте

Рекламные объявления в боковой панели, видны только на десктопах.

  • Маленькое изображение — 145 х 85
  • Большое изображение — 145 х 165

Объявления в ленте:

  • Универсальная запись с ссылкой и кнопкой — 537 х 240. Это классический формат: изображение и текст над ним. Возможно использование кнопки с дополнительным призывом к действию. Ссылка может вести на внешний сайт, на страницу в Вконтакте или являться номером телефона, тогда с мобильного устройства можно будет в один клик набрать номер.
  • Карусель — 537 х 240. Несколько товаров с соответствующими изображениями и ссылками на различные страницы Вконтакте или разные страницы сайта.
  • Изображение для поста — 700 х 500. Если говорить про обычный пост в своей ленте, то размеры фотографий можно подбирать любые, но именно 700 х 500 позволит избежать искажений на разных устройствах.

Оформление профиля

  • Обложка. Стандартный размер обложки: 1590 х 400. Но он виден только на десктопах, на мобильных устройствах видимая область 1200х400 пикселей. Плюс 83 пикселя сверху и по 140 пикселей по бокам скрывается системными кнопками, поэтому ключевую информацию информацию нужно разместить в центральной части обложки. На иллюстрации эта область не закрашена серым цветом.
  • Фото профиля может быть двух размеров: вертикальное 200х500 и квадратное 200х200. Квадратное фото обрезается в кружок при загрузке, поэтому не стоит выбирать такое изображение, как на примере ниже. Лучше, чтобы главная информация (в виде образа или текста, неважно) была сконцентрирована в центре.
  • 200 х 500
  • Карточки товаров — 834 х 834. Они всегда квадратные.

Facebook

Объявления в новостной ленте:

  • Изображения для поста — 1200 х 900. Это стандартный размер. Здесь тоже нет жёстких указаний, но такие параметры сохранят картинку от искажений.
  • Кольцевая галерея: квадратные изображения — 1080 х 1080, каждое из которых может иметь собственную ссылку на сайт.
  • Одно изображение — 1200 х 628
  • Слайд-шоу — 1280 х 720. Слайд-шоу — это видео которое автоматически создается Фейсбуков на основе ваших изображений.
  • Подборка товаров: у обложки подборки ширина должна быть 1080 пикселей, высота чётко не указана, остальные изображения — 600 х 600. Подборка — удобный формат для мобильных устройств. Таким образом вы показываете сразу несколько товаров на экране телефона.

Оформление профиля

  • Фото профиля — 170 х 170. Оно «округляется» при показе объявлений и публикаций в других лентах, поэтому, как и в ВК, это нужно учитывать. Также не стоит подбирать картинки с мелкими элементами, так как на смартфонах аватарка уменьшается до 128 х 128, а на некоторых моделях телефонов до 36 х 36.
  • Картинки для товаров — 600 х 600
  • Обложка — 820 х 312 для ПК и 574 х 312 для смартфонов. Загружать, конечно, нужно первый вариант, но важную информацию размещать посередине (для смартфонов).

Instagram

Продвигается через Facebook, поэтому:

Рекламные объявления как на Facebook:

  • Кольцевая галерея — 1080 х 1080. Несколько изображений сменяют друг друга при клике на стрелочку.
  • Одно изображение — 1200 х 628. Стандартный формат рекламного объявления в Инстаграм.
  • Слайд-шоу — 1280 х 720. Это видео, которое создаётся из изображений.

Оформление профиля

Здесь не так много элементов: весь профиль состоит из постов и аватарки.

  • Пост — 1080 х 1080. Стандартное изображение должно быть квадратным, но публиковать и другие форматы тоже можно, однако они могут неправильно растянуться или сжаться.
  • Аватарка — 110 х 110. Она круглая, поэтому подыскивайте изображение, на котором самое важное в центре.

Одноклассники

Здесь есть важный момент: картинки для рекламный кампаний не должны превышать 150 Kb!

Рекламные объявления

  • Мультиформатное размещение — 256 х 256, 1080 х 607 и 600 х 600
  • Out-stream видеосеть NativeRoll Standard — 256 х 256 (маленькая картинка над видео)
  • Баннер в видео — 1000 х 120
  • Баннер в соц.сетях — 240 х 400
  • Для продвижения магазина — 500 х 500
  • Блок в ленте — 1080 х 607

Оформление профиля Одноклассники

  • Для поста рекомендуются размеры 1680 х 1680, но это не обязательно.
  • Профиль — 190 х 190 и обложка — 1340 х 320. В Одноклассниках фото профиля не обрезается, поэтому можете не беспокоиться о краях.

Картинки для соцсетей

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

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

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

Эстетическое восприятие, удобство ориентации в рубриках – всё это является ключом, который открывает двери к новым подписчикам. По данным компании Buffer, твит с картинкой в среднем получает на 150% больше ретвитов.

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

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

Что нужно знать

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

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

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

  1. Вконтакте: максимальный размер 1000 х 700 px, оптимальный размер 700 х 500 px

2. Facebook: 1200 х 630 px

3. Instagram: 1080 х 1080 px

4. Одноклассники: 1680 x 1680 px

Понятно, что самыми уникальными будут собственные фотографии или ваши же картинки, которые еще не попадали в интернет. Однако для качественного фото всё-таки нужна техника, а для создания рисунков – навыки работы в графическом редакторе.

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

Несколько таких сайтов:

3. Текст на картинке.

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

Мастер Йода рекомендует:  Инструмент Managed Databases от DigitalOcean получил поддержку MySQL и Redis


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

Делаем изображение сами

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

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

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

С готовыми макетами работать легко. Всё интуитивно понятно: выбираете нужный макет и меняете лишь текст (прямо на нем). Если вам нужно загрузить собственное изображение и работать уже с ним, нажимайте на вкладку «Моё», далее «Добавьте собственное изображение». И приступайте к подбору и редактированию шрифтов. Вы можете менять цвет и размер надписей.

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

Интересный и простой сервис, который содержит много бесплатных изображений (с возможностью загрузить собственные), но ограниченное количество размеров – только для Instagram, Facebook, Twitter и Pinterest. Здесь вы можете выбрать автоматический фильтр (чтобы картинка становилась темной/светлой, размытой/четкой и так далее). Более того, помимо возможности написать свой текст, сервис предлагает готовые цитаты знаменитых людей. Так что если вы видите себя в создании мотивационных постов – здесь вы найдете то, что надо.

Здесь вы можете обрезать картинки под нужный размер, то есть задавать параметры изображений для любых социальных сетей. Например, чтобы подготовить пост Вконтакте, загрузите изображение и во вкладке «Размер» (Choose a Size) выберете самую последнюю графу – «User input». Рядом появится строка, где можно установить длину и ширину.

Дизайнер портала Womenbz

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

Также, в приложении AppForType существует специальный сет FOR MAKERS: для тех, кто ведет свой проект в инстаграмме.

Как делать картинки для соцсетей: 5 советов владельцам интернет-магазинов

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

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

Подбирайте под текст оригинальные картинки

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

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

Используйте легальные изображения

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

Подбирайте размер

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

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

ВКонтакте

  • Аватар сообщества: от 200х200 px до 200×500 px.
  • Размер миниатюры аватара: круг диаметром 200 px.
  • Картинка в меню группы: ширина 510 px. Высота любая, но не слишком большая, чтобы изображение не было вытянутым. При размере 510 х 353 картинка в меню будет заканчиваться на одном уровне с аватаром, размером 200 х 500 px.
  • Максимальная ширина картинки в ленте новостей: 510 px.

Фейсбук

  • Фото профиля: 180х180 px.
  • Обложка: 851 х 315 px.
  • Картинка для поста: 1200 x 630 px.

Твиттер

  • Фото профиля: 400 x 400 px.
  • Обложка: 1500 х 500 px.
  • Картинка для твита: 1024 x 512 px.

Инстаграм

  • Фото профиля: 110 x 110 px.
  • Картинка для поста: 1080 x 1080 px.

YouTube

  • Фото профиля: 800 x 800 px.
  • Обложка канала: 2560 x 1440 px.
  • Картинка поверх видео: 1280 x 720 px.

Пинтерест

  • Фото профиля: 165 x 165 px.
  • Картинка для пина: 735 x 1102 px.

Хорошая новость — всю работу по подготовке фото к публикации вам помогут проделать сервисы:

  • Pablo — обрежет фото для Pinterest, Facebook, Twitter. Даже регистрироваться не нужно, загружаете фото, обрезаете, скачиваете. Также можно добавить на фото надпись или умную цитату и наложить фильтр.
  • Befunky — с ним удобно делать обложки для Facebook, Twitter, Youtube. А ещё можно добавить эффекты, многие из которых доступны бесплатно.
  • Pixlr — полноценный фоторедактор.
  • Picmonkey — куча эффектов и возможность собирать картинки в коллажи.
  • Timelineslicer — редактор, заточенный под Facebook. В пару кликов можно нарезать картинки для этой соцсети.
  • Image Size Info — расширение для Google Chrome, с помощью которого вы сможете моментально узнать размер любой картинки, стоит только кликнуть по ней правой клавишей мыши и выбрать соответствующий пункт в выпадающем меню.

Используйте эти сервисы или выбирайте один из фоторедакторов для начинающих.

Создайте собственный стиль

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

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

По ширине картинки в ленте также должны быть одинаковыми. Из таких «мелочей» складывается первое впечатление о вашем сообществе.

Правильно ставьте текст поверх картинок

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

Цветовой контраст

Пользователь должен за секунду увидеть надпись и понять её. Капитан Очевидность подкидывает правило: хочешь, чтобы надпись была видна — сделай её чёрной на белом, то есть контрастной. На самом деле, вариантов контраста несколько больше. Вот два самых применимых:

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

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

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

Размытость

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

Плашка

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

Текст, объединённый с картинкой

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

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

Гид по GIF-анимациям в социальных сетях

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

Особенности использования

GIF для Facebook и Вконтакте используются с целью привлечения внимания. Они служат дополнительным инструментом продвижения и выполняют такие функции:

— помогают раскрыть суть текстового материала;

— наглядно демонстрируют пошаговые процессы;

— обеспечивают обратную связь с посетителями;

— стимулируют усвоение материала.

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

Какие материалы лучше всего использовать?

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

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

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

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

Примеры использования анимации

Каждый бизнес и сообщество может использовать гифки. Например:

  1. Для кафе и ресторанов уместны анимации с пошаговым приготовлением блюд, сервировкой стола, правильной разделкой продуктов.
  2. Для магазина цветов отличный вариант – «рассказы» про уход за растениями, формирование букета, совместимость цветов. А также эмоциональные гифки, которые изобразят момент получения подарка.
  3. Для курсов кройки и шитья можно создать анимации с короткими уроками (как делать швы, раскрой, замеры).
  4. Магазин одежды и обуви может предложить своим клиентам GIF-изображения по совмещению элементов гардероба.
  5. А ресурс, который предоставляет услуги визажа, или салоны красоты могут размещать уроки макияжа и процесс создания причесок.

Как прикрепить GIF в Вконтакте и Фейсбуке?


Вк поддерживает формат картинок и видео, однако, загружая гифку через фотографии, вы обнаружите, что она не будет воспроизводиться в действии. Как разместить GIF Вконтакте? Для корректной работы, выберите «добавить документ». Откроется диалоговое окно, где вы сможете указать путь к файлу на вашем компьютере.

Также анимации можно размещать в постах на стене через кнопку «Поделиться», которая есть во многих интернет-вместилищах анимаций.

Социальная сеть «Фейсбук» строже относится к использованию GIF. Ранее не было возможности размещения анимаций. Сейчас это можно сделать через кнопку «Поделиться» на сайте Giphy. При этом способе динамическое изображение будет демонстрироваться в качестве видео-статуса.

Вы можете сделать это путем нажатия кнопки Facebook под понравившейся GIF-кой или скопировать URL страницы и вставить ее в поле обновления статуса на Facebook.

Где искать готовый GIF-контент?

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

— Giphy – самый популярный сайт, решает не только вопрос с поиском гифок, но и размещением. Имеет преимущество над другими ресурсами, так как позволяет разместить гиф в социальных сетях, и в частности Фейсбуке, это на данный момент монопольная привилегия;

— Reaction GIFs – помогает озвучить и донести эмоции, содержит изображения с самой яркой и выразительной мимикой на все случаи жизни;

— ЯПлакалъ – юмористический портал, где можно через хэштег #gif найти нужный материал. Особое преимущество в том, что ресурс русскоязычный, что упрощает поиск;

— GIFs.net — анимация на любые темы и вкусы: наука и юмор, эмоции и предметы, контент собран по тематическим блокам.

Как создать GIF?

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

ТОП-3 программы для создания GIF:

— Photoshop – имеет широкие возможности за счет того, что каждый кадр можно тут же обрабатывать инструментами Фотошопа, работает по принципу последовательного набора кадров и установления промежутков их переключения;

— Gimp – это бесплатная альтернатива замены Фотошопу. Программа позволяет создавать векторную и растровую графику;

— 5SecondsApp – мобильная утилита для анимаций из фото и видео.

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

1. Gifius.ru – утилита, которая позволяет создавать гифки заданного размера, используя готовые изображения.

2. Makeagif.com – ресурс с широкими возможностями создания анимаций. Сайт имеет отдельные вкладки для гиф через ссылку на ютуб, из ваших фото или видео, создание анимации с веб-камеры.

3. Ru.toolson.net – сайт, с помощью которого можно скомпоновать несколько картинок и добавить эффекты.

Создание и размещение GIF из видео на Youtube

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

Более того, существует эффективный способ создания анимации на самом Youtube. Для этого:

  1. Открываем видео и в адресной строке после тройного W и точки прописываем команду «Gif».
  1. Нажав Enter, вы автоматически попадете на сервис по созданию GIF-файлов.
  1. С помощью специального указчика и временной ленты выбираете старт анимации. Учитывайте, что она будет длиться всего несколько секунд, поэтому важно выбрать самый яркий момент.
  2. Ниже появится поле с заданным промежутком, вы можете вручную откорректировать время и длительность, выбирая данные в пределах 3 секунд.
  1. Нажав галочку слева, появится команда Create gif, по которой вы сможете перейти к настройкам приватности и названия. Не забудьте добавить в описании ссылку на канал!
  1. Следующим высветится окно с оптимизированными ссылками и горячими кнопками размещения в социальных сетях.

Особенности воспроизведения на телефоне и на компьютере

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

Так как принцип анимации построен на смене кадров с определенной задержкой, то в разных программах они будут воспроизводиться с различной скоростью. Это связано с тем, что у каждой свои тайминги – временные задержки смены кадров. Например, можно сделать анимашку из трех кадров, в которой первый кадр будет задержан на 0,04 секунды, второй – на 0,08 секунды, а третий и вовсе на все 10 секунд!

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

Используйте возможности GIF для продвижения в социальных сетях и привлечения новой аудитории! Успехов и новых подписчиков вашим страничкам и группам!

Шпаргалка SMMщика: размеры изображений популярных социальных сетей в одном посте

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

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

Facebook

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

Оформление страницы в Facebook включает в себя следующие виды графических материалов:

  • обложка страницы;
  • аватар страницы;
  • изображение поста;
  • изображение внешней ссылки.

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

ВКонтакте

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

  • Аватар страницы;
  • Изображение поста;
  • Изображение внешней ссылки;
  • Изображение верхнего меню (закрепленной записи);
  • Изображение внутреннего меню (wiki-разметка).

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

Боковые рекламные записи оформляются при создании объявления и имеют следующие требования к картинкам:

  • Изображение и текст (180*130 рх);
  • Большое изображение (180*240 рх);
  • Эксклюзивный формат (90*160 рх);
  • Продвижение сообществ (по умолчанию используется аватар сообщества. Можно загрузить любое изображение минимальным размером 180*180 рх);
  • Специальный (по умолчанию используется аватар сообщества. Можно загрузить любое изображение минимальным размером 256*256 рх).

Instagram

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

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

К рекламным изображениям применимы следующие правила:

  • Рекомендуемый размер — 1080*1080 рх;
  • Формат — 1:1;
  • Правило 20% текста, как в Facebook.

Twitter

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

Виды изображений в данной социальной сети:

  • Аватар профиля;
  • Обложка страницы;
  • Изображение поста.

Требования к изображениям рекламных твитов в Twitter такие же, как к фото обычных записей.

LinkedIn

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

Рекламное объявление в социальной сети представляет собой баннер 50х50 пикселей, 25 символов для заголовка и 75 символов для описания, поэтому желательно выбирать квадратные изображения изначально, чтобы избежать обрезки фото.

Google+

Google+ в последнее время претерпела существенную модернизацию, что дает надежду пользователям и маркетологам на то, что у социальной сети все же есть будущее. Несмотря на то, что площадка, несомненно, не занимает вершину «пищевой цепочки», игнорировать ее все же не стоит.

Pinterest

Pinterest — удивительная социальная сеть и инструмент поиска. 90% страниц на данной платформе содержат внешние ссылки, поэтому, если вы можете интересно представить свой бизнес в фотоформате, то аккаунт здесь must have.

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

Tumblr

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

YouTube

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

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

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

Время чтения: 22 минуты Нет времени читать? Нет времени?

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

В статье рассматриваем:

  • Правильные размеры аватаров, обложек, картинок для публикаций и других изображений для Facebook, «ВКонтакте», «Одноклассники», Twitter, Instagram, Pinterest, LinkedIn.
  • Сервисы для создания изображений и фотостоки с бесплатными или дешевыми картинками для бизнеса.
  • Советы о том, как ставить водяные знаки, и когда это нужно.
  • Примеры для вдохновения.

Статья расчитана на начинающих.

РАЗМЕРЫ ИЗОБРАЖЕНИЙ

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

Facebook

Фото профиля

Загружайте изображение 180×180 px. Фото профиля личной страницы на компьютере отобразиться в размере 160х160 px, управляемой страницы — 170×170 px. В ленте и комментариях аватар отображается в форме круга.

Обложка

Лучший размер для загрузки зависит от оформления и информации на обложке.

Обложка личной страницы на компьютере отобразится в размере 851х315 px, управляемой страницы — 820×312 px, группы — 820×250 px. Мероприятия — 500×262 px. На смартфоне пропорции поменяются — 640х360 px. То есть, если вы загрузили 851х315, или 2,7 к 1, на смартфоне картинка обрежется и отобразится в пропорции 1,8 к 1.

Картинка для поста

Загружайте 1200×630 px. При отображении в ленте горизонтальная картинка уменьшится до 470 px по ширине, соотношение сторон сохранится. Вертикальная картинка уменьшится до 394 px по высоте, соотношение сторон сохранится.

Картинка к внешним ссылкам

Загружайте в поле «og:image» картинку 1200×630 px. В ленте на компьютере отобразится как 470х246 px. Facebook советует размер 1200×630 px, чтобы картинка лучше отображалась на мониторах с высоким разрешением. Не загружайте картинку меньше 470х246 px, т.к. она отобразится в виде маленького квадрата 158х158 px вместе с текстом. Также маленький квадрат появится, если в поле «og:image» есть ошибка.

По данным Facebook, быстрее всего грузится файл sRGB png размером 851х315 px, который весит менее 100 Кбайт. Ограничение по объему — 8 Мбайт. Формат, который максимально сохранит качество — PNG.


Подбираем обложку для Facebook

Пожалуй, это самый сложный визуальный элемент страницы. Для разных типов страниц — разные параметры, соотношения сторон и расположение профильного фото на странице и смартфоне.

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

Так у меня выглядит профиль на ПК:

Ничего особенного, но для личной некоммерческой страницы сойдет.

А вот так на смартфоне:

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

А вот для создания обложки для управляемой страницы и группы я решила больше не полагаться на себя. Я взяла шаблон сервиса Canva, он предлагает делать обложку 628×315 px.

Управляемая страница на ПК

На смартфоне

Группа на ПК

На смартфоне

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

Еще есть оптимальный размер обложки по мнению Buffer, сервиса для планирования публикаций в социальных сетях. И это 820х462 px:

Можно скачать их шаблон для фотошопа в формате PSD.

«ВКонтакте»

Аватар

Загружайте изображение размером 200 на 300 px. Или 2 к 3, но не более 600х900 px. На компьютере отобразится в размере 200×300 px. Миниатюра отобразится в круге с диаметром 200 px. Если загрузить бóльшую картинку, она отобразится при клике на аватар.

Обложка группы

Загружайте изображение размером 1590×400 px. На компьютере отобразится в размере 795х200 px.

Картинка для публикации

Загружайте картинку 510x 510 px. (ширина: 510, длина: меньше или равна 510 px) Если загрузить картинку больше, но пропорционально похожую, тоже будет отлично. При отображении в ленте вертикальная картинка сожмется до 510 px по высоте, горизонтальная — до 510 рх по ширине. Соотношение сторон картинки сохранится.

Вот, что говорит поддержка VK

Картинка к внешним ссылкам

Загружайте в поле «og:image» картинку 537×240 px или в пропорции 2,23 к 1. Во «ВКонтакте» картинка сожмется до 537×240 px. Соотношения сторон важны. Если изображение квадратное или вертикальное, оно будет обрезано.

Размер аватара во «ВКонтакте»

Если в Facebook главная головная боль — это обложка, то во «ВКонтакте» это аватар. Во-первых, о реальных максимальных размерах аватара во «ВКонтакте» не подозревает даже тех. поддержка.

Но вот утка 200х500 px. Она спокойно отображается:

Ладно, загружаем утку размером 200х300 px:

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

Картинка для внешней ссылки

Если сравнивать с картинкой для внешней ссылки в ленте Facebook, в ленте «ВКонтакте» она отображается более вытянутой. Вместо 470х246 px на FB, она имеет параметры 537×240 px. А значит, будет больше обрезана сверху и снизу. Следите, чтобы с картинки не пропала важная информация.

Так выглядит картинка в ленте «ВКонтакте»

Так выглядит оригинал на сайте animalsglobe

Сохраняем качество изображений во «ВКонтакте»

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

Больше советов об оформлении групп VK в руководстве Texterra.

«Одноклассники»

Фото профиля или группы

Загружайте изображение 288×288 px.

Тема группы

Состоит из трех частей:

  • Главное изображение — 1340×320 px;
  • Обложка темы для каталога — 240×90 px;
  • Повторяющийся фон страницы — 320×320 px.

Картинка для поста

Загружайте изображение 1024×768 px.

При отображении в ленте горизонтальная картинка уменьшится до 548 px по ширине, соотношение сторон сохранится.

Вертикальная уменьшится до 411 px по высоте, соотношение сторон сохранится.

Как поставить свою тему группы в «Одноклассниках»

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

Чтобы установить тему, удобно использовать расширение OkTools. После установки, оно появится в списке наверху страницы. Там выбираем «Темы» и создаем свою.

Чтобы тема выглядела красиво, ОЧЕНЬ важно следовать рекомендациям, которые дает служба поддержки ОК:

Использовать для фона темы изображение размером 1340×320 px, до 120 КБ; для повторяющегося фона страницы — 320×320 px, до 50 КБ; для обложки темы для каталога — 240×90 px, до 30 КБ.

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

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

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

Instagram

Фото профиля

Загружайте картинку размером 110×110 px. Фотография отобразится в круге.

Картинка для поста

Загружайте картинку размером 1080×1080 px. Квадратную картинку загружать не обязательно, но желательно. Если вы загружаете неквадратную картинку, то идеальная ширина — 1080 px, а длина — от 566 до 1350 px. В веб-версии фотографии будут отображаться в размере 291×291 px. При сжатии в Instagram картинка уменьшится до 640 px. В веб-версии откроется картинка размером 600×600 px.

Картинка для Stories

Загружайте картинку размером 1080х1920 px. Можно и других размеров. Главное, чтобы сохранялась пропорция 9:16. Например, подойдет 900х1600 px.

При выборе логотипа помните, что картинка примет круглую форму:

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

В Instagram лучше загружать квадратные фотографии

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

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

Если загружаете неквадратную фотографию, Instagram сперва предложит обрезать ее до квадрата.

Это именно та часть, которая отобразится в профиле.

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

Неквадратные изображения в ленте неудачно обрезаны. Источник: Instagram/malishpsih

Неквадратные горизонтальные изображения одного размера выглядят хорошо. Источник: Instagram/vitalykovalevich

Twitter

Фото профиля

Загружайте изображение размером 400×400 px. Фото профиля на компьютере отобразится как круг размером 200px в диаметре.

Обложка

Загружайте изображение размером 1500х500 px. Так советует сам Twitter и все редакторы, в которых есть шаблон обложки для Twitter. Однако при отображении на компьютере обложка показывается как 1900 на 500. А это уже не 3 к 1, а 19 к 5.

Картинка для поста

Загружайте 1024×512 px. При отображении в ленте картинка уменьшится до 506 px по ширине. Сохранится пропорция 2 к 1. Вертикальная уменьшится до 506 px по высоте и ширине, станет квадратной. Поэтому, если вы захотите поставить вертикальную картинку, при показе в ленте она равномерно обрежется сверху и снизу. Если нажать на картинку, она откроется без обрезки.

Pinterest

Фото профиля

Загружайте изображение размером 165×165 px. Отобразится в круге, поэтому следите, чтобы самое важное находилось в центре.

Картинка для пина

Загружайте картинки размером 600×900 px или с соотношением сторон 2 к 3. На компьютере картинка сожмется до 238 px в ширину.

Пропорции сохраняются до тех пор, пока соотношение сторон примерно от 1 к 1 до 1 к 3,5. Если фотография более вытянутая, то сервис ее обрежет на общей странице, а полная версия будет доступна при клике. Максимальная ширина при открытии — 735 px.

Картинка для доски/альбома

Загружайте картинки размером 600×900 px или с соотношением сторон 2 к 3. Во многих источниках указано, что нужно загружать картинку шириной 238 px, но это неверно.

Как объясняет Дарси, член сообщества экспертов Pinterest, если загружать картинку размером 238 px, то при открытии вы используете меньше половины допустимой площади. А в случае с Pinterest, где пользователи приходят именно за визуально привлекательным полноразмерным материалом, это преступление.

LinkedIn

Фото профиля

Загружайте изображение размером 300×300 px. В личном профиле отобразится в круге, на странице компании — в квадрате 130х130 px.

Фото обложки

Загружайте 1584х396 px для личной страницы и 1536х768 px для страницы компании.

Картинка для поста

Загружайте изображение размером 1200×627 px.

При отображении в ленте картинка сожмется до 520х272 px. Если загружать картинки других размеров, горизонтальные сожмутся до 520 px по ширине, а вертикальные — до 510 px по высоте. Пропорции сохранятся.

Картинка к внешним ссылкам

Загружайте изображение размером 1200×627 или 520х272 px. Соотношение сторон должно быть 1,91 к 1. Ширина должна превышать 200 px.

В новом дизайне LinkedIn обложка компании обрезается


При выборе обложки сервис рекомендует загружать картинку 1536х768, а затем беспощадно её обрезает сверху и снизу. На компьютере отображается картинка высотой 220 px, остальное обрезается:

Зачем сервис советует именно 1536х768? Будет красиво при просмотре со смартфона. Поэтому, загружая обложку страницы в LinkedIn, нужно обязательно проверить результат как на компьютере, так и на смартфоне.

ВОДЯНЫЕ ЗНАКИ ИЛИ ВОТЕРМАРКИ

Применение

Водяные знаки нужны, когда вы хотите защитить изображения. Когда это:

  1. фотография для фотостоков, которую вы планируете продавать;
  2. ценный репортажный кадр, и вы хотите его продать.

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

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

Водяные знаки желательны, если вы хотите добиться популярности бренда:

  1. вы фотограф/художник/дизайнер и используете подпись для узнаваемости;
  2. это коммерческий кадр, но на нем нет названия компании или продукта.
  • Водяной знак не должен перекрывать изображение и привлекать слишком много внимания.
  • Не нужно лепить на фотографию дополнительные элементы, например, рамку.
  • Не стоит ставить водяной знак на слишком маленьких и низкокачественных картинках.
  • Желательно сделать вотермарк полупрозрачным.
  • Текст должен быть лаконичным и емким: имя фотографа, адрес сайта, логотип.

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

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

Отличный пример. Намного лучше вотермарка на фотографии.

А тут на подложку для торта нанесли еще адрес сайта:

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

Вотермарки могут дополнять плакаты и информировать:

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

ПОИСК И СОЗДАНИЕ ИЗОБРАЖЕНИЙ

Фотостоки

Everypixel

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

Unsplash

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

Focusfitness

Тематический фотосток, где можно найти фотографии на спортивную тематику. Есть категории: тренировки, еда и напитки, йога, диеты, фитнес и т. п.

New old stock

Тематический фотосток, где собраны винтажные фотографии. Найти что-либо определенное на сайте сложно, но есть множество атмосферных кадров из прошлого. Средний размер, в котором можно скачать фотографию — 1200х1200 px.

ВАЖНО: картинки этого фотостока можно свободно использовать только в некоммерческих целях. На сайте указано, что изображениями можно иллюстрировать статью, публикации в СМИ, страницу 404, а также личные некоммерческие проекты.

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

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

Инструменты для создания картинок

Canva

Вероятно, самый востребованный бесплатный редактор среди СММ-щиков. Продвинутый, с большим количеством функций, но по-прежнему очень простой и интуитивный. Есть список готовых шаблонов на выбор — почти для каждой популярной соцсети, кроме VK.

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

Еще один простой и удобный редактор. Регистрироваться не надо. Просто заходите, создаете, скачиваете, публикуете. Справа можно выбрать один из трех форматов: вытянутый вертикальный для Pinterest, квадратный для Instagram и горизонтальный для Facebook и Twitter.

Другие полезные инструменты

Colorscheme

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

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

Omnicoreagency

Самый развернутый англоязычный гид по размерам визуальных элементов, который я видела. Тут Facebook, YouTube, Pinterest, Twitter, LinkedIn, Instagram, Google+. На странице показаны размеры изображений и схематично, и в таблице. Последняя дата обновления — 19 апреля 2020 года. Есть расхождения в числах с другими источниками, но их мало, и они незначительны.

Makeawebsitehub

Более лаконичный гид по размерам, обновляется чаще. Последняя дата: 3 августа 2020 года..

Timeline Slicer

Тем, кто хочет увидеть, как будет выглядеть страница в Facebook. Захóдите на сайт, перетаскиваете картинки в шаблон и смотрите, красиво ли выходит. Программа платная, но есть тестовый период.

Recite

Наверное, самый простой генератор постеров, который вы встречали. Просто введите текст и выберите шаблон.

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

Monosnap

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

Watermark

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

Marksta

Приложения для iPhone c огромным выбором инструментов, шрифтов, фонов, цветов. Загружайте и добавляйте вотермарки на изображения: ваше имя, название компании, адреса электронной почты или веб-страницы. Приложение стоит 2,29 €.

Есть также бесплатная версия с ограниченными функциями — Marksta Lite.

ПРИМЕРЫ УДАЧНОГО ИСПОЛЬЗОВАНИЯ ИЗОБРАЖЕНИЙ В СОЦСЕТЯХ

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

Facebook

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

Для KFC типично добавлять на картинки Полковника Сандерса — человека, который основал КFС и придумал главный рецепт. У страницы можно поучиться, как внедрить и использовать образ, сделать его узнаваемым и любимым.

А у Jack’a можно подсмотреть, как красиво раскручивать алкоголь или безалкогольные напитки. Ракурсы, оформление постов с рецептами, постановочные кадры с использованием продукта в повседневных ситуациях.

Научно-образовательный проект «Образовач».

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

. и да, порой у них в текстах есть ошибки

Наверное, все знают «Тинькофф Банк» и то, какие картинки там создают. Но если вы еще не подписаны, то стоит. Они вовремя реагируют на российские и мировые инфоповоды, используют ситуативный маркетинг, рисуют быстро и качественно.

Instagram

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

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

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

Instagram магазина позитивного нижнего белья. Кадры соответствующие. Большую часть контента генерируют клиенты, выставляя фото с продуктом и хештегом #MeUndies.

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

Pinterest

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

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

Etsy — веб-сайт, где можно найти изделия ручной работы, винтажные вещи и уникальные товары. На Pinterest у них есть коллекция «досок» (boards), например, «Находки» (Etsy Finds). Туда попадают красивые фото с продуктами, которые есть на сайте Etsy.

Twitter

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

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

Если вы работаете в фитнес-сфере, знайте: красивые подкаченные девушки все еще собирают подписчиков.

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

Закрепляем

Чтобы картинки в социальных сетях выглядели хорошо:

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

sozdanie-izobrazheniy-dlya-sotssetey-razmery-votermarki-instrumenty-primery

Гид по GIF-анимациям в социальных сетях

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

Особенности использования

GIF для Facebook и Вконтакте используются с целью привлечения внимания. Они служат дополнительным инструментом продвижения и выполняют такие функции:

— помогают раскрыть суть текстового материала;

— наглядно демонстрируют пошаговые процессы;

— обеспечивают обратную связь с посетителями;

— стимулируют усвоение материала.

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

Какие материалы лучше всего использовать?

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


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

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

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

Примеры использования анимации

Каждый бизнес и сообщество может использовать гифки. Например:

  1. Для кафе и ресторанов уместны анимации с пошаговым приготовлением блюд, сервировкой стола, правильной разделкой продуктов.
  2. Для магазина цветов отличный вариант – «рассказы» про уход за растениями, формирование букета, совместимость цветов. А также эмоциональные гифки, которые изобразят момент получения подарка.
  3. Для курсов кройки и шитья можно создать анимации с короткими уроками (как делать швы, раскрой, замеры).
  4. Магазин одежды и обуви может предложить своим клиентам GIF-изображения по совмещению элементов гардероба.
  5. А ресурс, который предоставляет услуги визажа, или салоны красоты могут размещать уроки макияжа и процесс создания причесок.

Как прикрепить GIF в Вконтакте и Фейсбуке?

Вк поддерживает формат картинок и видео, однако, загружая гифку через фотографии, вы обнаружите, что она не будет воспроизводиться в действии. Как разместить GIF Вконтакте? Для корректной работы, выберите «добавить документ». Откроется диалоговое окно, где вы сможете указать путь к файлу на вашем компьютере.

Также анимации можно размещать в постах на стене через кнопку «Поделиться», которая есть во многих интернет-вместилищах анимаций.

Социальная сеть «Фейсбук» строже относится к использованию GIF. Ранее не было возможности размещения анимаций. Сейчас это можно сделать через кнопку «Поделиться» на сайте Giphy. При этом способе динамическое изображение будет демонстрироваться в качестве видео-статуса.

Вы можете сделать это путем нажатия кнопки Facebook под понравившейся GIF-кой или скопировать URL страницы и вставить ее в поле обновления статуса на Facebook.

Где искать готовый GIF-контент?

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

— Giphy – самый популярный сайт, решает не только вопрос с поиском гифок, но и размещением. Имеет преимущество над другими ресурсами, так как позволяет разместить гиф в социальных сетях, и в частности Фейсбуке, это на данный момент монопольная привилегия;

— Reaction GIFs – помогает озвучить и донести эмоции, содержит изображения с самой яркой и выразительной мимикой на все случаи жизни;

— ЯПлакалъ – юмористический портал, где можно через хэштег #gif найти нужный материал. Особое преимущество в том, что ресурс русскоязычный, что упрощает поиск;

— GIFs.net — анимация на любые темы и вкусы: наука и юмор, эмоции и предметы, контент собран по тематическим блокам.

Как создать GIF?

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

ТОП-3 программы для создания GIF:

— Photoshop – имеет широкие возможности за счет того, что каждый кадр можно тут же обрабатывать инструментами Фотошопа, работает по принципу последовательного набора кадров и установления промежутков их переключения;

— Gimp – это бесплатная альтернатива замены Фотошопу. Программа позволяет создавать векторную и растровую графику;

— 5SecondsApp – мобильная утилита для анимаций из фото и видео.

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

1. Gifius.ru – утилита, которая позволяет создавать гифки заданного размера, используя готовые изображения.

2. Makeagif.com – ресурс с широкими возможностями создания анимаций. Сайт имеет отдельные вкладки для гиф через ссылку на ютуб, из ваших фото или видео, создание анимации с веб-камеры.

3. Ru.toolson.net – сайт, с помощью которого можно скомпоновать несколько картинок и добавить эффекты.

Создание и размещение GIF из видео на Youtube

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

Более того, существует эффективный способ создания анимации на самом Youtube. Для этого:

  1. Открываем видео и в адресной строке после тройного W и точки прописываем команду «Gif».
  1. Нажав Enter, вы автоматически попадете на сервис по созданию GIF-файлов.
  1. С помощью специального указчика и временной ленты выбираете старт анимации. Учитывайте, что она будет длиться всего несколько секунд, поэтому важно выбрать самый яркий момент.
  2. Ниже появится поле с заданным промежутком, вы можете вручную откорректировать время и длительность, выбирая данные в пределах 3 секунд.
  1. Нажав галочку слева, появится команда Create gif, по которой вы сможете перейти к настройкам приватности и названия. Не забудьте добавить в описании ссылку на канал!
  1. Следующим высветится окно с оптимизированными ссылками и горячими кнопками размещения в социальных сетях.

Особенности воспроизведения на телефоне и на компьютере

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

Так как принцип анимации построен на смене кадров с определенной задержкой, то в разных программах они будут воспроизводиться с различной скоростью. Это связано с тем, что у каждой свои тайминги – временные задержки смены кадров. Например, можно сделать анимашку из трех кадров, в которой первый кадр будет задержан на 0,04 секунды, второй – на 0,08 секунды, а третий и вовсе на все 10 секунд!

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

Используйте возможности GIF для продвижения в социальных сетях и привлечения новой аудитории! Успехов и новых подписчиков вашим страничкам и группам!

Как делать картинки для соцсетей: 5 советов владельцам интернет-магазинов

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

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

Подбирайте под текст оригинальные картинки

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

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

Используйте легальные изображения

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

Подбирайте размер

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

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

ВКонтакте

  • Аватар сообщества: от 200х200 px до 200×500 px.
  • Размер миниатюры аватара: круг диаметром 200 px.
  • Картинка в меню группы: ширина 510 px. Высота любая, но не слишком большая, чтобы изображение не было вытянутым. При размере 510 х 353 картинка в меню будет заканчиваться на одном уровне с аватаром, размером 200 х 500 px.
  • Максимальная ширина картинки в ленте новостей: 510 px.

Фейсбук

  • Фото профиля: 180х180 px.
  • Обложка: 851 х 315 px.
  • Картинка для поста: 1200 x 630 px.

Твиттер

  • Фото профиля: 400 x 400 px.
  • Обложка: 1500 х 500 px.
  • Картинка для твита: 1024 x 512 px.

Инстаграм

  • Фото профиля: 110 x 110 px.
  • Картинка для поста: 1080 x 1080 px.

YouTube

  • Фото профиля: 800 x 800 px.
  • Обложка канала: 2560 x 1440 px.
  • Картинка поверх видео: 1280 x 720 px.

Пинтерест

  • Фото профиля: 165 x 165 px.
  • Картинка для пина: 735 x 1102 px.

Хорошая новость — всю работу по подготовке фото к публикации вам помогут проделать сервисы:

  • Pablo — обрежет фото для Pinterest, Facebook, Twitter. Даже регистрироваться не нужно, загружаете фото, обрезаете, скачиваете. Также можно добавить на фото надпись или умную цитату и наложить фильтр.
  • Befunky — с ним удобно делать обложки для Facebook, Twitter, Youtube. А ещё можно добавить эффекты, многие из которых доступны бесплатно.
  • Pixlr — полноценный фоторедактор.
  • Picmonkey — куча эффектов и возможность собирать картинки в коллажи.
  • Timelineslicer — редактор, заточенный под Facebook. В пару кликов можно нарезать картинки для этой соцсети.
  • Image Size Info — расширение для Google Chrome, с помощью которого вы сможете моментально узнать размер любой картинки, стоит только кликнуть по ней правой клавишей мыши и выбрать соответствующий пункт в выпадающем меню.

Используйте эти сервисы или выбирайте один из фоторедакторов для начинающих.

Создайте собственный стиль

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

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

По ширине картинки в ленте также должны быть одинаковыми. Из таких «мелочей» складывается первое впечатление о вашем сообществе.

Правильно ставьте текст поверх картинок

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

Цветовой контраст

Пользователь должен за секунду увидеть надпись и понять её. Капитан Очевидность подкидывает правило: хочешь, чтобы надпись была видна — сделай её чёрной на белом, то есть контрастной. На самом деле, вариантов контраста несколько больше. Вот два самых применимых:

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

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

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

Размытость

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

Плашка

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

Текст, объединённый с картинкой

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

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

Бесплатные динамические обложки для групп Вконтакте

Dynamic Cover – конструктор живых обложек для групп ВКонтакте. Выводит на обложку любой текст, указанный по URL, последнего подписчика, лучшего комментатора, лучшего лайкера и т.п. Показывает дату, время и погоду в вашем городе или курс валют. Вы можете настроить смену обложек по вашему желанию: делать слайдер с заданной периодичностью, настроить смену по времени суток или точному времени.

  1. Видео-обзор Dynamic Cover:
  2. Что можно добавить на обложку с помощью DyCover.
  3. Как сделать динамическую обложку Вк.
  4. Добавление виджетов
  5. Подключение обложки
  6. Тарифы Dynamic Cover — стоимость
  7. Промокод на DYnamic Cover:
  8. Мой отзыв о Dynamic Cover:

Характеристики сервиса

  • Конструктор логотипов
  • Дизайн элементов фирменного стиля
  • Баннеры и макеты
  • Шаблоны для соц-сетей
  • Инфографика
  • Майнд-карты

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

Чтобы создать динамическую обложку для Вк нужно обладать навыками программирования. Принцип работы заключается в следующем: на стороннем сервере помещается код, который, обращаясь к API Вконтакте, обновляет обложку группы. Но есть путь намного проще – Dynamic Cover. Это конструктор обложек. В нем можно создать дизайн обложку вашей группы Вк, добавить на нее виджеты – динамически блоки. Нижем мы рассмотрим, как можно бесплатно создать такую обложку.

Видео-обзор Dynamic Cover:

Что можно добавить на обложку с помощью DyCover.

Вы можете добавить на свою обложку любое количество интерактивных виджетов:

  • Подписчик – виджет, который выводит на обложку аватарку и имя подписчика группы. Это может быть последний подписчик, вступивший в группу, последний комментатор, лучший комментатор по лайкам или по количеству, лучший лайкер, репостер, самый активный и просто пользователь, id которого вы укажите.
  • Погода – виджет с иконками погоды и автоматическим отображением температуры в любом городе.
  • Текст – может быть любой динамически изменяемый текст с сайта, какая-то статистика, данные, что угодно.
  • Дата и время.
  • Таймер – обратный отчет времени до мероприятия, окончания конкурса, старта распродажи или чего-то еще.
  • Картинка.
  • Сетка – виджет для удобства оформления, потом не отображается на готовой обложке.
  • Фигуры – доступны квадрат, прямоугольник, овал, окружность и круг.
  • Курс валют.
  • Виджеты для YouTube: логотип с названием и количеством подписчиков, последние видео и видео по ссылке.
  • Динамические фоны, сменяемые по периоду и по времени. Например, днем у обложки группы будет один фон, а ночью другой.

Как сделать динамическую обложку Вк.

Чтобы приступить к созданию обложки, жмем на «Войти».

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

Здесь появляются все группы VK, для которых у вас есть права администратора. Если новые группы ещё не отображаются, нужно обновить список, и они появятся.

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

После ввода названия открывается конструктор со списком виджетов.

Для начала нужно установить фон. Нажимаем на кнопку «Управление фоном» и загружаем картинку.

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

Чтобы фон менялся, нужно загрузить еще картинки на смену.

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

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

Добавление виджетов

После разметки обложки можно приступить к добавлению основных виджетов. Для заголовка установим виджет «Текст». Чтобы редактировать виджет, нужно нажать на него в разделе слоев.

В окне настроек можно задать статический или динамический текст, шрифт, размер, цвет, интервал и положение.

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

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

Во вкладке «Тип погоды» на выбор есть 4 шаблона иконок, которые будут меняться в зависимости от погоды.

Размер иконок можно менять произвольно или скрыть их и оставить только текст.

Виджет подписчика тоже имеет множество настроек. Тип подписчика определяется во вкладке «Виджет».

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

Аналогично происходит добавление и настройка других виджетов.

Подключение обложки

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

Сохраняем готовую обложку и возвращаемся в конструктор.

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

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

Тарифы Dynamic Cover – стоимость

На базовом бесплатном тарифе сервиса есть ограничения. Доступна одна группа и три шаблона.

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

  • таймер,
  • картинка,
  • курс валют,
  • текст по URL,
  • лучший комментатор,
  • лучший лайкер,
  • лучший репостер,
  • расписание фонов,
  • пользовательские шрифты,
  • виджеты YouTube.

Чтобы снять эти ограничения с одной группы, нужно заплатить 100 рублей в месяц. Подключить ещё одну группу будет стоить 180 рублей в месяц, две – 260 рублей и так далее.

Промокод на DYnamic Cover:

Зарегистрируйтесь по ссылке – https://dycover.ru/ref/20916618/ и получите скидку 15% на первую оплату.

Мой отзыв о Dynamic Cover:

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

Промокод на сервис Dynamic Cover

У данного сервиса промокоды появятся в ближайшем будущем.

Мастер Йода рекомендует:  Аутентификация пользователей через Веб-интерфейс
Добавить комментарий