Графика и дизайн -> Photoshop -> Учебник по Adobe Photoshop 7.0

Учебник по Adobe Photoshop 7.0

• Глава 23. Работа с Web и программой ImageReady
• Режим Indexed Color
  • Преобразование изображения в режим Indexed Color
  • Редактирование таблицы цветов изображения в режиме Indexed Color
  • Создание специальной палитры в программе ImageReady для изображений в режиме Indexed Color
  • Применение специальной палитры к другим изображениям
• Из программы Photoshop в LiveMotion
  • Подготовка многослойного файла к переносу из программы Photoshop в LiveMotion
  • Возникновение ореола при копировании сглаженных объектов в другие программы
• Из программы Photoshop в After Effects
  • Согласование цветов в программе Photoshop и других приложениях
• Создание в программе Photoshop изображений для сети
  • Размер изображения
  • Формат GIF
  • Глубина цвета
  • Формат JPEG
  • Размытие
  • Сглаживание
  • Форматы PNG-8 и PNG-24
  • Панель инструментов в программе ImageReady
  • Оптимизация изображений для сети в программе ImageReady
  • Оптимизация изображений в формате GIF и PNG-8
  • Применение взвешенной оптимизации
  • Предварительный просмотр в программе ImageReady
  • Команда Jump to
  • Быстрая оптимизация
  • Создание и применение дроплета
  • Оптимизация изображений в формате JPEG или PNG-24
  • Приведение цвета однотонных областей к Web-цветам
  • Предварительный просмотр результатов возможного размытия оптимизированного изображения в браузере
  • Предварительный просмотр изображения
  • Изменение гаммы оптимизированного файла
  • Предварительный просмотр оптимизированного изображения в браузере
  • Сохранение файла в программе ImageReady
  • Сохранение оптимизированного файла в программе ImageReady
  • Обновление существующего HTML-файла
  • Изменение заголовка Web-страницы и вставка информации об авторских правах
  • Ввод текста в программе ImageReady
  • Советы по созданию текста для сети
• Деление изображения на ломтики
  • Разрезание изображения на ломтики с помощью команд
  • Разбиение изображения на ломтики вручную
  • Создание ломтика на основе слоя
  • Преобразование ломтика, созданного автоматически или на основе слоя, в пользовательский ломтик
  • Удаление ломтиков
  • Изменение размера пользовательских ломтиков
  • Связывание ссылок с ломтиками изображения
  • Изменение порядка следования ломтиков
  • Выравнивание пользовательских ломтиков вдоль общей границы
  • Равномерное распределение пользовательских ломтиков вдоль одной оси
  • Создание карты изображения на основе слоя
  • Создание карты изображения с помощью инструмента
  • Переход от карты изображения на основе слоя к карте, созданной при помощи инструмента
  • Как спрятать или показать карту изображения
  • Выделение карты изображения
  • Удаление карты изображения
  • Выравнивание карт изображения, созданных с помощью инструментов, вдоль общей границы
  • Равномерное распределение карт изображения, созданных при помощи инструментов, вдоль одной оси
  • Оптимизация отдельного ломтика изображения
  • Копирование настроек оптимизации от одного ломтика к другому
  • Связывание ломтиков
  • Разъединение ломтиков
  • Прикрепление тега Alt к какому-либо ломтику или целому изображению
• Ролловеры
  • Создание ролловера для ломтика
  • Создание ролловера с использованием эффекта слоя
  • Предварительный просмотр ролловера в ImageReady
  • Предварительный просмотр ролловера в Web-браузере
  • Создание вторичного ролловера
  • Создание кнопки для Web-страницы
• GIF-анимация
  • Перемещение элемента изображения с помощью анимации
  • Постепенное исчезновение или появление картинки
  • Удаление кадров из анимации
  • Выбор параметров воспроизведения анимации
  • Предварительный просмотр анимации
  • Анимация покачивания предметов
  • Редактирование анимации
  • Воспроизведение анимации в обратном порядке до первого кадра
  • Применение второго анимационного эффекта к существующей анимации
  • Уменьшение размера изображения
  • Обрезка изображения
  • Ролловер, инициирующий анимацию
  • Создание анимации с искажением текста
  • Удаление или корректировка искаженного текста
  • Сохранение GIF-анимации
  • Открытие анимации в формате GIF
  • Оптимизация анимации
• Эффекты слоя
  • Применение эффектов слоя в программе ImageReady
  • Удаление эффекта слоя
  • Другие возможности для работы со слоями в программе ImageReady
  • Применение стиля к слою
  • Сохранение эффекта слоя в качестве стиля
• Заполнение фона повторяющимся узором
  • Создание файла <черепицы>
  • Предварительный просмотр мозаичного фона
  • Использование HTML-файла в качестве фона
  • Удаление HTML-файла <черепицы> или однотонной фоновой окраски изображения
  • Диалоговое окно Save for Web в программе Photoshop

Глава №23.

Работа с Web и программирование Imageready

Рис. 23.1. Сайт microsoft.com

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

Программа ImageReady имеет серьезные проблемы с отображением кириллицы. Поэтому в целом ряде случаев придется пользоваться HTML-редактором. В частности, для редактирования текста в поле Alt или при создании ролловеров.

В этой главе рассказывается, как подготовить Photoshop-изображения для последующего их использования в мультимедийных системах или в Internet, причем в режиме реального времени. Рассматриваются методы преобразования изображения в режим Indexed Color, использования Photoshop-изображений в программах Live-Motion и After Effects и подготовки их к просмотру в сети с помощью программы ImageReady.

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

Как только вы закончите подготовку изображений, можете окунаться в реальный мир Всемирной паутины (рис. 23.1). Готовы прямо сейчас? Тогда сразу переходите к разделу «Подготовка в программе Photoshop изображений для сети».

Режим Indexed Color

Некоторые видео- и мультимедийные программы, а также компьютерные системы не способны импортировать изображение из программы Photoshop, если оно содержит более 256 цветов (цвет представлен более чем 8 битами). При преобразовании изображения в режим Indexed Color можно уменьшить количество элементов в таблице цветов.

При преобразовании многослойного изображения в режим Indexed Color все слои будут объединены. Воспользуйтесь командой Save as (Сохранить как), чтобы работать с копией изображения.

Преобразование изображения в режим Indexed Color

1. Убедитесь, что изображение находится в режиме RGB.
   
