Заокруглення кутів зображення

Заокругліть кути будь-якого зображення

Заокруглені кути роблять мініатюри, аватари, скриншоти застосунків і картки м'якшими та сучаснішими. Цей інструмент для заокруглення кутів обрізає зображення до прямокутника із закругленими кутами й робить область за межами кривої повністю прозорою, тож результат чисто лягає на будь-який фон. Перетягніть один повзунок, щоб керувати заокругленням — від ледь помітного згладжування на 4 px до повного кола — і дивіться зміни наживо в попередньому перегляді перед експортом.

Увесь процес відбувається локально у вашому браузері. Зображення декодується на canvas, контур закругленого прямокутника використовується як маска обрізання, а видимі пікселі перемальовуються на прозорий canvas, який експортується як PNG. Нічого не завантажується на сервер, тому приватні скриншоти, фото товарів і зображення профілю залишаються на вашому пристрої. Оскільки PNG зберігає альфа-канал, прозорі кути залишаються прозорими, куди б ви згодом не помістили зображення.

Вибір радіуса

Радіус вимірюється в пікселях вихідного зображення. Стримана картка інтерфейсу може мати від 12 до 24 пікселів, а дружня іконка застосунку — 80 і більше. Щоб перетворити квадратне фото на коло, встановіть радіус, що дорівнює половині ширини зображення. Повзунок обмежений так, що ніколи не перевищує половини найкоротшої сторони, тому кути не перекриваються, а форма залишається чистою за будь-яких налаштувань.

Де заокруглені зображення виглядають найкраще

Використовуйте заокруглені зображення для hero-карток сайтів, мініатюр блогу, аватарів у відгуках, плиток товарів у магазині та слайдів презентацій. Оскільки експорт — це прозорий PNG, його можна накладати на кольори, градієнти або фото без видимої рамки навколо. Якщо згодом знадобиться суцільний фон, помістіть PNG у конвертер і злийте його з потрібним кольором.

Примітки щодо експорту

Результат зберігає повну ширину й висоту джерела та записується як PNG з назвою вихідного файлу. Великий радіус може зробити файл схожим на коло чи пігулку, але canvas залишається прямокутним, а прозорі пікселі заповнюють кути. Деякі форми завантаження й чат-застосунки перетворюють PNG на JPG, що замінить прозорість суцільним кольором, тому спершу перевірте, як ваше місце призначення обробляє прозорі зображення.

Швидкий контрольний список

• Збільшуйте повзунок, доки кути не виглядатимуть правильно в попередньому перегляді наживо.
• Використайте половину коротшої сторони, щоб отримати коло або пігулку.
• Завантажте PNG і розмістіть його на кольоровому тлі, щоб переконатися, що кути прозорі.