Закругление углов изображения и добавление рамок

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

Перетащите сюда свои изображения
или нажмите, чтобы выбрать — JPG, PNG, WEBP. Можно выбрать сразу несколько.

Как закруглить углы и добавить рамки

Начните с перетаскивания изображений в зону загрузки или нажмите на неё, чтобы открыть выбор файлов. Несколько фото сразу отправляются с удержанием Ctrl (или Cmd на Mac) при выборе, а принимаются JPG, PNG, WEBP, GIF и BMP. Если загружено больше одного файла, над предпросмотром появляются вкладки с именем каждого изображения: нажимайте, чтобы переключаться и проверять настройки на каждом снимке. Сразу под предпросмотром показаны итоговые размеры файла в пикселях, уже с учётом рамки.

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

Толщина рамки задаётся в пикселях и рисуется за пределами изображения, поэтому ничего из исходного содержимого не обрезается. Как только значение уходит выше нуля, появляются выбор цвета, поле для шестнадцатеричного кода и палитра из восьми готовых цветов. Рамка следует выбранной кривизне, так что в режиме круга превращается в идеальное кольцо. Опция мягкой тени слегка приподнимает изображение над фоном — полезно для миниатюр на светлых подложках. Галочка прозрачного фона стоит по умолчанию и именно она гарантирует, что вырезанные углы останутся действительно пустыми.

Наконец, выберите формат загрузки. PNG — рекомендуемое значение, потому что сохраняет прозрачность углов без потери качества. WEBP тоже сохраняет прозрачность и даёт более лёгкие файлы, что делает его идеальным для сайта. JPG прозрачности не знает, поэтому при его выборе углы заливаются цветом фона из регуляторов. Кнопка загрузки сохранит только фото на экране, а «Скачать все» отдаст весь набор в .zip с теми же настройками.

Частые вопросы

Мои изображения загружаются на сервер?
Нет. И обрезка, и отрисовка рамки происходят в вашем браузере через Canvas. Ни один файл не уходит в интернет.
Можно закруглить углы у нескольких изображений сразу?
Да. Загрузите столько изображений, сколько нужно: один и тот же радиус, рамка и форма применяются ко всем. Скачивайте по одному или заберите весь набор одним файлом .zip.
Почему закруглённые углы после сохранения становятся белыми или чёрными?
Так происходит при экспорте в JPG — формат вовсе не поддерживает прозрачность, и вырезанную область приходится чем-то заливать. Чтобы углы остались действительно пустыми, выберите PNG или WEBP и оставьте галочку прозрачного фона. Если получатель требует JPG, задайте цвет фона таким же, как у сайта или документа, где окажется изображение.
Какой радиус подходит для миниатюр и карточек сайта?
Современные интерфейсы держатся между 8% и 16% от короткой стороны, что примерно равно 8–16 px на миниатюре 100 px. Свыше 25% форма начинает походить на кнопку-капсулу, а на 50% прямоугольник превращается в круг или эллипс. Если у карточек вашего сайта уже задан радиус в CSS, тот же пропорциональный процент на изображении даст точное совпадение.
Как сделать круглое фото профиля с рамкой?
Выберите форму Круг: инструмент обрезает изображение по центру в пропорции 1:1 перед наложением маски, поэтому вертикальные портреты не сплющиваются. Затем поднимите толщину рамки до 10–30 px и выберите её цвет. Экспортируйте в PNG, чтобы область вокруг круга оставалась прозрачной на любом фоне — именно этот формат ждут LinkedIn, Discord, WhatsApp и большинство систем аватаров.
Можно закруглить только некоторые углы?
Да. В форме с закруглёнными углами есть четыре кнопки, по одной на угол. Отключите те, которые должны остаться прямыми: удобно для изображений, прижатых к верхнему краю карточки, где нужно закруглить только нижние, или для баннеров, выровненных по краю экрана.
Рамка увеличивает изображение?
Да. Рамка рисуется за пределами фото, поэтому изображение 800×600 px с рамкой 20 px выходит файлом 840×640 px. Ничего из исходной площади не обрезается. Итоговые размеры показаны сразу под предпросмотром.
Продолжите с другим инструментом
Похожие статьи
Смотреть все статьи →