2. Выполните команды Image > Mode > Indexed Color (Изображение > Режим > Индексированный цвет) и щелкните по кнопке ОК.
   
   • При желании установите флажок Preview (Предварительный просмотр), потом выберите один из следующих пунктов в поле Palette (Палитра) - см. рис. 23.2:
     
   • Exact (Точная), если изображение содержит 256 или меньше цветов. При этом ни один цвет не будет удален;
     
   • System (Mac OS) (Системная (Mac OS)), если собираетесь экспортировать файл в приложение, которое воспринимает только палитру Мае OS, установленную по умолчанию;
     
   • System (Windows) (Системная (Windows)), если собираетесь экспортировать изображение в приложения на платформе Windows;
     

Рис. 23.2. Всплывающее меню Palette

• Web (Сетевая), если намереваетесь загружать файл в сеть. Эта опция ограничивает набор цветов изображения тем множеством, которое доступно в большинстве Web-браузеров;
  
• Uniform (Равномерная), чтобы создать таблицу цветов, равномерно распределенных по спектру. При этом не учитываются преобладающие цвета изображения;
  
• Local (Локальная) (Perceptual (Учитывающая восприятие), Selective (Селективная) или Adaptive (Адаптивная)), чтобычюздать таблицу цветов на основе только тех цветов, которые входят в изображение;
  
• Master (Специальная) использует специальную таблицу цветов, созданную заранее на основе группы изображений.
  

  Выберите вариант Perceptual, Selective или Adaptive в зависимости от того, какие цвета желательно сохранить при преобразовании изображения в режим Indexed Color. Подробнее об этих трех палитрах говорится в разделе «Оптимизация изображений для сети в программе ImageReady» этой главы;
  

• Custom (По выбору пользователя), чтобы создать собственную палитру. При желании отредактируйте таблицу цветов и щелкните по кнопке ОК. (Щелкните по кнопке Save (Сохранить), если вы хотите и в дальнейшем использовать таблицу цветов. Щелчок по кнопке Load (Загрузить) позволит загрузить ранее сохраненную таблицу.) Щелкните по кнопке ОК и пропустите следующие шаги;
  
• Previous (Предыдущая), чтобы использовать палитру, применявшуюся в предыдущем преобразовании, если оно выполнялось.
  

4. Если была активизирована одна из опций Local или Master (Perceptual, Selective или Adaptive) или выбран вариант Uniform, то следует ввести количество цветов в таблице (рис. 23.3). Чем меньше цветов в изображении, тем меньше размер файла, но тем хуже качество картинки.
   
5. Выберите один из следующих пунктов всплывающего меню Forced (Принудительно), чтобы добавить определенные цвета в таблицу:
   
   • Black and White (Черный и белый) добавляет чисто черный и чисто белый цвета;
     
   • Primaries (Базовые цвета) добавляет красный, зеленый, синий, циановый, фуксин, желтый, черный и белый;
     
   • Web добавляет 216 Web-цветов (остальные цвета соответствуют палитре Selective);
     
   • Custom (По выбору пользователя) добавляет определенные пользователем цвета.
     
6. Установите флажок Transparency (Про-. зрачность), чтобы сохранить прозрачные области изображения. Либо снимите этот флажок, в таком случае прозрачные области будут залиты цветом, заданным в поле Matte (Кайма), либо белым, если в этом поле выбран пункт None (Нет).
   

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

Рис. 23.3. Ввод количества цветов в поле Colors

Рисование в режиме Indexed Color

В режиме Indexed Color с помощью инструментов Pencil (Карандаш) и Brush (Кисть) можно наносить только полностью непрозрачные мазки. Для этих инструментов оставьте ползунок Opacity (Непрозрачность) на отметке 100%. Единственный режим смешивания, при котором можно уменьшить непрозрачность, - это Dissolve (Растворить).

Опция Forced

Если необходимо проконтролировать, какие цвета будут выбраны для палитры цветов помимо тех, которые предлагает опция Forced (Принудительно), то выделите область (или несколько областей), содержащую те цвета, которые следует поместить на палитру, прежде чем переводить изображение в режим Indexed Color, и затем в поле Palette на шаге 3 выберите один из пунктов Local (Perceptual), Local (Selective) или Local (Adaptive).

Также можно воспользоваться опцией Master, чтобы контролировать цвета изображения (подробнее об этом написано в разделе «Создание специальной палитры в программе ImageReady для изображений в режиме Indexed Color» настоящей главы).

7. Выберите один из пунктов меню Dither (Размытие): None (Нет), Diffusion (Диффузия), Pattern (Узор) или Noise (Шум), чтобы имитировать дополнительные оттенки, которых нет в таблице цветов. Если выбран вариант None, то изображения с резкими переходами цвета будут выглядеть, как плакаты, так что пользуйтесь этой опцией только в случае, когда таких резких переходов цвета нет. Опция Diffusion (Диффузия) приводит к замене цвета на ближайший оттенок, но иногда может сделать заметными отдельные точки. Вариант Pattern имитирует недостающие оттенки, используя повторяющийся узор. Опция Noise создает едва уловимый эффект появления отдельных точек в том месте, где проходит граница между цветами.
   
8. Если в меню Dither (Размытие) был выбран пункт Diffusion, то можно ввести значение в поле Amount (Количество), чтобы регулировать процент цветов, которые будут затронуты данной операцией. Выбирая эту опцию, установите флажок Preserve Exact Colors (Сохранять точные цвета), при этом размытие не будет применяться к тем областям, где цвет изображения полностью соответствуют какому-либо цвету из палитры. Не пытайтесь предварительно просмотреть полученный эффект, так как, скорее всего, вы не увидите никакой разницы.
   
9. Щелкните по кнопке ОК.
   

Редактирование таблицы цветов изображения в режиме Indexed Color

1. Выполните команды Image > Mode > Color Table (Изображение > Режим > Таблица цветов). В результате откроется диалоговое окно Color Table (Таблица цветов), в котором будут показаны все цвета изображения (рис. 23.4), в том числе образец, соответствующий прозрачным пикселам (на рисунке - в нижнем правом углу), если в диалоговом окне Indexed Color (Индексированный цвет) установлен флажок Transparency (Прозрачность).
   
2. Щелкните по какому-либо цвету, чтобы изменить его, или, перетащив указатель через несколько цветов, выделите их.
   
3. Переместите ползунок вверх или вниз по вертикальной шкале, чтобы выбрать соответствующий тон (рис. 23.5в). Затем щелкните по оттенку этого тона в большом цветном квадрате (рис. 23.56).
   
