|
Петр СЕМИЛЕТОВ (roxton@chat.ru)
С некоторых пор специалист, работающий с графикой для
Web'а, отвечая на вопрос: "Какую программу вы используете чаще всего?",
наряду с Photoshop'ом и Flash'ем наверняка назовет ImageReady.
 Что же это
за птица, идущая в одном пакете со знаменитым Photoshop'ом, и так ли широк
размах ее крыльев, как велик размер ее исполняемого файла? Начнем по
порядку. Внешне ImageReady очень похож на своего старшего брата -
Photoshop - и даже дублирует большую часть его функций.
Так, например,
реализована работа со слоями и эффектами слоев, однако нет поддержки
каналов. Можно использовать стандартные (практически все те же, что и
встроенные в Photoshop) фильтры и Photoshop-плагины сторонних
разработчиков. Правда, механизм Preview для эффектов несколько
архаичен -результат отображается не на оригинальном изображении, а в
миниатюрном окошке рядом с параметрами самого эффекта.
Исключение
составляют некоторые вычурные плагины вроде пакета Kai's Power
Tools 3, чей интерфейс всегда выгодно отличался от конкурирующих
продуктов. Что до встроенных фильтров, то следует сделать оговорку
- небольшая часть встроенных в Photoshop эффектов недоступна для
ImageReady.
Инструментальная панель также аналогична панели
старшего брата: те же инструменты для выделения областей и
рисования линий, кисти, осветлители/затемнители,
пипетка, размыватель, ластик, лупа, средства
для заливки цветом, ввода текста и многое другое. Вы
спрашиваете, зачем это нужно, если все это есть в Photoshop'е? А затем,
что в нем мы не может работать с анимацией.
 ImageReady
был изначально ориентирован на графику для Web, а точнее - на форматы
JPEG и GIF. Прежде чем перейти к ним, добавлю, что герой
нашей статьи умеет создавать так называемые слайсы (slices). Слайс
- это фрагмент изображения, который вырезается из "общей картины", чтобы
потом занять свое место в написанной на HTML таблице, с помощью которой
картинка "собирается" по кускам в свой первозданный вид. Обратите внимание
на некоторые сайты - там используются такие штуки. В качестве
классического примера использования слайсов отсылаю вас на страничку
www.kasperskylab.ru. Посмотрите на верхнее изображение - оно
состоит из слайсов, размещенных в таблице.
Разбив картинку на слайсы
при помощи Slice Tool и окончательно наведя порядок с помощью
многочисленных функций из меню Slices, вам остается лишь выбрать пункт
меню File > Save Optimized [As] и задать имя выходного
HTML-файла. Каждый слайс будет сохранен в отдельном файле,
связанном с ячейкой в сгенерированной продуктом таблице.
Другое
средство - так называемая палитра Rollover, чья закладка находится
по умолчанию в том же окошке, что и Animation (об этом речь пойдет чуть
позже) - предназначена для создания изображений с изменяющимся состоянием
(например, кнопок). Сюжет таков - либо слои, либо кадры
(frames) анимации можно ставить в соответствие состояниям - кнопка
нормальная, нажатая, момент нажатия и так далее. Затем, при выборе функции
Save Optimized, каждое положение кнопки будет сохранено в
отдельном файле. Лично мне по-прежнему удобнее делать кнопки по старинке,
в Photoshop'е, поскольку, на мой взгляд, концепция создания Rollevers в
ImageReady не отягощена эргономичностью.
 Теперь мы
вплотную подобрались к GIF-анимации. ImageReady предоставляет для
этого множество полезных средств. Первое - палитра Animation, в
которой расположен ряд уменьшенных изображений кадров. Стоит выбрать один
из них, и он появится в рабочем окне редактирования, где с ним можно будет
делать практически то же, что и с обычным изображением - редактировать,
накладывать эффекты... Каждый кадр представляется в виде отдельного слоя,
будучи доступен из палитры Layers. Разумеется, для каждого
кадра-слоя могут быть использованы layer effects.
К сожалению,
создание динамических эффектов в продукте не предусмотрено. Например, для
простейшего перемещения надписи слева направо вам придется в каждом кадре
вручную перетаскивать эту надпись. Поэтому для работы с динамическими
эффектами в GIF-анимации я советую воспользоваться такими
программами как Animation Shop (идет в комплекте Paint Shop
Pro) или Ulead GIF Animator.
Создание image maps в
ImageReady достойно наивысшей оценки. Что может быть проще - в палитре
Layers создаете слой, затем в его опциях (либо в одноименной палитре
Layer Options) включаете опцию [Use Layer As] Image Map, там
же в Shape выбираете тип области, которая будет реагировать на
клик, и вводите соответствующий URL. Затем - все то же волшебное
Save Optimized с сохранением как картинки, так и HTML-кода.
Помните, что если область имеет сложные границы, то в Shape
ставится polygon, для прямоугольной области - rectangle
и circle - для окружности.
Слои, в отличие от
Photophop'а, сопровождаются еще и стилями. Коротко говоря, стиль -
это пресет эффектов для слоя. Кроме того, что стиль в ImageReady является
несущей конструкцией для графических элементов, он и сам может быть
графическим элементом - существует эффект градиентной либо обычной заливки
слоя.
 Палитра
