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

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

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

Формат GIF

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

ПРИМЕЧАНИЕ. GIF — Graphic Interchange Format — Формат обмена графическими данными.

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

сжатие данных без потерь (алгоритм сжатия LZW);

максимальное число отображаемых цветов — 256;

поддержка прозрачности;

возможность включения нескольких изображений (анимация);

чересстрочный вывод изображений на экран (в GIF89a);

включение текстовых блоков (комментариев).

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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



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

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

ПРИМЕЧАНИЕ. Сама палитра цветов описывается очень просто — подряд записываются значения красного, зеленого и синего компонентов для первого цвета, затем — для второго и т. д.

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

а

б

с

Рис. 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.3. Увеличенный фрагмент изображения неба до (слева) и после сжатия (справа). При переходе в режим индексированных цветов плавные переходы оттенков практически исчезают

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

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



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

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

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

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

ПРИМЕЧАНИЕ. Рассматриваемый ниже формат 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), но пикселы будут отображены только после их загрузки. Если же изображение сохранено в чересстрочном режиме, то порядок строк меняется. Вначале сохраняется каждая восьмая строка, затем — каждая четвертая, после этого — каждая вторая и шестая строки, и наконец — все нечетные строки.

ПРИМЕЧАНИЕ. В англоязычных источниках сохранение с чередованием строк обозначают термином Interlaced.

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

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



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

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



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

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

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

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

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

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



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

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



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

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

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

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

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

Для лучшего понимания основ работы алгоритма 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.7. Изображение до сохранения в формате JPEG

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

а	д
б	е
в	ж
г	з

Рис. 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 — размытие кон трастных границ и линий. Эти искажения возникают вследствие того, что из-за недостатка информации изображение, считанное из файла, не может быть т воспроизведено с достаточной точностью.

ПРИМЕЧАНИЕ. Искажения, вносимые в картинку кодировщиком JPEG, часто называют артефактами JPEG.

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

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

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



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

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

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

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

Формат 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 приведен пример такого наложения. Слева приведена исходная картинка, в центре — фон, справа — результат.

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

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



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

ПРИМЕЧАНИЕ. В браузерах отображение плавно изменяющейся прозрачности пока не реализовано.

При сохранении картинок в формате 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.12. Тестовые изображения для сравнения возможностей форматов GIF, JPEG и PNG

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

Таблица 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-дизайнера.

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

Форматы web-графики Формат GIF Формат JPEG Формат PNG Что нового мы узнали? В этом разделе книги мы подробно рассмотрим три формата изображений, используемых в настоящее время для сохранения графического оформления web-страниц и для его доставки на компьютер пользователя. Это форматы GIF, JPEG и PNG. Хотя каждый из этих форматов имеет свои уникальные особенности, у них есть одна общая черта — все они обеспечивают сжатие данных, описывающих изображение. Это позволяет уменьшить объем файлов, а, следовательно, и время загрузки web-страницы на компьютер пользователя. Так как различные алгоритмы сжатия, применяемые в форматах web-графики, оптимальны для сохранения изображений разных типов, можно значительно уменьшить общий объем изображения, комбинируя форматы при сохранении его частей. ПРИМЕЧАНИЕ. На самом деле для оформления web-страниц можно использовать графику в любом формате, но при этом возникнет проблема совместимости страницы с различными браузерами. Например, браузер Internet Explorer после установки программы QuickTime получает возможность отображать файлы в формате TIFF. Однако в стандартной поставке IE модуля для просмотра файлов зтого формата нет. Начнем рассмотрение форматов web-графики с самого старого и самого «заслуженного» формата — GIF.

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

Цветовые режимы и модели После знакомства с форматами файлов, применяемых в web-дизайне, можно перейти к рассмотрению тонкостей подготовки графического оформления web-страниц. Работая с Adobe PhotoShop, вы, наверное, не раз обращали внимание на то, что и заголовке окна документа, кроме его имени, отображаются различные дополнительные символы. Это хорошо видно на рис. 3.1. Рис. 3.1. Дополнительная информация в заголовке окна документа В данном случае там видно имя файла (Car.tif), текущий уровень увеличения (@ 100%), а также обозначение цветового режима, в котором находится документ ((RGB)). Для многих начинающих пользователей последняя из этих надписей выглядит довольно загадочно. Цветовой режим представляет собой правило обозначения цветов пикселов документа. Так как компьютер использует для обозначений цветов числа, необходимо ввести некоторое правило преобразования этих чисел в отображаемые устройствами вывода цвета и наоборот. Таких правил может быть несколько, поэтому каждое из них получает свое название. В заголовке окна выводится название правила или режима, применяемого в данный момент к документу. Некоторые люди могут задать резонный вопрос: «А зачем такие сложности? Неужели нельзя обойтись одним режимом?». Оказывается, разные режимы нужны для того, чтобы отобразить в файле особенности последующего вывода изображения на какое-либо устройство или сохранения в файле. Разные устройства вывода изображений могут работать по различным принципам, используя физические явления, не имеющие друг с другом практически ничего общего. Например, на экране монитора (а также телевизора) изображение строится при помощи засветки люминофора пучком электронов. При таком воздействии люминофор начинает излучать свет. В зависимости от состава люминофора, этот свет имеет ту или иную окраску. Для формирования полноцветного изображения используется люминофор со свечением трех цветов — красным, зеленым и синим. Поэтому такой метод формирования цвета называют RGB (Red, Green, Blue — Красный, Зеленый, Синий). ПРИМЕЧАНИЕ. Сами по себе зерна люминофора разных цветов позволяют получить только чистые цвета (чистый красный, чистый зеленый и чистый синий). Промежуточные оттенки получаются за счет того, что разноцветные зерна расположены близко друг к другу. При этом их изображения в глазу сливаются, а цвета образуют некоторый смешанный оттенок. Регулируя яркость зерен, можно регулировать получающийся смешанный тон. Например, при максимальной яркости всех трех типов зерен будут получен белый цвет, при отсутствии засветки — черный, а при промежуточных значениях — различные оттенки серого. Если же зерна одного цвета засветить не так, как остальные, то смешанный цвет не будет оттенком серого, а приобретет окраску. Такой способ формирования цвета напоминает освещение белого экрана в полной темноте разноцветными прожекторами. Свет от разных источников складывается, давая различные оттенки. Поэтому такое представление цвета (цветовую модель) называют аддитивной (суммирующей). При выводе изображения на печать используются другие технологии. Это может быть, например, струйная печать или многокрасочная печать на типографской машине. В этом случае изображение на бумаге создается при помощи чернил разных цветов. Накладываясь на бумагу и друг на друга, чернила поглощают часть света, проходящего сквозь них и отражающегося от бумаги. Если чернила густые, то они сами отражают свет, но не весь. Таким образом, отраженный от картинки цвет приобретает ту или иную окраску, в зависимости от того, какие красители и в каких количествах были использованы при печати. Обычно при таком способе цветопередачи для получения промежуточных оттенков используются чернила четырех цветов: голубой, пурпурный, желтый и черный. Такую цветовую модель называют CMYK — Cyan, Magenta, Yellow Blасk (Голубой, Пурпурный, Желтый, Черный). Теоретически для получения любого из оттенков достаточно только голубого, желтого и пурпурного цветов. Однако на практике крайне сложно получить их смешением чистый черный цвет или оттенки серого. ПРИМЕЧАНИЕ. Так как в цветовой модели CMYK оттенки образуются путем вычитания определенных составляющих из белого, ее называют субтрактивной (вычитающей). Кроме различных печатающих устройств, эта цветовая модель используется в фотопленке и фотобумаге. Там также содержатся слои, чувствительные к голубому, желтому и пурпурному свету. В файлах изображений, сохраненных в режимах RGB и CMYK, для каждого пиксела записываются значения всех трех или четырех компонентов. Для вывода изображения на черно-белые (монохромные) устройства, а также для некоторых других целей лучше всего подходит изображение в режиме градаций серого (grayscale). В этом режиме для каждого пиксела записывается только одно значение — его яркость. Существуют и другие цветовые режимы. Например, для записи изображений В форматах, ограничивающих допустимое число цветов (таких как GIF), эти изображения надо предварительно перевести в режим индексированных цветов. При этом составляется палитра, которая и используется при дальнейшей работе. При попытке использовать не входящий в палитру цвет он заменяется ближайшим цветом, занесенным в нее. Теперь рассмотрим, как работа с цветовыми режимами реализована в Adobe > PhotoShop. Прежде всего, следует заметить, что в любом из режимов изображение представляется в виде нескольких каналов, каждый из которых представляет собой отображение одной из цветовых составляющих. В режиме RGB изобра-жение содержит красный, зеленый и синий каналы. Вы можете редактировать всe каналы одновременно (именно этот режим используется по умолчанию) или по отдельности. Подробнее работа с каналами рассматривается ниже. Доступ к цветовым режимам осуществляется при помощи команд меню Image > Mode (Изображение > Режим). Это меню показано на рис. 3.2. Рис. 3.2. Меню выбора цветового режима Как видно, меню разделено на четыре зоны. В верхней зоне перечислены цветовые режимы, поддерживаемые программой. Во второй зоне находятся два пункта: 8 bit/Channel (8 бит/канал) и 16 bit/Channel (16 бит/канал). Установив флажок напротив одного из них, вы можете выбрать, сколько битов будет отводиться для каждого пиксела на каждый из цветовых каналов. Обычно используется режим 8 бит/канал. При этом реализуются все возможности программы. Изображения с 16 бит/канал могут быть получены, например, с некоторых сканеров. Такие изображения не могут быть точно отображены на мониторе (предел — 8 бит/канал) и набор возможностей их обработки сильно ограничен (не работают большинство инструментов, команд и фильтров). В большинстве случаев этот режим не используется. Третья зона содержит одну команду — Color Table... (Таблица цветов...). Эта команда позволяет редактировать цветовую таблицу в режиме индексированных цветов. Мы рассмотрим ее позже. Наконец, в четвертой зоне содержатся команды, позволяющие внедрять в файл данные цветокоррекции (профили) и конвертировать изображение из одного профиля в другой. Эти команды важны в полиграфии, но в web-дизайне не очень актуальны, так как в большинстве случаев цветокоррекция в web-графике не используется. Adobe PhotoShop поддерживает восемь цветовых режимов, переключаться между которыми вы можете при помощи соответствующих команд из меню Image > Mode (Изображение > Режим). Рассмотрим их по порядку. Bitmap (Битовый) — любая точка изображения может быть либо белой, либо черной. Этот режим может оказаться полезным при печати изображений на некоторых принтерах, а также для получения определенных изобразительных эффектов. В этом режиме большинство функций PhotoShop не работает (вы не сможете работать со слоями, применять фильтры и настройки изображения). Кроме того, рисующие инструменты сильно ограничиваются в своих возможностях. Для перевода изображения в режим Bitmap (Битовый) его надо предварительно перевести в режим Grayscale (Градации серого). После этого становится доступной команда выбора битового режима. При ее вызове на экране появится окно настройки преобразования, показанное на рис. 3.3. Рис. 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.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 (Градации серого).

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

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

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

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

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

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



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

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

В левой части окна находится зона выбора цвета, а рядом с ней — вертикальный ползунок. В правой части окна располагаются поля для ручного ввода значений цветовых компонентов. Рядом с некоторыми из полей ввода видны круглые переключатели . С их помощью можно выбрать, какой из параметров цвета будет отображаться на ползунке. Например, на рис. 3.7. это параметр Н (Hue — Оттенок). Поле выбора цвета отображает изменение оттенков по двум оставшимся координатам цветового пространства (в данном случае это насыщенность и яркость). При этом вы можете видеть сходные оттенки и легко «перемещаться» по пространству цветов. Всего для обозрения доступно три пространства — HSB, RGB и Lab, в каждом из которых цвет задается при помощи собственного набора компонентов. Так как компонентов в любом из этих случаев три, вы можете выбрать, за какой из них будет отвечать ползунок. Цветовая модель CMYK тоже представлена в этом окне, но так как она содержит четыре компонента, представить ее так же, как трехмерные модели RGB и Lab, невозможно. Поэтому указать цвет в рамках модели CMYK вы можете только при помощи полей ввода.



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

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