4. Рекомендация. Для того чтобы выбирать только цвета, подходящие для сети, установите флажок Only Web Colors (Только Web-цвета) - см. рис. 23.5а. Если же этот флажок не установлен, то при выборе цвета, показ которого в сети не гарантирован, рядом с ним появится предупреждающий значок (рис. 23.5г). Если щелкнуть по нему, то программа Photoshop найдет ближайший заменитель данного цвета, который наверняка подойдет для Web-изображений.
   

Рис. 23.4. Диалоговое окно Color Table

Рис. 23.5. Панель выбора цвета

Уменьшайте!

Для того чтобы уменьшить количество цветов в таблице изображения в режиме Indexed Color до двух цветов и промежуточных оттенков, сначала выполните команды Image > Mode > Color Table (Изображение > Режим > Таблица цветов). Перетащите курсор с первого цвета в левом верхнем углу до последнего в нижнем правом. В окне Color Picker (Выбор цвета) выберите первый цвет:

• переместите ползунок по вертикальной шкале, чтобы выбрать соответствующий тон (рис. 23.5а);
  
• щелкните по оттенку тона в большом цветном квадрате (рис. 23.56);
  
• щелкните по кнопке ОК.
  

Затем выберите второй цвет. Чтобы получить лучшие результаты, сначала выберите теплый цвет, а потом холодный или наоборот. Щелкните по кнопке ОК, чтобы закрыть панель выбора цветов и затем снова щелкните по ОК.

5. Щелкните по кнопке ОК. Если при выполнении шага 2 было выбрано более одного цвета, то измените второй цвет и щелкните по ОК.
   
6. Щелкните по кнопке ОК.
   

Для того чтобы добавить произвольный цвет в полутоновое изображение, преобразуйте его в режим Indexed Color, а затем отредактируйте таблицу цветов. Воспользуйтесь таблицей Black Body (Черный цвет) или Spectrum (Спектр).

Создание специальной палитры в программе ImageReady для изображений в режиме Indexed Color

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

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

1. Если ранее была создана специальная палитра, то очистите ее, выполнив команды меню Image > Master Palette > Clear Master Palette (Изображение > Специальная палитра > Очистить специальную палитру).
   
2. Откройте изображение, цвета которого будут использованы при создании специальной палитры.
   
3. Выполните команды Image > Master Palette > Add to Master Palette (Изображение > Специальная палитра > Добавить в специальную палитру) -см. рис. 23.6.
   
4. Повторите шаги 2-3, чтобы добавить в специальную палитру цвета из других изображений.
   

Рис. 23.6. Подменю Image > Master Palette

Рис. 23.7. Сохранение палитры

Рис. 23.8. Выбор специальной палитры в меню Color reduction algorithm

5. Как только вы добавили все необходимые цвета, воспользуйтесь командами Image > Master Palette > Build Master Palette (Изображение> Специальная палитра > Построить специальную палитру).
   
6. И наконец, выполните команды Image > Master Palette > Save Master Palette (Изображение > Специальная палитра> Сохранить специальную палитру).
   
7. По умолчанию, новая палитра будет сохранена с расширением .act в папке Presets/Optimized Colors (рис. 23.7). Задайте имя палитры и щелкните по кнопке Save (Сохранить). Теперь можно применять эту палитру к другим изображениям.
   

Применение специальной палитры к другим изображениям

1. Откройте изображение в программе ImageReady.
   
2. На палитре Optimize (Оптимизация) выберите из всплывающего меню Color reduction algorithm (Алгоритм сокращения цветов) специальную палитру, которую следует использовать в изображении (рис. 23.8). Цвета изображения будут изменены в соответствии с палитрой. В этом можно убедиться, открыв вкладку Optimize для окна изображения.
   

Для того чтобы воспользоваться палитрой, созданной в другом приложении, из меню палитры Color Table выберите пункт Load Color Table (Загрузить таблицу цветов). Затем откройте папку, в которой находится нужная палитра.

Из программы Photoshop в LiveMotion

Многослойный файл, созданный в программе Photoshop, может быть использован в качестве основы для создания анимации в программе LiveMotion, Web-приложении компании Adobe. Можно использовать палитру Layers (Слои) в программе Photoshop как сценарий, чтобы создать последовательность изображений. Скройте или покажите отдельные элементы слоев, чтобы предварительно просмотреть изображение. Переместите слои в окне изображений с помощью инструмента Move (Перемещение), чтобы предварительно просмотреть анимацию, а затем откройте файл в программе LiveMotion.

Одним из способов открытия в программе LiveMotion многослойного файла, созданного в Photoshop, является использование команды Place (Разместить). Есть еще один вариант - перетащить слой из программы Photoshop в композицию программы LiveMotion.

При размещении многослойного Photoshop-файла (рис. 23.9) в программе Live-Motion он преобразуется в однослойный объект. Однако после размещения можно воспользоваться командой Object > Convert Layers Into (Объект > Преобразовать слои в), чтобы преобразовать слои либо в отдельные объекты (рис. 23.10), расположенные на отдельных слоях, либо в последовательность кадров на одном слое. Любой из полученных в результате такого преобразования объектов можно будет выделить с помощью редактора Timeline (Шкала времени) в программе LiveMotion и усовершенствовать. Такие объекты так же, как и любые другие объекты программы LiveMotion, могут быть включены в анимацию.

Рис. 23.9. Многослойное изображение в программе Photoshop

Рис. 23.10. Перенос многослойного файла из Photoshop в программу LiveMotion с преобразованием слоев в отдельные объекты

Рис. 23.11. Палитра Layers в программе Photoshop, показывающая отдельные слои изображения, включая фон

Рис. 23.12. Список Timeline в программе LiveMotion после размещения многослойного зайла из программы Photoshop

Рис. 23.13. Список Timeline после выполнения команд Object > Convert Layer Into > Objects

При редактировании объектов с помощью команды Edit Original (Правка исходного объекта) программы LiveMotion любой объект, перемещенный из программы Photoshop в LiveMotion, можно переместить обратно и править в программе Photoshop (на самом деле вы будете работать с копией исходного файла). Когда отредактированная копия файла будет сохранена в программе Photoshop, соответствующие изменения будут автоматически произведены и в LiveMotion. Это значит, что вы можете быстро редактировать анимацию в программе Live-Motion, пользуясь всем набором инструментов Photoshop.

Слои Photoshop-изображения, преобразованные в отдельные объекты LiveMotion, сохраняют порядок следования, в котором они были расположены в программе Photoshop (рис. 23.11-23.13). Самый нижний слой теперь будет находиться в нижней части списка Timeline (Шкала времени) в программе LiveMotion. Так что подумайте заранее о том, в каком порядке расположить слои, прежде чем переместить их из программы Photoshop в Live-Motion.

