Про PNG. Часть третья

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Сергей Чикуенок

8 апреля 2008


Задача.

Научиться работать с PNG.

В этой статье я хочу рассказать об одной очень неприятной особенности «Фотошопа», которая проявляется при сохранении прозрачных изображений в PNG24. Возьмем исходное изображение и скопируем какой-нибудь фрагмент в PNG24. Я это сделал так: с помощью инструмента Polygonal Lasso выделил фрагмент, скопировал и вставил в новый документ, после чего сохранил через Save for Web:


PNG24, 456 Кб

Как мы выяснили в первой части, в PNG24 изображение, по сути, состоит из двух слоев: RGB, содержащего данные о цвете каждого пикселя, и альфа-канала с информацией об их прозрачности. Логично предположить, что в абсолютно прозрачных областях должен быть какой-нибудь один цвет, чтобы эффективнее упаковать изображение. Однако вот что сохранил «Фотошоп» в RGB-слое (я это увидел через редактор Seashore):


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


Если не хочется пользоваться другими редакторами (например, в Adobe Fireworks такого недостатка я не заметил), предлагаю простой способ устранения этого дефекта в «Фотошопе». Наша задача — заменить всю информацию в абсолютно прозрачных областях каким-нибудь одним цветом (желательно черным, чтобы не сомневаться в том, что эти области будут иметь наименьший вес в байтах).

1. Откроем пример в «Фотошопе» и выделим изображение на слое: Ctrl+клик по маленькому изображению слоя в палитре Layers.

2. Перейдем в режим быстрой маски (клавиша Q).

3. С помощью Image → Adjustments → Threshold оставим только те пиксели маски, цвет которых был черным. Для этого перетащим ползунок в крайнее левое положение.


4. Выходим из режима быстрой маски (клавиша Q) и инвертируем выделение (Select → Inverse или Ctrl+Shift+I). Выделенными остались только абсолютно прозрачные пиксели.

5. Заливаем выделенную область черным цветом (способов много, например, через Edit → Fill).


6. Снова инвертируем выделение и добавляем слою маску (иконка в палитре слоев).

7. Теперь делаем Save for Web и смотрим, как изображение чудесным образом «похудело» на 122 КБ.


Еще раз повторю, что все действия очень удобно записываются в Actions, после чего выполняются одним нажатием клавиши. Рекомендую проделывать все описанное при сохранении любого изображения с прозрачностью в PNG24, так как подобный недостаток проявляется и в картинках, нарисованных «с чистого листа».

Продолжение будет.

1
2
3
4