Круглая аватарка из фото

Как делается круглая аватарка и в чём подвох формата

Инструмент вырезает из фотографии круг и сохраняет его с прозрачным фоном. Технически круглой картинки не существует: файл всегда прямоугольный, круг получается прозрачными углами. Поэтому сохранять нужно в формате с прозрачностью — PNG или WebP; в JPEG углы станут белыми или чёрными.

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

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

История: камеи, медальоны и возвращение круга в интерфейсы

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

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

Как кадрировать и какой размер брать

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