Photoshop 7 и web дизайн

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

В этом уроке мы рассмотрели форматы изображений 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) дает возможность сохранить цвета без изменения (насколько это возможно) при просмотре на разных мониторах и при выводе на печать.

Photoshop 7 и web дизайн

Формат 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 (а порой и превосходящий его), но полностью открытый для использования. Этот новый формат рассматривается в соответствующем разделе данного урока.

Photoshop 7 и web дизайн

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

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

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

Рисунок 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.

Photoshop 7 и web дизайн

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

Рисунок 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.

Окно настройки параметров команды 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, д корректирует одновременно уровень "белого" и уровень "черного", не изменяя средних значений яркости (уровня "серого"). Такие кривые (изменяющие уровни "белого" и "черного") можно использовать для увеличения контрастности результирующего изображения.

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

Рисунок 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... (Нерезкая маска...).

Окно настройки параметров палитры 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, и. На ней точки "белого" и "черного" для результирующего изображения поменялись местами. Это позволит получить негативное изображение из позитивного или наоборот.
Для того чтобы вам было удобнее работать с формой кривой, вы можете увеличить ее масштаб. Нажмите кнопку, находящуюся в правом нижнем углу окна

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

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

Photoshop 7 и web дизайн

Изменение формы выделения

Рисунок 5.11. Изменение формы выделения


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

Кнопки вызова инструментов работы

Рисунок 5.1. Кнопки вызова инструментов работы с выделенными областями изображений


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

Одно из основных назначений выделенных областей — копирование графических объектов. Для того чтобы скопировать выделенный фрагмент, используйте команду Edit > Сору (Правка > Копировать), комбинации клавиш Ctrl+C или Ctrl+Insert. Используя команду Edit > Cut (Правка > Вырезать) или комбинации клавиш Ctrl+Del и Ctrl+X, можно не скопировать, а вырезать фрагмент изображения, поместив его в буфер обмена. При помощи команды Edit > Paste (Правка > Вставить) вы можете вставить в изображение фрагмент из буфера обмена. Если текущий слой не пуст, то фрагмент будет помещен на новый слой. Для этой же цели можно использовать комбинации клавиш Ctrl+V или Shift+Insert. В меню Edit (Правка) и в контекстных меню изображения находятся еще несколько команд, позволяющих оперировать фрагментами изображений.
Adobe PhotoShop предоставляет пользователям набор инструментов для работы с выделениями. Доступ к ним осуществляется при помощи кнопок, расположенных в верхней части панели инструментов. Они показаны на Рисунок 5.1.
Рассмотрим эти инструменты подробнее. Первый и наиболее часто используемый инструмент Совет 1
Совет 1


Во многих случаях клавиша Shift используется для создания объектов правильной формы или для сохранения формы во время преобразований. Например, если при масштабировании объекта вы будете удерживать эту клавишу, то будут сохранены пропорции объекта. Это относится не только к Adobe PhotoShop, но и к другим программам.
Можно изменить действие инструмента Rectangular Marquee (Прямоугольное выделение). Для этого нажмите соответствующую кнопку на панели инструментов и удерживайте ее некоторое время. На экране появится меню выбора инструментов, изображенное на Рисунок 5.2.

Меню выбора инструментов для работы

Рисунок 5.4. Меню выбора инструментов для работы с выделением произвольной формы


Нажав Кнопку инструмента Lasso (Лассо) и подержав ее нажатой некоторое время, можно вызвать меню выбора инструментов работы с выделением произвольной формы. Оно показано на Рисунок 5.4.
Инструмент Polygonal Lasso (Многоугольное лассо) предназначен для построения выделения в виде многоугольника с прямыми гранями. Углы многоугольника определяются щелчками мыши. Для замыкания контура необходимо приблизить курсор к начальной точке (при этом форма курсора изменится) и щелкнуть мышью. Если, рисуя контур, удерживать клавишу Shift, то линии будут стро иться под углами, кратными 45°.
Наиболее интересный инструмент этой группы — Magnetic Lasso (Магнитное лассо). С его помощью можно быстро выделить объект, имеющий четкий контур. Для этого достаточно щелкнуть на границе объекта и вести курсор вдоль нее. При достижении начальной точки надо еще раз щелкнуть мышью. Клавиша Alt позволяет в процессе построения выделения временно перейти в режим многоугольного лассо, а щелчок мыши при нажатой клавише Ctrl приводит к немедленному замыканию выделения. Клавиша Shift позволяет автоматически строить выделение из отрезков прямых.
Совет 3
Совет 3


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


Перемещать подобным образом фрагменты изображения можно при работе с практически всеми инструментами, имеющимися в Adobe PhotoShop. Если выделенная область отсутствует, то перемещается все изображение, находящееся на активном слое.
Клавиши Alt и Shift позволяют вычитать фрагменты из выделения или добавлять к нему новые участки. Для выполнения этой операции пользуйтесь инструментом, удерживая соответствующую клавишу нажатой. При вычитании фрагментов выделения рядом с курсором отображается знак "минус", при добавлении — "плюс". Если удерживать нажатыми Alt и Shift одновременно, то к выделенной области будет применяться операция "логическое И". Это значит, что после применения инструмента выделенной останется область, являющаяся пересечением изначально выделенного фрагмента и только что обведенного участка. Во время выполнения подобной операции рядом с курсором выводится значок "X". Все эти режимы вызываются при помощи кнопок, находящихся на панели настройки Совет 5
Совет 5


При помощи клавиатуры можно не только удалять выделение, но и вызывать его. Комбинация Ctrl+A позволяет выделить все изображение. При помощи комбинации Ctrt+Shift+O можно вызвать последнюю использовавшуюся выделенную область. В меню Select (Выделить) находятся аналогичные команды: Аll (Все), Deselect (Убрать выделение); Reselect (Восстановить выделение).
Инструменты, предназначенные для работы с выделениями, очень полезны. С помощью уже рассмотренных нами способов можно выделять объекты прямоугольной, эллиптической и более сложной формы, отделять объекты от фона (при помощи инструментов Magnetic Lasso (Магнитное лассо) или Magic Wand (Волшебная палочка)), перемещать их. Но во многих случаях их возможностей оказывается недостаточно. Тогда можно использовать более сложные средства.
Если вам требуется выделить на всем изображении однотонные пикселы, удобнее всего воспользоваться командой Select > Color Range... (Выделение > Цветовой диапазон). После ее вызова на экране появится окно управления, показанное на Рисунок 5.5.

Меню выбора инструментов используемых

Рисунок 5.2. Меню выбора инструментов, используемых для создания выделения заданной формы


Представленные в нем инструменты предназначены для создания выделения заданной формы, такой как прямоугольник, эллипс или линия.
Инструмент Elliptical Marquee (Эллиптическое выделение) подобен инструменту Rectangular Marquee (Прямоугольное выделение), но при его помощи можно выделять эллиптические области. При нажатой клавише Shift образуется выделение, имеющее форму правильного круга. Инструменты Single Row Marquee (Выделение одной строки) и Single Column Marquee (Выделение одного столбца) предназначены для выделения области в один пиксел высотой или шириной. На практике они используются редко.
Инструменты выделения можно настраивать, для этого служит панель настройки. Она изображена на Рисунок 5.3.

Окно документа до перехода в режим

Рисунок 5.6. Окно документа до перехода в режим Quick Mask (слева) и после него (справа)


Серый прямоугольник в центральной части изображения (в режиме Quick Mask (Быстрая маска)) — выделение, показанное в виде картинки. Для удобства работы изображение, определяющее выделение, отображается полупрозрачным. При этом сквозь него можно видеть изображение, содержащееся в документе. Перейдя в режим Quick Mask (Быстрая маска), вы можете редактировать "выделение" с использованием практически любых инструментов (в том числе инструментов выделения), команд и фильтров. Команды и фильтры действуют так же, как при работе с изображением в режиме Grayscale (Градации серого). Рисующие инструменты (кисть, карандаш, аэрограф и т. д.) позволяют добавлять к выделенной области новые участки или, наоборот, уменьшать размеры выделенной области. Для того чтобы расширить выделенную цветом зону, рисуйте черным цветом, для того чтобы ее уменьшить — белым. Рисование различными оттенками серого позволяет задавать частичное выделение пикселов.
Примечание 3
Примечание 3

Режим Quick Mask (Быстрая маска) является, по сути, аналогом режима Grayscale (Градации серого). Поэтому в нем для рисования доступны только цвета, являющиеся оттенками серого цвета.
По умолчанию в режиме Quick Mask (Быстрая маска) выделение закрашивается красным цветом. Максимальная непрозрачность пикселов, отображающих выделение, устанавливается равной 50%. Вы можете изменить эти параметры. Для этого дважды щелкните мышью на кнопке входа в режим Quick Mask (Быстрая маска) или выхода из него. При этом на экране появится окно, показанное на Рисунок 5.7.

Окно документа до (слева) и после

Рисунок 5.8. Окно документа до (слева) и после (справа) выхода из режима QUICK Mask


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

Окно команды Load Selection ...

Рисунок 5.14. Окно команды Load Selection...

New Selection (Новое выделение) — перед загрузкой выделения имеющиеся выделенные области очищаются. Этот переключатель установлен по умолчанию;

Add to Selection (Добавить к выделению) — загружаемое выделение добавляется к уже существующему;

Subtract from Selection (Вычесть из выделения) — загружаемое выделение вычитается из уже выделенной области;

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

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

Если текущий слой имеет маску (Layer mask), то вы можете при помощи команды Load Selection... (Загрузить выделение) преобразовать ее в выделенную область. Для этого из списка Channel (Канал) выберите пункт Layer N Mask (Маска слоя N).
После того, как вы подготовите выделенную область нужной формы, можно использовать ее для ограничения зоны действия инструментов, фильтров и команд. Это наиболее часто встречающееся использование выделения. Еще одна область применения выделенных областей — отделение фрагментов изображения от окружающего фона. Подобные действия часто требуется выполнять при подготовке коллажей, подборок фотографий и других подобных операциях. Например, вы можете выделить фрагмент изображения, отделить его от фона и перенести на прозрачный слой. После этого вам будет легко помещать этот объект на любой фон и в любое окружение.
На Рисунок 5.15 приведен пример такой операции.
В верхнем левом углу (Рисунок 5.15) показано исходное изображение. Выделим мяч. Для этого прежде всего надо построить выделенную область, повторяющую контур выбранного объекта. Воспользуемся инструментом Magic Wand (Волшебная палочка). Получаемое при этом выделение может иметь искажения и отклонения по краям. Исправить их можно при помощи режима Quick Mask (Быстрая маска). На Рисунок 5.15 (вверху справа) показано построенное выделение. Выделив объект, можно инвертировать выделение (при помощи команды Select > Inverse (Выделить > Инвертировать)) и, нажав клавишу Delete, удалить окружающий фон. Для удобства дальнейших операций перед удалением фона лучше поместить изображение на новый слой, например, скопировав слой текущий. Выделенный объект показан на Рисунок 5.15, внизу слева. Полученный в результате таких операций объект следует доработать. Дело в том, что на его краях остаются пикселы, частично окрашенные в цвет фона. При помещении такого объекта на фоне, имеющем оттенок, отличный от фона исходного изображения, вокруг объекта возникает ореол темных или светлых пикселов. Исправить этот недостаток можно при помощи команды Layer > Matting > Defringe... (Слой > Матирование > Обрезка краев). Она позволяет заменить расположенные на краях изображения пикселы, отличающиеся по цвету от основного цвета объекта, на пикселы, близкие к основному цвету. Вызвав команду, введите в появившемся на экране окне радиус зоны обработки. После обработки можно поместить объект на новый фон и применить к нему какие-либо эффекты. На Рисунок 5.15 внизу справа показан результат обработки изображения персика.

Окно команды Save Selection ...

Рисунок 5.12. Окно команды Save Selection...


Из списка Document (Документ) выберите имя файла (из числа открытых в данный момент), в котором будет сохранено выделение. Если вы выберите пункт New (Новый), то Photoshop создаст новый документ, в котором выделение будет сохранено в виде альфа-канала. Причем этот канал будет единственным. Из списка Channel (Канал) можно выбрать, в каком канале будет сохранено выделение. По умолчанию выбран пункт New (Новый) — выделение сохраняется в новом альфа-канале. При этом в поле Name (Имя) можно ввести название канала. Образованные таким образом каналы доступны при помощи палитры Channels (Каналы). Выбрав на ней нужный канал, вы можете редактировать его как обычное изображение. При этом будет изменено выделение, которое сохранено в канале. Вы также можете сохранить выделение в уже существующем канале (это возможно, если вы уже сохраняли выделенные области в этом документе). При этом становятся доступными переключатели, расположенные в нижней части окна:

Replace Channel (Заменить канал) — сохраняемое выделение замещает имеющийся канал. При сохранении выделения в новом канале этот переключатель имеет имя New Channel (Новый канал);

Add to Channel (Добавить к каналу) — выделение добавляется к выбранному каналу;

Subtract from Channel (Вычесть из канала) — выделение вычитается из канала;

Intersect with Channel (Пересечение с каналом) — в канале будет сохранена область, принадлежащая одновременно и новому, и уже сохраняемому выделениям.

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

Если вы не введете имя нового канала, то он получит имя вида AlphaN, где N — номер канала.
Список Channel (Канал), кроме уже перечисленных пунктов, содержит пункт Layer N Mask (Маска слоя N). При выборе этого пункта выделение будет сохранено в виде маски слоя номер N (невыделенные области будут скрыты). На Рисунок 5.13 показана панель Layers (Слои) с выделенной областью, сохраненной в виде маски слоя 1.

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

Рисунок 5.5. Окно настройки команды Color Range...


В левой части окна находится уменьшенная копия изображения, отображающая само изображение или его выделенную область. Выделение производится путем задания образца цвета (при помощи "пипеток") и выбора разброса цвета выделяемых пикселов (при помощи ползунка Fussiness (Разброс), расположенного над копией изображения). При разбросе равном 0, выделяются только пикселы выбранного цвета. Если разброс равен 200, то выделенным окажется все изображение. При промежуточных значениях пикселы, имеющие выбранный цвет, выделяются полностью. Пикселы, цвет которых несколько отличается от выбранного, выделяются частично. Это значит, что все команды, фильтры и эффекты будут применяться к ним в зависимости от степени выделения.
Ниже копии изображения находятся два переключателя — Selection (Выделение) и Image (Изображение). Они указывают программе, что отображать в окне настройки команды — выделенную область изображения или само изображение.
В правой части окна находятся кнопки для вызова "пипеток" Совет 6
Совет 6


Щелкнув мышью на кнопке выбранной в данный момент "пипетки", вы можете вызвать на панель настроек список Sample Size (Размер образца). Он позволяет выбрать, будет ли образец цвета браться из указанной "пипеткой" точки, или же будет взят оттенок, усредненный по некоторой площади (3X3 или 5X5 пикселов).
Строить выделение можно не только на основе выбранных образцов цвета, но и при помощи предустановленных значений. Для того чтобы воспользоваться ими, выберите нужный пункт из разворачивающегося списка Select (Выделение). Пункт Selected Colors (Выбранные цвета) соответствует режиму выбора цветов, остальные пункты определяют некоторый цветовой диапазон. В зависимости от цветового режима, в котором находится изображение, набор доступных вариантов выделения может изменяться. При выборе фиксированного диапазона из списка ползунок Fussiness (Разброс) и "пипетки" становятся недоступными.
Процесс построения выделенной области можно наблюдать при помощи уменьшенного изображения в окне настройки (при установленном переключателе Selection (Выделение)). Из списка Selection Preview (Просмотр выделения) режим отображения будущего выделения выбирается непосредственно в окне документа. Это оказывается полезным при создании выделений сложной формы, но в большинстве случаев можно обойтись копией изображения, находящейся в окне команды. Доступны следующие режимы просмотра:

None (Нет) — выделение в окне документа не отображается. Этот режим используется по умолчанию;

Grayscale (Оттенки серого) — в окне документа отображается монохромный альфа-канал, содержащий выделение. Черные участки соответствуют выделенным пикселам, белые — невыделенным, оттенки серого — выделенным частично;

Black Mate (Матирование черным) — границы выделения обводятся черным цветом;

White Mate (Матирование белым) — границы выделенной области обводятся белым;

Quick Mask (Быстрая маска) — выделение выводится в режиме быстрого редактирования маски (выделенной области изображения).

СОВЕТ. Установив флажок Invert (Инвертировать), можно выделить пикселы, не попадающие в заданный диапазон оттенков.
После того, как вы завершите подбор оптимального цветового диапазона, нажмите кнопку ОК для применения команды. Отменить операцию можно, нажав кнопку Cancel (Отмена). Если вы нажмете и будете удерживать клавишу Alt, то кнопка Cancel (Отмена) сменится кнопкой Reset (Сброс). Нажав ее, можно вернуть настройки команды в исходное состояние.
Во время описания возможных способов предварительного просмотра выделенной области при использовании команды Color Range... (Цветовой диапазон...) был упомянут режим Quick Mask (Быстрая маска). С его помощью можно редактировать границы выделенной области так, как будто это — простое изображение. При этом используются все фильтры, команды и инструменты, которые применяются при работе с монохромными изображениями. Это предоставляет обширные возможности для выделения объектов сложной формы, а также для создания специальных эффектов.
Примечание 2
Примечание 2

Термин "маска" в данном случае обозначает пикселы, не относящиеся к выделенной области (спрятанные, замаскированные).
Сама возможность подобного "обращения" с выделенными пикселами определяется тем, что степень "выделенности" задается цветом пикселов в канале выделения — альфа-канале. Если пиксел в альфа-канале черный, то соответствующий пиксел изображения выделен, а если пиксел в альфа-канале белый, то соответствующий пиксел изображения не выделен. Промежуточные оттенки в альфа-канале (оттенки серого) определяют частичное выделение пиксела (эффект от всех команд, инструментов и фильтров проявляется для такого пиксела частично). Все рассмотренные ранее средства выделения областей изображения показывали пользователю лишь границу выбранного участка, скрывая альфа-канал. В режиме Quick Mask (Быстрая маска) граница выделения не отображается, зато альфа-канал выводится непосредственно в окне документа.
Так как альфа-канал может содержать оттенки, промежуточные между черным и белым цветами, то возникает проблема отображения границы выделенной области при работе в нормальном режиме. Она решена очень просто — привычная мерцающая граница проводится там, где яркость пикселов в альфа-канале переходит через значение 50%. То есть внутри границы оказываются пикселы, выделенные более чем на 50%. Если таких пикселов нет (выделение неполное и очень слабое), то граница выделения не отображается. При возникновении подобной ситуации на экран выводится предупреждение о том, что граница выделения не видна.
ВНИМАНИЕ. Если граница выделения не видна на экране, но само выделение присутствует, инст рументы, команды и фильтры будут применяться к пикселам изображения в соответствии со степенью "выделенности". Если такое выделение останется в документе после выполнения некоторых операций, то выполнение дальнейших действий может оказаться невозможным. Поэтому после использования выделения его следует снять (удалить).
Теперь рассмотрим работу в режиме быстрого редактирования выделения (Quick Mask). Для его активизации следует нажать кнопку, расположенную в нижней части панели инструментов

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

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


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


Сочетание клавиш Ctrl+Z позволяет отменить последнее действие или вернуть послед нее отмененное действие.
После того, как вы выделите границу объекта, залейте "внутренность" объекта при помощи инструмента Fill (Заливка)

Окно настройки параметров режима Quick Mask

Рисунок 5.7. Окно настройки параметров режима Quick Mask


В зоне Color Indicates (Цвет показывает) можно установить, что будет показывать цветная заливка. При установке переключателя Masked Areas (Маска) цветом будут выделяться области, не вошедшие в выделение. Переключатель Selected Areas (Выделение) позволяет "покрасить" выделенный участок. Для практического применения этот режим более удобен, чем предыдущий. На Рисунок 5.6 показан пример работы с подкраской выделенной области.
Примечание 4
Примечание 4

Вид кнопки, служащей для перехода в режим Quick Mask (Быстрая маска), меняется в зависимости от установки этих переключателей. При подкраске замаскированных областей на ней отображается темный прямоугольник с белым кругом, а при подкраске выделенной области — белый прямоугольник и темный круг.
Щелкнув мышью на цветном квадрате, расположенном в зоне Color (Цвет), вы можете определить цвет, используемый для подкраски выделенной области. Это бывает полезным в тех случаях, когда используемый по умолчанию цвет мало выделяется на фоне изображения. Тут же, в поле Opacity (Непрозрачность), можно задать максимальную непрозрачность окраски выделенных (или замаскированных) областей. Максимальную непрозрачность имеют области, закрашиваемые в режиме Quick Mask (Быстрая маска) черным цветом. Места, закрашиваемые белым, полностью прозрачны.
После завершения "быстрого редактирования" выделенной области вы можете вернуться в нормальный режим работы программы. Для этого нажмите

Пример создания выделения сложной

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


Для того чтобы образовать рисунок с плавным изменением цвета, прежде всего зададим выделенную область нужной формы. Сделаем это в режиме Quick Mask (Быстрая маска) при помощи инструмента Gradient (Градиент). Результат этого действия показан на Рисунок 5.9, слева. После выхода из режима Quick Mask (Быстрая маска) будут образованы контуры этой области (см. Рисунок 5.9, в центре). Закрасим область при помощи инструмента Paintbrush (Кисть). Результат можно видеть на Рисунок 5.9, справа. Разумеется, это простейший пример выполнения действия такого рода. Выделение может быть "нарисовано" при помощи любого доступного средства. На заключительном этапе также может использоваться любой инструмент, команда или фильтр.
Совет 7
Совет 7

Подобные средства используются, например, для удаления некоторых частей изображения при создании различного рода коллажей. Определив выделенную область, нажмите клавишу Delete для ее очистки.
После того, как границы выделенной области определены, вы можете изменять их, используя встроенные в Adobe PhotoShop средства. Команды, которые понадобятся вам для этого, находятся в меню Select (Выделить).
Часто возникает необходимость "вывернуть" выделение на изнанку, то есть добиться того, чтобы выделенные области стали невыделенными, а невыделенные — выделенными. В этом случае можно использовать команду Inverse (Инвертировать).
Примечание 5
Примечание 5

Возможны и более сложные варианты. Например, можно перейти в режим Quick Mask (Быстрая маска), применить команду Image > Adjustments > Invert (Изображение > Настройки > Инвертировать), а затем вернуться в нормальный режим.
Если вам надо сгладить границы выделения, сделать их менее резкими, воспользуйтесь командой Feather... (Размытие...). После ее вызова на экране появится окно, в котором следует ввести радиус размытия краев выделенной области. Эта операция может оказаться полезной, например, для смягчения перехода от зоны действия инструмента или фильтра к незатронутой области. Можно применить эту команду для получения фрагментов изображения с плавным изменением прозрачности по краям. Выделив фрагмент и сгладив границы выделения, надо скопировать содержимое выделения в буфер обмена или инвертировать выделение и удалить все, кроме нужного объекта.
Команды Grow (Расширить) и Similar (Сходные пикселы) дают возможность расширить выделение на другие пикселы изображения, ориентируясь на их цвет. Команда Grow (Расширить) позволяет распространить выделение на пикселы, прилегающие к уже выделенным и имеющие сходный оттенок. Это похоже на инструмент Magic Wand (Волшебная палочка). Если вам необходимо распространить выделение на все пикселы изображения, имеющие оттенки, сходные с оттенками выделенных пикселов, используйте команду Similar (Сходные пикселы). Ее действие сходно с действием команды Color Range (Цветовой диапазон), но за основу для построения выделения берутся оттенки пикселов, уже содержащихся в выделенной области.
После того, как выделение создано, его геометрические размеры можно изменять вручную. Для этого используется команда Transform Selection (Трансформировать выделение). Она позволяет изменять высоту и ширину выделения, поворачивать его, наклонять и искажать. Эти операции можно выполнять двумя способами — в окне документа при помощи мыши или при помощи панели настроек. Первый способ обеспечивает большую наглядность и удобен для визуального подбора пропорций и размеров. Второй способ основан на вводе параметров в цифровом виде, что удобно для многократного повторения однотипных операций, а также для точной установки размеров выделенной области.
Сначала рассмотрим изменение параметров при помощи мыши. Во время трансформирования выделения в окне документа отображается специальная рамка. На ее границах и углах располагаются маркеры. Перемещение их мышью ведет к изменению формы и пропорции выделенной области. Вид окна документа во время выполнения этой операции показан на Рисунок 5.10.

Пример выделения объекта из окружающего фона

Рисунок 5.15. Пример выделения объекта из окружающего фона


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

Кроме команды Defringe... (Обрезать края...) в меню Layer > Matting (Слой > Матирование) содержатся команды Remove White Mate (Удалить белую кайму) и Remove Black Mate (Удалить черную кайму). С их помощью можно удалить светлый или темный ореол на границе объекта, находящегося на прозрачном слое.
Adobe PhotoShop содержит средство, позволяющее выполнять выделение объектов из изображения в полуавтоматическом режиме. Это команда Filter > Extract... (Фильтр > Выделить...) С ее помощью вы можете получить отделенный от фона объект без необходимости вручную строить выделение.
После вызова этой команды на экране появится окно настройки. Оно показано на Рисунок 5.16.