ПРИМЕЧАНИЕ. Безопасной палитрой называют набор цветов, одинаково отображаемых браузера ми в операционных системах Mac OS и Windows.

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



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

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

ПРИМЕЧАНИЕ. Для выполнения операций с полем ввода необходимо выделить содержащийся в нем текст.

Пользователи, предпочитающие выбирать цвет при помощи панели Color (Цвет), также могут использовать безопасную палитру и различные цветовые модели. Выбрать режим можно при помощи меню, появляющегося после нажатия на кнопку со стрелкой . Это меню изображено на рис. 3.9. В нем находятся команды выбора способа представления цвета (RGB, CMYK, Lab и т. д.), команда копирования в буфер обмена HTML-кода цвета (Copy Color as HTML (Копировать как HTML)), команды выбора режима спектра, расположенного на панели, а также команда Make Ramp Web Safe (Безопасный для Web спектр). При подготовке web-графики особенно полезной может оказаться команда Web Color Sliders (Ползунки цветов Web). После ее вызова при помощи ползунков, задающих цветовые составляющие, выбирается только «безопасный» цвет. На рис. 3.10 изображена панель Color (Цвет) в режимах RGB Sliders (Ползунки RGB) и Web Color Sliders (Ползунки цветов Web).





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

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

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

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

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

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

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



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

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

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



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

В этом уроке мы познакомились с наиболее широко используемыми цветовыми моделями: RGB, CMYK, Grayscale (монохромное изображение) и Lab. Были рассмотрены способы задания цвета в рамках этих моделей, а также их реализация в Adobe PhotoShop.

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

Сканирование и коррекция изображений Первая проблема, с которой вы столкнетесь, приступив к работе над оформлением web-страницы, — подбор графического материала. Некоторые элементы вы решите нарисовать самостоятельно, но многое придется искать и добывать да различных источников. Это касается в первую очередь различных схем, чертежей и фотографий. Схемы и чертежи часто выполняются в различных спе-циализированных программах и, следовательно, имеются в электронном виде. Единственная проблема, которую придется решить перед их использованием, — преобразование изображения их исходного формата в формат, распознаваемый графическим редактором. Если же речь идет о фотографиях, то чаще всего они представлены в виде «твердых» (бумажных) копий и могут быть оцифрованы при помощи сканера. Казалось бы, никаких проблем тут возникнуть не может — включил сканер, загрузил в него картинку, и готово... Но все не так просто — из-за дефектов фотографии или низкого качества сканера полученное изображение по качеству может оказаться пригодным разве что для устрашения посетителей вашей странички. Поэтому перед использованием выбранных кадров их надо подготовить — произвести коррекцию цветов и при необходимости устранить дефекты. Этому и будет посвящен данный урок. ПРИМЕЧАНИЕ. Цифровые фотокамеры заслуженно пользуются любовью дизайнеров из-за просто ты и скорости получения цифровых изображений. Однако полученным с камеры файлам тоже может потребоваться цветокоррекция. Касается это и различных готовых изображений, которые вы можете найти в Интернете или в других источниках. СОВЕТ. Если вам необходимо «перегнать» изображение из программы подготовки докумен-тации (например, AutoCAD или ArchiCAD) в Adobe PhotoShop, прежде всего проверьте, нет ли возможности прямого сохранения изображений в формате растровой графики. При отсутствии такой возможности попробуйте воспользоваться какой-либо программой, совместимой по форматам файлов с используемым вами обеспечением (например, Corel Draw или Adobe Illistrator). Начнем с рассмотрения методов ввода в PhotoShop изображений, полученных со сканера. Самый простой вариант — открыть файл, отсканированный и сохраненный в другой программе. При этом вам не придется работать со сканером, но обработка изображений все равно может понадобиться. В тех случаях, когда изображение необходимо, сканировать, прежде всего, вам понадобится подключить сканер и привести его в рабочее состояние. После этого подготовьте к работе оригинал. PhotoShop получает изображения не непосредственно со сканера, а от специальной программы, реализующей управление сканером и обмен данными. Для ее запуска вызовите команду File > Import > TWAIN Acquire (Файл > Импорт > Захват TWAIN). Будет вызвана программа управления, при помощи которой вы сможете настроить сканер и получить нужные данные. Если вы ранее не пользовались сканером, то перед работой вам необходимо указать PhotoShop, что работать надо именно с ним. Для этого вызовите команду File > Import > TWAIN Select (Файл > Импорт > Выбор TWAIN) и выберите нужное устройство. СОВЕТ. Если изображение, которое вы сканируете, нанесено на бумагу (или другой предмет) типографским способом, то, скорее всего, в полученной электронной картинке проявятся точки, свойственные широко применяемой сейчас офсетной печати. Они могут сделать изображение совершенно непригодным к дальнейшему использованию. Для устранения этого недостатка многие программы управления сканерами снабжаются функцией устранения растра (Descreen). Используя ее, вы можете значительно улучшить качество получаемых графических материалов. Если вы сканируете изображение, отпечатанное не офсетным, а другим методом, функцию Descreen включать не следует, так как электронное изображение получится размытым. В отсутствие режима Descreen можно попытаться улучшить качество изображения при помощи фильтров размытия (группа фильтров Filter > Blur (Фильтр > Размытие)) или фильтров, ориентированных на удаление растра. После того, как вы отсканируете и загрузите изображение в PhotoShop, скорее всего оно будет далеко от идеала. Обнаружатся различные недостатки, отклонения и искажения, которые придется исправлять вручную. Вот наиболее часто встречающиеся недочеты сканированных (или загруженных с цифровой камеры) изображений: недостаточная яркость или контрастность; недостаточная или избыточная цветовая насыщенность; несоответствие оттенков изображения оригиналу или желаемой цветовой гамме; размытость (недостаточная резкость); наличие посторонних шумов (например, из-за шероховатости бумаги). Рассмотрим эти проблемы и способы их устранения. В Adobe PhotoShop есть набор команд, предназначенных для коррекции изображений. Эти команды располагаются в меню Image > Adjustments (Изображение > Настройки). С их помощью можно корректировать содержимое графических файлов, а также добиваться интересных эффектов при обработке изображений. Ниже рассмотрены наиболее полезные из них. Вы можете применять эти команды ко всему изображению или к его части. Для работы с некоторой областью изображения надо выделить ее любым из доступных методов. Простейший способ — использовать инструмент Marquee (Выделение). Методам выделения сложных по форме объектов посвящен отдельный урок. ПРИМЕЧАНИЕ. Коррекция изображений часто нужна не только во время работы со сканером, но и при использовании готовых изображений. Многие художественные эффекты и приемы также основываются на методах коррекции. Если съемка объекта производилась в условиях низкой освещенности или использовалась низкокачественная аппаратура, изображение может быть недостаточно контрастным или слишком темным. Схожие проблемы могут возникнуть при низком качестве электронного изображения, полученного, например, из Интернета. В тех случаях, когда речь идет о сканировании, можно попытаться устранить недостатки, настраивая программу управления сканером. Из средств, предоставляемых Adobe PhotoShop, для исправления отклонений в яркости и контрасте изображения наилучшим образом подходит команда Brightness/Contrast, позволяющая независимо регулировать яркость и контраст изображения. Вызвать ее можно при помощи команды меню Image > Adjustments > Brightness/Contrast (Изображение > Настройки > Яркость/Контраст). При этом на экране появится окно настроек, изображенное на рис. 4.1. Рис. 4.1. Окно настройки команды Brightness/Contrast Ползунки Brightness (Яркость) и Contrast (Контраст) позволяют регулировать соответственно яркость и контрастность изображения. Выставленные на ползунках значения отображаются в расположенных рядом с ними полях ввода. Вы можете вводить значения непосредственно в эти поля. Обратите внимание, значения могут быть положительными и отрицательными. При вводе положительных величин знак «плюс» можно пропустить, а вот ставить «минус» для отрицательных чисел обязательно. Для того чтобы производимые изменения немедленно отражались на изображении, установите флажок Preview (Просмотр). Произведя необходимые действия, нажмите кнопку ОК. Если вы хотите отказаться от использования команды, нажмите кнопку Cancel (Отмена). СОВЕТ. Большинство диалоговых окон Adobe PhotoShop позволяют восстановить значения, которые были выставлены в момент вызова окна. Для этого нажмите клавишу Alt — кнопка Cancel (Отмена) будет заменена кнопкой Reset (Сброс). Нажав эту кнопку, вы можете сбросить значения, выставленные в окне. На рис. 4.2 приведен пример использования этой команды. Слева — фрагмент исходного изображения до проведения коррекции. Картинка очень темная и малоконтрастная. Справа — тот же фрагмент, но после увеличения яркости и контраста. ВНИМАНИЕ. Регулируя яркость и контраст изображения, следите за результатом. Чрезмерное увеличение контраста может привести к образованию «засвеченных» областей, искажению цветов и потере деталей. Слишком большое увеличение яркости противодействует увеличению контраста.

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

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



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

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

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

ПРИМЕЧАНИЕ. Сдвиг спектра производится циклически. Это значит что смещение на +180° и на -180° дадут одинаковый результат.

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

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

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



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



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

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

переместить весь диапазон, не изменяя его ширины. Для этого передвиньте при помощи мыши темно-серую полосу. Все остальные элементы также переместятся;

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

изменить диапазон полного воздействия команды. Это можно осуществить, передвинув вертикальные разделители, изменив тем самым ширину темно-серой полосы.



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

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

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

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

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

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

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



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

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



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

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

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



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

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

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

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



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

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

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

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



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



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

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



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

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

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

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

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

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



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

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

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

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

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



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

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



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

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

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

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

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

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



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

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

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

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

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



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

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

а	б	в
г	д	e
ж	з	и

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

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

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



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

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



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

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

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

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



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

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

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



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



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

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

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

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

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

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



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

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



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

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

СОВЕТ. Если изображение надо окрасить в какой-либо один цвет (сделать монохромным), то перед применением команды 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... (Нерезкая маска...).



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

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



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

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

ПРИМЕЧАНИЕ. Значения параметров для каждого отдельного изображения лучше подобрать индивидуально.



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

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



Рис. 4.17. Палитра Info

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

информация о цветовых составляющих в двух цветовых моделях. По умолчанию используются модели RGB и CMYK, но при разработке web- графики удобнее получать информацию о составляющих в моделях RGB и HSB;

данные а положении указателя мыши в окне документа;

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

координаты точки отсчета — верхнего левого угла, центра или выделенной строки (столбца) — выделения (при работе с инст рументом Rectangular Marquee (Прямоугольное выделение), Elliptical Marquee (Эллиптическое выделение), Single Row Marquee (Выделение одной строки) и Single Column Marquee (Выделение одного столбца));

при перемещении объекта выводятся данные о его смещении от носитёльно начального положения в декартовых (прямоуголь ных) (DХ — сдвиг по горизонтали, AY — сдвиг по вертикали) и полярных координатах (А — направление движения (азимут), D — удаление).

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





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

