Интерфейс ImageReady
Главное окно ImageReady (рис. 11.4) в первый момент легко перепутать с Photoshop, настолько похожи они внешне: та же панель инструментов, знакомые палитры. Как мы уже отмечали, такое сходство не случайно. Более внимательный взгляд отметит и множество особенностей. В первую очередь это несколько специальных инструментов на панели инструментов (рис. 11.5).
- Инструмент (Прямоугольное выделение со скругленными углами) предназначен для создания выделенных областей в форме прямоугольника со скругленными углами. Палитра свойств (Параметры) для этого инструмента содержит поле (Радиус), в котором задается радиус скругления в пикселах.
- Инструменты (Прямоугольная карта ссылок), (Круглая карта ссылок), (Многоугольная карта ссылок) и (Выделение карты ссылок) служат для создания карт ссылок. Первые три используются для определения прямоугольных, круглых и многоугольных областей карты, а последний — для их выделения в документе.
Рис. 11.4. Главное окно ImageReady 3.0
- Инструмент Slice (Фрагмент) предназначен для разрезания изображений на прямоугольные фрагменты, a Select Slice (Выделение фрагмента) — для выделения таких фрагментов. Оба эти инструмента присутствуют и в Photoshop, но мы их до сих пор не рассматривали. Впрочем, в этом нет необходимости, поскольку разрезание изображений в обеих программах пакета реализовано одинаково.
Рис. 11.5. Палитра инструментов ImageReady. Обозначены только инструменты, отсутствующие в Photoshop
Кроме того, на панели инструментов имеются кнопки режимов:
- Toggle Slices Visibility (Переключение видимости фрагментов). Если кнопка нажата, то границы фрагментов, на которые разрезано изображение, видны на экране, в противном случае — нет (рис. 11.6). Переключателю на панели инструментов соответствует команда-переключатель Slices (Фрагменты), находящаяся в списке Show (Демонстрация) меню View (Вид).
Примечание
Если выбрать инструмент Slice (Фрагмент) или Select Slice (Выделение фрагментов), режим показа фрагментов включается автоматически.
- Toggle Image Maps Visibility (Переключение видимости карты ссылок). При нажатой кнопке ImageReady отображает границы областей карты ссылок. Переключателю на панели инструментов соответствует команда-переключатель Image Maps (Карты ссылок), находящаяся в списке Show (Демонстрация) меню View (Вид).
- Rollover Preview (Просмотр ролловеров). При нажатой кнопке, в режиме просмотра ролловеров, можно проверить их работу прямо в окне документа. Редактирование ролловеров в этом режиме невозможно.
- Preview in Default Browser (Просмотр в браузере по умолчанию). Нажатие кнопки открывает текущее изображение в браузере, принятом в системе по умолчанию. Это окончательный режим проверки карт ссылок, ролловеров и анимации. Только он обеспечивает полностью адекватное отображение этих элементов страницы. Изображение в браузере сопровождается дополнительной информацией о нем и текстом, необходимым для работы динамических элементов.
а
б
Рис. 11.6. Режимы отображения фрагментов Hide Slices (а) и Show Slices (б)
Редактор ImageReady имеет и несколько особых палитр:
- Optimize (Оптимизация). Содержит параметры оптимизации изображений для экспорта в выбранный формат (рис. 11.7). Вид оптимизированного изображения демонстрируется прямо в окне каждого документа ImageReady. В строке состояния окна документа указываются текущие параметры оптимизации или иная информация, которая выбирается в списке, открывающемся щелчком на треугольной стрелке. В этом же списке задается предполагаемая скорость модема, позволяющая оценить время загрузки изображения в браузере пользователя.
Color Table (Цветовая таблица). Показывает текущую палитру изображения, если задан режим оптимизации в индексированный формат (GIF или PNG-8). Она также имеет свой аналог в модуле Save For Web Photoshop и работа с ней тоже аналогична.
- Layers (Слои). Единственное отличие этой палитры от палитры Layers (Слои) в Photoshop
заключается в том, что в нижнем ряду кнопок есть стрелки перехода между слоями и добавления эффектов. Поскольку при создании анимации ее фазы размещаются на отдельных слоях, кнопки перехода к предыдущему или следующему слою используются для перемотки кадров (рис. 11.8).
Рис. 11.7. Палитра Optimize
Рис. 11.8. Палитра Layers программы ImageReady
а
б
Рис. 11.9. Палитра Layer Options/Effects в режимах Layer Options (а) и Effects (б)
Layer Options/Effects (Параметры слоя/Эффекты). Используется совместно с палитрой Layers (Слои) и позволяет задавать параметры слоя и ассоциированных с ним эффектов. Если в палитре Layers (Слои) выделена строка эффекта, то в палитре Layer Options/Effects (Параметры слоя/Эффекты) оказываются настройки этого эффекта. Если же выделен слой, то в этой палитре вы найдете параметры слоя (рис. 11.9).
Styles (Стили). Служит для сохранения набора эффектов, ассоциированных с текущим слоем. Чтобы воспроизвести сохраненный набор эффектов еще раз или применить его к другому слою, достаточно просто сделать двойной щелчок мышью на его пиктограмме в палитре. Сразу после установки программы в палитре находятся два десятка готовых стилей, созданных разработчиками (рис. 11.10).
Animation (Анимация). Содержит перечень всех кадров анимации и управляет их очередностью и просмотром.
Image Map (Карта ссылок). Используется для создания карт ссылок..
Slice (Фрагмент). Предназначена для установки параметров отдельных фрагментов, на которые изображение разрезано с помощью инструмента Slice (Фрагмент) или команды Divide Slice (Разделить фрагмент) меню Slices (Фрагменты).
Rollover (Ролловер). Хранит варианты изображения, демонстрируемого в браузере в зависимости от того, находится ли на нем курсор и нажата ли кнопка мыши.
Рис. 11.10. Палитра Styles с предопределенными стилями
Палитры Colors (Цвета), History (Протокол), Info (Инфо), Options (Параметры), Character (Символ), Paragraph (Абзац) и Actions (Операции) почти полностью идентичны одноименным палитрам Photoshop. Правда, палитра History (Протокол) в ImageReady несколько упрощена. В ней отсутствует возможность создания снимков (snapshots) и назначения исходного состояния для кисти History Brush (Кисть возврата), поскольку ImageReady не имеет такого инструмента.
На этом мы завершим краткое рассмотрение интерфейса ImageReady и его отличий от Photoshop и перейдем к примерам решения практических задач.
Оптимизация изображений
ImageReady предоставляет мощные и удобные средства оптимизации изображений. Как уже говорилось, оптимизация состоит в нахождении компромисса между компактностью файла и качеством изображения. Единственный критерий качества изображения — его внешний вид, который вы оцениваете "на глаз"
.
Оценка результата
Визуальная оценка качества оптимизированного изображения и сравнение разных вариантов оптимизации существенно упрощается благодаря удобной организации просмотра документа в ImageReady. Четыре вкладки, имеющиеся в окне каждого документа, задают следующие режимы просмотра:
- Original (Оригинал). Изображение в исходном виде.
- · Optimized (Оптимизированное). Вид изображения после оптимизации. Именно так оно и будет выглядеть в браузере.
- 2-Up (2 варианта). Одновременный просмотр оригинала и оптимизированного изображения. Впрочем, оба окна в области просмотра могут отображать оптимизированное изображение, но с различными параметрами оптимизации (рис. 11.11).
Рис. 11.11. Окно документа в режиме 2-Up
- 4-Up (4 варианта). В этом режиме область просмотра делится на четыре окна (рис. 11.12), в которых можно заказать демонстрацию оригинала и оптимизированного изображения с разными параметрами оптимизации. Такой режим удобно использовать для выбора наилучших параметров. Он позволяет визуально оценивать влияние сжатия или уменьшения палитры на качество изображения и его размер.
Таким образом, вам не нужно сохранять изображение в формате GIF или JPEG, а затем снова открывать, чтобы оценить результат оптимизации. В окнах документа ImageReady сразу показывает результат этих манипуляций. Вам не придется экспортировать изображение в выбранный формат, чтобы узнать, насколько удалось минимизировать размер файла. В строке состояния, также имеющейся в окне каждого документа, ImageReady показывает, каков будет размер файла, если сохранить изображение с заданными параметрами оптимизации.
Рис. 11.12. Окно документа в режиме 4-Uр
Внешний вид оптимизированного изображения и размер его файла рассчитываются программой динамически. Как только вы измените параметры оптимизации, она автоматически обновит вид оптимизированного изображения и размер его файла в строке состояния.
Кроме размера файла, в строке состояния отображается еще много полезных сведений. Какие именно это сведения, — определяете вы сами. Строка состояния имеет три информационных поля. Их содержимое задается вы бором в списке, открывающемся щелчком на треугольной стрелке в правой части каждого поля. В первом (левом) поле всегда приведен текущий масштаб отображения документа, и щелчок на треугольной стрелке в этом поде открывает список выбора масштаба. Во втором поле по умолчанию отображается время загрузки страницы при заданной скорости, а в третьем — размеры изображения до и после сжатия в указанном формате. Вы можете установить и иное содержание для этих информационных полей:
- Original/Optimized File Sizes (Начальный/Конечный размеры оптимизированного файла).
- Optimized Information (Информация об установках оптимизации).
- Image Dimensions (Размеры изображения). Значения размеров приводятся в пикселах.
- Watermark Strength (Яркость цифровой метки).
- Undo/Redo Status (Состояние Отмены/Повтора). Количество шагов отмены и повторения в буфере ImageReady.
- Original in Bytes (Оригинал в байтах). Точный размер исходного изображения в байтах.
- Optimized in Bytes (Оптимизированное в байтах). Точный размер оптимизированного файла в байтах.
- Optimized Savings (Выигрыш от оптимизации). Отношение размеров файлов исходного и оптимизированного изображения в процентах.
- Size/Download Time (Размер/Время загрузки). Выбранная скорость модема. Типичные скорости модемов: 14,4; 28,8; 56,6 Кбит/сек. Выбор скорости оказывает влияние на оценку времени загрузки изображения в браузер. В общем случае разумно ориентироваться на скорость 28,8 Кбит/сек.
Примечание
В режимах 2-Up (2 варианта) и 4-Up (4 варианта) параметры оптимизации, размер оптимизированного файла и время его загрузки указываются в каждом окне, а в строке состояния приведены параметры активного варианта. Если вы сочтете эту информацию лишней, отключите ее показ командой Hide Optimization Info (Спрятать информацию об оптимизации).
Сведения в информационных полях позволяют оценить, насколько успешно оптимизировано изображение. Если и после оптимизации время загрузки изображения в браузер слишком большое, подумайте об изменении его размеров и целесообразности размещения на Web-странице.