Стилизация изображений
Пиксель-арт
Крупные пиксели, ограниченная палитра и ретро-сетка для быстрых игровых превью.
PNG, JPG, WEBP
Стилизация изображений
Крупные пиксели, ограниченная палитра и ретро-сетка для быстрых игровых превью.
Коротко об инструменте
Инструмент принимает PNG, JPG или WEBP, уменьшает картинку до сетки крупных пикселей, срезает лишние оттенки палитры и растягивает её обратно без сглаживания — получается честный ретро-вид, а не размытая копия. На выходе PNG со стороной 520–1800 пикселей. Пригодится, когда нужна аватарка в стиле 8-бит, превью для игрового джема или иконка, читаемая на тёмном фоне мессенджера. Отрисовка идёт на canvas в вашей вкладке. Смотрите также: превратить снимок в ASCII-арт, увеличить пиксельный кадр без размытия, сделать из пиксельной картинки иконку сайта.
Двигайте «Размер пикселя» вправо, к 24–48 px, и одновременно опускайте «Палитра» до 3–6 ступеней. Крупный блок сам по себе даёт мало: если оттенков остаётся два десятка, картинка выглядит просто увеличенной. Ретро-вид рождается именно на пересечении большого пикселя и бедной палитры, как это было на приставках с ограничением в несколько цветов на спрайт.
Да, поставьте ползунок «Сетка» на 0 % — линии исчезнут, останутся чистые квадраты. Сетка полезна для скриншотов и превью, где хочется подчеркнуть, что это стилизация, но мешает, если результат идёт в тайлсет или на печать: там линии складываются в муар при масштабировании.
Только PNG — формат без потерь, поэтому квадраты остаются с чёткими краями и не обрастают артефактами, как это было бы у JPG. Сторона результата задаётся ползунком «Размер результата» в диапазоне 520–1800 px, по умолчанию 1100 px. Больше 1800 px инструмент не выдаёт: смысла нет, пиксельная сетка после этого просто дублируется.
Пикселизация убирает мелкие детали, а именно на них держится узнаваемость: глаза, границы губ, форма бровей. Уменьшите «Размер пикселя» до 5–8 px и поднимите «Палитра» до 14–20 ступеней. Помогает и обрезать фото до головы и плеч заранее — тогда на лицо приходится больше блоков сетки.
Работает в мобильных Chrome и Safari, включая выбор снимка прямо из галереи. Кадр с камеры на 12 мегапикселей сначала уменьшается до рабочего размера, поэтому вкладка не зависает, но на слабом устройстве первый пересчёт после смены ползунка может занять пару секунд.
Никуда за пределы вкладки: файл читается через FileReader, рисуется на canvas и там же пересчитывается при каждом движении ползунка. Кнопка «Скачать PNG» сохраняет результат из памяти браузера напрямую в вашу папку загрузок. Закрыли вкладку — от изображения не осталось следов ни у нас, ни в кэше.
До: Селфи 3024×4032 из камеры телефона, мягкие тени, тысячи оттенков кожи
После: PNG 1100 px: размер пикселя 14, палитра 9 ступеней, сетка 22 % — лицо читается блоками, кожа сведена к трём тонам
До: Фото кирпичной стены, JPG 1600×1200
После: PNG 520 px: размер пикселя 24, палитра 5, сетка 0 % — плоская текстура без муара, готовая лечь в тайлсет
Оценка и фидбек помогают понять, что улучшать дальше.