Стилизация изображений
Плоский
Упрощённые формы, спокойная палитра и контуры в стиле векторной иллюстрации.
PNG, JPG, WEBP
Стилизация изображений
Упрощённые формы, спокойная палитра и контуры в стиле векторной иллюстрации.
Коротко об инструменте
Эффект работает в два хода: сначала снимок сглаживается, чтобы шум и мелкая фактура исчезли, затем цвета сводятся к нескольким тонам, а найденные границы обводятся контуром. Получается картинка в духе редакционной flat-графики — крупные заливки, спокойная палитра, читаемые силуэты. Такое удобно ставить в обложку статьи, карточку товара или заглушку презентации, когда фотография слишком пёстрая. Считает браузер, файл никуда не отправляется. Смотрите также: мягкий эффект масляной живописи, вытащить палитру из полученной картинки, перевести плоскую заливку в вектор.
Нет, кнопка отдаёт PNG. Эффект имитирует внешний вид плоской векторной графики, но файл остаётся растровым: внутри пиксели, а не кривые, и при сильном увеличении края будут ступенчатыми. Если нужны именно контуры, которые открываются в Illustrator или Figma, для этого существует отдельная трассировка растра в вектор.
Двигайте «Упрощение форм» к 40–60 px и одновременно опускайте «Количество тонов» до 4. Тогда сглаживание съест всю фактуру, а палитра сведётся к нескольким крупным заливкам. Контур в таком режиме лучше поднять до 50–70 %, иначе соседние пятна близких оттенков сольются и силуэт перестанет читаться.
Скорее всего, упрощение стоит слишком высоко для этого разрешения: глаза и губы по площади меньше радиуса сглаживания и просто растворяются в общем пятне кожи. Опустите ползунок до 8–14 px, добавьте тонов до 12–16 и подкрутите контраст — тени вокруг глаз вернут объём, а плоскость эффекта сохранится.
Он задаёт длинную сторону готового изображения в пикселях, от 520 до 1800. Картинка приводится к этому размеру перед обработкой, поэтому параметр меняет не только вес файла, но и вид эффекта: при 520 px сглаживание в 20 px охватывает заметно большую долю кадра, чем при 1800 px, и результат выходит грубее.
Плохо. Сглаживание размывает тонкие штрихи, а сведение палитры добивает антиалиасинг букв, поэтому мелкий текст после обработки становится нечитаемым. Эффект рассчитан на фотографии с крупными формами. Скриншот интерфейса лучше оставить как есть или обрабатывать инструментами, которые не трогают геометрию.
Кадр сначала приводится к выбранному размеру результата, максимум 1800 px по длинной стороне, поэтому даже снимок с зеркалки считается за секунды, а не минуты. Само сглаживание — самая тяжёлая часть: на максимальных 60 px и на слабом ноутбуке вкладка может подтормаживать пару секунд после каждого движения ползунка.
Нет, весь код эффекта — обычный JavaScript, который выполняется в вашем браузере, а изображение живёт в памяти вкладки и в элементе canvas. Наружу не уходит ни исходник, ни результат, поэтому личные фотографии можно стилизовать без опасений, что они где-то осядут.
До: Фото рабочего стола с проводами, бликами и пёстрым фоном
После: PNG 1200 px: упрощение 24 px, 6 тонов, контур 40 % — крупные заливки, поверх которых читается заголовок
До: Портрет с мягким светом и шумом на щеках
После: PNG 800 px: упрощение 12 px, 10 тонов, контур 25 % — черты лица сохранены, кожа стала ровной
Оценка и фидбек помогают понять, что улучшать дальше.