Как сделать круглую аватарку — чтобы ничего не обрезалось

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

Геометрия: что именно отрезается

Вписанный в квадрат круг занимает ~78,5% его площади — то есть пятая часть картинки гарантированно уходит в мусор, и вся она — углы. Дальше хуже: некоторые платформы кадрируют с запасом, а интерфейсные элементы (значок онлайна, бейдж «плюс» у сторис) наезжают на край круга. Отсюда практичная формула безопасной зоны:

• Центр (60% стороны) — зона гарантии: сюда — знак и главное.
• Кольцо 60‑80% — зона риска: фоновые элементы, допустимые к подрезке.
• Углы и край — расходный материал: только фон.

Размеры площадок

Один мастер‑файл 800×800 с запасом закрывает всё: платформы уменьшают сами, а вот увеличить маленькую картинку без потерь нельзя — почему так происходит, мы объясняли отдельно.

Готовим аватарку из логотипа

1. Возьмите компактный знак, не полный логотип. Текстовая часть в круге диаметром 40 пикселей нечитаема — нужна иконочная версия — о том, чем иконка отличается от логотипа и зачем вообще нужны разные версии знака, мы рассказывали отдельно.
2. Холст‑квадрат, знак по центру. В Figma: фрейм 800×800, знак — 55‑65% ширины, строго по центру. Для проверки наложите сверху окружность‑шаблон и убедитесь, что ничего не выпирает.
3. Задайте фон. Прозрачный фон платформы зальют своим цветом (в тёмной теме — тёмным, и чёрный знак исчезнет). Надёжно: фирменный цвет фона + контрастный знак — о том, как подобрать такую пару, мы писали отдельно.
4. Не рисуйте круг сами. Частая ошибка — вписать знак в белый круг на квадрате «для надёжности»: платформа обрежет своим кругом чуть иначе, и получится кольцо‑артефакт по краю.
5. Экспорт в PNG 800×800 — почему не JPG для такой графики.

Готовим аватарку из фото

Для личных профилей и персональных брендов работают правила портрета:

• Лицо — в верхних двух третях круга, глаза — примерно на трети от верха: кадрирование по пояс «в упор» читается хуже, чем голова с воздухом.
• Обрезайте сами, не доверяйте автокропу: платформа возьмёт центр квадрата, а не центр лица.
• Контраст с фоном. Лицо на пёстром фоне в 40 пикселях сливается — уберите или размойте фон, добавьте однотонную подложку.
• Инструменты: кадрирование кругом есть в любом редакторе — от Просмотра на Mac до онлайн‑кропперов; в Figma — фрейм с закруглением 50% для предпросмотра.

Проверка: три размера

Аватарка живёт в трёх масштабах, и проверять нужно все:

1. Страница профиля (~100‑160 px) — здесь красиво почти всё.
2. Список чатов / лента (~40‑48 px) — здесь умирает текст и тонкие линии; главная проверка.
3. Мини‑контексты (~24 px): комментарии, реакции, «печатает…» — здесь выживает только пятно цвета и силуэт. Ровно поэтому цвет — главный актив аватарки, как и фавиконки.

Частые ошибки

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

Смежные гайды: логотип для Telegram‑канала, для YouTube, для сообщества ВКонтакте и размеры логотипа для всех площадок. Компактные версии знаков для аватарок — у большинства брендов в каталоге.