меню, анимированные обложки, размеры изображений и прочие тонкости – PR-CY Блог

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

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

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

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

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

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

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

Обложка

Размеры: 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.

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

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

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

Настройки группы

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

Добавление фотографий

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

Для фото рекомендуем разрешение 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:

Основы SMM. Часть 1: Создаем коммерческий аккаунт

Основы SMM. Часть 2: Составляем контент-план на примерах и шаблонах

Основы SMM. Часть 3: Обратная связь в группе

Основы SMM. Часть 4: Сервисы для общения с подписчиками в соцсетях

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

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

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

Сохраняйте в закладки, делитесь с коллегами!

ВКонтакте

Размер аватара для сообщества:

Размер миниатюры аватара – 200х200 pх.

Минимальный размер целого аватара – 200х500 px.

Обложка сообщества для полной версии сайта – 1590х400 рх.

Пример отображения обложки сообщества в мобильной версии сайта и приложениях (источник: руководство «ВКонтакте для бизнеса»)

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

Размер изображений для постов:

• Минимальный размер квадратного изображения – 510х510 рх.
• Для прямоугольного изображения рекомендованное соотношение сторон 3:2.

Примеры квадратного и прямоугольного изображений в ленте сообщества(источник: руководство «ВКонтакте для бизнеса»)

Размер обложки для статьи – 510х286 pх.

Учитывайте, что часть изображения закроет текст заголовка и кнопка «Читать».

Пример изображения обложки для статьи в сообществе (источник: руководство «ВКонтакте для бизнеса»)

Живая обложка для группы:

• Это та же шапка, только в формате видео.
• Размер full hd видео – 1080х1920 px.
• Формат MP4 (кодек h364 aac).
• Размер до 30 Мб.

Размер обложки сниппета для внешней ссылки – 537х240 рх.

Пример изображения со ссылкой (источник: руководство «ВКонтакте для бизнеса»)

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

Размер обложки для фотоальбома – 1200х800 рх.

• В мобильной версии нижняя часть обложки будет отображаться меньше на 200 рх.

Размер изображений для витрины товаров – 1000х1000 px.

Размер видеозаписей для сообщества – не менее 1280х720 рх.

• Максимальный объем загружаемого файла – 5 ГБ.
• Для сохранения высокого качества видео, загружайте записи с размером не менее 1920×1080 рх.

Форматы видео: AVI, MP4, 3GP, MPEG, MOV, FLV, F4V, WMV, MKV, WEBM, VOB, RM, RMVB, M4V, MPG, OGV, TS, M2TS, MTS.

Размер фото и видео для историй, в том числе рекламных:

• Размер для фотографий – 1080х1920 рх.

Размер для видео – 720х1280 рх.

• Используйте фото и видео вертикального формата.

Технические характеристики для видеозаписей:

• до 15 секунд;
• не больше 10 МБ;
• кодек h. 264;
• звук AAC.

Форматы изображений: JPG, GIF или PNG.


Во ВКонтакте несколько рекламных форматов, и для каждого из них свои размеры.


Реклама в ленте ВКонтакте:

• Кольцевая галерея/карусель – квадрат не менее 400х400px. Можно загрузить от 3 до 10 карточек;
• Изображение для записи с кнопкой – прямоугольник не менее 537х240px;
• Изображение для универсальной записи – можно загрузить до 10 прямоугольных или квадратных изображений. Строгих требований к размерам нет;
• Изображение к универсальной записи со ссылкой – 510х510 px, либо прямоугольник не менее 537х240px;
• Реклама сайта – прямоугольник с соотношением сторон 16:9 не менее 1080×607 px. Для логотипа понадобится картинка не менее 256 px.


Реклама для размещения в левой части полной версии ВКонтакте и на сайтах партнеров:

• Приложения и сайт – 145х165px для большого изображения, 145х85 для маленького.
• Сообщества – не менее 145х145px.


Дополнительную информацию по загрузке фотографий можно найти в разделе Помощи Вконтакте.

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

Размеры аватара:

• Размер миниатюры – не менее 190х190 px.
• Оптимальный размер – 288х288px
• Максимальное разрешение файла – 1680х1680 px.
• Фотография профиля в Одноклассниках имеет квадратную форму. 


Размер обложки в Одноклассниках – 1944х600 px.

• «Безопасная зона», чтобы сохранить содержимое обложки на разных устройствах – 980х240 px от середины картинки.
• Закрепив обложку в альбом, пользователи смогут комментировать ее.