Кроме коррекции цветовой гаммы, контраста и яркости изображения, вам может понадобиться, например, устранить небольшие поврежденные фрагменты картинки или устранить некоторые посторонние предметы. Для этих целей используется инструмент Clone Stamp (Штамп). Вызвать его можно при помощи кнопки, расположенной на панели инструментов. Этот инструмент позволяет быстро копировать фрагменты изображения внутри одного слоя. Прежде всего, выберите инструмент и, удерживая клавишу Alt, щелкните на фрагменте изображения, который вы хотите использовать в качестве образца. После этого просто рисуйте «штампом» как обычной кисточкой — изображение будет копироваться из указанной ранее точки в точку текущего положения курсора. При перемещении курсора переместится и точка отбора образцов изображения. На помощи панели параметров вы можете выбрать размер кисти («штампа»). В PhotoShop версии 7.0 для рисующих инструментов (в том числе и для инструмента Clone Stamp (Штамп)) была введена функция аэрографа (она включается нажатием кнопки на панели параметров). При ее включении эффект от применения инструмента усиливается при продолжительном удерживании курсора на одном месте одновременно с нажатием левой кнопки мыши. Рядом с кнопкой включения функции аэрографа находится поле ввода Flow (Поток), позволяющее регулировать «давление» в аэрографе — степень выраженности эффекта аэрографии.



Можно переключить инструмент Clone Stamp (Штамп) в режим рисования заданным шаблоном, а не фрагментом изображения. Для этого надо вызвать меню кнопки инструмента (удерживать кнопку нажатой некоторое время) и выбрать из него инструмент Pattern Stamp (Шаблонный штамп). Шаблон для рисования выбирается на панели параметров.

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

Также был добавлен инструмент Patch (Заплатка). Он также позволяет копировать выделенный фрагмент изображения, но перед копированием фрагмент нужно выделить (аналогично инструменту Lasso (Лассо)). Затем его надо перетащить в нужную область изображения. Если на панели параметров переключатель Patch (Залатать) установлен в положение Source (Источник), то изображение из конечной точки перемещения будет использовано для восстановления выделенного фрагмента. Если этот переключатель находится в положении Destination (Конечная точка), то выделенный фрагмент будет использован для восстановления изображения, находящегося в конечной точке (точке, в которую вы перенесете выделенный фрагмент). Находящаяся на панели инструментов кнопка Heal Selection (Восстановить выделение) позволяет произвести обработку выделенной области, приводящую к устранению мелких деталей, в том числе и небольших повреждений. При помощи кнопки Use Pattern (Использовать шаблон) можно выполнить восстановление с использованием шаблона для заполнения утерянных или непригодных для использования фрагментов картинки. Выбрать шаблон можно из расположенного рядом с кнопкой списка.

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

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

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

Нами были рассмотрены инструменты Adobe PhotoShop, позволяющие устранять небольшие повреждения исходного изображения, возникающие, например, из-за пыли или царапин на сканируемом оригинале.

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

Выделение фрагментов изображения Очень часто при работе с графикой возникает необходимость выделить какую-либо часть изображения. Это может быть нужно для выборочного применения команды или фильтра, перемещения или удаления объектов, рисования в ограниченной области и многого другого. В этом уроке мы рассмотрим способы создания выделений различной формы, а также методы выделения фрагментов изображений. Прежде всего следует сказать несколько слов о том, что представляет собой «выделение». Под этим термином понимают область изображения, отделенную от остальной картинки специальными методами. Выделенная область остается частью изображения (до оробой команды она не выносится на отдельный слой или в отдельный файл). Любые действия, обычно выполняемые над всем изображением, при наличии выделения выполняются только над пикселами, находящимися внутри него. В окне документа граница выделения отображается в виде переливающейся пунктирной линии. В Adobe PhotoShop выделения задаются с помощью так называемых альфа-каналов. Альфа-канал — это самостоятельное монохромное изображение, содержащее до 256 градаций яркости и имеющее размер равный размеру изображения. Таким образом, каждой точке обычной картинки при создании выделенной области ставится в соответствие точка в альфа-канале. Цвет этой точки определяет степень «выделенности» точки обычного изображения. Черный обозначает полное выделение (100%), белый — отсутствие выделения (0%), оттенки серого — промежуточные степени. Например, если точка в альфа-канале имеет цвет 50% черного, то точка на изображении будет выделена на 50%. Это значит, что все применяемые к ней операции будут ослаблены на 50%. К точкам, выделенным на 100%, все действия применяются в полной мере. К невыделенным точкам (белый цвет в альфа-канале) команды и эффекты не применяются. Такое представление о выделении участков изображения позволяет редактировать выделение как обычное изображение. При этом можно использовать практически все инструменты, фильтры и команды. Работа в этом режиме будет рассмотрена несколько позже. Начнем рассмотрение работы с выделенными областями изображения с самых простых приемов. Рис. 5.1. Кнопки вызова инструментов работы с выделенными областями изображений ПРИМЕЧАНИЕ. Одно из основных назначений выделенных областей — копирование графических объектов. Для того чтобы скопировать выделенный фрагмент, используйте команду Edit > Сору (Правка > Копировать), комбинации клавиш Ctrl+C или Ctrl+Insert. Используя команду Edit > Cut (Правка > Вырезать) или комбинации клавиш Ctrl+Del и Ctrl+X, можно не скопировать, а вырезать фрагмент изображения, поместив его в буфер обмена. При помощи команды Edit > Paste (Правка > Вставить) вы можете вставить в изображение фрагмент из буфера обмена. Если текущий слой не пуст, то фрагмент будет помещен на новый слой. Для этой же цели можно использовать комбинации клавиш Ctrl+V или Shift+Insert. В меню Edit (Правка) и в контекстных меню изображения находятся еще несколько команд, позволяющих оперировать фрагментами изображений. Adobe PhotoShop предоставляет пользователям набор инструментов для работы с выделениями. Доступ к ним осуществляется при помощи кнопок, расположенных в верхней части панели инструментов. Они показаны на рис. 5.1. Рассмотрим эти инструменты подробнее. Первый и наиболее часто используемый инструмент — Rectangular Marquee (Прямоугольное выделение). Для выделения прямоугольного участка изображения подведите курсор к точке, в которой должен находиться верхний левый угол выделения, нажмите левую кнопку мыши и, перемещая мышь, выделите нужный участок. После этого отпустите кнопку мыши. Если при этом держать нажатой клавишу Alt, то выделение рисуется не от верхнего левого угла, а от центра. Удерживая клавишу Shift, вы можете создать выделение квадратной формы. СОВЕТ. Во многих случаях клавиша Shift используется для создания объектов правильной формы или для сохранения формы во время преобразований. Например, если при масштабировании объекта вы будете удерживать эту клавишу, то будут сохранены пропорции объекта. Это относится не только к Adobe PhotoShop, но и к другим программам. Можно изменить действие инструмента Rectangular Marquee (Прямоугольное выделение). Для этого нажмите соответствующую кнопку на панели инструментов и удерживайте ее некоторое время. На экране появится меню выбора инструментов, изображенное на рис. 5.2. Рис. 5.2. Меню выбора инструментов, используемых для создания выделения заданной формы Представленные в нем инструменты предназначены для создания выделения заданной формы, такой как прямоугольник, эллипс или линия. Инструмент Elliptical Marquee (Эллиптическое выделение) подобен инструменту Rectangular Marquee (Прямоугольное выделение), но при его помощи можно выделять эллиптические области. При нажатой клавише Shift образуется выделение, имеющее форму правильного круга. Инструменты Single Row Marquee (Выделение одной строки) и Single Column Marquee (Выделение одного столбца) предназначены для выделения области в один пиксел высотой или шириной. На практике они используются редко. Инструменты выделения можно настраивать, для этого служит панель настройки. Она изображена на рис. 5.3. Рис. 5.3. Вид панели настройки при работе с инструментом Rectangular Marquee В поле Feather (Размытие) указывается, на сколько пикселов будет «размыто» выделение. Если это значение отлично от 0, то границы выделенной области будут нечеткими. При установленном флажке Anti-aliased (Сглаживание) скругленные границы выделения сглаживаются. Это делается для устранения «зазубрин». Из разворачивающегося списка Style (Стиль) вы можете выбрать режим построения выделения. Доступны три варианта: Normal (Нормальный) — выделение полностью контролируется движением мыши; Constrained Aspect Ratio (Фиксированное соотношение сторон) — независимо от движения мыши поддерживается заданное соотношение размеров выделения по горизонтали и по вертикали. Числа, определяющие ширину и высоту выделенной области, вводятся в поля Width (Ширина) и Height (Высота); Fixed Size (Фиксированный размер) — выделенная область будет иметь заданные в полях Width (Ширина) и Height (Высота) размеры. Стили работают при работе с прямоугольным и эллиптическим выделением. СОВЕТ. Стиль Constrained Aspect Ratio (Фиксированное соотношение сторон) оченьудобен, если требуется вырезать множество фрагментов одного размера из различных по размерам исходных изображений. В этом случае выделенные фрагменты легко масштабировать, приводя к нужным габаритам. Еще одна группа инструментов предназначена для создания выделения про извольной формы. Главный из них (хотя и не самый нужный) — Lasso (Лассо). С его помощью можно выделять участки изображения любой формы. Достаточно провести мышью по нужному маршруту, удерживая левую кнопку нажатой. Когда вы отпускаете кнопку, маршрут автоматически замыкается, образуя выделенную область. Если удерживать нажатой клавишу Alt, то после щелчка в некоторой точке можно, не нажимая кнопку мыши, провести линию. Ее конец определяется следующим щелчком. Рис. 5.4. Меню выбора инструментов для работы с выделением произвольной формы Нажав Кнопку инструмента Lasso (Лассо) и подержав ее нажатой некоторое время, можно вызвать меню выбора инструментов работы с выделением произвольной формы. Оно показано на рис. 5.4. Инструмент Polygonal Lasso (Многоугольное лассо) предназначен для построения выделения в виде многоугольника с прямыми гранями. Углы многоугольника определяются щелчками мыши. Для замыкания контура необходимо приблизить курсор к начальной точке (при этом форма курсора изменится) и щелкнуть мышью. Если, рисуя контур, удерживать клавишу Shift, то линии будут стро иться под углами, кратными 45°. Наиболее интересный инструмент этой группы — Magnetic Lasso (Магнитное лассо). С его помощью можно быстро выделить объект, имеющий четкий контур. Для этого достаточно щелкнуть на границе объекта и вести курсор вдоль нее. При достижении начальной точки надо еще раз щелкнуть мышью. Клавиша Alt позволяет в процессе построения выделения временно перейти в режим многоугольного лассо, а щелчок мыши при нажатой клавише Ctrl приводит к немедленному замыканию выделения. Клавиша Shift позволяет автоматически строить выделение из отрезков прямых. Инструмент Magnetic Lasso (Магнитное лассо) имеет сложную систему настроек. Параметр Width (Ширина), уже встречавшийся ранее, в данном случае определяет размеры зоны изображения, анализируемой при перемещении указателя мыши над изображением. Параметр Edge Contrast (Контраст границы) определяет, какая разность яркости соседних пикселов будет распознаваться как граница объекта. Если выделяемый объект имеет малоконтрастную границу, этот параметр следует уменьшить. Для контрастных изображений можно увеличить значение контраста. При помощи параметра Frequency (Частота) можно задать, с какой частотой будут расставляться опорные точки выделения. При работе с выделениями сложной формы имеет смысл увеличить частоту расстановки опорных точек. СОВЕТ. Опорные точки выделения создаются автоматически и позволяют изменять только что проведенную линию выделения, не затрагивая при этом линий, проведенных ранее. Вы можете ставить их вручную. Для этого достаточно во время обводки контура щелкнуть в нужной точке мышью. Если вам потребуется выделить однотонный фрагмент изображения, по пробуйте воспользоваться инструментом Magic Wand (Волшебная палочка). Выберите этот инструмент и щелкните мышью внутри области, подлежащей выделению. Все пикселы, имеющие цвет, схожий с цветом пиксела, на котором вы щелкнули мышью, и непосредственно связанные с ним, будут выделены. Настройки инструмента позволяют достаточно гибко настраивать этот процесс. Параметр Tolerance (Допуск) определяет, на сколько может отличаться цвет выделяемых точек от цвета пиксела, с которого была начата работа инструмента. Уменьшите его значение для более точного выделения, для выделения более широкого диапазона оттенков его надо увеличить. Флажок Anti-aliased (Сглаживание), как уже было сказано, позволяет сделать границы выделения гладкими. Если установлен флажок Contiguous (Смежные пикселы), то выделены будут только пикселы, прикасающиеся с точкой начала выделения через другие выделенные пиксели. Сняв этот флажок, можно выделить все точки изображения, имеющие под ходящую окраску. Установив флажок Use All Layers (Все слои), вы получаете возможность строить выделение, используя информацию обо всех содержащихся в файле слоях. Если в документе уже имеется выделенная область, то действие описанных выше инструментов несколько меняется. Появляется возможность передвигать границы выделения и выделенный фрагмент изображения, добавлять к выделению новые области или вычитать их. При наведении курсора на выделенную область (при этом должен быть выбран инструмент для работы с выделением) он изменит свою форму. Для перемещения выделения нажмите левую кнопку мыши и, удерживая ее, переместите выделенную область. Если при этом удерживать нажатой клавишу Ctrl, то перемещаться будет не граница выделения, а выделенная область изображения. При этом форма курсора также изменится. СОВЕТ. Перемещать подобным образом фрагменты изображения можно при работе с практически всеми инструментами, имеющимися в Adobe PhotoShop. Если выделенная область отсутствует, то перемещается все изображение, находящееся на активном слое. Клавиши Alt и Shift позволяют вычитать фрагменты из выделения или добавлять к нему новые участки. Для выполнения этой операции пользуйтесь инструментом, удерживая соответствующую клавишу нажатой. При вычитании фрагментов выделения рядом с курсором отображается знак «минус», при добавлении — «плюс». Если удерживать нажатыми Alt и Shift одновременно, то к выделенной области будет применяться операция «логическое И». Это значит, что после применения инструмента выделенной останется область, являющаяся пересечением изначально выделенного фрагмента и только что обведенного участка. Во время выполнения подобной операции рядом с курсором выводится значок «X». Все эти режимы вызываются при помощи кнопок, находящихся на панели настройки . Они отвечают за следующие режимы (слева направо): обычный (создание нового выделения), добавление к существующему выделению, вычитание из выделения, режим пересечения. Создав выделенную область, вы можете в любой момент удалить ее. Для этого достаточно щелкнуть на невыделенном участке изображения (при этом должен быть выбран «выделяющий» инструмент). Еще один способ удалить выделение — использовать клавиатуру. Надо нажать комбинацию клавиш Ctrl+D. СОВЕТ. При помощи клавиатуры можно не только удалять выделение, но и вызывать его. Комбинация Ctrl+A позволяет выделить все изображение. При помощи комбинации Ctrt+Shift+O можно вызвать последнюю использовавшуюся выделенную область. В меню Select (Выделить) находятся аналогичные команды: Аll (Все), Deselect (Убрать выделение); Reselect (Восстановить выделение). Инструменты, предназначенные для работы с выделениями, очень полезны. С помощью уже рассмотренных нами способов можно выделять объекты прямоугольной, эллиптической и более сложной формы, отделять объекты от фона (при помощи инструментов Magnetic Lasso (Магнитное лассо) или Magic Wand (Волшебная палочка)), перемещать их. Но во многих случаях их возможностей оказывается недостаточно. Тогда можно использовать более сложные средства. Если вам требуется выделить на всем изображении однотонные пикселы, удобнее всего воспользоваться командой Select > Color Range... (Выделение > Цветовой диапазон). После ее вызова на экране появится окно управления, показанное на рис. 5.5. Рис. 5.5. Окно настройки команды Color Range... В левой части окна находится уменьшенная копия изображения, отображающая само изображение или его выделенную область. Выделение производится путем задания образца цвета (при помощи «пипеток») и выбора разброса цвета выделяемых пикселов (при помощи ползунка Fussiness (Разброс), расположенного над копией изображения). При разбросе равном 0, выделяются только пикселы выбранного цвета. Если разброс равен 200, то выделенным окажется все изображение. При промежуточных значениях пикселы, имеющие выбранный цвет, выделяются полностью. Пикселы, цвет которых несколько отличается от выбранного, выделяются частично. Это значит, что все команды, фильтры и эффекты будут применяться к ним в зависимости от степени выделения. Ниже копии изображения находятся два переключателя — Selection (Выделение) и Image (Изображение). Они указывают программе, что отображать в окне настройки команды — выделенную область изображения или само изображение. В правой части окна находятся кнопки для вызова «пипеток» , позволяющих выбирать выделяемые оттенки. Обычная «пипетка» позволяет выбрать цвет, от которого отсчитываются оттенки выделяемых точек (в зависимости от заданного разброса). «Пипетка с плюсом» позволяет добавить к выделению оттенки, не попавшие в него после первого выбора цвета. Например, после выбора простой «пипеткой» красного цвета на изображении оттенки зеленого выделяться не будут. Для того чтобы «захватить» и их, надо использовать «пипетку с плюсом». «Пипетка с минусом», наоборот, предназначена для исключения оттенков из выделенной области. СОВЕТ. Щелкнув мышью на кнопке выбранной в данный момент «пипетки», вы можете вызвать на панель настроек список 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 (Быстрая маска). С его помощью можно редактировать границы выделенной области так, как будто это — простое изображение. При этом используются все фильтры, команды и инструменты, которые применяются при работе с монохромными изображениями. Это предоставляет обширные возможности для выделения объектов сложной формы, а также для создания специальных эффектов. ПРИМЕЧАНИЕ. Термин «маска» в данном случае обозначает пикселы, не относящиеся к выделенной области (спрятанные, замаскированные). Сама возможность подобного «обращения» с выделенными пикселами определяется тем, что степень «выделенности» задается цветом пикселов в канале выделения — альфа-канале. Если пиксел в альфа-канале черный, то соответствующий пиксел изображения выделен, а если пиксел в альфа-канале белый, то соответствующий пиксел изображения не выделен. Промежуточные оттенки в альфа-канале (оттенки серого) определяют частичное выделение пиксела (эффект от всех команд, инструментов и фильтров проявляется для такого пиксела частично). Все рассмотренные ранее средства выделения областей изображения показывали пользователю лишь границу выбранного участка, скрывая альфа-канал. В режиме Quick Mask (Быстрая маска) граница выделения не отображается, зато альфа-канал выводится непосредственно в окне документа. Так как альфа-канал может содержать оттенки, промежуточные между черным и белым цветами, то возникает проблема отображения границы выделенной области при работе в нормальном режиме. Она решена очень просто — привычная мерцающая граница проводится там, где яркость пикселов в альфа-канале переходит через значение 50%. То есть внутри границы оказываются пикселы, выделенные более чем на 50%. Если таких пикселов нет (выделение неполное и очень слабое), то граница выделения не отображается. При возникновении подобной ситуации на экран выводится предупреждение о том, что граница выделения не видна. ВНИМАНИЕ. Если граница выделения не видна на экране, но само выделение присутствует, инст рументы, команды и фильтры будут применяться к пикселам изображения в соответствии со степенью «выделенности». Если такое выделение останется в документе после выполнения некоторых операций, то выполнение дальнейших действий может оказаться невозможным. Поэтому после использования выделения его следует снять (удалить). Теперь рассмотрим работу в режиме быстрого редактирования выделения (Quick Mask). Для его активизации следует нажать кнопку, расположенную в нижней части панели инструментов . В зависимости от настроек режима она может принимать разный вид. То, что программа перешла в требуемый режим, легко установить по следующим признакам: кнопка перехода в режим Quick Mask (Быстрая маска) остается нажатой; границы имеющихся в документе выделенных областей заменяются цветной окраской; в заголовке окна документа выводится название режима — Quick Mask (Быстрая маска). На рис. 5.6 показано окно документа, находящегося в режиме Quick Mask (Быстрая маска).

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

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

