Петр СЕМИЛЕТОВ (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/
|