Круглая обрезка: как компоновать кадр, чтобы ничего не потерять

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

Геометрия

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

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

Правила компоновки

1. Лицо по центру, слегка выше геометрической середины: так остаётся место под подбородком и не срезается макушка.
2. Размер лица — около двух третей диаметра круга. Меньше — теряется различимость, больше — голова упирается в края.
3. Отступ над головой: небольшой, но обязательный. Круг режет по дуге, и волосы сверху уходят первыми.
4. Плечи попадают в нижнюю часть круга частично: они дают опору композиции, но не обязательны.
5. Углы кадра — только фон, ничего значимого.

Типичные ошибки

• Лицо смещено вбок: при круглой обрезке смещение усиливается визуально.
• Голова слишком крупная: макушка и подбородок срезаются дугой.
• Кадр из портрета без перекомпоновки: лицо оказывается маленьким в центре большого круга.
• Важная деталь в углу: логотип, элемент одежды, часть жеста — всё это исчезает.
• Наклонённая голова, упирающаяся в край: при повороте больше запаса нужно с той стороны, куда наклон.

Квадрат или скруглённый квадрат

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

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

Фон в углах

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

Практично: держать углы чистыми в любом случае. Это ничего не стоит и избавляет от необходимости готовить разные версии.

Проверка на разных площадках

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

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