Бесплатный софт, вэб-сервисы, ресурсы по раскрутке и заработку, свежие номера журнала "Internet Zone". Посетите нас: http://www.izcity.com/ 

Adobe ImageReady

Михаил БОРИСОВ (borisovv@yahoo.com)

Компания Adobe известна, прежде всего, как поставщик первоклассных пакетов для создания и обработки изображений. Все, кто профессионально (да и не только) занимается допечатными издательскими процессами, будь то Мас или РС, пользуется ее продуктами - чаще Photoshop'ом, реже Illustrator'ом. Однако недавно компания заявила о себе на другом поприще, она разработала редактор для создания Web-графики.

 

В принципе, новая сфера деятельности полностью согласуется со стратегией Adobe, поэтому разработчикам потребовалось внести в существующие программы некоторые небольшие дополнения. Собственно процесс создания иллюстраций для полиграфии и для размещения в Интернете различается незначительно: с технической стороны это касается только разрешения (для качественной полиграфии это 300 dpi, для Интернета - 72 dpi) и задания специальных настроек при сохранении файла в любом из принятых в Сети форматов - GIF или JPEG.

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

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

Как и следовало ожидать, интерфейс ImageReady абсолютно идентичен Photoshop. Те же удобные палитры (даже History и Actions), настройки, продуманные контекстные подменю - в общем, как говорится, "а я милого узнаю по походке... ". Собственно, в этом ничего удивительного нет, ведь ImageReady - это все тот же Photoshop с некоторыми добавлениями для Web. Из Photoshop сюда перекочевали: все инструменты для создания изображения, принцип работы со слоями, возможности регулировки прозрачности, динамические эффекты, корректирующие слои. Более того, вся информация о ссылках, картах изображений, анимации сохраняется в универсальном формате PSD. Согласитесь, это очень удобно, поскольку такой файл можно открыть в Photoshop и изменить изображение, при этом Web-ориентированная информация не изменится (ее отредактируете в ImageReady). Причем все изменения, сделанные в Photoshop, абсолютно прозрачны для ImageReady (и наоборот, если это графическая информация), а переключение между программами осуществляется простым выбором команды Jump to.

Удивительно, но факт - в ImageReady существуют такие возможности по созданию изображений, которых не найти в Photoshop! Хотя, в первую очередь, именно последний должен оснащаться самыми последними "наворотами"... Но, скорее всего, после обкатки в ImageReady они успешно перекочуют к Photoshop 6. В качестве примера вспомним динамический эффект по наложению градиентной заливки или же повторяющегося рисунка (pattern) на определенный слой. При этом вы в любой момент сможете отредактировать параметры этой заливки так, как вам необходимо (сейчас приходится делать все заново). Кроме того, поскольку начальная и конечная точки градиента запоминаются, каждый раз при редактировании не нужно их прикидывать "на глазок". Весьма удачно (хотя, конечно, это более подходит для ImageReady) включение в программу палитры Styles. Тут собрана коллекция основных приемов оформления кнопок (кстати, довольно хороших), но, в отличие от Actions, это только динамические эффекты (drop/inner shadow, inner/outer bevel, bevel and emboss, color fill, gradient/pattern). Несмотря на возможности, предоставляемые программой, полезно сохранять собственные приемы.

Ну а теперь перейдем непосредственно к возможностям программы. Начнем с создания динамических кнопок, то есть изменяющихся в зависимости от местонахождения курсора. Кнопки могут реагировать на курсор по-разному: курсор расположен поверх кнопки (событие OnMouseIn), курсор задерживается поверх нее (OnMouseOver), во время нажатия кнопки мышки (OnMouseDown), после нажатия (OnMouseClick), при отпускании кнопки мышки (OnMouseUp), при выходе мышки за пределы кнопки (OnMouseOut), задается собственный отклик.

Например, вы хотите, чтобы при нажатии на кнопку изменялся ее цвет. Для этого прежде создайте саму кнопку. Если вы работали с Photoshop, то у вас не возникнет никаких проблем. А в ImageReady к тому же существует инструмент Rounded Rectangle, он устанавливает различные величины скругления. Создайте кнопку на новом слое. Затем откройте палитру Rollovers - в окне Normal появится ее мини-изображение. Чтобы создать новое состояние, щелкните на знакомой иконке с заворачивающимся листиком. По умолчанию там появляется состояние Over, измените его на Down. Теперь оформите кнопку так, какой бы вы ее хотели видеть во время нажатия мышкой (например, измените ее цвет). Для состояния Down будет зафиксировано получившееся изображение. Для наращивания функциональности можно добавлять дополнительные типы событий, причем все они будут отражаться в этой же панели. Если нужно внести изменения, выберите нужное состояние и отредактируйте изображение.

Во время работы с различными состояниями обратите внимание на появившуюся по периметру изображения синюю рамку - это так называемый slice, или просто фрагмент. Она указывает область изображения, которая станет выполнять роль ссылки. Кроме того, по ее размерам создаются подставляемые рисунки. Здесь существует определенная закономерность: чем меньше площадь изображения, тем, соответственно, меньше и размер файла, а значит, и время его загрузки из Сети сокращается. Поэтому желательно ограничить размеры изображения размерами самой кнопки. Как этого добиться самым простым способом? Выделите занимаемую кнопкой область изображения (перейдите на слой с кнопкой и, нажав CTRL, щелкните на нем), выберите Slices/Create slice from selection. В этом случае формируется несколько фрагментов, причем один из них в точности соответствует размеру кнопки (пустые фрагменты игнорируются и файлы из них не создаются).