Трансформирование выделенной области

Рисунок 5.10. Трансформирование выделенной области


При наведении курсора мыши на маркеры

Вид панели настройки при работе

Рисунок 5.3. Вид панели настройки при работе с инструментом Rectangular Marquee


В поле Feather (Размытие) указывается, на сколько пикселов будет "размыто" выделение. Если это значение отлично от 0, то границы выделенной области будут нечеткими. При установленном флажке Anti-aliased (Сглаживание) скругленные границы выделения сглаживаются. Это делается для устранения "зазубрин". Из разворачивающегося списка Style (Стиль) вы можете выбрать режим построения выделения. Доступны три варианта:

Normal (Нормальный) — выделение полностью контролируется движением мыши;

Constrained Aspect Ratio (Фиксированное соотношение сторон) — независимо от движения мыши поддерживается заданное соотношение размеров выделения по горизонтали и по вертикали. Числа, определяющие ширину и высоту выделенной области, вводятся в поля Width (Ширина) и Height (Высота);

Fixed Size (Фиксированный размер) — выделенная область будет иметь заданные в полях Width (Ширина) и Height (Высота) размеры.

Стили работают при работе с прямоугольным и эллиптическим выделением.
Совет 2
Совет 2

Стиль Constrained Aspect Ratio (Фиксированное соотношение сторон) оченьудобен, если требуется вырезать множество фрагментов одного размера из различных по размерам исходных изображений. В этом случае выделенные фрагменты легко масштабировать, приводя к нужным габаритам.
Еще одна группа инструментов предназначена для создания выделения про извольной формы. Главный из них (хотя и не самый нужный)

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

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

Очень часто при работе с графикой возникает необходимость выделить какую-либо часть изображения. Это может быть нужно для выборочного применения команды или фильтра, перемещения или удаления объектов, рисования в ограниченной области и многого другого. В этом уроке мы рассмотрим способы создания выделений различной формы, а также методы выделения фрагментов изображений.
Прежде всего следует сказать несколько слов о том, что представляет собой "выделение". Под этим термином понимают область изображения, отделенную от остальной картинки специальными методами. Выделенная область остается частью изображения (до оробой команды она не выносится на отдельный слой или в отдельный файл). Любые действия, обычно выполняемые над всем изображением, при наличии выделения выполняются только над пикселами, находящимися внутри него. В окне документа граница выделения отображается в виде переливающейся пунктирной линии.
В Adobe PhotoShop выделения задаются с помощью так называемых альфа-каналов. Альфа-канал — это самостоятельное монохромное изображение, содержащее до 256 градаций яркости и имеющее размер равный размеру изображения. Таким образом, каждой точке обычной картинки при создании выделенной области ставится в соответствие точка в альфа-канале. Цвет этой точки определяет степень "выделенности" точки обычного изображения. Черный обозначает полное выделение (100%), белый — отсутствие выделения (0%), оттенки серого — промежуточные степени. Например, если точка в альфа-канале имеет цвет 50% черного, то точка на изображении будет выделена на 50%. Это значит, что все применяемые к ней операции будут ослаблены на 50%. К точкам, выделенным на 100%, все действия применяются в полной мере. К невыделенным точкам (белый цвет в альфа-канале) команды и эффекты не применяются. Такое представление о выделении участков изображения позволяет редактировать выделение как обычное изображение. При этом можно использовать практически все инструменты, фильтры и команды. Работа в этом режиме будет рассмотрена несколько позже. Начнем рассмотрение работы с выделенными областями изображения с самых простых приемов.

После того, как вы сохраните

Рисунок 5.13. Выделенная область, сохраненная в виде маски слоя 1


После того, как вы сохраните выделение в файле, его можно будет в любой момент загрузить и использовать в работе. Для этого вызовите команду Select > Load Selection... (Выделить > Загрузить выделение...). При этом на экране появится окно настройки, показанное на Рисунок 5.14.

Из списка Channel (Канал) выберите альфа-канал, содержащий нужную выделенную область. Если вы установите флажок Invert (Инвертировать), то выделение будет загружено в инвертированном (негативном) виде. При работе на любом слое, кроме фона, в списке каналов присутствует пункт вида Layer N Transparency (Прозрачность слоя N). Выбрав этот пункт, вы можете выделить непрозрачные области слоя.

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

Photoshop 7 и web дизайн

Дизайнеры набираются опыта меняется

Рисунок 6.4. Дизайнеры набираются опыта, меняется и сам подход к оформлению страницы — внешний вид ставят на первое место


Готовя оформление сайта, нельзя забывать и о его функциональности. Так как сайт является "лицом" системы, обращенным к пользователю, разработчикам приходится кроме эстетики задумываться еще и об удобстве работы. С одной стороны, сайт должен привлечь пользователя, не дать ему заскучать и помочь найти необходимую информацию. С другой стороны, для организации взаимодействия с пользователем необходимо получить от него требуемые сведения (в простейшем случае пользователю предлагается щелкнуть по одной из расположенных на странице ссылок). Дизайн сайта должен указывать пользователю путь к нужному разделу, а не служить своеобразным лабиринтом, сквозь который надо "продираться", тратя на это лишнее время.
В большинстве случаев графические элементы строятся на основе трех компонентов: готовых фотографий, текста и графики, нарисованной самим дизайнером. Каждая из этих частей позволяет наполнить элемент страницы определенным содержанием.
Использование фотоизображений помогает разнообразить внешний вид сайта, насыщает его мелкими деталями, делает страницы более интересными и приятными для глаз. Реалистичность, вносимая фотоизображениями в оформление сайта, незаметно для человека привлекает внимание, заставляет определять, что именно изображено на картинке, позволяет отвлечься от работы и немного отдохнуть. Работая с таким сайтом, пользователь не испытывает скуки. Однако следует помнить, что загружать людей информацией можно до некоторого предела. Если страница содержит информацию, подразумевающую обдумывание (деловые или научные документы, числовые данные), то графика может отрицательно сказаться на работоспособности пользователя.
Фотографии могут использоваться в оформлении web-сайтов несколькими способами. Самый простой и естественный метод — непосредственное размещение фотографии на странице. Этот способ чаще всего используется для создания виртуальных выставок и фотогалерей. Если вы хотите разместить на своей домашней страничке небольшой фотоальбом, то, скорее всего, вам следует просто поместить изображения в тексте. Перед размещением изображений на сервере можно провести необходимую обработку (коррекцию). При использовании такого подхода возникает проблема роста объема загружаемой информации. Дело в том, что фотографии, особенно представленные в хорошем качестве, обычно имеют большой объем. Использование сжатых форматов (таких как JPEG) позволяет уменьшить объем файлов, но всегда приходится выбирать между дополнительным объемом файла или снижением качества при сжатии.
ВНИМАНИЕ. Для хранения и представления на сайте фотографий и иной многоцветной графики в большинстве случаев следует использовать формат JPEG. Для таких данных он позволяет достичь значительно большего сжатия и лучшего качества, чем GIF или PNG.
Для решения этой проблемы используется простой прием — в тексте страницы размещаются уменьшенные копии изображений (в англоязычных книгах и программах их часто называют thumbnails — от слова thumbnail — ноготь большого пальца). Эти изображения используются в качестве ссылок на изображения полного размера, сохраненные с хорошим качеством. Уменьшенные копии можно сохранять с высокими степенями сжатия, так как от них чаще всего не требуется высокого качества изображения. Они призваны дать пользователю только представление об основном изображении. Так как сама фотография может иметь значительный размер, стоит указывать рядом со ссылками размер основных изображений. Это позволит пользователю оценить приблизительное время загрузки файла на его компьютер. Пример страницы, выполненной с использованием уменьшенных копий изображений, приведен на Рисунок 6.5.

Для ускорения загрузки фотогалерей

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


Часто фотографии используются не самостоятельно, а в виде коллажей и композиций. Такая композиция может использоваться, например, в качестве заставок сайтов, размещаемых на начальных страницах. Для изготовления композиции могут использоваться как фотоизображения, так и отсканированные или нарисованные самим дизайнером фрагменты. Типичный пример такого использования фотографий приведен на Рисунок 6.6.
В данном случае на заставке сайта используются сканированные (изображение художника) и нарисованные (логотип сайта, фон) изображения. При подготовке таких композиций часто используются текстовые элементы, выполненные с использованием разнообразных шрифтов. На Рисунок 6.6 используется текстовый логотип сайта и нарисованная надпись, поясняющая направление деятельности.
Еще одно направление использования фотографий — изготовление миниатюрных элементов, например, маркеров списков и небольших заголовков. Однако при уменьшении предметы, изображенные на фотографии, могут стать неузнаваемыми. Поэтому изображения с множеством мелких деталей в таких целях использовать практически бесполезно. Изображенный на фотографии объект должен быть крупным и контрастным.
Подготовка элементов на основе фотоизображений обычно заключается в открытии нужных исходных файлов, копировании из них нужных фрагментов изображения в виде слоев в один файл и в удалении ненужных частей изображений. Выделение нужных и ненужных частей производится при помощи описанных в прошлом уроке средств выделения. Там же была описана процедура извлечения отдельных фрагментов изображения. Придание фрагментам нужной формы производится либо при помощи инструментов (например, при помощи инструмента Eraser (Стирательная резинка)), либо при помощи выделений. Выделенные фрагменты можно удалять (выделяя их и нажимая клавишу Delete) или трансформировать. Трансформирование изображения может быть выполнено при помощи команды Edit > Free Transform (Правка > Свободное трансформирование). Она позволяет изменять форму изображения и его пропорции. Из меню Edit > Transform... (Правка > Трансформирование...) можно выбрать команду для исполнения какого-либо преобразования с точным заданием параметров. Возможно простое масштабирование без искажений (это, наверное, наиболее полезная функция этой команды). Действие команды Edit > Free Transform (Правка > Свободное трансформирование) аналогично команде Select > Transform Selection (Выделение > Трансформировать выделение). Только трансформируется не само выделение, а заключенное в нем изображение. Если выделение отсутствует, то трансформируется активный в настоящий момент слой (если этот слой не является фоновым). В подменю Edit > Transform (Правка > Трансформировать) содержатся команды, позволяющие трансформировать выделенный объект путем ввода числовых значений. Это удобно в тех случаях, когда операция должна быть выполнена очень точно или когда одну операцию требуется повторить несколько раз. Команда Edit > Transform > Again... (Правка > Трансформировать > Повторить...) позволяет повторить последнюю выполненную операцию трансформирования.

Эффекты отображаются на палитре Layers

Рисунок 6.18. Эффекты отображаются на палитре Layers


Эффекты отображаются в виде слоев, связанных со слоем, содержащим изображение. Щелчок мышью на стрелке, изображенной на символе Совет 4
Совет 4


Щелкнув мышью на слое, отображающем эффект, или на символе "f", находящемся на значке слоя, вы можете вызвать на экран окно настройки слоевых эффектов. Еще один способ получить доступ к эффектам — вызвать щелчком правой кнопки мыши контекстное меню символа "f". Аналогичные команды находятся в меню Layer > Layer Style... (Слой > Слоевые эффекты).
Применив к слою эффект, вы можете изменять его, а также сохранять, копировать эффекты из слоя в слой или удалять их. Процедура изменения эффекта ничем не отличается от первоначальной настройки. Если в окне настройки вы будете удерживать нажатой клавишу Alt, то кнопка Cancel (Отмена) будет заменена кнопкой Reset (Сброс), которая позволит восстановить значения параметров, принятые по умолчанию. Сохранить набор эффектов можно при помощи кнопки New Style (Новый стиль).
В контекстном меню символа эффектов или любого из слоев-эффектов (Рисунок 6.19) находятся команды управления слоями.

Контекстное меню слояэффекта

Рисунок 6.19. Контекстное меню слоя-эффекта


Из этого меню вызывается окно управления эффектами. Кроме того, можно копировать эффекты между слоями. Для этого служат команды Copy Layer Style (Копировать стиль слоя) и Paste Layer Effects (Вставить стиль слоя). Команда Paste Layer Style to Linked (Вставить стиль в связанные слои) позволяет вставить заранее скопированный стиль в группу связанных слоев.
Примечание 9
Примечание 9

Связать слои можно, щелкая мышью на квадратах, расположенных на палитре Layers (Слои) рядом с символом отображения слоя (глазом).
При помощи команды Clear Layer Style (Очистить стиль слоя) вы можете убрать все слоевые эффекты.
В контекстном меню слоя-эффекта есть еще несколько полезных команд. С помощью команды Create Layer (Создать слой) можно преобразовать слой-эффект в обычный слой. Команды Hide All Effects (Скрыть все эффекты) и Show All Effects (Показать все эффекты) позволяют убрать эффекты с экрана и вернуть их назад. Настройки эффектов при этом не изменяются. Вы можете управлять общими настройками освещения для эффектов с помощью пункта Global Light (Общее освещение). Последняя команда этого меню — Scale Effects (Масштабировать эффекты). Она позволяет изменять размеры теней и других эффектов без рабо ты с окном настроек эффектов. Достаточно указать масштаб в специальном окне. Последнее, о чем стоит сказать, рассматривая подготовку графических элементов страниц, — особенности применения эффектов и фильтров к небольшим объектам. Так как речь идет о растровой графике, возможности применения к той или иной группе пикселов (графическому объекту) фильтра ограничивается размерами этой группы. В самом деле, если объект маленький, то результат применения фильтра может "не поместиться" в его пределах. Возможен вариант, при котором фильтр честно выполнит свою работу, но из-за небольших габаритов объекта результат просто не будет заметен. Это вызвано тем, что многие фильтры при работе учитывают размеры изображения и в соответствии с ними уменьшают или увеличивают силу своего воздействия.
Подобных проблем не возникает, если изображение имеет большой размер. Тогда фильтры могут "развернуться" в полную силу и реализовать все свои возможности. Это подсказывает способ изготовления маленьких объектов — надо выполнить его намного превышающим заданные габариты, а затем уменьшить. Например, если вам нужно нарисовать шарик размером 10x10 пикселов, то можно выделить круг размером 100x100 пикселов (при помощи инструмента Elliptical Marquee (Эллиптическое выделение)), залить его (или закрасить кисточкой) нужным цветом и применить нужный фильтр или эффект. Шарики можно получить, например, при помощи фильтра PhotoButton или PhotoGroove из набора фильтров Extensis PhotoTools. После этого останется только уменьшить полученное изображение до нужных габаритов.
Уменьшать изображение можно при помощи команд Edit > Free Transform (Правка > Свободное трансформирование), Edit > Transform > Scale (Правка > Трансформировать > Масштаб) или Image > Image Size (Изображение > Размер изображения). Работа с первой из этих трех команд уже была рассмотрена нами. Вторая команда позволяет производить масштабирование выделенной области, вводя значения масштаба по горизонтали и по вертикали в поля, расположенные на панели настройки (вы можете использовать эту панель и во время работы с командой Edit > Free Transform (Правка > Свободное трансформирование)). Последняя из этих команд предназначена для изменения размеров не выделенной области, а всего изображения в целом. При этом вы можете изменять не только размеры изображения в выбранных единицах (пикселах или процентах от исходных размеров). Также можно задать размеры, с которыми изображение будет выведено на печать, и разрешение, с которым печать будет произведена.
Примечание 10
Примечание 10

При подготовке изображений для оформления сайтов лучше всего использовать разрешение 72 dpi (точек на дюйм). Это соответствует разрешающей способности большинства мониторов. В качестве единиц измерения удобнее всего использовать пикселы. Установить их в качестве единицы измерения, используемой по умолчанию, можно при помощи команды Edit > Preferences t Units & Rulers (Правка > Предпочтения > Единицы измерения и линейки).
После вызова команды Image > Image Size (Изображение > Размер изображения) на экране появится окно, изображенное на Рисунок 6.20.

Меню панели Character

Рисунок 6.11. Меню панели Character


Панель Paragraph (Параграф) содержит элементы управления, позволяющие задать параметры параграфов текста. Вы можете изменить ширину полей и отступа красной строки, а также определить ширину отступов до и после абзаца. Все эти значения задаются при помощи полей ввода. Расположенные на панели ввода кнопки позволяют задать режим выравнивания не только по краю или по центру, но и по ширине. Причем можно определить, как будет выравниваться остаток неполной строки — по центру, по краю или же программа будет избегать таких ситуаций. Флажок Hyphenate (Перенос) позволяет включить автоматическую расстановку переносов. Работает этот режим только для английского языка.
Все эти возможности управления параграфами применяются в основном в полиграфии для подготовки макетов различных рекламных проспектов, буклетов, плакатов и другой подобной продукции. При подготовке графического оформления web-страниц обычно приходится иметь дело с однострочными надписями. Многострочные надписи в большинстве случаев определяются не графикой, а текстом страницы.
Наверное, вы уже обратили внимание на то, что некоторые операции должны выполняться над выделенными участками текста. Выделение производится при помощи мыши. Выделенные участки текста отображаются на затемненном фоне. Цвет текста инвертируется. В некоторых случаях, например при подборе цвета, это может быть неудобным. В таких случаях вы можете спрятать выделение. Для этого нажмите клавиши Ctrl+H. Повторное нажатие позволяет вернуть выделение на экран.
После того, как вы закончите редактирование текста, нажмите кнопку с галочкой

На сайтах часто можно встретить

Рисунок 6.6. На сайтах часто можно встретить композиции и коллажи из разнородных изображений


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

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

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

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

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

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

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

Окно настройки команды Canvas Size

Рисунок 6.21. Окно настройки команды Canvas Size


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

Изображение может существовать и за пределами видимой части документа.
Под полями для ввода размеров холста находятся девять квадратов, называемых Anchor (Якорь). Один из них ("вдавленный") отображает расположение текущего изображения на будущем холсте. Стрелки на квадратах указывают направления изменения размеров холста. Щелкая на этих квадратах мышью, вы можете задать, в какую сторону будет происходить изменение габаритов изображения. Если "вдавленный" квадрат находится на краю, то его сторона, обращенная наружу (а также соответствующая сторона изображения) не будет подвергнута изменениям. Холст будет обрезан или добавлен к противоположной грани.
Если вы установите флажок Relative (Относительно), то в полях ввода можно будет указывать не значения соответствующих размеров холста, а их приращения (положительные или отрицательные). Это позволяет быстро изменить размер изображения на заданную величину.
Хотя при помощи команды Canvas Size (Размер холста) можно уменьшить размер места отводимого для изображения, использовать ее в этом качестве не очень удобно. В тех случаях, когда требуется обрезать часть изображения, гораздо проще и быстрее воспользоваться командой Image > Ctop (Изображение > Обрезать). Действие этой команды заключается в том, что размер холста уменьшается до размеров выделенной прямоугольной области. Части изображения, оставшиеся за пределами этой области, отбрасываются.
ВНИМАНИЕ. Перед вызовом команды Crop (Обрезать) подготовьте выделенную область. Она может располагаться в любой части изображения и иметь произвольную форму. Если выделение отсутствует, то команда Crop (Обрезать) недоступна. Выделенные области непрямоугольной формы обрезаются до прямоугольника, имеющего высоту и ширину, равные максимальным габаритам области.
Совет 5
Совет 5

Если вам нужно отбросить небольшую полоску изображения у одного из краев, выделите ее, вызовите команду Select > Inverse (Выделение > Инвертировать), а затем команду Image > Crop (Изображение > Обрезать).
Итак, мы изучили основные вопросы подготовки графических элементов web-страниц и применение для этих целей встроенных средств Adobe PhotoShop. Теперь можно перейти к рассмотрению процесса "сборки" макета сайта из подготовленных "кирпичиков" — фотографий, надписей, маркеров и других элементов.

Окно настройки команды Image Size

Рисунок 6.20. Окно настройки команды Image Size


В зоне Pixel Dimensions (Размеры в пикселах) отображаются сведения о размерах изображения в пикселах. В полях Width (Ширина) и Height (Высота) показаны текущие значения высоты и ширины изображения. Вы можете изменять их, тем самым уменьшая или увеличивая рисунок. Из расположенных рядом с полями списков выбирается режим задания размеров — непосредственно в пикселах или в процентах от исходных значений. В заголовке зоны выводится размер изображения в килобайтах. При изменении размеров выводится два значения — исходное и текущее. Находящийся в нижней части окна флажок Constrain Proportions (Сохранить пропорции) позволяет сохранить соотношение сторон изображения неизменным. Если он установлен, то при изменении одного из размеров другой изменяется автоматически. При этом рядом с полями, отображающими размеры документа, выводятся символы в виде звеньев цепи (Рисунок 6.20).
В зоне Document Size (Размер документа) можно определить размер документа при выводе на печать. В полях Width (Ширина) и Height (Высота) находятся значения ширины и высоты изображения, которое будет выведено на принтер или другое печатающее устройство. Из расположенных рядом списков вы можете выбрать единицы измерения, в которых эти значения будут представлены. Ниже находится поле Resolution (Разрешение). Оно содержит значение разрешающей способности, которое будет затребовано от печатающего устройства. Из списка, расположенного рядом с полем, выбираются единицы измерения разрешения — пикселы на дюйм (pixels/inch) или пикселы на сантиметр (pixels/cm). При изменении значения разрешающей способности размеры изображения в пикселах будут автоматически увеличены для соблюдения заданных размеров отпечатанного изображения, и, наоборот, если вы измените размеры отпечатанного изображения, то размеры в пикселах будут изменены для сохранения заданной разрешающей способности.
В нижней части окна находится флажок Resample Image (Пересчитать изображение). Если он установлен, то размеры изображения изменяются для поддержания заданной разрешающей способности или размера отпечатанного изображения. Рядом с флажком находится список для выбора типа интерполяции, которая будет производиться над изображением при увеличении. Методы Bilinear (Билинейный) и Bicubic (Бикубический) позволяют увеличивать изображение, сохраняя его границы сглаженными (несмотря на использование этих методов, границы все равно получаются "зубчатыми"). Метод Nearest Neighbor (Ближайший сосед) определяет увеличение без математических расчетов цвета для новых точек. Он хорош в тех случаях, когда надо увеличить изображение, точно передав его структуру (например, увеличить фрагмент растрового изображения и показать составляющие его пикселы).
ВНИМАНИЕ. Так как при увеличении изображения компьютер должен рассчитать значения цве- тов для ранее не существовавших точек, в программе приходится использовать различные математические методы, называемые методами интерполяции. Они позволяют восполнить недостаток информации за счет анализа существующих точек, но точной картины такой анализ дать не может. Поэтому качество увеличенного изображения может значительно ухудшиться. При уменьшении изображения компьютер решает задачу не увеличения, и уменьшения количества информации, поэтому качество изображения не ухудшается (не считая того, что мелкие детали могут стать невидимыми).
Если снять флажок Resample Image (Пересчитать изображение), то связь между размерами печатного изображения и размерами изображения в пикселах будет отключена. При этом вы сможете изменять размеры отпечатка и разрешение, не изменяя размеры изображения, хранимого в файле. Поля, определяющие высоту и ширину изображения в пикселах, при этом станут недоступными. Для получения доступа к ним установите флажок Resample Image (Пересчитать изображение).
В некоторых случаях возникает необходимость изменить размеры не изображения, а отводимого для него места. Это может понадобиться, например, для добавления к изображению новых элементов или получения пространства для трансформирования объекта.
Примечание 11
Примечание 11

По аналогии с традиционной живописью, пространство, отводимое под изображение (то есть площадь изображения), называют холстом. Разница между понятиями "изображение" и "пространство для изображения" возникает потому, что графический объект может располагаться на'прозрачном фоне.
Добавить место для изображения можно при помощи команды Image > Canvas Size (Изображение > Размер холста). Окно настройки этой команды изображено на Рисунок 6.21.
В верхней части окна находится зона Current Size (Текущий размер). В ней выводятся размеры изображения по ширине (Width) и по высоте (Height). Кроме того, в заголовке зоны показывается текущий размер изображения в килобайтах.
В зоне New Size (Новый размер) вы можете указать новые размеры изображения. Изображение можно как уменьшать, так и увеличивать, причем в отличие от команды Image Size (Размер изображения), изменение размеров холста никак не сказывается на размерах имеющихся графических объектов. Введите в поля Width (Ширина) и Height (Высота) нужные размеры холста по горизонтали и по вертикали. Размеры можно указывать в различных единицах. Выберите нужный вариант из расположенного рядом с полем списка. Если введенное значение окажется меньше текущего, то при нажатии на кнопку ОК на экран будет выведено предупреждение о том, что часть изображения будет обрезана.

Окно настройки наложения слоев

Рисунок 6.13. Окно настройки наложения слоев


