Изображение с закруглёнными углами
Оригинал: x
Операционные системы, магазины приложений и дизайн-системы интерфейсов любят скруглённые углы, иконки iOS, карточки Material, современные компоненты Tailwind. Загрузите любое изображение: инструмент скруглит все четыре угла до заданного радиуса, сохранит файл в формате PNG с прозрачными углами и при желании применит разный радиус к каждому углу, для эффекта отрывного корешка билета или речевого пузыря.
Как закругить углы изображения
-
1
Загрузить изображение
JPG, PNG или WebP.
-
2
Выберите радиус
В пикселях или в процентах от более короткой стороны.
-
3
Опционально: разные значения для каждого угла
Скруглите только верхние углы (карточка) или асимметрично (билет).
-
4
Выберите фон
Прозрачный формат (PNG) или однотонный цвет при сохранении в формате JPG.
-
5
Экспорт
Формат PNG сохраняет округлые углы изображения; формат JPG выравнивает его по выбранному цвету.
Варианты радиуса для распространённых элементов пользовательского интерфейса
Предустановки радиуса
| Форма | Радиус |
|---|---|
| Ненавязчивая карточка интерфейса | 4–8 пикселей |
| Карточка Material Design | 4 пикселя (или 8 пикселей в M3) |
| Иконка приложения iOS | 22,37 % от стороны («squircle») |
| Иконка приложения macOS | 18,75 % от стороны |
| Пузырёк истории в Instagram | 12–16 пикселей |
| Круглый аватар | 50 % от короткой стороны (полностью круглый) |
| Отрывной корешок билета | Асимметрично, скруглите только один или два угла |
| Сторона с хвостиком чат-пузыря | Один угол маленький, остальные крупнее |
Проблема squircle
Иконки iOS не являются простыми скруглёнными прямоугольниками, они используют «суперэллипс», который математически более плавен на переходе. Настоящие squircle выходят за пределы того, что могут отрисовать CSS-свойство border-radius или простая альфа-маска; инструмент аппроксимирует их скруглённым прямоугольником высокого порядка, который при типичных размерах иконок выглядит неотличимо от оригинала.
Поведение прозрачности
- Вывод в PNG, вариант по умолчанию: скруглённые углы становятся прозрачными пикселями. Удобно для иконок приложений, карточек интерфейса и всех случаев, когда изображение нужно наложить на разнообразный фон.
- Вывод в JPG не может быть прозрачным. Скруглённые углы заполняются выбранным вами цветом, из-за чего фотография выглядит как в рамке.
Разный радиус для каждого угла
Вид чат-пузыря: скруглите три угла по 12 пикселей, а один оставьте на 0 пикселей (угол, где крепился бы «хвостик»). Отрывной корешок билета: два острых угла и два скруглённых. Асимметричные радиусы, быстрый способ подчеркнуть, что изображение к чему-то прикреплено.
Сглаживание (anti-aliasing)
Кривые углов отрисовываются с 4-кратным суперсэмплингом, поэтому выглядят чёткими при обычных размерах просмотра. При печати или сильном увеличении радиус остаётся заметно гладким.
Часто задаваемые вопросы
Apple использует squircle, кривизна углов которого составляет примерно 22,37 % от стороны иконки. На холсте 1024 × 1024 пикселя это соответствует эффективному радиусу углов около 229 пикселей, хотя точная математика немного отличается от обычного скруглённого прямоугольника.
Да. Радиус применяется к каждому углу независимо от соотношения сторон изображения. При экстремальных соотношениях (очень широких или очень высоких) установка радиуса в 50 % от короткой стороны даёт форму капсулы.
Нет, формат JPG не поддерживает прозрачность. Чтобы сохранить скруглённую альфу, экспортируйте файл в формат PNG; либо выберите цвет фона для JPG, углы будут заполнены этим цветом.
Да. Инструмент добавляет только альфа-маску и не изменяет размер изображения. Если вы хотите совместить скругление с изменением размера, сначала примените инструмент изменения размера.
Сопутствующие инструменты
Палитра цветов Material Design
Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.
Конструктор тир-листов
Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.
Конвертер JPG в Excel
Запустите локальное OCR для таблицы в JPG или JPEG и скачайте предполагаемые строки в XLSX либо CSV UTF-8. Файлы до 20 МБ остаются в браузере.
Генератор спрайт-листов
Объедините несколько изображений в один PNG спрайт-лист на равномерной сетке прямо в браузере. Получите PNG и готовые классы CSS со смещениями background-position.
Изображение в Excel
Распознайте таблицу в PNG, JPG или WebP локально и скачайте найденные строки в XLSX или CSV. Файлы до 20 МБ остаются в браузере.
Конвертер ARW в JPG
Конвертируйте фотографии Sony ARW RAW в JPG. Получите универсально совместимый JPEG для обмена из RAW-файла камеры без запуска Lightroom.
Инструмент доступен на других языках
- Coins arrondis d'image [FR]
- Bild med rundade hörn [SV]
- รูปภาพมุมที่โค้งมน [TH]
- تدوير زوايا الصورة [AR]
- Sudut Membulat pada Gambar [ID]
- Bo tròn góc ảnh [VI]
- 이미지 모서리 둥글게 [KO]
- Bild mit abgerundeten Ecken [DE]
- Esquinas Redondeadas de Imagen [ES]
- Afgeronde hoeken van de afbeelding [NL]
- Zaokrąglone rogi obrazu [PL]
- 画像の角を丸めます [JA]
- Cantinhos Arredondados da Imagem [PT]
- Görüntü Köşelerini Yuvarlatma [TR]
- 图像圆角 [ZH]
- Image Rounded Corners [EN]
- Immagini con angoli arrotondati [IT]