Размер картинки поста в Одноклассниках – 780х585 px.

• Максимальное разрешение – 1680х1680 px.
• Обложка для мобильной версии (ее можно загрузить отдельно) – не менее 1024х768 px.
• Соотношение сторон – 4:3
• В новостной ленте пост отображается размером 548х411 px.
• В раскрытом состоянии размеры изображений – 780х585 px.
• Можно загружать квадратные, вертикальные и горизонтальные изображения. Стороны картинки масштабируются до граничных показателей.


Реклама:


Рекламные форматы для продвижения страниц и групп в Одноклассниках (источник: ОК-Медиакит-2019)

• тизер – не менее 90х75px и не более 60Кб. Располагается в правой и левой колонках в полной версии сайта;
• баннер – 240х400px, не более 60Кб. Отображается в правой части сайта на ПК;
• мультиформат – несколько изображений не менее 256х256, 1080?607, 600х600px;
• карусель – от 3 до 6 карточек размером 600х600px.


Рекламные форматы для продвижения игр в Одноклассниках (источник: ОК-Медиакит-2019)

• продвижение игр: баннер 128х128 px в разделе «Игры для вас»
• Размер файла для рекламного объявления – не более 150 Кб.


Форматы изображений: GIF, JPG и PNG.

Facebook


При создании визуального контента учитывайте, что картинки в Facebook по-разному отображаются в Хронике (Timeline) и в новостной ленте друзей.


Размер фотографии бизнес профиля – 180х180 px.

• Фото имеет круглую форму.
• На компьютере фото отображается в формате 170х170, на смартфоне – 128х128, на кнопочном телефоне – 36х36, миниатюра – 32х32 px.

• Длинные логотипы брендов также обрезаются по форме квадрата.


Размер обложки страниц – 820х312 px.

• Картинка обложки показывается только на странице профиля.
• Минимальный размер обложки – 400х150 px,
• Фото обложки отображается в формате 820х312 px на десктопе и 640х360 на смартфоне.
• Маленькие изображения растягиваются, теряя в качестве.


Форматы изображений: sRGB и JPG размером менее 100 килобайт.

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


Размер картинки для поста – не менее 1200х630 px.

• В новостной ленте иллюстрация масштабируется до ширины 470 px.
• На странице профиля масштабируется до ширины 504 px.


Размер изображения со ссылкой – 1200х628 px.

• Картинки квадратной формы показаны с разрешением 154х154 px в ленте и 116х116 px в профиле.
• Картинки прямоугольной формы показаны с разрешением 470х246 px в ленте и 428х252 px в профиле.


Выделенное (Highlighted) изображение в профиле – 1200х717 px.

• В Timeline отображается с разрешением 843х504 px.
• Рекомендуем использовать изображения с большим разрешением, сохранив масштаб.


Размеры обложек событий – 1920х1080 px.

• Обложка отображается с разрешением 470х174 px.


Реклама


Размеры изображений для всех мест размещений в Facebook:

• лента новостей – не менее 254х133px;
• истории – не менее 500х889px. Идеально – 1080?1920px;
• Audience Network: нативная, баннерная и межстраничная реклама – не менее 254?133px;
• моментальные статьи – не менее 254х133px;
• Marketplace – не менее 254х133px;
• истории в Messenger – не менее 500х889px;
• кольцевая галерея – 1080х1080px.


Смотрите также «Рекомендации по выбору соотношения сторон» в Справочном центре Facebook для бизнеса.

Instagram


Размер аватара в профиле – 110х110 px.

Размер фото в постах – 1080х1080 px.

• загруженные фотографии представлены в виде квадратных миниатюр на странице, на которых также должно быть четко видно содержимое поста.
• Фотоконтент отображается с разрешением 612х612 px.
• В новостной ленте фото отображается в размере 510х510 px.
• Миниатюра поста составляет 161х161 px.
• Для прямоугольных фотографий (портретных) лучше выбрать разрешение 1080х1350 px, либо сохранить соотношение 4:5.


Размер Сторис – 1080х1920 pх.

• В Instagram Сторис можно загружать как вертикальные, так и горизонтальные изображения с соотношением сторон от 9:16 до 1.91:1.
• Для вертикальных картинок в историях рекомендован размер 1080х1920 px.
• Размер фото в Сторис позволяет делиться личными фото во весь рост или большими объявлениями с текстом.
• Минимальный размер фото или видео для Сторис – 600х1067 px.
• Пропорции 9:16.
• Допустимый вес файла – 4 Гб.


