Статья ориентирована на пользователей 7 версии Фотошопа для Win9x, W2000, XP

Введение.

Сегодня многие серьёзные графические программы, в силу объёмов и многофункциональности, переходят к "пакетному" режиму существования. Это значит, что некоторые важные и сложные функции, ранее выполнявшиеся дополнительными программами, зачастую разрабатывавшимися сторонними разработчиками, начинают входить в стандартный комплект (пакет) основной программы. Пользователь может при установке программы выбрать необходимые компоненты в зависимости от своих индивидуальных потребностей. Adobe тоже не осталась в стороне от прогресса и снабдила своё детище небольшим, но очень полезным придатком - ImageReady. Эта "программа в программе" входит в стандартный пакет Фотошопа уже несколько версий программы, но, к сожалению, часть пользователей просто не знает об этом, а часть пребывает в абсолютном неведении относительно её возможностей и предназначения, счастливо заблуждаясь, считая, что использует Фотошоп максимально полно и эффективно. Вынужден огорчить, но без ImageReady вы теряете массу уникальных инструментов и перспектив, реализовать которые силами одного только Фотошопа просто нереально. С тех пор как программа перестала существовать автономно и стала частью Фотошопа, она несколько "поправилась" в плане своих функциональных возможностей, что естественно не могло не отразится на объёме этой статьи и, следовательно, на моём желании приступать к её написанию. Но, тем не менее, наступив на горло своей беззаботной песне, попрощавшись с девочками с известных вам сайтов и выполнив ряд других важнейших дел, я таки взялся за неё, ибо умолчать о такой необходимой в хозяйстве штуке было бы преступлением против человечества и... И вообще выше моих сил. Но, коль уж так сложилось, что описание всех многочисленных плюсов этого ценнейшего инструмента, практически выходит за границы человеческих возможностей, а данная статья не претендует на звание "Полного мануала", то большую часть "познания непознанного" я, как человек ленивый, взвалю на ваши хрупкие плечи. И, как говорит один мой знакомый джедай: ДА ПРЕБУДЕТ С ВАМИ СИЛА!

Предназначение.

У-упс, я сделал это эгейн... Дабы не отпугнуть робкого читателя, я несколько приврал. На самом деле ImageReady не единый инструмент, а скорее совокупность многих инструментов, объединённых под шапкой приложения, с целью облегчения работы по решению некоторых специфических задач. Задачи эти, в массе своей, связаны с созданием особых типов Web-графики. Например, особых "хитрых" фонов, gif-анимации или создания с помощью JavaScript управляющих элементов, реагирующих на указание мышью. "Фи" - скажете вы - "Я не делаю для Веба" и будете безусловно не правы. Помимо указанного, программа, в качестве составляющей, умеет при крайне незначительном изменении качества, существенно уменьшать объём изначального изображения. И это его основной, но далеко не единственный, плюс для того, кто не занят непосредственно Web-графикой. Проблема нехватки жизненного пространства: его всегда не хватает. Возможно вам попадались огромные изображения с хорошим качеством и до смешного маленьким объёмом? Это заслуга ImageReady и повод освоить его хотя бы на начальном уровне, благо "горячие" клавиши и интерфейсы обеих программ почти что идентичны.

Интерфейс ImageReady

Интерфейсы Фотошопа и ImageReady схожи как братья-близнецы и можно легко подумать, что вы находитесь в одном и том же приложении. Согласитесь, стандарты сильно облегчают жизнь. Если вы уже освоились в Фотошопе - это новое приложение не доставит особых трудностей. Конечно при ближайшем рассмотрении выявится наличие пары-тройки новых палитр (Animation, Rollovers - а кому сейчас легко), но общего ощущения это не испортит и мы можем легко перейти к следующему шагу.

Запуск ImageReady

Осуществляться сия процедура может несколькими путями.

1. Запуск непосредственно из рабочего каталога программы, исполняемого файла ImageReady.exe, если запуск самого Фотошопа не требуется.

2. Запуск из Фотошопа через меню File / Jump To / Adobe ImageReady.

3. Запуск из Фотошопа с помощью кнопки, расположенной в самом низу основной инструментальной панели.

