Что нового мы узнали?

Что нового мы узнали?

В этом уроке мы рассмотрели форматы изображений PSD, TIFF, BMP и TGA. Эти форматы наиболее часто используются для сохранения промежуточных результатов работы и для хранения графического материала (фотографий, текстур, готовых элементов и т. д.). Также мы узнали, что формат JPEG часто используется для хранения фотографий и для сохранения конечных результатов работы, но из-за сжатия с потерями его не следует использовать на промежуточных этапах работы.

Формат BMP

Формат BMP

Формат BMP также может использоваться для хранения данных без потери качества. Этот формат является собственным форматом Windows и используется для целей системы. Например, именно в этом формате изображения включаются в состав исполняемых файлов приложений и выводятся на экран. По сути дела, любое приложение, использующее графический интерфейс Windows, имеет в своем составе средства для открытия, редактирования и сохранения BMP-файлов.

В формате BMP можно сохранять изображения с глубиной цвета (числом битов, описывающих один пиксел изображения) 1, 4, 8 и 24 бита, что соответствует максимальному числу используемых цветов 2, 16, 256 и 16 777 216 соответственно. Файл может содержать палитру, определяющую цвета, отличные от принятых в системе.

В отличие от таких форматов как TIFF или PSD, в формате BMP не предусматривается использование системы цветокоррекции. Это значит, что вы не сможете гарантировать того, что получатель вашего файла увидит цвета изображения такими, какими вы их определили (предположите, к примеру, что у вашего коллеги монитор настроен на меньшую или большую, чем у вас, яркость).

Примечание 10
Примечание 10

Для того чтобы учесть яркость и другие настройки монитора в системе цветокоррек ции, вам понадобится откалибровать монитор и программу коррекции цветов (в Adobe PhotoShop для этого используется программа Adobe Gamma, которая автоматически загружается при старте системы). Процедура коррекции может быть выполнена при первом запуске Adobe PhotoShop или путем вызова утилиты настройки из Панели управления (Control panel > Adobe Gamma (Панель управления > Adobe Gamma)).

Изображение в формате BMP может быть сжато при помощи алгоритма RLE (такие файлы обычно имеют расширение .RLE вместо .BMP). Однако файлы с таким сжатием распознаются и обрабатываются далеко не всеми графическими программами.

Adobe PhotoShop позволяет включить сжатие только для файлов, сохраняемых с глубиной цвета 4 или 8 битов (16 или 256 цветов). На Рисунок 1.2 показано окно сохранения BMP-файла, выводимое на экран после выбора его имени. Для включения сжатия установите флажок Compress (RLE) (Сжатие (RLE)).

Формат JPEG

Формат JPEG

При разработке графического оформления web-сайта часто приходится пользоваться готовыми изображениями, например, фотографиями. В большинстве случаев такие изображения доступны в формате JPEG. Этот формат позволяет хранить цветные изображение с глубиной до 24 битов (16 777 216 цветов), а также изображения в оттенках серого.

Основная особенность формата JPEG — высокая степень сжатия данных, достигаемая за счет сжатия с потерями. То есть часть данных во время сжатия отбрасывается. Это приводит к снижению качества картинки (теряются мелкие детали, появляются разводы и муар), но позволяет достичь хорошего сжатия изображения. Разумеется, такой подход неприменим к чертежам, схемам и другим видам графики, требующим передачи четких линий и надписей. Но для фотоизображений, особенно имеющих большие размеры, подобные алгоритмы сжатия вполне подходят.

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

Совет 3
Совет 3

Работая с исходными изображениями (фотографиями, заготовками), стремитесь получать оригиналы большего размера, чем это нужно. Например, если вам необходимо получить изображение размером 100X100 пикселов и обработать его, возьмите исходное изображение размером 1000X1000. Обработав изображение, придайте ему нужные размеры. Разумеется, такое соотношение размеров не является правилом, все зависит от конкретной ситуации. Поступать подобным образом следует потому, что при обработке растровых изображений программа сталкивается с конечной единицей измерения — пикселом. Нельзя получить элемент изображения, меньший, чем один пиксел. Графический редактор, обрабатывая изображение большего размера, будет иметь больше «простора» для действий и сможет выполнить обработку более качественно. Если речь идет об исходных изображениях в формате JPEG, то можно рекомендовать использовать тот же подход. В самом деле, если изображение несколько размыто при сжатии, но имеет размер, больший чем нужно, то уменьшение изображения может поправить ситуацию.

Более подробно формат JPEG будет рассмотрен в следующем уроке, посвященном форматам файлов, используемым для web-графики.

Формат PSD

Формат PSD

Так как графический пакет Adobe PhotoShop является одним из наиболее распространенных средств подготовки web-графики, его внутренний графический формат (PSD) также получил широкое распространение.

Примечание 2
Примечание 2

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

Формат PSD развивается одновременно с программой PhotoShop, что необходимо для хранения элементов, которые вводятся в новых версиях программы. При этом сохраняется полная обратная совместимость форматов. То есть файл, сохраненный, например, в PhotoShop 5.0, может быть открыт в PhotoShop 7.0 без потери каких-либо элементов изображения или его качества. Следует учитывать, что обратная совместимость форматов не поддерживается. Это значит, что некоторые элементы файла не смогут быть прочитанными в более ранних версиях программы.

Примечание 3
Примечание 3

Основа использующегося в настоящее время формата PSD была введена в Photo- Shop 3.0. Именно в этой версии введены слои, позволяющие более гибко работать с изображениями и хранить их элементы отдельно друг от друга. В предыдущих версиях формата PSD слои отсутствовали, поэтому они рассматриваются как самостоятельные форматы хранения изображений.

В настоящее время файл, сохраненный в формате PSD, может содержать различные элементы.

Слои изображений. Для каждого слоя хранится отдельный канал прозрачности (альфа-канал), позволяющий задать прозрачность каждой точки изображения. Прозрачность может изменяться от 0 до 100% (256 градаций). Один из слоев полностью непрозрачен и называется Фоном (Background). Этот слой создается по умолчанию в любом создаваемом файле (за исключением случая создания файла с прозрачным фоном). Для сохранения файлов в форматах, не позволяющих сохранять слои, все существующие слои объединяются в фоновый слой. Слои могут быть сгруппированы или объединены в набор (layer set), после чего многие операции (такие, как перемещение изображения) выполняются над всеми слоями группы или набора одновременно. Кроме того, для слоя могут быть определены стили и эффекты, определяющие вид изображения, но не изменяющие его (например, можно легко установить тень, отбрасываемую слоем, без изменения самого слоя).

Примечание 4
Примечание 4

В компьютерной графике принято называть данные о прозрачности изображения альфа-каналом (alpha-channel). Прозрачность некоторого объекта может обозначаться в программах как «альфа» («alpha»).

Дополнительные альфа-каналы. Вы можете определить и сохранить дополнительные альфа-каналы, не связанные с конкретными слоями. Эти каналы могут использоваться для сохранения сложных масок (выделений фрагментов изображений). Цветовые каналы. Изображение в формате PSD может храниться в различных цветовых моделях (RGB, Lab, CMYK, Grayscale и т. д.). Для моделей, предусматривающих наличие нескольких цветовых каналов, эти каналы сохраняются отдельно (например, для изображения в модели Lab отдельно сохраняются каналы L, а и b). Это позволяет конвертировать изображения из одной модели в другую после загрузки из файла. Кроме того, каналы могут быть выделены в отдельные файлы, что используется, например, при подготовке изображения к печати. Кроме основных каналов цветовой модели, могут сохраняться каналы дополнительных цветов (spot channels), хранящие информацию о добавочных красителях, используемых при печати изображения. Цветовые профили (профили ICC). Цветовые профили позволяют скорректировать изображение таким образом, что его цвета выводятся на используемое устройство (монитор или принтер) без искажений. Внедренные в PSD-файл цветовые профили позволяют с легкостью переносить эти файлы с компьютера на компьютер, не боясь искажений оттенков. Благодаря использованию системы цветокоррекции программа PhotoShop удобна для дизайнеров, работающих в полиграфии. Применительно к web-дизайну это не столь актуально, так как конечные файлы изображений не могут сохранять цветовые профили. Возможность использования внедренных цветовых профилей появилась в PhotoShop 5.0. Векторные объекты. Предыдущие версии PhotoShop давали возможность внедрять в файлы растрового изображения векторные объекты. Это позволяло строить сложные кривые и сохранять выделения с возможностью последующего редактирования. В версии PhotoShop 6.0 возможности применения векторной графики были существенно расширены. Появились автофигуры, при помощи которых можно легко строить такие фигуры, как прямоугольники, эллипсы, линии и многогранники. Направляющие. Направляющие линии позволяют легко выравнивать объекты, расположенные в разных слоях, точно выделять прямоугольные области изображения, проводить прямые линии. Эта возможность была впервые реализована в PhotoShop 4.0. Текстовые слои. Для удобства работы с текстом в PhotoShop 5.0 были введены текстовые слои. Такие слои сохраняют текст не только в растровой форме (обычная графика), но и в виде собственно текста, что позволяет изменять текст и параметры его отображения. Программы, используемые для просмотра файлов (например, ACDSee) отображают такие слои в виде пикселов, a PhotoShop позволяет получить доступ к таким атрибутам, как гарнитура шрифта, его размер, начертание, расстояние между символами (кернинг) и другим. Следует заметить, что в PhotoShop 6.0 были введены новые правила форматирования текста. Поэтому предыдущие версии этой программы могут отображать и редактировать текст, сохраненный в шестой версии только в виде растровой графики. Изображение для предварительного просмотра (thumbnail). Этот элемент представляет собой уменьшенную копию изображения, хранимого в файле. Многие программы считывают это изображение и отображают до открытия основного содержимого. По этим картинкам можно быстро выбрать нужный файл, особенно если его имя не связано с содержимым.

Кроме перечисленных выше элементов, файл в формате PSD может содержать текстовые комментарии и некоторые другие блоки.

Для уменьшения объема, занимаемого РSD-файлом на диске, в этом формате используется алгоритм сжатия RLE (Run-Length Encoding — кодирование серий). Этот алгоритм обеспечивает сравнительно невысокую степень сжатия, но позволяет повысить скорость обработки данных, кроме того, сжатие производится без потерь информации. PSD-файлы занимают меньше места на диске, чем, скажем, несжатые файлы в формате TIFF. Файлы PSD можно дополнительно сжать при помощи программы-архиватора. Это позволяет уменьшить объем файла еще приблизительно (в зависимости от его содержимого)в два раза,

Примечание 5
Примечание 5

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

Формат TGA

Формат TGA

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

Формат Truevision Targa (TGA) подразумевает хранение для каждого из пикселов трех цветовых составляющих: красной, зеленой и синей. Изображение может храниться в нескольких режимах: 24 бита на пиксел (три канала по восемь битов), 32 бита на канал (три канала по восемь битов и альфа-канал — восемь битов), режим градаций серого, а также режим индексированных цветов (без альфа-канала).

Кроме изображения, в файле формата TGA может сохраняться ряд дополнительных сведений:

уменьшенная копия изображения; дата и время создания файла; имя автора; авторские комментарии; время редактирования; коэффициент пропорциональности сторон изображения (полезен при работе в различных режимах монитора) и т. д.

В структуре формата предусмотрена возможность простого расширения и введения новых блоков данных.

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

В настоящее время формат TGA используется в компьютерных играх и программах обработки видеоданных. Часто видеофильмы, полученные, например, с платы видеозахвата, сохраняются на жестком диске в виде последовательности кадров, представленных в формате BMP или TGA. Программы видеомонтажа или специальные утилиты «склеивают» эти файлы в файл видеоданных (например, в формате AVI).

Формат TIFF

Формат TIFF

Формат TIFF (Tagged Image File Format — формат файлов изображений, снабженных тегами) является одним из наиболее широко распространенных форматов, используемых при подготовке графики. Этот формат является фактически стандартом для подготовки изображений в полиграфии. Файлы этого формата обычно имеют расширение TIF или TIFF.

TIFF является одним из наиболее сложных по своей внутренней структуре форматов. Файлы TIFF начинаются с заголовка файла изображения (IFH — Image File Header), имеющего длину 8 байтов. Заголовок файла содержит блок, называемый каталогом файла изображения (IFD — Image File, Directory). Этот блок позволяет графическим программам определить внутреннюю структуру файла.

Примечание 6
Примечание 6

Файл формата TIFF обычно начинается с символов «II*». Это можно использовать для простого определения формата файла, имеющего нестандартное расширение.

При помощи IFD из файла можно выделить теги — блоки данных, содержащие информацию о размерах изображения, его цветовой модели, размере палитры (числе используемых цветов), сжатии данных и т. д. Само изображение также содержится в отдельном теге. Всего определено несколько десятков таких блоков. Так как весь TIFF-файл состоит из тегов, этот формат легко поддается модернизации и расширению. В самом деле, для введения дополнительных возможностей достаточно определить новый тег. Однако в этом кроется и источник возможных ошибок — если программа не сможет определить значение тега, введенного кем-либо из производителей аналогичного программного обеспечения, файл может быть открыт неправильно или его вовсе не удастся прочитать.

В файле формата TIFF изображение может храниться в цветовых моделях CMYK, RGB, Lab в режиме индексированных цветов, а также в виде оттенков серого (grayscale). Это позволяет использовать формат для хранения самых разных изображений, применяемых как для подготовки web-графики, так и в полиграфии. Подробнее о цветовых моделях будет рассказано немного позже. Кроме цветовой модели, сохраняется и разрешение, с которым следует выводить изображение на печать. Задав высокое разрешение, можно получить качественные распечатки, если, конечно, принтер поддерживает печать с заданными параметрами.

Максимальное число битов, которыми описывается один пиксел изображения в формате TIFF, составляет 24. Это позволяет закодировать до 16 777 216 цветов.

Примечание 7
Примечание 7

В web-дизайне чаще всего используются «родная» для компьютерных мониторов модель RGB или режим индексированных цветов ( до 256 произвольных цветов или стандартная палитра). Разрешение, задаваемое в файле, чаще всего составляет 72 dpi.