Подготовка многослойного файла к переносу из программы Photoshop в LiveMotion

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

• убедитесь, что в изображении имеется непрозрачный фон (Background), а не слой с названием Layer 0. Если возможно, ничем не заполняйте фон. После размещения и преобразования изображения в программе LiveMotion фон станет объектом с однотонной окраской, который при желании можно удалить;
  
• создайте альфа-канал, если необходимо очертить какую-либо фигуру в программе LiveMotion. Удостоверьтесь, что альфа-канал имеет черный фон, на котором расположен белый контур фигуры;
  
• преобразуйте в растровый формат все векторные слои, слои заливки и фигур. При этом все контуры отсечения слоев будут преобразованы в маски слоя. При размещении маски слоя в программе LiveMotion она обеспечит отсечение содержимого слоя. Маски слоя называются альфа-каналами и отображаются на палитре Properties (Свойства) в программе LiveMotion.
  

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

• преобразуйте файл в режим RGB;
  
• если многослойный файл из программы Photoshop будет размещен в Live-Motion в качестве сложного однослойного объекта, то будут сохранены все эффекты, связанные со значениями непрозрачности и корректирующими слоями, эффекты слоя, а также эффекты режимов смешивания. Однако, если после этого к данному файлу применить команду Convert Layers Into (Преобразовать слои в), все эффекты будут аннулированы. Если необходимо сохранить вышеперечисленные эффекты, то оставьте объект в программе LiveMotion в виде одного слоя и не преобразуйте его в отдельные объекты. Однако следует отметить, что программа LiveMotion дает гораздо больше возможностей для создания различных эффектов, чем Photoshop;
  
• если необходимо работать с редактируемым текстом, то введите его в программе LiveMotion, так как после размещения файла из программы Photoshop текст будет преобразован в растр;
  
• применять фильтры можно как в программе Photoshop, так и в LiveMotion. В первой программе больше выбор фильтров, но последняя позволяет скрывать или удалять отдельные эффекты фильтров.
  

Возникновение ореола при копировании сглаженных объектов в другие программы

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

Рис. 23.14. Удаление эффекта сглаживания

Рис. 23.15. Изображения, вставленные в другую программу: без уменьшения выделенной области слева); с уменьшением выделенной области, чтобы удалить ореол (справа)

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

Чтобы предотвратить возникновение ореола, сначала выделите объект в программе Photoshop, не выделяя его сглаженных границ. Нажав клавишу Ctrl, щелкните по имени слоя, чтобы выделить объект, и затем увеличьте масштаб, по крайней мере, до 200%, так чтобы можно было четко видеть границы объекта. Выполните команды Select > Modify > Contract (Выделить> Изменить > Уменьшить), чтобы ужать выделенную область на один или два пиксела. При этом будет удален эффект сглаживания. И наконец, скопируйте объект и вставьте его в другую программу. Рис. 23.14-23.15 иллюстрируют этот процесс. Чтобы получить изображение, приведенное на рис. 23.14, с помощью инструмента Magic Wand (Волшебная палочка) был выделен белый фон, затем выделенную область инвертировали, при этом некоторая часть сглаженной границы вошла в выделение. Была применена команда Select > Modify > Contract (Выделить > Изменить > Уменьшить), чтобы уменьшить выделение на один пиксел.

Из программы Photoshop в After Effects

Многослойное изображение, созданное в программе Photoshop, можно импортировать в программу After Effects 4.1 компании Adobe и разместить его в окне Time Layout (Расписание), чтобы создать анимационные эффекты для вывода на видео или просмотра при помощи программы QuickTime. Файл, содержащий слои, может быть импортирован из программы Photoshop в After Effects в виде составного файла. Отдельные слои и группы слоев при этом сохраняются.

В качестве альтернативы можно импортировать изображение со слоями из программы Photoshop в After Effects как предварительно скомпонованное. Для того чтобы сохранить все слои, в том числе и корректирующие, эффекты слоя, режимы смешивания и альфа-каналы без изменений, для импорта изображения воспользуйтесь командами File > Import > Photoshop as Comp (Файл > Импорт > Photoshop-файл как Comp) в программе After Effects. Редактируемые текстовые слои правильно интерпретируются программой After Effects, поэтому нет необходимости их предварительно преобразовывать. Маски слоя также будут импортированы и корректно визуализированы программой After Effects.

Группа отсечения из программы Photoshop будет импортирована в After Effects как предварительно скомпонованная. Благодаря этому ее можно размещать и редактировать, как единое целое. Если дважды щелкнуть по такому объекту в окне After Effects Project (Проект After Effects), то в окне Time Layout (Расписание) будут отображены отдельные слои группы отсечения.

К альфа-каналам, содержащимся в файле Photoshop, можно применить команду Set Matte Effect (Эффект покрытия). Любые другие каналы будут проигнорированы.

Иногда одно и то же изображение используется как для печати (обычное разрешение таких изображений составляет 250 dpi и выше), так и в проекте программы After Effects. He следует использовать в программе After Effects файлы с высоким разрешением, вместо этого создайте копию файла с надлежащим разрешением и размерами при помощи команды Image Size (Размер изображения) из меню File (Файл) в программе Photoshop.

Согласование цветов в программе Photoshop и других приложениях

Если необходимо создать цвет в программе Photoshop с использованием тех же значений RGB, что используются в Macromedia Director или Netscape Navigator, то, возможно, не удастся достичь полного совпадения, так как в программах Director и Navigator используются палитры цветов Windows Color Picker или Apple Color Picker (в зависимости от платформы) для определений значений RGB, в то время как программа Photoshop по умолчанию использует свою собственную палитру цветов.

Если использовать палитры Windows или Apple вместо палитры Photoshop, то при смешивании цветов RGB на палитре Color в программе Photoshop полученный цвет будет полностью соответствовать тому, который используется в программе Director. Для того чтобы поменять палитру, воспользуйтесь командами Edit => Preferences > General (Правка > Установки > Общие) и во всплывающем меню Colors Picker (Выбор цветов) выберите пункт Windows или Apple, а затем щелкните по кнопке ОК. Не забудьте снова переключить палитру, когда закончите работу.

Из программы Photoshop на видео

Если у вас имеется система для создания видео Avid, то установите размеры изображения равными 720x486 пикселов (D-I NTSC)- Для просмотра с помощью программы QuickTime подходят любые размеры изображения. Для обеих систем Avid и QuickTime рекомендуется использовать разрешение в 72 dpi. He волнуйтесь, если у вас разрешение выше.

Создание в программе Photoshop изображений для сети