Кнопка Перейти к (Jump To), расположенная в самом низу основной инструментальной панели.

4. Самый быстрый - при запущенном Фотошопе нажать Shift+Ctrl+M.

Остаётся добавить, что все эти пункты действуют и в обратном направлении, т.е. из ImageReady к Фотошопу.

Особенности взаимодействия ImageReady и Фотошопа

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

Некоторые уникальные возможности ImageReady

Учитывая ярковыраженную сетевую направленность приложения, нет ничего удивительного в том, что часть команд и параметров по умолчанию, изначально призваны облегчать работу по созданию именно Web-ресурсов. Это проявляется уже на стадии создания нового документа. Размеры документа в соответствующем окне уже содержат несколько общепринятых размеров для изготовления баннеров, этого жуткого порождения тёмной стороны глобальной паутины. Та же тенденция прослеживается и в других функциях программы, например, команда Фильтр / Другие / Создать плитку (Filter / Other / Tile Maker) позволит создать размытие по краям изображения, которое вы хотите использовать для плиточного фона Web-страницы, и без применения которой при заливке фона будут видны стыковые швы. Аналогов данной команде в Фотошопе нет, хотя альтернативных решений хватает, а её ценность, с точки зрения скорости загрузки страницы с подобным дизайном, весьма сомнительна.

Практическую ценность следующей уникальной функции пусть каждый определяет для себя сам, но то, что функция интересная и в определённых случаях позволяет сохранить массу времени и сил - спорить не приходится. Заключается она в автоматизированной разбивке изображения на части и создании кода HTML для последующей его сборки на странице. К плюсам этой методики можно отнести ускорение загрузки страницы и возможность сохранения разных фрагментов изображения в разных форматах, что очень экономит место при неоднородности изображения. В чём-то похожа на фотошоповский Crop (Кадрирование). Выполняется это так: Откройте первоначальное изображение в ImageReady. Включите линейку (Ctrl+R) и поместите с помощью команды Вид / Создать направляющие (View / Create Guides) направляющие по линиям будущего разреза. В отличие от Фотошопа, в ImageReady не предполагается создание очень уж сложных разметок и новые направляющие можно создать все сразу. Напомню, что редактирование направляющих осуществляется с помощью инструмента "Перемещение" (Move) или (V), курсор которого в этом режиме, при наведении на направляющую, приобретает специфический вид двунаправленной стрелки. Теперь с помощью команды Разбить / Разбить по направляющим (Slices / Create Slices From Guides) выполним означенную команду и сохраним полученное через Сохранить оптимизированное как (Save Optimized As) или (Shift+Ctrl+Alt+S), выбрав при этом режим Сохранить как HTML файл (Save HTML File). Таким несложным и быстрым способом мы получили непосредственно HTML-файл с нужным кодом и папочку "images" с исходящими, оптимизированными по цвету и объёму, фрагментами изображения. Исходный HTML-код можно просмотреть и изменить в стандартном броузере ОС семейства Windows - Internet Explorer, командой Вид / Просмотр HTML-кода. Нужна ли вам данная технология - решать вам, а мавр сделал своё грязное дело и проследовал к следующей остановке.

То, что вы видите ниже, не является ошибкой отображения страницы. Это пример того, что вы можете увидеть в своём броузере при нажатии на кнопку со значком IE, внизу основной инструментальной панели ImageReady, или (Ctrl+Alt+P), при открытом в приложении документе, которое, для данного примера, вы видите выше рамки.

 
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (e27_002.jpg) -->
<IMG SRC="img/e27_002.jpg" WIDTH=64 HEIGHT=31 ALT="">
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Это удобная возможность просмотра обрабатываемого изображения в броузере по умолчанию. Здесь выводится само изображение, сгенерированный HTML-код и данные по графическому файлу. Формат, размер, "вес" и прочая информация, своя для каждого графического формата. Например, для формата gif - это палитра, прозрачность и т.д., чего нет в формате jpg. Как легко можно увидеть, наше изображение, приведённое здесь, сохранено в формате jpeg, с размерами 243х30 px, занимает 3,697K места и имеет следующие установки: качество - 60%, прогрессивный и оптимизированный. Можете проверить. Исчерпывающая информация. Это неплохой инструмент для (назовём это так) оценки_будущего_ущерба_который_вы_собрались_причинить_своими_неразумными_действиями_глобальной_паутине, о как! Таким образом, вы получаете весь необходимый на данном этапе объём данных по изображению и попутно, без потери времени и дополнительных усилий, имеете возможность увидеть, как будет выглядеть ваша работа на странице. Позволяет просматривать анимацию.