Совет 1
Совет 1

Создавая изображение для сайта, не имеет смысла требовать для него высокого разрешения при печати. Большинство мониторов способно отображать графику с разрешением 72 или 96 dpi.

Кроме изображения, в TIFF-файле могут сохраняться каналы прозрачности (alpha-каналы), позволяющие сохранять прозрачные области изображения или выделения объектов между сеансами работы. Если вы работаете в PhotoShop, то вы можете сохранить в формате TIFF файл, содержащий слои, но другие программы смогут прочесть такой файл только как единое изображение. Для указания на необходимость сохранения слоев установите флажок Layers (Слои) в диалоге выбора имени сохраняемого файла (этот флажок доступен только при сохранении в расширенном варианте стандарта — Enhanced TIFF (Расширенный TIFF)).

Примечание 8
Примечание 8

Adobe PhotoShop может сохранять в формате TIFF дополнительные элементы изоб- ражения, например направляющие линии.

Еще одна особенность формата TIFF — возможность сохранения нескольких изображений, имеющих собственные наборы атрибутов и свойств (тегов) в одном файле. Это делает TIFF похожим на формат GIF, но без возможности создания анимированных изображений.

Важное свойство формата TIFF — использование сжатия данных. Такое сжатие не является обязательным и может быть включено или выключено пользователем. В большинстве случаев используется алгоритм сжатия LZW (метод Лемпела-Зива-Уолша, сжатие без потерь информации), но может применяться и сжатие с потерями (например алгоритм JPEG). Сжатие данных позволяет существенно снизить размер файла. Особенно сильно это проявляется на изображениях, содержащих большие однотонные пространства, например, на отсканированных текстах и схемах.

Однако сжатие данных можно применять далеко не всегда. Дело в том, что алгоритм LZW защищен патентом, и фирмы-разработчики вынуждены оплачивать его использование в своих программах. Поэтому далеко не все программы могут сохранять файлы со сжатием и правильно читать их. Если вы отправляете кому-либо файлы в формате TIFF, то лучше воспользуйтесь какой-либо программой-архиватором (например, WinRAR или WinZip). Это уменьшит вероятность того, что ваши файлы не смогут быть открыты получателем.

Работая в PhotoShop 7.0, вы можете сохранять файлы в формате TIFF с расширенными возможностями. Для этого в диалоге выбора имени и формата файла, отображаемого на экране при вызове команды File > Save As... (Файл > Сохранить как...) или File > Save (Файл > Сохранить) при первом сохранении файла выберите формат Enhanced TIFF (Расширенный TIFF). После этого окно запроса подтверждения на сохранение TIFF-файла примет вид, показанный на Рисунок 1.1.

Форматы исходных и промежуточных изображений

Форматы исходных и промежуточных изображений

Формат PSD Формат TIFF Формат BMP Формат TGA Формат JPEG Что нового мы узнали?

Начиная работу над новой web-страницей, вам придется прежде всего решить, какие графические элементы будут на ней использоваться и откуда эти элементы можно получить. Многие из них, например кнопки или маркеры списков, можно нарисовать самостоятельно, используя графический редактор. В некоторых случаях можно обойтись вообще без графики, воспользовавшись, например, таблицами с цветным фоном и различными начертаниями шрифтов. Но если вы хотите использовать фотографии или другую сложную графику, то вам придется потратить некоторое время на поиск файлов с подходящими изображениями, сканирование фотографий или на съемку цифровой камерой. Независимо от того, каким из этих методов вы воспользуетесь, рано или поздно вы столкнетесь с необходимостью сохранить промежуточные результаты обработки или найденные изображения. Этот урок посвящен форматам файлов, используемых на начальном и промежуточных этапах подготовки графики для web-страниц.

Прежде всего следует определиться с тем, что подразумевается в данном случае под словом «графика». Часто под этим термином подразумевают любые изображения, то есть не текст (хотя текст может быть часть графического элемента). Есть два способа представления данных об изображении — растровый (растровая или точечная графика) и векторный (векторная графика). Растровые изображения характерны тем, что каждая их точка (пиксел) описывается отдельно. Это предоставляет богатые возможности для редактирования, так как все пикселы можно обрабатывать независимо друг от друга. Однако при таком представлении затруднено изменение размеров изображения. Дело в том, что графический редактор располагает только теми данными, которые представлены в файле изображения. При уменьшении изображения объем данных должен уменьшиться и программа решает сравнительно простую задачу — «что лишнее?». Если же изображение надо увеличить, то объем данных должен увеличиться и программе приходится «выдумывать» недостающие сведения. Кроме того, сам файл изображения может иметь большой объем. У векторного изображения совершенно другие свойства. В нем, за редкими исключениями, отсутствует описание отдельных точек. Вместо этого используется описания целых линий или фигур (в векторной графике эти объекты принято называть контурами) при помощи математических формул. Это позволяет снизить общий объем данных и уменьшить размеры файлов. Кроме того, такие изображения легко увеличивать и уменьшать (масштабировать) — достаточно ввести в формулы новые данные. Но за удовольствие надо платить — выбор методов обработки для векторного изображения значительно меньше, чем для растрового. К тому же векторные изображения часто выглядят искусственными из-за своей «математической точности». Так как в web-дизайне применяется в основном растровая графика, в этой книге речь пойдет именно о ней.

Примечание 1
Примечание 1

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

Как только что было сказано, файлы растровых изображений могут иметь большой объем. В полиграфии и других областях, где нет необходимости постоянного переноса изображений с одного компьютера на другой, это не имеет большого значения. В web-дизайне все по-другому. Здесь главное — добиться высокой скорости передачи) данных, а файлы большого размера этому вовсе не способствуют. Поэтому для графического оформления сайтов используют форматы, использующие сжатие изображений, которое позволяет уменьшить объем передаваемой информации. Сжатием называют обработку данных, позволяющих представить информацию в более компактном виде. Применительно к обычным файлам чаще используется термин «архивация». Специальные программы (или модули программ) позволяют сжать данные для обеспечения высокой скорости передачи или удобства хранения, а при необходимости восстановить их первоначальный вид для использования по назначению. Это действительно важно при работе в Интернете, но не всегда удобно при подготовке графического оформления сайта. Дело в том, что изображения для web-страниц в большинстве случаев сжимаются за счет потери некоторой части информации. Это приводит к различного вида искажениям, снижающим общее качество изображения. Подробнее об этих явлениях рассказывается в следующем уроке.

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

Окно сохранения файла в формате BMP

Рисунок 1.2. Окно сохранения файла в формате BMP

Если вы работаете с изображением в режиме RGB, то BMP-файл может иметь глубину цвета 16, 24 или 32 бита. Режимы градаций серого и индексированных цветов позволят вам сохранять файлы с глубиной цвета 4 и 8 битов, а также использовать сжатие изображения. Черно-белые изображения (режим bitmap) сохраняются в формате BMP с глубиной цвета один бит. Сжатие для таких файлов не производится. В окне выбора режима сохранения файла в формате BMP (см. Рисунок 1.2) есть кнопка Advanced Modes (Расширенные режимы). Нажав ее, вы можете выбрать режим сохранения с учетом специальных параметров.

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

Окно сохранения TIFFфайла в расширенном режиме

Рисунок 1.1. Окно сохранения TIFF-файла в расширенном режиме

В зоне Compression (Сжатие) вы можете выбрать один из четырех доступных алгоритмов. Для алгоритма JPEG можно также указать качество изображения. Установив флажок Save Transparency (Сохранить прозрачность), вы укажете программе на необходимость сохранения прозрачных областей изображения. В противном случае они будут залиты белым цветом. Если вы захотите вернуться к базовому варианту TIFF, просто выберите для файла формат Basic TIFF (Базовый TIFF).

ВНИМАНИЕ. Файлы в формате TIFF, сжатые при помощи алгоритмов JPEG и ZIP, не могут быть прочитаны большинством старых программ. Если вы не уверены в том, что получатель ваших файлов сможет с ними работать, избегайте использования этих методов.

Формат TIFF широко распространен не только на платформе IBM PC, но и на Apple Macintosh (собственно, Macintosh — «родина» формата TIFF). Многие графические редакторы (разумеется, и Adobe PhotoShop) поддерживают сохранение и чтение файлов в режимах IBM PC и Apple. Эти режимы различаются порядком записи файлов.

Примечание 9
Примечание 9

Процессоры Motorola, на основе которых строятся компьютеры Apple, читают байты двухбайтных чисел слева направо (вначале старший байт, а потом — младший).

Процессоры Intel (и другие совместимые с ними) записывают и читают первым младший байт, а потом — старший.

То, что TIFF «прижился» и на IBM PC, и на Apple, позволяет использовать его для передачи изображений с одной аппаратной платформы на другую без потери их свойств, атрибутов и, разумеется, содержания. Также этот формат можно использовать для передачи данных между различными приложениями, «не по нимающими» форматы друг друга, но «знающими» TIFF. При такой передаче будут сохранены многие атрибуты изображения, теряющиеся, например, при передаче данных через буфер обмена Windows.

Для сохранения цветов изображения при передаче с одного компьютера на другой (из-за различий в составе аппаратного обеспечения и его настроек цвета могут отображаться иначе) в состав файла может быть включен цветовой профиль ICC.

Совет 2
Совет 2

Если вы сохранили файл в формате TIFF в одной программе и не можете открыть его в другой, то, возможно, дело в несовместимости наборов тегов, используемых в этих приложениях. При отсутствии другого пути обмена данными попробуйте открыть такой файл в какой-либо другой программе (например, в программе просмотра ACDSee) и сохранить его в TIFF или в другом формате.

В заключение следует добавить, что формат TIFF может применяться для сохранения промежуточных результатов работы, не требующих внедрения специфической информации (векторных объектов, направляющих линий, слоев и других объектов). Распространенность этого формата позволяет легко переносить изображения между программами и аппаратными платформами. Использование цветокоррекции (профилей ICC) дает возможность сохранить цвета без изменения (насколько это возможно) при просмотре на разных мониторах и при выводе на печать.

Формат GIF

Формат GIF

Формат GIF был разработан компанией CompuServ специально для передачи цветных изображений по компьютерным сетям. Разработчики стремились создать формат, который позволял бы передать изображение на компьютер пользователя за кратчайшее время. Сейчас наиболее широко используются спецификации этого формата GIF87 и GIF89a (цифры обозначают, год выпуска стандарта).

Примечание 1
Примечание 1

GIF — Graphic Interchange Format — Формат обмена графическими данными.

Сохраняя файл в формате GIF, вы можете воспользоваться следующими возможностями:

сжатие данных без потерь (алгоритм сжатия LZW); максимальное число отображаемых цветов — 256; поддержка прозрачности; возможность включения нескольких изображений (анимация); чересстрочный вывод изображений на экран (в GIF89a); включение текстовых блоков (комментариев).

Теперь рассмотрим возможности этого формата подробнее.

Прежде всего следует сказать несколько слов о сжатии изображения. GIF был и остается одним из немногих широко распространенных форматов, поддерживающих передачу сжатых данных. Следует заметить, что скорость передачи данных определяется в первую очередь их размером. То есть для увеличения скорости передачи надо уменьшить размер передаваемых файлов. Уменьшить размер отдельных файлов (а значит, и общий объем передаваемой информации) можно двумя путями:

уменьшить общий объем информации. Этот метод может легко применить каждый пользователь Интернета — достаточно отключить в браузере загрузку графики. Вы заметите резкое увеличение скорости загрузки страниц, но «обстановка» на экране вашего компьютера станет более чем спартанской. Кроме того, в некоторых случаях именно графика является целью посещения сайта. Яркими примерами таких сайтов могут служить виртуальные картинные галереи; использовать сжатие данных. Естественно, если уж на свет появились алгоритмы архивации (сжатия), то рано или поздно на них должны были обратить внимание разработчики программного обеспечения для компьютерных сетей. Разумное применение сжатия данных позволяет существенно уменьшить объем передаваемых по каналу связи данных при сохранении всех передаваемых файлов.

Формат JPEG

Формат JPEG

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

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

Наиболее распространенным в настоящее время форматом, предназначенным для хранения полноцветных фотоизображений, является формат JPEG. Работы над его созданием были начаты в 1982 году, когда в рамках Международной Организации по Стандартизации (International Standardization Organization — ISO) была создана Группа экспертов по машинной обработке изображений (Photographic Experts Group — PEG). Эта организация занималась вопросами передачи видеоданных, изображений и текста по каналам цифровой связи. Целью исследований была разработка международных стандартов в области передачи данных этих типов в компьютерных сетях. В 1986 году Международный Консультационный Комитет по Телеграфии и Телефонии (Consultative Committee for International Telephone and Telegraphy — CCITT) начал разработки, направленные на создание алгоритмов передачи факсимильной информации (цветных и монохромных изображений). Алгоритмы, созданные специалистами этих организаций, оказались схожими между собой и в 1987 году организации объединили свои усилия по разработке единого стандарта сжатия изображений.

Результатом этого сотрудничества стал формат JPEG (Joint Photography Experts Group — Объединенная группа экспертов по машинной обработке изображений), позволяющий реализовать сжатие полноцветных или монохромных изоораже-ний до размеров, удобных для передачи по каналам связи. В отличие от формата GIF, JPEG позволяет хранить изображения, содержащие до 16 млн оттенков.

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

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

Основы алгоритма JPEG — преобразование информации о цвете, хранимой отдельно для всех цветовых составляющих одного пиксела, в область частот с последующей фильтрацией. Проще говоря, для хранения данных о цвете используются не цветовые составляющие каждого пиксела, а сведения о том, как изменяется вклад той или иной составляющей в результирующий цвет. Такие методы обработки основываются на принципах частотного анализа, широко применяемого в радиоэлектронике. В данном случае изменение яркости или цветовых составля-юцих от пиксела к пикселу описывается в виде набора колебаний (по аналогии с радиоэлектроникой эти колебания можно назвать составляющими сигналами) различной частоты и амплитуды. Такую операцию также называют определением спектра сигнала.

