Использование ImageReady

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

Одной из таких программ, обеспечивающих автоматизацию процесса построения таблицы по дизайн-макету, является Adobe ImageReady, которая входит в поставку пакета Photoshop.

Запуск ImageReady

ImageReady мохно запустить непосредственно, как отдельное приложение, воспользовавшись командой меню "Пуск". Можно, так же, передать изображение в ImageReady из Photoshop. Рассмотрим подробнее второй вариант. Предположим, вы только что завершили проектирование дизайн-макета в Photoshop-е (не закрывая программу). Перейти к редактированию открытого изображения в ImageReady можно с помощью кнопки "Edit in ImageReady" (обведена красным):

Рис. №6.2.1. Edit in ImageReady

При этом будет запущен ImageReady и открыт редактируемый файл. Интерфейс ImageReady довольно схож с интерфейсом Photoshop. Инструменты, панели, окно изображения... Однако это сходство только поверхностное. При более детальном рассмотрении вы увидите существенную разницу. Давайте по частям разберем те элементы интерфейса ImageReady, с которыми нам предстоит работать на данном занятии.

Окно изображения

Окно изображения, отличается от аналогичного в Photoshop тем, что содержит вкладки для просмотра оптимизированных вариантов изображения (как модуль Save For Web в Photoshop). Настроить параметры оптимизации можно с помощью панели Optimize. Dytoybq вид окна изображения представлен ниже:

Рис. №6.2.2. Окно изображения

Панель Optimise

Эта панель позволяет настраивать параметры сохранения изображений. Вот ее внешний вид:

Рис. №6.2.3. Панель Optimise для формата GIF в развернутом виде

Набор элементов управления панели может различаться в зависимости от выбранного формата файла. В общем, они сходны с соответствующими элементами управления панели параметров модуля "Save For Web" в Photoshop.

Панель Slice

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

Ниже показана панель Slice в развернутом состоянии:

Рис. №6.2.4. Панель Slice в развернутом виде

Рассмотрим параметры данной панели более пристально. Панель разбита на несколько групп:

• Главная (верхняя) группа служит для указания основных параметров "куска". Здесь
  • Type - тип куска (изображение или не изображение)
  • Name - имя изображения
  • URL - адресс ссылки (только для изображения)
  • Target - целевое окно браузера для загрузки ресурса ссылки
  • Alt - альтернативный текст изображения
• Группа Dimmensions ("Размеры") позволяет узнать и настроить координаты и размеры выбранного "куска". Включение флажка Constrain Proportions позволяет пропорционально масштабировать размер "куска".
• Группа Cell Alignment ("Выравнивание ячейки") позволяет настроить горизонтальное и вертикальное выравнивание в ячейке, которой принадлежит "кусок".
• Группа Background позволяет указать фоновый цвет ячейки.
• Группа Status Bar Message позволяет указать текст, выводимый в строке состояния браузера при наведении курсора мыши на изображение.

Назначение большинства оставшихся панелей совпадает с аналогичными в Photoshop.

Разрезание макета и настройка параметров "кусков"

Разрезание макета осуществляется с помощью инструмента Slice  . Работа по разрезанию макета в основном сводится к выделению фрагментов изображения инструментом Slice, в результате чего образуются "куски". Встречаются "куски" двух типов: те, что были созданы вами лично (обыкновенные Slice) и автоматически создаваемые программой в промежутках между обыкновенными (AutoSlices). Последние имеют отличительную особенность - их номера располагаются на сером фоне, тогда как у специально созданных "кусков" на синем.

В любом случае тот или иной "кусок" можно выбрать с помощью инструмента Slice Select   и настроить затем его параметры на панели Slice.

При разрезании обычно выделяют наиболее важные фрагменты, макета (кнопки, блоки содержимого). Остальные фрагменты программа создаст автоматически. При этом очень полезно использовать направляющие линии, которые можно получить схватившись за горизонтальную или вертикальную линейки и перетаскивая курсор в сторону изображения. Чтобы показать или скрыть линейки, нажмите Ctrl+R. Положение направляющей можно корректировать. Для этого переключитесь на инструмент Move Tool и манипулируйте направляющей.

При создании и настройке "кусков", неактивные "куски" становятся "бледными", что позволяет визуально выделить тот из них, параметры которого настраиваются в данный момент. Ниже приводятся два изображения, показывающие настройку параметров "кусков" типа Image (с гиперссылкой) и No Image:

Рис. №6.2.5. Кусок типа Image

Рис. №6.2.6. Кусок типа No Image

Иногда "куски" приходится не только создавать, но и удалять. Для этого выберите удаляемый "кусок" и нажмите кнопку Delete на клавиатуре.

Просмотр и сохранение результата

После завершения настройки "кусков" можно посмотреть результат в браузере с помощью команды меню File / Preview in / имя браузера (по умолчанию MSIE). C помощью команды того же меню Edit Browser List можно добавить необходимый браузер в список и использовать его для просмотра результата.

Для сохранения результата воспользуйтесь командой меню File / Save Optimized As... (Сохранить оптимизированное как...). При сохранении в указанной папке будет создан html файл с заданным именем, а, так же, папка "images" с необходимыми изображениями. в html файле будет сгенерированна таблица для сборки кусков дизайн-макета. Обязательно проследите за тем, чтобы в поле Тип Файла диалогового окна сохранения находилось значение Html And Images (*.html).

Генерируемый код, правда, будет далек от совершенства, однако грамотная "доработка напильником" вероятнее всего приведет его в желаемое состояние за гораздо более короткий срок, чем нарезка вручную "с нуля". Для того, чтобы уменьшить объем работ по правке полученного кода, настройте параметры генерации следующим образом: выполните команду меню File / Output Settings / HTML и включите в диалоговом окне флажок Output XHTML.