Следующая наша остановка - создание анимации или, что более правильно, создание анимированных файлов в формате gif на основе использования слоёв psd, как базиса для промежуточных кадров (tweening). Этот способ одинаково хорош как для создания анимации, для автономной работы, так и для изготовления всевозможных анимированных баннеров, значков, аватаров и прочего сетевого мусора. Самостоятельных программ, аналогов этой возможности, полно, но зачем загромождать винт кучей недозревших программок, если можно использовать лучшее от лучших. Следует сказать, что с появлением технологии Flash-анимации, обладающей большей интерактивностью, значимость анимированных gif`ов существенно снизилась, но до полного их вытеснения с сетевого пространства, этой или другой технологией, ещё очень и очень далеко. Итак, начнём издалека:

Давным-давно, где-то, на замусоренных космическим хламом, задворках необьятной вселенной, жила-была некая конторка CompuServe, которая, в один из редких своих дней "озарения свыше", разродилась грандиозной идеей графического формата gif, включив в него возможность сохранения нескольких изображений в одном файле. Дальнейших подробностей сего колоссального технического скачка, история, к счастью, не сохранила, но плоды его, мы, любезнейшие, пожинаем и по сей день, открывая броузер и наблюдая бесчисленное количество всевозможной движущейся дряни. Отловим гадостный экземплярчик баннера и, превозмогая отвращение, рассмотрим его поближе. Так, крылья оторвём сразу, щупальца оставим на десерт. Что мы тут видим, уважаемые коллеги? Совершенно верно, типичный случай многослойного изображения, где каждый из слоёв воспроизводится последовательно, через определённые, назначенные "адским творцом", интервалы времени. Ну-с, господа, как люди милосердные, прикончим тварь и займёмся вивисекцией. Не терзайте себя понапрасну, помните: мы делаем это во имя науки и на благо человечества!

Кадры, требующиеся для создания нашего Франкенштейна, целесообразней делать в Фотошопе, а компилировать финальный результат в ImageReady. Приступим. Как "крутой баннермэйкер", ёшкин кот, не менее крутым соратникам, положив руку на пупок, авторитетно заявляю: объяснять, как делать кадры будущей анимации в Фотошопе, по указанным причинам, не буду. Не мне вас учить. Начнём сразу со второй стадии, подразумевая, что вы уже всё подготовили и имеете на руках многослойное изображение формата PSD с разными стадиями движения на отдельных слоях, расположенных в том порядке, как они будут идти в конечном виде. Перепрыгиваем (Shift+Ctrl+M) в ImageReady и на палитре Animation жмём стелочку, расположенную в её правом верхнем углу. Из появившегося меню палитры выбираем опцию "Сделать кадры из слоёв (Make Frames From Layers)" и получаем желаемое с предпросмотром в окне палитры. Обратите внимание на подписи внизу каждого кадра в предпросмотре палитры, там указывается интервал времени, в течение которого конкретный кадр будет отображаться. Если щёлкнуть по этим цифрам - появится небольшое меню в котором можно выбрать другое значение и, тем самым, замедлить или ускорить прокрутку анимации. Поэкспериментируйте с интервалами для каждого кадра и в сочетании с видеорядом, вы сможете добиться разных интересных эффектов, базирующихся на изменении скоростей (А вы не восхищались величием окружающей матрицы?). Внизу панели Animation расположены кнопки управления воспроизведением и движением по ленте. Нажав "Воспроизведение" (Play) просмотрим анимацию на предмет обнаружения ошибок, отредактируем её при обнаружении таковых (редактирование осуществляется с помощью всё того же выпадающего меню: создать кадр (New Frame)/удалить кадр (Delete Frame), и убедившись, что мы породили вселенское зло - сохраняем полученное через Сохранить оптимизированное как (Save Optimized As) или (Shift+Ctrl+Alt+S) в формате gif.

Вот такой вот примерчик "высокого искусства" у меня получился через 15 минут. На растрированный текст был применён фильтр "Ветер" - Фильтр / Стилизация / Ветер (Filter / Stilize / Wind) и задано небольшое смещение, имитирующее скорость. Это, конечно, не гениальная находка, но в качестве иллюстрации к созданию анимированных файлов - вполне. Данная анимашка, в принципе, не вписывается в стандары интернета. Дело в том, что размер баннера должен быть минимальным. Раньше дизайнеры ориентировались на требуемую баннерными сетями цифру 8 kb (здесь 18,6), но времена менялись, скорости тоже, так что сегодняшний пользователь "расклеился и размяк" и безвольно реагирует даже на совсем уж чудовищные объёмы, свидетелями чего мы и являемся ежедневно.

Ну, элементарными приёмами вы уже овладели (Ну же, соберитесь! Страна в вас верит!), а теперь спешу вас обрадовать: это только присказка - сказка впереди. Есть в ImageReady своя страшненькая сказка. Зовётся она Tweening, что в переводе на человеческий - создание промежуточных кадров, по совместительству - мощнейший инструмент по изготовлению анимации в рекордные сроки. Из каких высших сфер прокралась сюда эта технология, современной науке не известно, заметим лишь, что Adobe не является её первооткрывателем. Общий смысл сводится к тому, что теперь при изготовлении анимации, вам не требуется корпеть над каждым её кадром. Достаточно изготовить "ключевые" или "узловые" кадры, а затем указать их программе и сказать магическое слово tweening, на что она самостоятельно создаст те самые недостающие промежуточные кадры. Короче говоря: хочешь похудеть? Выкинь холодильник. Продемонстрируем сказанное:

Откройте ImageReady. Создайте новый документ (Ctrl+N). Выберите инструмент "Круглое выделение" (Elliptical Marquee Tool) - (M) и изобразите круг. Создайте новый слой нажав (Shift+Ctrl+N). Залейте выделение (Alt+BackSpace) на новом слое передним цветом.(Эстеты могут воспользоваться инструментом Gradient Tool (G), но в Фотошопе, т.к. в ImageReady такой инструмент отсутствует, и получить не залитый круг, а объёмный шар, а затем перетащить его в клипборде в ImageReady. Мелочь, а приятно). Снимите выделение (Ctrl+D). Переместимся в палитру Animation и с помощью уже знакомой вам стрелочки и выпадающего меню создадим новый кадр (New Frame). Выбираем инструмент "Перемещение" (Move) - (V) и передвигаем наш круг куда-нибудь "с глаз долой" на другую часть изображения. Обратите внимание на предпросмотр в панели Animation. Первый кадр остался как был, а второй кадр видоизменился в соответствии с нынешним положением шара. Если плохо видно, щелчок правой кнопкой мыши на пустом месте панели активирует меню, где можно изменить размер кадров в предпросмотре. Запустите анимацию кнопкой "Воспроизведение" и увидите скачущий шар. Остановите анимацию и выделите мышью первый кадр, а затем удерживая Ctrl выделите второй кадр. (Выделение с клавишей Ctrl - это почти универсальное средство выделения нескольких объектов для многих графических, и не только, прогамм. Хотя возможны варианты с Shift`oм или Alt`oм) Теперь, когда оба кадра выделены, снова через дружественную нам стрелку вызовем меню и увидим там появившуюся (ранее затемнённую) команду Tween (Промежуточный кадр). Применим команду и в открывшемся меню введём количество добавляемых кадров, место, куда они будут добавляться, промежуточными между чем и чем они будут являться и другие параметры. Подтверждаем введённые данные и получаем 2 исходных кадра плюс то количество промежуточных кадров, которое вы ввели в вышеописанном меню. Запустите анимашку и оцените объём проделанной работы. Добавленные промежуточные кадры, своим присутствием сгладили судорожные припадки вашего шара и разнообразили движение. Итак, шар будет жить! Ура! Думаю, технология ясна, а экономия времени - налицо.

Ох, чую, источник моего красноречия иссякает вместе с кофе и куревом, а ведь я не перечислил и малой части всех возможностей программы. Существенно переоценил свои силы, но, видит бог, я бился до последней капли кофе и последней затяжки этих мерзких и вонючих сигарет! Ништяк, прорвёмся! Собираем свою стальную волю в пудовый (16 кг) кулак,подключаем 436 дыхание, автономные источники питания, чайники, утюги и вообще всё, что можно подключать, и со скрипами и стонами (a`la бурлаки на Волге), движемся дальше, к маячащему на горизонте, с издевательским выражением на ухмыляющейся роже, светлому будущему.