Картинка для обложки IGTV – 420х654 px.

• Рекомендуется использовать изображения с соотношением сторон 1:1. 55.


Реклама в Ленте Instagram и вкладке «Интересное»

• Квадрат: от 600х600 до 1936х1936 px (соотношение сторон – 1:1).
• Альбомная ориентация: от 600х315 до 1 936х1 936 px (соотношение сторон – 1.91:1).
• Вертикальный формат: от 600х750 до 1 936х1 936 px (соотношение сторон – 4:5).
• При создании объявления можно обрезать изображение во встроенном редакторе.

Youtube


Размер изображений на странице Youtube


Размер аватара канала – 800х800 px.

• Youtube сжимает изображение до 98х98 px.
• Форматы: JPG, BMP, PNG и GIF-файлы без анимации.


Размер изображения шапки канала: 2560х1440 px.

• Область картинки, содержимое которой будет отображено на любом устройстве – 1546х423 px от центра изображения.
• Максимальный вес файла – 4 Мб.
• Форматы: JPG, GIF, BMP или PNG.
• На ПК шапка отображается с разрешением 2560х423 px, на планшете – 1855х423 px, на смартфоне – 1546х423 px, на TV – 2560х1440 px.


Картинка для обложки альбома: от 1400 x 1400 до 4098 x 4098 px

• Соотношение сторон – 1:1
• Вид обложки зависит от типа устройства, на котором просматривается канал.
• YouTube рекомендует загрузить одно изображение размером 2560х1440 px и учитывать, что «безопасная зона», при размещении в которой ваш текст или логотип не будет обрезан – 1546х423 px по центру изображения.


Размер видео (Full HD) – не менее 1280х720 px.

• Соотношение сторон видеоролика – 16:9.


Превью видео – 1280х720px.

• Превью видео – это изображение, которое показывается при предпросмотре.
• Допустимые форматы – JPG, GIF, GMP или PNG.


Реклама на Youtube

• Медийные объявления – 300х250 px или 300х60 px.


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

• Оверлеи – 468х60 или 728х90 px.


Полупрозрачные оверлеи появляются в нижней части (20%) окна просмотра видео.

Twitter


Размер фото профиля – 400х400 px.

• Фото отображается круглой формы, разрешением 200х200 px.
• Допустимый вес файла – 2 Мб.
• Форматы: JPG, PNG и GIF-файлы без анимации.


Размер шапки Твиттера – 1500х500 px.

• Максимальный вес файла – 5 Мб.
•  Соотношение сторон 3:1.
•  Форматы: JPG, PNG и GIF без анимации.


Размер фото поста в Твиттере – не менее 440х220 px.

• Все фото и картинки для Твиттера нужно центрировать по горизонтали.
• Максимальное разрешение изображения – 1024х512 px.
• Разрешение в ленте – 506х253 px.
• В один твит можно загрузить до 4 изображений.
•  Максимальный вес файла 5 Мб для мобильной версии и 15 Мб для десктопной.


Реклама в Twitter


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

Pinterest


Все загруженные иллюстрации и фото называются пинами (pin).


Размер изображений на странице Pinterest


Размеры аватара – 165х165 px.

•  Если зарегистрироваться на Pinterest через Facebook или Twitter, сервис скопирует фото профиля на аккаунт Пинтерест.


Обложка доски

• Рекомендуемый сайтом размер – 200х200px, но лучше брать 600х600 или 800х800px.


Размеры пина – 1000х1500 px.


· Минимальное разрешение 600х900 px.


· Оптимальное соотношение сторон 2:3.


· На странице профиля и в поисковой выдаче пин имеет ширину 236 px. Высота масштабируется.

• Допустимый вес файла 10 Мб.
• Форматы: JPG и PNG.


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


Рекламные пин-карусели

• Количество изображений в пин-карусели: от 2 до 5.
• Тип файла: PNG или JPEG.
• Максимальный размер файла: 32 МБ на одно изображение
• Соотношение сторон: 1:1 или 2:3.


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


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


Размер изображений на странице Linkedin


Размер аватара бизнес-профиля компании – 300 x 300px (не более 4 мб).

Размер фоновой обложки компании – 1536х768 px (не более 4 мб).

• Минимальный размер обложек на странице – 1192х220 px.
• Имидж логотип компании – 60х60 px.
• Форматы: JPG, PNG, GIF без анимации.

