Дизеринг (Dithering) эффект
при котором изображение строится из точек без их размывания, и чем
меньше цветов при этом используется тем они более заметны.
Откройте
необходимое изображение. Желательно перевести его в монохромный режим.
Легче всего это сделать, используя команду «Grayscale» (меню «Image»
раздел «Mode») или «Desaturate» (меню «Image» раздел «Adjustments»).
Также вы можете перевести изображение в монохромный режим используя для этого «Channel Mixer».
В разделе «Adjustments» меню «Image» выберите пункт «Channel Mixer». В диалоговом окне
«Channel
Mixer» поставьте галочку напротив «Monochrome», и поэкспериментируйте
со значениями «Red», «Green», «Blue» и «Constant» пока не увидите
наилучший на ваш взгляд
результат.
Изображение переведено в монохромный режим, теперь применим к нему и сам «Dithering».
В
меню «Image» в разделе «Mode» выберите пункт «Indexed Color». В случае
если в изображении больше одного слоя, появиться вопрос «Flatten visible
layers and discard hidden
layers?» (Склеить все видимые слои и удалить скрытые), нажмите «ОК».
В
открывшемся диалоговом окне «Indexed Color» в пункте «Palette» выберите
любое значение кроме «System (Mac OS)», «System (Windows)» и «Web». В
пункте «Colors» введите необходимое количество цветов, желательно 2. В
пункте «Forced» выберите «Black and White». В поле «Options» в пункте
«Dither» выберите «Diffusion».
Изображение с эффектом дизеринг (Dithering) готово.
HABR:
Материал, скорее, для начинающих верстальщиков, например таких, что работают в Microsoft ;) На тему натолкнула одна картинка с одной популярной странички:
Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.
Дело в том, что весит картинка 55 211 байт. А вот она же, но уже размером 1 764 байт. Если вы думаете, что разница в формате (у меня png, а в оригинале gif), то вы правы лишь отчасти. Попробуйте пересохранить исходное изображение в png, врядли у вас получится серьезный выигрыш (у меня размер получился 45 кб). В общем, дело не в формате.
Все дело в способе растеризации градиента.
Для начала, давайте подумаем, как можно изобразить градиент.
Для простоты будем считать, что у нас один компонент цвета, серый. Нам нужен градиент от цвета 10 до цвета 20 (от совсем черного до чуть более светлого) высотой 40 пикселей. Что же делать программе, которая рисует градиент, если промежуточных значений цвета 10, а высота градиента 40 пикселей? У нее есть 2 выхода: либо делать полоски по 4 пикселя одного цвета, либо применять какие-то хитрые маски так, что рядом стоящие пиксели были разного цвета, но их общая интенсивность изменялась равномерно. Понятно, что второй способ может оказаться приятнее для глаз, когда как первый намного лучше поддается компрессии. Чтобы хоть как-то проиллюстрировать различия, я выставил контраст почти на максимум для моей и майкрософтовской картинки:
Дак что там про фотошоп?
Но какой из этих алгоритмов использует Фотошоп? Это зависит от того, стои ли у вас эта галочка на панели инструмента «градиент»:
Кроме того, если градиент рисуется эффектом «Gradient overlay» у слоя, то градиент всегда будет без dither.
Думаю, понятно, что в данном случае удачным выбором будет градиент без dither. Именно он и применен в моей картинке.
Но бывают и случаи, когда градиент без dither смотрится не очень хорошо:
Возможно, не на каждом мониторе будет заметно, но этот градиент состоит из отдельных диагональных полосок цвета.
В то же время, вариант с dither смотрится куда лучше:
Правда и весит он, как и картинка, с которой все началось, 50+ килобайт. Для таких случаев я бы порекомендовал сохранить картинку в формате jpg с качеством 100. От этого качество не на много ухудшится, но размер будет волне приемлемым — 8 кб.
Источники:
Комментариев нет:
Отправить комментарий