Добавление рамки к изображению
Добавьте к любому изображению цветную рамку, внутренний отступ, скруглённые углы и тень в браузере, с прозрачным или цветным внешним фоном.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Рамка для изображения?
Инструмент оформляет изображение сплошной рамкой любой толщины и цвета, необязательным внутренним отступом другого цвета, скруглёнными углами и мягкой тенью. Область за рамкой может остаться прозрачной (удобно со скруглением и тенью) или быть залита цветом фона.
Как пользоваться Рамка для изображения
- Перетащите, выберите или вставьте изображение.
- Задайте Толщина рамки и Цвет рамки, а при желании Внутренний отступ с его цветом.
- При желании добавьте Радиус скругления и Размер тени / смещение.
- Оставьте Прозрачно за рамкой или выберите цвет фона, затем скачайте результат (PNG сохраняет прозрачность).
Пример
40×20 image, border 20 px #ff00ff, no padding, radius 0
80×60 PNG whose top-left pixel is #FF00FF
Когда использовать Рамка для изображения
Используйте, чтобы выделить скриншоты в документах, добавить к фото белую «печатную» рамку или создать скруглённые изображения с тенью для публикаций в соцсетях и слайдов. Выбирайте вывод PNG, если нужны прозрачные скруглённые углы или тени; JPEG заливает их белым.
Как работает Рамка для изображения
Создаётся новый canvas, больший изображения на удвоенную сумму рамки и отступа плюс место под тень. Скруглённый прямоугольник заливается цветом рамки (с настройками тени canvas, если тень включена), внутренний скруглённый прямоугольник заливается цветом отступа, а изображение рисуется с обрезкой по самому внутреннему скруглённому прямоугольнику, поэтому радиус скругления применяется и к фото.
Распространенные Случаи Использования
- Добавить белую рамку к фото для публикации в Instagram.
- Обвести скриншоты тонкой серой рамкой в документации.
- Создать скруглённые изображения в стиле значка приложения с тенью.
- Добавить единообразные отступы вокруг изображений товаров.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Почему скруглённые углы белые?
JPEG не умеет хранить прозрачность. Выберите PNG или WebP в качестве формата результата, чтобы сохранить прозрачные углы и тени.
Как вычисляется размер результата?
Ширина = ширина изображения + 2 × (рамка + отступ), плюс дополнительное место с каждой стороны, если включена тень. Высота вычисляется так же.
Можно ли сделать полупрозрачную рамку?
Поля цвета принимают 6-значные цвета HEX, поэтому рамки непрозрачные. Если нужна рамка под цвет вашего фона, задайте толщину рамки 0 и используйте только отступ.