Пост или ссылка с изображением – 1200х627px.

• Соотношение сторон 1.91:1.

Размер главного баннера на странице компании – 646х220 px.

•  Вес файла не более 2 мб


Изображение для поиска сотрудников – 1128х376 px.

Обзорное изображение – не менее 360х120 px.

• Это изображение появляется, если включен параметр «Карьерные страницы» (Career Pages) за определенную плату.

Вкладка «Life» (Оплаченный):


· В ленте изображение сжимается до 520х272 px.

• Эти фотографии отображаются, при включенном параметре «Карьерные страницы» – за определенную плату.
• Разрешены форматы PNG или JPEG.
• Изображение Hero – не менее 1128х376 px.


Также можно вставлять видео на YouTube.

• Изображения «настраиваемые модули» – не менее 502х282 px.
• Фотографии компании – 900х600 px. Минимум: 264х176 px.

iphone — Какие размеры используются для заставки приложения iOS?

спросил
12 лет, 11 месяцев назад

Изменено
2 года, 9 месяцев назад

Просмотрено
176 тысяч раз

Я разрабатываю приложение с помощью iOS SDK. Мне нужно знать, какие размеры экрана-заставки по умолчанию мне нужны.

• iphone
• ios
• ipad
• заставка
• ipod-touch

1

Я оставляю сообщение ниже для справки.

Подробные сведения об экранах запуска и рекомендации см. в документации Apple «Руководство по человеческому интерфейсу — экраны запуска».

Спасибо
Drekka

---

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

Да. При разработке iPhone/iPad файл Default.png отображается устройством автоматически, поэтому вам не нужно программировать его, что действительно полезно. У меня его нет с собой, но нужны разные PNG для iPad с конкретными именами. Я погуглил iPad default png и получил эту информацию с сайта phunkwerks :

---

iPad Launch Image Orientations

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

Имя файла Размеры

• Default-Portrait.png * — 768 x 1024
• Default-PortraitUpsideDown.png — 768 x 1024
• Default-Landscape.png ** — 1024 x 748
• Default-LandscapeLeft.png — 1024 x 748
• Default-LandscapeRight.png — 1024 x 748
• iPad-Retina–Portrait.png — 1536 x 2048
• iPad-Retina–Landscape.png — 2048ш x 1496ч
• Default.png — Не рекомендуется

* — если вы не указали файл Default-PortraitUpsideDown.png , этот файл будет иметь приоритет.

** — если вы не указали файл изображения Default-LandscapeLeft.png или Default-LandscapeRight.png , этот файл будет иметь приоритет.

Эта ссылка на «Библиотеку разработчиков Apple» тоже полезна.

7

По состоянию на июль 2013 г. (iOS 6) мы всегда используем:

 IPHONE SPLASH.
По умолчанию.png - 320 x 480
По умолчанию@2x.png - 640 x 960
По умолчанию[email protected] — 640 x 1096 (со строкой состояния)
По умолчанию[email protected] — 640 x 1136 (без строки состояния)
Всплеск IPAD
iPadImage-Appname-Portrait.png * 768x1004h (со строкой состояния)
[email protected] * 1536 x 2008 (со строкой состояния)
iPadImage-Appname-Landscape.png ** 1024x748h (со строкой состояния)
[email protected] ** 2048 x 1496 часов (со строкой состояния)
iPadImage-Appname-Portrait.png * 768x1024h (без строки состояния)
[email protected] * 1536 x 2048 (без строки состояния)
iPadImage-Appname-Landscape.png ** 1024 x 768 (без строки состояния)
[email protected] ** 2048 x 1536 (без строки состояния)
ИКОНА
Имя приложения-29.png
Имя приложения[email protected]
Имя приложения-50.png
Имя приложения-50@2x. png
Имя приложения-57.png
Имя приложения[email protected]
Имя приложения-72.png
Имя приложения[email protected]
iTunesArtwork (512 x 512 пикселей)
iTunesArtwork@2x (1024 x 1024 пикселей)
 

1

Для iOS7 создайте стартовые изображения следующих размеров:

Для iPhone 5 и iPod touch (5-го поколения):

• 640 x 1136 пикселей

Для других устройств iPhone и iPod touch:

• 640 x 960 пикселей
• 320 x 480 пикселей (стандартное разрешение)

Для портретной ориентации iPad:

• 1536 x 2048 пикселей
• 768 x 1024 пикселей (стандартное разрешение)