Примечание 7
Примечание 7

Преобразование сигналов в набор частотных составляющий осуществляется при помощи так называемого прямого преобразования Фурье. Обратное преобразование Фурье позволяет синтезировать сигнал по его спектру.

Простейший случай такого преобразования изображен на Рисунок 2.6. Линии графика обозначает изменение значения одного из компонентов пиксела (например, яркости). Синусоида представляет собой первую гармонику (частотную составляющую) этого «сигнала», с частотой, равной частоте повторения «импульсов» яркости. Вторая гармоника будет иметь частоту, в два раза превышающую частоту первой, третья — в три раза и т. д. Каждая из таких частотных составляющих описывается частотой, амплитудой и начальной фазой.

Формат PNG

Формат PNG

Формат PNG самый «младший» среди популярных форматов web-графики; Поэтому он пока не достаточно широко распространен. Однако его возможности позволяют предположить, что в будущем производители программного обеспечения и разработчики web-страниц уделят ему больше внимания.

Аббревиатура PNG расшифровывается как Portable Network Graphics — переносимая сетевая графика.

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

хранение цветных изображений с глубиной цвета до 48 битов (в GIF — до 8 битов); хранение монохромных изображений (до 16 битов на пиксел); поддержка переменной прозрачности — до 256 градаций (в формате GIF каждый пиксел или прозрачен, или нет); сжатие изображения без потерь; использование фильтрации для оптимизации сжатия (в GIF отсутствует); возможность чересстрочного вывода изображений на экран; встроенные средства обнаружения ошибок передачи данных (в GIF отсутствует); средства цветокоррекции (в GIF отсутствуют); сохранение уменьшенной копии изображения.

В отличие от GIF, формат PNG является свободно распространяемым для использования. Это значит, что его поддержку в программном обеспечении можно вводить без оплаты каких-либо лицензий. Для сжатия изображения в формате PNG используется алгоритм LZ78 — предшественник LZW, используемого в формате GIF. К недостаткам PNG по сравнению с GIF можно отнести невозможность сохранения в одном файле нескольких изображений и создания анимации.

Файл, сохраненный в формате PNG, имеет блочную структуру, это делает его похожим на формат TIFF. Любая программа, поддерживающая стандартный формат PNG, должна работать с четырьмя типами блоков:

блок заголовка содержит основные параметры изображения. Файл не может иметь больше одного заголовка; блок палитры определяет палитру цветов, используемых в изображении. Этот блок используется только если палитра необходима (изображение сохранено в режиме индексированных цветов); блок изображения содержит данные об изображении; блок конца изображения замыкает файл PNG.

Кроме этих блоков файл может содержать дополнительные данные, такие как информация об авторе, текстовые комментарии (в том числе сжатые), информация о контрасте и гамма-коррекции, информация о прозрачности (альфа-канал) и т. д. При введении новых возможностей можно легко добавить в файл новый блок. При этом старые программы просто «не обратят на него внимания». Это предоставляет возможность легкого расширения формата.

Само изображение может сохраняться в различных режимах. Например, Adobe PhotoShop поддерживает режимы RGB (16 млн цветов), оттенки серого (256 градаций) и индексированные цвета (256 цветов). Прозрачность изображения сохраняется в виде альфа-канала, позволяющего отобразить до 256 градаций прозрачности. Это позволяет реализовать плавный переход от изображения к фону и избежать появления «ореола» на границе прозрачности. На Рисунок 2.9 приведен пример такого наложения. Слева приведена исходная картинка, в центре — фон, справа — результат.

Форматы webграфики

Форматы web-графики

Формат GIF Формат JPEG Формат PNG Что нового мы узнали?

В этом разделе книги мы подробно рассмотрим три формата изображений, используемых в настоящее время для сохранения графического оформления web-страниц и для его доставки на компьютер пользователя. Это форматы GIF, JPEG и PNG.

Хотя каждый из этих форматов имеет свои уникальные особенности, у них есть одна общая черта — все они обеспечивают сжатие данных, описывающих изображение. Это позволяет уменьшить объем файлов, а, следовательно, и время загрузки web-страницы на компьютер пользователя. Так как различные алгоритмы сжатия, применяемые в форматах web-графики, оптимальны для сохранения изображений разных типов, можно значительно уменьшить общий объем изображения, комбинируя форматы при сохранении его частей.

ПРИМЕЧАНИЕ. На самом деле для оформления web-страниц можно использовать графику в любом формате, но при этом возникнет проблема совместимости страницы с различными браузерами. Например, браузер Internet Explorer после установки программы QuickTime получает возможность отображать файлы в формате TIFF. Однако в стандартной поставке IE модуля для просмотра файлов зтого формата нет.

Начнем рассмотрение форматов web-графики с самого старого и самого «заслуженного» формата — GIF.

Изображение до сохранения в формате JPEG

Рисунок 2.7. Изображение до сохранения в формате JPEG

На Рисунок 2.8 приведены увеличенные фрагменты этой же картинки после сжатия в различных режимах. Все изображения сохранялись при помощи Adobe PhotoShop. Для них приведено значение показателя качества, используемого в этой программе.

Изображение с прозрачным фоном

Рисунок 2.4. Изображение с прозрачным фоном может быть наложено на текстуру без появления однотонной рамки

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

Использование прозрачности позволяет создавать оригинальные элементы web-страниц, но применять ее надо с осторожностью. Дело в том, что прозрачность в формате GIF не может быть частичной — пиксел или прозрачный, или нет. Это может привести к тому, что из-за плохого подбора цветов вокруг прозрачной части изображения возникнет своеобразный ореол из пикселов, цвет которых уже не относится к информативной части изображения, но еще не перешел в цвет фона.

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

Примечание 5
Примечание 5

Рассматриваемый ниже формат PNG предоставляет возможность сохранения изображений с частичной прозрачностью пикселов. Однако современные браузеры не реализуют правильное отображение таких файлов.

Еще одна особенность файлов GIF, долгое время делавшая этот формат популярным — возможность создания анимированных изображений. До появления таких программных средств, как Macromedia Flash, позволяющих создавать занимающие мало места на диске анимированные изображения, других средств для создания небольших анимированных изображений в распоряжении web-дизайнеров не было.

В отличие от Flash, в GIF-файлах анимация сохраняется не в форме векторных объектов, а в виде отдельных растровых кадров. Каждый кадр представляет собой самостоятельное изображение с возможностью создания собственной таблицы цветов. Наличие таких индивидуальных таблиц позволяет увеличить цветовой охват и улучшить качество изображения в целом. Кадры могут быть прозрачными и накладываться друг на друга в различных режимах (замещая предыдущее изображение, накладываясь поверх него и т. д.). Некоторые программы для редактирования анимации (например, Ulead Gif Animator) используют прозрачность кадров для уменьшения размеров файла. Они анализируют изображение и заменяют повторяющиеся на нескольких кадрах пикселы на прозрачные. В некоторых случаях больше половины кадра оказывается залито одним цветом, что значительно повышает степень сжатия.

В настоящее время GIF-анимация постепенно уступает место технологии Flash, но GIF-файлы все еще широко используются. Основная сфера их применения — создание рекламных баннеров (небольших изображений, демонстрируемых на web-страницах в качестве ссылок на рекламируемые сайты).

Редактирование анимированных GIF-файлов рассматривается в главе, посвященной программе Adobe ImageReady, поставляемой совместно с Adobe PhotoShop и предназначенной для редактирования, оптимизации и сохранения web-графики.

Как было сказано выше, изображение в GIF-файле может быть сохранено с указанием на нормальный или чересстрочный вывод на экран. При нормальном порядке вывода изображение сохраняется в файл последовательно: описания строк следуют в порядке возрастания номеров (1, 2, 3,...). Такое изображение выводится на экран постепенно, по мере загрузки с сервера. Место под него может быть отведено заранее (путем указания размеров средствами HTML), но пикселы будут отображены только после их загрузки. Если же изображение сохранено в чересстрочном режиме, то порядок строк меняется. Вначале сохраняется каждая восьмая строка, затем — каждая четвертая, после этого — каждая вторая и шестая строки, и наконец — все нечетные строки.

Примечание 6
Примечание 6

В англоязычных источниках сохранение с чередованием строк обозначают термином Interlaced.

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

На Рисунок 2.5 видно, как отображаются во время загрузки обычное и чересстроч-ное изображения.

Над оформлением первых webстраниц никто голову не ломал

Рисунок 2.1. Над оформлением первых web-страниц никто голову не ломал

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

Основными графическими элементами таких страниц были чертежи, схемы и простые кнопки навигации.

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

Разработчики формата GIF использовали алгоритм LZW, позволяющий достичь степени сжатия, близкой к максимальной.

Примечание 2
Примечание 2

Алгоритм сжатия данных LZW (алгоритм Лемпела-Зива-Уолша) основывается на при- своении группам символов (битов) номеров. Когда символ встречается в первый раз, он добавляется в таблицу кодов и в дальнейшем заменяется соответствующим номером. Если символ встречается вторично, то он заносится в таблицу кодов вместе с символом, следующим за ним. Такая комбинация в дальнейшем рассматривается как самостоятельный символ. Подобная операция выполняется для всех встречающихся комбинаций битов. Если файл содержит много повторяющихся символов, то за счет замены символа на его номер можно получить значительную экономию места. Применительно к графике такой алгоритм особенно эффективен при кодировании изображений, содержащих небольшое количество различных цветов и протяженные однотонные области. В самом деле, если изображение содержит несколько строк пикселов, залитых одним цветом, то в конце концов целая строка будет кодироваться одним символом.

Сжатие в формате GIF включено постоянно, и каждый файл сжимается так сильно, как это только возможно. Пользователь не имеет возможности выбрать степень сжатия или алгоритм.

Как уже было сказано, максимальное число цветов, которые может содержать изображение, сохраняемое в формате GIF, составляет 256. Это значит, что если изображение на самом деле содержит большее число цветов, то часть из них будет потеряна.

Казалось бы, сохранение полноцветных изображений в этом формате — бесперспективное занятие, однако, хотя число цветов ограничено, сами цвета могут быть любыми. Они задаются тремя цветовыми составляющими, на каждую из которых отводится по одному байту. Это позволяет определить 16 777 216 цветов.

На практике графические редакторы составляют для изображения таблицу наиболее часто встречающихся цветов и заменяют не вошедшие в палитру цвета (обычно это цвета, используемые меньше остальных) на близкие к ним цвета из палитры. Возможны варианты, при которых для имитации нужного цвета используются комбинации точек цветов, входящих в палитру. Использование этого приема возможно потому, что человеческий глаз с большого расстояния воспринимает близко расположенные точки как единое целое. При этом их цвета сливаются и создают иллюзию первоначального цвета. Подбор точек нужного цвета может быть произведен несколькими методами, обеспечивающими разную степень близости изображения к оригиналу. Таким образом, результат сохранения многоцветных изображений в режиме индексированных цветов (а формат GIF как раз и использует этот режим) во многом зависит от возможностей графического редактора. Сохранение файлов в формате GIF при помощи Adobe PhotoShop подробно описано в следующей главе.

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

Примечание 3
Примечание 3

Безопасная палитра представляет собой стандартизированный набор из 216 цветов, одинаково отображаемых ведущими браузерами Internet Explorer и Netscape Navigator в операционных системах Windows и Mac OS. Использование цветов из этой палитры гарантирует, что ваше изображение будет выглядеть на экране пользователя так, как его видите вы (с учетом свойств монитора, разумеется). Безопасная палитра была актуальна во времена широкого использования на мониторах режима с отображением 256 цветов. В настоящее время большинство компьютеров оснащаются видеоадаптерами и мониторами, работающими в более совершенных режимах (65 тысяч или 16 млн цветов), так что над использованием безопасной палитры задумываются все меньше и меньше.

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

Использование ограниченной цветовой палитры создает хорошие условия для сжатия изображения. В самом деле, цвет каждого пиксела не надо задавать полностью (достаточно номера цвета из палитры). Это позволяет значительно уменьшить объем описания самого изображения. При этом палитра вовсе не обязательно должна содержать все 256 цветов. Если изображение использует меньшее число цветов, появляется возможность сэкономить несколько десятков байтов.

Примечание 4
Примечание 4

Сама палитра цветов описывается очень просто — подряд записываются значения красного, зеленого и синего компонентов для первого цвета, затем — для второго и т. д.

Для того чтобы наглядно продемонстрировать процесс сжатия данных в формате GIF и создания цветовой палитры, приведем простой пример. На Рисунок 2.2 приведены (в уменьшенном виде) три изображения до сохранения в формате GIF и после него. Исходный размер всех изображений — 300x300 пикселов, объем файлов до сжатия — около 277 Кбайт (формат — TIFF без сжатия, режим — RGB). Для большей наглядности фрагменты исходного и сжатого изображений приведены в увеличенном виде.

Наложение на фон изображения с

Рисунок 2.10. Наложение на фон изображения с двумя значениями прозрачности (или она есть, или ее нет)

Примечание 12
Примечание 12

В браузерах отображение плавно изменяющейся прозрачности пока не реализовано.

При сохранении картинок в формате PNG можно использовать чересстрочные изображения и различные фильтры, позволяющие оптимизировать сжатие. Чересстрочное изображение выводится не построчно (как при чтении формата GIF), а прямоугольными блоками (вначале блоками 8x8, потом — 4x8, 4x4, 2x4, 2x2, 1x2). Такой алгоритм носит в честь своего изобретателя название Adam? К сожалению, далеко не все браузеры корректно обрабатывают возможности этого формата. На Рисунок 2.11 показано, как файлы в формате PNG отображаются браузером Internet Explorer.

Фильтры позволяют подготовить данные (оптимизировать их) и тем самым повысить степень сжатия. Фильтрация применяется к байтам цветовых составляющих пикселов построчно. К каждой строке можно применить свой алгоритм или вообще не применять его. Существует несколько разновидностей фильтров:

Отображение страницы с рисунками

