;-)
  • Инвентарь
  • Техногрет
  • Сергей Чикуенок

    Про PNG. Часть третья 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