Высота это первое что стоит учитывать при создании аватарки для сообщества ВК.
Монитор (разрешение)
Первое, что стоит учитывать при создании аватарки для сообщества, так это разрешения монитора. У В Контактика фиксированная ширина, а высота – “бесконечная” (постоянно подгружается)
Какое же разрешение стоит выбрать?
Случилось эпичное событие: разрешение 1024*768 перестало быть самым популярным. С первого места его сместило разрешение 1366*768, которое стоит на большинстве ноутбуков (все пересели с настольных ПК на ноутбуки).
Значит, по высоте мы ограничены в 768 пикселей (на картинке ошибка: перепутал высоту и ширину)
Самая популярная операционная сеть – Win 7, как ни крути. Внизу у нас есть плашка панели задач, которая тоже сжирает место по высоте.
И так, минимум панель задач в Вннде 7 сжирает 40 пикселей. Итого у нас по высоте уже 768-40=728. Идем дальше. (на картинке ошибка: перепутал высоту и ширину)
Самый популярный браузер в мире – Google Chrome. Он тоже отнимает драгоценное пространство по высоте
Милый хром своими вкладками сжирает 30 пикселей, а адресной строкой 31 (а может и 30. мерил на глаз). Итого 60-61 пиксель обязательно сожрет браузер и никуда от этого не деться. Про другие браузеры чуть позже.
Кроме вкладок и адресной строки, которые никуда не денешь, у многих пользователей могут быть открыты закладки. Я, например, их постоянно держу развернутыми, так как это экономит время (быстрый доступ к часто используемым сайтам). Закладки отнимают еще 30 пикселей. Итого Google Chrome по высоте может отнимать от 61 до 91 пикселя.
Значит получаем 728 – 61(91) = 667(637) , а это уже меньше максимально допустимой высоты аватарки в 700 пикселей.
Дальше вступают ограничения самого Контакта.
40 пикселей кушает верхняя навигационная панель ВК. Еще 29пикселей прямоугольник(“тип”), на которой написан тип сообщества и 10 пикселей отступ от “типа” до заветной аватарки.
Итого 40+29+10=79 пикселей на навигацию ВК.
667(637) – 79 = 588 (558 – с панелью закладок)
558 пикселей – максимальная высота аватарки в ВК, которую будет полностью видно на первом экране ноутбука с разрешением 1366*768 пикселей. Но это еще не все!
Если вы хотите, чтобы люди могли подписаться на ваше сообщество легко и без лишних действий, то вам надо учитывать следующие моменты:
Кнопка “подписаться” должна быть на первом экране
Любой специалист по юзабилити скажет вам, что важные элементы должны быть на первом экране. Кнопка “подписаться” таковым элементом является. А это значит, что она уменьшит высоту нашей “идеальной” аватарки.
Давайте разберемся в размерах:
- блок “подписатьсявступить в группу” съедает 77 пикселей
- если это публичная страница и её упоминали в своих записях пользователи, то появляется блок “упоминания” публичной страницы. Вместе со всеми отступами он сожрет 43 пикселя
Итого у нас получается:
- 588 (558) – 77 = 511(481 – с панелью закладок) – для группы
- 588 (558) – (77+43) = 468(438 – с панелью закладок)
Другие браузеры
Я пользуюсь Хромом, потому что он экономит пространство экрана под то, что важно – веб-страницу. Все элементы браузера скомпонованы так, что по высоте он максимум отнимает всего 61-91пиксель. Тот же Firefox без всякой установленной фигни сожрет больше. Тут еще конечно стоит вспомнить про яндекс.бар и другие панели, устанавливаемые в браузерах типа лисы и осла, наверное и в опере что-то есть, но я ей пользовался всего пару раз.
Так вот, панели. Они тоже отнимают какое-то пространство по высоте, и я бы накидывал к полученным выше значениям высоты аватарки для группы и публичной странице по 50px … то есть отнимал!
Размеры идеальной аватарки для группы и публичной страницы
- для группы – 431 пиксель +50*
- для публичной страницы – 388 пикселей +50*
*50 – это запас для других браузеров. Можно не использовать.
После недавнего обновления у Facebook сменились рекомендуемые размеры для оформления, наиболее оптимальные:
— Шапка должна быть 851х314px, но можно взять размер побольше, сохранив пропорции.
— Аватар – 180х180px, но можно загрузить и более высокое разрешение.
VK
Размер аватара группы/паблика должен иметь ширину 200px, а высоту до 500px. Если вы хотите себе квадратный логотип — пожалуйста, загружайте картинку 200 на 200, вертикальный — 200 на 300/400/500.
Твиттер также недавно позволил загружать изображения более высокого разрешения, после обновления стало понятно, что рекомендуемые размеры ориентированы на широкоформатные мониторы высокого разрешения.
Для адекватного отображения минимальный размер шапки должен быть 1500х500px, но советуем взять больше, чтобы не было смазывания.
Аватар – минимум 400х400px.
Google Plus
Минимальное разрешение — 480х270px, но будьте готовы, что на высоком разрешении изображение будет размываться, так как G+ «растягивает» его. Берите максимально доступный размер.
Аватар также редактируется и ставится в форме круга, рекомендуем загружать размером от 250x250px.
Одноклассники
OD позволяет загрузить только уникальный аватар. Шапку изменить можно, но только выбрав одну из предложенных.
Размер логотипа может быть любым, т.к. обрезается до 190х190px и должен иметь форму квадрата. Для нормального отображения достаточно загрузить лого 300 на 300px.
YouTube
Тут наверняка возникнут проблемы, т.к. youtube не растягивает шапку, а «центрирует» ее. Поэтому, если вы хотите на логотипе поместить важную информацию, адрес или контакты, старайтесь разместить их ближе к центру.
— Максимальные «вес» — 2 мб.
— Рекомендованный размер — 2560х1440px
Размер аватарки Вконтакте может быть любой. Единственное важное условие – это пропорции 2/5, где 2 – ширина, а 5 – высота аватарки. Это максимальное соотношение, то есть все остальное встроенный редактор Вконтакте просто обрежет.
Если в пропорциях понять сложно, вот таблица с размерами. В ней четко прописаны максимальные ширина и высота аватарки в пикселях. Чем больше пикселей, тем более детализированно будет выглядеть ваша аватарка.
Обратите внимание, что вы можете загрузить картинку только в форматах JPG, GIF или PNG. Создавайте правильные аватарки!
Ширина аватарки (в пикселях) |
200 | 300 | 400 | 500 | 600 | 700 | и т.д. |
Высота аватарки (в пикселях) |
500 | 750 | 1000 | 1250 | 1500 | 1750 | и |
Важные параметры изображений в Вконтакте (VK)
- Аватар в сообществах — 200х300 px (200×500 px) в пропорции 2 к 5. Аватар на личной то странице — 200х500 как и ранее. Можно загружать изображения и большего размера – до 7000 px с каждой стороны. Главное, чтобы соотношение сторон не превышало 2 к 5.
- Миниатюра аватара — круг диаметром 200 px. В настройках загрузки можно перемещать и изменять диаметр.
- Новостное изображение баннера в группе: 510х271 px.
Чтобы картинка аватара или поста не искажалась, необходимо при сохранении в Ps выбрать ФАЙЛ>СОХРАНИТЬ ДЛЯ WEB> в открывшемся окне выбрать функцию sRGB. Если вы постараетесь загрузить изображение менее 200 пикселей в ширину или в длину, вы увидите ошибку. Однако опыт SMMщиков говорит о том, что этот метод не дает отличного результата. Чтобы изображение не уменьшались (в гораздо меньшей степени) – делать их в 2-3 раза больше нужного размера.
Загружать изображение рекомендуется обычным перетаскиванием с локального компьютера на строчку загрузки в ВК. Этот способ рекомендует техническая поддержка Вк, также они рекомендуют загружать изображения до 1000 px.
В новом дизайне VK, ширина ленты новостей — фиксирована, поэтому изображение, прикрепляемое к посту, больше не растягивается. Поэтому, что бы изображение полностью заняло отведенное ему место в ленте новостей, его ширина должна быть не меньше 510 пикселей.
Изображения к постам со ссылкой
Изображения к постам со ссылкой – это изображения, которые автоматически «подтягиваются» к посту, когда вставляется ссылка. Данные берутся из разметки Open Graph. Если Open Graph нету на сайте, заголовок и описание вытягиваются из Title и Description, а изображение – из страницы, его можно менять с помощью специальных стрелочек.
Изображение для Вики-страницы
Чтобы изображение занимало всю ширину вики-страницы, выберите изображение не меньше 610 px в ширину, либо большего размера главное в пропорции. Вы можете взять картинку и большей ширины, но тогда необходимо вручную подредактировать их размеры.
Товары ВКонтакте
Размер изображений для товаров должны быть минимум — 400рх, максимум — 7000рх по одной из сторон, оптимальный же размер будет 1000рх на 1000рх, всего можно добавлять 4 фото к одному товару. Изображение «подборки» — 580рх на 320рх.
Размер обложки для группы вконтакте
Из-за своего размера обложка позволяет добавляет больше возможностей при оформлении группы. Название, миниатюра (аватар), статус и главные кнопки остаются на тех же местах, но переместились ниже под обложку.
Что бы включить обложку для групп в вконтакте заходим в «Действия», что находится сразу под авкой группы, где выбираем «Управление», где есть пункт «Обложка Сообщества», нажимаем загрузка – готово. Рекомендуемый размер обложки составляет 795x200px, но стоит добавлять в размере 1590x400px для оптимального отображения на больших экранах.
Размер изображений альбома (фотостатус) в группе VK
Фотостатус, это минюатюры изображений, которые отображаются в основном альбоме. Их оптимальный размер — 123px на 123px. Для правильного их отображения в профили, загружайте их в основной альбом группы последовательно ,по очереди, начиная с последней (правой), потому что последняя загруженная миниатюра становится самой левой.
Изображение профайла (аватар), имеет максимальный размер 180х180 пикселей, идеальным будет изображение 160х160 пикселей, чтобы оставалось место для фона.
Изображение обложки, имеет максимальный размер – 851х315 пикселей, все что более. Будет обрезаться. Минимальный размер обложки – 399х150 пикселей.
Для изображения обложки, идеально подходят файлы JPG не более 100 KB.
YouTube
Размер обложки вашего канала на YouTube, может быть нескольких размеров, так как платформа используется для разных видов устройств:
Для стационарных ПК – 2560х1440 пикселей
Для планшетов – 1855х423 пикселя
Для телевизоров – 2560х1440 пикселей
Изображение обложки имеет размер – 1500х500 пикселей, максимальный размер изображения не должен превышать 10MB, рекомендуется использовать файлы в GIF, JPEG, PNG.
Изображение профайла – 400х400 пикселей. Рекомендуется использовать файлы JPEG, PNG, размером не более 100 KB.
Размер публикуемого изображения – 400х220 пикселей, максимальный размер файла. 5MB и 3 MB для GIF файлов.
Google+
Изображение профайла имеет форму круга, размером 250х50 пикселей, загружать изображение можно и большего размера, но вам нужно будет убедиться в том, что важные области не будут обрезаны.
Изображение обложки рекомендуется использовать в размере – 1080х608 пикселей, максимальное изображение – 2120х1192 пикселей, минимальное — 480х270 пикселей.
Изображение профайла имеет размер – 110х110 пикселей.
Изображения, загруженные в профиль, имеют размер – 161х161 пиксель.
Максимальный размер загружаемого фото – 640х640 пикселей. Все, что более, обрезается.
Изображение профайла – 165х165 пикселей находясь на домашней странице, в общем виде, оно имеет размер — 32х32 пикселя.
Наиболее важным изображением в Pinterest, является оформление обложки доски, оно имеет размер – 220х150 пикселей.
Четыре (рандом) изображения внизу доски, имеют размер – 50х50 пикселей.