ПРИМЕЧАНИЕ. Режим Quick Mask (Быстрая маска) является, по сути, аналогом режима Grayscale (Градации серого). Поэтому в нем для рисования доступны только цвета, являющиеся оттенками серого цвета.

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



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

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



ПРИМЕЧАНИЕ. Вид кнопки, служащей для перехода в режим Quick Mask (Быстрая маска), меняется в зависимости от установки этих переключателей. При подкраске замаскированных областей на ней отображается темный прямоугольник с белым кругом, а при подкраске выделенной области — белый прямоугольник и темный круг.

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

После завершения «быстрого редактирования» выделенной области вы можете вернуться в нормальный режим работы программы. Для этого нажмите кнопку, расположенную на панели инструментов рядом с кнопкой перехо да в режим Quick Mask (Быстрая маска). При этом изображение выделенной области будет заменено ее границей, а все инструменты приобретут свои нормальные функции. На рис. 5.8 изображено окно документа в режиме Quick Mask (Быстрая маска) и после выхода из него.

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

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

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



Еще одна область применения режима быстрого редактирования масок — создание выделенных областей со сложным изменением степени выделенности пикселов. На рис. 5.9 приведен пример выполнения такой операции.

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

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

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

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

Часто возникает необходимость «вывернуть» выделение на изнанку, то есть добиться того, чтобы выделенные области стали невыделенными, а невыделенные — выделенными. В этом случае можно использовать команду Inverse (Инвертировать).

ПРИМЕЧАНИЕ. Возможны и более сложные варианты. Например, можно перейти в режим Quick Mask (Быстрая маска), применить команду Image > Adjustments > Invert (Изображение > Настройки > Инвертировать), а затем вернуться в нормальный режим.

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



Команды Grow (Расширить) и Similar ( Сходные пикселы) дают возможность расширить выделение на другие пикселы изображения, ориентируясь на их цвет. Команда Grow (Расширить) позволяет распространить выделение на пикселы, прилегающие к уже выделенным и имеющие сходный оттенок. Это похоже на инструмент Magic Wand (Волшебная палочка). Если вам необходимо распространить выделение на все пикселы изображения, имеющие оттенки, сходные с оттенками выделенных пикселов, используйте команду Similar (Сходные пикселы). Ее действие сходно с действием команды Color Range (Цветовой диапазон), но за основу для построения выделения берутся оттенки пикселов, уже содержащихся в выделенной области.

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

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



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

При наведении курсора мыши на маркеры рамки он изменяет свою форму. Форма курсора зависит от того, какой из размеров выделения можно изменять. Для изменения выделения подведите курсор к маркеру, нажмите левую кнопку мыши и переместите маркер в нужное положение. Угловой маркер позволяет изменять одновременно и высоту, и ширину области. Если, выполняя это действие, удерживать нажатой клавишу Shift, то пропорции выделения останутся неизменными. Это полезно для масштабирования без искажений.



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

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



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

Предоставляется и возможность перемещения выделения. Для этого поместите курсор мыши внутри рамки (но не над центром вращения). Нажмите левую кнопку мыши и переместите рамку в нужное положение.

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

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

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



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

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

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

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

Кроме операций по преобразованию выделенных областей, Adobe Photoshop предоставляет возможность сохранения выделений в файле изображения и его последующей загрузки. Хранить выделения могут только файлы в форматах, поддерживающих такие возможности, например, в формате PSD. Сохранить выделенную область можно командой Save Selection... (Сохранить выделение...). При ее вызове на экране появится окно настройки, показанное на рис. 5.12.



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

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



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

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

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

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

ПРИМЕЧАНИЕ. Если вы не введете имя нового канала, то он получит имя вида AlphaN, где N — номер канала.

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



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

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

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

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



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

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



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

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

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