В окне настройки наложения слоев вы можете выбрать режим взаимодействия изображения, находящегося на текущем слое с изображениями на нижних слоях. В зоне General Blending (Основные настройки наложения) выбираются режим наложения и прозрачность слоя. Использование этих параметров мы рассмотрим немного позже.
ВНИМАНИЕ. Параметры наложения слоев и слоевые эффекты не могут быть настроены для фонового слоя.
В левой части окна настройки наложения находится набор флажков, каждый из которых позволяет включить или выключить (путем установки или снятия флажка) один из эффектов.
Совет 1
Совет 1

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

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

Окно настройки слоевого эффекта

Рисунок 6.14. Окно настройки слоевого эффекта Drop Shadow Основными параметрами в данном случае являются Distance (Дистанция) (определяет "расстояние" от объекта до плоскости, на которую отбрасывается тень), Size (Размер) (задает размер тени) и Spread (Плотность) (позволяет задать плотность, с которой тень заполняет отведенное ей место). Вы можете вводить значения параметров с клавиатуры или при помощи ползунков.
Также можно определить угол, под которым будет падать тень. Это делается поворотом при помощи мыши указателя Angle (Угол). Можно ввести значение и с клавиатуры. Установка флажка Use Global Light (Использовать общее освещение) позволит вам управлять углом падения тени и одновременно изменять углы отклонения для всех остальных эффектов, примененных к слою.
Если вы снимите этот флажок, то перемещение других эффектов и тени не будут влиять друг на друга.
Параметр Blend Mode (Режим наложения) позволяет вам указать, по каким правилам тень будет взаимодействовать с расположенным под ней изображением. Щелкнув на расположенном рядом с этим списком цветном прямоугольнике, можно изменить цвет тени. Вы также можете изменить ее прозрачность. Для этого переместите ползунок Opacity (Непрозрачность) или введите значение в расположенное рядом поле ввода.
Последняя группа параметров эффекта Drop Shadow (Тень) — Quality (Качество). Вы можете задать закономерность изменения плотности тени (при помощи списка Contour (Контур)). Установкой флажка Anti-aliased (Сглаживание) задается режим сглаживания изображения. И, наконец, ползунок Noise (Шум) управляет введением в тень дополнительного шума. Это может оказаться полезным для придания изображению большей реалистичности.
В правом верхнем углу окна располагается небольшой образец изображения, по которому вы можете следить за тем, как вносимые вами изменения сказываются на слое.
Совет 2


Вы можете изменять параметры Angle (Угол) и Distance (Дистанция), перетаскивая тень мышью в окне редактируемого файла. Изменять значения в полях ввода можно, установив в них курсор и нажимая клавиши "Т" и "i".

Inner Shadow (Внутренняя тень) эффект, подобный Drop Shadow (Тень) с той разницей, что тень отбрасывается не объектом на окружающий фон, а окружающим фоном внутрь объекта. Это позволяет рисовать вдавленные в фон кнопки и другие подобные вещи. Для этого эффекта можно задать те же параметры, что и для эффекта Drop Shadow (Тень), но вместо параметра Spread (Плотность) используется параметр Choke (Заполнение).

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

Inner Glow (Внутреннее свечение) подобно эффекту внешнего свечения, но свечение рисуется не снаружи, а внутри находящегося на слое изображения. Параметры этого эффекта аналогичны параметрам эффекта Outer Glow (Внешнее свечение). При помощи переключателей Source (Источник) вы можете задать, будет свечение исходить от центра изображения (положение Center (Центр)) или от его краев (положение Edge (Граница)).

Bevel and Emboss (Фаска и рельеф) позволяет придать изображению вид рельефной фигуры. На Рисунок 6.15 изображено окно настройки этого эффекта. Совет 3
Совет 3


Использование эффекта Bevel and Emboss (Фаска и рельеф) совместно с Drop Shadow (Тень) позволяет достичь лучшей передачи объема.

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

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

Gradient Overlay (Перекрытие градиентом) перекрывает изображение градиентной заливкой. На Рисунок 6.16 показано окно настройки этого эффекта.

Окно задания параметров искажения текста

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


Из списка Style (Стиль) выберите нужный режим искажения. Небольшие значки, расположенные рядом с пунктами списка, помогут вам заранее определить, что именно произойдет с надписью при выборе того или иного пункта. После этого при помощи переключателей Horizontal (Горизонтально) или Vertical (Вертикально) укажите, в каком направлении будет производиться искажение. Для некоторых стилей эти переключатели неактивны. Выбрав тип искажения, укажите при помощи ползунков, расположенных в нижней части окна, силу искажения (ползунок Bend (Изгиб)), а также дополнительное изменение размеров текста в вертикальной и горизонтальной плоскостях. Это делается при помощи ползунков Horizontal Distortion (Горизонтальное искажение) и Vertical Distortion (Вертикальное искажение).
После того, как вы подготовите текст, вам, возможно, потребуется преобразовать его в обычный слой для использования в операциях с растровой графикой. Для этого используйте команду Rasterize Layer (Растеризовать слой). После применения этой команды слой будет преобразован из текстового в обычный. Дальнейшее редактирование текста станет невозможным, зато появится возможность применять к слою эффекты и команды, неприменимые к текстовым слоям.
Примечание 7
Примечание 7

В Adobe PhotoShop текст представляется как векторная графика. В файле формата PSD записывается и растровая, и векторная копии текстового слоя. Это позволяет увидеть изображение даже при отсутствии в системе нужного шрифта. Редактирование текстового слоя в отсутствие нужного шрифта невозможно. Единственный способ что-либо сделать с ним в этом случае — преобразовать в растровую графику и редактировать дальше как обычное изображение.
Красивые шрифты и фотографии позволяют получить довольно симпатичные украшения для сайта. Плоские надписи на плоском фоне часто смотрятся невыразительно. Для того чтобы придать изображению оригинальность, используются различные фильтры и эффекты. В состав Adobe PhotoShop входит множество фильтров, доступ к которым возможен при помощи меню Filter (Фильтры). Эти фильтры позволяют выполнять следующие операции:

группа Artistic (Художественные) — предназначены для имитации различных художественных техник, таких как акварель или живопись;

группа Blur (Размытие) — позволяют размыть все изображение или его часть. Это может быть полезным для создания различных фотографических эффектов и для подготовки коллажей;

группа Brush Strokes (Мазки кисти) — используются для имитации штрихов и мазков кисти. Эти фильтры, как и фильтры группы Artistic (Художественные), могут применяться для подготовки композиций и коллажей, а также для изготовления художественных заголовков страниц и других элементов;

группа Distort (Искажение) — предназначены для внесения в изображение различных искажений (имитация ряби на воде,поверхности стекла и т. д.);

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

группа Pixelate (Пикселы) — позволяют имитировать, например, мозаику;

группа Render (Фотообработка) — эти фильтры позволяют имитировать эффекты освещения, облачность, особенности поверхности различных объектов;

группа Sharpen (Резкость) — предназначены для повышения резкости изображения. Эти фильтры позволяют существенно улучшить качество фотографий;

группа Sketch (Набросок) — используются для имитации различных способов выполнения набросков (мелков, рисунков на различных типах бумаги и т. д.);

группа Stylize (Стилизация) — позволяют создавать различные специальные эффекты;

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

группа Video (Видео) — используются для улучшения качества изображения, полученного с видеопленки или для подготовки изображения для передачи по телеканалам;

группа Other (Дополнительно) — эта группа содержит некоторые фильтры для настройки цветов изображения. Также в этой группе содержится фильтр Custom (Пользовательский), который позволит вам самостоятельно задать правила преобразования пикселов.

Кроме этих стандартных групп фильтров, вы можете устанавливать дополнительные фильтры, или, как их часто называют, "плагины". Они представляют собой файлы с расширением 8BF и устанавливаются в подкаталог ...\Plug-ins\каталога, в который установлен Adobe PhotoShop.
Примечание 8
Примечание 8

"Плагинами" называют дополнительные программные модули, расширяющие возможности основной системы. Английское слово plug-in обозначает вставку или сменный блок.
Кроме фильтров, в Adobe PhotoShop имеется мощное средство создания визуальных эффектов — слоевые эффекты. Они представляют собой набор свойств, назначаемых слоям изображения. Результирующее изображение, отображаемое на экране, строится на основе исходного, которое остается неизменным. Таким образом, применение слоевых эффектов полностью обратимо, а сами эффекты могут быть изменены в любой момент.
ВНИМАНИЕ. Слоевые эффекты могут быть применены не только к растровым изображениям, но и к текстовым слоям. Это позволяет изменять текст после применения эффекта, сохраняя при этом все "украшения".
Накладываемые на слои эффекты позволяют значительно улучшить внешний вид изображения, выделить отдельные фрагменты, придать элементам сайта более привлекательный вид.
Доступ к управлению слоевыми эффектами осуществляется при помощи специального окна. Вызвать его на экран можно тремя способами:

вызвать меню палитры Layers (Слои) и выбрать из него пункт Blending Options (Настройка наложения). Меню слоя вызывается при помощи кнопки со стрелкой, расположенной в верхнем правом углу палитры;

дважды щелкнуть на символе слоя на палитре Layers (Слои)

Палитры управления вводом текста

Рисунок 6.10. Палитры управления вводом текста

Первые шаги дизайнеров по просторам

Рисунок 6.2. Первые шаги дизайнеров по просторам Всемирной паутины были довольно робкими


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

Подготовка графических элементов webстраниц

Подготовка графических элементов web-страниц

Основными графическими элементами web-сайта являются заголовки, кнопки, маркеры списков и текстуры. Они позволяют придать странице приятный внешний вид и сделать ее удобной для использования. В этом уроке мы рассмотрим основы подготовки этих элементов с использованием Adobe PhotoShop.
На заре эпохи Всемирной паутины основным назначением web-страницы было представление научной информации. Поэтому в языке разметки страниц (HTML — Hypertext Markup Language — Язык разметки гипертекста) предусмотрели возможность создания текстовых массивов, содержащих таблицы, списки, рисунки и ссылки на другие тексты. На Рисунок 6.1 приведен пример подобного сайта.

При помощи инструмента Туре можно

Рисунок 6.9. При помощи инструмента Туре можно вводить в изображение и редактировать текстовые элементы


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

Пример использования нарисованного

Рисунок 6.7. Пример использования нарисованного текстового логотипа совместно с графикой


В верхней левой части страницы находится название сайта — "OZON". Рядом с ним располагается графический логотип. И то и другое выполнено при помощи графики. Использование для названия сайта графики позволило реализовать все возможности, указанные выше. Обратите внимание на очертания надписей "OZON" и "ИНТЕРНЕТ-МАГАЗИН". Шрифт надписи не относится к стандартным гарнитурам, встраиваемым в браузеры. В отличие от простых текстовых надписей (присмотритесь повнимательнее к пунктам меню в левой части страницы), грани нарисованных букв плавно переходят к фону. Это значительно улучшает внешний вид страницы. Сглаживание границ возможно и для обычного текста, но оно полностью зависит от возможностей браузера и операционной системы. Часто вместе с фотоизображениями и текстовыми элементами используется графика, нарисованная самим дизайнером Примечание 3
Примечание 3


Растровая графика основана на представлении изображения как совокупности то чек (пикселов). Вы можете изменять каждый пиксел растрового изображения независимо от других. Это позволяет легко работать с цветом в каждой точке изображения, добиваясь различных эффектов. Векторное изображение описывается при помощи нескольких опорных точек. Все остальные точки вычисляются при помощи различных формул. Получить доступ к некоторой произвольной точке изображения при этом сложно, поэтому эффекты в векторной графике практически отсутствуют. Зато такое изображение легко трансформировать и масштабировать, изменяя несколько числовых значений. В отличие от растровой графики, векторная графика при подобных операциях не теряет качества.
Растровые изображения получают либо сканированием, либо рисуют в графических редакторах (например, в Adobe PhotoShop). Для рисования прямо на компьютере очень удобны графические планшеты. Они позволяют более точно, чем мышью, управлять движением курсора. Векторные изображения рисуются в графических векторных редакторах. Самым известным и широко распространенным векторным редактором является Corel Draw фирмы Corel, но при его использовании возникает проблема совместимости с редакторами растровой графики, которые необходимы для подготовки изображений, помещаемых на страницу. С Adobe PhotoShop наилучшим образом совмещается векторный редактор Adobe Illustrator.
Независимо от того, какой редактор использовался для подготовки изображения, для подготовки его к размещению на странице необходим растровый редактор, так как изображения в форматах GIF, JPEG и PNG — растровые.
На Рисунок 6.8 показан пример использования нарисованной графики для оформления сайта.
Обратите внимание на орнамент заголовка — чаще всего подобные элементы разрабатываются для конкретного сайта и являются уникальными. Это позволяет сделать оформление сайта оригинальным.

Страницы похожие на эту легко

Рисунок 6.3. Страницы, похожие на эту, легко сделать при помощи HTML-редактора


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

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

Возможности настройки

Таблица 6.1. Возможности настройки при работе с инструментом Туре (Текст)

Элемент управления	Функция

Некоторые элементы

Таблица 6.2. Некоторые элементы управления панели Character (Символ)

Элемент управления

Функция

Примечание 6 Примечание 6 Расстояние между двумя символами принято называть кернингом (от английского слова kerning — межсимвольный интервал). Дополнительное расстояние, добавля емое между всеми символами выбранной последовательности, называют трекингом (от английского слова tracking — установка межсимвольных расстояний). Если вы нажмете кнопку со стрелкой, расположенную в верхнем правом углу панели Character (Символ), то в раскрывшемся меню (Рисунок 6.11) можно будет найти некоторые дополнительные команды. Например, вы сможете сделать текст подчеркнутым (Underline) или перечеркнутым (Strikeout). Там же находятся команды задания отображения всех букв как заглавных (All caps) или же замены строчных букв заглавными уменьшенного размера (Small caps). Также можно сделать выделенный участок текста верхним (Superscript) или нижним (Subscript) индексом.

Так могли выглядеть первые webстраницы

Рисунок 6.1. Так могли выглядеть первые web-страницы


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

Гипертекстом называют систему статей, связанных между собой ссылками. При чте нии одной статьи вы можете в любой момент просмотреть связанную с ней информацию, например, определение термина или разъяснение какого-либо сложного момента. Интернет, точнее его составляющая, называемая Всемирной Паутиной (WWW — World Wide Web — Всемирная Паутина), представляет собой совокупность страниц с самым разнообразным содержанием, связанных между собой ссылками.
Потребность в средствах для улучшения внешнего вида сайтов появилась, а средства для ее удовлетворения пришлось искать среди уже имевшихся возможностей HTML и других инструментов создания сайтов. Так постепенно на web-страницах стали появляться нарисованные кнопки, служащие ссылками на другие разделы сайта, линии и узоры, разделяющие отделы самой страницы друг от друга, фигурные маркеры списков, текстуры (рисунки, используемые в качестве фона ячеек таблиц и страниц в целом) и многие другие элементы. Постепенно меняясь, они используются и в настоящее время. На Рисунок 6.2 вы можете увидеть страницу, выполненную в стиле, характерном для времени зарождения графического оформления.

В оформлении сайта могут использоваться

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


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