Для iPad альбомной ориентации:

• 2048 x 1536 пикселей
• 1024 x 768 пикселей (стандартное разрешение)

См. Ресурсы для дизайна iOS 7 > Руководящие принципы интерфейса пользователя iOS > Изображения запуска

ОБНОВЛЕНИЕ 1

Для iPhone 6:

• 750 x 1334 (@2x) для портретной ориентации
• 1334 x 750 (@2x) для альбомной ориентации

Для iPhone 6 Plus:

• 1242 x 2208 (@3x) для портретной ориентации
• 2208 x 1242 (@3x) для альбомной ориентации

ОБНОВЛЕНИЕ 2

Для iPhone X:

• 1125 x 2436 (@3x) для вертикальной ориентации
• 2436 x 1125 (@3x) для альбомной ориентации

2

Вы можете сделать их 1024 x 768. Вы также можете проверить «Строка состояния изначально скрыта» в файле plist.

В Xcode 11 вы можете предоставить только одно изображение с масштабами 1x, 2x и 3x, а затем установить его в LaunchScreen.storyboard , чтобы заполнить экран, и все идет хорошо!

Например: (1242pt x 2688pt @1x)

Это портретный размер экрана iPhone 11 Pro Max , который является большим размером экрана iPhone, поэтому он даст вам высококачественную заставку на всех устройствах iOS.

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

Удачи.

320×480

640×960

640×1136

750×1334

768×1004

768×1024

828×1792

1024×748

1024×768

1125×2436

1242×2208

1242×2688

1536×2008

1536×2048

1792×828

2048×1496

2048×1536

2208×1242

2436×1125

2688×1242

Количество требуемых изображений: 26 изображений
но есть 6 дублирующихся размеров
так что вы найдете вышеуказанные размеры только 20.

5

Здесь я могу добавить разрешения и характеристики дисплея для iphone 6 и 6+ Размер:

iPhone 6+ — Разрешение актива (@3x) — Разрешение (2208 x 1242)px

iPhone 6 — Разрешение актива (@2x) — Разрешение (1334 x 750)px

iPad Air / Retina iPad (1-го и 2-го поколения / 3-го и 4-го поколения) — Разрешение объекта (@2x) — Разрешение (2048 x 1536)px

iPad Mini (2-го и 3-го поколения) — Разрешение актива (@2x) — Разрешение (2048 x 1536)px

iPhone (6, 5S, 5, 5C, 4S, 4) — Значок приложения (120×120 пикселей) — Значок AppStore (1024×1024 пикселей) — Spotlight (80×80 пикселей) — Настройки (58×58 пикселей)

iPhone (6+) — Значок приложения (180×180 пикселей) — Значок AppStore (1024×1024 пикселей) — Spotlight (120×120 пикселей) — Настройки (87×87 пикселей)

5

Для Xcode 9 и новейших устройств

Портрет

iPhone 4/4S 640 x 960

iPhone 5/5C/5S iPod touch 5-го поколения 640 x 1136

iPhone 6/7/8 7 50 x 1334

iPhone 6/7/8 плюс 1242 x 2208

iPhone x 1125 x 2436

iPad non-retna 925 x 2436

iPad non-retina 768 9008 x 1024

IPAD Retina 1536 x 2048

Ландшафт

iPhone 6, 7 и 8 плюс 2208 x 1242

iPhone x 2436 x 1125

IPPHANE x 2436 x 1125

.

iPad ретина 2048 x 1536

В iOS 7+ статические изображения запуска больше не рекомендуются.

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

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html

С универсальным приложением у меня была заставка iPad, которая появлялась в симуляторе, но не на устройстве. Вместо этого на iPad будет отображаться заставка Default.png для iPhone. Файлы Default-Landscape.png и Default-Portrait.png существуют, так что? Разрешение должно быть правильным, так как я создал снимки экрана, используя Window | Организатор | Скриншоты и использовали «Сохранить как изображение по умолчанию» для iPad, а затем просто переименовали его.

Оказывается (по крайней мере, из моего единственного приложения) два снимка экрана iPad должны быть перемещены в каталог Resources-iPad. Тогда все работает нормально. Сейчас это кажется очевидным, но если кто-то еще потерял сон из-за этого…
-Larry

Для разработчиков Adobe AIR iOS обратите внимание, что если изображения-заставки вашего iPad «сдвигаются» или отображаются и масштабируются на секунду позже, это связано с тем, что существуют разные размеры в зависимости от используемой версии AIR.