ПРИМЕЧАНИЕ. Если текущий слой имеет маску (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 внизу справа показан результат обработки изображения персика.



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

ПРИМЕЧАНИЕ. Кроме команды Defringe... (Обрезать края...) в меню Layer > Matting (Слой > Матирование) содержатся команды Remove White Mate (Удалить белую кайму) и Remove Black Mate (Удалить черную кайму). С их помощью можно удалить светлый или темный ореол на границе объекта, находящегося на прозрачном слое.

Adobe PhotoShop содержит средство, позволяющее выполнять выделение объектов из изображения в полуавтоматическом режиме. Это команда Filter > Extract... (Фильтр > Выделить...) С ее помощью вы можете получить отделенный от фона объект без необходимости вручную строить выделение.

После вызова этой команды на экране появится окно настройки. Оно показано на рис. 5.16.



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

Использовать это средство достаточно просто. Прежде всего, надо определить область, в которой будет производиться поиск границы объекта. Для этого иcпользуется инструмент Edge Highlighter (Подсветка границ). Выберите его и обведите объект по контуру. В поле Brush Size (Размер кисти) вы можете выбрать размер кисти. Это позволяет задать ширину зоны поиска границы объекта. Из списка Highlight (Подсветка) можно выбрать цвет, которым будет отмечаться граница. Если вы установите флажок Smart Highlighting (Умная подсветка), то во время выделения границы программа будет автоматически отслеживать границу между контрастными пикселами. Границу выделенного объекта следует замкнуть. Удерживая при рисовании границы клавишу Ctrl, вы можете временно переключиться в этот режим без установки флажков.

ПРИМЕЧАНИЕ. Сочетание клавиш Ctrl+Z позволяет отменить последнее действие или вернуть послед нее отмененное действие.

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

(Объекта нельзя. Если вы все-таки не хотите задавать эту область, установите флажок Force Foreground (Выделить цвет переднего плана) и выберите цвет, на котором будет основано выделение. Для выбора цвета щелкните по цветному .прямоугольнику, расположенному под флажком (выбрать цвет можно только при установленном флажке). Из списка Fill (Заливка) можно выбрать цвет, которым будет отмечена залитая область.



При необходимости подкорректируйте границу и заливку при помощи инст румента Eraser (Стирательная резинка) .

Подготовив объект, нажмите кнопку Preview (Просмотр). В окне команды вы увидите предварительный результат выделения объекта. После этого вы сможете исправить недостатки полученного изображения. Для удаления частей изображения используйте инструмент Cleanup (Очистка). Инструмент Edge Touchup (Восстановление границы) позволяет увеличить четкость границы выделенного объекта. Если границы объекта имеют резкие изломы, попробуйте увеличить значение в поле ввода Smooth (Сглаживание). Исправив обнаруженные недостатки, нажмите кнопку ОК для применения эффекта. Если вы хотите вернуться к исходным настройкам, нажмите клавишу Alt и затем кнопку Reset (Сброс), замещающую кнопку Cancel (Отмена).

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

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

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

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

Были подробно рассмотрены методы выделения фрагментов изображения, такие как инструменты Magic Wand (Волшебная палочка) и Lasso (Лассо), команды Color Range (Цветовой диапазон) и Extract (Извлечь), а также режим Quick Mask (Быстрая маска). Умение пользоваться ими позволит вам без труда подготавливать исходные материалы для составления коллажей и композиций.

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

Подготовка графических элементов web-страниц Основными графическими элементами web-сайта являются заголовки, кнопки, маркеры списков и текстуры. Они позволяют придать странице приятный внешний вид и сделать ее удобной для использования. В этом уроке мы рассмотрим основы подготовки этих элементов с использованием Adobe PhotoShop. На заре эпохи Всемирной паутины основным назначением web-страницы было представление научной информации. Поэтому в языке разметки страниц (HTML — Hypertext Markup Language — Язык разметки гипертекста) предусмотрели возможность создания текстовых массивов, содержащих таблицы, списки, рисунки и ссылки на другие тексты. На рис. 6.1 приведен пример подобного сайта. Рис. 6.1. Так могли выглядеть первые web-страницы Вначале элементы страниц использовались по своему прямому назначению. Потом люди стали понимать, что сайт может быть не только информативным, но и действительно красивым. Постепенно начало складываться новое направ ление искусства, которое теперь называют web-дизайном. Во многом развитию художественного оформления страниц способствовал рост популярности Интернета среди обычных пользователей, ищущих не информацию по научным вопросам, а развлечения. Для привлечения посетителей руководству сайтов, ориентированных на таких людей, пришлось серьезно задуматься над их внешним видом. ПРИМЕЧАНИЕ. Гипертекстом называют систему статей, связанных между собой ссылками. При чте нии одной статьи вы можете в любой момент просмотреть связанную с ней информацию, например, определение термина или разъяснение какого-либо сложного момента. Интернет, точнее его составляющая, называемая Всемирной Паутиной (WWW — World Wide Web — Всемирная Паутина), представляет собой совокупность страниц с самым разнообразным содержанием, связанных между собой ссылками. Потребность в средствах для улучшения внешнего вида сайтов появилась, а средства для ее удовлетворения пришлось искать среди уже имевшихся возможностей HTML и других инструментов создания сайтов. Так постепенно на web-страницах стали появляться нарисованные кнопки, служащие ссылками на другие разделы сайта, линии и узоры, разделяющие отделы самой страницы друг от друга, фигурные маркеры списков, текстуры (рисунки, используемые в качестве фона ячеек таблиц и страниц в целом) и многие другие элементы. Постепенно меняясь, они используются и в настоящее время. На рис. 6.2 вы можете увидеть страницу, выполненную в стиле, характерном для времени зарождения графического оформления. Рис. 6.2. Первые шаги дизайнеров по просторам Всемирной паутины были довольно робкими Постепенно стали появляться более проработанные страницы. На них, как правило, присутствовали выпуклые кнопки и простейшим образом подготовленные картинки. Оформление страниц в таком стиле не требует изготовления уникальных элементов, выполнить которые может только человек с достаточным опытом. Поэтому HTML-редакторы часто содержат в качестве шаблонов (заготовок) страницы именно такого вида. При помощи такой программы практически любой человек может за короткое время изготовить сайт. Это полезно для новичков, но в большинстве случаев страницы получаются на одно лицо. На рис. 6.3 показан пример страницы, выполненной в таком «автоматизированном» стиле. Рис. 6.3. Страницы, похожие на эту, легко сделать при помощи HTML-редактора ПРИМЕЧАНИЕ. Существует множество программ (например, XaraWebstyle), которые предназначены исключительно для автоматизированной подготовки кнопок, текстур и заголовков. Вы просто вводите нужный текст, выбираете цвет и форму, а программа сама рисует кнопку или графический заголовок страницы. Работать с такой программой интересно и полезно для освоения методов обработки изображений, но они часто предоставляют слишком узкий круг возможностей. С помощью такого редактора, как Adobe PhotoShop, можно добиться гораздо большего. По мере развития языка HTML и графических редакторов у дизайнеров появилась возможность использовать в оформлении страниц более качественную графику и сложные элементы, недоступные ранее. На рис. 6.4 показана страница, выполненная в современном стиле. Как видно, подход к разработке оформления значительно изменился. Во многих случаях именно дизайн ставится на первое место. Высокий уровень владения графическими пакетами и возможности самих пакетов позволяют разрабатывать страницы, достойные того, чтобы просто посмотреть на них. Обратите внимание на то, что хотя возможности браузеров изменились, и они теперь позволяют реализовать все более смелые замыслы дизайнеров, многие современные страницы «собираются» из тех же элементов, что и самые первые. Рис. 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... (Правка > Трансформировать > Повторить...) позволяет повторить последнюю выполненную операцию трансформирования. Рис. 6.6. На сайтах часто можно встретить композиции и коллажи из разнородных изображений Текст также часто используется при подготовке графического оформления страниц. Разумеется, здесь имеется в виду не текстовое содержание сайта, а надписи, изображенные на картинках. Использование таких надписей позволяет сделать оформление сайта более информативным не в ущерб красоте. При использовании «нарисованного» текста перед дизайнером открывается целый ряд возможностей. Во время рисования дизайнер может использовать практически любой шрифт, а обычный текст web-страницы в большинстве случаев не может содержать более трех стандартных типов шрифтов (гарнитур). Ярким примером использования нестандартных шрифтов могут служить названия сайтов, размещаемые обычно на начальных страницах. Образец такой надписи вы можете увидеть на рис. 6.6. При подготовке изображений можно применять к надписи различные эффекты. Последние версии браузеров имеют некоторый набор фильтров, применяемых и к обычному тексту, но широкого распространения они пока не получили. Текст, включенный в картинку, может быть ее частью, основным или вспомогательным элементом. Он может иметь тот же стиль, что и остальное содержание изображения и, таким образом, не выделяться сильнее, чем это требуется. Обычный текст, как правило, ясно различим среди графических элементов (это можно использовать для повышения информативности). Графика позволяет использовать шрифты со сглаживанием. Сглаживание символов (antialiasing) означает образование на границах символов пикселов с цветом, переходным от цвета текста к цвету фона. Это позволяет значительно улучшить внешний вид текста, особенно при использовании символов большого размера. Символы малого размера, будучи сглаженными, читаются хуже, чем без сглаживания. Для обычного текста использование сглаживания возможно благодаря браузеру и операционной системе. В отличие от простого текста, графика отображается независимо от настроек браузера. Независимо от того, какой цвет и размер шрифта установлен пользователем для web-страниц, ваш логотип будет отображен без искажений. Текст может использоваться для представления некоторой информации, например, при рисовании заголовка страницы или раздела. В логотипах, заставках и заголовках текст может использоваться в качестве пояснения, помогающего понять основную идею сайта или указывающего на то, с чем пользователю предстоит столкнуться в следующий момент. Еще одно применение текстовых надписей, выполненных в виде графических элементов — навигационные ссылки (кнопки). Такие элементы обычно «устанавливаются» на сайте вместо традиционных текстовых ссылок из-за возможности использовать различные специальные эффекты, доступные только при работе с графикой. При подготовке заголовков и кнопок следует уделять внимание тому, чтобы текст легко читался. Кроме того, следует помнить о том, что графические элементы занимают гораздо больше места на диске, чем простой текст. Они требуют больше времени для загрузки по каналу связи. Страница, насыщенная графикой, может загружаться достаточно долго. Поэтому следует искать компромисс между красотой и скоростью загрузки. Нарисованный текст может использоваться и как самостоятельный элемент, особенно если он нарисован красиво. Но даже если он несет основной смысл (например, это навигационный указатель), его чаще всего дополняют каким-либо изображением. В случае навигации это может быть маркер, выделяющий ссылку из остального содержимого сайта, или логотип раздела, на который эта ссылка указывает. На рис. 6.7 показан пример использования шрифта при изготовлении логотипа сайта. Рис. 6.7. Пример использования нарисованного текстового логотипа совместно с графикой В верхней левой части страницы находится название сайта — «OZON». Рядом с ним располагается графический логотип. И то и другое выполнено при помощи графики. Использование для названия сайта графики позволило реализовать все возможности, указанные выше. Обратите внимание на очертания надписей «OZON» и «ИНТЕРНЕТ-МАГАЗИН». Шрифт надписи не относится к стандартным гарнитурам, встраиваемым в браузеры. В отличие от простых текстовых надписей (присмотритесь повнимательнее к пунктам меню в левой части страницы), грани нарисованных букв плавно переходят к фону. Это значительно улучшает внешний вид страницы. Сглаживание границ возможно и для обычного текста, но оно полностью зависит от возможностей браузера и операционной системы. Часто вместе с фотоизображениями и текстовыми элементами используется графика, нарисованная самим дизайнером . Обзоры чаще всего это небольшие маркеры списков, указатели, навигационные кнопки и другие элементы. Однако встречаются и большие картинки, нарисованные от руки или при помощи векторных редакторов. Нарисованные вручную изображения делятся на две категории — растровые и векторные. Растровая графика позволяет использовать множество эффектов и предоставляет дизайнеру свободу в работе с цветом. Возможности векторной графики в этом смысле значительно более ограничены, но она позволяет легко трансформировать объекты без потери качества. ПРИМЕЧАНИЕ. Растровая графика основана на представлении изображения как совокупности то чек (пикселов). Вы можете изменять каждый пиксел растрового изображения независимо от других. Это позволяет легко работать с цветом в каждой точке изображения, добиваясь различных эффектов. Векторное изображение описывается при помощи нескольких опорных точек. Все остальные точки вычисляются при помощи различных формул. Получить доступ к некоторой произвольной точке изображения при этом сложно, поэтому эффекты в векторной графике практически отсутствуют. Зато такое изображение легко трансформировать и масштабировать, изменяя несколько числовых значений. В отличие от растровой графики, векторная графика при подобных операциях не теряет качества. Растровые изображения получают либо сканированием, либо рисуют в графических редакторах (например, в Adobe PhotoShop). Для рисования прямо на компьютере очень удобны графические планшеты. Они позволяют более точно, чем мышью, управлять движением курсора. Векторные изображения рисуются в графических векторных редакторах. Самым известным и широко распространенным векторным редактором является Corel Draw фирмы Corel, но при его использовании возникает проблема совместимости с редакторами растровой графики, которые необходимы для подготовки изображений, помещаемых на страницу. С Adobe PhotoShop наилучшим образом совмещается векторный редактор Adobe Illustrator. Независимо от того, какой редактор использовался для подготовки изображения, для подготовки его к размещению на странице необходим растровый редактор, так как изображения в форматах GIF, JPEG и PNG — растровые. На рис. 6.8 показан пример использования нарисованной графики для оформления сайта. Обратите внимание на орнамент заголовка — чаще всего подобные элементы разрабатываются для конкретного сайта и являются уникальными. Это позволяет сделать оформление сайта оригинальным. Рис. 6.8. В оформлении сайта могут использоваться изображения, нарисованные дизайнером ПРИМЕЧАНИЕ. Сайт, показанный на рис. 6.8, относится к проекту «Веди», ориентированному на разработку и распространение шрифтов, орнаментов и других подобных элементов. На этом сайте (http://vedi.d-s.ru) вы можете найти много полезных вещей. Теперь рассмотрим некоторые технические приемы, используемые для подготовки графических элементов страниц в Adobe PhotoShop. Кроме традиционных рисующих инструментов наиболее часто используются инструмент Туре (Текст) и слоевые эффекты. Инструмент Туре (Текст) позволяет помещать в изображение надписи, выполненные различными шрифтами (шрифт должен быть установлен заранее). Основное достоинство этого инструмента — набранный текст может быть в последующем отредактирован. Можно изменить не только сам текст, но и его шрифт, а также цвет. С полученными надписями (текстовыми слоями) можно выполнить практически все операции, допустимые для обычных слоев: перемещение, трансформирование, применение слоевых эффектов. Нельзя использовать рисующие (стирающие) инструменты, а также фильтры и команды. Вызов инструмента Туре (Текст) осуществляется при помощи кнопки, расположенной на панели инструментов. После ее нажатия надо щелкнуть мы шью в окне документа и ввести текст. При этом панель настроек позволя ет контролировать параметры шрифта. На рис. 6.9 показано окно программы во время редактирования текста. ПРИМЕЧАНИЕ. Удерживая кнопку Туре (Текст) некоторое время, можно вызвать на экран меню, из которого можно выбрать одну из разновидностей инструмента. К этим разновидностям относятся ввод вертикального текста и построение вместо текстового слоя выделенной области. Рис. 6.9. При помощи инструмента Туре можно вводить в изображение и редактировать текстовые элементы После завершения ввода необходимо нажать кнопку с изображением галочки , расположенную на панели настройки. Кнопка с изображением запрешающего знака позволит отменить операцию. Если вы примете результат (нажмете «галочку»), то на панели Layers (Слои) появится новый слой, выделяемый символом текстового слоя . Для того чтобы изменить текст, вы берите нужный слой и инструмент Туре (Текст). После этого щелкните мышью в окне редактирования и произведите нужные изменения. На панели настроек во время ввода или редактирования отображается ряд элементов управления, позволяющих изменять параметры шрифта. Их состав несколько изменяется в зависимости от того, начали вы ввод текста или просто выбрали инструмент Туре (Текст). Вам предоставляются описанные ниже возможности по изменению параметров текста (табл. 6.1). Таблица 6.1. Возможности настройки при работе с инструментом Туре (Текст)

<

Элемент управления	Функция
	Можно выбрать направление текста (вертикальный или горизонтальный). Этот выбор сказывается на порядке следования букв в текстовом слое. Повернуть весь слой вы можете позднее, например, при помощи команды Edit > Free Transform (Правка > Свободное трансформирование). Ее действие аналогично рассмотренной в уроке 5 команде Transform Selection (Трансформировать выделение). Как и режим ввода, направление текста можно выбрать до ввода первого символа
	Два раскрывающихся списка позволяют выбрать тип шрифта и его начертание.
	Вы также можете задать размер шрифта
	Отдельный раскрывающийся список позволяет управлять степенью сглаженности границ символов. Значение None (Нет) означает отключение сглаживания. Это полезно, если маленькие по размеру символы оказываются излишне размытыми. По умолчанию используется значение Smooth (Сглаживание)
	Три кнопки служат для задания режима выравнивания текста. Их значение аналогично подобным кнопкам, используемым в текстовых редакторах — выравнивание по левому краю, центру и правому краю
	Цветной прямоугольник показывает цвет, используемый для отображения набранного текста. Щелкнув по нему мышью, вы можете изменить цвет шрифта
	Позволяет перейти в режим редактирования искажений текста
	При помощи этой кнопки вы можете вызвать на экран две палитры, содержащие средства настройки работы с текстом

Дополнительные палитры, вызываемые нажатием кнопки Palettes (Палитры), показаны на рис. 6.10.

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



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

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

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

ПРИМЕЧАНИЕ. Расстояние между двумя символами принято называть кернингом (от английского слова kerning — межсимвольный интервал). Дополнительное расстояние, добавля емое между всеми символами выбранной последовательности, называют трекингом (от английского слова tracking — установка межсимвольных расстояний).

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





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

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

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

Наверное, вы уже обратили внимание на то, что некоторые операции должны выполняться над выделенными участками текста. Выделение производится при помощи мыши. Выделенные участки текста отображаются на затемненном фоне. Цвет текста инвертируется. В некоторых случаях, например при подборе цвета, это может быть неудобным. В таких случаях вы можете спрятать выделение. Для этого нажмите клавиши Ctrl+H. Повторное нажатие позволяет вернуть выделение на экран.

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

Редактируя текст, вы можете задать различные режимы искажений. Текст можно поворачивать, отражать и т. д. Самый простой способ создания подобных эффектов — использование команды Edit > Free Transform (Правка > Свободное трансформирование). По своему действию она аналогична команде Select > Transform Selection (Выделение > Трансформировать выделение), рассмотренной в уроке 5, но применяется не к выделенной области, а к ее содержимому. Если область отсутствует, то трансформируется весь слой. Текстовые слои трансформируются только целиком.



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



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

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

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

ПРИМЕЧАНИЕ. В 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.

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

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

ВНИМАНИЕ. Слоевые эффекты могут быть применены не только к растровым изображениям, но и к текстовым слоям. Это позволяет изменять текст после применения эффекта, сохраняя при этом все «украшения».

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

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



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

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

нажать кнопку с изображением буквы f , расположенную в нижней части палитры Layers (Слои), и выбрать нужный эффект (или пункт Blending Options (Настройка наложения)).

Окно настройки эффектов изображено на рис. 6.13.



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

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

ВНИМАНИЕ. Параметры наложения слоев и слоевые эффекты не могут быть настроены для фонового слоя.

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

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

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

СОВЕТ. Вы можете изменять параметры 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 изображено окно настройки этого эффекта.



Рис. 6.15. Окно настройки эффекта Bevel and Emboss

Из списка Style (Стиль) выберите тип эффекта (внутренняя фаска, внешняя фаска, рельеф и т. д.), а из списка Technique (Техника) — способ его построения. Ползунок Depth (Глубина) предназначен для задания степени выраженности эффекта. Переключатель Direction (Направление) позволит вам выбрать, будет фаска выступающей (положение Up (Вверх)) или вдавленной (положение Down (Вниз)). При помощи ползунков Size (Размер) и Smooth (Сглаживание) задайте размер фаски или скоса рельефа, а также степень его сглаженности.

В группе Shading (Затенение) вы можете указать параметры подсветки и затенения рельефа. При помощи круглого указателя задайте угол, под которым на объект будет направлен источник света, и его высоту. Эти параметры можно ввести с клавиатуры в поля Angle (Угол) и Altitude (Высота). Из списка Gloss Contour (Форма подсветки) вы можете выбрать форму подсветки получающегося выпуклого или вдавленного объекта.



При помощи списков Highlight Mode (Режим подсветки) и Shadow Mode (Режим затенения) можно задать режимы наложения подсветки и тени на изображение. Расположенные рядом со списками цветные прямоугольники позволяют выбрать цвет источника освещения и тени. Для этого нужно щелкнуть на них левой кнопкой мыши. Ползунки Opacity (Непрозрачность) задают непрозрачность подсветки и тени на изображении.

В левой части окна под переключателем Bevel and Emboss (Фаска и рельеф) расположены два дополнительных переключателя — Contour (Контур) и Texture (Текстура). По сути, это два дополнительных эффекта, которые позволяют задать форму границы рельефного объекта и наложить на него текстуру, которая также проявится в виде рельефа поверхности.

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

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

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

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



Рис. 6.16. Окно настройки эффекта Gradient Overlay

Как и для других эффектов, вы можете задать режим наложения заливки на изображение и непрозрачность новой окраски. Из списка Gradient (Градиент) выберите градиент, которым будет залито изображение. Ползунок Scale (Масштаб) позволяет изменить площадь, в пределах которой будет происходить изменение цвета. Установив флажок Reverse (Перевернуть), вы измените направление изменения цвета на противоположное. Можно задать не только закономерность изменения цвета, но и форму заливки. Список Style (Стиль) содержит несколько вариантов распространения окраски по заливаемой территории. Флажок Align with Layer (Выровнять по слою) позволит автоматически выровнять заливку, ориентируясь на изображение.



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

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

Stroke (Граница) рисует границу находящегося на слое изображения. Вы можете выбрать, будет ли граница проведена внутри изображения (вдоль его края), по самому краю или снаружи (выбрать один из вариантов можно из списка Position (Расположение)). Ползунком Size (Размер) задайте ширину границы. При помощи списка Fill Ту ре (Тип заливки) вы можете выбрать, будет ли граница заполнена цветом (color), градиентом (gradient) или шаблоном (pattern). После выбора типа заливки вы сможете задать специфичные для каждого из вариантов параметры (цвет, шаблон, тип градиента и т. д.).



Рис. 6.17. Образцы использования различных слоевых эффектов

На рис. 6.17 приведены примеры использования описанных здесь эффектов. В верхнем ряду расположены (слева направо) исходное изображение, Drop Shadow (Тень), Inner Shadow (Внутренняя тень). Второй сверху ряд: Outer Glow (Внешнее свечение), Inner Glow (Внутреннее свечение), Bevel and Emboss (Фаска и рельеф). Третий ряд: Satin (Сатин), Color Overlay (Перекрытие цветом), Gradient Overlay (Перекрытие градиентом). Четвертый ряд: Pattern Overlay (Перекрытие градиентом), Stroke (Граница), Bevel and Emboss (Фаска и рельеф) + Contour (Контур) + Texture (Текстура) + Drop Shadow (Тень).



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



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

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

СОВЕТ. Щелкнув мышью на слое, отображающем эффект, или на символе «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 (Вставить стиль в связанные слои) позволяет вставить заранее скопированный стиль в группу связанных слоев.



ПРИМЕЧАНИЕ. Связать слои можно, щелкая мышью на квадратах, расположенных на палитре 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 (Правка > Свободное трансформирование)). Последняя из этих команд предназначена для изменения размеров не выделенной области, а всего изображения в целом. При этом вы можете изменять не только размеры изображения в выбранных единицах (пикселах или процентах от исходных размеров). Также можно задать размеры, с которыми изображение будет выведено на печать, и разрешение, с которым печать будет произведена.

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

После вызова команды Image > Image Size (Изображение > Размер изображения) на экране появится окно, изображенное на рис. 6.20.



Рис. 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 (Пересчитать изображение).

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

ПРИМЕЧАНИЕ. По аналогии с традиционной живописью, пространство, отводимое под изображение (то есть площадь изображения), называют холстом. Разница между понятиями «изображение» и «пространство для изображения» возникает потому, что графический объект может располагаться на'прозрачном фоне.

Добавить место для изображения можно при помощи команды Image > Canvas Size (Изображение > Размер холста). Окно настройки этой команды изображено на рис. 6.21.

В верхней части окна находится зона Current Size (Текущий размер). В ней выводятся размеры изображения по ширине (Width) и по высоте (Height). Кроме того, в заголовке зоны показывается текущий размер изображения в килобайтах.

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





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

ПРИМЕЧАНИЕ. Изображение может существовать и за пределами видимой части документа.

Под полями для ввода размеров холста находятся девять квадратов, называемых Anchor (Якорь). Один из них («вдавленный») отображает расположение текущего изображения на будущем холсте. Стрелки на квадратах указывают направления изменения размеров холста. Щелкая на этих квадратах мышью, вы можете задать, в какую сторону будет происходить изменение габаритов изображения. Если «вдавленный» квадрат находится на краю, то его сторона, обращенная наружу (а также соответствующая сторона изображения) не будет подвергнута изменениям. Холст будет обрезан или добавлен к противоположной грани.

Если вы установите флажок Relative (Относительно), то в полях ввода можно будет указывать не значения соответствующих размеров холста, а их приращения (положительные или отрицательные). Это позволяет быстро изменить размер изображения на заданную величину.

Хотя при помощи команды Canvas Size (Размер холста) можно уменьшить размер места отводимого для изображения, использовать ее в этом качестве не очень удобно. В тех случаях, когда требуется обрезать часть изображения, гораздо проще и быстрее воспользоваться командой Image > Ctop (Изображение > Обрезать). Действие этой команды заключается в том, что размер холста уменьшается до размеров выделенной прямоугольной области. Части изображения, оставшиеся за пределами этой области, отбрасываются.

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

СОВЕТ. Если вам нужно отбросить небольшую полоску изображения у одного из краев, выделите ее, вызовите команду Select > Inverse (Выделение > Инвертировать), а затем команду Image > Crop (Изображение > Обрезать).

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

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

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

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

Подготовка макета web-страницы в Adobe PhotoShop Для подготовки web-страницы надо решить две задачи — разработать внешний вид (оформление) и написать HTML-код, реализующий его. В обязанности web-дизайнера часто входит только первая задача — разработка и реализация идеи оформления страницы, отвечающей требованиям заказчика. Подготовка описания страницы на языке HTML во многих фирмах, занимающихся разработкой сайтов, возлагается на плечи специалистов в области web-программирования. Одновременно с этим могут разрабатываться необходимые серверные программы (сценарии), базы данных и другие программные элементы. При такой организации работ от дизайнера, как правило, требуют представить рисунок страницы со всеми необходимыми графическими элементами и образцами текста — макет. Программист, пользуясь графическим редактором, разрезает макет на элементы и использует их при окончательной компоновке страницы. Разумеется, далеко не все возможности современных графических редакторов можно совместить с довольно жесткими ограничениями HTML, поэтому дизайнер должен хорошо представлять возможности языка HTML и различных версий браузеров. ВНИМАНИЕ. Основное ограничение языка HTML, касающееся оформления страниц — все рисунки, находящиеся на странице, должны быть только прямоугольными. Это связано с тем, что графические файлы могут хранить изображения только прямоугольной формы. Даже если вы используете какой-либо объект неправильной формы (отличной от прямоугольника), вам придется сохранить его в файле в виде прямоугольного изображения. Наверное, единственным исключением из этого правила являются активные области карт-изображений. Они могут иметь форму прямоугольника, круга или многогранника. Различные средства создания сайтов, такие как Flash, позволяют использовать объекты сложной формы, но сам клип Flash имеет на странице вид прямоугольника. В этом уроке речь пойдет об основных приемах подготовки макета web-страницы при помощи Adobe PhotoShop. Будем считать, что у нас есть все необходимые элементы страницы (заголовки, рисунки, иллюстрации и т. д.). Рассмотрим методы их размещения в поле будущего макета, установки на отведенные им места, выравнивания относительно друг друга. Заметим, однако, что в большинстве случаев удобнее готовить элементы страницы непосредственно во время подготовки макета. Это позволяет сразу учитывать требуемые размеры изображений и их цветовую гамму в сочетании с другими элементами страницы. Первый шаг в подготовке макета web-страницы — создание изображения нужного размера. Вертикальная прокрутка страницы в окне браузера практически не ограничена. Поэтому высоту изображения для макета можно выбирать любой. Все определяется объемом информации, которую требуется разместить на странице. С выбором ширины изображения все обстоит намного сложнее. Дело в том, что страница должна по возможности помещаться в окне браузера без горизонтальной прокрутки. Это избавит пользователя от необходимости постоянно пролистывать страницу слева направо и справа налево для того, чтобы просмотреть информацию, скрытую за границами окна. Пользоваться одновременно и горизонтальной, и вертикальной прокрутками неудобно. Если требуется избежать горизонтальной прокрутки, нужно, чтобы все элементы страницы имели ширину меньшую, чем у рабочей области окна браузера. Поэтому надо выбрать ширину изображения для макета равной ширине окна браузера. При этом надо учесть, что часть окна может быть занята вертикальной полосой прокрутки и самой границей окна. Также следует учитывать, что страница может по-разному выглядеть при различных разрешениях экрана. Если вы, например, разрабатываете страницу в расчете на разрешение 800x600 пикселов, то при разрешении 640x480 страницу придется просматривать, пользуясь горизонтальной прокруткой, а в режиме 1024x768 в окне браузера останется пустое место. Есть два способа бороться с этой проблемой. Первый заключается в том, что страница делается масштабируемой по ширине. Этого можно достичь, оформив, например, заголовки и другие элементы, занимающие всю ширину страницы, в виде таблиц с автоматически сжимающимися или растягивающимися до нужных размеров ячейками. Второй способ состоит в том, что информационной части страницы придается строго определенная ширина, а с одной (обычно справа) или двух сторон (справа и слева) оставляется свободное место. Если такая свободная область оставляется с двух сторон, то содержимое страницы автоматически располагается в центре окна. В первом случае страница будет прилично выглядеть в большинстве режимов видеосистемы. Следует, однако, учитывать, что при уменьшении или увеличении ширины страницы пропорции ее элементов изменятся. Это может несколько ухудшить вид сайта при разрешении экрана, отличном от того, в расчете на которое страница разрабатывалась. Можно сказать, что этот метод позволяет сохранить страницу настолько красивой, насколько это возможно. При использовании второго метода пропорции страницы будут оставаться неизменными. Если разрешение экрана на компьютере пользователя окажется меньше, чем рассчитывалось, часть информации окажется скрытой за границами окна. При разрешении, превышающем расчетное, вокруг информационной части появится пустое пространство. Суть этого подхода заключается в том, что если появления свободного места в окне не избежать, то оно должно появиться там, где это задумано. ПРИМЕЧАНИЕ. Такие операции, как изменение ширины ячеек таблицы или выравнивание ее частей по центру окна, выполняются браузером автоматически при установке соответствующих значений параметров элементов страницы. Таким образом, выбирая размеры для макета будущей страницы, вы должны ориентироваться на видеорежим пользователя. На время написания этой книги большинство пользователей работали с разрешением экрана 800x600 при глубине цвета 16 битов (по данным сайта http://www.hotlog.ru). Для браузера Internet Explorer 5.5, наиболее распространенного по данным того же сайта, такому видеорежиму соответствует размер рабочей зоны окна 780x480 пикселов. Изображение такого размера поместится в окне браузера (при стандартных настройках) без прокрутки. СОВЕТ. Вы можете самостоятельно определить требуемые размеры макета при том или ином разрешении экрана. Запустите браузер и откройте какую-нибудь страницу. Для подобных исследований хватит и стандартного сообщения о том, что открыть сайт нельзя, выводимого многими браузерами в виде web-страницы. После этого скопируйте в буфер обмена изображение с экрана (нажмите клавишу Print Screen), создайте на его основе изображение в любом графическом редакторе и по изображению из-. мерьте размеры рабочей области окна браузера. После того, как вы выбрали размеры макета, создайте новое изображение с заданными характеристиками. В качестве цветовой модели выберите режим RGB, а разрешающую способность изображения укажите равной 72 dpi (pixels/inch (пикселов на дюйм)). Создав новое изображение, поместите в документ готовые элементы изображения. Возможно, вы предпочтете рисовать их непосредственно во время подготовки макета. Если изображения элементов были подготовлены в других файлах, вам потребуется перенести их в файл макета. Сделать это можно несколькими способами. Во-первых, вы можете выделить нужный графический объект в исходном файле, скопировать его в буфер, а затем вставить в файл макета. Во-вторых, можно копировать слои между одновременно открытыми документами, «перетаскивая» их с панели Layers (Слой) в окно нужного файла (рис. 7.1). До начала этой операции надо сделать активным окно документа, содержащего исходный элемент. Достаточно щелкнуть мышью в нужном окне. СОВЕТ. Переключаться между окнами документов можно, выбирая их имена в меню Window (Окно). При помощи панели Layers (Слои) и мыши можно создавать новые слои и удалять существующие. Для создания нового слоя, щелкните мышью на кнопке Create a new layer (Создать новый слой). Для удаления слоя вы делите его и щелкните на кнопке Delete layer (Удалить слой) или просто перетащите слой на эту кнопку при помощи мыши. После того, как вы соберете в одном файле все нужные элементы, пора приступать к компоновке макета. Разумеется, часть элементов можно рисовать в процессе монтажа, используя, например, один из элементов в качестве фона для остальных. Монтируя элементы, вы можете перемещать их. Для этого ис пользуется специальный инструмент Move (Перемещение). Можно также пользоваться любым из инструментов выделения (удерживая нажатой клавишу Ctrl). Их использование подробно описано в уроке 5. Рис. 7.1. Можно копировать слои при помощи мыши СОВЕТ. Вы можете копировать фрагмент изображения при помощи инструментов выделения или инструмента 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 не нужно (она служит для перевода других инструментов в режим перемещения фрагментов изображения). ПРИМЕЧАНИЕ. Нельзя переместить направляющую линию с помощью инструментов Slice (Нож) и Hand (Рука). Поведение направляющих линий и их взаимодействие с частями изображения поддаются достаточно гибкой настройке. Для этого служат несколько команд меню View (Вид) (рис. 7.3). Рис. 7.3. Команды меню View позволяют управлять работой направляющих линий Установив флажок напротив пункта Lock Guides (Заблокировать направляющие), можно запретить перемещение направляющих линий. Это позволит избежать их случайного смещения при работе с фрагментами изображения. Для отключения блокировки снимите флажок (вызовите эту команду повторно). Используя команду Clear Guides (Удалить направляющие), вы можете удалить все направляющие линии, содержащиеся в документе. Команда Snap (Прикрепить) позволяет включить или выключить режим «прилипания» объектов к направляющим линиям и другим элементам окна. В подменю Sflap То (Прикрепить к) вы можете выбрать, к каким именно элементам будут приклеиваться фрагменты изображения. К элементам окна, служащим для выравнивания изображения, относятся: Guides (Направляющие линии); Grid (Сетка) — использование сетки позволяет выделять области правильной формы и располагать фрагменты изображения в определенных позициях холста. Вы можете настроить параметры сетки при помощи команды Edit > Preferences > Guides & Grid (Правка > Предпочтения > Направляющие и сетка); Slices (Нарезка) — границы нарезанных при помощи инструмента Slice (Нож) блоков изображения; Document Bounds (Границы документа) — границы холста изображения. Автоматическое выравнивание по краю изображения может оказаться полезным при размещении элементов, которые должны находиттся точно на его границе. СОВЕТ. При помощи команд 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 (Дополнительные элементы). ПРИМЕЧАНИЕ. Упомянутые среди дополнительных элементов окна пути являются векторными объек тами. Они могут быть созданы непосредственно в Adobe PhotoShop при помощи инструментов работы с путями или же могут быть импортированы из векторного редактора. Импортировать векторные изображения можно через буфер обмена. Лучше всего производить подобные операции при помощи векторного редактора компании Adobe — Adobe Illustrator. PhotoShop и Illustrator используют одинаковое представление векторной графики в буфере обмена, что обеспечит неискаженный перенос изображения из одной программы в другую. К дополнительным элементам также относятся текстовые и звуковые примечания, которые вы можете разместить в документе при помощи инструментов Notes (Заметки) и Audio Annotation (Звуковое примечание). В окне документа отображаются не сами примечания, а их символы. После того, как вы разместите в нужных позициях направляющие линии, приступаем к размещению вдоль них подготовленных элементов изображения. При помощи горизонтальных и вертикальных направляющих можно образовать сетку, к которой будут «прилипать» перемещаемые изображения. В отличие от сетки, генерируемой Adobe PhotoShop, комбинация из направляющих линий может иметь произвольные пропорции. Впрочем, в некоторых ситуациях вас устроит и стандартная сетка, тем более что вы можете включить «прилипание» объектов и к ней. На рис. 7.4 приведен пример использования направляющих линий для размещения элементов изображения. В данном случае это небольшие нарисованные шарики, которые могут использоваться, например, в качестве маркеров списков. Рис. 7.4. При помощи направляющих линий можно выставить фрагмент изображения на нужные позиции ВНИМАНИЕ. При перемещении направляющих линий они «прилипают» к своему первоначально му положению, что не дает перемещать их на небольшие (1-2 пиксела) расстояния. Если вам все-таки надо это сделать, сначала переместите линию на большое расстояние, а потом установите ее в нужное положение. ПРИМЕЧАНИЕ. Некоторые читатели могут удивиться тому, что такие элементы web-страниц, как списки или образцы текста, включаются в макет. Это делается для того, чтобы наиболее полно представить оформление сайта. Перемещать линии и фрагменты изображения можно при помощи практически всех инструментов при нажатой клавише Ctrl. О том, как ведут себя инструменты выделения при нажатии различных комбинаций управляющих клавиш, было подробно рассказано в уроке 5. Большинство других инструментов переключается в режим перемещения объекта на время удерживания клавиши Ctrl в нажатом состоянии. Рис. 7.5. В меню Layer содержатся команды, позволяющие выравнивать связанные слои Выровнять объекты вдоль одной линии (вертикальной или горизонтальной) можно и без помощи направляющих линий. Если изображения, которые надо установить в нужные позиции, находятся на разных слоях (эти слои не должны содержать других объектов), для их выравнивания можно использовать команды Layer > Align Linked (Слой > Выровнять связанные слои). Фрагмент этого меню изображен на рис. 7.5. Как следует из названия подменю, выравнивать можно только несколько связанных слоев. При этом активный в данный момент слой используется в качестве опорного (по нему производится выравнивание). Для того чтобы связать слои, надо щелкнуть мышью на квадрате, расположенном рядом с символом видимости слоя (рис. 7.6). Текущий слой имеет в этом квадрате символ в виде кисточки. Слои, связанные с текущим, обозначены символами в виде звеньев цепи. Щелкнув на этом символе, вы можете убрать связь слоя со слоем текущим. Одновременно может существовать несколько групп связанных слоев. То есть если в документе содержится, например, 7 слоев, то вы можете связать между собой слои 1, 3 и 4, а потом выбрать слой 6 и связать с ним слой 7. Будут образованы две независимые группы слоев (разумеется, комбинировать слои можно в любом порядке). Рис. 7.6. Для выполнения некоторых операций надо связать слои между собой СОВЕТ. Установив связь между слоями, вы сможете перемещать расположенные на них объекты синхронно. Это оказывается полезным, например, при перемещении заголовка, текст и фон которого находятся на разных слоях. В меню Layer > Align Linked (Слой > Выровнять связанные слои) находятся следующие команды: Top Edges (Верхние грани) — объекты, находящиеся на связанных слоях, перераспределяются так, что их верхние границы совмещаются по высоте с верхней границей объекта, находящегося на выделенном (активном) слое; Vertical Centers (Центры по вертикали) — объекты располагаются так, что их центры оказываются на высоте центра объекта, находящегося на активном слое; Bottom Edges (Нижние грани) — нижние границы объектов, находящихся на связанных слоях, совмещаются по высоте с нижней границей активного слоя; Left Edges (Левые грани) — левые границы изображений, находящихся на связанных слоях, выравниваются по левой границе изображения, находящегося на активном слое. Разумеется, активный слой должен входить в группу связанных слоев; Horizontal Centers (Центры по горизонтали) — центры объектов из связанных слоев располагаются в том же положении (по горизонтали), что и центр объекта из активного слоя; Right Edges (Правые грани) — выравнивание производится по правой границе изображения, располагающегося на активном слое. На рис. 7.7 показан пример использования команды Horizontal Centers (Центры по горизонтали).

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

СОВЕТ. Связав несколько слоев с фоном и выбрав его в качестве активного слоя, вы можете выравнивать изображения (или текст, если слои текстовые) по центру или по краям холста.

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

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



Рис. 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.

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

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



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

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

ПРИМЕЧАНИЕ. Слои располагаются на панели Layers (Слои) в том порядке, в котором они отображаются на экране. Самый верхний слой отображается «поверх» остальных. Фоновый спой отображается «ниже» остальных — обычные слои на него накладываются.

Еще один способ изменения порядка следования слоев — использование команд меню Layer > Arrange (Слой > Изменить порядок слоев). Это меню изображено на рис. 7.11.



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

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



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

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

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

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

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

СОВЕТ. Управлять перемещением слоев можно с клавиатуры при помощи комбинаций клавиш. Они указаны напротив соответствующих команд (рис. 7.11).

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

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

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

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



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

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

СОВЕТ. Вызвать меню палитры можно при помощи кнопки со стрелкой, расположенной в верхнем правом углу панели.

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

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

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

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

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





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

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

Еще одно средство разметки страниц и выделения элементов для сохране ния отдельных файлов — инструмент Slice (Нож). С его помощью изображение «разрезают» на области, которые затем можно сохранять по отдельности (при помощи команды Save for Web (Сохранить для Web)), используя для каждой из них свои настройки сжатия. При помощи инструмента Slice Select (Выбрать область) можно получить доступ к области после ее создания. Это позволит вам, например, перемещать область по холсту.



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

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

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

В этом уроке мы подробно рассмотрели процедуру сохранения файлов в основных форматах web-графики — GIF и JPEG. Мы узнали, какие параметры потребуется задать при выполнении этой операции, и какими путями можно оптимизировать сохраняемое изображение. Также мы познакомились с возможностями экспорта изображений из Adobe PhotoShop векторных объектов и сохранения изображений в автоматизированном режиме при помощи команды Save For Web... (Сохранить для 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 PhotoShop, являющуюся, по сути, растровым редактором, внедрены некоторые элементы векторной графики. Возможно, вы захотите, использовав при работе над изображением векторный объект, перенести его в векторный редактор для дальнейшей обработки. Воспользуйтесь командой File > Export > Paths to Illustrator... (Файл > Экспорт > Контуры в Illustrator...). Она позволяет сохранить векторные объекты (контуру) в формате векторной графики .AI, используемом программой Adobe Illustrator. Диалоговое окно этой команды представлено на рис. 8.14.

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

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

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

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

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

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

Рис. 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

Сохранение файлов в форматах 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 For Web... (Сохранить для Web...)

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

С помощью этой команды за одну операцию можно провести индексацию цветов, добавить прозрачность и сохранить изображение в формате GIF или JPEG, что избавляет от необходимости предварительно использовать команды Indexed Color... (Индексированные цвета...) или Color Table (Таблица цветов).

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

Начнем по порядку рассматривать состав и назначение вкладок, меню и инструментов.

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

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

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

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

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

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

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

Над правым верхним углом области просмотра находится кнопка

меню предварительного просмотра, содержащего три группы команд (рис. 8.5).

Первая группа содержит единственную команду Browser Dither (Результат сглаживания), которая связана с флажком Web Snap (Цвета для Web) и позволяет посмотреть, как изображение будет выглядеть на 8-битовом мониторе. Вторая группа управляет компенсацией цвета, то есть дает возможность «увидеть» изображение на различных мониторах в различных системах. Третья группа команд определяет скорость загрузки, с которой будет отображаться изображение, причем выбранное значение относится ко всем вариантам оптимизации.

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

Следующее меню, которое мы рассмотрим, это меню параметров. Кнопка меню параметров находится в верхнем правом углу вкладки Settings (Настройки). Внешний вид этого меню представлен на рис. 8.6.



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



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

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



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

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

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

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

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

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

Оптимизация запускается автоматически при выборе из ниспадающего меню стиля оптимизации.

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

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



При выборе формата JPEG следует обратить внимание на следующие отличия от обычного окна сохранения:

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

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

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

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

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

В правом верхнем углу вкладки Color Table (Таблица поиска цветов) (рис. 8.9) расположена кнопка меню управления цветом.



Рис. 8.9. Вид и расположение меню управления цветом

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

И, наконец, финальным аккордом является кнопка Output Settings (Выходные настройки).

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

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



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



Рис. 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 (Ячейки-разделители).

СОВЕТ. Для параметров ТD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители) лучше установить значение Always (Всегда) вместо установленного по умолчанию Auto (Авто).

Параметры фона генерируемой web-страницы задаются в окне, показанном на рис. 8.11.

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

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

В этом диалоговом окне вашему вниманию предлагаются три вкладки:

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

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

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

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

В этом окне задается принцип присвоения названий фрагментам по умолчанию.



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



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

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

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

ПРИМЕЧАНИЕ. Основным свойством индексированного изображения, сохраненного в формате GIF, является возможность включения в него прозрачных областей без создания новых слоев.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ПРИМЕЧАНИЕ. До применения команды Indexed Color... в текущем сеансе работы режим Previous (Предыдущий) недоступен.

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



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

Параметр Forced (Защищенные) позволяет принудительно ввести в таблицу некоторые цвета. Они не изменяются при выборе остальных цветов.

Возможные значения:

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

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

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

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

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

Параметр Matte (Кайма) доступен при наличии прозрачности и используется совместно с флажком Transparency (Прозрачность). Если этот флажок установлен, то указанный цвет заполнит и полупрозрачные, и прозрачные пикселы.

СОВЕТ. Лучше всего выбрать цвет, соответствующий фону web-страницы.

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

Возможные режимы (рис. 8.2):

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

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



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

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

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

а	б
в	г

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

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

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

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

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

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

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

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

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

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

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

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

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

---

---