Фото / изображение в пиксель-арт · бесплатно, в браузере

Конвертер фото и изображений в пиксель-арт — бесплатно, онлайн, без входа

Превратите своё изображение в пиксель-арт

Загрузите фото и превратите его в пиксель-арт бесплатно, в браузере. Задайте размер вывода и количество цветов, скачайте чистый PNG — а затем войдите в 3D-пиксельный мир, построенный из вашего арта. Без входа.

✦Игра
Превратите это фото в пиксель-арт: портрет 32×32

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

Почти всё в результате решают два регулятора. Размер сетки определяет, сколько структуры уцелеет. Количество цветов определяет, сколько тона уцелеет. Настройте эти два верно — и всё остальное (дизеринг, чистка краёв, масштаб экспорта) станет тонкой настройкой. Настройте их неверно — и никакая ручная чистка изображение уже не спасёт.

Преобразуйте фото в пиксель-арт (живой инструмент)

Первый экран — это зона перетаскивания. Перетащите на неё PNG, JPEG, WebP, GIF или BMP либо нажмите, чтобы открыть выбор файла. Изображение декодируется локально и отрисовывается на канвасе. Крупное фото с телефона уменьшается до рабочей копии в несколько сотен пикселей по длинной стороне, прежде чем его коснётся любой ползунок, потому что повторный запуск преобразования в полном разрешении при каждом перемещении ползунка делает предпросмотр непригодным.

Путь короткий и недеструктивный: перетащите файл, выберите размер сетки, выберите количество цветов, посмотрите предпросмотр, скачайте. Инструмент держит рабочую копию в памяти и заново выполняет уменьшение и сокращение палитры при каждом изменении настройки, поэтому ничего не фиксируется, пока вы не выполните экспорт.

Экспорт — это PNG, в масштабе 1× или в целом масштабе. Масштабирование выполняется только методом ближайшего соседа. Результат 64×64, экспортированный при ×8, — это 512×512 с жёсткими блоками по 8 пикселей. Не прогоняйте этот файл после через JPEG: артефакты сжатия лягут ровно на те края, которые вы только что почистили, и добавят цвета, которых никогда не было в вашей палитре.

Две настройки, которые сильнее всего превращают изображение в пиксель-арт

Размер сетки — это число ячеек в выводе. Преобразование 32×32 даёт 1 024 ячейки, каждая из которых — плоская. При уменьшении используется усреднение по площади, а не плавное бикубическое изменение размера, потому что бикубика даёт звон вокруг высококонтрастных краёв и оставляет ячейки-ореолы, которые читаются как грязь. Именно эта настройка решает, останутся ли у лица глаза в итоге.

Количество цветов — это число различных цветов в экспортированном PNG, от 2 до 64. Сокращение выполняется как построение палитры с последующим присвоением ближайшего цвета, поэтому результат — плоское индексированное изображение, а не размытое. Увеличивайте сетку раньше, чем количество цветов: большая сетка исправляет размытый объект, тогда как лишние цвета обычно лишь добавляют крапины.

  • Размер сеткиОт 16×16 до 256×256 фиксированными шагами. Это число ячеек в выводе; каждая ячейка становится одним плоским цветом.
  • Количество цветовОт 2 до 64 различных цветов в экспортируемой палитре. Меньше цветов задаёт более чёткие формы, потому что затенение приходится тратить на связные области.
  • ДизерингПо умолчанию выключен. Floyd–Steinberg воспроизводит градиенты при малом числе цветов, но шум плохо переживает любое дальнейшее масштабирование.
  • Порог фонаОтсечение по яркости или альфе делает почти белые или почти прозрачные ячейки прозрачными, поэтому объект оказывается на чистом PNG с альфа-каналом.
  • Источник палитрыАвтоматическая палитра из изображения или привязка к фиксированной шкале — полезно, когда несколько спрайтов должны делить одну палитру.
  • Масштаб экспортаОт 1× до 8×, только методом ближайшего соседа. Спрайт 32×32 при ×8 — это 256×256 и по-прежнему пиксель-в-пиксель.
Уровень вывода: пиксель-арт, который складывается в изометрическую 3D-сцену, по которой можно ходить.

Как преобразовать фото в пиксель-арт

Порядок этих шагов важен. Изменение сетки после того, как вы привели палитру в порядок, уничтожает эту работу, потому что всё изображение заново раскладывается по новому набору ячеек.

Идите от конечного применения назад. Спрайту, который движок будет масштабировать ×6, нужно меньше ячеек, чем тому же изображению, напечатанному как постер, потому что движок умножает каждую ячейку на экране.