Рисунок 2.11. Отображение страницы с рисунками в формате PNG в процессе загрузки


Sub определяет разность между значением байта для текущего пиксела и аналогичным значением для предыдущего пиксела; Up определяет разность между значением байта для текущего пиксела и аналогичным значением для предыдущего пиксела; Average — значение для текущего пиксела прогнозируется на основе среднего значения, полученного для пикселов, расположенных слева и сверху от текущего; Paeth — значение прогнозируется на основе значения линейной функции, полученной из значений левого, верхнего и левого верхнего пикселов. В некоторых случаях фильтрация позволяет уменьшить размеры файла, однако для каждого изображения метод фильтрации следует подбирать индивидуально.

Кроме различных алгоритмов фильтрации, к изображению могут быть применены встроенные средства цветокоррекции. Для PNG это указатель гамма-коррекции (позволяет скорректировать цвета в соответствии с яркостью монитора), информация о контрасте, а также сведения об основных цветах и «белой точке». Основные цвета и белая точка задаются координатами в стандартном цветовом пространстве. Все эти параметры позволяют улучшить качество изображения, воспроизводимого на компьютере пользователя.

Мы рассмотрели характеристики формата PNG. Для того чтобы составить полное представление о его сфере применения, проведем тестирование. На Рисунок 2.12 приведены три тестовые картинки. Рисунок 2.13, а представляет собой пример рисунка, состоящего из четких линий (схемы или чертежа). Рисунок 2.13, б — фотография, содержащая большой участок с плавным изменением цвета (небо). Рисунок 2.13, в — фотография с большим числом мелких деталей. Размеры исходных файлов в формате TIFF: от 127 до 129 Кбайт.

Результат наложения изображения

Рисунок 2.9. Результат наложения изображения с плавным изменением прозрачности на фон

На Рисунок 2.10 изображен результат наложения на тот же фон изображения, сохраненного в формате GIF.

Размеры файлов полученных

Таблица 2.1. Размеры файлов, полученных после сохранения тестовых изображений в различных форматах, Кбайт

Формат	Схема или чертеж	Фотография с плавными цветовыми переходами	Фотография с большим числом мелких деталей
GIF (нормальный)	3,2	21,7	44,5
GlF (чересстрочный)	3,23	24,9	46
PNG (256 цветов, нормальный)	3,27	23,7	40,6
PNG (16 млн цветов, нормальный)	4,68	67,8	112
PNG (16 млн цветов, чересстрочный)	7,06	75,6	115
JPEG	4,69	5,03	12,4

Эта таблица позволяет судить об оптимальной сфере применения каждого из форматов. Как видно, форматы GIF и PNG дают явный выигрыш при сохранении рисунков с небольшим числом цветов и большими однотонными областями (схем, диаграмм). Причем GIF обеспечивает несколько лучшее сжатие. Так как используемые в этих форматах алгоритмы сжатия не вносят помех в изображение, можно не опасаться, что мелкие детали схемы будут потеряны или искажены. Чересстрочные изображения, хотя и являются более наглядными для пользователя, занимают больше места, чем не чересстрочные. Для сохранения полноцветных изображений наилучшим образом подходит формат JPEG. Хотя он вносит в рисунок некоторые искажения, подбирая степень сжатия можно свести их к приемлемому уровню. Файлы этого формата имеют в данном случае наименьший размер для всех изображений, кроме схемы. При сохранении подобных рисунков GIF и PNG показали лучшие результаты.

Также сравним эффективность использования различных фильтров, используемых в формате PNG.

Фильтры испытывались на примерах схемы (Рисунок 2.13, а) и фотографии с мелкими деталями (Рисунок 2.13, в). Для схемы применение фильтров не дало выигрыша в размере файла и даже наоборот — вызвало его увеличение на 0,5-1 Кбайт. В то же время, для фотографии «профильтрованные» файлы получились меньшими, чем «нефильтрованные». Для изображений с 16 млн цветов выигрыш составил около 10%. При этом изображения с 256 цветами на применение фильтра практически не реагировали.

Заканчивая разговор о формате PNG, можно сказать, что хотя в него заложены большие возможности, большинство из них в настоящий момент не реализованы в браузерах. Это препятствует росту его популярности. После введения его полной поддержки этот формат может занять достойное место в числе «инструментов» web-дизайнера.

Тестовые изображения для сравнения

Рисунок 2.12. Тестовые изображения для сравнения возможностей форматов GIF, JPEG и PNG

Для сравнения возможностей различных форматов сохраним все эти изображения в файлах GIF, PNG и JPEG. В данном случае использовались форматы GIF и PNG в нормальном и чересстрочном режиме, а в формате JPEG картинки сохранялись с показателем качества (по шкале Adobe PhotoShop), равным 7. При этом на всех изображениях наблюдались небольшие шумы (особенно на границах объектов). Сравним размеры полученных файлов.

Увеличенные фрагменты изображения