Default-Portrait.png:
768 x 1004 (AIR 3.3 и более ранние версии)
768 x 1024 (воздух 3,4 и выше)


По умолчанию [email protected]:
1536 X 2008 (AIR 3.3 и ранее)
1536 x 2048 (AIR 3.4 и выше)


.
http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d38e593cd1bac58d08f9112e26606ea8-8000

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

размеров заставки Android для дисплеев ldpi, mdpi, hdpi, xhdpi? — например: 1024X768 пикселей для ldpi

Размеры заставки для Android

и в то же время для Cordova (a. k.a Phonegap), React-Native и всех других платформ разработки

 Формат: 9-Patch PNG (рекомендуется)
Размеры
 - ЛДПИ:
    - Портрет: 200x320px
    - Пейзаж: 320x200px
 - МДПИ:
    - Портрет: 320x480px
    - Пейзаж: 480x320px
 - HDPI:
    - Портрет: 480x800px
    - Пейзаж: 800x480px
 - XHDPI:
    - Портрет: 720px1280px
    - Пейзаж: 1280x720px
 - ХХХДПИ
    - Портрет: 960x1600px
    - Пейзаж: 1600x960px
 - ХХХХДПИ
    - Портрет: 1280x1920px
    - Пейзаж: 1920x1280px
 

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

Обратите внимание

Я думаю, что нет точного размера для всех устройств. Я использую Xperia Z 5″. Если вы разрабатываете кроссплатформенное приложение для веб-просмотра, вы должны учитывать множество вещей (есть ли на экране программные кнопки навигации или нет и т. д.). Поэтому я думаю, что есть только одно подходящее решение. Решение состоит в том, чтобы подготовить Экран-заставка с 9 патчами (найдите Как создать новый экран-заставку ниже).

1. Создание экранов-заставок для указанных выше размеров экрана, например 9-patch . Дайте имена вашим файлам с .9.png суффиксами
2. Добавьте приведенные ниже строки в файл config.xml

.

3. Добавьте подключаемый модуль экрана-заставки, если это необходимо.
4. Запустите свой проект.

Вот оно!

Специальный код Cordova
Для добавления строк в config.xml для 9-патч заставки

 

<название платформы="андроид">
    
    
     9.png" плотность="hdpi"/>
    

 

Добавлять строки в config.xml при использовании экранов-заставок , отличных от -9-patch

Как создать новый экран-заставку

Я бы описал простой способ создания правильного экрана-заставки, используя этот способ. Предположим, мы разрабатываем экран с разрешением 1280dp x 720dp — xhdpi (x-large). Я написал для примера ниже;

• В Photoshop: Файл -> Создать в новом диалоговом окне установите экраны

  Ширина: 720 пикселей
  Высота: 1280 пикселей

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

  точек на дюйм

  Поздравляем… У вас есть шаблон экрана-заставки 720dp x 1280dp.

Как создать экран-заставку с 9 патчами

После того, как вы спроектировали экран-заставку, если вы хотите создать экран-заставку с 9 патчами, вы должны вставить зазор в 1 пиксель с каждой стороны. По этой причине вы должны увеличить ширину и высоту вашего холста на +2 пикселя (теперь размеры вашего изображения составляют 722 x 1282).

Я оставил пустой зазор в 1 пиксель с каждой стороны, как указано ниже.
Изменение размера холста с помощью Photoshop:
— Откройте файл png-заставки в Photoshop
— Щелкните значок замка рядом с именем «Фон» в поле «Слои» (чтобы оставить пустым вместо другого цвета, например белого), если есть как показано ниже:

— Измените размер холста в меню «Изображение» (Ширина: от 720 до 722 пикселей и Высота: от 1280 до 1282 пикселей). Теперь вы должны увидеть зазор в 1 пиксель с каждой стороны изображения заставки.

Затем вы можете использовать C:\Program Files (x86)\Android\android-studio\sdk\tools\draw9patch.bat для преобразования файла с 9 патчами. Для этого откройте заставку в приложении draw9patch. Вы должны определить свой логотип и расширяемые области. Обратите внимание на черную линию на следующем примере экрана-заставки. Толщина черной линии всего 1 пиксель 😉 Черные линии слева и сверху определяют область отображения экрана-заставки. Точно так, как вы разработали. Правая и Нижняя линии определяют добавляемую и удаляемую области (автоматически повторяющиеся области).

This entry was posted in Популярное