Сайт, показанный на Рисунок 6.8, относится к проекту "Веди", ориентированному на разработку и распространение шрифтов, орнаментов и других подобных элементов. На этом сайте (http://vedi.d-s.ru) вы можете найти много полезных вещей.
Теперь рассмотрим некоторые технические приемы, используемые для подготовки графических элементов страниц в Adobe PhotoShop. Кроме традиционных рисующих инструментов наиболее часто используются инструмент Туре (Текст) и слоевые эффекты. Инструмент Туре (Текст) позволяет помещать в изображение надписи, выполненные различными шрифтами (шрифт должен быть установлен заранее). Основное достоинство этого инструмента — набранный текст может быть в последующем отредактирован. Можно изменить не только сам текст, но и его шрифт, а также цвет. С полученными надписями (текстовыми слоями) можно выполнить практически все операции, допустимые для обычных слоев: перемещение, трансформирование, применение слоевых эффектов. Нельзя использовать рисующие (стирающие) инструменты, а также фильтры и команды.
Вызов инструмента Примечание 5
Примечание 5


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

Photoshop 7 и web дизайн

Для выполнения некоторых операций

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


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

Установив связь между слоями, вы сможете перемещать расположенные на них объекты синхронно. Это оказывается полезным, например, при перемещении заголовка, текст и фон которого находятся на разных слоях.
В меню Layer > Align Linked (Слой > Выровнять связанные слои) находятся следующие команды:

Top Edges (Верхние грани) — объекты, находящиеся на связанных слоях, перераспределяются так, что их верхние границы совмещаются по высоте с верхней границей объекта, находящегося на выделенном (активном) слое;

Vertical Centers (Центры по вертикали) — объекты располагаются так, что их центры оказываются на высоте центра объекта, находящегося на активном слое;

Bottom Edges (Нижние грани) — нижние границы объектов, находящихся на связанных слоях, совмещаются по высоте с нижней границей активного слоя;

Left Edges (Левые грани) — левые границы изображений, находящихся на связанных слоях, выравниваются по левой границе изображения, находящегося на активном слое. Разумеется, активный слой должен входить в группу связанных слоев;

Horizontal Centers (Центры по горизонтали) — центры объектов из связанных слоев располагаются в том же положении (по горизонтали), что и центр объекта из активного слоя;

Right Edges (Правые грани) — выравнивание производится по правой границе изображения, располагающегося на активном слое.

На Рисунок 7.7 показан пример использования команды Horizontal Centers (Центры по горизонтали).

Исходное изображение (вверху)

Рисунок 7.7. Исходное изображение (вверху) и изображение после выравнивания центров объектов по горизонтали (внизу). В качестве опорного использовался верхний шарик


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

Связав несколько слоев с фоном и выбрав его в качестве активного слоя, вы можете выравнивать изображения (или текст, если слои текстовые) по центру или по краям холста.
Команды меню Layer (Слой) позволяют выравнивать не только границы объектов или их центры, но и интервалы между ними. Для этого служат команды подменю Layer > Distribute Linked (Слой > Распределить связанные слои). Команды видны на Рисунок 7.8.
Набор команд аналогичен командам выравнивания слоев, но в данном случае слои перераспределяются так, чтобы выровнялись не соответствующие границы изображений, а интервалы между ними. Вы можете выполнить следующие операции:

Команды меню Layer > Distribute

Рисунок 7.8. Команды меню Layer > Distribute Linked служат для выравнивания интервалов между объектами, находящимися на разных слоях

Top Edges (Верхние грани) — выравниваются интервалы между верхними гранями связанных слоев;

Vertical Centers (Центры по вертикали) — выравниваются интервалы между центрами объектов. Перемещение производится в вертикальной плоскости;

Bottom Edges (Нижние грани) — выравниваются интервалы между нижними гранями изображений, находящихся на связанных слоях;

Left Edges (Левые грани) — используйте эту команду для выравнивания расстояний между левыми гранями объектов;

Horizontal Centers (Горизонтальные центры) — интервалы между центрами объектов выравниваются при помощи перемещения изображений в горизонтальной плоскости;

Right Edges (Правые грани) — выравниваются интервалы между правыми гранями изображений.

ВНИМАНИЕ. Так как эти команды служат для выравнивания интервалов между слоями, использо-вать их можно при наличии хотя бы двух таких интервалов. Поэтому для использования команд меню Layer > Distribute Linked (Слой > Распределить связанные слои) следует связать хотя бы три слоя. Выравнивать интервалы в группе, содержащей фоновый слой, нельзя.
На Рисунок 7.9 приведен пример выравнивания интервалов между объектами, находящимися на разных слоях.
Кроме выравнивания изображений по вертикали и горизонтали, часто возникает необходимость изменить порядок следования слоев. Это позволяет, например, поместить одно изображение под другое, или, наоборот, вынести его на передний план. Выполнить подобную операцию можно несколькими способами. Самый простой из них — перетащить символ слоя на палитре Layers (Слои) при помощи мыши. Для этого выделите нужный слой, нажмите левую кнопку мыши, и, удерживая ее нажатой, переместите символ слоя. Вы можете поместить его между двумя любыми слоями или над самым верхним слоем. Во время перемещения на месте, куда будет помещен слой, отображается белая линия. После выбора нужной позиции отпустите кнопку мыши. Вид палитры Layers (Слои) во время выполнения этой операции показан на Рисунок 7.10.

Команды меню View позволяют управлять

Рисунок 7.3. Команды меню View позволяют управлять работой направляющих линий


Установив флажок напротив пункта Lock Guides (Заблокировать направляющие), можно запретить перемещение направляющих линий. Это позволит избежать их случайного смещения при работе с фрагментами изображения. Для отключения блокировки снимите флажок (вызовите эту команду повторно). Используя команду Clear Guides (Удалить направляющие), вы можете удалить все направляющие линии, содержащиеся в документе.
Команда Snap (Прикрепить) позволяет включить или выключить режим "прилипания" объектов к направляющим линиям и другим элементам окна. В подменю Sflap То (Прикрепить к) вы можете выбрать, к каким именно элементам будут приклеиваться фрагменты изображения. К элементам окна, служащим для выравнивания изображения, относятся:

Guides (Направляющие линии);

Grid (Сетка) — использование сетки позволяет выделять области правильной формы и располагать фрагменты изображения в определенных позициях холста. Вы можете настроить параметры сетки при помощи команды Edit > Preferences > Guides & Grid (Правка > Предпочтения > Направляющие и сетка);

Slices (Нарезка) — границы нарезанных при помощи инструмента Slice (Нож) блоков изображения;

Document Bounds (Границы документа) — границы холста изображения. Автоматическое выравнивание по краю изображения может оказаться полезным при размещении элементов, которые должны находиттся точно на его границе.

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

При помощи команд View > Snap To Mil (Вид > Прикрепить к > Включить все) и View > Snap То > None (Вид > Прикрепить к > Отключить все) вы сможете включить "прилипание" объектов ко всем перечисленным в меню элементам или выключить его.
Команда View > Show Extras (Вид > Дополнительные элементы) используется для управления отображением направляющих линий (Guides), сетки (Grid), границы выделения (Selection Edges), текущего пути (Target Path), нарезанных блоков изображения (Slices) и примечаний (Annotations). Команда позволяет одновременно включать или выключать отображение этих элементов. При помощи команд подменю View > Show (Вид > Показать) можно отображать на экране или скрывать эти элементы по отдельности. Содержащиеся в этом же подменю команды All (Показать все) и None (Убрать все) используются для быстрого устранения с экрана или отображения всех дополнительных элементов. Воспользовавшись командой View > Show > Show Extras Options (Вид > Показать > Настройка), можно указать (установив соответствующие флажки в появившемся на экране окне), на какие из дополнительных элементов будет распространяться действие команды Show Extras (Дополнительные элементы).
Примечание 3
Примечание 3

Упомянутые среди дополнительных элементов окна пути являются векторными объек тами. Они могут быть созданы непосредственно в Adobe PhotoShop при помощи инструментов работы с путями или же могут быть импортированы из векторного редактора. Импортировать векторные изображения можно через буфер обмена. Лучше всего производить подобные операции при помощи векторного редактора компании Adobe — Adobe Illustrator. PhotoShop и Illustrator используют одинаковое представление векторной графики в буфере обмена, что обеспечит неискаженный перенос изображения из одной программы в другую. К дополнительным элементам также относятся текстовые и звуковые примечания, которые вы можете разместить в документе при помощи инструментов Notes (Заметки) и Audio Annotation (Звуковое примечание). В окне документа отображаются не сами примечания, а их символы.
После того, как вы разместите в нужных позициях направляющие линии, приступаем к размещению вдоль них подготовленных элементов изображения. При помощи горизонтальных и вертикальных направляющих можно образовать сетку, к которой будут "прилипать" перемещаемые изображения. В отличие от сетки, генерируемой Adobe PhotoShop, комбинация из направляющих линий может иметь произвольные пропорции. Впрочем, в некоторых ситуациях вас устроит и стандартная сетка, тем более что вы можете включить "прилипание" объектов и к ней.
На Рисунок 7.4 приведен пример использования направляющих линий для размещения элементов изображения. В данном случае это небольшие нарисованные шарики, которые могут использоваться, например, в качестве маркеров списков.

Можно копировать слои при помощи мыши

Рисунок 7.1. Можно копировать слои при помощи мыши


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

Вы можете копировать фрагмент изображения при помощи инструментов выделения или инструмента Move (Перемещение). Для этого перед началом перемещения объекта нажмите клавиши Ctrl и Alt и удерживайте их. Удерживая клавишу Shift, вы можете задать перемещение объекта в направлениях, кратных 45°.
При размещении элементов изображения на странице часто возникает необходимость их расположения вдоль одной линии. Для выравнивания графических элементов по одной линии в Adobe PhotoShop имеется специальное средство — Guides (Направляющие). При наличии в окне направляющих линий перемещаемые объекты (как изображения, так и текстовые слои) "прилипают" к ним, как только оказываются на некотором расстоянии. При этом "приклеивание" происходит по 50% границе прозрачности изображения. "Приклеившийся" к направляющей фрагмент изображения можно перемещать вдоль нее. Одна из координат (по вертикали или по горизонтали, в зависимости от того, вертикальная или горизонтальная направляющая используется) будет оставаться неизменной. Если вы попытаетесь отвести фрагмент от направляющей линии больше чем на расстояние "прилипания", то он отделится от направляющей линии.
Самый простой способ поместить в окно документа направляющую линию — "вытащить" ее мышью из линейки. О линейках стоит сказать несколько слов отдельно. Они представляют собой шкалы, расположенные вдоль верхней и левой границ изображения (Рисунок 7.2). При перемещении курсора над рисунком на линейках показываются его координаты. Отображаются линейки на экране при помощи команды View > Show Rulers (Вид > Показать линейки). Команда View > Show Rulers (Вид > Показать линейки) позволяет убрать их.
Если поместить курсор над линейкой, нажать кнопку мыши и "протащить" курсор над изображением, то будет образована направляющая линия, параллельная линейке. С помощью вертикальной линейки можно получить вертикальные направляющие, с помощью горизонтальной линейки — горизонтальные.

Направляющие линии образуются при помощи линеек

Рисунок 7.2. Направляющие линии образуются при помощи линеек


Еще один способ получения направляющих линий — команда меню View > New Guide... (Вид > Новая направляющая...). Вызвав ее, выберите в появившемся окне тип линии (горизонтальная или вертикальная), укажите место ее расположения и нажмите кнопку ОК. Так вы можете быстро размещать направляющие линии в точках с известными координатами.
Создав направляющую линию, вы можете переместить ее. Для этого подведите к ней курсор мыши и нажмите клавишу Ctrl. При этом указатель изменит свою форму, и вы сможете, удерживая клавишу и левую кнопку мыши, переместить линию. При использовании инструмента Move (Перемещение) удерживать клавишу Ctrl не нужно (она служит для перевода других инструментов в режим перемещения фрагментов изображения).
Примечание 2
Примечание 2

Нельзя переместить направляющую линию с помощью инструментов Slice (Нож) и Hand (Рука).
Поведение направляющих линий и их взаимодействие с частями изображения поддаются достаточно гибкой настройке. Для этого служат несколько команд меню View (Вид) (Рисунок 7.3).

Подготовка макета webстраницы в Adobe PhotoShop

Подготовка макета web-страницы в Adobe PhotoShop

Порядок расположения слоев можно изменять при помощи мыши

Рисунок 7.10. Порядок расположения слоев можно изменять при помощи мыши


ВНИМАНИЕ. Перемещать фоновый слой нельзя. Если вы хотите поместить его над другими слоями, скопируйте его (например, при помощи команды Duplicate Layer... (Скопировать слой...) из меню палитры) и поместите в нужное место копию. Сам фоновый слой после этого можно удалить.
Примечание 5
Примечание 5

Слои располагаются на панели Layers (Слои) в том порядке, в котором они отображаются на экране. Самый верхний слой отображается "поверх" остальных. Фоновый спой отображается "ниже" остальных — обычные слои на него накладываются.
Еще один способ изменения порядка следования слоев — использование команд меню Layer > Arrange (Слой > Изменить порядок слоев). Это меню изображено на Рисунок 7.11.

При помощи направляющих линий

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


ВНИМАНИЕ. При перемещении направляющих линий они "прилипают" к своему первоначально му положению, что не дает перемещать их на небольшие (1-2 пиксела) расстояния. Если вам все-таки надо это сделать, сначала переместите линию на большое расстояние, а потом установите ее в нужное положение.
Примечание 4
Примечание 4

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

Пример использования команды выравнивания

Рисунок 7.9. Пример использования команды выравнивания интервалов между слоями.


Сверху — исходное изображение, внизу — изображение после применения команды Layer > Distribute Linked > Vertical Centers

Пример разметки макета

Рисунок 7.12. Пример разметки макета


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

С помощью команд меню Layer >

Рисунок 7.11. С помощью команд меню Layer > Arrange можно изменять порядок наложения слоев друг на друга


Вы можете использовать следующие команды:

Bring to Front (На передний план) — активный слой перемещается на передний план (становится ближайшим к пользователю);

Bring Forward (Переместить вперед) — активный слой перемещается на одну позицию наверх (меняется местами с расположенным над ним слоем);

Send Backward (Переместить назад) — активный слой меняется местами со слоем, расположенным под ним;

Send to Back (На задний план) — активный слой помещается на задний план (становится самым удаленным от пользователя). Если изображение содержит фоновый слой, то текущий слой помещается непосредственно над ним.

Команды меню позволяют быстро перемещать слои, но делать это можно только "пошагово" — меняя местами соседние слои. Если слоев много, гораздо удобнее и нагляднее пользоваться палитрой Layers (Слои).
Совет 7
Совет 7

Управлять перемещением слоев можно с клавиатуры при помощи комбинаций клавиш. Они указаны напротив соответствующих команд (Рисунок 7.11).
В начале этого урока было сказано, что все графические элементы, находящиеся на web-странице, должны быть только прямоугольными. Это связано с тем, что в файлах могут сохраняться изображения только такой формы. Поэтому после того, как вы подготовите макет сайта, вам придется "нарезать" его, то есть разделить на отдельные изображения, которые затем будут сохранены в файлах и помещены на сервер.
Резать на отдельные части удобнее не состоящее из множества слоев, а "плоское" изображение, содержащее один слой (в большинстве случаев этот слой является фоновым). Для того чтобы "склеить" слои, следует использовать специальные команды, находящиеся в меню палитры Layers (Слои), а также в меню Layer (Слой). К этим командам относятся:

Merge Down (Объединить с нижним) — активный слой объединяется со слоем, расположенным под ним (накладывается на него);

Merge Visible (Объединить видимые) — объединяются все слои, видимые в данный момент (слои, для которых на палитре Layers (Слои) установлен символ видимости). Объединение производится в том порядке, в котором слои расположены на палитре Layers (Слои);

Flatten Image (Объединить все) — объединяются все слои, находящиеся в редактируемом файле. Если часть слоев невидима (отсутствует на экране), то на экран выводится запрос о том, следует ли их отбросить или же необходимо сохранить. Объединение производится в порядке расположения слоев.

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

Вызвать меню палитры можно при помощи кнопки Совет 9
Совет 9


Если вы создаете новый файл, а в буфере обмена Windows уже находится изображение, то файлу по умолчанию будет присвоен размер этого изображения.
Готовить изображение к сохранению и регулировать параметры сжатия вы можете вручную при помощи различных команд. Также можно воспользоваться командой File > Save for Web (Файл > Сохранить для Web). Она позволяет оптимизировать сжатие файла, непосредственно наблюдая за тем, как вносимые изменения влияют на качество изображения и его размер на диске. Подробнее эти процедуры рассматриваются в следующем уроке.
Для того чтобы облегчить выделение различных элементов (а также их размещение на макете страницы), полезно создать в файле макета отдельный слой и раскрасить его, обозначив тем самым области изображения. Пример такой разметки приведен на Рисунок 7.12.

В меню Layer содержатся команды

Рисунок 7.5. В меню Layer содержатся команды, позволяющие выравнивать связанные слои


Выровнять объекты вдоль одной линии (вертикальной или горизонтальной) можно и без помощи направляющих линий. Если изображения, которые надо установить в нужные позиции, находятся на разных слоях (эти слои не должны содержать других объектов), для их выравнивания можно использовать команды Layer > Align Linked (Слой > Выровнять связанные слои). Фрагмент этого меню изображен на Рисунок 7.5.
Как следует из названия подменю, выравнивать можно только несколько связанных слоев. При этом активный в данный момент слой используется в качестве опорного (по нему производится выравнивание). Для того чтобы связать слои, надо щелкнуть мышью на квадрате, расположенном рядом с символом видимости слоя (Рисунок 7.6). Текущий слой имеет в этом квадрате символ в виде кисточки. Слои, связанные с текущим, обозначены символами в виде звеньев цепи. Щелкнув на этом символе, вы можете убрать связь слоя со слоем текущим. Одновременно может существовать несколько групп связанных слоев. То есть если в документе содержится, например, 7 слоев, то вы можете связать между собой слои 1, 3 и 4, а потом выбрать слой 6 и связать с ним слой 7. Будут образованы две независимые группы слоев (разумеется, комбинировать слои можно в любом порядке).

Photoshop 7 и web дизайн

Диалоговое окно команды Optimize To File Size ...

Рисунок 8.7. Диалоговое окно команды Optimize To File Size...

задать желаемый размер файла, не забывая, конечно, что от него зависит качество;

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

указать параметры использования фрагментов изображения, определенных при помощи инструмента Slice (Нож).

Далее перейдем к вкладке Settings (Настройки). Она предусматривает два способа оптимизации: автоматическую и ручную (Рисунок 8.8.).

Диалоговое окно команды Save For Web ...

Рисунок 8.4. Диалоговое окно команды Save For Web...


Команда Save For Web... (Сохранить для Web...) предоставляет в ваше распоряжение обычный "джентльменский набор" инструментов: Hand (Рука), Slice Select (Выбор фрагмента), Zoom (Лупа) и Eyedropper (Пипетка). Никаких новых свойств они приобрести не успели, а описание их работы представлено в соответствующей главе.
Над правым верхним углом области просмотра находится кнопка

Экспорт файлов GIF для Web

Экспорт файлов GIF для Web

Файлы GIF экспортируются командой File > Export > GIF89a Export (Файл > Экспорт > Экспорт GIF89a).
ВНИМАНИЕ. В Adobe PhotoShop 7 фильтр экспорта GIF89a по умолчанию не устанавливается, его нужно переписать из папки Goodies дистрибутива в папку исполняемых модулей. Файл имеет название GIF89a Export.Sbe.
Изображения, созданные с помощью этой команды, могут быть:

полупрозрачными;

чересстрочными;

Они поддерживают следующие цветные режимы:

Indexed Color (Индексированные цвета);

RGB.

Перед использованием команды необходимо перевести изображение в один из двух вышеуказанных режимов.
В этом окне можно задать следующие параметры:

Palette (Палитра). Может принимать значения Adaptive (Адаптивная) и System (Системная). Как подробно разбиралось выше, палитра Adaptive (Адаптивная) основана на преобладающих цветах изображения, а палитра System (Системная) — на цветах, использующихся в Windows или Mac OS. При указании палитры System (Системная) становится доступным флажок Use Best Match (Использовать наиболее похожие), который позволяет заменить цвета изображения на близкие им цвета системной палитры;

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

флажок Interlaced (Чересстрочный) управляет чересстрочной загрузкой изображения;

флажок Export Caption (Добавить подпись) указывает, надо ли добавлять к экспортируемому изображению подпись, которая извлекается из сведений о файле (команда File > File Info... (Файл > Сведения...)).

Кнопка Load (Загрузить) загружает сохраненную ранее палитру.
Оценить результаты работы позволяет кнопка Preview (Предварительный просмотр).
Кроме вышеперечисленных параметров, здесь можно указать:

цвет прозрачных пикселов при предварительном просмотре (по умолчанию серый, что не всегда удачно);

какие цвета сделать прозрачными (при помощи инструмента Eyedropper (Пипетка));

если изображение содержит канал маски, то она может быть использована для определения прозрачных областей (поле Transparency From (Прозрачность из)).

ВНИМАНИЕ. Черный цвет маски определяет прозрачность, белый — непрозрачность. Для фор-мата GIF не существует переходных состояний прозрачности: область либо прозрачна, либо нет. Темно-серый цвет маски станет прозрачным, а светло-серый — непрозрачным.

Экспорт контуров в Adobe Illustrator

Экспорт контуров в Adobe Illustrator

В программу Adobe PhotoShop, являющуюся, по сути, растровым редактором, внедрены некоторые элементы векторной графики. Возможно, вы захотите, использовав при работе над изображением векторный объект, перенести его в векторный редактор для дальнейшей обработки. Воспользуйтесь командой File > Export > Paths to Illustrator... (Файл > Экспорт > Контуры в Illustrator...). Она позволяет сохранить векторные объекты (контуру) в формате векторной графики .AI, используемом программой Adobe Illustrator. Диалоговое окно этой команды представлено на Рисунок 8.14.
Совет 8
Совет 8

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

Мастер экспорта прозрачных изображений

Мастер экспорта прозрачных изображений

Этот мастер быстрой подготовки изображений для Web запускается командой Help > Export Transparent Image... (Помощь > Экспорт прозрачных изображений...). Рисунки, которые вы сохраняете с его помощью, могут содержать прозрачные области.
Процесс выполнения разбит на отдельные этапы, каждый из которых сопровождается собственным диалоговым окном.

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

Меню выбора режима предварительного просмотра

Рисунок 8.5. Меню выбора режима предварительного просмотра

Окно мастера экспорта прозрачных

Рисунок 8.15. Окно мастера экспорта прозрачных изображений при выполнении первого шага

На втором шаге (Рисунок 8.16) необходимо указать, для чего предназначено экспортируемое изображение: для печати (Print) или для размещения в Сети (Online). В зависимости от ответа Adobe Photoshop определит нужное разрешение: для web-графики достаточно 72 dpi, а для печати в большинстве случаев требуется гораздо большее разрешение. При выборе параметра Print (Печать) работа мастера на этом шаге заканчивается и вам будет предложено стандартное окно сохранения, где от вас требуется только ввести название файла.
Рисунок 8.16. Окно мастера экспорта прозрачных изображений при выполнении второго шага

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


Рисунок 8.17. Окно мастера экспорта прозрачных изображений на третьем шаге при выборе параметра Online

На четвертом шаге (Рисунок 8.18) проводится индексация цветов при помощи ранее подробно рассмотренной команды Indexed Color... (Индексированные цвета...).
Рисунок 8.18. Окно мастера экспорта прозрачных изображений на четвертом шаге при выборе формата GIF

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

Слева изображены настройки для GIF справа — для JPEG

Рисунок 8.8. Слева изображены настройки для GIF, справа — для JPEG


Оптимизация запускается автоматически при выборе из ниспадающего меню стиля оптимизации.
При ручной оптимизации формата GIF можно задать алгоритм сокращения количества цветов, алгоритм сглаживания, прозрачность, чересстрочную загрузку, степень сглаживания (в процентах), цвет, которым следует заполнить прозрачные пикселы. Эти параметры рассмотрены выше (в разделе "Сохранение в формате GIF"). Дополнительными параметрами являются Lossy (Потери) и Web Snap (Цвета для Web).
Совет 5
Совет 5

При установке значения Lossy (Потери) около 30% размер файла значительно уменьшается, а качество остается приемлемым. Чем меньше значение параметра Web Snap (Цвета для Web), тем меньше степень соответствия используемых цветов web-цветам. Значение 100% говорит о том, что используются только web-цвета.
При выборе формата JPEG следует обратить внимание на следующие отличия от обычного окна сохранения:

в меню Quality (Качество) показатель изменяется в пределах от 0 до 100;

возможно использование цветового профиля (флажок ICC Profile (Профиль ICC));

появился параметр Blur (Размытие), который упрощает сжатие.

ВНИМАНИЕ. Для обработки цветовых профилей web-браузеру необходимы дополнительные модули, к тому же включение цветового профиля увеличивает размер файла на 3-4 Кбайт. При использовании размытия изображения обеспечивается уменьшение размера файла, но удаляются его детали.
Следующие две вкладки — Color Table (

Сохранение файлов в форматах GIF и JPEG

Сохранение файлов в форматах GIF и JPEG

Сохранение в формате GIF

Сохранение в формате JPEG

Сохранение с помощью команды Save For Web... (Сохранить для Web...)

Экспорт файлов GIF для Web

Экспорт контуров в Adobe Illustrator

Мастер экспорта прозрачных изображений

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

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

прозрачные области;

анимация;

использование не больше 256 цветов палитры RGB;

использование режимов Grayscale (Оттенки Серого) или Indexed Color (Индексированный Цвет).

Следовательно, изображение типа "логотип" идеально подходит для сохранения в формате GIF.
Фотографии и многоцветные картинки, не содержащие слоев и альфа-каналов, хранят в формате JPEG.
Теперь мы умеем классифицировать изображения, использующиеся в web-графике. Рассмотрим процедуру сохранения в форматах GIF и JPEG.

Сохранение с помощью команды Save

Сохранение с помощью команды Save For Web... (Сохранить для Web...)

Главным достоинством команды Save For Web... (Сохранить для Web...) является возможность предварительного просмотра изображения и автоматическая подготовка HTML-кода, позволяющего установить изображение на web-страницу. Эта команда позволяет сравнить различные группы параметров и выбрать ту, которая обеспечивает оптимальное соотношение качества изображения и размера файла. Например, сравнить различные индексированные палитры цветов, параметры JPEG-сжатия, форматы GIF и JPEG. При этом исходное изображение остается неизменным и можно легко к нему вернуться.
С помощью этой команды за одну операцию можно провести индексацию цветов, добавить прозрачность и сохранить изображение в формате GIF или JPEG, что избавляет от необходимости предварительно использовать команды Indexed Color... (Индексированные цвета...) или Color Table (

Сохранение в формате GIF

Сохранение в формате GIF

Чтобы сохранить цветное изображение в формате GIF, необходимо преобразовать его к цветовой модели RGB с помощью команды Image > Mode > RGB (Изображение > Режим > RGB), а затем воспользоваться командой Image > Mode > Indexed Color... (Изображение > Режим > Индексированный Цвет...).
Примечание 1
Примечание 1

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

Сохранение в формате JPEG

Сохранение в формате JPEG

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

Matte (Кайма). Уместнее было бы название "имитация прозрачности". Пара метр становится доступным для изменения, если изображение содержит про зрачные области. В отличие от GIF, формат JPEG не поддерживает прозрачности и мы должны указать Adobe PhotoShop, каким цветом эти области залить. Соответствующий цвет можно выбрать из раскрывающегося списка.

Таблица цветов)

Таблица цветов).

На Рисунок 8.4 представлено диалоговое окно команды Save For Web... (Сохранить для Web...).
Начнем по порядку рассматривать состав и назначение вкладок, меню и инструментов.
Большую часть диалогового окна занимает область просмотра. С помощью четырех вкладок можно настроить следующие режимы отображения:

Original (Оригинал) — просмотр оригинального изображения без влияния изменений;

Optimized (Оптимизированное) — вид оптимизированного изображения без оригинала;

2-Up (2 вида) — оригинал и один из оптимизированных вариантов;

4-Up (4 вида) — оригинал и три варианта оптимизации, естественно, это самый наглядный режим.

Таблица LUT (lookup table) — таблица

Таблица LUT (lookup table) — таблица поиска цвета — генерируется PhotoShop. Она служит предметным указателем или индексом, поэтому процесс называется индексированием.

Uniform (Однородный). Создает однородное распределение цветов спектра. Практически не используется;

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

Perceptual (Перцепционный). Создает заказную таблицу поиска цвета, отдающую приоритет тем оттенкам, которые четко различает человеческий глаз;

Selective (Избирательный). Создает таблицу поиска цвета, похожую на перцепционную, но основанную на ключевых цветах изображения. Предпочтение отдается web-цветам;

Adaptive (Адаптивный). Создает заказную таблицу из тех цветов спектра, которых больше в изображении. Игнорирует все палитры системы и web-палитру;

Совет 1

Наиболее приемлемые результаты обычно дает режим Local (Adaptive) (Локальный (Адаптивный)).

Master (Главный). Становится доступным при двух и более одновременно открытых файлах. Применяется для создания таблицы поиска цвета, в которой содержатся цвета всех открытых изображений. Используется для пакетной обработки изображений, которые впоследствии могут быть записаны на компакт-диск или другой носитель информации. Работает по тем же алгоритмам сокращения количества цветов, что и режим Local (Локальный);

Custom (Заказной). Позволяет пользователю создать самому таблицу поиска или загрузить ее с диска. Используется при создании изображений для мультимедийных приложений, в web-графике почти не применяется. При выборе этого режима появляется диалоговое окно Color Table (

Таблица поиска цвета) где можно

Таблица поиска цвета), где можно выбрать следующие варианты:

Custom (Заказная) — предоставляет возможность самостоятельного создания таблицы;

Black Body (Темный фон) — уничтожает цвета сине-зеленой части спектра, оставляя черный, красный, оранжевый, желтый и белый.

Grayscale (Оттенки Серого) — изображение становится полутоновым;

Spectrum (Спектральная) — оставляет только цвета спектра;

System (Системная) — системная таблица Windows или Mac OS;

Previous (Предыдущий). Этот режим использует последнюю таблицу поиска, созданную командой Indexed Color... После использования режима Master (Главный) становится режимом по умолчанию. Подходит при необходимости создания нескольких изображений, выдержанных в едином стиле.

Примечание 3

До применения команды Indexed Color... в текущем сеансе работы режим Previous (Предыдущий) недоступен.
ВНИМАНИЕ. После перевода изображения в режим индексированных цветов его нельзя редактировать. Большинство инструментов и команд не работают или работают не так, как того следовало ожидать.
Изменяя параметр Colors (Цвета), мы можем выбрать количество используемых цветов. Чем меньше используется цветов, тем меньше будет размер файла.
Параметр Forced (Защищенные) позволяет принудительно ввести в таблицу некоторые цвета. Они не изменяются при выборе остальных цветов.
Возможные значения:

None (Отсутствует) — предустановленные цвета в таблицу не вводятся. Для цветов, сформированных на основе изображения, в палитре остается больше позиций;

Black and White (Черный и белый) — в палитре в любом случае будут присутствовать черный и белый цвета;

Primaries (Основные) — в палитру вводятся восемь основных цветов: черный, белый, красный, зеленый, синий, голубой, темно-красный и желтый;

Web — палитра будет содержать 216 цветов web-палитры (безопасной палитры).

Флажок Transparency (Прозрачность) позволяет сохранить прозрачные области изображения. Для их обозначения выделяется один из цветов палитры. Обратите внимание: так как прозрачность обозначается одним цветом, то плавное изменение прозрачности пикселов в режиме индексированных цветов невозможно. Вторая группа параметров — Options (Настройки).
Параметр Matte (Кайма) доступен при наличии прозрачности и используется совместно с флажком Transparency (Прозрачность). Если этот флажок установлен, то указанный цвет заполнит и полупрозрачные, и прозрачные пикселы.
Совет 2
Совет 2

Лучше всего выбрать цвет, соответствующий фону web-страницы.
Параметр Dither (Сглаживание) определяет стиль удаления "лишних" цветов. Искажения, возникающие при сглаживании, наиболее заметны при использовании web-палитры. Поскольку мы делаем акцент на web-графике, рассмотрим подробнее и проиллюстрируем режимы сглаживания.
Возможные режимы (Рисунок 8.2):

None (Отсутствует) — не контролирует корректную цветопередачу, подходит для "простых" изображений, не содержащих теней и плавных тональных переходов;

Diffusion (Диффузия) — распределяет цвета по специальному алгоритму, не создающему узора и размывает переходы между различными цветами;

Pattern (Узор) — сглаживает цвета с помощью геометрического узора (этот узор может довольно четко проступить на результирующем рисунке);

Noise (Шум) — хаотически смешивает пикселы по всему изображению, не создавая узора.

Параметр Amount (Степень) доступен в случае использования режима сглаживания Diffusion (Диффузия) и позволяет контролировать его степень. Чем меньше значение, тем меньше количество используемых цветов и, соответственно, размер файла.

Таблица поиска цветов) и Image

Таблица поиска цветов) и Image Size (Размер изображения) — аналогичны командам Image > Mode > Color Table... (Изображение > Режим > Таблица поиска цветов...) и Image > Image Size... (Изображение > Размер изображения...), рассмотренным в предыдущей главе.

В правом верхнем углу вкладки Color Table (

Таблица поиска цветов) (Рисунок

Таблица поиска цветов) (Рисунок 8.9) расположена кнопка

В диалоговом окне команды Export

Рисунок 8.14. В диалоговом окне команды Export > Paths to Illustrator... необходимо указать название файла и экспортируемые контуры

Вид диалогового окна команды Image

Рисунок 8.1. Вид диалогового окна команды Image > Mode t Indexed Color...


Вкладка Palette (Палитра) позволяет выбрать способ вычисления цветов по таблице поиска. Существуют следующие режимы:

Exact (Точный). Используется по умолчанию, если изображение содержит менее 256 цветов (в том случае, если оно высококонтрастное или черно-белое);

System (Системный). Представлен в двух вариантах: Windows и Mac OS. Используется при создании фоновых рисунков, обоев или других элементов рабочего стола;

Web. Используется браузерами, применяется для вывода изображения на 8-битовый монитор. Включает те 216 цветов, значения R, G и В которых нацело делятся на 51, то есть эта 216-цветная таблица LUT является пересечением множеств цветов палитр систем Windows и Macintosh; Примечание 2
Примечание 2

Вид диалогового окна при сохранении

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

Image Options (Настройки изображения). Изменяемым параметром является Quality (Качество). Он служит для задания степени сжатия изображения. Чем ниже значение параметра, тем выше сжатие (меньше размер файла). Качество изображения может значительно ухудшиться при увеличении степени сжатия. Совет 3