1

01

Выберите фото с одним чётким объектом. Портрет на фоне простой стены преобразуется намного лучше, чем групповой снимок издалека. Если объект занимает меньше трети кадра, сначала обрежьте — конвертер не сделает этого за вас.

2

02

Обрежьте до объекта и предпочитайте квадрат. Спрайты, иконки и планы построек — все предполагают 1:1. Обрезка после преобразования стоит вам ячеек, которые вы уже израсходовали.

3

03

Выберите сетку, соответствующую выводу: 32×32 для спрайта персонажа, 64×64 для иконки, 128×128 или больше для обоев. Проверьте 16×16, сначала уменьшив фото до 16 пикселей в ширину; если силуэт там нечитаем, он будет нечитаем и в преобразовании.

4

04

Задайте количество цветов. Начните с 8–12 для персонажа, 16–24 для иконки, 32–48 для обоев. Если предпросмотр выглядит мутным, увеличьте сетку раньше, чем цвета.

5

05

Преобразуйте и скачайте PNG. Используйте ×1, если спрайт будет масштабировать игровой движок, ×4 или ×8, если вам нужен файл, который можно публиковать напрямую.

6

06

Проверьте палитру. Откройте PNG в пиксельном редакторе и прочитайте количество цветов. Оно должно совпадать с заданным вами числом. Если оно выше, значит, что-то пересэмплировалось при экспорте — обычно это изменение размера с включённой плавной интерполяцией.

7

07

Почистите вручную. Уберите изолированные ячейки, которые читаются как шум, выровняйте контур и убедитесь, что свет идёт с одной стороны. Преобразование удаляет информацию; оно не выдумывает детали.

Размер вывода и количество цветов

Сетка 16×16 — это 256 ячеек. Каждая ячейка — решение, и нет места для ячейки, которая ничего не несёт. Если вы потратите 64 цвета на эти 256 ячеек, каждый цвет покроет в среднем примерно четыре ячейки. Это крапины, а не затенение.

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

Где преобразование изображения в пиксель-арт идёт не так

Самая частая ошибка — завышенное количество цветов на маленькой сетке. Результат кажется приемлемым в предпросмотре при увеличении 400% и превращается в грязь в тот самый момент, когда его показывают при 1× в игре или окне чата.

Вторая — дизеринг на низкой сетке. Шум дизеринга рассчитан на то, что глаз усреднит его в полном размере; на спрайте 32×32, рассматриваемом крупно, это просто неверные пиксели, которые теперь приходится стирать по одному.

Третья — нецелый масштаб экспорта. Результат 32×32 при ×3 нормален — это 96×96; дробный масштаб даёт неравномерную ширину ячеек, которая выглядит как плохой скриншот. Четвёртая — сжатый источник: в JPEG, который уже был сильно сжат, артефакты блоков впечатаны, и квантизация добросовестно воспроизводит их как толпу почти одинаковых цветов.

СеткаТипичный объектБюджет цветовГде ломается
16×16Иконка предмета, одиночный объект, тайл4–8Всего 256 ячеек. Для лица нет места и под оба глаза, и под рот. Два объекта превращаются в нечитаемое пятно.
32×32Спрайт персонажа, небольшой аватар8–16Пряди волос, текст и тонкие оправы очков исчезают. Контуры должны быть шириной в одну ячейку, иначе они съедают внутреннюю часть.
64×64Иконка приложения, портрет, предмет16–32Текстура фона начинает конкурировать с объектом. Насыщенные фоны превращаются в шум, и их приходится выравнивать.
128×128Обои, постер, настенное изображение32–48Сетка теперь мельче, чем детали в большинстве обрезанных фото с телефона, поэтому преобразование воспроизводит зерно камеры.
256×256Большие обои, текстура мира, план постройки48–64Оправдано только на резком источнике. Примерно после 128 ячеек в ширину конвертер в основном показывает вам шум фотографии.

«Изображение в пиксель-арт» против «Фото в пиксель-арт»

Эти две фразы дают разные наборы результатов в поиске и описывают одну и ту же операцию. Одна заимствует слово «изображение», другая — камеру. Ни та, ни другая не меняет того, что делает конвертер: уменьшить до сетки, сократить до палитры, экспортировать.

На этой странице это одно и то же действие и один и тот же инструмент. Значения по умолчанию — сетка 64×64 при 32 цветах, что является безопасной серединой для обоев или большой иконки. Сначала двигайте сетку, затем цвета.