Основные шаги при создании изображения в программе Photoshop для его просмотра в режиме реального времени могут показаться простыми:

• создайте изображение в режиме RGB;
  
• сохраните его;
  
• перейдите в программу ImageReady 7.0;
  
• оптимизируйте файл, предназначенный для загрузки в сеть.
  

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

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

Стандартные PAL и SECAM работают с изображениями 800x600 пикселов.

• размер изображения;
  
• палитра цветов;
  
• глубина цвета;
  
• формат файла (GIF или JPEG).
  

Вот перечень «золотых» правил по созданию Web-изображений:

1. Пусть содержимое изображения - содержит ли оно однотонные области или имеет плавные переходы цветов -определяет наиболее подходящий формат файла.
   
2. Используйте такой размер файла, какой считаете наиболее практичным, соотнося размер файла с качеством изображения. И помните правило просмотра изображений с однотонными областями в браузерах для любой программно-аппаратной платформы: используйте Web-цвета в палитре, а также заменяйте цвета однотонных областей на Web-цвета.
   
3. Постарайтесь уменьшить количество элементов в таблице цветов.
   
4. Просмотрите изображение с помощью Web-браузера на чужом компьютере, чтобы оценить, насколько быстро оно загружается и насколько хорошо (плохо) выглядит.
   

Размер изображения

Для того чтобы рассчитать размер изображения, необходимо заранее знать размер монитора, а также скорость модема потенциального пользователя, который будет просматривать Web-страничку. В большинстве случаев следует создавать изображение размером 800x600 пикселов (обычный размер монитора) и для модема со скоростью передачи 56 Кб/с (наиболее распространенная скорость).

Указанный размер будет иметь окно Web-браузера, так что максимальный размер изображения составит около 10 дюймов в ширину (740 пикселов) и 7,5 дюймов в длину (550 пикселов). Разрешение изображения должно быть равным 72 dpi.

При вычислении размера файла изображения не полагайтесь на размер документа, отображаемый в строке состояния программой Photoshop. Вместо этого перейдите в программу ImageReady (щелкните по соответствующей пиктограмме в нижней части палитры инструментов в программе Photoshop), оптимизируйте файл, убедитесь, что выбран пункт Original/ Optimized File Sizes (Исходные/Оптимальные размеры файла) из всплывающего меню Image Information (Информация об изображении), расположенного в нижней части основного окна, и запишите информацию о размере файла (рис. 23.16 и 23.17).

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

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

Если вы знаете точный размер файла, то можно подсчитать, сколько времени нужно для его загрузки по сети. Но лучше выберите пункт Size/Download Time (Размер/Время загрузки) из всплывающего меню Image Information (Информация об изображении) в программе ImageReady, чтобы получить информацию с учетом разных скоростей модема (рис. 23.18).

Рис. 23.16. Исходное изображение в программе ImageReady

Рис. 23.17. Всплывающее меню Image Information

Рис. 23.18. Сведения о времени загрузки файла по сети в программе ImageReady

Рис. 23.19. GIF-файл размером 20 Кб,с изображением в стиле плаката (5 уровней)

Рис. 23.20. GIF-файл размером 120 Кб, содержащий изображение с плавным переходом. цветов

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

Загрузка файла размером 50 Кб с помощью модема со скоростью 56 Кб/с займет 9 секунд.

Ниже приведены сведения о сжатии файлов различных типов:

• документ с однотонным фоном и несколькими однотонными фигурами существенно уменьшится при сжатии (предположительно размер файла будет в пределах от 20 Кб до 50 Кб);
  
• большой документ (более 100 Кб) со множеством цветных областей, текстур или узоров (например, если текстура Add Noise (Добавить шум) покрывает большую часть изображения) уменьшится незначительно;
  
• при использовании формата GIF фотографическое изображение с плавным переходом тонов может уплотниться не так существенно, как изображение с однотонными областями. Но если ему придать плакатный стиль (от 4 до 8 уровней), то размер файла будет практически равен размеру файла изображения с однотонными фигурами, однако при этом будут утрачены плавные переходы цветов. Лучше для изображений фотографического типа использовать формат JPEG.
  

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

Орнамент, полностью покрывающий фон окна браузера, обычно формируется с помощью метода мозаичной укладки (tiling) в программе по созданию Web-страниц или с помощью HTML-кода. Также с помощью программы ImageReady можно создать код и генерировать эффект «черепицы» для фона (см. раздел «Мозаичный фон» этой главы).

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

Формат GIF

Формат GIF - это 8-битный формат файла, то есть изображение в этом формате может содержать максимум 256 цветов. Однако он считается стандартным, так как у большинства пользователей сети 8-битные мониторы, на которых может отображаться максимум 256 цветов, а не тысячи и миллионы оттенков, которые делают изображение наиболее приятным для глаз. Формат GIF очень хорош для изображений, содержащих однотонные области и фигуры с четко определенными границами (рис. 23.21), например для текста (рис. 23.22).

Рис. 23.21. Изображение, подходящее для хранения в формате GIF

Рис. 23.22. Гибридное изображение, содержащее текст и области с плавным переходом цветов

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

Для того чтобы сохранить изображение в формате GIF и увидеть, как оно будет смотреться в браузере, воспользуйтесь в программе Photoshop командой File & Save for Web (Файл > Сохранить для Web), либо оптимизируйте и сохраните его в программе ImageReady (см. раздел «Оптимизация изображений в формате GIF или PNG-8» этой главы).

Выбор цвета для изображения в формате GIF должен основываться на том, какие цвета действительно отображаются в палитре Web-браузера. В основном, цветовые палитры браузеров 8-битные, то есть на экране может отображаться 256 цветов. Цвета, не входящие в палитру, воспроизводятся посредством размытия (dithering), специального метода перемешивания пикселов доступных цветов для имитации других оттенков.

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

Глубина цвета

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

В 8-битном изображении можно сократить количество цветов с исходных 256 цветов при помощи диалогового окна Indexed Color в программе Photoshop (устаревший способ), диалогового окна Save for Web (Сохранить для Web) в программе Photoshop 7 (лучше) или палитры Optimize (Оптимизация) в программе ImageReady (самый эффективный способ). Последние два способа позволяют предварительно просмотреть изображение с меньшим количеством цветов.

Всегда предварительно просматривайте изображение в масштабе 100%, чтобы оценить качество цвета.

Данные о зависимости количества цветов и глубины цвета приведены в табл. 23.1.

Таблица 23.1. Глубина цвета

Рис. 23.23. Изображение, пригодное для хранения в формате JPEG

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