В большинстве случаев оптимальной является степень сжатия около 7. Однако в каж-дом случае ее стоит подбирать индивидуально. Этому способствует то, что во время выбора параметров формата JPEG в окне изображения отображается, как сжатие скажется на рисунке. При помощи мыши вы можете "прокручивать" изображение в окне. Щелкая мышью при нажатой клавише Сtrl, можно увеличить изображение, а при нажатой клавише Alt — уменьшить.

Format Options (Настройки формата). Большинство web-браузеров поддерживает два варианта формата JPEG: базовый и прогрессивный (расширенный). Базовый, или последовательно отображаемый формат, создает изображения путем построчного вывода на экран, а прогрессивный выводит изображения на экран за несколько проходов. Формат Baseline Optimized (Оптимизированный базовый) отличается от Baseline ("Standard") (Базовый стандартный) тем, что за счет использования улучшенного способа кодирования Хаффмана позволяет уменьшить размер файла на 5-10%. При выборе формата Progressive (Расширенный) изображение будет выводиться на экран не построчно, а за несколько проходов. На каждом из проходов выводится полное изображение, качество которого от прохода к проходу улучшается. Параметр Scans (Сканирование) задает число проходов. Чем выше значение этого параметра, тем более плавно улучшается качество изображения. Кроме того, при большем числе проходов файл занимает немного меньше места.

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

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

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

Вид и расположение меню параметров

Рисунок 8.6. Вид и расположение меню параметров


В этом меню собраны команды работы с настройками, команда Repopulate Views (Перемещение видов) и Optimize To File Size... (Оптимизировать размер файла...). Последнюю команду мы рассмотрим подробнее ввиду ее исключительной полезности (Рисунок 8.7.). Для web-графики, в которой идет жесткая борьба за каждый килобайт, возможность автоматически "отвоевать" уменьшение размера файла лишней не является. Для работы этой команды требуется:

Вид и расположение меню управления

Совет 6

Используя кнопки Prev (Предыдущий) и Next (Следующий), а также список, располо женный над элементами, определяющими параметры, вы можете быстро переключаться между режимами задания тех или иных настроек сохранения страницы.

Вид изображения с применением

Рисунок 8.2. Вид изображения с применением различных режимов: при отсутствии сглаживания (а); режим Diffusion (б); режим Pattern (а); режим Noise (г)


Флажок Preserve Exact Colors (Сохранить точные цвета) доступен в случае исполь зования режима сглаживания Diffusion (Диффузия) и сохраняет области одина нового цвета неразмытыми.
Установка флажка Preview (Предварительный просмотр) позволяет оценить ре зультаты, не выходя из диалогового окна.

Внешний вид диалогового окна для настройки фона

Рисунок 8.11. Внешний вид диалогового окна для настройки фона


Внешний вид диалогового окна при настройке HTML показан на Рисунок 8.10. Для настройки HTML задаются следующие группы параметров:

Formatting (Форматирование). Из четырех ниспадающих меню выбираются варианты написания тегов (Tags Case (Регистр тегов) и Attribs Case (Регистр атрибутов)), значения параметра Indent (Абзац) и Line Ending (Окончание линии). Флажок Always Quote Attributes (Всегда использовать кавычки) указывает на то, что значения параметров тегов следует заключать в кавычки;

Coding (Кодирование). Флажок Include Comments (Включить комментарии) добавляет комментарии к коду HTML;

Slice Output (Выходные параметры фрагментов). Каскадная таблица стилей генерируется при выборе переключателя Generate CSS (Сгенерировать CSS), при этом требуется указать, по какому признаку следует вызывать элементы web-страницы. Это задается при помощи параметра Referenced (Ссылки по): "By ID" ("По идентификатору"), "Inline" ("Встроенный стиль") или "By Class" ("По классу"). При выборе переключателя Generate Table (Сгенерировать таблицу) создается таблица. Ее параметры выбираются из трех ниспадающих меню: Empty Cells (Пустые ячейки), TD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители).

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

Для параметров ТD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители) лучше установить значение Always (Всегда) вместо установленного по умолчанию Auto (Авто).
Параметры фона генерируемой web-страницы задаются в окне, показанном на Рисунок 8.11.
Здесь необходимо указать, является изображение картинкой или фоном, выбрать фоновый рисунок и определить его цвет.
Внешний вид диалогового окна при настройке параметров сохранения файлов показан на Рисунок 8.12.
В этом диалоговом окне вашему вниманию предлагаются три вкладки:

File Naming (Название файла). Определяет принцип присвоения названия файлу;

Filename Compatibility (Совместимость названий файлов). Указывает, в каких системах, кроме Windows, может использоваться файл;

Optimized Files (Оптимизировать файлы). Упрощает рутинную работу: копирует фоновый рисунок, записывает рисунки в одну папку и добавляет знак авторского права.

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

Внешний вид диалогового окна для настройки HTML

Рисунок 8.10. Внешний вид диалогового окна для настройки HTML

Внешний вид диалогового окна для настройки сохранения файлов

Рисунок 8.12. Внешний вид диалогового окна для настройки сохранения файлов

Внешний вид диалогового окна для

Рисунок 8.13. Внешний вид диалогового окна для настройки сохранения фрагментов рисунка

Photoshop 7 и web дизайн

А Внешний вид диалогового окна

Рисунок 9.27, а. Внешний вид диалогового окна команды Color Picker в PhotoShop

Автоматическая оптимизация настроек

Автоматическая оптимизация настроек

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

для текущего изображения необходимо выбрать формат и настройки сжатия на панели оптимизации;

значок Примечание 3
Примечание 3


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

Щелчок на значке дроплета

Б Внешний вид диалогового окна

Рисунок 9.27,б. Внешний вид диалогового окна команды Color Picker в ImageReady


Как видно из Рисунок 9.27, а и 9.27, б эти различия связаны с отсутствием цветовых моделей Lab и CMYK.

Диалоговое окно Save optimized

Рисунок 9.35. Диалоговое окно Save optimized settings as droplet в котором можно задать название дроплета и его размещение

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

Для использования дроплета файл или папку нужно перетащить на значок дроп-лета на рабочем столе. После этого появится диалоговое окно Batch progress (Процесс выполнения).



В этом диалоговом окне можно прервать, продолжить или остановить процесс выполнения дроплета.

Оптимизация изображений

Оптимизация изображений

Оптимизацией изображений в программе ImageReady управляет панель оптимизации (Рисунок 9.28). Оптимизировать можно пять форматов файлов: GIF, JPEG, PNG-8, PNG-24 и WBMP. Количество параметров оптимизации контролируется кнопкой

Отличия инструментов и команд PhotoShop и ImageReady

Отличия инструментов и команд PhotoShop и ImageReady


Программы, безусловно, похожи, но не являются сестрами-близнецами. Рассмотрим, чем отличаются друг от друга инструменты и команды меню PhotoShop и ImageReady (Рисунок 9.1, табл. 9.1).
Как видно из рисунка, некоторые инструменты являются общими для обеих программ. Работа с этими инструментами описана в соответствующей главе.

Панель оптимизации для форматов GIF (слева) и JPEG (справа)

Рисунок 9.29. Панель оптимизации для форматов GIF (слева) и JPEG (справа)


При оптимизации формата GIF панель включает в себя семь строк (Рисунок 9.29, слева).

Меню формата файла и значение параметра Lossy (Потери). Сжатие с потерями сокращает размер файла за счет избирательного удаления данных. Оптимальным значением является 5-10, что приводит к уменьшению размера файла на 10-20%. Параметр становится недоступным при использовании флажка Interlaced (Чересстрочная загрузка) или алгоритмов сглаживания Noise (Шум) и Pattern (Узор). Для оптимизации степени потерь можно использовать альфа-канал. В этом случае белые области маски дают высокое качество, а черные — низкое. Для создания нового альфа-канала, основанного на текущем выделении, применяется команда Select > Save Selection... (Выделение > Сохранить выделение...) Кнопка

Панель оптимизации для форматов

Рисунок 9.34. Панель оптимизации для форматов PNG — 8 (a), PNG — 24 (б) и WBMP (в)


Как видно из рисунка, специфических настроек они не имеют, а имеющиеся полностью совпадают с описанными выше.

Подготовка и оптимизация изображений

Подготовка и оптимизация изображений

Отличия инструментов и команд PhotoShop и ImageReady

Работа с цветом

Оптимизация изображений

Автоматическая оптимизация настроек

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

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

Работа с цветом

Работа с цветом


Работой с цветом в ImageReady управляет панель цвета. Необходимо обратить внимание на некоторые отличия этой панели от аналогичной панели PhotoShop (Рисунок 9.26). Меню панели цвета появляется при нажатии на кнопку
Первое, что бросается в глаза, это отсутствие цветовых моделей Lab и CMYK в меню панели цвета. Следующее отличие — дополнительные команды работы с цветом Invert (Инвертировать) и Complement (Дополнить).
Следует отметить также различие команд Color Picker (Определение цвета).

Отличия функций инструментов

Таблица 9.1. Отличия функций инструментов рисования программах PhotoShop и ImageReady

PhotoShop	ImageReady
Можно использовать инструменты рисования для создания контуров	Контур создать нельзя
На одном слое можно нарисовать много фигур и потом указать, как они должны перекрываться	На слое можно нарисовать только одну фигуру
После того, как фигура нарисована, ее можно редактировать	Фигуры можно только двигать и изменять

В PhotoShop (а) и ImageReady (6)

Рисунок 9.1. В PhotoShop (а) и ImageReady (6) панели инструментов немного отличаются друг от друга


Исходя из этого можно сделать вывод о том, какие изображения имеет смысл создавать и обрабатывать в ImageReady, а какие нет.
К различиям между командами также стоит отнестись внимательно, чтобы не стало сюрпризом, что какая-либо известная из PhotoShop команда работает не так или не совсем так, как ожидалось. И, естественно, рассмотрим работу команд, которые есть только в ImageReady.
1. Меню File (Файл) (Рисунок 9.2). Команда File > Export Original... (Файл > Экспорт оригинала...) делает копию оригинала, предварительно произведя сведение слоев, и позволяет сохранить эту копию в разных форматах файлов. Форматы могут быть следующими: Photoshop (*.psd), BMP (*.bmp), PCX (*.pcx), Targa (*.tga) и TIFF (*.tif). Такая информация, как нарезка и параметры оптимизации, не сохраняется, если формат отличен от PSD.
Совет 1
Совет 1

Если ImageReady не позволяет сохранить файл в том формате, который вам нужен, всегда можно сделать это в программе PhotoShop.
Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет изображение с настройками, указанными при оптимизации (см. раздел "Оптимизация изображений" данного урока).
Команда File > Save Optimized As... (Файл > Сохранить оптимизированное как...) позволяет изменить настройки при сохранении (Рисунок 9.3).

Внешний вид диалогового окна Modify

Рисунок 9.30. Внешний вид диалогового окна Modify Lossiness Setting

Меню алгоритма сокращения "лишних" цветов и максимальное количество цветов изображения. Алгоритмы сокращения были подробно рассмотрены в соответствующей главе. Для автоматического определения количества цветов используется значение Auto (Авто), при этом программа подберет оптимальное количество на основании частоты повторения цветов в изображении. Для оптимизации сокращения количества цветов можно использовать альфа-канал. В этом случае области маски определяют, какие области изображения наиболее важны для создания таблицы LUT, показывая алгоритму сокращения "нужные" пикселы (белые области) и "ненужные" пикселы (черные области). Кнопка справа от меню алгоритма сокращения цветов открыва ет диалоговое окно Modify Color Reduction (Изменить сокращение цветов), которое представлено на Рисунок 9.31. В этом окне можно выбрать нужный альфа-канал из списка и нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)).

Меню алгоритма сглаживания и степень сглаживания. Алгоритмы сглаживания были подробно рассмотрены в соответствующей главе. Степень сглаживания указывается при выборе алгоритма Diffusion (Диффузия). Для оптимизации степени сглаживания можно использовать альфа-канал. В этом случае белые области маски определяют области изображения с высокой степенью сглаживания, черные — с низкой. Кнопка в правом конце строки от крывает диалоговое окно Modify Dither Setting (Изменить настройки сгла живания), которое представлено на Рисунок 9.32. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить степень сглаживания. Высокая степень сглаживания определяется величиной Maximum (Максимум). Для ее установки нужно выполнить одно из трех следующих действий: перетащить правый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкая степень сглаживания определяется величиной Minimum (Минимум), которой соответствует левый (черный) бегунок.
Рисунок 9.31. Внешний вид диалогового окна Modify Color Reduction

Рисунок 9.32. Внешний вид диалогового окна Modify Dither Setting

Флажок Transparency (Прозрачность) и значение параметра Matte (Кайма). Если изображение содержит прозрачные области, можно либо сохранить их либо залить определенным цветом. Установленный флажок Transparency (Прозрачность) сохраняет полностью прозрачные пикселы как прозрачные, а полупрозрачные заливает указанным цветом или делает полностью прозрачными (непрозрачными) в зависимости от выбранного значения параметра Matte (Кайма). Сброшенный флажок Transparency (Прозрачность) заливает полностью прозрачные и полупрозрачные пикселы указанным цветом.

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

Флажок Interlaced (Чересстрочная загрузка) и параметр Web Snap (Цвета для Web). Чересстрочная загрузка изображения в браузере позволяет оценить необходимость его полной загрузки до окончания процесса. Чтобы автоматически заменить используемые в изображении цвета на их web-эквиваленты, нужно перетащить бегунок Web Snap (Цвета для Web) или ввести численное значение. Эта операция уточнит допустимое количество заменяемых цветов. Чем выше значение этого параметра, тем больше цветов подлежит замене.

Флажок Use Unified Color Table (Использовать унифицированную таблицу замены цвета) используется при необходимости унификации всех состояний анимированных кнопок.

При оптимизации формата JPEG панель состоит из пяти строк (Рисунок 9.29, справа).

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

ВНИМАНИЕ. Не забывайте, что оптимизированный формат JPEG не поддерживается некоторыми старыми браузерами и программами.


Рисунок 9.33. Внешний вид диалогового окна Modify Quality Setting

Меню степени сжатия и значение параметра качества. Чем выше степень сжатия, тем меньше размер файла. Основная задача заключается в нахождении наилучшего соотношения размер/качество опытным путем. Для оптимизации качества можно использовать альфа-канал. В этом случае белые области маски определяют области изображения с высоким качеством, черные — с низким. Кнопка в правом конце строки открывает диалоговое окно Modify Quality Setting (Изменить настройки качества), которое представлено на Рисунок 9.33. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить качество. Высокое качество определяется величиной Maximum (Максимум). Для ее установки нужно выполнить одно из трех следующих действий: перетащить правый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкая степень качества определяется величиной Minimum (Минимум), которой соответствует левый (черный) бегунок.

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

Флажок ICC Profile (Профиль ICC) и значение параметра Matte (Кайма). Установка флажка ICC Profile (Профиль ICC) позволяет использовать цветовой профиль. Параметр Matte (Кайма) позволяет имитировать прозрачность.

Флажок Preserve EXIF Metadata (Сохранить информацию о файле) используется при необходимости сохранения дополнительной информации.

На Рисунок 9.34 представлены остальные три формата, которые можно оптимизировать. Они не так популярны, как форматы, рассмотренные выше. Причина заключается в том, что они не поддерживаются многими, особенно старыми, браузерами.

Внешний вид меню File для PhotoShop

Рисунок 9.2. Внешний вид меню File для PhotoShop (а) и ImageReady (б)
Рисунок 9.3. Диалоговое окно команды File > Save Optimized As...
Изменить можно следующие параметры:

тип файла: HTML — код и изображения (*.html), только изображения (*.gif) и только HTML — код (*.html);

настройки: заказные, фонового изображения, по умолчанию и другие;

нарезку: все фрагменты или выделенные.

Команда File > Output Settings (Файл > Выходные настройки) отличается от соответствующей команды Photoshop только пунктом Image Maps... (Карты-изображения...), который подробно будет рассмотрен ниже (см. урок 12 "Карты-изображения в ImageReady").
Команда File > Update HTML... (Файл > Обновить HTML...) предназначена для обновления связей в файлах HTML (Рисунок 9.4).

