Більшість фото профілю показуються як кола, але файл, який ви завантажуєте, залишається квадратом — тож кути обрізаються непередбачувано. Цей інструмент обрізає ваше зображення в справжнє коло (чи заокруглений квадрат) і експортує PNG із прозорим фоном, тож воно чисто вставляється в будь-яке місце для аватара, підпис чи слайд.
Він спершу центрально обрізає до квадрата, потім маскує форму у повній роздільності. Усе працює у вашому браузері — фото ніколи не завантажується на сервер.
Як користуватися
- Додайте фотоСкиньте зображення, яке хочете зробити аватаром.
- Оберіть формуКоло, заокруглений квадрат чи звичайний квадрат — з прозорим чи білим фоном.
- Завантажте PNGЗбережіть PNG із прозорим фоном, квадратний і готовий до використання.
Circle Crop перетворює будь-яке зображення на круглий аватар, заокруглений квадрат чи звичайний квадрат і експортує його як PNG. Він центрується на найбільшому квадраті, який може взяти з середини вашого фото, а тоді накладає форму на цей квадрат у повній роздільності, тож край кола лишається чітким замість масштабування з малого превʼю. Експортуйте з прозорим фоном — і кути поза формою виходять порожніми, а не білими.
Усе працює у вашому браузері. Зображення декодується, обрізається, маскується й кодується у PNG на вашому власному пристрої, тож нічого не завантажується, немає акаунта, і жоден сервер ніколи не бачить фото. Завантажте сторінку раз — і вона продовжує працювати з вимкненим з'єднанням. Він опрацьовує одне зображення за раз і обрізає від центру, тож якщо ваш об'єкт сидить збоку, спершу обріжте фото до нього базовим обрізником, а тоді принесіть це тісніше зображення сюди, щоб зробити його круглим.
Для чого його використовують
Зробіть кругле фото профілю для Slack, форуму чи чат-застосунку з чистими прозорими кутами.
Перетворіть центрований логотип на круглий значок, що сидить на будь-якому кольорі фону.
Експортуйте іконку застосунку у вигляді заокругленого квадрата з радіусом кута під вашу платформу.
Виріжте портрет «голова й плечі» в коло для сторінки команди чи біо автора.
Обріжте знімок товару в простий центрований квадрат для мініатюри каталогу.
Підготуйте прозорий круглий PNG для накладення на темну цільову сторінку без білого прямокутника.
Чому круглі аватари зрештою виглядають обрізаними
Ви завантажуєте фото, яке вам подобається, і сайт показує його всередині кола. Раптом верхівка вашої голови зрізана, або рамка розтинає ваше плече під дивним кутом. З вашим фото все гаразд — проблема в тому, що майже кожен слот для аватара — це коло, намальоване поверх квадратного зображення. Застосунок бере ваш прямокутний файл, центрує його у квадратному вікні, а потім ховає все за межами круглої маски. Якщо частина фото, яка вас цікавила, не сиділа точно по центру, коло її відрізає. Ви ніколи не бачите, як відбувається обрізання; ви просто отримуєте результат і дивуєтеся, чому він виглядає не так.
Виправлення — зробити обрізання самому, перед завантаженням, щоб коло, яке ви віддаєте, уже було фінальною формою. Саме це й робить цей інструмент. Він бере будь-яке зображення й обрізає його в справжнє коло, заокруглений квадрат із регульованим радіусом кута чи звичайний квадрат і експортує PNG. Ви бачите точно те, що буде всередині рамки, замість того щоб довіряти платформі вгадувати.
Прозорий PNG — у цьому вся суть
Експортуйте з прозорим тлом, і кути за межами кола стають порожніми, а не білими. Це важить більше, ніж звучить. Покладіть прозорий круглий PNG на темну сторінку профілю, кольорову картку чи бульбашку чату, і він сідає чисто зверху — жоден білий квадрат не визирає з-за круглого краю. Якщо ви радше маєте суцільне тло, можете експортувати на білому натомість, але саме прозорість робить вирізаний аватар таким, наче він належить будь-де, куди ви його вставляєте. Квадратний JPEG із вбудованим тлом так не може; кути завжди показуватимуться.
Варіант заокругленого квадрата покриває інший поширений випадок: іконки застосунків, картки й UI-мініатюри, які хочуть м'яких кутів, а не повного кола. Пересуньте радіус від ледь заокругленого до майже круглого й спиніться там, де воно виглядає правильно. Звичайний квадрат тут для випадку, коли вам просто потрібне чисте, центроване обрізання без жодної маски.
Як працює центрування — і де воно не допоможе
Інструмент обрізає по центру. Він спершу бере найбільший квадрат, який може, із середини вашого зображення, потім накладає форму-маску на цей квадрат у повній роздільності — без зменшення до попереднього перегляду й назад, тож експортований край лишається чітким. Оскільки квадрат вирізається з центру, це працює чудово, коли ваш об'єкт уже приблизно по центру, що правда для більшості фото «голова й плечі» й більшості логотипів.
Будьте чесні із собою щодо випадків, де воно не допоможе. Немає ручки, щоб перетягнути обрізання, немає способу підсунути кадрування ліворуч чи праворуч. Якщо ваше обличчя в одному куті широкого групового кадру, центроване обрізання схопить середину кадру, а не вас. Чиста відповідь — спершу обрізати фото до вашого об'єкта — будь-яким базовим кадрувальником — а потім принести це щільніше зображення сюди, щоб зробити його круглим. Також по одному зображенню за раз: це не пакетний обробник. Для одного аватара це саме потрібна швидкість; для п'ятдесяти — це багато клацання.
Воно ніколи не залишає вашу машину
Усе працює у вашому браузері. Зображення декодується, квадратується, маскується й кодується в PNG на вашому власному пристрої — нічого не завантажується, немає акаунта, і жоден сервер ніколи не бачить фото. Завантажте сторінку раз, і ви можете далі робити аватари офлайн. Для фото профілю, яке часто є особистим фото вашого обличчя, це різниця між тим, щоб віддати його на чужий сервер, і тим, щоб зберегти його повністю для себе.
Чому IMG.DIY
Справжнє коло
Чиста кругла маска, а не квадрат із заокругленням через CSS.
Заокруглений варіант
Регульований радіус кутів для заокруглених квадратів.
Прозорий PNG
Кути прозорі, тож він лягає на будь-який фон.
Приватно
Обрізається локально — ніколи не завантажується на сервер.