Рис. 23.25. То же изображение в формате GIF

Формат JPEG

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

Преимущество формата JPEG заключается в том, что он сжимает 24-битное изображение так же эффективно, как формат GIF сжимает 8-битное.

Недостатки JPEG состоят в следующем:

1. JPEG-файл нужно распаковывать при просмотре Web-страницы, что требует времени.
   
2. JPEG - не самый лучший вариант для изображений, содержащих однотонные области или текст, так как подобный метод сжатия вносит искажения на четко определенных границах изображений такого сорта (рис. 23.24-23.25).
   
3. Не все пользователи сети используют 24-битное отражение цветов. JPEG-изображение будет искажено на 8-битном мониторе. При этом размытие изображения с плавными переходами цвета будет менее заметно, чем в случае изображения, содержащего однотонные области с отчетливыми границами. Можно уменьшить глубину цвета до 8 бит, чтобы предварительно просмотреть изображение в таком виде, либо просто воспользоваться командой View > Preview > Browser Dither (Вид > Предварительный просмотр > Размытие в браузере) в программе ImageReady. Если в изображении нет текста или объектов с четкими границами, возможно, JPEG-файл и «выживет» при переключении на 8-битный цвет.
   

Файлы в формате JPEG могут быть оптимизированы с использованием формата Progressive JPEG, поддерживаемого браузерами Nestcape Navigator и Internet Explorer (версия 4.0 и выше). При загрузке на Web-страницу картинки и в таком формате детализация изображения увеличивается постепенно.

Если выбран формат JPEG, то можно поэкспериментировать с оптимизацией изображения в программе ImageReady или в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop. Затем, выбрав опцию 4-Up (4 варианта), можно предварительно просмотреть несколько версий изображения с различной степенью сжатия. Подумайте, какая степень уплотнения наиболее приемлема, сопоставив размер файла с качеством изображения. В программе ImageReady можно сохранить оптимизированный файл отдельно и при этом оставить нетронутым исходное изображение для дальнейшего использования.

Каждый раз при оптимизации изображения с помощью формата JPEG теряется некоторая часть данных. Чем выше степень сжатия, тем больше информации утрачивается. Чтобы предотвратить это, сначала отредактируйте и сохраните изображение в программе Photoshop. Затем перейдите в программу ImageReady, при желании выполните дальнейшее редактирование, оптимизируйте файл и, наконец, воспользуйтесь командой File > Save Optimized (Файл > Сохранить с оптимизацией), чтобы сохранить файл в формате JPEG.

Размытие

Размытие (dithering) - перемешивание двух цветов из палитры для имитации третьего.

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

Зачастую результат размытия изображений с однотонными фигурами получается не слишком эстетичным. Это происходит вследствие того, что палитра браузера смешивает пикселы, чтобы воссоздать отсутствующий в ней цвет. Для таких изображений лучше создавать цвета в программах Photoshop или ImageReady с помощью ползунков, а также панели выбора Web-цветов на палитре Color (Цвет). Однотонные области должны быть выделены, а их цвета заменены на ближайшие Web-цвета.

На изображениях с плавным переходом цветов уже имеются участки, где смешаны пикселы. Некоторые картинки очень хорошо смотрятся на Web-страничке без дополнительного размытия и всего с 256 цветами. Однако чем меньше элементов в палитре изображения с плавным переходом цветов, тем больше будет видно «швов» при переходе от одного цвета к другому. Степень размытия можно выбрать в программе ImageReady или в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop 7. Чем больше эта величина, тем менее заметной будет граница при переходе цветов, но более заметными будут отдельные точки на изображении (рис. 23.26-23.27). Подумайте, какое из двух зол, на ваш взгляд, меньшее.

Рис. 23.26. Увеличенное изображение при небольшой величине размытия

Рис. 23.27. То же изображение с более высокой степенью размытия

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

Сглаживание

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

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

Если выделить некоторую область при включенной опции сглаживания, то вместе с объектом выделятся и точки фона, расположенные рядом с границей изображения. Если скопировать и вставить такую область в изображение, расположив ее на однотонном фоне, то станет видна окантовка из присоединенных точек. Чтобы этого не случилось, прежде чем выделять область, снимите флажок Anti-aliased (Сглаживание) на панели опций инструментов выделения, Lasso (Лассо) или Magic Wand (Волшебная палочка).

Также можно воспользоваться опцией Matte (Кайма) на палитре Optimize (Оптимизация) программы ImageReady, чтобы указать, каким образом будут интерпретироваться частично прозрачные точки (те точки, которые появляются при сглаживании) в форматах GIF и JPEG. Обе программы Photoshop и ImageReady позволяют контролировать степень сглаживания текста. Можно активизировать эту опцию и сохранять ее при переносе файла из одной программы в другую. Новые средства управления каймой и сглаживанием позволяют удалить нежелательные ореолы вокруг изображений.

Для того чтобы выделить изображение в слое, не выделяя при этом полупрозрачных точек, расположенных на границе объекта, нажмите клавишу Ctrl и щелкните по имени слоя. Затем выполните команды Select > Modify > Contract (Выделить > Изменить > Уменьшить), чтобы ужать выделение на один пиксел.

Окно Save for Web в программе Photoshop

Многие средства оптимизации файлов объединены в диалоговом окне File > Save for Web (Файл > Сохранить для Web) программы Photoshop (рис. 23.28). В верхней части главного окна имеются четыре вкладки для предварительного просмотра: Original (Исходное изображение), Optimized (Оптимизированное изображение), 2-Up (Два варианта) и 4-Up (4 варианта). Кроме того, в этом окне расположены таблица цветов и средства управления форматом, каймой, качеством изображения и др. Также имеется меню Preview (Предварительный просмотр) и кнопка Preview in [browser] (Предварительный просмотр в [браузер]). В этой главе основное внимание уделено оптимизации

Рис. 23.28. Диалоговое окно Save for Web программы Photoshop

изображений в программе ImageReady, но те же операции можно произвести эквивалентными средствами и в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop. Подробнее об этом диалоговом окне рассказано в разделе «Диалоговое окно Save for Web в программе Photoshop» настоящей главы. -

Форматы PNG-8 и PNG-24

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

Какие же существуют ограничения при использовании форматов PNG? Например, в этом формате нельзя создать анимацию (а в формате GIF можно), кроме того, файлы в формате PNG-24 больше по размеру аналогичных JPEG-файлов. И, что еще важнее, форматы PNG непосредственно не поддерживается двумя основными Web-браузерами, за исключением версий Internet Explorer 4.0 и Netscape Navigator 6 и более поздних. Предыдущим версиям этих программ для отображения картинок в данном формате требуется встраиваемый модуль, например PNG Live. Чем же плохи эти модули? Пользователь, возможно, не захочет тратить время на загрузку встраиваемого модуля, а без него ваш сайт не будет смотреться так же выигрышно, как при его использовании.

