Image is ready!

Федор (fm) Галков

Спецвыпуск: Хакер, номер #050, стр. 050-026-1

(bytes@mail.ru, www.podzemka.net)

Скромная утилита с огромными возможностями

Adobe ImageReady – это программа для создания и редактирования web-графики (и не только), которая распространяется вместе с Photoshop. До сих пор многие владеющие Photoshop на хорошем уровне даже не подозревают о существовании ImageReady и, заметим, многое теряют из-за этого. На момент написания статьи последняя версия – CS (распространяется, соответственно, в комплекте Adobe Photoshop CS).

На первый взгляд

Запустить ImageReady можно несколькими способами, но лучше пользоваться этой прогой одновременно с Photoshop. Поэтому чтобы открыть в ImageReady проект, активный на данный момент в Photoshop, достаточно нажать магическую комбинацию клавиш <Ctrl> +<Shift> +<M> или кликнуть “Edit in ImageReady” (нижняя кнопка панели инструментов). Кстати, точно так же можно запустить и Photoshop из-под ImageReady. Если надо запустить ImageReady отдельно, то – imageready.exe. Внешне ImageReady похож на Photoshop как родной брат, поэтому разобраться с его интерфейсом никаких проблем не составит. На первый взгляд и отличий немного: несколько дополнительных панелей (Animation, Slice, Optimize…) да несколько новых закладок меню и набор инструментов для редактирования поскромнее.

Оптимизация

В ImageReady потрясающе удобно реализована оптимизация изображения. Приступим. Над подопытной картинкой есть четыре закладки: “Original” – оригинальное изображение, “Optimized” – оптимизированное, “2-Up” – 2 варианта оптимизации, “4-Up” – четыре варианта. На панели оптимизации задается непосредственно способ сжатия. Есть уже десяток готовых стандартных наборов настроек (“Preset”), но, естественно, можно создать свои: для этого надо выбрать формат сжатия (gif / jpeg / png-8 / png-24 / wbmp). Под этим списком есть четыре закладки, каждая из которых содержит тематический набор настроек сжатия. После настройки оптимизации можно посмотреть, как будет выглядеть картинка после сжатия. Для этого перейди на закладку “Optimized”. Хочешь сравнить несколько способов - используй закладки “2-Up” и “4-Up”. Чтобы сохранить пожатую картинку, останется нажать “File” и “Save Optimized As…”.

И снова оптимизация

На сайтах часто бывают случаи, когда большое изображение разбивается на несколько маленьких и в таком виде размещается на странице. Невооруженным взглядом это незаметно, но когда пытаешься его скинуть, оно сохраняется лишь в виде кусочков. Это сделано не для защиты авторского права (от Print Screen это не спасает), а для того, чтобы ускорить загрузку страницы. Допустим, изображение явно не однородно. В таком случае после его разбивки на части / куски с преобладающим одним цветом его можно сохранить с большим сжатием, что в итоге картинку не повредит, а только уменьшит ее. И здесь на помощь к тебе спешит ImageReady. Открыв изображение, которое надо разрезать, достаточно кликнуть в главном меню “View” – “Create Guides…” для настройки расположения и количества линий разреза, которые в дальнейшем можно будет вручную передвигать или таким же способом создавать еще несколько. Линии окончательно установлены – пора нажимать “Slices” – “Create Slices from Guides”. Разрезы готовы. Теперь на панели “Web Content”, сделав активным любой из кусков, можно задать ему свои параметры сжатия. Однако не стоит задавать соседним кускам сильно различающиеся параметры, иначе это будет заметно. Стоп. Неужели придется вручную утомительно склеивать кусочки изображения на будущей странице? Нет, спецы из Adobe позаботились и об этом. Если нажать “Save Optimized As…” и выбрать тип “HTML and Images», то на выходе мы получим готовый HTML-файл и папку “Images”, в которой хранится изображение, любезно нарезанное ломтиками. Останется только добавить код картинки к коду страницы и насладиться результатом.