Давно обещанное, но всё время откладывавшееся, светлое будущее

или

Когда зарплаты будут большими, а файлы маленькими-маленькими.

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

По завершению работы над изображением и сохранением его в нужном формате, запустите ImageReady одним из известных вам способов. Откройте сохранённый файл (убедитесь, что это не формат Фотошопа, т.к. при "перепрыгивании" из приложения в приложение, по умолчанию открывается активный, на момент запуска, в Фотошопе документ). Программа предложит окно с 4 закладками: оригинальное изображение, оптимизированное изображение, оба вида и четыре варианта с разной степенью кач-ва. Внизу отображены размеры и сжатие для данного варианта. Для разных графических форматов сжатие применяется по разным принципам и алгоритмам. Для *.jpg это варианты 60, 30 и 15% качества. Сжатие цветовых квадратов по принципу усреднённого цвета (по квадратам близкого цвета). Для *.gif`ов - уменьшение цветовой палитры (256, 128 цветов),что тоже даёт экономию на объёме. Существенного сокращения объёма, при небольшой потере качества (а куда деться?), можно добиться в *.jpg, так как это изначально (на сегодняшний момент) более ёмкий формат. Gif`ы используются при сжатии "резкой" графики с большими областями одного цвета (анализ построчно, а не по квадратам). В этом случае сохранение в формате gif может стать более эффективным лекарством. Если ваше изображение содержит такие области - используйте gif`ы, если же нужно сохранять широкий диапазон цветов - лучше jpg`а вряд ли что-то сожмёт (если, конечно, не используется прозрачность). Как бы там ни было, методом простого сравнения изображений между собой, выберите устраивающий вас по качеству и объёму вариант и Save Optimized As... (Shift+Ctrl+Alt+S). Попробуйте поиграть с настройками, может получится отвоевать ещё пару байтов. Это быстрый способ. Медленный, но крайне результативный - это готовить изображение по шагам, с момента сканирования, включая оптимизацию палитры для веба и, возможно, в несколько сохранений. Так, как это делают в лучших "школах" сканнеров - Ouro, Qman, Araminta, Demon, Stoneheidge, l\0, Avalon и др. Если речь идёт о фоновом изображении, возможно, целесообразней его разрезать на фрагменты, с помощью, рассмотренного в этой статье, способа.