Панель инструментов в программе ImageReady

Панель инструментов в программе ImageReady аналогична панели инструментов в программе Photoshop, но в ней есть дополнительные Web-инструменты для создания карт изображения, их просмотра, просмотра ломтиков изображений (slice), предварительного просмотра роллове-ров (rollover) и перехода в Web-браузер (рис. 23.29). Щелкнув по кнопке Jump to (Перейти к), вы сможете перейти в программу Photoshop.

Рис. 23.29. Панель инструментов в программе ImageReady

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

Как и в программе Photoshop, теперь в программе ImageReady есть панель опций инструмента, вид которой зависит от того, какой инструмент активизирован рис. 23.30 и 23.31). Перетащите левый край панели опций, чтобы поместить ее в другом месте рабочего стола. Для того чтобы свернуть панель опций в программе ImageReady, дважды щелкните по ее левому краю (рис. 23.32).

Оптимизация изображений для сети в программе ImageReady

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

Если вы освоите программу ImageReady, вам не составит труда пользоваться диалоговым окном Save for Web программы Photoshop, так как их опции практически идентичны. Диалоговое окно Save for Web рассматривается в конце главы.

Рис. 23.30. Панель опций инструмента Rectangle shape

Рис. 23.31. Панель опций инструмента Туре

Рис. 23.32. Свернутая панель опций инструмента Туре

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

GIF и JPEG - два формата, обычно используемых для графики в сети. Рекомендуем применять формат GIF в случае, когда изображение содержит элементы с четкими границами, например однотонные области, штриховой рисунок и текст. Формат PNG-8, похожий на GIF, использует те же параметры палитры Optimize (Оптимизация), что и GIF, и результаты оптимизации практически идентичны. Оптимизированный файл в формате GIF или PNG-8 может содержать до 256 цветов.

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

Четыре цветовые палитры формата GIF

То, что Web-дизайнеры обычно называют «цветовые палитры», в программе ImageReady получило название «алгоритмы сокращения, количества цветов (color reduction algorithms)»

Существует четыре алгоритма сокращения количества цветов в формате GIF:

• Perceptual (Учитывающий восприятие) - создает таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранений целостности цвета;
  
• Selective (Селективный) - создает таблицу цветов на основе текущих цветов изображения. Опции Perceptual и Selective похожи, но последняя в большей степени нацелена на сохранение цветов однотонных элементов изображения, а также Web-цветов;
  
• Adaptive (Адаптивный) - создает таблицу на основе части цветового спектра, где представлено большинство оттенков изображения. Эта опция формирует оптимизированный файл немного большего размера;
  

При переключении опций Perceptual, Selective, Adaptive сохраняются все Web-цвета, входящие в таблицу цветов изображения.

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

Рис. 23.33. Вкладка 2-Up в программе ImageReady

Рис. 23.34. Палитра Optimize программы ImageReady

Оптимизация изображений в формате GIF и PNG-8

Для оптимизации изображений в формате GIF и PNG-8 выполните следующие действия.

1. Если вы работаете в программе Photoshop, то сохраните файл и щелкните в нижней части панели инструментов по кнопке Jump to (Перейти к) или же нажмите комбинацию клавиш Ctrl+ Shift+M. Начнет работать программа ImageReady, если она не была запущена ранее, и в ней будет открыто изображение.
   

   Второй вариант: в программе ImageReady выполните команду File > Open (Файл > Открыть), а затем выделите имя изображения и щелкните по кнопке Open (Открыть).
   

2. Откройте вкладку 2-Up (2 варианта) в верхней части окна изображения, чтобы одновременно видеть исходное и оптимизированное изображение в области предварительно просмотра (рис. 23.33).
   
3. Отобразите палитру Optimize (Оптимизация) с помощью команды меню Window > Show Optimize (Окно > Показать палитру Optimize).
   
4. Из всплывающего меню Settings (Настройки), показанного на рис. 23.34, выберите какое-либо сочетание настроек оптимизации из имеющихся вариантов настроек. Оставьте выбранный вариант настроек без изменений и сохраните файл или выполните следующие шаги и задайте значения настроек оптимизации по своему выбору.
   
5. Из всплывающего меню с форматами файлов выберите GIF или PNG-8.
   
6. Активизируйте палитру из следующего всплывающего меню (подробнее о возможных опциях говорилось выше). Форматы GIF и PNG-8 поддерживают всего 256 цветов.
   

   Опции Perceptual (Учитывающий восприятие), Selective (Селективный) и Adaptive (Адаптивный) интерпретируют цвета в оптимизированном изображении, используя цвета исходного (рис. 23.35).
   

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

   Опция Custom (По выбору пользователя) оптимизирует цвета изображения на основе палитры, ранее сохраненной в программе Photoshop или ImageReady.
   

   При выборе опций Mac OS и Windows цвета изображения оптимизируются на основе стандартной палитры соответствующей операционной системы.
   

7. Из следующего всплывающего меню выберите способ перемешивания пикселов: No Dither (Нет), Diffusion (Диффузия), Pattern (Узор) или Noise (Шум). Данная опция позволяет имитировать недостающие оттенки для изображения с 8-битным цветом (этот эффект нельзя увидеть на палитре) за счет увеличения размера файла. При выборе варианта Diffusion создается едва заметный эффект с наименьшим увеличением размера файла.
   

   Выберите значение в процентах в поле Dither (Размытие). Большая величина позволяет имитировать больше цветов-заменителей, что также отразится и на размере файла (рис. 23.37, 23.38).
   

Рис. 23.35. Результат оптимизации изображения с помощью палитры Selective

Рис. 23.36. Появление отдельных точек на изображении после оптимизации с помощью палитры Web

Рис. 23.37. Результат оптимизации изображения с помощью палитры Selective при высоком значении параметра Dither

Рис. 23.38. Результат оптимизации изображения с помощью палитры Web при высоком значении параметра Dither (появилось множество точек, как и следовало ожидать)

Другой способ имитации цветов описан в разделе «Применение взвешенной оптимизации» этой главы.

