Начиная
Нет необходимости устанавливать какое-либо программное обеспечение, весь процесс выполняется на веб-странице, а экран обновляется в режиме реального времени.
Нажмите, чтобы выбрать или перетащить изображение прямо на веб-страницу. Поддерживаются форматы JPG, PNG, WebP и GIF. Каждое изображение не должно превышать 20 МБ. Одновременно обрабатывается только одно изображение.
Перетащите ползунок закругленных углов, чтобы отрегулировать кривизну четырех углов в реальном времени, и эффект предварительного просмотра будет немедленно обновлен.
При необходимости включите границы и тени, установите соответствующие цвета, ширину, прозрачность и диапазон, а также установите цвет фона холста.
Убедившись, что результат удовлетворительный, нажмите «Загрузить». Изображение будет восстановлено в соответствии с текущими настройками и сохранено локально.
Поиск неисправностей
Не поддерживается. Этот инструмент позиционируется как доработка одиночного изображения. Соответствие радиуса скругления и силы тени обычно требует предварительного просмотра и подтверждения конкретных пропорций и вариантов использования изображения по одному. Например, квадратные скриншоты и длинные постеры требуют существенно разных пропорций скругления. Применение одного и того же набора параметров может легко привести к противоречивым эффектам, поэтому он разработан как инструмент для точной настройки одного изображения. Если вам необходимо обработать несколько изображений, рекомендуется открывать их по одному и корректировать отдельно.
Он полностью завершен в браузере вашего текущего устройства. Предварительный просмотр в реальном времени отображается мгновенно с помощью собственных границ CSS браузера, закругленных углов и стилей теней. При загрузке Canvas используется для его перерисовки по тем же параметрам для создания итогового изображения. Исходное изображение не будет загружено ни на один сервер в течение всего процесса.
Поскольку тень должна распространяться наружу в определенном диапазоне, чтобы четко видеть эффект проекции, если холст того же размера, что и исходное изображение, тень будет напрямую обрезана и невидима; поэтому при экспорте холст будет автоматически расширен в соответствии с текущим установленным диапазоном размытия теней, расстоянием проецирования и шириной границы. Дополнительная область будет заполнена выбранным вами цветом фона (или останется прозрачной), гарантируя, что тень будет полностью отображена и не будет обрезана.
Сам формат JPG не поддерживает прозрачные каналы. Если выбран прозрачный фон, но исходное изображение имеет формат JPG, прозрачная область будет автоматически заполнена белым цветом. Это неотъемлемое ограничение формата JPG и не является ошибкой обработки. Если вам нужен по-настоящему прозрачный фон, загрузите изображение в формате PNG или WebP, и результат экспорта сохранит прозрачный фон после обработки.
Они рассчитываются на основе соотношения ширины и высоты самого изображения, а не фиксированного значения пикселя. Таким образом, независимо от того, большое или маленькое разрешение загруженного изображения, одно и то же значение ползунка может обеспечить одинаковый эффект визуальных пропорций. Эффект, видимый в предварительном просмотре, точно такой же, как и окончательный эффект изображения, созданный после загрузки.
Суть процесса заключается в перерисовке и кодировании: если исходное изображение имеет прозрачный фон, прозрачная область все равно останется за пределами закругленных углов (если для заливки не выбран непрозрачный цвет фона). Параметры съемки EXIF исходного изображения, местоположение и другие метаданные не сохранятся после перекодирования. Если вам нужно специально просмотреть или очистить EXIF, вы можете использовать инструмент «EXIF Cleaner».
Весь процесс рендеринга и экспорта эффектов выполняется локально в браузере, и изображение не будет проходить через какой-либо сервер.
Эти три эффекта можно использовать по отдельности или в сочетании для удовлетворения самых изысканных потребностей отображения.
Перетащите ползунок, и экран немедленно обновится. Перед загрузкой убедитесь, что вы удовлетворены. Не нужно повторять метод проб и ошибок.
Никакой регистрации, никакой оплаты и никаких скрытых ограничений на использование.
Применимые ситуации
Не список возможностей, а "когда стоит тащить картинку вверх?" Если не помогло, смените инструмент, не применяйте его с силой.
Добавьте закругленные углы и мягкие тени к скриншотам интерфейса на страницах с описанием продуктов и в портфолио, чтобы имитировать эффект отображения реальных устройств и сделать снимки экрана более изысканными и профессиональными.
Добавьте тонкую рамку и легкую тень к основному изображению продукта, чтобы сделать изображение продукта более многослойным на белом фоне, тем самым увеличивая количество кликов и конверсий.
Добавьте закругленные углы к обложке и аватару официального аккаунта, а также объедините визуальный стиль с цветом фона, чтобы главная страница социальной сети выглядела аккуратнее и красивее.
Соответствующие предложения
Разные сценарии подходят для разных комбинаций параметров. Сначала обратитесь к этой шпаргалке, а затем настройте ее, чтобы получить удовлетворительные результаты быстрее, чем пытаться с нуля.
| Комбинация эффектов | Рекомендуемый диапазон параметров | Подходит для сцены |
|---|---|---|
| Слегка закругленные углы + мягкие тени | Закругленные углы 8–15 %, прозрачность теней 25–40 %, больший диапазон размытия, меньшее расстояние проецирования. | Отображение скриншотов приложения/веб-страницы, имитирующее эффект плавающей карты |
| Большие закругленные углы + отсутствие тени | Углы закруглены более чем на 25 %, тени не включены. | Изображения аватаров и значков, выполненные в округлом и красивом визуальном стиле. |
| Тонкие границы + отсутствие тени или легкая тень | Ширина границы узкая, а цвет близок к цвету фона или белому. | Изображения продуктов электронной коммерции, добавляющие ощущение границы на белом фоне |
| Прямой угол + четкая тень | Закругленные углы 0%, прозрачность теней более 40%, большое расстояние проецирования. | Рекламные изображения и элементы постеров, подчеркивающие ощущение трехмерной подвески. |
Вышеупомянутое — это всего лишь общие идеи сопоставления. Фактический эффект связан с композицией и цветом фона самого изображения. Рекомендуется перетаскивать ползунок в области предварительного просмотра для многократного сравнения и поиска комбинации параметров, которая лучше всего соответствует текущему изображению.
Техническое описание
При перетаскивании ползунка изображение предварительного просмотра мгновенно отображается с помощью встроенных в браузер CSS закругленных углов, границ и стилей теней; когда вы нажимаете кнопку загрузки, интерфейс рисования Canvas браузера будет использоваться для его перерисовки с точно такими же параметрами пропорций и кодирования в файл изображения, гарантируя согласованность результата загрузки и эффекта предварительного просмотра. Весь процесс выполняется локально на вашем устройстве без использования какого-либо сервера.
После включения теней или более широких границ эффект необходимо расширить до определенного диапазона вокруг изображения, чтобы оно отображалось полностью без обрезки; при экспорте холст автоматически рассчитает поля, которые необходимо расширить, на основе текущего диапазона размытия тени, расстояния проекции и ширины границы, а дополнительная область будет заполнена выбранным цветом фона или останется прозрачной. Если тени и границы не требуются (оба отключены или значение равно 0), размер экспортированного изображения останется таким же, как исходное изображение.
Нет необходимости открывать счет. Если вы удовлетворены, приступайте к пакетированию. Если нет, просто измените параметры и повторите попытку.