Как и говорилось, способ прост, понятен и, главное, не требует больших затрат времени. Так что, хоть я в очередной раз изобрёл велосипед, но при постоянной нехватке времени и места на жёстком диске, этот способ почти что панацея. Не болейте!

Особенности ImageReady

Работает только с файлами в цветовом режиме RGB (Red Green Blue - Красный Зелёный Синий - эти три цвета при смешивании между собой в разных пропорциях порождают всю палитру данного режима. Режим используется для отображения цветов на компьютерах. В полиграфии используется режим CMYK - Cian Magenta Yellow blacK). И хотя Фотошоп может работать с этими и другими цветовыми моделями, ImageReady, как созданное специально для Web`а приложение, работает только с компьютерной цветовой моделью и цветами web-палитры.

Вот собственно и всё. Был максимально краток, пытаясь объять необъятное и, надеюсь, что мне это удалось. Конечно рассказать о всех тонкостях программы я физически не смогу - скончаюсь за клавиатурой. Да и не все они мне известны. Но основные, самые нужные и интересные моменты, кажется представил. Вопросы и пожелания по будущим темам пишите на форуме или на почту. Мир вашему дому, я же пошёл к другому.

P.S.: Если у вас что-то не сработало, значит, либо один из нас ошибся, либо - одно из двух! Пишите сюда - будем разбираться. Совместный разбор полетов гарантирую.