8. Укажите в поле Colors (Цвета) максимально возможное количество элементов для создания таблицы цветов (воспользуйтесь стандартной настройкой из выпадающего меню или введите точное значение). Для палитр Web, Windows и Mac по умолчанию в этом поле стоит Auto (Авто). Эта опция автоматически устанавливает количество элементов в таблице цветов равным либо количеству цветов в изображении, либо 256 в зависимости от того, какое значение меньше. Можно выбрать другой вариант настройки или ввести точное количество цветов, если вы по каким-то причинам не хотите пользоваться опцией Auto.
   
9. Установите флажок Transparency (Прозрачность), чтобы программа ImageReady сохранила все прозрачные точки изображения (области слоя, где виден шахматный узор). Формат GIF, в отличие от PNG-8, не поддерживает полупрозрачные точки. (О том, как быть в этом случае, рассказано в разделе «Постепенное исчезновение».) Данная опция позволяет создавать непрямоугольные границы изображения. Если флажок Transparency не установлен, то прозрачные точки будут заполнены цветом, указанным в поле Matte (Кайма).
   
10. Для того чтобы контролировать, как частично прозрачные точки вдоль границ изображения будут смешиваться с фоном Web-страницы (подобно границам объектов при сглаживании), используйте опцию Matte (Кайма). Задайте в этом поле цвет, совпадающий с цветом фона Web-страницы, если известно, какой он. На рис. 23.39 показано GIF-изображение, которое было получено при следующих условиях: установлен флажок Transparency, а в поле Matte выбран цвет. В результате появилась тонкая линия из цветных точек вдоль границ каждой фигуры.
    

    Если цвет фона неизвестен, выберите пункт None (Нет) в списке Matte, результатом будут жесткие, зазубренные границы (рис. 23.40). В обоих случаях исключается появление эффекта ореола вдоль границ изображения при отображении его в сети. Любой эффект смягчения границ (например, Drop Shadow (Отбросить тень)), примененный к прозрачным областям, приведет к заливке цветом, указанным в поле Matte.
    

11. Установите флажок Interlaced (Через строку), чтобы детализация GIF или PNG-изображения постепенно возрастала по мере загрузки его на Web-страницу. При этом немного увеличится размер файла.
    
12. Переместите ползунок Web Snap (Привязка к палитре Web) на соответствующую отметку в процентах, чтобы задать диапазон цветов, которые автоматически заменяются Web-эквивалентами. Чем выше значение данного параметра, тем меньше различных цветов будет в изображении и меньше размер файла, но тем заметнее станут отдельные точки изображения и в целом его стиль приблизится к плакатному (рис. 23.41).
    

Рис. 23.39. Изображение в формате GIF

Рис. 23.40. То же изображение при значении None в поле Matte

Рис. 23.41. Плакатный стиль изображения, полученный в результате выбора большого значения в поле Web Snap

Постепенное исчезновение

Прозрачные области изображений в форматах GIF и JPEG не могут иметь сглаженных границ без применения опции Transparency. Если необходимо, чтобы изображение плавно переходило в однотонный фон (как при применении эффекта Drop Shadow (Отбросить тень) или Outer Glow (Внешнее свечение)), создайте два слоя в документе с помощью программы Photoshop или ImageReady: однотонный нижний, окрашенный Web-цветом, который будет использован на Web-страничке, и верхний, содержащий элемент изображения со смягченными растушеванными границами или эффект, такой как Drop Shadow.

Гибридные изображения

Для гибридного изображения, содержащего не только однотонные области или текст, но также и фотографические фрагменты, самым лучшим вариантом будет использование формата GIF в сочетании с палитрой Perceptual (Учитывающий восприятие), Selective (Селективный) или Adaptive (Адаптивный), но только не палитрой Web. Эта комбинация позволит подобрать для однотонных областей Web-цвета и достаточно качественно отобразить фрагменты с плавными переходами цвета

13. По желанию. Только для GIF-файлов можно установить значение параметра Lossy (С потерей), чтобы сделать размер файла оптимизированного изображения еще меньше. Как следует из названия опции, некоторые данные будут утеряны, но незначительное снижение качества изображения может быть оправдано уменьшением размера файла. (Как с помощью канала осуществлять контроль за объемом утраченных данных, рассказано в разделе «Применение взвешенной оптимизации» этой главы.)
    
14. Сохраните файл, следуя рекомендациям, данным в разделах «Сохранение файла в ImageReady» и «Сохранение оптимизированного файла в ImageReady».
    

Для того чтобы сохранить текущий набор параметров палитры, выберите пункт Save Settings (Сохранить настройки) из меню палитры. Введите имя с расширением .irs. Найдите и откройте папку Adobe Photoshop 7/ Optimize Settings, затем щелкните по кнопке Save. Теперь сохраненный набор настроек будет отображаться во всплывающем меню Settings (Установки) в программе ImageReady, а также в диалоговом окне Save for Web (Сохранить для Web) в программе Photoshop.

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

Применение взвешенной оптимизации

Взвешенная оптимизация - возможность в программе ImageReady 7, с помощью которой можно установить верхнюю и нижнюю границы качества при сжатии изображений в формате GIF, PNG и JPEG. Если создать и сохранить канал выделенной области, то верхнее ограничение будет применено к белой области канала (области, расположенной внутри выделения), а нижнее ограничение - к черной (расположенной за пределами выделенной области). Также можно указать алгоритм сокращения количества цветов и метод размытия для форматов GIF и PNG-8; предельный уровень потери данных для GIF и уровень качества изображения в целом для JPEG.

Для использования взвешенной оптимизации выполните следующие действия.

1. Создайте канал, выделив область изображения и выполнив команду Save Selection (Сохранить выделенную область) из меню Select (Выделить).
   
2. Оставьте без изменений вариант New (Создать новый канал) во всплывающем меню Channel (Канал), введите какое-либо имя в поле Name (Имя) и щелкните по кнопке ОК (рис. 23.42).
   
3. На палитре Optimize (Оптимизация) щелкните по любой кнопке Channel (Канал). Эти кнопки расположены рядом со списком алгоритмов сокращения цветов (рис. 23.43) или с полями Lossy (С потерей) и Dither (Размытие) для форматов GIF и PNG; либо рядом с полем Quality (Качество) для формата JPEG (рис. 23.44).
   

Рис. 23.42. Диалоговое окно Save Selection

Рис. 23.43. Палитра Optimize для формата GIF

Рис. 23.44. Палитра Optimize для формата JPEG

4. Из всплывающего меню Channel (Канал) выберите канал выделенной области. Также установите значения в полях Maximum (Максимум) и Minimum (Минимум) с помощью ползунка, стрелочек или текстового окна, а затем щелкните по кнопке ОК (рис. 23.45).