Графика и дизайн -> Photoshop -> Photoshop для подготовки WEB-графики

Photoshop для подготовки WEB-графики

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

• Отличия инструментов и команд PhotoShop и ImageReady
• Работа с цветом
• Оптимизация изображений
• Автоматическая оптимизация настроек
• Что нового мы узнали?

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

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

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

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

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

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

а	б

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

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

К различиям между командами также стоит отнестись внимательно, чтобы не стало сюрпризом, что какая-либо известная из PhotoShop команда работает не так или не совсем так, как ожидалось. И, естественно, рассмотрим работу команд, которые есть только в ImageReady.

1. Меню File (Файл) (рис. 9.2).

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

СОВЕТ. Если ImageReady не позволяет сохранить файл в том формате, который вам нужен, всегда можно сделать это в программе PhotoShop.

Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет изображение с настройками, указанными при оптимизации (см. раздел «Оптимизация изображений» данного урока).

Команда File > Save Optimized As... (Файл > Сохранить оптимизированное как...) позволяет изменить настройки при сохранении (рис. 9.3).

а	б

Рис. 9.2. Внешний вид меню File для PhotoShop (а) и ImageReady (б)



Рис. 9.3. Диалоговое окно команды File > Save Optimized As...

Изменить можно следующие параметры:

• тип файла: HTML — код и изображения (*.html), только изображения (*.gif) и только HTML — код (*.html);
• настройки: заказные, фонового изображения, по умолчанию и другие;
• нарезку: все фрагменты или выделенные.

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

Команда File > Update HTML... (Файл > Обновить HTML...) предназначена для обновления связей в файлах HTML (рис. 9.4).



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

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

Команды File > Place... (Файл > Поместить...) внешних различий не имеют, но если в Photoshop помещать можно только файлы форматов *.ai, *.eps, *.pdf и *.pdp, то ImageReady разрешает помещать файлы любых читаемых форматов.

