Большинство фото профиля показываются как круги, но загружаемый вами файл всё равно квадратный — поэтому углы обрезаются непредсказуемо. Этот инструмент обрезает ваше изображение в настоящий круг (или скруглённый квадрат) и экспортирует PNG с прозрачным фоном, так что он чисто встаёт в любой слот аватара, подпись или слайд.
Сначала он обрезает по центру в квадрат, затем накладывает маску формы в полном разрешении. Всё работает в вашем браузере — фото не загружается на сервер.
Как пользоваться
- Добавьте фотоПеретащите изображение, которое хотите сделать аватаром.
- Выберите формуКруг, скруглённый квадрат или обычный квадрат — с прозрачным или белым фоном.
- Скачайте PNGСохраните PNG с прозрачным фоном, квадратный по размеру и готовый к использованию.
Circle Crop превращает любое изображение в круглый аватар, скруглённый квадрат или простой квадрат и экспортирует его как PNG. Он центрируется на наибольшем квадрате, который можно взять из середины вашей фотографии, затем накладывает форму на этот квадрат в полном разрешении, так что край круга остаётся резким, а не масштабируется из маленького превью. Экспортируйте с прозрачным фоном — и углы за пределами формы выходят пустыми, а не белыми.
Всё работает в вашем браузере. Изображение декодируется, обрезается, маскируется и кодируется в PNG на вашем собственном устройстве, так что ничего не загружается на сервер, нет аккаунта, и ни один сервер никогда не видит фотографию. Загрузите страницу один раз — и она продолжает работать с выключенным соединением. Он обрабатывает одно изображение за раз и обрезает от центра, так что если ваш объект смещён в сторону, сначала обрежьте фотографию до него простым инструментом обрезки, а затем принесите это более плотное изображение сюда, чтобы сделать круглым.
Для чего это используют
Сделайте круглое фото профиля для Slack, форума или чат-приложения с чистыми прозрачными углами.
Превратите центрированный логотип в круглый значок, который сидит на любом цвете фона.
Экспортируйте иконку приложения в виде скруглённого квадрата с радиусом угла под вашу платформу.
Вырежьте портрет по плечи в круг для страницы команды или биографии автора.
Обрежьте снимок товара в простой центрированный квадрат для миниатюры каталога.
Подготовьте прозрачный круглый PNG для наложения на тёмный лендинг без белого прямоугольника.
Почему круглые аватары в итоге выглядят обрубленными
Вы загружаете понравившееся фото, и сайт показывает его внутри круга. Внезапно макушка обрезана, или рамка режет ваше плечо под странным углом. С вашим фото всё в порядке — проблема в том, что почти каждый слот для фото профиля это круг, нарисованный поверх квадратного изображения. Приложение берёт ваш прямоугольный файл, центрирует его в квадратном окне, а затем скрывает всё за пределами круглой маски. Если часть фото, которая вам была важна, не сидела ровно по центру, круг её отрезает. Вы никогда не видите, как происходит подрезка; вы просто получаете результат и удивляетесь, почему он выглядит не так.
Решение — сделать кадрирование самому, до загрузки, чтобы круг, который вы отдаёте, уже был финальной формой. Именно это делает этот инструмент. Он берёт любое изображение и кадрирует его в настоящий круг, скруглённый квадрат с регулируемым радиусом углов или обычный квадрат и экспортирует PNG. Вы видите ровно то, что будет внутри рамки, вместо того чтобы доверять платформе угадывать.
Прозрачный PNG — вот в чём суть
Экспортируйте с прозрачным фоном, и углы за пределами круга становятся пустыми, а не белыми. Это важнее, чем звучит. Бросьте прозрачный круглый PNG на тёмную страницу профиля, цветную карточку или пузырь чата, и он ложится чисто поверх — никакого белого квадрата, выглядывающего за круглым краем. Если предпочитаете сплошную подложку, можно экспортировать на белом, но именно прозрачность делает вырезанный аватар выглядящим уместно везде, куда вы его вставите. Квадратный JPEG с запечённым фоном так не может; углы всегда будут видны.
Вариант скруглённого квадрата покрывает другой частый случай: иконки приложений, карточки и миниатюры интерфейса, которым нужны мягкие углы, а не полный круг. Двигайте радиус от еле-скруглённого до почти-круглого и останавливайтесь там, где выглядит верно. Обычный квадрат здесь для случая, когда вам просто нужна чистая, центрированная обрезка вообще без маски.
Как работает центрирование — и где оно не поможет
Инструмент кадрирует по центру. Он сначала берёт наибольший квадрат, какой может, из середины вашего изображения, затем накладывает форму на этот квадрат в полном разрешении — без уменьшения до превью и обратно, так что экспортированный край остаётся чётким. Поскольку квадрат вырезается из центра, это прекрасно работает, когда ваш объект уже примерно по центру, что верно для большинства портретов по плечи и большинства логотипов.
Будьте честны с собой насчёт случаев, где оно не поможет. Нет ручки, чтобы перетащить обрезку, нет способа подвинуть кадрирование влево или вправо. Если ваше лицо в одном углу широкого группового снимка, центральное кадрирование возьмёт середину кадра, а не вас. Чистый ответ — сначала обрезать фото до вашего объекта любым базовым кроппером, а затем принести это более плотное изображение сюда, чтобы сделать круглым. И по одному изображению за раз: это не пакетный обработчик. Для одного аватара это ровно нужная скорость; для пятидесяти — много кликов.
Оно никогда не покидает вашу машину
Всё работает в вашем браузере. Изображение декодируется, приводится к квадрату, маскируется и кодируется в PNG на вашем устройстве — ничего не загружается, нет аккаунта, и ни один сервер не видит фото. Загрузите страницу один раз, и можно продолжать делать аватары офлайн. Для фото профиля, которое часто личный снимок вашего лица, это разница между отдачей его чужому серверу и полным сохранением при себе.
Почему IMG.DIY
Настоящий круг
Чистая круглая маска, а не квадрат со скруглением на CSS.
Вариант со скруглением
Регулируемый радиус углов для скруглённых квадратов.
Прозрачный PNG
Углы прозрачны, так что он ложится на любой фон.
Приватно
Обрезается локально — не загружается на сервер.