Рисунок 2.8. Увеличенные фрагменты изображения (см. Рисунок 2.7) после сохранения в формате JPE(S с различными значениями показателя качества (а — 0,б — 2,8 — 4, г —6,д — 8,е — 10, ж — 12, з — оригинал)

Размеры файлов после сохранения в JPEG (см. Рисунок 2.8): а — 11 Кбайт, б — 15 Кбайт, в — 24 Кбайт, г — 34 Кбайт, д — 40 Кбайт, е — 65 Кбайт, ж — 117 Кбайт.

Из Рисунок 2.8 видно, что при степени сжатия, близкой к максимальной, на изоб-ражении возникают шумы и искажения. В частности, на Рисунок 2.8, а четко видны границы блоков, на которые изображение было разбито при обработке. На Рисунок 2.8, б можно заметить другой вид искажений, свойственных JPEG — размытие кон трастных границ и линий. Эти искажения возникают вследствие того, что из-за недостатка информации изображение, считанное из файла, не может быть т воспроизведено с достаточной точностью.

Примечание 10
Примечание 10

Искажения, вносимые в картинку кодировщиком JPEG, часто называют артефактами JPEG.

Результаты этого небольшого эксперимента позволяют сделать вывод о том, что формат JPEG хорошо подходит для хранения фотографий и других изображе ний, содержащих много различных оттенков с плавными переходами между ними. А вот изображения, содержащие четкие линии (например, чертежи), в нем со хранять не следует — линии могут смазаться (см. Рисунок 2.8, б). Также не следует сохранять в этом формате изображения, содержащие большие однотонные плоскости — на них может возникнуть шум.

Тестирование показало нам, что при помощи JPEG можно достичь значительной степени сжатия. Например, для изображения, показанного на Рисунок 2.8 а, она составила 69,09. Однако качество изображения при таких режимах сохранения может стать неприемлемым. Разумно выбирая режим, можно добиться высокого качества изображения и при этом значительно уменьшить их размер на диске. Так, для картинки, которую вы можете видеть на Рисунок 2.8, д, степень сжатия равна 19, а качество вполне подходит для оформления web-страниц или виртуальной галереи. Файл, фрагмент содержимого которого показан на Рисунок 2.8, з, занимает в 6,5 раза меньше места, чем оригинал, а изображение не уступает оригиналу по качеству.

Итак, мы рассмотрели принципы работы и основные свойства алгоритма JPEG. Но это только основной (базовый) вариант стандарта. У этого формата есть несколько дополнений, каждое из которых существенно расширяет его возможности.

Примечание 11
Примечание 11

В англоязычной литературе базовый вариант JPEG часто называется «baseline» (ба зовый) или «standard» (стандартный). Некоторые производители могут не поддерживать расширения формата.

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

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

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

Увеличенный фрагмент изображения

Рисунок 2.3. Увеличенный фрагмент изображения неба до (слева) и после сжатия (справа). При переходе в режим индексированных цветов плавные переходы оттенков практически исчезают

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

Важной особенностью формата GIF, делающей его практически незаменимым на данный момент, является поддержка прозрачности. Изображение, сохраненное в формате GIF, может содержать прозрачные области, сквозь которые «просвечивает» фон, расположенный под изображением. Это позволяет создавать различные эффекты. Например, можно наложить сложное по форме изображение на рисованный фон (текстуру) так, что вокруг него не останется однотонных областей. Пример такого наложения приведен на Рисунок 2.4.

В формате GIF сохранены простая

Рисунок 2.2. В формате GIF сохранены простая фигура (а), фигура со сглаженными границами (б) и сложное полноцветное изображение (в)

Первое изображение (Рисунок 2.2, а) представляет собой простую геометрическую фигуру. Изображение содержит всего два цвета: черный и белый. Границы фигуры при этом получаются очень четкими, что в некоторых случаях смотрится не совсем красиво. Однако именно такие изображения очень хорошо подходят для сжатия и сохранения в формате GIF. Размер GIF-файла — 1,5 Кбайт. Второе изображение (Рисунок 2.2, б) также представляет собой геометрическую фигуру, однако ее границы плавно переходят к фону и к внутренней заливке. Вообще говоря, изображения с большим числом плавных переходов плохо подходят для сохранения в формате GIF. Но в данном случае переходы (градиенты) занимают небольшую часть изображения, а в изображении преобладает однотонная заливка. Поэтому данное изображение также неплохо сжалось. Размер GIF-файла — около 6 Кбайт. Число цветов в палитре — 256 при точном соответствии цветов оригинала и результата (всем цветам исходного изображения нашлось место в палитре сжатого файла). Обратите внимание на то, как сказалось на размере палитры и всего файла наличие сравнительно небольшого участка с плавным переходом цвета.

Третье изображение (Рисунок 2.2, в) — яркий представитель изображений, которые не следует сохранять в формате GIF. Это изображение (фотография) содержит множество различных цветов, плавно перетекающих друг в друга. Кроме того, перетекание цветов происходит на больших площадях, что значительно увеличивает число промежуточных оттенков. Такие изображения плохо сжимаются из-за небольшого числа повторяющихся элементов (пикселов). Сравните его с картинкой, приведенной на Рисунок 2.2, а — там содержатся целые строки одноцветных пикселов. Еще одна проблема — 256 цветов палитры не хватает для точной передачи всех цветов и программе сжатия приходится заменять недостающие цвета цветами, вошедшими в палитру. В данном случае была использована «безопасная палитра web», использование которой гарантирует точное воспроизведение цвета на компьютерах Apple и IBM PC, но число цветов при этом ограничено 216, а их набор фиксирован. Размер файла при этом составляет около 20 Кбайт. Если использовать вместо такой палитры набор цветов, образованный с учетом особенностей изображения, то качество картинки можно повысить, однако возрастет и размер файла. Для небольшого изображения размер палитры может превзойти при записи на диск размер самого изображения.

Выделение низкочастотной составляющей

Рисунок 2.6. Выделение низкочастотной составляющей из зависимости изменения яркости пикселов от координаты X

При использовании подобного частотного разложения теоретически можно вначале выделить из сигнала бесконечное число составляющих (гармоник), а потом просуммировать их и получить исходный сигнал. Однако реализовать это на практике сложно. Дело в том, что работать с бесконечными рядами невозможно, а обработка ряда с большим количеством элементов займет много машинных ресурсов. Поэтому приходится обходиться некоторым числом составляющих, которое зависит от требуемой точности воспроизведешь сигнала.

Примечание 8
Примечание 8

В радиоэлектронике разложение сигнала на частотные составляющие и последующий синтез сигнала по ним часто используются при моделировании радиосистем. Это позволяет получить представление о работе устройства при помощи математического моделирования. Расчеты, требуемые для моделирования даже простой системы, довольно сложны и трудоемки, поэтому обычно они выполняются на компьютере.

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

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

Примечание 9
Примечание 9

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

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

Для лучшего понимания основ работы алгоритма JPEG следует рассмотреть особенности восприятия человеком окружающей его реальности. Человеческий глаз более чувствителен к яркости, чем к цветовым составляющим изображения. Если вы переведете картинку в монохромный режим (яркий пример — черно-белый телевизор), то изображенные предметы останутся узнаваемыми — вы сможете сказать, что изображено, и даже определить некоторые свойства объекта, например, материал, из которого он состоит. Изображение же, содержащее цвета, но лишенное яркостной составляющей, практически перестает быть узнаваемым.

Вы можете легко убедиться в этом при помощи PhotoShop. Просто закрасьте какую-либо картинку любым цветом (но не черным и не белым) при помощи инструмента Paintbrush (Кисть) в режиме Luminosity (Яркость). При этом все пикселы приобретут яркость цвета кисти.

Итак, перед нами два основных компонента алгоритма сжатия изображений JPEG. С одной стороны, разложив некоторый сигнал (в данном случае это — информация об изображении) на частотные составляющие и отбросив самые незначительные из них, мы можем достичь сжатия данных. С другой стороны, человеческий Глаз устроен так, что он воспринимает в первую очередь яркость изображения и уже потом — его цветовые характеристики. Это предоставляет два способа уменьшения объема файла изображения, которые и используются в алгоритме JPEG.

объем хранимых и передаваемых данных может быть уменьшен путем разложения информации о цвете на частотные составляющие с последующим отбрасыванием самых незначительных из них — «лишних»; так как глаз человека более чувствителен к яркости изображения (в данном случае оно состоит из пикселов), чем к его цвету, то следует стремиться передать без искажений информацию о яркости пикселов, а информацией об их цвете можно до определенной степени пренебречь.

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

При сохранении изображения в формате JPEG над ним производятся перечисленные ниже операции:

Изображение преобразуется из исходной цветовой модели (например, RGB, в которой каждая точка описывается тремя цветовыми составляющими) к модели, содержащей яркостный компонент и два компонента, определяющие цвет точки. Это необходимо для раздельной обработки яркостной и цветовой составляющих изображения. Если изображение уже находится в подходящем цветовом режиме, преобразования не требуется. В дальнейшем все компоненты обрабатываются независимо друг от друга. Цветовые компоненты усредняются между соседними пикселами, что позволяет снизить объем данных, требуемых для их передачи. Обычно усреднение производится так, что «поле» цветовых компонентов уменьшается в два раза по вертикали и по горизонтали. Например, для изображения 400x400 пикселов будут получены «поля» цветовых компонентов размером 200x200. Возможны и другие сочетания коэффициентов пропорциональности сторон, например 2:1, но они дают меньшую степень сжатия. Яркостный компонент на этом этапе не изменяется. Благодаря этому яркость изображения подвергается меньшим искажениям. Применение дискретного преобразования Фурье. Изображение (точнее, каждый из его компонентов) разбивается на блоки 8x8 пикселов, к которым применяется дискретное преобразование Фурье. При этом информация о значении того или иного компонента представляется в виде соответствующих колебаний. По аналогии с радиотехническими сигналами можно выделить в преобразованных компонентах некоторое среднее значение (некоторый аналог постоянного тока), а также переменную составляющую (аналог переменного тока). Высокочастотные (быстрые) изменения параметров менее заметны, чем изменения низкочастотные (плавные). Поэтому верхние частоты могут быть отброшены. Квантование значений параметров. Для отбрасывания ненужных компонентов значения, полученные в ходе преобразования Фурье, делятся на весовые коэффициенты и округляются. Для каждой точки внутри блока преобразования (8x8 пикселов) используется свой коэффициент, который выбирается из специальной таблицы. Для яркости и цветовых составляющих требуются отдельные таблицы. Составлять такие таблицы достаточно сложно, поэтому большинство кодировщиков JPEG используют стандартную таблицу ISO.

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

Для раскодирования данных необходимо выполнить эти операции в обратном порядке.

Данные разархивируются в соответствии с методом Хаффмана. В результате получаются отсчеты параметров изображения. Из файла считывается таблица весовых коэффициентов. С ее помощью восстанавливаются результаты преобразования Фурье, выполненного при сжатии. В зависимости от степени сжатия, заданной кодировщиком, эти данные в той или иной степени соответствуют исходным. Над отсчетами частотных составляющих производится обратное преобразование Фурье. Это позволяет восстановить значения компонентов изображения. Полученные значения цветовых компонентов «распределяются» между соседними пикселами. Это необходимо из-за того, что при сжатии «поле» цветовых компонентов было уменьшено. Яркостный компонент сразу готов для последующей обработки. Для удобства вывода на экран или выполнения обработки изображение преобразуется в одну из цветовых моделей (например, в RGB для вывода на экран, или в CMYK для печати).

После того, как мы рассмотрели принцип работы алгоритма JPEG, можно подробнее остановиться на сферах его применения.

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

Досмотрим, как сказывается сжатие на качестве изображения. Для этого сохраним фотографию в формате JPEG. На рисунке 2.7 приведено исходное изображение. Размер исходного TIFF-файла — 760 Кбайт.

Загрузка нормального и чересстрочного изображений

Рисунок 2.5. Загрузка нормального и чересстрочного изображений

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

Совет 1
Совет 1

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

Формат GIF является одним из двух основных форматов web-графики, но его использование связано с определенными трудностями. Дело в том, что в этом формате, как уже было сказано, используется алгоритм сжатия LZW. Алгоритм защищен патентом, и правообладатель в некоторый момент принял решение о распространении алгоритма на условиях лицензирования. Это значит, что хотя алгоритм известен всем, компании-разработчики должны вносить плату за его использование в своих программах. Поэтому и компания CompuServ, разработавшая формат GIF, требует приобретения лицензии на использование своего детища в программном обеспечении. В первую очередь это касается разработчиков графических редакторов и браузеров, так как вне Интернета GIF используется довольно редко.

Из-за подобных проблем многие компании вынуждены отказываться от использования формата GIF или пытаться обойти накладываемые ограничения. Для решения этой проблемы был разработан формат PNG, обладающий теми же свойствами, что и GIF (а порой и превосходящий его), но полностью открытый для использования. Этот новый формат рассматривается в соответствующем разделе данного урока.

Цветовые режимы и модели

Цветовые режимы и модели

Дополнительная информация в заголовке окна документа

Рисунок 3.1. Дополнительная информация в заголовке окна документа

В данном случае там видно имя файла (Car.tif), текущий уровень увеличения (@ 100%), а также обозначение цветового режима, в котором находится документ ((RGB)). Для многих начинающих пользователей последняя из этих надписей выглядит довольно загадочно.

Цветовой режим представляет собой правило обозначения цветов пикселов документа. Так как компьютер использует для обозначений цветов числа, необходимо ввести некоторое правило преобразования этих чисел в отображаемые устройствами вывода цвета и наоборот. Таких правил может быть несколько, поэтому каждое из них получает свое название. В заголовке окна выводится название правила или режима, применяемого в данный момент к документу.

Некоторые люди могут задать резонный вопрос: «А зачем такие сложности? Неужели нельзя обойтись одним режимом?». Оказывается, разные режимы нужны для того, чтобы отобразить в файле особенности последующего вывода изображения на какое-либо устройство или сохранения в файле. Разные устройства вывода изображений могут работать по различным принципам, используя физические явления, не имеющие друг с другом практически ничего общего. Например, на экране монитора (а также телевизора) изображение строится при помощи засветки люминофора пучком электронов. При таком воздействии люминофор начинает излучать свет. В зависимости от состава люминофора, этот свет имеет ту или иную окраску. Для формирования полноцветного изображения используется люминофор со свечением трех цветов — красным, зеленым и синим. Поэтому такой метод формирования цвета называют RGB (Red, Green, Blue — Красный, Зеленый, Синий).

Примечание 1
Примечание 1

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

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

Обычно при таком способе цветопередачи для получения промежуточных оттенков используются чернила четырех цветов: голубой, пурпурный, желтый и черный. Такую цветовую модель называют CMYK — Cyan, Magenta, Yellow Blасk (Голубой, Пурпурный, Желтый, Черный). Теоретически для получения любого из оттенков достаточно только голубого, желтого и пурпурного цветов. Однако на практике крайне сложно получить их смешением чистый черный цвет или оттенки серого.

Примечание 2
Примечание 2

Так как в цветовой модели CMYK оттенки образуются путем вычитания определенных составляющих из белого, ее называют субтрактивной (вычитающей). Кроме различных печатающих устройств, эта цветовая модель используется в фотопленке и фотобумаге. Там также содержатся слои, чувствительные к голубому, желтому и пурпурному свету.

В файлах изображений, сохраненных в режимах RGB и CMYK, для каждого пиксела записываются значения всех трех или четырех компонентов.

Для вывода изображения на черно-белые (монохромные) устройства, а также для некоторых других целей лучше всего подходит изображение в режиме градаций серого (grayscale). В этом режиме для каждого пиксела записывается только одно значение — его яркость.

Существуют и другие цветовые режимы. Например, для записи изображений В форматах, ограничивающих допустимое число цветов (таких как GIF), эти изображения надо предварительно перевести в режим индексированных цветов. При этом составляется палитра, которая и используется при дальнейшей работе. При попытке использовать не входящий в палитру цвет он заменяется ближайшим цветом, занесенным в нее.

Теперь рассмотрим, как работа с цветовыми режимами реализована в Adobe > PhotoShop. Прежде всего, следует заметить, что в любом из режимов изображение представляется в виде нескольких каналов, каждый из которых представляет собой отображение одной из цветовых составляющих. В режиме RGB изобра-жение содержит красный, зеленый и синий каналы. Вы можете редактировать всe каналы одновременно (именно этот режим используется по умолчанию) или по отдельности. Подробнее работа с каналами рассматривается ниже.

Доступ к цветовым режимам осуществляется при помощи команд меню Image > Mode (Изображение > Режим). Это меню показано на Рисунок 3.2.

Меню настройки панели Colors

Рисунок 3.9. Меню настройки панели Colors

Меню выбора цветового режима

Рисунок 3.2. Меню выбора цветового режима

Как видно, меню разделено на четыре зоны. В верхней зоне перечислены цветовые режимы, поддерживаемые программой. Во второй зоне находятся два пункта: 8 bit/Channel (8 бит/канал) и 16 bit/Channel (16 бит/канал). Установив флажок напротив одного из них, вы можете выбрать, сколько битов будет отводиться для каждого пиксела на каждый из цветовых каналов. Обычно используется режим 8 бит/канал. При этом реализуются все возможности программы. Изображения с 16 бит/канал могут быть получены, например, с некоторых сканеров. Такие изображения не могут быть точно отображены на мониторе (предел — 8 бит/канал) и набор возможностей их обработки сильно ограничен (не работают большинство инструментов, команд и фильтров). В большинстве случаев этот режим не используется. Третья зона содержит одну команду — Color Table... (

Окно настройки преобразования

Рисунок 3.3. Окно настройки преобразования изображения в режим Bitmap

В этом окне вы можете выбрать разрешение для результирующего изображения (группа Resolution (Разрешение), поле ввода Output (Вывод)). Вы можете выбрать метод, в соответствии с которым оттенки серого будут преобразованы в черный и белый цвета. Это делается при помощи раскрывающегося списка Use (Использовать). При выборе пункта Custom Pattern (Шаблон пользователя) вы можете задать шаблон при помощи списка Custom Pattern (Шаблон пользователя).

Grayscale (Градации серого) — этот режим предназначен для работы с черно-белыми изображениями. Каждый пиксел определяется одним значением — яркостью. Число градаций — 256 (8 бит/пиксел). Этот режим полезен при обработке изображений, предназначенных для вывода на монохромные устройства. При переводе изображения в режим градаций серого программа запросит у вас подтверждения на удаление информации о цвете пикселов.

Для перевода изображения в режим градаций серого вызовите команду Image > Mode > Grayscale (Изображение > Режим > Градации серого).

СОВЕТ. Черно-белое изображение, сохраненное в режиме Grayscale (Градации серого), за нимает в памяти приблизительно в три раза меньше места, чем аналогичное изображение в режиме RGB.

Duotone (Дуплекс) — изображение формируется при помощи нескольких (от одной до четырех) красок, заданных пользователем. Для каждой из красок определяется зависимость (кривая) плотности красителя от яркости точки изображения. Это используется для добавления оттенков в монохромное изображение.

Перевод картинки в дуплексный режим возможен только из режима Grayscale (Градации серого). После выбора команды Image > Mode > Duotone... (Изображение > Режим > Дуплекс...) на экране появится диалоговое окно, изображенное на Рисунок 3.4. Для предварительного просмотра результатов преобразования установите флажок Preview (Просмотр).

Окно выбора цвета (по умолчанию

Рисунок 3.7. Окно выбора цвета (по умолчанию цвета задаются в координатах HSB)

В верхней части окна выбора цвета располагаются два прямоугольника Примечание 5
Примечание 5

Безопасной палитрой называют набор цветов, одинаково отображаемых браузера ми в операционных системах Mac OS и Windows.

Предотвратить выход цвета за рамки безопасной палитры можно, установив в окне выбора цвета флажок Only Web Colors (Только цвета Web). При этом ползунок и зона выбора оттенка будут преобразованы к «безопасному» виду. На Рисунок 3.8. показан вид окна в этом режиме.

Окно выбора цвета в режиме просмотра

Рисунок 3.8. Окно выбора цвета в режиме просмотра цветов, «безопасных для Web»

Во многих случаях удобно не только получить цвет, передаваемый в Интернете без искажений, но и иметь возможность получить его обозначение для использования на web-странице. Это можно сделать при помощи специального поля Примечание 6
Примечание 6

Для выполнения операций с полем ввода необходимо выделить содержащийся в нем текст.

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

Окно выбора красителей для дуплексного

Рисунок 3.4. Окно выбора красителей для дуплексного режима

В раскрывающемся списке Туре (Тип) выберите число красителей, которые будут использоваться при печати (Monotone — один краситель, Doutone — два красителя, Tritone — три, Quadtone — четыре). После этого для каждого из красителей (обозначаемых в окне Ink 1 (Краска 1), Ink 2 (Краска 2) ...) задайте цвет. Для этого щелкните мышью на цветных квадратах и выберите цвет в появившемся диалоговом окне. Для определения кривой соответствия яркости монохромного изображения и красителя щелкните на квадрате с изображением кривой (по умолчанию она прямая) и задайте вид зависимости в появившемся окне (см. Рисунок 3.5).

Рисунок 3.5. Определение зависимости плотности дуплексного красителя от яркости пикселов изображения

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

Кроме выбора красителей (см. Рисунок 3.4), вы можете дополнительно скорректировать результаты наложения разных цветов (это делается после пробной распечатки). Для этого нажмите кнопку Overprint Colors (Наложение цветов) и в появившемся окне щелкните мышью на нужных цветных квадратах. Цифры рядом с квадратом указывают, какой комбинации красителей он соответствует.

Indexed Colors (Индексированные цвета) — в этом режиме любой пиксел изображения может иметь оттенок только из числа указанных в специальной таблице цветов. Этот режим применяется при сохранении файлов в форматах GIF и PNG.

Для перевода изображения в режим индексированных цветов используйте команду Image > Mode > Indexed Colors (Изображение > Режим > Индексированные цвета). Подробнее процедура преобразования будет рассмотрена в разделе, посвященном сохранению файлов в формате GIF.

RGB — наиболее широко используемый режим. На работу в этом режиме рассчитано большинство функций Adobe PhotoShop. Как уже было сказано, в нем цвет каждого пиксела определяется значениями трех цветовых составляющих — красной, зеленой и синей. Именно таким образом представляются цвета на экране монитора. Поэтому при подготовке web-графики, которая ориентирована на просмотр при помощи монитора, вам придется работать именно в режиме RGB.

Для перевода изображения в режим RGB воспользуйтесь командой Image > Mode > RGB (Изображение > Режим > RGB).

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

Для того чтобы перевести изображение в этот режим, используйте команду Image > Mode > CMYK (Изображение > Режим > CMYK). Возможности программы при работе в этом режиме несколько ограничены.

Lab — в этом режиме цвета пикселов представляются в виде трех составляющих, одна из которых (L) представляет яркость, а две других — цветовые компоненты (а — от красного до зеленого, b — от желтого до синего). Цветовая модель Lab была разработана с учетом особенностей восприятия человека для наиболее точной передачи оттенков.

В этом режиме вы не сможете использовать некоторые возможности Adobe PhotoShop, но возможность отдельно редактировать, например, канал яркости может оказаться полезной. Для перевода изображения в режим Lab вызовите команду Image > Mode > Lab (Изображение > Режим > Lab).

Multichannel (Многоканальный) — этот режим позволяет преобразовать изображение в несколько каналов, хранящих информацию о цветах. В зависимости от того, в каком режиме находится исходное изображение, набор каналов полученного изображения будет различным. Для перехода в этот режим воспользуйтесь командой Image > Mode > Multichannel (Изображение > Режим > Многоканальный).

Вы можете переключаться между режимами, выбирая наиболее подходящий, но при таком преобразовании возникают проблемы с воспроизведением оттенков. Дело в том, что каждая из цветовых моделей, а значит и каждый из режимов, основывающихся на этих моделях, имеют ограниченный цветовой охват. Это значит, что в рамках каждой модели может быть представлено некоторое число оттенков. Кроме того, каждая из моделей имеет свои границы правильного воспроизведения цветов.

Модель Lab имеет наиболее широкий цветовой охват. Модель RGB имеет меньший охват. А самый малый цветовой охват имеет модель CMYK. Такие различия создают определенные проблемы при преобразовании изображений. Искажения цвета при переводе из режима RGB или Lab в режим CMYK заметны невооруженным взглядом. Особенно это касается чистых цветов (красных, синих, зеленых). Поэтому можно рекомендовать выполнять все предварительные операции по подготовке изображений в режиме RGB (тем более что в этом режиме реализуются все возможности программы). Преобразование в режим CMYK, если это необходимо, лучше всего производить на заключительном этапе работы.

Возможные цветовые искажения можно оценить и до преобразования изображения из одного режима в другой. Для этого установите флажок напротив команды меню View > Proof Colors (Вид > Безопасные цвета). После этого изображение будет выводиться с учетом выбранной цветовой модели. Саму модель можно выбрать в подменю View > Proof Setup (Вид > Настройка цвета). Просто установите флажок напротив нужного пункта. Таким образом вы можете протестировать свое изображение в цветовой модели CMYK и ее вариациях, а также в палитрах операционных систем Windows и Mac OS. При помощи команды View > Proof Setup > Custom... (Вид > Настройка цвета > Цвет пользователя) вы можете задать свой режим просмотра. Для возврата в нормальный режим просмотра снимите флажок View > Proof Colors (Вид > Безопасные цвета).

Если вам надо быстро узнать, есть ли на изображении цвета, не отображаемые в режиме CMYK, установите флажок напротив команды View > Gamut Warning (Вид > Предупреждение диапазона). После этого все цвета, отсутствующие в режиме CMYK, будут отображаться одним цветом (по умолчанию используется серый). Задать этот цвет можно при помощи команды Edit > Preferences > Transparency > Gamut... (Правка > Предпочтения > Прозрачность и диапазон...). Вернуться к нормальному режиму просмотра можно, сняв флажок в меню.

Ранее было сказано, что в различных цветовых режимах изображение раскладывается на цветовые составляющие. В Adobe PhotoShop эти составляющие можно редактировать одновременно (это делается при обычной работе с документом) или по отдельности. Доступ к цветовым компонентам (в PhotoShop они называются каналами) осуществляется при помощи панели Channels (Каналы). Вызвать ее на экран можно при помощи команды Window > Show Channels (Окно > Показать Каналы). На этой панели отображаются небольшие копии изображений, соответствующие каналам, и их названия. Самое верхнее изображение отображает все каналы одновременно (готовое изображение). Название этого изображения соответствует названию режима. В зависимости от цветовой модели, в которой вы работаете, состав каналов будет изменяться. На Рисунок 3.6 изображена панель Channels (Каналы) при переводе изображения в режимах RGB, Lab, CMYK и Grayscale (Градации серого).

Панель Channels при работе в режимах

Рисунок 3.6. Панель Channels при работе в режимах RGB, Lab, CMYK и Grayscale

Примечание 3
Примечание 3

В режиме Grayscale (Градации серого) изображение содержит только один канал — яркость. В режиме Lab яркость также задается в виде отдельного канала, но кроме яркости задается еще и цвет (в виде двух цветовых составляющих).

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

Совет 1
Совет 1

При помощи команды Split Channels (Разделить каналы) из меню панели Channels (Каналы) вы можете преобразовать изображение в несколько файлов, каждый из которых будет хранить информацию об одном из каналов, находившихся в исходном файле. Это может использоваться, например, при подготовке изображения к печати на офсетной машине. Команда Merge Channels... (Объединить каналы...) позволяет произвести обратную операцию — объединить несколько файлов в один, образовав несколько цветных каналов из монохромных изображений.

Редактирование отдельных каналов позволяет достичь интересных эффектов. Например, применяя фильтры к одному или нескольким каналам, можно добиться игры оттенков, практически недостижимой другими методами.

Еще одна сторона различных подходов к заданию цвета — использование различных систем их обозначения. Даже в рамках одной модели цвет можно задать несколькими способами. Самый простой и логичный метод — непосредственное задание цветовых составляющих. В большинстве случаев цвета определяются Именно так. Однако есть еще несколько способов, обозначаемых первыми буквами используемых компонентов оттенка. Наиболее распространенный из них — HSB (Hue, Saturation, Brightness — Оттенок, Насыщенность, Яркость). Это альтернативный способ задания цвета, широко используемый при работе в различных цветовых моделях. Его преимущество состоит в том, что цвета группируются по удобным для восприятия человеком признакам — цветовому тону, насыщенности и яркости. Иногда эти признаки называют несколько иначе, например, «интенсивность» («value») вместо «яркость». В отличие от методов задания при помощи цветовых компонентов, задание цвета в системе HSB позволяет легко оценить множество доступных цветов на глаз.

Примечание 4
Примечание 4

Компоненты, определяющие цвет, иногда называют координатами, а множество цве- тов — пространством. Это особенно удобно при визуальном представлении множества оттенков. Координату Н (Hue — Оттенок) обычно измеряют в градусах (от 0 до 360), а изменяющиеся по ней опенки изображают в виде окружности. Координаты S (Saturation — Насыщенность) и В (Brightness — Яркость) измеряют в процентах (от 0 до 100).

Adobe PhotoShop предоставляет пользователю возможность выбора между различными способами задания оттенков. Переключение производится в окне выбора цвета, выводимом на экран, например, при щелчке на символе цвета на панели инструментов. Это окно изображено на Рисунок 3.7.

В левой части окна находится зона выбора цвета, а рядом с ней — вертикальный ползунок. В правой части окна располагаются поля для ручного ввода значений цветовых компонентов. Рядом с некоторыми из полей ввода видны круглые переключатели

Панель Color в режимах RGB Sliders

Рисунок 3.10. Панель Color в режимах RGB Sliders (слева) и Web Color Sliders (справа)

Обратите внимание на символ несоответствия выбранного цвета безопасной палитре, отображаемый в режиме выбора безопасных цветов. Щелкнув на нем, вы сможете принять для использования предложенный программой эквивалент. Вы также можете выбирать безопасные цвета из спектра, вызвав предварительно из меню панели команду Make Ramp Web Safe (Безопасный для Web спектр).

Совет 2
Совет 2

Вызвать панель Color (Цвет) на экран можно при помощи команды Window > Show olors (Окно > Показать Цвет).

Примечание 7
Примечание 7

При переводе панели Colors (Цвет) в безопасный режим вы сможете выбирать из фиксированного набора цветов «безопасной» палитры. Возможные значения цветовых составляющих отмечены на ползунках штрихами.

Несмотря на то, что окно выбора цвета и панель Color (Цвет) предоставляют возможность работы с безопасной палитрой, гораздо удобнее выбирать стандартные цвета при помощи панели Swatches (Каталог) (см. Рисунок 3.11). Она вызывается на экран командой Window > Show Swatches (Окно > Показать Каталог).

Переключить панель в режим отображения безопасных цветов можно, выбрав из ее меню одну из следующих команд: Web Hues.aco, Web Safe Colors.aco или Web Spectrum.aco. Эти команды представляют имена файлов каталогов цветов, которые вы можете загрузить вручную при помощи команд Load Swatches (Загрузить каталог) или Replace Swatches (Заменить каталог) из меню панели. После вызова команды загрузки каталога вам будет предложено подтвердить выполнение этой операции, причем вы можете указать на необходимость либо замены каталога, либо добавления к нему загружаемого модуля.

Панель Swatches

Рисунок 3.11. Панель Swatches

Нажав кнопку Create new swatch of foreground color (Создать образец цвета переднего плана), расположенную на панели Swatches (Каталог), вы можете создать из цвета переднего плана новый образецСовет 3
Совет 3

Вы можете в любой момент вернуть панель Swatches (Каталог) в исходное состояние. Для этого достаточно вызвать из ее меню команду Reset Swatches (Сбросить каталог). Также полезно знать, что каталоги цветов, поставляемые с программой, находятся в подкаталоге \Presets\Color Swatches\ каталога, в который был установлен PhotoShop.

Таблица цветов ) Эта команда позволяет

Таблица цветов...). Эта команда позволяет редактировать цветовую таблицу в режиме индексированных цветов. Мы рассмотрим ее позже. Наконец, в четвертой зоне содержатся команды, позволяющие внедрять в файл данные цветокоррекции (профили) и конвертировать изображение из одного профиля в другой. Эти команды важны в полиграфии, но в web-дизайне не очень актуальны, так как в большинстве случаев цветокоррекция в web-графике не используется.

Adobe PhotoShop поддерживает восемь цветовых режимов, переключаться между которыми вы можете при помощи соответствующих команд из меню Image > Mode (Изображение > Режим). Рассмотрим их по порядку.

Bitmap (Битовый) — любая точка изображения может быть либо белой, либо черной. Этот режим может оказаться полезным при печати изображений на некоторых принтерах, а также для получения определенных изобразительных эффектов. В этом режиме большинство функций PhotoShop не работает (вы не сможете работать со слоями, применять фильтры и настройки изображения). Кроме того, рисующие инструменты сильно ограничиваются в своих возможностях.

Для перевода изображения в режим Bitmap (Битовый) его надо предварительно перевести в режим Grayscale (Градации серого). После этого становится доступной команда выбора битового режима. При ее вызове на экране появится окно настройки преобразования, показанное на Рисунок 3.3.

Изображение до коррекции яркости

Рисунок 4.2. Изображение до коррекции яркости и контраста (слева) и после нее (справа)

Недостатки, связанные с избыточной или недостаточной насыщенностью цветов, а также с отклонением цветовой гаммы изображения, можно устранить при помощи команды Hue/Saturation (Оттенок/Насыщенность). Она вызывается при помощи пункта меню Image > Adjustments > Hue/Saturation (Изображение > Настройки > Оттенок/Насыщенность). На Рисунок 4.3 изображено используемое при этом окно настроек.

Изображение до (слева) и после (справа) коррекции уровней

Рисунок 4.9. Изображение до (слева) и после (справа) коррекции уровней

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

Примечание 8
Примечание 8

Вы можете попробовать использовать команду Levels... (Уровни...) в автоматическом режиме. Для этого вызовите ее и в окне управления нажмите кнопку Auto (Авто). При нажатой клавише Alt она заменяется кнопкой Options (Настройка), позволяющей ввести параметры автоматической коррекции (значения максимума и минимума яркости, в соответствии с которыми ведется анализ изображения). Автоматическую коррекцию также можно вызвать командой Image > Adjustments > Auto Levels (Изображение > Настройки > Автоуровни).

Совет 8
Совет 8

Изображения с большей контрастностью кажутся более резкими, чем менее контрастные.

Произвести коррекцию цветовых уровней можно, используя команду Image > Adjustments > Curves... (Изображение > Настройки > Кривые...). Она также позво ляет изменять яркость пикселов изображения. Но в отличие от простой коррекции уровней, команда Curves... (Кривые...) предоставляет возможность изменить не только начальные и конечные значения диапазона яркости, но и зависимость результирующей яркости пикселов от исходной в его промежуточных точках. Это бывает полезно, например, при коррекции фотографии, сделанной в условиях неподходящей освещенности.

На Рисунок 4.10 изображено окно настройки параметров этой команды.

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

Изображение имеет низкую контрастность

Рисунок 4.6. Изображение имеет низкую контрастность, для дальнейшего использования нужна коррекция

Примечание 6
Примечание 6

В зависимости от режима, в котором находится изображение, будет изменяться и состав каналов. Например, в режиме CMYK присутствуют голубой (cyan), пурпурный (magenta), желтый (yellow) и черный (black) каналы. В режиме Grayscale (Градации серого) доступен только один канал, отражающий яркость пикселов.

Использование команды Levels... (Уровни...) — довольно сложная процедура, поэтому рассмотрим ее на примере. На Рисунок 4.6 приведено исходное изображение.

Оно имеет низкую контрастность и практически непригодно для использования. После вызова команды Levels... (Уровни...) окно настройки имеет вид, приведенный на Рисунок 4.7. Хорошо видно, что диапазон яркости составляет около трети доступных значений.

Настройка команды Hue/Saturation

Рисунок 4.4. Настройка команды Hue/Saturation на ограниченную часть спектра

Диапазон изменяемых цветов можно изменять, добиваясь изменения нужных пикселов. Для этого существуют два пути. Первый путь — изменить границы диапазона при помощи полосы спектра. На Рисунок 4.4 видно, что диапазон изменяемых цветов изображен в виде трех полос — темно-серой и двух светло-серых. Полосы отделены друг от друга вертикальными разделителями, а по краям замыкаются треугольниками. Темно-серая полоса показывает диапазон оттенков, подвергающийся полному воздействию команды. Светло-серые полосы изображают диапазон плавного спада (нарастания) эффекта. При помощи этих элементов вы можете выполнять следующие действия:

переместить весь диапазон, не изменяя его ширины. Для этого передвиньте при помощи мыши темно-серую полосу. Все остальные элементы также переместятся; изменить диапазон плавного нарастания (спада) действия изменений. Ширина этого диапазона зависит от ширины светло-серых полос. Измените ее, перемещая треугольники (для сохранения диапазона полного воздействия) или вертикальные разделители (для сохранения общей ширины диапазона применения команды); изменить диапазон полного воздействия команды. Это можно осуществить, передвинув вертикальные разделители, изменив тем самым ширину темно-серой полосы.

Второй путь изменения диапазона оттенков — использование ин струментов «Пипетка», «Пипетка с плюсом» и «Пипетка с минусом» Примечание 4
Примечание 4

PhotoShop хранит настройки для разных цветовых диапазонов отдельно. Таким образом, вы можете отдельно корректировать, скажем, красные и зеленые группы цветов в рамках одного вызова команды Hue/Saturation (Оттенок/Насыщенность).

Если ваша цель — не коррекция оттенков, а тонировка всего изображения, установите флажок Colorize (Окрасить). После этого все пикселы будут окрашены в один цвет. Вы также можете дополнительно подстроить насыщенность и яркость.

ВНИМАНИЕ. При установке флажка Colorize (Окрасить) будет автоматически установлен цвето вой диапазон Master (Все).

После того, как вы произведете необходимые действия, нажмите кнопку ОК. Для отмены операции нажмите кнопку Cancel (Отмена). Для сброса окна команды в исходное состояние удерживайте клавишу Alt и нажмите кнопку Reset (Сброс), заменяющую кнопку Cancel (Отмена).

Совет 5
Совет 5

Многие окна команд содержат кнопки Save... (Сохранить...) и Load... (Загрузить...). Они позволяют сохранять и повторно использовать сложные настройки.

В некоторых случаях области изображения, которые должны быть белыми или черными, приобретают сероватый или какой-либо другой оттенок. Бывает и на оборот — в каких-либо целях белый цвет надо заменить на другой. Справиться с подобной ситуацией можно при помощи команды Image » Adjustments > Levels... ( Изображение > Настройки > Уровни...). Эта команда позволяет задать цвета, Соответствующие «белым» и «черным» пикселам, а потом применить их к изображению.

Прежде всего следует пояснить, что понимается под терминами «белый», «черный» и «серый» цвет. Каждое изображение имеет динамический диапазон — разницу между максимальным и минимальным значениями яркости. Чем больше эта разница, тем насыщеннее выглядит картинка и наоборот. Рисунки с низким динамическим диапазоном выглядят неконтрастными и маловыразительными. «Белым» цветом можно назвать цвет, имеющий максимальную яркость в пределах заданного динамического диапазона. Это вовсе не обязательно будет чистый белый. «Черный» имеет минимально возможную яркость. «Серый» цвет занимает промежуточное положение — он имеет яркость, соответствующую 50% диапазона. Изменяя яркость и оттенок «белого», «черного» и «серого» цветов, можно гибко управлять контрастностью изображения, балансом света и тени, а также общей яркостью.

После вызова команды Levels... (Уровни...) на экране появится окно управления (Рисунок 4.5).

Окно настройки фильтра Unsharp Mask

Рисунок 4.16. Окно настройки фильтра Unsharp Mask

В верхней части окна расположен образец обрабатываемого изображения. Вы можете выбрать участок картинки, щелкнув мышью в окне документа или «перетаскивая» образец в окне настройки. Кнопки - и + позволяют изменить масштаб образца. Если вы установите флажок Preview (Просмотр), то изменения будут немедленно отображаться в окне документа. В нижней части окна располагаются ползунки, задающие параметры работы фильтра. Ползунок Amount (Количество) задает силу действия фильтра. Если вы работаете с изображением, которое затем будет выведено на печать с высоким разрешением, лучше увеличить эффект, так как на экране действие фильтра заметнее, чем на бумаге. Ползунок Radius (Радиус) определяет радиус, в котором ведется поиск пикселов, отличающихся от текущего больше, чем на пороговую величину. Если таковые найдены, производится повышение контрастности для улучшения резкости. При малых значениях радиуса резкость увеличивается только на границах областей. При больших значениях также повышается резкость внутри однотонных участков. Ползунок Threshold (Порог) задает пороговое значение яркости, на которое должны различаться пикселы для повышения их контрастности. При пороговом значении, равном 0, обрабатываются все пикселы без исключения. Большие значения порога позволяют повысить резкость только на границах однотонных областей или при резких перепадах яркости.

ВНИМАНИЕ. Если изображение содержит шум (на однотонных областях присутствуют помехи в виде незначительных колебаний яркости соседних пикселов), то следует установить порог больше 0. В противном случае после использования нерезкой маски шум станет значительно заметнее.

В заключение этого урока рассмотрим пример подготовки изображения с использованием средств цветокоррекции и повышения резкости. Во многих случаях, комбинируя различные способы обработки, можно значительно улучшить качество изображения. Например, часто приходится использовать отсканированные изображения различных схем и чертежей. Из-за шероховатости бумаги и большого увеличения качество таких картинок может быть далеким от идеала. Чтобы изображение стало пригодным для дальнейшей обработки, надо устранить серый фон и шум, возникший из-за того, что бумага имеет не идеально гладкую поверхность. Также полезно повысить резкость. Устранить окраску фона и шум можно при помощи команды Levels... (Уровни...). Если задать уровень «белого» таким, чтобы самые темные точки фона стали белыми, то фон изображения станет однотонным белым без каких-либо искажений. Задавая уровень «черного», можно значительно улучшить качество темных (закрашенных) областей. Проще всего установить уровни при помощи «пипеток», кнопки вызова которых находятся в окне настройки команды. Выберите белую «пипетку» и щелкайте ей на светлых участках. Затем выберите черную «пипетку» и «обработайте» темные участки. Сделайте их более резкими при помощи фильтра Unsharp Mask... (Нечеткая маска...). Вызовите фильтр и установите необходимые параметры. В данном случае изображение должно быть как можно более четким, поэтому установите ползунок Amount (Количество) на максимальное значение. Ползунок Radius (Радиус) установите приблизительно на 30, а ползунок Threshold (Порог) на 0. Нажмите кнопку ОК.

Примечание 10
Примечание 10

Значения параметров для каждого отдельного изображения лучше подобрать индивидуально.

Примечание 11
Примечание 11

Так как увеличение резкости производится за счет повышения контрастности изоб- ражения, то в принципе можно использовать команду Brightness/Contrast (Яркость/ Контраст). Это позволит увеличить четкость изображения, но контуры получатся несколько скругленными, что не всегда удобно.

Используя различные инструменты Adobe PhotoShop, вы можете узнать, например, текущие координаты курсора. Для получения этой информации, а также данных о цветовых составляющих, яркости и насыщенности изображения можно воспользоваться очень простым и удобным способом. Все эти данные легко получить при помощи палитры Info (Инфо). Она вызывается на экран при помощи команды Window > Show Info (Окно > Показать Инфо). Сама панель показана на Рисунок 4.17.

Окно настройки команды Brightness/Contrast

Рисунок 4.1. Окно настройки команды Brightness/Contrast

Ползунки Brightness (Яркость) и Contrast (Контраст) позволяют регулировать соответственно яркость и контрастность изображения. Выставленные на ползунках значения отображаются в расположенных рядом с ними полях ввода. Вы можете вводить значения непосредственно в эти поля. Обратите внимание, значения могут быть положительными и отрицательными. При вводе положительных величин знак «плюс» можно пропустить, а вот ставить «минус» для отрицательных чисел обязательно. Для того чтобы производимые изменения немедленно отражались на изображении, установите флажок Preview (Просмотр). Произведя необходимые действия, нажмите кнопку ОК. Если вы хотите отказаться от использования команды, нажмите кнопку Cancel (Отмена).

Совет 3
Совет 3

Большинство диалоговых окон Adobe PhotoShop позволяют восстановить значения, которые были выставлены в момент вызова окна. Для этого нажмите клавишу Alt — кнопка Cancel (Отмена) будет заменена кнопкой Reset (Сброс). Нажав эту кнопку, вы можете сбросить значения, выставленные в окне.

На Рисунок 4.2 приведен пример использования этой команды. Слева — фрагмент исходного изображения до проведения коррекции. Картинка очень темная и малоконтрастная. Справа — тот же фрагмент, но после увеличения яркости и контраста.

ВНИМАНИЕ. Регулируя яркость и контраст изображения, следите за результатом. Чрезмерное увеличение контраста может привести к образованию «засвеченных» областей, искажению цветов и потере деталей. Слишком большое увеличение яркости противодействует увеличению контраста.

Окно настройки команды Variations ...

Рисунок 4.14. Окно настройки команды Variations...

Последняя команда цветокоррекции, которую мы рассмотрим в этом уроке, — команда Variations... (Варианты...). Она позволяет изменять оттенок, яркость и насыщенность изображения. Главная ее особенность — все возможные варианты изменения текущей картинки отображаются не в виде комбинаций цифр, как в других командах, а визуально. Это очень удобно для быстрого подбора нужного цвета.

Вызвать эту команду можно командой меню Image > Adjustments > Variations... (Изображение > Настройки > Варианты...). После этого на экране появится окно управления (Рисунок 4.14).

В окне настроек находятся уменьшенные копии обрабатываемого изображения. Каждая копия снабжена поясняющейся надписью. Изображения с надписью Current Pick (Текущий вариант) представляют картинку в данный момент. Изображение с подписью Original (Оригинал), как следует из названия, представляет исходное изображение. Щелкая на этих изображениях, вы можете изменять редактируемый документ.

Совет 12
Совет 12

Щелчок мыши на изображении с надписью Original (Оригинал) позволяет вернуть картинку к первоначальному состоянию.

В верней части окна находится группа переключателей, при помощи которых можно выбрать изменяемый параметр и группу пикселов (по яркости). Переключатели Shadows (Тени), Midtones (Средние тона) и Highlights (Света) устанавливают режим изменения оттенков для темных, средних по яркости и светлых участков изображения соответственно. Переключатель Saturation (Насыщенность) устанавливает режим изменения насыщенности изображения. Под переключателями находится ползунок Fine-Coarse (Точно-Грубо). С его помощью можно управлять точностью настройки. Также в окне находится переключатель Show Clipping (Показать ограничение). Если он установлен, то на образцах изображения указываются области, которые не могут быть правильно отображены в режиме CMYK.

При настройке оттенка изображения окно команды имеет вид, показанный на Рисунок 4.14. Оттенок можно изменить, щелкая мышью на шести картинках, расположенных в нижней части окна вокруг изображения текущего состояния рисунка. Картинки More Green (Больше зеленого), More Yellow (Больше желтого), More Red (Больше красного), More Blue (Больше синего), More Magenta (Больше пурпурного) и More Cyan (Больше голубого) позволяют увеличить содержание соответствующего цвета в изображении. При этом изменяются также яркость и насыщенность. В правой части окна расположена картинка текущего состояния изображения, а также картинки Lighter (Светлее) и Darker (Темнее). Щелкая на них, вы можете настраивать яркость изображения.

Если вы установите переключатель Saturation (Насыщенность), то окно настройки команды примет вид, показанный на Рисунок 4.15.

Окно настройки параметров команды

Рисунок 4.15. Окно настройки параметров команды Variations... в режиме коррекции насыщенности

Щелкая на картинках Less Saturation (Менее насыщено) и More Saturation (Более насыщено), можно управлять насыщенностью изображения.

Совет 13
Совет 13

Если изображение надо окрасить в какой-либо один цвет (сделать монохромным), то перед применением команды Variations... (Варианты...) его следует обесцветить.

Самый простой способ сделать это — использовать команду Image > Adjustments > Desaturate (Изображение > Настройки > Обесцветить).

Мы познакомились с наиболее нужными и широко используемыми командами коррекции яркости, контраста и цвета изображения. Теперь посмотрим, как при помощи Adobe PhotoShop улучшить резкость изображения.

Для решения этой задачи в состав Adobe PhotoShop включено несколько фильтров. Вызвать их можно при помощи команд меню Filter > Sharpen (Фильтр > Резкость). Всего доступно четыре фильтра:

Sharpen (Резкость) — позволяет увеличить резкость всего изображения или его выделенного фрагмента. Настройки не требуются; Sharpen More (Резкость+) — также повышает резкость, но эффект более заметен; Sharpen Edges (Контурная резкость) — выделяет границы однотонных областей и увеличивает их контрастность; Unsharp Mask... (Нерезкая маска...) — дает пользователю возможность вручную управлять процессом увеличения резкости.

Действие всех этих фильтров основано на повышении контрастности соседних пикселов. Разница лишь в том, какие пикселы обрабатываются и насколько силен эффект. Фильтры Sharpen (Резкость) и Sharpen More (Резкость+) обрабатывают все изображение (или выделенную область), причем эффект от Sharpen More (Резкость+) примерно в два раза сильнее. Фильтр Sharpen Edges (Контурная резкость) обрабатывает только ярко выраженные границы и контуры, оставляя без изменений все остальное. Unsharp Mask... (Нерезкая маска...), в отличие от предыдущих фильтров, имеет окно настройки, в котором можно задать параметры обработки. В зависимости от них фильтр воздействует на те или иные пикселы. Рассмотрим работу с ним подробнее.

На Рисунок 4.16 изображено окно настройки фильтра Unsharp Mask... (Нерезкая маска...).

Окно настройки параметров команды Color Balance

Рисунок 4.13. Окно настройки параметров команды Color Balance

В окне находятся три ползунка: Cyan-Red (Голубой-Красный), Magenta-Green (Пурпурный-Зеленый), Yellow-Blue (Желтый-Синий). С их помощью можно изменять соотношение соответствующих цветов в изображении. Над ползунками расположены три поля ввода, отображающие значения, выставленные на ползунках. Вы также можете ввести нужные значения в эти поля с клавиатуры.

В нижней части окна расположены три переключателя: Shadows (Тени), Midtones (Средние тона), Highlights (Света). Они позволяют выбрать, на какие (по яркости) пикселы будет воздействовать команда. Установив флажок Preserve Luminosity (Сохранить яркость), можно оставить яркость пикселов неизменной при изменении оттенка. Это позволит скорректировать тон изображения без изменения его очертаний.

В Adobe PhotoShop 7.0 было введено новое средство цветокоррекции, позволяющее нормализовать цвета изображения в автоматическом режиме. Это команда Image > Adjustments > Auto Color (Изображение > Настройки > Автокоррекция цвета). Она работает в полностью автоматическом режиме без участия пользователя — вам надо только вызвать команду. Одновременно будет выполнена подстройка баланса цветов, а также яркости и контраста. Хотя алгоритм программы позволяет значительно повысить качество изображения, после применения этой команды может потребоваться дополнительная ручная подстройка, например, коррекция уровней.

Окно настройки параметров команды Curves ...

Рисунок 4.10. Окно настройки параметров команды Curves...

Сразу после вызова команды «кривая» представляется в виде прямой линии — исходные и результирующие значения равны.

Над графиком располагается разворачивающийся список Channel (Канал), из которого вы можете выбрать обрабатываемый канал изображения.

Совет 9
Совет 9

Вы можете изменить масштаб координатной сетки. Для этого нажмите кнопку Alt и щелкните на графике. Обратное переключение производится точно так же.

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

Работа с командой Curves... (Кривые...) сводится к заданию нужного вида кривой на графике. Прежде всего, из списка Channel (Канал) выберите канал, с которым вы хотите работать. После этого, изменяя кривую, добейтесь нужного вида изображения.

Вносить изменения можно двумя способами. Первый — редактирование при помощи фиксированных точек. Просто переместите выбранные точки кривой при помощи мыши. При этом на графике образуются фиксированные узлы с известными координатами. Оценить значения координат можно при помощи полей ввода в нижней части окна (узел надо выбрать, щелкнув на нем мышью) или при помощи полос с переменной яркостью, расположенных снизу и слева от графика. На рисунке 4.10 показано редактирование кривой именно таким методом. Можно задать до шестнадцати узлов. Удаление любого из них выполняется при помощи мыши — «утащите» его за пределы координатной сетки. Второй способ — свободное рисование. Вы можете набросать кривую от руки при помощи мыши. Переход в этот режим осуществляется при помощи кнопки с изображением ка рандаша, расположенной в нижней части окна настройки команды.

В режиме рисования доступна кнопка Smooth (Сгладить), позволяющая сгладить зависимость. Нажав кнопку с изображением кривой Совет 10
Совет 10

Если вам нужно узнать, какая точка кривой соответствует некоторому пикселу, подведите к нему указатель мыши и нажмите левую кнопку. На кривой появится значок, указывающий место пиксела на шкале яркости. Если перед этим вы работали с «пипетками» для коррекции уровней, предварительно нажмите кнопку выбранной «пипетки», чтобы ее отключить.

Работа с командой Curves... (Кривые...) требует определенной сноровки. Необходимо понять, как форма кривой сказывается на результате работы. Прежде всего, следует запомнить, что правая часть горизонтальной оси (оси исходных значений яркости) соответствует светлым пикселам изображения, а левая часть — темным. Верхняя часть вертикальной оси (оси результирующих значений яркости) представляет светлые пикселы изображения, получающегося после применения команды, а нижняя часть — темные. Средние области обеих осей отображают промежуточные значения яркости. Верхняя правая точка кривой представляет уровень «белого», а нижняя левая — уровень «черного». Такая важная характеристика изображения как динамический диапазон (разность между максимумом и минимумом яркости) также отображается на графике. Это расстояние между точками, указывающими уровень «белого» и «черного». Расстояние по горизонтали определяет используемую часть динамического диапазона исходной картинки. Расстояние по вертикали определяет динамический диапазон результата.

Примечание 9
Примечание 9

Предполагается, что значения яркости распределены по осям так, как видно на Рисунок 4.10. Щелкнув на шкалах яркости, расположенных рядом с графиком, вы можете развернуть их.

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

В зависимости от формы кривой, команда Curves... (Кривые...) позволяет выполнять самые разные операции. Обратите внимание, на кривой с Рисунок 4.11, а верхняя правая точка опущена вниз. Это значит, что области исходного изображения, окрашенные в белый цвет, после применения команды получат более темную окраску. Таким образом, эта кривая позволяет затемнить изображение. Кривая, показанная на Рисунок 4.11, б, наоборот, позволяет повысить яркость изображения, так как темные области исходной картинки будут окрашены в более светлые тона. В обоих случаях происходит уменьшение динамического диапазона результирующего изображения, что проявляется в ухудшении контрастности.

Кривые, изображенные на Рисунок 4.11, в и 4.11, г позволяют изменить уровень «белого» и «черного» цветов соответственно. Дело в том, что точка, определяющая максимальную или минимальную яркость результирующей картинки, сдвинута относительно исходного минимума или максимума яркости. Кривая с Рисунок 4.11, д корректирует одновременно уровень «белого» и уровень «черного», не изменяя средних значений яркости (уровня «серого»). Такие кривые (изменяющие уровни «белого» и «черного») можно использовать для увеличения контрастности результирующего изображения.

Окно настройки параметров палитры Info

Рисунок 4.18. Окно настройки параметров палитры Info

В зонах First Color Readout (Первый индикатор цвета) и Second Color Readout (Второй индикатор цвета) при помощи списков можно выбрать, какие параметры будут отображаться для точки изображения, над которой находится курсор. Кроме данных о цветовых составляющих в режимах RGB, HSB, Lab, CMYK и Grayscale (Градации серого), выдается информация о номере цвета в безопасной палитре

(Web Color (Цвет web)) или составляющих в режиме, в котором изображение находится в данный момент (Actual Color (Текущий цвет)). Также можно получать сведения о прозрачности в данной точке (Opacity (Непрозрачность)) и о плотности чернил (Total Ink (Всего чернил)). В зоне Mouse Coordinates (Координаты мыши) можно выбрать, в каких единицах будут представлены координаты курсора.

Полезная особенность палитры Info (Инфо) — при вызове какой-либо команды коррекции во время перемещения курсора над изображением цветовые составляющие отображаются в двух вариантах — до вызова команды и с учетом ее действия. Эта функция действует во время работы с окном настройки параметров команды.

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

Окно настройки после задания уровней

Рисунок 4.8. Окно настройки после задания уровней

Как уже говорилось, изменять уровни «черного» и «белого», а также уровень «серого» можно не только при помощи пипеток, но и с помощью черного, серого и белого треугольников, расположенных под графиком Input Levels (Входные уровни).

Примечание 7
Примечание 7

Скачки в яркости пикселов являются следствием увеличения контрастности изобра жения. Собственно контрастность как раз и определяется разностью в яркости соседних точек.

Совет 7
Совет 7

Вместо использования «Пипеток» можно передвинуть в нужное положение указатели уровней белого, черного и серого на графике исходных значений яркости в окне настройки.

Окно управления командой Hue/Saturation

Рисунок 4.3. Окно управления командой Hue/Saturation

В окне управления три ползунка: Hue (Оттенок), Saturation (Насыщенность) и Lightness (Осветление). Их положение определяют изменения, вносимые в соответствующие характеристики изображения. Рядом расположены поля ввода, выполняющие аналогичные функции.

Сдвиг ползунка Hue (Оттенок) в сторону положительных значений или ввод положительного значения в соответствующее поле ввода приводит к смещению оттенков изображения в сторону синей части спектра. Отрицательные значения означают смещение цветов в сторону красных тонов. В обе стороны сдвиг возможен на 180°.

Примечание 3
Примечание 3

Сдвиг спектра производится циклически. Это значит что смещение на +180° и на -180° дадут одинаковый результат.

Перемещение ползунков Saturation (Насыщенность) и Lightness (Осветление) приводит к изменению насыщенности цветов и яркости изображения. Коррекция возможна в пределах -100...+100%. Сдвиг насыщенности на -100 вызовет обесцвечивание картинки. Уменьшение яркости на 100% преобразует все пикселы в черные, а увеличение на такую же величину — в белые.

Все изменения, вносимые в цветовую гамму изображения, отображаются на двух полосах спектра в нижней части окна. Верхняя полоса соответствует исходному изображению, нижняя учитывает вносимые поправки. Если установлен флажок Preview (Просмотр), то изменения цветовой гаммы немедленно отображаются в окне редактируемого документа.

Совет 4
Совет 4

Для удобства просмотра спектр можно «прокручивать» вправо и влево. Просто перетаскивайте полосы мышью при нажатой клавише Ctrl.

Если вы хотите изменить только пикселы определенного цвета (например, изменить цвет моря на фотографии с пляжа), используйте раскрывающийся список Edit (Редактировать). Можно обрабатывать следующие группы оттенков: Master (Все) — редактируются все пикселы изображения, Reds (Красные), Yellows (Желтые), Greens (Зеленые), Cyans (Голубые), Blues (Синие), Magentas (Пурпурные). При выборе любой из групп (кроме Master (Все)) на спектре в нижней части окна будет выделен диапазон изменяемых оттенков (Рисунок 4.4). Вносимые изменения будут теперь отражаться только на нем. Над полосами спектров указываются верхняя и нижняя границы.диапазона. Числа сдвоенные, так как границы размыты («внутренние» числа обозначают диапазон полного воздействия).

Окно управления Levels ...

Рисунок 4.5. Окно управления Levels...

В окне отображается график распределения пикселов изображения по яркости. Высота темной области в конкретной точке пропорциональна числу пикселов, имеющих соответствующую яркость. Под графиком находятся три треугольника (белый, серый и черный). Положение белого и черного треугольников определяет пороговые уровни «белого» и «черного» цветов. Все пикселы, имеющие яркость выше «белого» и ниже «черного», окрашиваются соответствующим образом. Серый треугольник указывает уровень «серого» цвета. При перемещении треугольников соответствующие значения яркостей отображаются в полях Input Levels (Входные уровни).

В нижней части окна изображена шкала яркости результирующего изображения. Перемещая по ней черный и белый треугольники, вы можете задать яркость «черных» и «белых» пикселов соответственно. Значения яркостей белого и черного выводятся в полях ввода Output Levels (Выходные уровни).

Примечание 5
Примечание 5

Яркость черного и белого задается в абсолютных значениях — от 0 до 255. Для серого цвета яркость задается отношением отклонений между серым и белым, а также серым и черным. При их равенстве яркость серого равна 1.

Совет 6
Совет 6

Для того чтобы производимые изменения сразу отражались на редактируемом изображении, установите флажок Preview (Просмотр).

В левой части окна расположены три кнопки

Палитра Info

Рисунок 4.17. Палитра Info

Палитра разделена на четыре зоны (в некоторых случаях их может быть больше), в которых при перемещении указателя мыши над окном документа выводятся следующие данные:

Пример художественной обработки

Рисунок 4.12. Пример художественной обработки изображения при помощи кривых

Как команда Levels... (Уровни...), команда Curves... (Кривые...) может работать в автоматическом режиме. Для его запуска вызовите команду Curves... (Кривые...), а затем нажмите кнопку Auto (Авто) в окне настройки параметров команды. При этом будет выполнена коррекция уровней. При нажатой клавише Alt кнопка Auto (Авто) заменяется кнопкой Options (Настройка). Нажав на эту кнопку, вы можете задать параметры выбора наиболее темного и наиболее светлого участка изображения.

Совет 11
Совет 11

Работая с командой Curves... (Кривые...), установите флажок Preview (Просмотр). Это позволит вам наблюдать эффект от изменения параметров в окне документа.

Рассмотрим еще две команды, служащие для коррекций цветовой гаммы редактируемого изображения. Первая из них — Image > Adjustments > Color Balance (Изображение > Настройки > Цветовой баланс). С ее помощью можно изменить соотношение основных цветов в изображении. На Рисунок 4.13 изображено окно настройки параметров.

Примерный вид окна настройки команды

Рисунок 4.7. Примерный вид окна настройки команды Levels... для изображения, показанного на Рисунок 4.6

Для коррекции изображения установим более подходящие уровни белого, серого и черного цветов. Определить оттенки белого, серого и черного можно, дважды щелкнув мышью на кнопках соответствующих Пипеток. В данном случае применим цвета, используемые по умолчанию — белый, 50% серого и черный. Применить эти цвета, а значит и соответствующие уровни яркости к изображению можно, щелкнув мышью в нужных точках, выбрав по очереди белую, серую и черную «Пипетку». В данном случае самой светлой деталью должны быть украшения на крыше дома. Выберем «Белую пипетку» и щелкнем в выбранной точке. Самую темную точку изображения сделаем черной. В данном случае темнее всего тень от дерева в правой части изображения — применим к ней «Черную пипетку». Уровень серого следует выставлять по нейтрально окрашенным областям. В данном случае подойдет тень от балкона. Используем «Серую пипетку». На Рисунок 4.8 показано окно настройки после выполнения этих действий.

Из графика распределения яркости видно, что диапазон яркости значительно расширился, но в нем появились пробелы. Это значит, что при перераспределении яркости пикселов ее значения стали изменяться скачками.

Примеры кривых команды Curves ...

Рисунок 4.11. Примеры кривых команды Curves...

Кривые, подобные показанным на Рисунок 4.11, е и 4.11, ж, позволяют исправлять недостатки изображения, связанные с плохими условиями съемки. Они увеличивают яркость светлых пикселов и уменьшают яркость более темных (Рисунок 4.11, е) и наоборот (Рисунок 4.11, ж). В первом случае можно улучшить изображение, если оно малоконтрастное, а во втором — если картинка имеет излишне высокий контраст.

Кривые сложной формы, такие как изображенная на Рисунок 4.11, з, используются для получения художественных эффектов или сложной коррекции. На Рисунок 4.12 приведен пример художественной обработки изображения при помощи кривых. В данном случае были подчеркнуты темные области картинки, а остальные осветлены.

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

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

Сканирование и коррекция изображений

Сканирование и коррекция изображений

---

---