Команда File > Import... (Файл > Импорт) позволяет получить файлы из внешних источников: импортировать папку с рисунками как кадры (подробно этот процесс рассмотрен ниже, импортировать изображение PDF, сканировать изображение и выбрать сканер.

Команда File > File Info... (Файл > Информация о файле...) гораздо скромнее, чем в Photoshop, можно указать только заголовок и автора.

Команда File > Preview In (Файл > Просмотр в) предоставляет возможность просмотреть изображение в любом установленном браузере.

а	б

Рис. 9.5. Внешний вид меню Edit для PhotoShop (a) и ImageReady (б)

2. Меню Edit (Правка)

Команды подменю Edit > 0Copy HTML Code (Правка > Копировать HTML-код) обеспечивает копирование HTML-кода для всех нарезанных фрагментов изображения (Copy All Slices (Копировать все фрагменты)) или выделенных фрагментов (Copy Selected Slices (Копировать выделенные фрагменты)), а также соответствующего фрагментам изображения блоков программ JavaScript (Copy Preloads (Копировать программы)).

Команда Edit > Copy Foreground Color as HTML (Правка > Копировать текущий цвет как HTML) возвращает шестнадцатеричное значение текущего цвета. Команда Edit > Fill... (Правка > Заливка...) в отличие от подобной команды в Photoshop не позволяет использовать заказной узор.

3. Меню Image (Изображение)

Основное отличие заключается в количестве команд подменю Adjustments (Коррекция). Как видно из рисунка, большинство команд коррекции изображения в ImageReady отсутствует.



а



б

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



Рис. 9.7. Диалоговое окно команды Image > Adjustments > Gamma...

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

ПРИМЕЧАНИЕ. Параметр гамма измеряет яркость полутонов, отображаемых монитором. ОС Windows использует значение гамма выше, чем Mac OS, поэтому одно и то же изображение темнее для Windows, чем для Macintosh. Изображения, созданные в Photoshop 4.0 или более ранней версии, используют по умолчанию значение гамма, равное 1,8 (системное значение Mac OS) и должны быть скорректированы для Windows. Изображения, созданные в Photoshop 5.0 или более поздней версии, используют по умолчанию значение гамма, равное 2,2 (системное значение Windows), поэтому коррекции не требуют.

Как видно из рисунка, можно провести автоматическую настройку для переноса изображения из Windows в Macintosh и обратно.

ВНИМАНИЕ. Изменения, проведенные с помощью команды Image > Adjustments > Gamma... (Изображение » Коррекция > Гамма...), изменяют величину пикселов. Команды же из меню View > Preview корректируют параметр гамма, не изменяя величину пикселов изображения.

Команда Image > Duplicate Optimized... (Изображение > Повторить оптимизированное...) делает копию оптимизированного изображения, в отличие от команды Image > Duplicate... (Изображение > Повторить...), которая делает копию оригинала.

Команда Imaget Image Size... ( Изображение > Размер изображения...) позволяет изменить размер изображения, не теряя качества и предоставляет дополнительные настройки (рис. 9.8).

Вкладка Current Size (Текущий размер) носит чисто информативный характер, на вкладке New Size (Новый размер) задаются нужные параметры: ширина, длина или процентное соотношение. Флажок Constrain Proportions (Сохранить пропорции) не позволяет только удлинять или только расширять изображение. Из меню Quality (Качество) можно выбрать способ искажения пикселов (бикубический или «ближайший сосед»).

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

1. Начать запись действия.
2. Выполнить команду Image > Image Size... (Изображение > Размер изображения...), задав нужные параметры изображения.
3. При необходимости установить флажок Action Options (Настройки действия). После этого станут доступными элементы управления, позволяющие задать некоторые параметры, полезные при автоматизированной обработке изображений.
4. 
   

   

   а

   

   б

   Рис. 9.8. Диалоговые окна команд Image > Image Size... в PhotoShop (а) и ImageReady (б)
   
   

5. Из меню Fit Image By (Подогнать рисунок по) выбрать подходящий параметр подгонки: ширину, длину, ширину и длину вместе или процентное соотношение.
6. Флажок Do Not Enlarge (He увеличивать) позволяет запретить увеличение изображения в том случае, если его текущие габариты меньше установленных в параметрах команды.
7. Закончить запись действия.

Команда Image > Variables > Define... (Изображение > Переменные > Определить...) используется при создании нескольких изображений на основе одного шаблона (рис. 9.9). Переменные определяют динамические элементы шаблона. Тип переменной обусловливает тип данных, которые должны меняться. Типы могут быть следующими:

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

Рис. 9.9. Диалоговое окно команды Image > Variables > Define...

Рис. 9.10, а. Режим замещения пикселов Fit

Рис. 9.10, б. Режим замещения пикселов Fill

Рис. 9.10, в. Режим замещения пикселов As Is

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

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

• Fit (Подогнать). Иллюстрация к этому методу представлена на рис. 9.10, а. Изображение с сохранением пропорций помещается в заданные границы по высоте. Кнопка предназначена для выбора нужной части изображения;
• Fill (Залить). Иллюстрация к этому методу представлена на рис. 9.10, б. Изображение с сохранением пропорций помещается в заданные границы по ширине. Флажок Clip to Bounding Box (Обрезать по рамке) позволяет обрезать области изображения, не помещающиеся в рамку;
• As Is (Как есть). Иллюстрация к этому методу представлена на рис. 9.10, в. Изображение помещается в заданные границы без изменения размера, лишнее можно обрезать, установив флажок Clip to Bounding Box (Обрезать по рамке);
• Conform (Согласовать). Иллюстрация к этому методу представлена на рис. 9.10, г. Изображение помещается в заданные границы без сохранения пропорций.

  

  Рис. 9.10, г. Режим замещения пикселов Conform

Команда Image > Variables > Data Set... (Изображение > Переменные > Набор данных...) определяет набор данных, который представляет собой совокупность переменных и связанных данных. Переключение между наборами данных позволяет оперировать различными данными в одном шаблоне (рис. 9.11).

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

Над набором данных производятся следующие действия:

• создание набора данных. Для этого предназначена кнопка ;
• редактирование набора данных. Данные переменных видимости, характеризует которые значок слева от названия, можно изменять с помощью переключателей Visible (Видимый) и Invisible (Невидимый). Для переменных замещения пикселов (значок ) с помощью команды Browse... (Поместить. ..) указывается необходимый файл. Для текстовых переменных строка вводится в соответствующее текстовое поле;
• сохранение набора данных. Созданный набор сохраняет кнопка ;
• переименование набора данных. Введение нового имени в соответствующее текстовое поле вкладки Data Set (Набор данных);
• удаление набора данных. Для этого служит кнопка ;
• перемещение по набору данных. Если в документе несколько наборов, можно использовать кнопки .

 

Рис. 9.11. Диалоговое окно команды Image > Variables > Data Set...

Команда Image > Preview Document (Изображение > Просмотр документа) позволяет посмотреть анимированное изображение, анимированные кнопки или внешний вид в целом.

Подменю Master Palette (Главная палитра) содержит команды работы с заказной палитрой, которая используется для пакетной обработки изображений. Команда Image > Master Palette > Add To Master Palette (Изображение > Главная палитра > Добавить в главную палитру) добавляет в главную палитру всю информацию о цвете текущего изображения.

Команда Image > Master Palette > Build Master Palette (Изображение > Главная палитра > Сделать главную палитру) создает новую таблицу поиска цвета на основе информации, собранной при помощи предыдущей команды. Команда Image » Master Palette > Clear Master Palette (Изображение > Главная палитра > Очистить главную палитру) позволяет не включать цвета из предыдущих изображений в новую палитру.

Команда Image > Master Palette > Save Master Palette (Изображение > Главная палитра > Сохранить главную палитру) предназначена для того, чтобы назвать файл главной палитры и выбрать место его размещения. По умолчанию, такой файл имеет расширение *.act (Adobe Color Table).

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

a	б

Рис. 9.12. Внешний вид меню Layer для PhotoShop (a) и ImageReady (б)

4. Меню Layer (Слой)

Команда Layer > Layer Options... (Слой > Настройки слоя...) ImageReady по принципу действия напоминает команду Layer > Layer Properties... (Слой > Свойства слоя...) PhotoShop (рис. 9.13, а и б),

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

Рис. 9.13, а. Диалоговое окно команды Layer > Layer Properties... из PhotoShop

Рис. 9.13,б. Диалоговое окно команды Layer > Layer Options... из ImageReady

Команда Layer > New Layer Based Image Map Area (Слой > Новый слой, основанный на карте-изображении) позволяет создать слой на основе карты-изображения. Подробнее работа этой команды рассмотрена ниже (см. Карты-изображения в ImageReady).

Команда Layer > Match... (Слой > Подогнать...) позволяет применить текущие настройки слоя к слоям, входящим в другие элементы (рис. 9.14).

Рис. 9.14. Диалоговое окно команды Layer > Match...

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

В группу команд монтажа, выравнивания и распределения внесена команда Layer > Set Layer Position... (Слой > Установить расположение слоя...), диалоговое окно которой показано на рис. 9.15.

Эта команда определяет смещение слоя по горизонтали и вертикали.

Команда Layer > Lock All Layers In Set... (Слой > Закрепить все слои в наборе...) фиксирует следующие параметры в наборе слоев: прозрачность, изображение, расположение или все параметры сразу (рис. 9.16).

Рис. 9.15. Диалоговое окно команды Layer > Set Layer Position...

Рис. 9.16. Диалоговое окно команды Layer > Lock All Layers In Set...

Рис. 9.17. Внешний вид меню Slices (Нарезка)

5. Меню Slices (Нарезка)

Фрагменты нарезки принадлежат к одному из трех типов:

• созданные автоматически;
• созданные пользователем;
• созданные на основе слоя.

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

Команда Slices > Create Slices from Guides (Нарезка > Разрезать по направляющим) создает фрагменты нарезки из фрагментов изображения, заключенных между направляющими.

ВНИМАНИЕ. При разрезании по направляющим все уже существующие фрагменты удаляются.

Команда Slices > Duplicate Slice (Нарезка > Повторить фрагмент нарезки) делает копию фрагмента нарезки.

Команда Slices > Combine Slices (Нарезка > Объединить фрагменты нарезки) соединяет несколько фрагментов в один. Объединенный фрагмент становится фрагментом пользовательского типа, хотя входить в него может и созданный автоматически.

ВНИМАНИЕ. Нельзя объединить фрагменты нарезки, основанные на слое.

Команда Slices > Divide Slice... ( Нарезка > Разделить фрагменты нарезки...) делит каждый фрагмент нарезки на заданное количество частей, каждая из которых в свою очередь становится полноценным фрагментом (рис. 9.18).

Рис. 9.18. Диалоговое окно команды Slices > Divide Slice...

В этом диалоговом окне можно задать количество частей, на которое нужно разделить фрагмент, или размер нового фрагмента в пикселах. Делить можно и по горизонтали, и по вертикали.

Команды Slices > Delete Slice (Нарезка > Удалить фрагмент нарезки) и Slices > Delete All (Нарезка > Удалить все) предназначены для удаления соответствующих элементов.

Группу команд для связывания и разъединения образуют Slices > Link Slices (Нарезка > Связать фрагменты нарезки), Slices > Unlink Slices (Нарезка > Разъединить фрагменты нарезки), Slices > Unlink Set (Нарезка > Разъединить набор) и Slices > Unlink All (Нарезка > Разъединить все).

Команда Slices > Promote to User Slices (Нарезка > Перевести в пользовательские фрагменты нарезки) предназначена для того, чтобы присвоить фрагментам, созданным автоматически или основанных на слое, статус созданных пользователем. Это необходимо для выполнения команд из следующих подменю: Slices > Arrange (Нарезка > Монтаж), Slices > Align (Нарезка > Выравнивание) и Slices > Distribute (Нарезка > Распределение).

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

Команда Slices > Save Slice Selection... (Нарезка > Сохранить выделение фрагмента нарезки...) позволяет назвать выделенные фрагменты. Подменю Slices > Load Slice Selection (Нарезка > Загрузить выделение фрагмента нарезки) и Slices > Delete Slice Selection (Нарезка > Удалить выделение фрагмента нарезки) соответственно загружают или удаляют сохраненное ранее выделение.

6. Меню Select (Выделение)

а

б

Рис. 9.19. Внешний вид меню Select для PhotoShop (а) и ImageReady (б)

Команды Select > Create Selection from Slices (Выделение > Создать выделение из фрагментов нарезки) и Select > Create Slice from Selection (Выделение > Создать фрагмент нарезки из выделения) используются для преобразования выделения в фрагмент нарезки и наоборот.

Команда Select > Create Image Map from Selection... (Выделение > Создать карту-изображение из выделения) позволяет создать карту-изображение на основе выделенной области (рис. 9.20).

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

Рис. 9.20. Диалоговое окно команды Select > Create Image Map from Selection...

Подменю Select > Delete Channel (Выделение > Удалить канал) позволяет удалить ненужный канал, имя которого выбирается из списка.

7. Меню Filter (Фильтр).

а

б

Рис. 9.21. Внешний вид меню Filter для PhotoShop (а) и ImageReady (б)

Команда Filter > Last Filter (Фильтр > Последний фильтр) в ImageReady разделилась на две: Filter > Apply Last Filter (Фильтр > Применить последний фильтр), обеспечивающую повторение предыдущего фильтра с теми же параметрами, и Filter > Last Filter... (Фильтр > Последний фильтр...), вызывающую повторно диалоговое окно последнего фильтра.

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

В группе Blur (Размытие): Gaussian Blur... (Размытие по Гауссу...), Radial Blur... (Радиальное размытие...) и Smart Blur... (Интеллектуальное размытие...).

В группе Pixelate (Оформление): Color Halftone... (Цветовые полутона...), Crystallize... (Кристаллизация...), Mezzotint... (Меццо-тинто...) и Pointillize... (Пуантилизм...).

В группе Sharpen (Резкость): Unsharp Mask... (Контурная резкость...).... В группе Stylize (Стилизация): Extrude... (Тиснение...), Glowing Edges... (Свечение краев...), Solarize... (Соляризация...), Tiles... (Фрагменты...), Wind... (Ветер...).

В группе Other (Другие): Offset... (Смещение...).

Добавился фильтр Filter > Other > Tile Maker... (Фильтр > Другие > Фрагменти-рование...).

Рис. 9.22. Диалоговое окно фильтра Filter > Other > Tile Maker...

а	б

Рис. 9.23. Результат работы фильтра Tile Maker...: использован переключатель Blend Edges, значение Width взято равным 20%, флажок Resize Tile to Fill Image установлен (a); использован переключатель Kaleidoscoge Tile (б)

Фильтр Tile Maker (рис. 9.22 и 9.23) облегчает подготовку фонового рисунка для web-страниц. Он позволяет стереть границы рисунка для создания бесшовной текстуры или применить калейдоскопический эффект для создания абстрактного фона.

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

1. Выделить на рисунке область, из которой предполагается сделать фоновый рисунок.
2. Выполнить команду Filter > Other > Tile Maker... (Фильтр > Другие > Фрагментирование...).
3. Выбрать Blend Edges (Стереть границы), если нужно сделать из выделения фрагмент фона. В текстовое поле Width (Ширина) требуется ввести ширину стираемой границы в процентах (оптимальным является значение в диапазоне от 5% до 15%). Флажок Resize Tile to Fill Image (Увеличить фрагмент до размера изображения) снимается, если нужно создать фрагмент меньшего размера, чем оригинальное выделение.
4. Выбрать Kaleidoscope Tile (Калейдоскопический эффект), если нужно создать абстрактный рисунок. В этом случае выделение сместится, повторится по горизонтали и вертикали и границы растушуются.

8. Меню View (Вид).

а

б

Рис. 9.24. Внешний вид меню View для PhotoShop (а) и ImageReady (б)

Подменю View > Preview (Вид > Предварительный просмотр) управляет отображением цветов и позволяет увидеть, как изображение будет выглядеть в ситуациях выбора следующих режимов (рис. 9.24): Browser Dither (Сглаживание в браузере), Uncompensated Color (Некомпенсированные цвета), Standard Windows Color (Стандартные цвета Windows), Standard Macintosh Color (Стандартные цвета Macintosh) и Use Embedded Color Profile (Использовать внедренный цветовой профиль). При переключении режима просмотра само изображение не изменяется.

Команда View > Resize Window to Fit (Вид > Изменить размер окна по изображению) изменяет размер окна, чтобы оно соответствовало размеру изображения.

Команды подменю View > Show (Вид > Показать), помимо основных дополнительных элементов, таких как фрагменты нарезки и границы выделения, отображают специфические дополнительные элементы: карты-изображения, границы текстовых блоков, базовые линии текста и выделение в тексте.

Подменю View > Snap To (Вид > Привязать к), в отличие от подобного подменю PhotoShop, позволяет выполнить привязку только к направляющим и фрагментам нарезки.

Команда View > Create Guides... (Вид > Создать направляющие...) автоматически создает нужное количество направляющих (рис. 9.25).

Рис. 9.25. Диалоговое окно команды View > Create Guides...

На вкладке Horizontal Guides (Горизонтальные направляющие) задается либо количество направляющих, либо расстояние между направляющими в пикселах, либо количество пикселов сверху (в этом случае создается одна направляющая). Те же параметры можно задать для вертикальных направляющих на вкладке Vertical Guides (Вертикальные направляющие). При необходимости используется флажок Clear Existing Guides (Удалить существующие направляющие).

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

Работой с цветом в ImageReady управляет панель цвета. Необходимо обратить внимание на некоторые отличия этой панели от аналогичной панели PhotoShop (рис. 9.26). Меню панели цвета появляется при нажатии на кнопку

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

Следует отметить также различие команд Color Picker (Определение цвета).

а	б
в	г

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

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

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

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

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

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

Меню панели оптимизации (рис. 9.28) появляется при нажатии на кнопку .

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

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

Команды Show Options (Показать параметры) и Hide Options (Спрятать параметры) управляют отображением на панели дополнительных параметров форматов.

Команды Save (Delete) Settings (Сохранить (Удалить) настройки) соответственно сохраняют или удаляют набор настроек, заданный пользователем.

Команды Repopulate Views (Перемещение видов) и Optimize to File Size... (Оптимизировать размер файла...) совпадают с командами Adobe PhotoShop и подробно рассмотрены в соответствующем уроке.

Команда Create Droplet... (Создать дроплет...) будет подробно рассмотрена ниже (см. раздел «Автоматическая оптимизация настроек» данного урока).

Если вы не хотите тратить время на обновление изображения после каждого изменения какого-либо параметра, нужно снять флажок команды Auto Regenerate (Автообновление). Команда Regenerate (Обновить) используется при снятом флажке команды Auto Regenerate (Автообновление) или после принудительного прерывания оптимизации.

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

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

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

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

1. Меню формата файла и значение параметра Lossy (Потери). Сжатие с потерями сокращает размер файла за счет избирательного удаления данных. Оптимальным значением является 5-10, что приводит к уменьшению размера файла на 10-20%. Параметр становится недоступным при использовании флажка Interlaced (Чересстрочная загрузка) или алгоритмов сглаживания Noise (Шум) и Pattern (Узор). Для оптимизации степени потерь можно использовать альфа-канал. В этом случае белые области маски дают высокое качество, а черные — низкое. Для создания нового альфа-канала, основанного на текущем выделении, применяется команда Select > Save Selection... (Выделение > Сохранить выделение...) Кнопка в правом конце строки открывает диалоговое окно Modify Lossiness Setting (Изменить настройку потерь), которое представлено на рис. 9.30. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить уровень качества. Высокий уровень качества изображения (минимальные потери) определяется величиной Minimum (Минимум). Для его установки нужно выполнить одно из трех следующих действий: перетащить левый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкий уровень качества (максимальные потери) определяется величиной Maximum (Максимум), которой соответствует правый (черный) бегунок.

   

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

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

   

   Рис. 9.31. Внешний вид диалогового окна Modify Color Reduction

   

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

4. Флажок Transparency (Прозрачность) и значение параметра Matte (Кайма). Если изображение содержит прозрачные области, можно либо сохранить их либо залить определенным цветом. Установленный флажок Transparency (Прозрачность) сохраняет полностью прозрачные пикселы как прозрачные, а полупрозрачные заливает указанным цветом или делает полностью прозрачными (непрозрачными) в зависимости от выбранного значения параметра Matte (Кайма). Сброшенный флажок Transparency (Прозрачность) заливает полностью прозрачные и полупрозрачные пикселы указанным цветом.
5. Меню алгоритма сглаживания прозрачности и степень сглаживания. Сглаживание прозрачности проявляется на границе прозрачных и непрозрачных пикселов. Степень сглаживания указывается для алгоритма Diffusion (Диффузия).
6. Флажок Interlaced (Чересстрочная загрузка) и параметр Web Snap (Цвета для Web). Чересстрочная загрузка изображения в браузере позволяет оценить необходимость его полной загрузки до окончания процесса. Чтобы автоматически заменить используемые в изображении цвета на их web-эквиваленты, нужно перетащить бегунок Web Snap (Цвета для Web) или ввести численное значение. Эта операция уточнит допустимое количество заменяемых цветов. Чем выше значение этого параметра, тем больше цветов подлежит замене.
7. Флажок Use Unified Color Table (Использовать унифицированную таблицу замены цвета) используется при необходимости унификации всех состояний анимированных кнопок.

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

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

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

   

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

2. Меню степени сжатия и значение параметра качества. Чем выше степень сжатия, тем меньше размер файла. Основная задача заключается в нахождении наилучшего соотношения размер/качество опытным путем. Для оптимизации качества можно использовать альфа-канал. В этом случае белые области маски определяют области изображения с высоким качеством, черные — с низким. Кнопка в правом конце строки открывает диалоговое окно Modify Quality Setting (Изменить настройки качества), которое представлено на рис. 9.33. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить качество. Высокое качество определяется величиной Maximum (Максимум). Для ее установки нужно выполнить одно из трех следующих действий: перетащить правый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкая степень качества определяется величиной Minimum (Минимум), которой соответствует левый (черный) бегунок.
3. Флажок Progressive (Прогрессивный) и значение параметра Blur (Размытие). Флажок Progressive (Прогрессивный) устанавливается при необходимости сохранить изображение, которое будет постепенно проявляться при загрузке. При использовании размытия размер файла уменьшается путем удаления деталей изображения.
4. Флажок ICC Profile (Профиль ICC) и значение параметра Matte (Кайма). Установка флажка ICC Profile (Профиль ICC) позволяет использовать цветовой профиль. Параметр Matte (Кайма) позволяет имитировать прозрачность.
5. Флажок Preserve EXIF Metadata (Сохранить информацию о файле) используется при необходимости сохранения дополнительной информации.

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

а

б

в

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

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

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

Автоматическая оптимизация настроек в программе ImageReady выполняется с помощью дроплета.

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

Дроплет создается следующим образом:

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

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

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

1. Щелчок на значке дроплета на панели оптимизации. В результате появляется диалоговое окно Save optimized settings as droplet (Сохранить оптимизированные настройки как дроплет) (рис. 9.35).

   

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

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

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

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

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

В этом уроке мы познакомились с основными отличиями Adobe ImageReady от Adobe PhotoShop. Мы подробно рассмотрели особенности подготовки изображений и их оптимизации для использования во Всемирной паутине.

[ Назад | Содержание | Дальше ]