Рисунок 9.4. Диалоговое окно команды File > Update HTML...
В этом окне предоставляется возможность сохранения изображений и доступа к выходным настройкам.
Команды File > Place... (Файл > Поместить...) внешних различий не имеют, но если в Photoshop помещать можно только файлы форматов *.ai, *.eps, *.pdf и *.pdp, то ImageReady разрешает помещать файлы любых читаемых форматов.
Команда File > Import... (Файл > Импорт) позволяет получить файлы из внешних источников: импортировать папку с рисунками как кадры (подробно этот процесс рассмотрен ниже, импортировать изображение PDF, сканировать изображение и выбрать сканер.
Команда File > File Info... (Файл > Информация о файле...) гораздо скромнее, чем в Photoshop, можно указать только заголовок и автора.
Команда File > Preview In (Файл > Просмотр в) предоставляет возможность просмотреть изображение в любом установленном браузере.

а	б

Рисунок 9.5. Внешний вид меню Edit для PhotoShop (a) и ImageReady (б)
2. Меню Edit (Правка) Команды подменю Edit > 0Copy HTML Code (Правка > Копировать HTML-код) обеспечивает копирование HTML-кода для всех нарезанных фрагментов изображения (Copy All Slices (Копировать все фрагменты)) или выделенных фрагментов (Copy Selected Slices (Копировать выделенные фрагменты)), а также соответствующего фрагментам изображения блоков программ JavaScript (Copy Preloads (Копировать программы)).
Команда Edit > Copy Foreground Color as HTML (Правка > Копировать текущий цвет как HTML) возвращает шестнадцатеричное значение текущего цвета. Команда Edit > Fill... (Правка > Заливка...) в отличие от подобной команды в Photoshop не позволяет использовать заказной узор.
3. Меню Image (Изображение) Основное отличие заключается в количестве команд подменю Adjustments (Коррекция). Как видно из рисунка, большинство команд коррекции изображения в ImageReady отсутствует.

а

б
Рисунок 9.6. Внешний вид меню Image и подменю Adjustments для PhotoShop (a) и ImageReady (б)

Рисунок 9.7. Диалоговое окно команды Image > Adjustments > Gamma...
Команда Image > Adjustments > Gamma... (Изображение > Коррекция > Гамма...) позволяет настроить яркость изображения с учетом используемой системы (Рисунок 9.7).
Примечание 1


Параметр гамма измеряет яркость полутонов, отображаемых монитором. ОС Windows использует значение гамма выше, чем Mac OS, поэтому одно и то же изображение темнее для Windows, чем для Macintosh. Изображения, созданные в Photoshop 4.0 или более ранней версии, используют по умолчанию значение гамма, равное 1,8 (системное значение Mac OS) и должны быть скорректированы для Windows. Изображения, созданные в Photoshop 5.0 или более поздней версии, используют по умолчанию значение гамма, равное 2,2 (системное значение Windows), поэтому коррекции не требуют.
Как видно из рисунка, можно провести автоматическую настройку для переноса изображения из Windows в Macintosh и обратно.
ВНИМАНИЕ. Изменения, проведенные с помощью команды Image > Adjustments > Gamma... (Изображение " Коррекция > Гамма...), изменяют величину пикселов. Команды же из меню View > Preview корректируют параметр гамма, не изменяя величину пикселов изображения.
Команда Image > Duplicate Optimized... (Изображение > Повторить оптимизированное...) делает копию оптимизированного изображения, в отличие от команды Image > Duplicate... (Изображение > Повторить...), которая делает копию оригинала.
Команда Imaget Image Size... ( Изображение > Размер изображения...) позволяет изменить размер изображения, не теряя качества и предоставляет дополнительные настройки (Рисунок 9.8).
Вкладка Current Size (Текущий размер) носит чисто информативный характер, на вкладке New Size (Новый размер) задаются нужные параметры: ширина, длина или процентное соотношение. Флажок Constrain Proportions (Сохранить пропорции) не позволяет только удлинять или только расширять изображение. Из меню Quality (Качество) можно выбрать способ искажения пикселов (бикубический или "ближайший сосед").
Поскольку изменение размеров изображения — часто используемый шаг обработки, его можно автоматизировать с помощью вкладки Action Options (Настройки действия). Для этого нужно записать указанную ниже последовательность действий.

Начать запись действия.

Выполнить команду Image > Image Size... (Изображение > Размер изображения...), задав нужные параметры изображения.

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

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


Если вы хотите получить доступ к своей палитре при оптимизации GIF или PNG изображений, сохраните ее в папке Adobe PhotoShop > Presets > Optimized Colors. Чтобы применить к изображению свою палитру, нужно найти ее название в меню алгоритма сокращения количества цветов панели оптимизации. Подробнее этот вопрос будет рассмотрен дальше (см. Оптимизация изображений).

Внешний вид меню панели оптимизации

Рисунок 9.28. Внешний вид меню панели оптимизации


Это меню управляет сохранением и удалением настроек, автоматической оптимизацией, установками обновления и оптимизацией размера файла.
Команды Show Options (Показать параметры) и Hide Options (Спрятать параметры) управляют отображением на панели дополнительных параметров форматов.
Команды Save (Delete) Settings (Сохранить (Удалить) настройки) соответственно сохраняют или удаляют набор настроек, заданный пользователем.
Команды Repopulate Views (Перемещение видов) и Optimize to File Size... (Оптимизировать размер файла...) совпадают с командами Adobe PhotoShop и подробно рассмотрены в соответствующем уроке.
Команда Create Droplet... (Создать дроплет...) будет подробно рассмотрена ниже (см. раздел "Автоматическая оптимизация настроек" данного урока).
Если вы не хотите тратить время на обновление изображения после каждого изменения какого-либо параметра, нужно снять флажок команды Auto Regenerate (Автообновление). Команда Regenerate (Обновить) используется при снятом флажке команды Auto Regenerate (Автообновление) или после принудительного прерывания оптимизации.
Рассмотрим вид панели оптимизации для каждого формата.
Как уже не раз говорилось выше, самыми распространенными форматами изображений в web-графике являются GIF и JPEG. Внешний вид панели оптимизации для этих форматов (в режиме отображения дополнительных параметров) представлен на Рисунок 9.29.

Внешний вид панели цвета и соответствующего

Рисунок 9.26. Внешний вид панели цвета и соответствующего меню для PhotoShop (а, в) и ImageReady (б, г)

Photoshop 7 и web дизайн

Диалоговое окно команды Optimize

Рисунок 10.8. Диалоговое окно команды Optimize Animation... (Оптимизировать анимацию...)

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

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

Совет 1


При оптимизации цветов анимированного изображения нужно использовать адаптивную, перцепционную или избирательную палитры.

Диалоговое окно команды Paste Frames ...

Рисунок 10.2. Диалоговое окно команды Paste Frames...


Рассмотрим предложенные методы вставки кадров.

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

Paste Over Selection (Вставить поверх выделенных). Добавляет содержимое вставляемых кадров как новые слои. Если вставлять кадры в то же изображение, использование этого метода удваивает количество слоев. Так же, как и в предыдущем методе, "свежевставленные" слои становятся видимыми, старые скрываются.

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

Флажок Link Added Layers (Связать добавленные слои) используется при необходимости перемещения вставленных слоев как единого целого.
Для автоматического создания кадров между двумя уже существующими используется специальная команда Tween... (Промежуточные кадры...). Эта команда необходима для придания плавности движению, изменению прозрачности или переходам цвета.
ВНИМАНИЕ. Промежуточные кадры создаются только между смежными. Первый и последний кадры исходной последовательности тоже являются смежными (если рассматривать ее как зацикленную), причем промежуточные кадры добавятся после последнего кадра).
Итак, при выполнении команды Tween... (Промежуточные кадры...) из меню панели анимации или нажатии на кнопку

Диалоговое окно команды Tween ...

Рисунок 10.3. Диалоговое окно команды Tween...


Список Tween With (Промежуточные кадры между) позволяет выбрать, с какими кадрами работать:

Selection (Выделенные) — с выделенными;

Next Frame (Следующий кадр) — с текущим и следующим;

Previous Frame (Предыдущий кадр) — с предыдущим и текущим.

Количество кадров, которое необходимо добавить, указывается в поле Frames to Add (Добавить кадров).
ВНИМАНИЕ. Чем больше кадров в анимированном изображении, тем больше конечный размер файла.
Вкладка Layers (Слои) предназначена для выбора участвующих в процессе выполнения команды слоев: All Layers (Все слои) либо Selected Layers (Выделенные слои).
Рассмотрим флажки вкладки Parameters (Параметры):

Position (Расположение) изменяет расположение содержимого слоя в добавляемых кадрах;

Opacity (Прозрачность) изменяет непрозрачность новых кадров;

Effects (Эффекты) изменяет настройки эффектов слоя в новых кадрах.

Нажав на кнопку

Диалоговое окно Set Loop Count

Рисунок 10.4. Диалоговое окно Set Loop Count


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

Использование слоев для редактирования кадров

Использование слоев для редактирования кадров

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

Меню установки времени задержки

Рисунок 10.5. Меню установки времени задержки (а) и диалоговое окно Set Frame Delay (б)


ВНИМАНИЕ. Для уточнения времени задержки необходимо просматривать анимированное изображение в браузере.

Метод удаления фона

Метод удаления фона

Метод удаления фона применяется в том случае, когда анимированное изобра жение содержит один перемещающийся объект. Меню метода появляется npi щелчке на кадре правой кнопкой мыши. Кадр может находиться в одном из тре: состояний в зависимости от того, какой флажок установлен: Automatic (Автома тическое определение), Restore to Background (Восстановить фон) или Do Not Dispos (Не удалять) (Рисунок 10.7).

Набор кадров с прозрачным фоном

Рисунок 10.7. Набор кадров с прозрачным фоном. Вид анимации при установке флажка Restore to Background (а) и при установке флажка Do Not Dispose (б)


ВНИМАНИЕ. При использовании параметра оптимизации Redundant Pixel Removal (Перемещение лишних пикселов) необходима установка флажка Automatic (Автоматическое определение).

Оптимизация анимированных изображений

Оптимизация анимированных изображений

Анимированные изображения поддерживаются только форматом GIF, поэтому их можно оптимизировать так же, как и неанимированные файлы того же формата.
ВНИМАНИЕ. Форматы JPEG и PNG не поддерживают анимацию. В случае сохранения анимированного изображения в одном из этих форматов браузер отобразит только первый кадр.
Помимо обычной оптимизации формата GIF, можно оптимизировать кадры, содержащие только области, меняющиеся от кадра к кадру. Для такой оптимизации нужно выполнить приведенную ниже последовательность действий.

Выполнить команду Optimize Animation... (Оптимизировать анимацию...) из меню панели анимации (Рисунок 10.8).

Работа с кадрами

Работа с кадрами

Добавить кадры можно двумя способами.

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

File > Open (Файл > Открыть) и выбрать нужный PSD-файл;

Make Frames From Layers (Сделать кадры из слоев) в меню палитры анимации.

Создать последовательность кадров из набора файлов. Предназначенные для этого изображения должны иметь одинаковый размер, одинаковый формат и храниться в одной папке. Для удобства можно присвоить им названия, соответствующие порядку отображения кадров. Команда, соответствующая этому способу: File > Import > Import Folder As Frames (Файл > Импорт > Импортировать папку как кадры).

Для создания кадра можно либо воспользоваться кнопкой

Сохранение анимированных изображений

Сохранение анимированных изображений

Сохранить анимированные изображения можно в виде последовательности кадров в графическом формате GIF либо в формате QuickTime. Чтобы сохранить анимацию в формате GIF, необходимо оптимизировать ее, выполнив команду Optimize Animation... (Оптимизировать анимацию...) из меню панели анимации и сохранить файл с помощью команды File > Save... (Файл > Сохранить...).
Для сохранения анимации в формате QuickTime нужно выполнить команду File > Export Original... (Файл > Экспорт оригинала...) и выбрать из выпадающего меню формат QuickTime.

Создание анимированных изображений

Создание анимированных изображений

Работа с кадрами

Использование слоев для редактирования кадров

Метод удаления фона

Оптимизация анимированных изображений

Сохранение анимированных изображений

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

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

Внешний вид панели анимации (а) и соответствующее меню (б)

Рисунок 10.1. Внешний вид панели анимации (а) и соответствующее меню (б)


Изменить размер миниатюр кадров можно с помощью команды Palette Options... (Настройки панели...) из меню панели анимации.
Основным способом создания анимированных изображений является преобразование каждого слоя многослойного изображения в отдельный кадр. В этом случае анимированное изображение может являться одним из состояний анимированной кнопки.

Внешний вид панели слоев (а) и соответствующее меню (б)

Рисунок 10.6. Внешний вид панели слоев (а) и соответствующее меню (б)


Локальные изменения затрагивают только кадры, выделенные на панели анимации. При этом к соответствующим слоям можно применить команды и настройки панели слоев (прозрачность, режим наложения, видимость, расположение и эффекты).
Глобальные изменения относятся ко всем кадрам анимированного изображения. При этом возможно применение инструментов рисования и редактирования, команд цветовой и тоновой коррекции, фильтров и текста.
Новый слой становится видимым во всех кадрах. Чтобы скрыть слой в отдельном кадре, необходимо выделить кадр на панели анимации и воспользоваться соответствующей командой панели слоев.
Для автоматического добавления слоя в каждый новый кадр в меню панели анимации есть команда Add Layer to New Frames (Добавить слой в новые кадры), работающая по принципу флажка. В результате выполнения этой команды появляется новый слой, который становится видимым в новом кадре и скрывается в остальных. Эта команда позволяет сэкономить время в том случае, когда необходимо добавить новый видимый элемент в каждый кадр.
Для каждого кадра анимированного изображения создается свой "сложносочиненный" слой, соответствующий содержимому всех слоев кадра. Исходные слои кадра скрыты, но находятся в целости и сохранности.
ВНИМАНИЕ. При сохранении анимации как GIF-изображений слои сводятся и их дальнейшее редактирование становится недоступным. Чтобы избежать этого, необходимо сохранение в формате PSD.
Команда Flatten Frames into Layers (Создать из кадров слои) из меню панели ани мации обеспечивает созданиеслоев на основе содержимого каждого кадра.
При использовании команд панели слоев все изменения производятся в теку щем выделенном кадре. Чтобы применить их ко всем кадрам, необходимо вы полнить команду Match Layer Across Frames (Повторить слой во всех кадрах) и меню панели анимации, предварительно выделив слой, содержащий нужный элемент.

Photoshop 7 и web дизайн

Диалоговое окно команды Edit >

Рисунок 11.5. Диалоговое окно команды Edit > Preferences > Image Maps...


Рассмотрим параметры настройки.
Флажок Show Lines Only (Показать только линии) позволяет отображать только линии области и связан с вкладкой Color Adjustment (Регулирование цвета). Флажок Show Bounding Box (Показать рамку) заключает в прямоугольную рамку эллиптическую область.
Меню Line Color (Цвет линий) позволяет выбрать из списка цвет линий области Согласно собственному вкусу.
Бегунок Image Map Overlay (Покрытие карты-изображения) вкладки Color Adjustment (Регулирование цвета) становится доступным при снятом флажке Show Lines Only (Показать только линии). Он регулирует яркость выделенной области карты-Изображения.

Картыизображения в ImageReady

Карты-изображения в ImageReady

Создание карт-изображений

Конвертирование карт-изображений

Просмотр карт-изображений

Выбор типа карты-изображения

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

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

Конвертирование картизображений

Конвертирование карт-изображений

Поскольку двигать и выравнивать карты-изображения, созданные на основе слоя, или изменять их размер можно, только редактируя слой, иногда бывает необходимо конвертировать их в "инструментальные". Для этого выбираем нужную карту-изображение инструментом выбора

Панель анимированных графических

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


В меню, появляющемся при нажатии кнопки в правом верхнем углу панели анимированных графических ссылок (Рисунок 11.3, б), к картам-изображениям относятся команды удаления и дублирования. В контекстном меню (Рисунок 11.3, в) представлены команды выделения, удаления и присвоения карте-изображению статуса одного из состояний анимированной графической ссылки, а также команда, управляющая отображением фрагментов нарезки и карт-изображений на панели анимированных графических ссылок.
Перейдем ко второму способу. В этом случае форма карты-изображения опре деляется содержимым слоя, на основе которого она создается (Рисунок 11.4). Когда изменяется содержимое, автоматически изменяется и форма.
Если рисунок, на основе которого требуется создать карту-изображение, содержит несколько слоев, их необходимо предварительно соединить, выполнив ко манду Layer > Merge (Слой > Соединить). После этого выбираем слой на панели слоев и выполняем команду Layer > New Layer Based Image Map Area (Слой > Новый слой, основанный на карте-изображении).

Панель картыизображения управляющая

Рисунок 11.2. Панель карты-изображения, управляющая позиционированием, размерами, настройками (a) и соответствующее меню (б)


В правой части этой панели (Рисунок 11.2) указаны текущие координаты и размеры карты-изображения.
Рассмотрим назначение четырех полей, находящихся слева:

Name (Имя). Позволяет задать имя активной области или изменить автоматически присвоенное. При помощи имени программы внедренные в код страницы могут получать доступ к параметрам элементов документа.

URL. Содержит адрес гиперссылки, который может быть абсолютным или относительным.

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

_blank — в новом фрейме;

_self — в том же фрейме, что и текущий документ;

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

_top — документ будет загружен в текущее окно браузера, он заместит собой все имевшиеся в окне фреймы.

Alt (Эквивалент). Указывает браузеру, какой текст выводится на экран при отсутствии рисунка или в случае, когда курсор находится за пределами карты-изображения.

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

Автоматизированное выравнивание и распределение по холсту областей карт-изображений выполняется аналогично выравниванию слоев (эти операции подробно описаны в части книги, посвященной Adobe PhotoShop). Для того чтобы команды выравнивания стали доступными, необходимо одновременно выбрать по крайней мере две области. Для использования команд распределения нужно выбрать не менее трех областей.
На Рисунок 11.3 показана связь карт-изображений с анимированными графическими ссылками.

Панель настроек инструмента позволяет

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

Просмотр картизображений

Просмотр карт-изображений


При выборе карты-изображения инструментом выбора

Создание картизображений

Создание карт-изображений

Создать карту-изображение можно двумя способами: с помощью соответствующего инструмента или на основании слоя. Рассмотрим первый способ.
В наше распоряжение предоставлены следующие инструменты:

Различия при задании

Таблица 11.1. Различия при задании ссылок с помощью карт-изображений и нарезки

Карта-изображение	Фрагмент изображения
Экспортируется на web-страницу в одном файле с рисунком	Экспортируется на web-страницу как отдельный файл
Возможность создания круглых, многоугольных и прямоугольных ссылок	Предполагает только прямоугольные ссылки

ВНИМАНИЕ. Не рекомендуется совмещать карты-изображения с нарезкой, если в последней уже содержатся гиперссылки: они могут игнорироваться некоторыми браузерами.

Вид панели картыизображения основанной на слое

Рисунок 11.4. Вид панели карты-изображения, основанной на слое


Очевидно, что чем выше параметр качества, тем больше координат нужно запомнить и соответственно больше конечный размер файла.
ВНИМАНИЕ. Для карты-изображения, основанной на слое, команды Duplicate (Дублировать) и Align (Выровнять) становятся недоступными. Чтобы получить доступ к этим командам, нужно конвертировать "слоевую" карту-изображение в "инструментальную". Подробнее процесс конвертирования будет рассмотрен ниже.

Внешний вид диалогового окна команды

Рисунок 11.6. Внешний вид диалогового окна команды File > Output Settings > Image Maps...


На вкладке Type (Тип) представлены пять возможных комбинаций. В зависимости от ваших желаний и договоренности с провайдером, можно выбрать подходящий вариант.
Вкладка Placement (Расположение) предназначена для указания представления карты-изображения (тег <МАР>) в HTML-файле:

Тор (Верх). Располагает тег <МАР> в начале кода;

Body (Содержимое). Располагает тег <МАР> выше, чем (тег включения в web-страницу изображения) для соответствующего фрагмента нарезки;

Bottom (Низ). Описание карты-изображения размещается в конце кода страницы.

Выбор типа картыизображения

Выбор типа карты-изображения

Все карты-изображения по способу использования делятся на две группы: серверного и клиентского типов.

Серверный тип. Работой карты-изображения серверного типа управляет web-сервер, с которого она загружается. В момент выделения активной области браузер посылает web-серверу координаты указателя, где они будут обработаны программой cgi-bin. В обработку входит поиск координат в файле конфигурации и отсылка URL, связанного с активной областью. Естественно, это может значительно замедлить работу.
При выборе этого типа ImageReady создает в добавление к HTML-файлу отдельный файл карты, основанный на настройках выбранного вами сервера. Серверный тип в свою очередь подразделяется еще на два: NCSA и CERN. Они отличаются друг от друга методом описания карт-изображений.
ВНИМАНИЕ. Карты-изображения серверного типа не работают с изображениями, содержащими многочисленные фрагменты нарезки.
ПРИМЕЧАНИЕ. NCSA — Национальный центр приложений для суперкомпьютеров (США) — один из наиболее известных научных центров в области программирования. В этой организации был создан первый графический браузер — Mosaic. CERN — Европейский центр ядерных исследований. В нем была разработана концепция гипертекста и основы современных стандартов Всемирной паутины.

Клиентский тип. Карты-изображения клиентского типа обрабатываются самим браузером на том компьютере, с которого загружается web-страница.
ВНИМАНИЕ. Некоторые устаревшие браузеры могут не справиться с обработкой карты-изобра жения клиентского типа.
Данные карты-изображения, представляющие собой код на языке Java, содержатся в HTML-файле, поэтому обращения к серверу не нужны.

Возможно также одновременное указание обоих типов. Старые браузеры, не работающие с картами-изображениями клиентского типа, проигнорируют их описание и перейдут к известному им серверному типу. Новые браузеры, напротив, проигнорируют серверный тип и перейдут к клиентскому.
Рассмотрим возможности, предоставляемые командой File > Output Settings > Image Maps... (Файл > Выходные настройки > Карты-изображения...) (Рисунок 11.6).

Photoshop 7 и web дизайн

Диалоговое окно команды Rollover State Options ...

Рисунок 12.2. Диалоговое окно команды Rollover State Options...


Состояние можно скопировать и заменить им другое. При этом слои состояния-источника заменят слои состояния-приемника. Скопировать можно кадры анимации и вставить их как состояния (и наоборот — вставить состояния как кадры).
Примечание 1
Примечание 1

Команды копирования из меню панели анимации и панели анимированных кнопок используют внутренний буфер обмена, предназначенный исключительно для этих процессов, следовательно, содержимое основного буфера ImageReady остается в целости и сохранности.
Для того чтобы скопировать состояние, нужно выделить его и выполнить команду Copy Rollover State (Копировать состояние) из меню панели анимированных кнопок. Затем необходимо выбрать, какое состояние вы хотите заменить скопированным и выполнить команду Paste Rollover State (Вставить состояние).
Состояние может включать в себя анимацию. Чтобы добавить анимацию, нужно выполнить следующее:

с помощью панели анимированных кнопок создать новое состояние или выбрать миниатюру уже существующего, которое надо сделать анимированным;

с помощью панели анимации создать кадры.

Чтобы удалить одно состояние, можно использовать кнопку

Диалоговое окно команды Style Options ...

Рисунок 12.3. Диалоговое окно команды Style Options...


Помимо присвоения имени, в этом окне можно установить три флажка, контролирующие включение в стиль эффектов слоя, настроек режима наложения и состояний.

Панель анимированных кнопок (а) и соответствующее меню (б)

Рисунок 12.1. Панель анимированных кнопок (а) и соответствующее меню (б)


Чтобы изменить размер миниатюр, нужно выполнить команду Palette Options... (Настройки панели...) из меню панели анимированных кнопок и выбрать в диалоговом окне подходящий размер.

Подготовка анимированных кнопок

Подготовка анимированных кнопок

Состояния анимированных кнопок

Работа со слоями

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

Анимированной кнопкой называется область изображения, изменяющая свой вид при выполнении какого-либо действия с помощью мыши. Для определения активной области используется фрагмент нарезки или карта-изображение. Работой с анимированными кнопками управляет соответствующая панель (Рисунок 12.1).

Работа со слоями

Работа со слоями


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

на панели слоев выбрать слой, отображение содержимого которого желательно во всех состояниях;

чтобы применить атрибуты слоя выделенного состояния ко всем состояниям текущей анимированной кнопки, надо выполнить команду New Layers Visible in All States/Frames (Новые слои видимы во всех состояниях/кадрах) из меню панели анимированных кнопок.

Команда Create Layer for Each New Frame (Создать слой для каждого нового кадра) позволяет расположить содержимое слоя в каждом кадре.
Для создания эффектов состояний используются стили слоя. При работе с фрагментами, основанными на слое, можно сохранить последовательность состояний как стиль анимированной кнопки, который упрощает процесс ее создания.
Стиль анимированной кнопки включает в себя ее состояния и эффекты слоя. Если применить такой стиль к слою, то он превратится во фрагмент нарезки, основанный на слое.
Для применения стиля анимированной кнопки к слою необходимо выполнить следующие действия:

выбрать нужный слой на панели слоев;

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

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

Состояния анимированных кнопок

Состояния анимированных кнопок

Состояние анимированной кнопки определяется расположением слоя, его стилями и другими атрибутами (табл. 12.1 и 12.2).

Состояния анимированных

Таблица 12.1. Состояния анимированных кнопок, связанные с выполняемыми пользователем действиями

Состояние	Действие пользователя
Over	Мышь наведена на изображение, но кнопка мыши не нажата
Down	Нажатие кнопки мыши на области. Состояние длится, пока кнопка мыши нажата
Click	Щелчок мышью на области анимированной кнопки. Состояние длится до тех пор, пока не будет выполнено другое действие
Out	Мышь за пределами активной области изображения
Up	Кнопка мыши отпущена

Состояния анимированных

Таблица 12.2. Состояния анимированных кнопок, не связанные с действиями пользователя

Состояние	Описание
/Normal	Характеризует вид анимированной кнопки при первой загрузке изображения в браузер
Custom	Характеризует отличное от стандартных состояние, которое можно создать, используя код JavaScript
.None	Сохраняет текущее состояние изображения для дальнейшего его использования в качестве состояния анимированной кнопки. Это состояние на web-странице не отобразится

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

нажать

Photoshop 7 и web дизайн

Диалоговое окно команды File > Export Original ...

Рисунок 13.1. Диалоговое окно команды File > Export Original...


Как видно из рисунка, задать можно название файла и его формат. Форматы могут быть следующими: Photoshop (*.psd), BMP (*.bmp), PCX (*.pcx), Pixar (*.pxr), Targa (*.tga) и TIFF (*.tif). Такая информация, как нарезка и параметры оптимизации, не сохраняется, если формат отличен от PSD.
Предназначение команды File > Save (Файл > Сохранить) — сохранять изменения, сделанные за некоторый промежуток времени в рабочем файле. В отличие от PhotoShop, в ImageReady эта команда сохраняет изображения только в формате РSD(Рисунок 13.2).
Команда File > Save As... (Файл > Сохранить как...) отличается от команды File > Save (Файл > Сохранить) тем, что позволяет задать другое название и месторасположение файла. В отличие от PhotoShop, в ImageReady эта команда не предусматривает изменение формата, и изображение может быть сохраненным при помощи этой команды только в формате PSD.

Диалоговое окно команды File > Update HTML ...

Рисунок 13.5. Диалоговое окно команды File > Update HTML...

Диалоговое окно команды File >

Рисунок 13.2. Диалоговое окно команды File > Save совпадает с аналогичным окном команды File > Save As...




Рисунок 13.3. Диалоговое окно команды File > Save Optimized совпадает с аналогичным окном команды File > Save Optimized As...


Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет гекущее состояние изображения с настройками, указанными при оптимизации (Рисунок 13.3; подробнее см. Оптимизация анимированных изображений).
Команда File > Save Optimized As... (Файл > Сохранить оптимизированное как...) позволяет сохранить другую версию того же изображения с другими настройками.
Изменить можно следующие параметры:

тип файла;

настройки;

нарезку.

Под выбором типа файла в данном случае подразумевается следующее: можно сохранить HTML-код и изображения (*.html), только изображения (*.gif) и только HTML-код (*.html).
Сохранение HTML-кода и изображения задается типом "HTML and Images (*.html)" соответствующего ниспадающего меню. В этом случае результатом является файл HTML и отдельные файлы для каждого фрагмента нарезки, имеющегося в исходном изображении. Файл HTML включает в себя код всех присутствующих "спецэффектов": гиперссылок, карт-изображений, анимированных кнопок и изображений. Формат файлов изображений и его настройки определяются параметрами, заданными при оптимизации.
Сохранение только изображения обеспечивает тип "Images only (*.gif)". В результате получаем отдельный файл для каждого фрагмента нарезки (если таковая имеется), формат и настройки которого определяются, как и в предыдущем Случае, параметрами, заданными при оптимизации.
Для сохранения только HTML-кода используется тип "HTML only (*.html)". Результат — файл HTML, не включающий данные, относящиеся к изображению.
Под настройками понимается способ использования изображения. Настройки могут быть следующие: заказные, фонового изображения, по умолчанию и другие.
Заказными настройками в данном случае называется совокупность параметров и настроек, заданная пользователем в текущем сеансе работы над изображением.
Настройки фонового изображения позволяют автоматически оптимизировать сохраняемое изображение для использования его в дальнейшем в качестве фона web-страницы.
Под настройками по умолчанию подразумеваются настройки, заданные в диалоговом окне команды File > Output Settings > HTML... (Файл > Выходные настройки > HTML...). При выборе пункта "Другие" также появляется это диалоговое окно (Рисунок 13.4).
Эта команда полностью совпадает с аналогичной командой PhotoShop, за исключением флажка Include GoLive 5 (or Earlier) Code (Включить код GoLive 5 (или более ранней версии)). Установка этого флажка позволяет форматировать код HTML и JavaScript таким образом, что анимированные кнопки можно редактировать в программе Adobe GoLive. Естественно, эта процедура увеличивает конечный размер файла.
Далее нужно указать, какие фрагменты нарезки использовать: все вместе или только выделенные.



Рисунок 13.4. Диалоговое окно команды File > Output Settings > HTML...


Следующий способ экспорта — команды подменю Edit > Copy HTML Code (Правка > Копировать код HTML). Эти команды копируют код HTML для оптимизированного изображения в буфер обмена:

Copy All Slices (Копировать все фрагменты) — копируется код HTML всех нарезанных фрагментов изображения;

Copy Selected Slices (Копировать выделенные фрагменты) — копируется код HTML только выделенных фрагментов;

Copy Preloads (Копировать программы) — для выбранных фрагментов копируется сгенерированный ImageReady код JavaScript.

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

ImageReady генерирует и форматирует код HTML таким образом, как указано в диа логовом окне команды File > Output Settings > HTML... (Файл > Выходные настройки" HTML...).
Для вставки скопированного таким способом кода HTML необходимо открыть нужный HTML-файл (или создать новый) в соответствующем приложении и выполнить в нем команду Edit > Paste (Правка > Вставить).
ВНИМАНИЕ. При изменении месторасположения источника изображения необходимо ислользовать команду File > Update HTML... (Файл > Обновить HTMI...) для обновления связей.
В изображенном на Рисунок 13.5 окне задается имя файла HTML, который необходимо обновить. Флажок Save Images (Сохранить изображения) управляет доступностью кнопки Output Settings... (Выходные настройки...). При нажатии этой кнопки появляется диалоговое окно команды File > Output Settings > Saving Files... (Файл > Выходные настройки > Сохранение файлов...), показанное на Рисунок 13.6.



Рисунок 13.6. Диалоговое окно команды File > Output Settings > Saving Files...


Как видно из рисунка, в этом диалоговом окне три вкладки:

File Naming (Имена файлов). На этой вкладке вы можете задать правила образования имен файлов;

Filename Compatibility (Совместимость имен файлов). Тут вы можете определить параметры, влияющие на совместимость имен файлов с различными операционными системами;

Optimized Files (Оптимизация). Упрощает рутинную работу: записывает рисунки в одну папку, копирует фоновый рисунок и добавляет знак авторского права.

Для обмена выделенными фрагментами с PhotoShop или другими приложениями используются команды Edit > Cut (Правка > Вырезать) и Edit > Copy (Правка > Копировать).

Экспорт изображений

Экспорт изображений

К экспорту изображений в ImageReady можно отнести несколько групп команд. В первую очередь, это, конечно, команда File > Export Original... (Файл > Экспорт Оригинала...), затем File > Save (Файл > Сохранить), File t Save As... (Файл > Сохранить как...), File > Save Optimized (Файл > Сохранить оптимизированное) и File > Save Optimized As... (Файл > Сохранить оптимизированное как), несомненно, Edit > Copy HTML Code (Правка > Копировать код HTML) и, наконец, команды Edit > Cut (Правка > Вырезать) и Edit > Сору (Правка > Копировать). В этом уроке мы рас смотрим каждую из этих команд, чтобы разобраться, какую из них когда имеет смысл применять.
Команда File > Export Original... (Файл > Экспорт оригинала...) делает копию оригинального изображения, предварительно произведя сведение слоев и позволя ет сохранить эту копию в разных форматах файлов (Рисунок 13.1).

Photoshop 7 и web дизайн

Диалоговое окно команды File > Preview In > Other ...

Рисунок 14.1. Диалоговое окно команды File > Preview In > Other...


Добавить браузер в подменю можно указанным ниже способом:

Создать для браузера ярлык или сделать копию уже имеющегося ярлыка.

Поместить ярлык в папку Adobe PhotoShop 7.0/Helpers/Preview In.

Перезагрузить PhotoShop и ImageReady.

Чтобы просмотреть изображение в браузере (Рисунок 14.2), надо выполнить одно из двух действий: выбрать желаемый браузер в подменю File > Preview In (Файл > Просмотреть в) либо нажать на кнопку с изображением логотипа браузера, находящуюся на панели инструментов. Удерживая эту кнопку нажатой в течение некоторого времени, можно вызвать на экран меню выбора браузера.

Диалоговое окно команды File >

Рисунок 14.3. Диалоговое окно команды File > Jump То > Other Graphics Editor... (a) и File > Jump To > Other HTML Editor... (б)


Добавить приложение в подменю можно указанным ниже способом.

Создать для него ярлык или сделать копию уже имеющегося ярлыка.

Поместить ярлык в папку Adobe PhotoShop 7.0/Helpers/Jump To Graphics Editor или Adobe PhotoShop 7.0/Helpers/Jump To HTML Editor.

Перезагрузить PhotoShop и ImageReady.

При переходе в HTML-редактор сначала будет предложено сохранить файл в соответствующем формате, то есть появится диалоговое окно команды File > Save Optimized (Файл > Сохранить оптимизированное). Как с ним работать, было рассмотрено выше, в Экспорт изображений.

Дополнительные возможности ImageReady

Дополнительные возможности ImageReady

Просмотр изображений в браузере

Переход в другие приложения

Создание текстур

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

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

Исходный образец серого цвета

Рисунок 14.13. Исходный образец серого цвета после применения фильтра Mosaic Tiles... и фильтра Offset...


Третий способ — это использование фильтра Fitter > Other > Tile Maker... (Фильтр > Другие > Фрагментирование...). Его работа подробно рассмотрена (см. Отличия инструментов и команд PhotoShop и ImageReady).
Иногда бывает нужно создать текстуру с четко выраженной структурой, например, имитировать кирпичную стену. Для этого предназначены такие фильтры, как Filter > Stylize > Extrude... (Фильтр > Стилизация > Выдавливание...), Filter > Stylize > Tiles... (Фильтр " Стилизация > Фрагменты...), Filter > Texture > Craque-lure... (Фильтр > Текстура > Трещина...), Filter > Texture > Mosaic Tiles... (Фильтр > Текстура t Фрагменты мозаики...), Filter > Texture > Patchwork... (Фильтр > Текстура > Лоскутки...), Filter > Texture > Stained Glass... (Фильтр > Текстура > Окрашенное стекло...) и, конечно, Filter > Texture > Texturizer... (Фильтр > Текстура > Тексту ризатор...).

Образцы текстуры с видимыми швами

Рисунок 14.4. Образцы текстуры с видимыми швами (о) и бесшовной текстуры (б)

Окно браузера при просмотре изображения

Рисунок 14.2. Окно браузера при просмотре изображения


Как видно из рисунка, браузер отображает не только изображение, но и сопутствующую информацию: формат файла, размер изображения в пикселах, размер файла и характеристики оптимизации, а также HTML-код.

Переход в другие приложения

Переход в другие приложения

Полезной возможностью является переход из ImageReady в другие графические или HTML-редакторы. Он осуществляется при выполнении команд из подменю File > Jump To (Файл > Перейти в). Команды этого подменю (Рисунок 14.3) представляют собой названия приложений, в которые можно перейти. Графическим редактором по умолчанию является Adobe PhoSoshop, a HTML-редактором — Notepad.
Если нужное приложение не отображено в подменю, необходимо выполнить команду File > Jump То > Other Graphics Editor... (Файл > Перейти в > Другие графические редакторы...) или File > Jump To > Other HTML Editor... (Файл > Перейти в > Другие HTML-редакторы...).

Просмотр изображений в браузере

Просмотр изображений в браузере

Все установленные на компьютере браузеры отображаются в подменю File > Preview In (Файл > Просмотреть в). Если нужный вам браузер не представлен в этом подменю, необходимо выполнить команду File > Preview In > Other... (Файл > Просмотреть в > Другие...) (Рисунок 14.1).

Результат работы фильтра при следующих

Рисунок 14.5. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Graimness=10, значение Glow Amount=8 и значение Clear Amount =11, для наглядности вместе соединено 4 фрагмента


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

Filter > Distort > Diffuse Glow... (Фильтр > Искажение > Диффузное свечение...).

Filter > Pixelate > Pointillize... (Фильтр > Оформление > Пуантилизм...).

Filter > Sketch > ConteCrayon... (Фильтр > Набросок > Волшебный карандаш...).

Рисунок 14.6. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Cell Size=6, для наглядности вместе соединено 4 фрагмента
Рисунок 14.7. Результат работы фильтра, для наглядности вместе соединено 4 фрагмента

Filter > Sketch > Note Paper... (Фильтр > Набросок > Бумага для записей...).

Filter > Sketch " Reticulation... (Фильтр > Набросок > Сетчатость...).

Filter > Sketch > Water Paper... (Фильтр > Набросок > Мокрая бумага...).

Filter > Texture > Craquelure... (Фильтр > Текстура > Трещина...).

Filter > Texture > Grain... (Фильтр > Текстура > Зерно...).

Рисунок 14.8. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Image Balance=35, значение Graininess=10, значение Relief=11, для наглядности вместе соединено 4 фрагмента




Рисунок 14.9. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Density=20, значение Foreground Level=20, Background Level=20, для наглядности вместе соединено 4 фрагмента





Рисунок 14.10. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Fiber Length=14, значение Brightness=60, Contrast=80, для наглядности вместе соединено 4 фрагмента





Рисунок 14.11. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Crack Spadng=21, значение Crack Depth=6, Crack Brightness=9, для наглядности вместе соединено 4 фрагмента


Вторым способом является применение после любого фильтра, создающего подобие текстуры, фильтра Filter > Other > Offset... (Фильтр > Другие > Смещение). В результате его применения изображение смещается в сторону одной из границ холста, а освободившееся место заполняется пикселами, оказавшимися после перемещения "за кадром". При этом становится виден шов между соседними фрагментами текстуры (изображение совмещается само с собой). После этой операции остается только при необходимости убрать шов с помощью любого рисующего инструмента.



Рисунок 14.12. Результат работы фильтра при следующих параметрах: заливка исходного образца серым цветом, значение Intensity=80, значение Contrast=70, Grain Type=-Enlarged, для наглядности вместе соединено 4 фрагмента

Создание текстур

Создание текстур

Для создания фона web-страниц используются не только заполнители формата GIF размером 1x1 пиксел, но и текстуры.
Текстура (Рисунок 14.4) представляет собой элемент прямоугольной формы, к которому применены эффекты подсветки и тени. Для заполнения фона лучше всего использовать так называемую бесшовную текстуру.

Photoshop 7 и web дизайн

Фрагмент HTMLкода webстраницы

Рисунок 15.1. Фрагмент HTML-кода web-страницы

Язык имеет широкий выбор средств задания внешнего вида web-страницы.

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

На web-страницу могут быть помещены программы, работающие с пользователем.

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

Краткий обзор возможностей HTML

Краткий обзор возможностей HTML

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

Гипертекстом называют набор статей, связанных между собой. Читатель (пользова тель) может легко перемещаться между статьями (страницами), получая необходимую информацию. Например, в случае обычного словаря вы можете быстро уточнить значение незнакомого вам слова. В случае web-страницы вам предоставляется возможность быстро переместиться на нужный сайт для получения сведений (например, толкования слова) или совершения каких-либо действий (загрузки файлов, заполнения платежной ведомости и так далее).
На Рисунок 15.1 показан фрагмент файла, описывающего страницу при помощи языка HTML — именно так выглядит код web-страницы. Это обычный текстовый файл, который можно подготовить в практически любом текстовом редакторе. Как вы сами можете убедиться, документ этот состоит из текста, который можно видеть на готовой web-странице, а также команд, заключенных в угловые скобки. Команды HTML принято называть тегами. Именно эти команды и "сообщают" браузеру, как отображать текст, откуда загрузить и куда вставить графику, как отображать ссылки и многое другое. На Рисунок 15.2 показана та же самая страница, открытая в Internet Explorer. Браузер распознает команды и формирует изображение, отображаемое на экране.
Ниже приведен список основных особенностей языка HTML.

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

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

Отображение домашней страницы

Рисунок 15.3. Отображение домашней страницы Internet Explorer в самом Internet Explorer

Отображение той же страницы в Netscape Navigator

Рисунок 15.4. Отображение той же страницы в Netscape Navigator


При помощи специальных программ (скриптов) определяется версия браузера и ему предъявляется именно тот код, который ему предназначен.
Для того чтобы продемонстрировать различия возможностей браузеров, проведем простой эксперимент — загрузим домашнюю страницу Internet Explorer с сервера Microsoft в две самые распространенные на момент написания этой книги программы — Internet Explorer 5.5 и Netscape Navigator 4.74. На Рисунок 15.3 показано, как Internet Explorer справляется с отображением своего "представительства" во Всемирной Паутине. На Рисунок 15.4 вы можете увидеть, как с этой задачей справился Netscape Navigator.
Легко заметить, насколько отличается представление этой страницы в разных браузерах. Это и есть проявление различий в возможностях программ разных производителей.

Та же страница открытая в Internet Explorer

Рисунок 15.2. Та же страница, открытая в Internet Explorer


Работая над оформлением страницы, вы должны учитывать различия аппаратного и программного обеспечения, используемого разными пользователями. Ваше творение может по-разному выглядеть на разных мониторах с разными режимами. Свое влияние может оказать операционная система, но наиболее важным фактором, влияющим на вид страницы, является используемый пользователем браузер. Разрабатываемые разными фирмами программы для просмотра web-страниц обладают разными возможностями и набором функций. Возникает ситуация, в которой браузер пользователя окажется не в состоянии правильно воспроизвести все ваши идеи.
Различия между браузерами проявляются прежде всего в наборах обрабатываемых тегов — команд HTML. Существует набор тегов, стандартизированный консорциумом WWW (W3) — организацией, контролирующей развитие Всемирной Паутины. Разработчики программного обеспечения в принципе должны следовать рекомендациям и стандартам консорциума — это необходимо для поддержания преемственности и совместимости программ и систем разных поколений. Но не всем удается точно выполнить все, что требует стандарт. Некоторые наоборот, стремятся внести в HTML что-либо свое — новые теги, параметры, функции. Иногда такие нововведения принимаются другими производителями и становятся стандартом, иногда они остаются свойствами конкретной программы. Такие различия приводят к тому, что возможности браузеров даже в воспроизведении стандартных тегов могут значительно различаться. Это создает большие проблемы для дизайнеров и web-программистов — им приходится при разработке страницы учитывать возможности и характеристики всех браузеров, которые могут оказаться у потенциального пользователя. Так как учесть все существующие программы невозможно, обычно ориентируются на два наиболее распространенных браузера — Microsoft Internet Explorer и Netscape Navigator.
Совет 1
Совет 1

Для того чтобы удовлетворить желания и возможности большинства пользователей, ориентируйтесь на программы Internet Explorer 4.0 или 5.5, а также на Netscape Navigator 4.74.
Браузер Microsoft Internet Explorer является в настоящее время наиболее мощным средством просмотра web-страниц. Он поддерживает стандарт HTML и предоставляет пользователям Интернета и разработчикам web-страниц широкий набор дополнительных возможностей. Программа Netscape Navigator является одним из первых браузеров. Она хорошо работает со стандартными элементами HTML, но даже в их реализации расходится с Internet Explorer. В недавно стандартизированных или дополнительных функциях эти браузеры расходятся настолько сильно, что разработчикам web-страниц приходится включать в HTML-код два варианта, каждый из которых предназначен для определенного браузера.

Photoshop 7 и web дизайн

Пример использования тегов форматирования текста

Рисунок 16.3. Пример использования тегов форматирования текста


Указать размер и другие параметры шрифта также можно при помощи тега , задающего характеристики шрифта, используемые в документе по умолчанию. Если после этого тега в тексте встречается тег с относительным значением размера шрифта, то полный размер будет вычислен относительно размера, указанного в теге . В отличие от тега , этот тег действует на весь следующий за ним текст. Если тег встречается в документе несколько раз, то каждый из них переустанаваливает размер шрифта.
Размер шрифта в теге определяется при помощи параметра SIZE (аналогично тегу ). Цвет шрифта задается параметром COLOR, а гарнитура шрифта — параметром FACE. Пример:

ВНИМАНИЕ. Параметры, задаваемые тегом , могут никак не влиять на текст, размещен-ный в таблицах.
Иногда требуется разделить текст на абзацы. Для этого также существуют специальные средства HTML. При этом следует учитывать, что браузеры, как правило, игнорируют появление в HTML-коде повторяющихся пробелов или символов перевода строки. При отсутствии специальных указаний текст разбивается на строки автоматически по пробелам между словами. Если перенос невозможен (например, строка не содержит пробелов), поле страницы расширяется (появляется горизонтальная полоса прокрутки). Поэтому для разбиения текста на абзацы места вставки дополнительных пустых строк надо указать вручную.
Для задания абзацев используется тег <Р>. Он обозначает начало нового абзаца. Теоретически каждому тегу начала абзаца должен соответствовать тег конца абзаца (), но на практике его можно не использовать. Каждый тег начала нового абзаца обозначает, заодно, и конец абзаца предыдущего. Кроме того, новый абзац автоматически формируется тегами заголовков и некоторыми другими.
Тег абзаца может иметь параметр ALIGN, указывающий браузеру, каким образом следует выравнивать содержащийся в нем текст. Пример записи такого тега (в данном случае устанавливается выравнивание по ширине):
<Р ALIGN="justify">
В табл. 16.2 приведены допустимые значения этого параметра.

Пример отображения webстраницы браузером

Рисунок 16.1. Пример отображения web-страницы браузером


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

BGCOLOR задает цвет фона страницы. Записывается в следующем виде: BGCOLOR-#RRGGBB, где RR, GG и ВВ — запись RGB-компонентов цвета в шестнадцатеричной форме. Символ "#" (номер) указывает на то, что дальше записано обозначение цвета. Пример записи:

TEXT задает цвет, которым будет отображаться текст документа. Цвет записывается в той же форме, что и цвет фона. Эти настройки могут не сказаться на цвете текста, расположенного в ячейках таблиц. Пример:

LINK указывает цвет, которым будут отображаться не просмотренные ссылки. Пример:

VLINK указывает цвет, которым будут отображаться просмотренные ссылки. Пример:

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

BACKGROUND задает URL-адрес (путь к файлу) фонового рисунка для страницы (текстуры). Этот параметр, а также другие параметры управления цветом и фоном, можно использовать и для задания вида ячеек таблиц. Для этого примените его к тегу . Подробнее задание таблиц рассматривается в следующем уроке. Пример использования параметра BACKGROUND:

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

Используя каскадные таблицы стилей (CSS), можно задать фоновое изображение, повторяющееся только по вертикали или только по горизонтали. Также можно поместить фоновое изображение, например, в нужную точку экрана.
Кроме этого, существуют параметры, позволяющие управлять, например, шириной полей, оставляемых браузером по краям окна.
Среди служебной информации, задаваемой в заголовке документа, вы можете определить такие полезные сведения, как таблица кодировки. Это особенно важно при просмотре документа на компьютере, работающем под управлением другой операционной системы. Если не указать, на каком языке написан документ (точнее, национальные символы какого языка при этом использованы), то браузер будет пытаться отобразить документ с использованием таблицы кодов, применяемой по умолчанию. При этом документ может оказаться нечитаемым. Поэтому надо задать таблицу кодировки вручную, что и делается при помощи тега <МЕТА>. Этот тег размещается в заголовке документа (между тегами и ), используется для записи различных данных, указываемых в его параметрах. Закрывающего тега не требуется.
Кодировка, которую необходимо указать, зависит от того, в какой операционной системе и каком редакторе создается файл. Если вы используете систему Windows и Блокнот в качестве HTML-редактора, то для корректного воспроизведения русского текста вам понадобится указать кодовую таблицу Windows-1251, используемую для передачи символов русского языка. При этом тег <МЕТА> следует записать следующим образом:
<МЕТА HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=Windows-1251">
После того, как вы определите структуру документа, можно приступать к наполнению его информацией, предназначенной пользователям. Эта информация располагается между тегами и . Вы можете поместить в документ текст, "сдобренный" при помощи тегов рисунками и элементами форматирования (заголовками, таблицами, списками). Ниже процесс размещения этих элементов на web-странице рассматривается подробно.
Перед тем как перейти к рассмотрению правил описания информационного содержания страницы, стоит упомянуть об еще одной возможности HTML. Если вы хотите поместить в текст страницы какие-либо замечания, не видимые для простого пользователя, или, если вам надо временно отключить отображение какого-нибудь элемента, вы можете объявить нужный участок текста комментарием. Комментарий, присутствующий в HTML-коде, не влияет на отображение страницы браузером.
Объявить блок текста комментарием можно при помощи специального тега "". Ниже приведен пример записи текста с комментариями.
Этот текст будет выведен на экран...

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

Хотя текст комментария не отображается в окне браузера, он все равно загружается на компьютер пользователя вместе с остальным содержимым страницы. Поэтому не стоит хранить в виде комментариев информацию, представляющую некоторую тайну (например, имена пользователей и пароли доступа).
Часто возникает необходимость поместить на страницу заголовок раздела или название страницы в целом. Для этого можно использовать стандартные теги заголовка. Язык HTML позволяет задавать заголовки шести размеров (уровней), для которых используются теги от <Н1> до <Н6>. Текст заголовка пишется между открывающим и закрывающим тегами.
<Н1>Это заголовок первого уровня
<Н6>Заголовок шестого уровня< /Н6>
Чем больше число, идущее за символом "Н", чем меньше размер текста заголовка. Поэтому, если вы хотите, чтобы заголовок был написан более мелкими буквами, используйте, скажем, тег <Н2> или <Н5>. Наличие заголовка подразумевает автоматическое прерывание строки (подробнее об этом рассказывается далее); кроме того, заголовок может занимать сразу несколько строк. Имейте в виду, что мелкие заголовки — они маркируются тегами <НЗ> и ниже — в большинстве web-браузеров отображаются очень мелким шрифтом, и в результате заголовок может оказаться мельче основного текста. На Рисунок 16.2 показаны примеры заголовков всех шести уровней (для сравнения приведена фраза без дополнительного форматирования).
Существует возможность центрирования заголовков: для этого вместе с тегом используется дополнительный параметр. Чтобы выровнять заголовок по центру, используйте тег со следующим параметром:
<Н1 ALIGN = "CENTER">Это заголовок первого уровня,
выровненный по центру
Используя для параметра ALIGN значения left и right, вы можете выравнивать заголовки по правому и левому краям страницы.
Совет 1
Совет 1

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

ЭTO заголовок первого уровня

Структура HTMLдокумента и форматирование текста

Структура HTML-документа и форматирование текста

Для того чтобы разработанное вами оформление сайта могло быть представлено на web-странице, то есть чтобы его можно было описать средствами HTML, вы должны уже на этапе подготовки макета учесть особенности верстки страни цы в окне браузера. Сделать это можно, только владея хотя бы основами языка HTML. Поэтому этот и несколько следующих уроков посвящены описанию языка HTML.
В прошлом уроке мы уже говорили о том, что код web-страницы, по командам которого браузер строит изображение, записывается в обычном текстовом файле. Подготовить его можно при помощи любого текстового редактора, позволяющего сохранять неформатированный текст (например, Блокнота (Notepad), поставляемого в комплекте Windows). Для того чтобы браузер мог поместить на страницу графику и другие нетекстовые элементы, в коде страницы должно быть указано расположение этих объектов.
HTML-код (или HTML-документ) состоит из нескольких разделов. Мы уже говорили о том, что все элементы страницы описываются специальными командами — тегами. Поэтому логично предположить, что и структура документа определяется какой-либо командой.
Примечание 1
Примечание 1

При сохранении на диске для HTML-файлов обычно используется расширение .НТМ или .HTML.
Прежде всего, надо определить, как выглядит команда HTML. Это какой-либо набор символов, заключенный в угловые скобки. Например: , . Регистр символов не имеет значения (большие и маленькие буквы не различаются). Теги делятся на парные (блоковые) и непарные. Блоковый тег может содержать в себе некоторый фрагмент документа, влияя на его отображение. Для такого тега в большинстве случаев требуется парный тег, указывающий конец зоны влияния. Такие теги записываются так же, как и теги, открывающие описание, но с добавлением символа "/" Например:
<Р> Фрагмент текста страницы. В данном случае - текст абзаца.

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

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

В данном случае тег имеет название IMG (тег вставки изображения) и параметры SRC (путь к файлу изображения), WIDTH (ширина изображения), HEIGHT (высота изображения).
ВНИМАНИЕ. Так как некоторые символы используются для записи команд HTML (например, сим волы "<" и ">" 8ы не сможете использовать их в обычном тексте. Если вам все-таки нужно это сделать, используйте вместо символов их код: < — "<", > — ">",   — неразрывный пробел (пробел, по которому не производится переход на следующую строку), &атр; — "&", &сору; — "*", " — кавычка, &ХХХ; — любой символ (XXX — код символа).
После того, как мы ознакомились с основными правилами записи тегов, можно приступать к рассмотрению структуры HTML-документа.
Прежде всего надо указать на то, что данный документ описывает web-страницу на языке HTML. Для этого текст начинается с тега . Для него требуется закрывающий тег , обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как . Для него требуется закрывающий тег . Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: ....
Запишем пример простейшего документа:

<ТIТLЕ>Пример HTML-страницы

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.


Тег







<br> Щелкните для <А HREF="noframes.htm"> здесь </А> перехода к <br> странице без фреймов<br>

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

В разделе размещено традиционное для таких случаев сообщение и предложение перейти по ссылке на страницу без фреймов. <br> На Рисунок 20.4 показано, как документ, приведенный выше, отображается браузером. <br><br> <h1>Photoshop 7 и web дизайн</h1> <h1>Если вы уже зарегистрированы в</h1>Рисунок 21.3. Если вы уже зарегистрированы в системе, то для получения доступа к управлению своим сайтом вам понадобится ввести имя пользователя и пароль <br><br><img src="image/21-2.jpg" alt="Если вы уже зарегистрированы в"><br> Обратите внимание на отображение имени пользователя — оно не может быть изменено. Ваш браузер запоминает его и выводит автоматически — так состав лена программа обработки данных, находящаяся на сервере. Если вы хотите ввести другое имя, воспользуйтесь ссылкой Авторизоваться под другим именем. Пройдя процедуру опознания, или, как ее называют в технических термина идентификации или аутентификации, вы сможете перейти к специальной стра нице, содержащей набор инструментов управления вашим персональным представительством в Глобальной Сети. <br> Наибольший интерес представляют ссылки раздела Редактирование и управление С их помощью вы можете перейти к работе с инструментами управления файлами, находящимися в вашем ведении. Если вы работаете с другим провайдером, то названия раздела и ссылок могут быть другими, но набор функций будет примерно таким же. Наиболее полезными являются ссылки, позволяющие загружать файлы на сайт. Именно с их помощью вы можете вызвать программы, позволяющие разместить на вашем сайте разработанное вами наполнение. Мы рассмотрим работу с файлами при помощи встроенной системы загрузки, а также при помощи протокола FTP. <br> Примечание 6 <br>Примечание 6<br><br> FTP — File Transfer Protocol (Протокол передачи файлов) — протокол передачи данных, ориентированный на передачу отдельных файлов. Кроме простой передачи, возможна работа с дисками удаленного компьютера. Например, можно создавать каталоги, копировать, переносить или стирать файлы и т. д. Существует также возможность возобновления передачи файла после сбоя (вновь передаваемые данные присоединяются к уже принятой части файла). <br> Для тех, кто недавно начал работать с компьютером и еще не имеет достаточного опыта, можно рекомендовать использовать встроенную в страницу управления систему загрузки файлов. Использовать ее можно, перейдя по соответствующей ссылке. На сайте Narod.ru это ссылка Загрузка фалов на сайт. <br> При помощи расположенных на странице полей ввода следует указать системе имена файлов, подлежащих загрузке. Кнопки Обзор (на англоязычных сайтах oни обычно называются Browse) позволяют выбрать файл при помощи стандартного окна выбора файла. <br> Указав нужные файлы, нажмите кнопку Загрузить файлы. Кнопка Очистить позвво ляет очистить все поля, вернув форму в исходное состояние. <br> Примечание 7 <br>Примечание 7<br><br> На сайтах, работающих на английском языке, термину "загрузить файлы" обычно соответствует "upload files". <br> <b>ВНИМАНИЕ. </b>Загрузка файлов при помощи встроенных в страницу форм возможна не во всех пр граммах. Некоторые устаревшие браузеры не поддерживают таких функций. <br> Более опытные пользователи могут получить доступ к находящимся на сервере файлам с помощью протокола FTP. При этом вы можете работать с файлами каталогами практически так же, как с файлами и каталогами, расположенными на вашем компьютере. Для обращения к серверу по протоколу FTP можно вос пользоваться одной из многих предназначенных для этого программ. Кроме узко специализированных программных средств (так называемых FTP-клиентов), существуют некоторые файловые менеджеры (например, FAR или Windows Commander). Однако гораздо проще воспользоваться браузером. Многие программы для просмотра web-страниц предоставляют пользователю возможность просматривать и редактировать содержимое каталогов, расположенных на удаленных серверах. <br> Для того чтобы обратиться к FTP серверу, надо ввести в строке адреса браузера адрес сервера, сопроводив его именем пользователя и паролем, указанными вами при регистрации. Например, если имя пользователя username, а пароль password, то указать следует следующий адрес: ftp://username:password@ftp.narod.ru <br> Браузер считает с сервера содержимое отведенного вам каталога и отобразит его на экране. При этом его окно напоминает окно файлового менеджера (в случае Internet Explorer браузер выглядит как Проводник Windows, так как это практически одна и та же программа). Вы можете выполнять с файлами практически все операции (копирование, перемещение, удаление). Единственное, на что следует обратить особое внимание — написание имен файлов. Они должны строго соответствовать правилам, принятым в операционной системе, под управлением которой работает сервер. <br> <b>ВНИМАНИЕ. </b>При обращении k сайту сервер по умолчанию автоматически отправляет на компью-тер пользователя файл с именем index.htm или index.html. Поэтому независимо от того, что находится на вашем сайте, файл с этим именем должен там присутствовать. В противном случае пользователь, не знающий конкретных имен файлов, не сможет работать с представленной вами информацией. <br> Если вы используете для размещения сайта платный хостинг, то методы доступа к файлам и управления сайтом останутся примерно такими же. Только для регистрации в системе вам придется заключить с провайдером договор на обслуживание. После этого вам будет предоставлено место на сервере, доступ к поддерживаемым технологиям разработки сайтов (например, к базам данных), электронной почте и т. д. Большинство провайдеров обеспечивают своих клиентов справочной информацией и технической поддержкой. Связавшись с техническим отделом фирмы-провайдера, вы можете получить ответы на возникшие у вас вопросы. <br> В большинстве случаев сайты размещаются в Сети для того, чтобы их посещало как можно больше заинтересованных людей. Для этого надо сделать сайт доступным для различных средств поиска. Большинство поисковых систем, как русскоязычных, так и зарубежных, предоставляет всем желающим возможность занести информацию о каком-либо сайте в базу данных. После этого сайт становится доступным для поиска при помощи запросов. Многие системы имеют в своем составе каталог сайтов, при помощи которого пользователи могут обращаться к сайтам определенной тематики. Добавить сайт в базу данных можно, как правило, при помощи ссылки Добавить сайт или Добавить ресурс. Обычно она располагается в нижней части страницы. <br> Примечание 8 <br>Примечание 8<br><br> На сайтах зарубежных поисковых систем эта ссылка обычно называется Add site или Add resource. <br> Существуют отдельные сайты, специализирующиеся на составлении каталогов сайтов. Такие каталоги могут иметь широкую направленность или же быть узкоспециализированными. Среди таких каталогов можно назвать следующие: <br> <li> www.list.mail.ru; </li> <li><a href="http://www.look.ru"> www.look.ru</a>; </li> <li> www.piterout.ru; </li> <li> и другие... </li> Последний сайт относится к числу информационных порталов (этот портал посвящен индустрии развлечений в Санкт-Петербурге). <br> На сайтах каталогов, как правило, также существует возможность добавление ссылок на другие ресурсы. <br> Еще один способ сделать сайт известным широкой публике — использованш рекламы. Реклама может быть самой различной — от традиционных модулей в печатных изданиях до Интернет-рекламы. <br> Реклама в Интернете осуществляётся различными методами. Наиболее распрос траненный, и, наверное, самый эффективный метод — баннерная реклама. С ней сталкивается любой пользователь Интернета. <br> Баннером называют небольшой рекламный модуль, размещаемый на web-страницах. При нажатии на такой баннер производится переход к рекламируемому ресурсу. Модули могут изготавливаться различными способами. Чаще всего это анимированное изображение в формате GIF или Flash. Встречаются баннеры в формате JPEG или HTML-баннеры, представляющие собой небольшие формы с наборами кнопок и других элементов напряжения, а также текстовые баннеры в виде простой строки текста, служащей ссылкой. <br> На Рисунок 21.4 показана страница с несколькими баннерами. <br><br> <h1>Фрагмент регистрационной формы</h1>Рисунок 21.2. Фрагмент регистрационной формы, служащей для сбора необходимых данных о пользователе <br><br><img src="image/21-4.jpg" alt="Фрагмент регистрационной формы"><br> <b>ВНИМАНИЕ.</b> Вводите пароль, используя только латинские буквы и цифры. Использование русских букв обычно не допускается. Перед тем, как вводить пароль, удостоверьтесь в том что клавиатура не находится в режиме CapsLock и переключена на латинский алфавит. В противном случае вы рискуете провести много приятных минут, пытаясь подо брать собственный пароль. <br> Кроме имени пользователя и пароля, вам предложат выбрать или ввести кодо вый вопрос и ответ на него. Это необходимо для восстановления забытого пароля. Если вы не сможете ввести пароль, то вам предложат ответить на указанный при регистрации вопрос и вышлют пароль по электронной почте. Разумеется, для использования этой возможности вам необходимо иметь почтовый ящик и до ступ к электронной почте. <br> Заполнив предложенные поля, нажмите кнопку ОК или аналогичную. Обычно она размещается в нижней части формы. Если, вводя свои данные, вы допустите ошибку или произойдет какой-либо сбой (например, окажется, что кто-то уж зарегистрировался в системе под введенным вами именем пользователя), в окно браузера будет загружена страница с соответствующим уведомлением. Скоре всего, вам придется заново ввести данные, "не понравившиеся" серверу. Обра тите внимание на то, что поля пароля и его подтверждения будут очищены. Baм придется ввести его заново. <br> После того, как вы успешно зарегистрируетесь в системе, вам предложат выбрать имя будущего сайта. <br> Введите выбранное вами имя. При этом требуется указать только имя вашего поддомена. Полый адрес будет образован из имени вашего сайта и имени сервера (narod.ru). Например, для сайта booktest полный адрес будет выглядеть как <a href="http://booktest.narod.ru">http://booktest.narod.ru</a>. Таким образом, вы получите в свое распоряжение домен третьего уровня. При доступе к сайту "www" можно не указывать — адреса www. booktest.narod.ru и booktest.narod.ru будут восприняты одинаково. Введя имя, нажмите кнопку Сохранить, расположенную под полем ввода. Вы также можете установить или снять расположенные на странице флажки. Это позволит вам получать по электронной почте распространяемые системой информационные материалы или отказаться от получения рассылки. Если введенное вами имя сайта уже занято, вам предложат ввести другой вариант. <br> <b>ВНИМАНИЕ. </b>Имя сайта, которое вам предложат ввести при регистрации, ничем не отличается от других доменных имен. Оно должно быть записано с использованием допустимых в адресах Интернета символов. <br> Если вы регистрируете сайт не на Narod.ru, а на каком-либо другом сервере, то вам могут вообще не предложить выбрать имя сайта. Например, вашей страничке могут присвоить имя. совпадаюшее с вашим именем пользователя. <br> После того, как вы закончите регистрацию, вам, разумеется, захочется получить доступ к органам управления вашего сайта. В большинстве систем это можно сделать при помощи ссылки Для зарегистрированных пользователей или введя имя пользователя и пароль в поля, расположенные прямо на заглавной странице сайта провайдера (см. <a href="#z">Рисунок 21.1</a>). Если вы пользуетесь специальными ссылками (на сайте Narod.ru это ссылка Мастерская), вас попросят ввести имя пользователя и пароль. Такой запрос показан на Рисунок 21.3. <br><br> <h1>Главная страница сайта Narod ru</h1>Рисунок 21.1. Главная страница сайта Narod.ru, предлагающего всем желающим место для размещения домашних страниц<br><br><img src="image/21-1.jpg" alt="Главная страница сайта Narod ru"><br> В процессе регистрации вам придется предоставить системе некоторые данные о себе. Некоторые из них, такие как имя пользователя и пароль, являются строго обязательными и необходимыми для дальнейшего использования услуг сервера. Другие данные, например, имя и фамилия, могут использоваться для подписи отправляемых вами писем или для обращения к вам на служебных страницах сайта. Все эти сведения вводятся в систему при помощи расположенных на страницах регистрации форм (наборов элементов управления). На Рисунок 21.2 показана часть заполненной регистрационной формы. <br> В данном случае регистрируется учетная запись с именем пользователя booktest. В особых полях надо ввести пароль для доступа к служебным страницам сайта. Так как для большей защиты эти поля "забиваются" звездочками ("*"), пароль требуется ввести два раза. Если введенные первый и второй раз символы не совпадут, будет выведено сообщение об ошибке. <br><br> <h1>Размещение webстраниц в Интернете и их реклама</h1>Размещение web-страниц в Интернете и их реклама <br><br> После того как вы подготовите дизайн нового сайта и будут завершены работы по верстке HTML-документов, надо загрузить готовый проект на сервер. Это необходимо для того, чтобы вашу информацию смогли получить заинтересованные пользователи Сети. <br> В некоторых случаях сайты разрабатываются для того, чтобы их просматривали не через Интернет, а с жестких носителей информации (например, компакт-дисков). Обычно таким образом выполняются презентации или каталоги товаров, сверстанные в формате HTML Гипертекст позволяет использовать простые в применении и широко распространенные технологии для быстрой подготовки документов. Так как средства для работы с Интернетом и web-страницами в той или иной степени присутствуют на большинстве компьютеров, изготовленную таким способом презентацию можно будет просмотреть в любом месте, не ломая голову над тем, откуда взять нужную для ее просмотра программу. <br> Примечание 1 <br>Примечание 1<br><br>. Для распространения таких электронных презентаций (не обязательно в формате HTML) и каталогов часто используются компакт-диски, причем диски могут быть довольно оригинальных форматов. Большинство устройств для чтения компакт-дисков могут работать не только с обычными дисками диаметром 12 см, но и с их миниатюрными собратьями, имеющими диаметр 8 см (обратите внимание на круглую выемку в центре выдвижной полки дисковода). Емкость таких дисков составляет около 80 Мбайт. Существуют еще меньшие диски, помещающиеся в карман для визитных карточек. Они имеют емкость 30 Мбайт и в некоторых случаях изготовляются не круглыми, а в форме визитной карточки. <br> Если вы готовите страницу для просмотра без подключения к Интернету, то вопроса взаимодействия с различными серверами и службами сети перед вами не стоит. Если же разрабатываемый сайт предназначен для размещения в Интернете, то вам необходимо выполнить ряд действий, которые позволят вам сделать сайт доступным широкому кругу посетителей. <br> Прежде всего вам надо выбрать место для размещения сайта. То есть вам надо найти место на диске компьютера, где вы сможете поместить нужные файлы. Разумеется, этот компьютер должен иметь соединение с Интернетом. Если в вашем распоряжении есть компьютер, постоянно подключенный к Всемирной Сети, то вы можете организовать сервер прямо у себя дома или в офисе. Для этого достаточно установить на таком компьютере специальную программу (сервер). Она возьмет на себя функции взаимодействия с пользователями, выдачи им нужной информации и предотвращения попыток получения доступа к сведениям, которые вы не пожелаете раскрывать. Этот способ имеет ряд недостатков. В первую очередь, далеко не всегда есть возможность обеспечить качественный канал связи между вашим компьютером сервером; и магистральной линией связи, обслуживающей Интернет. Если связь плохая (например, скорость передачи данных резко ограничена), работа с вашим сайтом может оказаться для пользователя довольно утомительным занятием. Кроме того, не всегда удобно размещать в квартире или офисе компьютер с источниками бесперебойного питания и обеспечивать ему соответствующее обслуживание. <br> Примечание 2 <br>Примечание 2<br><br> Слово "сервер" может использоваться для обозначения как компьютера, выделен ного для обслуживания служб сети (локальной или глобальной), так и программы, занимающейся этим обслуживанием. <br> Более распространенный способ размещения web-страниц в Интернете — аренда места на сервере компании, специализирующейся на предоставлении подобных услуг. Размещение на сервере сайтов других компаний и частных лиц называют хостингом (от английского слова host — хозяин). Такие компании предоставляют своим клиентам некоторый объем на жестком диске для размещения сайта, а также набор услуг, в который обычно входит доступ к файлам клиента по протоколу FTP (это позволяет легко копировать файлы на сервер, изменять их или удалять), обслуживание электронной почты, обработка команд программ, входящих в состав сайта и т. д. Вы можете подключаться к серверу компании через Интернет и осуществлять управление своим сайтом (загружать на него новые страницы, включать и выключать обслуживающие функции и т. д.). <br> Как правило, такие услуги предоставляются за определенную плату. Компании, предоставляющие вам хостинг (хостинг-провайдеры), обычно заводят у себя специальный счет, на который вы вносите оплату за поддержку сайта. С этого счета снимается абонентская плата. Кроме того, некоторые провайдеры могут взимать плату за дополнительные услуги, например, за превышение установленного обмена данными между вашим сайтом и компьютерами пользователей. <br> В некоторых случаях размещение страниц на сервере производится бесплатно. Существуют компании, которые предоставляют всем желающим место на своих серверах, не требуя при этом оплаты. Чаще всего такие серверы используются для размещения домашних страничек. Предоставляемого такими компаниями объема вполне хватает для размещения небольшого фотоархива и биографии. Часто встречаются и так называемые "гостевые книги" — страницы, на которых пользователь может не только ознакомиться с текстом, но и оставить запись от своего имени. <br> Примечание 3 <br>Примечание 3<br><br> Если гостевая книга используется не для общих выражений вроде "Здесь был Миша", а для обсуждения конкретной тематики, она может называться форумом. <br> На бесплатном сервере можно разместить и сайт фирмы, но при этом появляются некоторые проблемы — во-первых, набор предоставляемых услуг и места на диске, как правило, сильно ограничен, а во-вторых, ваши клиенты могут подумать, что вы не желаете более серьезно заняться организацией своего представительства во Всемирной паутине. <br> Еще одна проблема, связанная с использованием бесплатного хостинга, состоит в том, что компания, предоставляющая место под сайт, надеется на получение от этого некоторого дохода. Скорее всего, вас обяжут в обмен на гостеприимство разместить на вашей страничке рекламный баннер. Иногда баннеры внедряются в страницу "насильно" — код, выводящий баннер на экран, автоматически дописывается к загружаемой с сервера странице. Такая реклама может испортить внешний вид вашего Интернет-представительства (попробуйте вообразить, что кто-то повесил на вашу дверь свою вывеску). <br> Совет 1 <br>Совет 1<br><br> Помните поговорку — бесплатный сыр бывает только в мышеловке. <br> Примечание 4 <br>Примечание 4<br><br> Бесплатные страницы могут предоставляться не только специализированными ком-паниями, но и другими организациями, например Интернет-провайдерами или ассоциациями фирм (для членов ассоциации). Размещать рекламу организации, предоставивщей место на сервере, на такой странице скорее всего не потребуется. <br> Выбирать хостинг-провайдера следует, ориентируясь на спектр предоставляемых услуг и цену размещения сайта. Чаще всего цена выражается в виде суммы, которую вам придется уплачивать за месяц (несколько месяцев, год и т. д.) использования ресурсов сервера. В большинстве случаев провайдеры предоставляют возможность выбора условий работы (тарифа). Если вы остановили свой выбор на бесплатном провайдере, то обратите внимание на объем места на диске сервера, который вы получите в свое распоряжение. <br> Совет 2 <br>Совет 2<br><br> Бесплатный хостинг является оптимальным вариантом для домашней странички на пинающего дизайнера. Возможно, позднее вы предпочтете использовать для нее платного провайдера, предоставляющего достаточно ресурсов для воплощения ваших замыслов. <br> Выбирая себе провайдера, вы выбираете еще и имя будущего сайта. От того, насколько оно лаконично и удобно для запоминания, во многом зависит коммерческий успех будущего сайта. Чем проще потенциальному клиенту запомнить и правильно набрать на клавиатуре имя, тем больше вероятность того, что он посетит ваш сайт. Наилучший вариант для имени сайта — название самой фирмы. На сайт с таким именем легко попасть, даже не зная о нем заранее. При этом следует избегать имен, которые могут записываться неоднозначно. Русские буквы Ё, И, Ц, Щ, Ь, Ы, Ъ, Э, Ю, Я могут быть записаны допустимыми в адресах доменов латинскими буквами (транслитерированы) неоднозначно. Также следует избегать использования в адресах символов "-" и "_". <br> Платные хостинг-провайдеры обычно дают вам возможность зарегистрировать домен второго уровня (например, <a href="http://www.alpha.com">www.alpha.com</a>). За регистрацию и сохранение за вами этого имени придется заплатить организации, уполномоченной выдавать имена сайтов в соответствующей зоне (с данным расширением). Например, за домен в зоне .RU придется платить около $26 в год организации РОСНИИРОС. Иногда домен регистрируется как домен третьего уровня, но домен второго уровня считают отдельной зоной (например, www.alpna.spb.ru). Регистрация такого имени часто производится бесплатно. <br> При использовании бесплатного хостинга вам, скорее всего, придется довольствоваться доменом третьего уровня или сайтом, размещенном в подкаталоге домена провайдера. Такие имена часто бывают слишком длинными и неудобными не только для пользователей, но и для хозяев. <br> Выбрав провайдера и имя сайта, вам остается только заключить с ним договор на обслуживание и приступить к строительству вашего представительства во Всемирной Паутине. Ниже мы подробно рассмотрим процесс регистрации и подготовки сайта на примере бесплатного сервиса. Это будет полезным, так как многие начинают освоение просторов Интернета именно с таких простых страничек. В настоящее время существует множество серверов, предоставляющих подобные услуги. Вот адреса некоторых из них: <br> <li> <a href="http://www.narod.ru">http://www.narod.ru</a>; </li> <li> <a href="http://www.chat.ru">http://www.chat.ru</a>; </li> <li> <a href="http://www.holm.ru">http://www.holm.ru</a>; </li> <li> и другие... </li> Вы можете без труда найти такой сайт, набрав в поисковой системе (например, <a href="http://www.yandex.ru">www.yandex.ru</a>) запрос "бесплатный хостинг" или другой подобный этому. <br> Если вы решили открыть страницу, например, на сайте Narod.ru, то вам прежде всего надо зайти на сайт этой компании. На нем вы сможете найти ссылки на страницу регистрации нового пользователя. Регистрация необходима, так как для обеспечения безопасности каждый должен иметь имя и пароль, которые позволят системе, обслуживающей страницы, распознать их и предоставить доступ к разрешенным для использования ресурсам сервера. Обычно к таким ресурсам относятся домашняя страничка, почтовый ящик (электронный), регистрационная запись в каталоге страниц, хранящихся на сервере и, возможно, некоторые другие. <br> Итак, приступим к регистрации. Прежде всего, откроем в браузере главную страницу выбранного нами сервера (пусть это будет Narod.ru). Если вы хотите зарегистрировать страницу на другом сайте, то процедура, которую вам придется пройти, может выглядеть немного по-другому, но существенных отличий, скорее всего, не будет. На Рисунок 21.1 показана главная страница сайта <a href="http://www.narod.ru">www.narod.ru</a>. <br> Примечание 5 <br>Примечание 5<br><br> Сайт Narod.ru является подразделением компании flndex, поддерживающей популяр ную поисковую систему <a href="http://www.yandex.ru">www.yandex.ru</a>. Благодаря этому, с именем пользователя и паролем, полученным при регистрации на Narod.ru, вы можете получить доступ к почтовому ящику и некоторым другим службам (например, к чату) прямо со страницы этой системы. <br> На этой странице вы видите множество ссылок. При помощи ссылок можно ознакомиться с уже размещенными на сервере страницами, получить интересующую вас информацию о системе, получить доступ к ее ресурсам (для этого надо быть зарегистрированным пользователем) и, что самое главное для нас, зарегистрироваться в качестве пользователя сервера. Для начала процесса регистрации воспользуйтесь ссылкой Регистрация, расположенной в верхнем левом углу страницы (на других серверах она может называться и располагаться немного иначе). Вы можете предварительно проверить, доступно ли для регистрации приглянувшееся вам доменное имя. Для этого введите это имя в расположенное в центре экрана поле и нажмите кнопку Занять. Система произведет проверку и, если введенное вами имя еще свободно, предложит зарегистрировать сайт. <br><br> <h1>Страница с несколькими баннерами</h1>Рисунок 21.4. Страница с несколькими баннерами <br><br><img src="image/21-8.jpg" alt="Страница с несколькими баннерами"><br> Размещением баннерной рекламы на страницах занимаются либо владельцы сайтов, либо специальные службы — баннерные сети. В первом случае реклама размещается либо на коммерческой основе (за вознаграждение), либо по пожеланию владельца сайта (например, он может рекламировать собственные услуги или один из разделов сайта). Для размещения такой рекламы необходимо договариваться с хозяевами сайта. <br> Во втором случае рекламу размещают не владельцы сайта, а система, реализующая распространение баннеров между ее участниками. Владелец сайта регистрирует свой ресурс в системе и отводит на сайте место для баннеров. На это место при каждой загрузке страницы автоматически помещается один из размещенных в системе баннеров. Система обеспечивает смену баннеров. В обмен на это система принимает баннеры организации, поддерживающей сайт, и распространяет их по сайтам других участников. Участие в такой системе, как правило, бесплатно (за несколько показов чужих баннера на вашем сайте ваш баннер будет по казан на нескольких других сайтах), хотя во многих случаях вы можете заку пить показы своей рекламы за определенную плату. <br> Для того чтобы стать участником баннерного обмена, вам необходимо заре гистрироваться в одной из подобных систем. Наиболее известными отечествен ными системами являются RB2 (<a href="http://www.rb2.ru">www.rb2.ru</a>) и Russian Link Exchange (RLE (<a href="http://www.linkexchange.ru">www.linkexchange.ru</a>). На Рисунок 21.5 показана заглавная страница сайта систе мы RLE. <br><br> <h1>Заглавная страница сайта системы обмена баннерами RLE</h1>Рисунок 21.5. Заглавная страница сайта системы обмена баннерами RLE <br><br><img src="image/21-9.jpg" alt="Заглавная страница сайта системы обмена баннерами RLE"><br> Еще несколько способов рекламы сайтов связано с использованием электронной почты и телеконференций (групп новостей). Первый способ, самый простой и безобидный, заключается в добавлении ссылки на ващ сайт к письмам и сообщениям. Это легко организовать при помощи механизма автоматического прикрепления подписей, которым снабжается большинство почтовых программ. Другой способ, далеко не такой безобидный, состоит в рассылке писем и сооб щений рекламного содержания. В некоторых случаях рассылка производится по адресам пользователей, которые сами выразили на это согласие. При этом информацию получают заведомо заинтересованные в ней люди. Но иногда для рассылки используются случайно набранные или похищенные списки адресов <br> Для большинства пользователей эти письма являются нежелательным мусором, от которого люди стремятся избавиться. Использовать этот способ для рекламы серьезного проекта не стоит. Пользователи могут не только проигнорировать информацию, но и составить о вас плохое мнение. <br><br>  <a name="35"><h1>&nbsp;&nbsp;<img src="/8.gif">&nbsp;&nbsp;Сайт: Аннимация - Видео - Графика</h1> <ul> <li><a href="/444-1/index.htm">Анимация на сайте</a><br> <li><a href="/445-1/index.htm">Графика на сайте</a><br> <li><a href="/446-1/index.htm">Фотография на сайте</a><br> <li><a href="/447-1/index.htm">Кино на сайте</a><br> <li><a href="/461-1/index.htm">Flash на сайте</a><br> <br> <li><a href="/448-1/index.htm">Видео для сайта</a><br> <li><a href="/449-1/index.htm">Premiere Pro</a><br> <li><a href="/450-1/index.htm">Vstudio</a><br> <li><a href="/451-1/index.htm">VirtualDub</a><br> <li><a href="/452-1/index.htm">Sonic Scenarist</a><br> <br> <li><a href="/453-1/index.htm">DVD</a><br> <br> <li><a href="/454-1/index.htm">Изображения для сайта</a><br> <li><a href="/455-1/index.htm">Пакет Photoshop</a><br> <li><a href="/456-1/index.htm">Adobe Illustrator</a><br> <li><a href="/457-1/index.htm">Adobe Illustrator</a><br> <li><a href="/458-1/index.htm">CorelDRAW</a><br> <br> <li><a href="/459-1/index.htm">CorelXARA</a><br> <li><a href="/460-1/index.htm">Maya</a><br> </ul> <br> <hr> <center> <!--LiveInternet counter--><a href="https://www.liveinternet.ru/click" target="_blank"><img id="licnt5E16" width="88" height="31" style="border:0" title="LiveInternet: показано число просмотров Р·Р° 24 часа, посетителей Р·Р° 24 часа Рё Р·Р° сегодня" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt5E16").src= "https://counter.yadro.ru/hit?t14.4;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script><!--/LiveInternet--> </center> <hr> </div> </center> </div> </tr> </table> </body> <br> </html>