Styles служит для манипуляций со стилями и содержит много пресетов.
Достаточно проверить действие нескольких, чтобы убедиться, насколько
просто и быстро с помощью стилей можно создавать изображения - например,
симпатичных кнопок.
Функции оптимизации web-графики составляют одну из
основ продукта. В этом плане он дает фору любым другим оптимизаторам,
таким как JPEG Optimizer и пр. Для формата GIF - это свободное
манипулирование с палитрами. В палитре Optimize вы можете задавать
любое количество цветов до 256-ти, а также тип алгоритма dither'а
(pattern, diffusion, noise) для сглаживания
конвертированных из TrueColor в какие-нибудь два цвета изображений. Для
JPEG - выбор степени сжатия, параметров dither'а, размытия и некоторые
другие опции. Кроме того, для любого формата доступна функция Optimize
To File Size, которая "сжимает" файл до указанного в килобайтах
размера.
Поддерживаются также форматы PNG-8 и PNG-24, при
этом первый похож на GIF, но иногда дает меньший размер файла, а
второй подобен JPEG, но реализует сжатие без потерь, поэтому файлы в этом
формате получаются больше, чем в JPEG. Для сравнения рассмотрим
пример. Имеется фото вашего покорного слуги (563x421x24) в формате
BMP, размером 696 Кб.
Оптимизируем, получаем:
GIF 256
цветов, dither algorithm = pattern, 149 Кб.
PNG-8 256 цветов,
dither algorithm = pattern, 153 Кб.
PNG-24, non-interlaced, 396
Кб
JPEG, качество сжатия = 100, прогрессивный метод, 190 Кб
В
двух первых случаях субъективных различий нет, но по сравнению с
оригиналом - как дешевая газета с дорогим альбомом иллюстраций. JPEG и
PNG-24 выглядят буквально как настоящий оригинал.
А вот черно-белое
изображение коровы (1328x768x24) размером 2989 Кб в формате BMP.
Применим к нему те же методы оптимизации и получим:
JPEG,
качество сжатия = 100, прогрессивный метод, 129 Кб
GIF 256
цветов, dither algorithm = pattern, palette = Web, 16.3 Кб.
PNG-8
256 цветов, dither algorithm = pattern, 19.4 Кб.
PNG-24,
non-interlaced, 30.2 Кб.
Цифры говорят сами за себя - палитровые
форматы хороши для рисунков с ограниченным количеством цветов, а JPEG
и PNG - для полноцветных фотографий.
Чтобы протестировать
web-графику, достаточно вызвать функцию File > Preview In и
выбрать нужный браузер. А для вызова Internet Exploler'а существует даже
специальная комбинация - Ctrl+Alt+P.
Нельзя в коротком обзоре
описать все возможности такого "тяжеловеса" как ImageReady. Мы
акцентировали внимание лишь на его применимых к Web-графике возможностях,
а ведь есть и другие, такие как рисование, работа с текстом, выделение
областей... Вероятно, для этого лучше вначале подружиться с Photophop'ом -
тогда ImageReady будет восприниматься как естественное продолжение оного.
Между прочим, интеграция между этими продуктами настолько велика, что в
каждом есть пункт меню Jump To <имя собрата>. При этом в
"собрате" откроется текущий редактируемый файл.
ImageReady ни в коей
мере не может заменить Photoshop, но слаженная робота тандема этих двух
продуктов намного повышает эффективность создания графики для Web,
особенно в тех случаях, когда важна быстрота, оперативность выполнения
заказа.
Источник: http://www.mycomp.com.ua/
|
