Посмотрите внимательно на газетную фотографию, и она разваливается на черные точки разных размеров Посмотрите на скриншот первого Macintosh и серое небо оказывается россыпью черно-белых пикселей Посмотрите на спрайт Game Boy и четыре оттенка зеленого как-то рисуют лицо Ни один из этих дисплеев или нажатий не мог показать плавный градиент, и все они подделывают один одинаково: расположив несколько доступных цветов в узоры, глаз усредняется до тона.
Эта техника сглаживается. Это руководство объясняет, почему она существует, чем основные алгоритмы отличаются в арифметике, которую они используют, какие настройки в инструменте сглаживания меняются и как получить чистый вывод для экрана или печати. В обработанных примерах используется Инструмент сглаживания изображений Toolz, а числа происходят из тех же формул, которые он выполняет.
TL;DR: Дизеринг воспроизводит изображение непрерывного тона с небольшой палитрой, часто всего двумя цветами, путем размещения точек в узорах, которые глаз смешивает в промежуточные тона. упорядоченное дизеринг (Bayer) сравнивает каждый пиксель с фиксированной пороговой матрицей и дает регулярное перекрестие. диффузия ошибок (Floyd-Steinberg, Atkinson) толкает каждый пиксель's ошибка округления на своих соседей для более органического зерна.Halftone изменяет размер точек вдоль повернутого экрана, как печать.The Инструмент "Дизерирование изображения" предлагает шесть режимов, ретро-палитры, экспорт PNG до 8x и истинный вектор SVG, все на стороне клиента, бесплатно, без регистрации.
Что такое сглаживание изображений?
Смешение изображений - это способ показать тона, которые палитра не может представлять напрямую, путем смешивания цветов, которые она может представлять в небольших узорах. черно-белый принтер не может напечатать 50% серый, но он может напечатать шахматную доску из черно-белых точек, которая выглядит серым с обычного расстояния просмотра.
Проблема, которую он решает, называется квантованием Каждый пиксель должен быть округлен до ближайшего цвета в доступной палитре. без сглаживания сниженная до черно-белого фотография сохраняет только жесткий силуэт: все светлее среднего серого становится белым, а все темнее становится черным. градиент исчез. при сглаживании округление все равно происходит по пикселям, но ошибка распределяется или компенсируется узором, поэтому плотность темных точек в каждой области отслеживает, насколько темной была эта область в оригинале.
Различные алгоритмы распределяют эту ошибку по-разному, и шаблон, который каждый оставляет позади, является его визуальной подписью. именно поэтому & quot;dithered& quot; может означать аккуратное перекрестие старой игры для ПК, зернистую текстуру MacPaint или круглые точки плаката, напечатанного на экране.
Чем отличаются алгоритмы сглаживания?
Семейств две. Заказанное сглаживание решает каждый пиксель независимо, сравнивая его с положением в фиксированном пороговом шаблоне. Диффузия ошибок определяет пиксели последовательно и переносит каждую ошибку округления вперед к еще не обработанным пикселям. полутонизация - это родственник, полученный от печати, который меняет размер точки, а не расположение точки.
| Режим в инструменте | Семья | Как это решает | Смотри | для |
|---|---|---|---|---|
| Байер 4х4 | Заказал | Сравните тон с пороговой матрицей 4х4 | Обычный перекрестие, видимый узор | Ретро-игра и ранний стиль ПК, плакаты |
| Аткинсон | Диффузия ошибок | Нажмите 3/4 ошибки на шесть соседей | Высокая контрастность, задутые блики | Образ Macintosh 1984 года, портреты с эффектом |
| Флойд-Стейнберг | Диффузия ошибок | Переместите всю ошибку к четырем соседям | Мелкое органическое зерно, самый точный тон | Фотографии, где детали имеют значение |
| Полутон | Амплитудно-модулированный экран | Радиус точки растет с темнотой, на повернутой сетке | Круглые точки под углом | Плакаты в печатном стиле, комиксы и поп-арт |
| Кибер-глитч | Защелка палитры плюс смещение | Ближайший цвет палитры в блоке, сдвинутые линии развертки | Красочные блоки с горизонтальными надрывами | Стилизованное многоцветное искусство |
| Жесткий 1 бит | Порог | Темный, если тон ниже 128 | Никакого размытия, чистый силуэт | Логотипы, линейное искусство, трафареты |
Следующие разделы проходят через арифметику с действительными числами, начиная со значения тона, которое разделяет каждый режим.
Как рассчитывается тон pixel's перед сглаживанием?
Перед тем, как какой-либо шаблон будет применен, каждый пиксель преобразуется в единое значение яркости от 0 (черный) до 255 (белый).Инструмент использует веса яркости от Рекомендация МСЭ-R BT.601которые имеют наибольший вес, поскольку человеческое зрение наиболее чувствительно к нему:
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
Ползунок Яркость сдвигает каждый пиксель на -100 до +100 Ползунок Контрастной кривой, 0.5 до 3 с дефолтом 1.4, растягивает тона в сторону от среднего серого.
Рабочий пример: среднесерый пиксель RGB (100, 100, 100) в настройках по умолчанию.
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
Так что контраст по умолчанию толкает этот серый темнее, от 100 до примерно 89. пиксель точно на 128 еле движется, а пиксель на 180 движется светлее. повышение контраста расширяет это распространение, что означает меньше средних тонов и более смелые точечные узоры.
Как Bayer заказывал сглаживание?
Сглаживание Байера плитка небольшой матрицы порогов по изображению и отмечает пиксель темный, когда его тон падает ниже порога в его положении. матрица расположена так, что пороги распределены как можно более равномерно по плитке, расположение опубликовано Брайс Байер в 1973 г. Инструмент использует версию 4x4, масштабированную до 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Возьмите плоскую область, где каждый пиксель имеет изогнутый тон 89 из примера выше.Ячейка темна, когда 89 ниже своего порога. пороги выше 89 - это 96, 112, 128, 144, 160, 176, 192, 208, 224 и 240: десять из шестнадцати. Таким образом, 10 из каждых 16 ячеек получают чернила, что составляет 62,5% покрытия, близко к тону и #39;s темнота 1 - 89/255 = 65%.
Каждая область с одинаковым тоном получает точно такой же шаблон, и это повторение является взглядом Байера. Он никогда не производит случайное зерно, он плитка чисто, и он хорошо сжимает, как PNG. Его слабость - полосчатость: медленный градиент проходит через максимум 17 различных шаблонов.
Как работает диффузия ошибок Флойда-Стейнберга?
Флойд-Стейнберг обрабатывает изображение слева направо, сверху вниз. каждый пиксель округлен до чёрного или белого, а разница между его тоном и значением, до которого он был округлен, делится между четырьмя соседями, которые ещё не были обработаны, используя веса, которые прибавляют к 16/16. Роберт Флойд и Луис Стейнберг опубликовали его в 1976 году.
current 7/16
3/16 5/16 1/16
Работал пример с тоном 89, Он ниже отсечки 128, поэтому пиксель становится черным (0).Ошибка 89 - 0 = 89, который передается на
| Сосед | Поделиться | Добавил его тону |
|---|---|---|
| Правый | 7/16 | 38,9 |
| Ниже слева | 3/16 | 16,7 |
| Ниже | 5/16 | 27,8 |
| Ниже справа | 1/16 | 5.6 |
| Всего | 16/16 | 89,0 |
Пиксель справа теперь имеет 89 + 38.9 = 127.9, как раз под отсечкой, поэтому он, вероятно, становится черным тоже и проходит на свою меньшую ошибку. немного дальше, накопленная ошибка опрокидывает пиксель над 128 и он становится белым. над областью, доля черно-белых пикселей соответствует исходному тону, и потому что выбор зависит от соседей, зерно выглядит нерегулярно, а не плиточно.
Поскольку полная ошибка сохраняется, Флойд-Стейнберг лучше всего сохраняет общий тон, поэтому он является выбором для фотографической достоверности.
Почему сглаживание Аткинсона выглядит таким контрастным?
Сглаживание Аткинсона, написанное Биллом Аткинсоном для оригинального Apple Macintosh, расширяет ошибку пошире, но намеренно теряет часть из нее. каждый из шести соседей получает 1/8 ошибки, поэтому передается только 6/8 (три четверти):
current 1/8 1/8
1/8 1/8 1/8
1/8
При том же тоне 89 и ошибке 89 каждый сосед получает 11.125, в общей сложности 66.75 передаётся, а 22.25 просто опускается.Ошибка падения толкает почти белые области в чисто белые и почти черные области в чисто черный, поэтому блики выдуваются, тени блокируются, а средние тона сохраняют четкую открытую текстуру. Она менее точна, чем Флойд-Штайнберг, и часто более привлекательна, особенно на лицах и небольших экранах.
Как работает полутоновый режим?
Полутонирование изменяет размер точек, а не их размещение Инструмент укладывает сетку точек выборки, повернутых к углу экрана, считывает тон в каждой точке и рисует круг, радиус которого растет по мере темнения тона:
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
С пиксельной шкалой 4px по умолчанию:
| Тон | Радиус | Результат |
|---|---|---|
| 0 (черный) | 2.6, ограниченный 2,0 пх | Трогательные точки, сплошная темнота |
| 89 | (0,651) x 2 x 1,3 = 1,69 шт | Средняя точка |
| 200 | (0,216) x 2 x 1,3 = 0,56 шт | Маленькая точка |
| 230 | (0,098) x 2 x 1,3 = 0,25 шт | Пропущено, читается как бумага |
Угол по умолчанию равен 45 градусам, соглашение для одноцветного экрана, потому что диагональная сетка менее заметна глазу, чем строки, выровненные по краям страницы.Углы около 0 или 90 создают видимые горизонтальные или вертикальные линии. ползунок угла влияет только на этот режим.
Что изменяют масштаб пикселей, палитры и настройки инвертирования?
Пиксельная шкала (от 2 до 32px, по умолчанию 4) устанавливает размер каждого блока или ячейки точки Инструмент выбирает один пиксель на ячейку, а не усредняет ячейку, поэтому очень мелкие детали, меньшие, чем ячейка, могут исчезнуть или создать муаровые узоры на тканях и решетках. Более крупные ячейки дают более фрагментный и графический плакат; меньшие ячейки содержат больше деталей и создают более крупные файлы SVG.
Палитры установить цвета В комплект входят пять пресетов: Brutal Paper (папирус, аварийный желтый, уголь), Mac OS 1984 (белый, серый, черный), Gameboy Classic (четыре зеленых), Cyberpunk Neon и Synthwave 80s, плюс Custom Colors с собственным фоном и передним планом. пять из шести режимов являются двухцветными и используют только первый и последний цвет палитры. именно поэтому Gameboy Classic показывает только самые светлые и темные зеленые цвета в Bayer или Floyd-Steinberg.Cyber Glitch - это единственный режим, который отображается в каждом цвете палитры.
Инвертировать меняет фон и передний план на светлые точки на темном поле.
Какой размер вы можете экспортировать и когда следует использовать SVG?
Фотография сначала помещается на фиксированную сцену, поэтому файл камеры с разрешением 6000px отображается так же быстро, как маленький. Перетащите внутрь холста, чтобы изменить положение урожая.
| Соотношение сторон | Этап (1х) | 2x (по умолчанию) | 4х | 8х |
|---|---|---|---|---|
| Оригинальный | Ширина 840 пх | 1680 широкий | 3360 широкий | 6720 широкий |
| 1:1 квадратный | 840 х 840 | 1680 х 1680 | 3360 х 3360 | 6720 х 6720 |
| 16:9 пейзаж | 1120 х 630 | 2240 х 1260 | 4480 х 2520 | 8960 х 5040 |
| 9:16 вертикально | 630 х 1120 | 1260 х 2240 | 2520 х 4480 | 5040 х 8960 |
| 4:3 классика | 1040 х 780 | 2080 х 1560 | 4160 х 3120 | 8320 х 6240 |
Экспорт PNG не увеличивает предварительный просмотр. Он перерисовывает источник в целевом размере и снова запускает сглаживание с масштабом пикселей, умноженным на масштаб экспорта, поэтому при 4x точка 4px становится четкой точкой 16px, а не размытым увеличением. Рендеринг выполняется с помощью API холста HTML, который хранит большие растровые изображения в памяти; если 8x экспорт не удался с & quot;Export не удался. Попробуйте меньший масштаб экспорта. & quot;, сделайте это.
SVG-экспорт записывает каждую точку как реальную <rect> или <circle> элемент, следующий за Спецификация W3C SVG, так что плакат масштабируется до любого размера печати без повторной выборки и открывается в векторном редакторе. текст плаката остается редактируемым текстом. компромиссом является размер файла. 4px шкала на этапе 840 x 1120 имеет 210 x 280 = 58 800 ячеек, а темное изображение в прямолинейном режиме может записать большинство из них как отдельные элементы примерно по 55 символов каждый, что приближается к 3 МБ. Удвоение масштаба пикселей до 8 сокращает количество ячеек до четверти. Используйте SVG для печати и редактирования, PNG для веб.
Эффект ЭЛТ-сканлайна никогда не достигает экспорта; это только наложение предварительного просмотра. наложение карты плаката, с другой стороны, является частью экспорта и по умолчанию включено с заголовком заполнителя & quot;DITHERED//2026& quot;; untick & quot;Показать наложение карты плаката & quot; если вы хотите только изображение.
Мои изображения загружены?
Нет. файл открывается как URL-адрес локального объекта, нарисованный на холсте и разлитый на одной и той же вкладке браузера. ни один запрос не содержит данных изображения, поэтому неизданные фотографии или клиентские ресурсы остаются на вашем устройстве, и инструмент продолжает работать с сетью выключен после загрузки. Вставка из буфера обмена с Ctrl+V или Cmd+V тоже работает.
Встроенные образцы (Earthrise, Blue Marble и лунный отпечаток ботинка) - это фотографии НАСА Работы федерального правительства США не подпадают под действие авторских прав 17 USC 105, вот почему они могут отправлять как образцы. Для ваших собственных загрузок инструмент не добавляет водяных знаков и не претендует на права; обычные ограничения - это любые права, которыми вы обладаете в исходном изображении.
На какие ошибки можно нарваться?
| Сообщение или симптом | Причина | Исправить |
|---|---|---|
| "Этот файл не является image." | Тип файла's не является изображением | Преобразуйте его сначала, например, с помощью преобразователя формата изображения |
| "Это изображение не удалось декодировать." | Браузер не может читать этот формат, например HEIC за пределами Safari | Перевести в JPG или PNG |
| "Экспорт не удался. Попробуйте меньший экспортный масштаб." | Браузер не смог выделить большой холст | Выбирайте 4х или 2х |
| "Чтение буфера обмена было заблокировано..." | Браузер отказал в доступе буфера обмена к кнопке | Вместо этого нажмите Ctrl+V или Cmd+V на странице |
| Палитра показывает только два цвета | Двухцветные режимы используют первый и последний цвета | Переключитесь на Cyber Glitch или установите собственные цвета |
| Муар или мерцающие узоры | Мелкая регулярная деталь меньше масштаба пикселя | Сначала немного увеличьте масштаб пикселя или размыть источник |
| SVG намного больше, чем PNG | Один элемент на точку | Повысьте масштаб пикселей или экспортируйте PNG |
Прозрачные области в PNG перед сглаживанием помещаются на белый цвет, поэтому они читаются как бумага.
Альтернативы размыванию изображения
| стрелка | Как | банкноты |
|---|---|---|
| ГИМП | Изображение, режим, индексированное, с размытием Флойда-Стейнберга | Основанный на палитре, без угла полутонового экрана |
| Фотошоп | Градус серого, затем режим растрового изображения с полутоновым экраном или диффузионной дизерой | Печатно-ориентированный, платный |
| ИзображениеMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Сценарий, множество пороговых карт |
| ИзображениеMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Распространение ошибок на черно-белое |
| Toolz Image Dither | Шесть режимов, палитры, векторные SVG | Сторона клиента, предварительный просмотр при перетаскивании |
Инструменты командной строки выигрывают для партий. интерактивный инструмент выигрывает, когда внешний вид зависит от подталкивания контраста и размера точки во время просмотра результата.
Если увядший PNG направляется на веб-сайт, Руководство по сжатию изображений охватывает, как уменьшить его дальше; изображения только с двумя цветами очень хорошо сжимаются, как PNG. Для преобразования вывода в другой формат Руководство по конвертеру формата изображения объясняет, когда подходит PNG, WebP или GIF. Полный набор живет на хаб инструментов изображенийи ты можешь попробуйте инструмент для сглаживания с одним из образцов НАСА перед загрузкой собственной фотографии.