ФразаЧто люди имеют в видуЧто меняется в инструменте
картинка в пиксель-артОбщий запрос. Любое изображение на входе, любое на выходе, обычно что-то декоративное.Ничего. Сетка по умолчанию 64×64, количество цветов 32.
фото в пиксель-артТо же действие, описанное словом, связанным с камерой. Часто портрет, питомец или автомобиль.Ничего. Здесь чаще используется порог фона.
изображение в пиксель-артТот же запрос снова, иногда означающий вместо этого векторную трассировку.Ничего, если только пользователю не нужен векторный вывод, который этот инструмент не создаёт.
пикселизировать фотоИногда означает мозаику или размытие поверх, а не сокращённую палитру.Используйте низкую сетку с большим количеством цветов, если вам на самом деле нужна мозаика.
фильтр 8-бит / 16-битОтсылка к цветовой глубине, заимствованная у старого железа.Привяжитесь к фиксированной шкале вместо автоматической палитры, чтобы получить именно это ограничение.

Изображение в пиксель-арт для Minecraft

Преобразования для Minecraft ломают обычные правила, потому что вывод — это не изображение, а план постройки. Сетка — это число блоков, а не число пикселей: преобразование 64×64 — это стена шириной 64 блока, 4 096 блоков материала. Палитру выбирает не конвертер — это те блоки, которые вы готовы набрать. В режиме выживания этот набор мал. В творческом режиме он больше, но всё равно конечен и неравномерно распределён по цветовым семействам.

Именно из-за этого второго ограничения фото требует большего числа блоков, чем спрайт. Спрайт может потратить 16 цветов на лицо. Стена из шерсти, бетона и терракоты может дать вам четыре пригодных ступени в одном цветовом семействе, а блоки ландшафта добавляют собственную текстуру, которая спорит с плоскими тонами. Детали приходится нести разрешением: удвоение числа блоков учетверяет стоимость по блокам и часто остаётся единственным способом сохранить читаемость черт.

Планируйте сетку исходя из числа блоков, которые вы действительно готовы поставить. Стена 32×32 — это 1 024 блока, то есть одна долгая сессия. Стена 128×128 — это 16 384 блока на слой, прежде чем вы добавите второй слой для затенения. Экспортируйте PNG и затем используйте его как поячеечную шпаргалку при установке блоков, а не пытайтесь удержать всё в голове.

Сопоставление пикселей фото блокам

Сначала преобразуйте фото в небольшую сетку, затем ограничьте палитру списком допустимых блоков, чтобы каждый цвет на изображении соответствовал чему-то, что можно поставить. Полезный результат — не только изображение, но и список материалов: сколько блоков каждого типа вам нужно, отсортированных по количеству. Это превращает изображение в список покупок.

Стройте слоями. Первый слой — силуэт в самом тёмном тоне, второй слой — средние тона, третий слой — блики и любая деталь в одну ячейку. Если шаблон постройки помогает, начните с небольшого мира в пиксельном стиле, например Mini World, и замените его текстуры своим преобразованием, чтобы масштаб, высота камеры и плотность блоков уже были верными.

Что можно сделать из преобразования

Выберите вывод прежде, чем выбирать настройки, потому что каждый вывод налагает одно ограничение, которое перевешивает всё остальное.

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

  • Игровой спрайтОграничение: маленькая сетка, малое количество цветов. 32×32 или меньше при 16 цветах или меньше на прозрачном фоне. Всё большее тратит место в атласе, а детали, добавленные при таком размере, исчезают при 1× на экране.
  • Иконка или аватарОграничение: средняя сетка, высокий контраст. От 64×64 до 128×128 при 24–32 цветах. Иконки читаются мелкими и на расстоянии, поэтому контраст объекта с фоном важнее затенения.
  • ОбоиОграничение: большая сетка, много цветов. 128×128 и больше при 32–64 цветах. Обои никогда не уменьшает зритель, поэтому мелкие ячейки выживают; риск здесь — шум камеры, а не потеря деталей.
  • Текстура мира или тайлОграничение: бесшовность. Левый край должен сходиться с правым, а верх — с низом. Преобразуйте тайлящийся источник или отразите изображение по обеим осям до преобразования, а затем вручную исправьте шов.

От 2D-преобразования к проходимому пиксельному миру

Скачанный PNG — это не только изображение, но и текстура. Конструктор 3D-игр читает PNG, регистрирует его как материал и применяет к геометрии в сцене. Поместите его на плоскость в целом масштабе — и пиксели останутся квадратными. Установите фильтрацию текстуры в режим ближайшего соседа и отключите мипмапы, если хотите жёсткие края вместо мягкого смешения на расстоянии.