При работе со slice помните, они могут быть только прямоугольными, в противном случае, придется создавать так называемые активные зоны (hotlight). Чтобы их использовать, просто выделите нужную часть изображения, перейдите в палитру слоев, выберите Create New Layer (создать новый слой) и включите Use layer as Image Map. Из списка Shape выберите Polygon, укажите степень точности (Tolerance) и адрес ссылки на Web-ресурс.

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

Как видите, моделировать всякие динамические "штучки" в программе очень просто. Более того, ImageReady пригодится и при создании анимационных последовательностей. Принцип работы аналогичный: сначала создайте изображение для первого кадра, затем - следующий кадр, измените для него изображение. Так повторяйте до тех пор, пока не смоделируете всю последовательность анимации.

Для облегчения работы в программе существует несколько дополнительных функций. Во-первых, она сама в состоянии создавать промежуточные стадии между начальным и конечными кадрами и менять порядок проигрывания последовательности. Допустим, вы просто передвинули какое-то изображение, в этом случае просто выберите режим Tween и укажите, сколько вам необходимо для работы промежуточных кадров (этот параметр сказывается на плавности проигрывания ролика). Однако программа не всесильна: она рассчитает новые положения объектов, учтет их прозрачность и степень наложения динамического эффекта,- остальное придется выполнять самим. Поэтому при работе максимально пользуйтесь динамическими эффектами, в частности Color Fill и Gradient/Pattern.

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

Для получения готового результата PSD-файл сохраните в виде HTML (File/Save optimized). При этом фрагменты изображения (slices) размещаются в таблице в виде изображений-распорок с соответствующим HTML-кодом. Продумайте, в каком формате сохранять каждую часть изображения, поскольку от этого зависит размер вашего сайта.

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

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

Основные цвета - это цвета, присутствующие в автоматически генерируемой программой таблице цветов. Однако можно таблицу можно изменять. Таблица строится на основе анализа площади картинки, которую занимает каждый существующий в ней цвет (если выбран способ adaptive). Либо таблица корректируется с учетом того, как воспринимаются определенные цвета глазом человека (perceptual). Либо все цвета приводятся к стандартному набору (web, он гарантирует абсолютную идентичность воспроизведения цветов браузерами при использовании 8-битного цвета). Но чаще всего лучшие результаты дает selective. Во-первых, он учитывает, как цвет воспринимается глазом человека, тем не менее отдает предпочтение передаче без искажений тем цветам, которые занимают обширную площадь картинки, а во-вторых, старается использовать максимально цвета из Web-палитры. Если программа все-таки не совсем правильно определяет базовые цвета, вы всегда сможете открыть таблицу цветов (color table) и вручную подкорректировать ее.

Существует несколько способов подмешивания цветов: diffusion, pattern, noise. Обычно самый хороший результат дает diffusion, при использовании pattern получается достаточно четкая повторяющаяся структура. Noise поможет избежать появляющихся на границах областей с разными цветами "рубцов", однако при этом значительно "размазывает" их (что не всегда может подойти). Программа может не только автоматически генерировать цвета для создания dither, но и использовать задаваемые пользователем. Чтобы их переопределить, зайдите в Filter/Other/DitherBox.

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

Если же вам потребуется еще больше уменьшить размер файла, включите опцию потери качества (lossy), однако ею следует пользоваться осторожно, поскольку в GIF качество падает значительно более радикально, чем в JPEG.

Для сравнения эффекта с различными настройками, программа может отображать на экране одновременно до 4 вариантов изображения. Тут приводится информация об окончательном размере файла на диске, скорости его загрузки при различных скоростях модема и процентах компрессии. И напоследок замечание общего характера: не гонитесь за использованием разных режимов dither, помните, что иногда добавление нескольких цветов может нивелировать выгоду от его применения. Поэтому сначала поэкспериментируйте. Кроме того, при создании анимации нужно учитывать все цвета, используемые во всех файлах и, соответственно, увеличивать их число.

Алгоритм сжатия JPEG хорошо работает с многоцветными изображениями, в которых нет четких границ цвета (в частности, с фотографиями). Тут можно воспользоваться как существующими в программе предустановками (4 степени сжатия), так и подобрать компрессию более точно, с шагом в 1 на диапазоне от 0 до 100. Дополнительное сжатие не проблема получить, размывая изображение (blur), однако эффект от его применения довольно незначителен.

Кроме GIF и JPEG, программа поддерживает "новомодный" PNG - 8-битный и 24-битный. Однако помните, что, в отличие от двух предыдущих форматов, не все браузеры его поддерживают, поэтому без особой необходимости его не следует использовать. Алгоритм сжатия PNG-8 несколько более совершенный, чем GIF, и применяется при использовании большого количества цветов, экономия в этом случае - 10-30 %. Однако GIF оказывается более эффективным, если применяется немного цветов. Настройки PNG-8 аналогичны GIF, за исключением того, что сохранение происходит с потерями качества. Так же здесь можно указывать, какой цвет будет прозрачным, и на какой он будет изменен браузером (полезно при размещении картинки на странице с однородным фоном). PNG-24 аналогичен PNG 8, однако позволяет отображать более 256 цветов и к тому же поддерживает до 256 уровней прозрачности. Плата за компрессию с сохранением качества - размер файлов: они обычно больше, чем у JPEG. Любые настройки по компрессии можно сохранить в ImageReady, чтобы впоследствии ими пользоваться вновь.

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

Источник: http://www.mycomp.com.ua/

 


Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.