Сцена, встроенная ниже, работает в браузере с текстурами именно такого рода. Вы смотрите на стены, полы и предметы, текстурированные из небольших пиксельных PNG, где исходная сетка считается настоящей единицей разрешения: каждый пиксель становится квадратом на поверхности. Спрайты персонажей в сцене следуют тому же правилу — небольшая сетка, небольшая палитра, фиксированная высота камеры. Agent Sprite Forge создаёт спрайты персонажей в этом формате, и они ложатся на ту же тексельную сетку, что и окружение.

Одно честное ограничение: пиксельная текстура на 3D-поверхности не остаётся идеально пиксельной при движении камеры. Перспектива делит поверхность по глубине неравномерно, поэтому дальняя стена сжимает свои ячейки в прямоугольники, а ближняя — растягивает их. Пиксельные 3D-сцены справляются с этим либо фиксируя камеру, либо принимая, что расстояние меняет форму ячеек.

Как сохранить преобразование при переходе в 3D

Используйте размеры, кратные степени двойки, — 32, 64, 128, 256 — потому что они чисто тайлятся по поверхности и ровно делятся на каждом мип-уровне. Держите плотность текселей одинаковой у всех объектов: стена в 128 пикселей на метр рядом с ящиком в 32 пикселя на метр читается как две разные игры.

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

The Cyclops' Island — пиксельная 3D-игра, построенная ровно из такого сеточного арта.

Больше бесплатных пиксельных инструментов

Если у вас уже есть фото, начните с конвертера на этой странице. Генератор — для случая, когда его нет.

  • Онлайн-редактор пиксель-артаРисуйте и редактируйте преобразованный PNG в браузере с наложением сетки и зафиксированной палитрой, чтобы чистка оставалась в пределах заданного вами бюджета цветов.
  • AI-генератор пиксель-артаОпишите объект текстом и получите спрайт или изображение сцены без исходного фото — полезно для объектов, которые не сфотографировать чисто.
  • Справочник размеров пиксель-артаСправочная таблица размеров сетки и количества цветов для каждого типа вывода, если вам нужны цифры без запуска преобразования.

Войдите в мир, которому он принадлежит

Спрайт — это персонаж, которому негде стоять. Последний шаг — тот, которого не предлагает никто другой: возьмите лист, который вы только что собрали, и поместите его в мир, по которому кто-то может ходить, — небольшой остров, планету, дождливый уголок улицы. Каждый мир на этом сайте был создан из одного письменного описания и опубликован как страница, в которую можно играть.

FAQ

Бесплатен ли конвертер изображений в пиксель-арт? +

Да. Преобразование выполняется в вашем браузере, а экспорт PNG не имеет водяного знака и платного уровня на этой странице.

Нужно ли регистрироваться или входить? +

Нет. Шага с аккаунтом нет, потому что изображение никогда не загружается — оно декодируется локально и отрисовывается на канвасе во вкладке.

Какие форматы изображений можно загружать? +

PNG, JPEG, WebP, GIF (первый кадр) и BMP. Прозрачные PNG сохраняют альфа-канал, пока вы держите порог фона выключенным.

Удаляет ли он фон? +

Не автоматически. Есть порог по яркости или альфе, который превращает почти белые или почти прозрачные ячейки в прозрачность. Это работает на простом высококонтрастном фоне и пробивает дыры в объекте на насыщенном.

Можно ли выбрать собственную палитру? +

Да. Автоматическая палитра используется по умолчанию, но вы можете привязать преобразование к фиксированной шкале. Привязывайте, когда несколько спрайтов должны делить одну палитру или когда вы подгоняетесь под конкретное ограничение цветовой глубины.

Есть ли ограничение на размер загружаемых файлов? +

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

Можно ли использовать результат в коммерческих целях? +

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

Можно ли пикселизировать фото человека? +

Да, и это частый случай. Используйте сетку от 32×32 до 64×64 при 8–16 цветах, обрежьте плотно до головы и плеч и ожидайте, что очки, зубы и тонкие украшения исчезнут. Результат — стилизованное сходство, а не инструмент анонимизации: при большой сетке лицо может остаться узнаваемым.

Назад к конструктору 3D-игр

Все 31 готовый 3D-мир, игра и сцена находятся на одной странице — в каждую из них можно играть.

Платформа: Neta StudioСтраница: Конвертер фото и изображений в пиксель-артЧитать далее: /explore/tool/pixel-art-maker · /explore/tool/ai-pixel-art-generator · /explore/guide/pixel-art-sizes
×