>>> Перейти на полный размер сайта >>>

Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Выравнивание пользовательских ломтиков вдоль общей границы

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

1. Выберите инструмент Slice Select (Выделение ломтиков), нажав клавишу Shift, щелчком мыши выделите ломтики, которые необходимо выровнять.
2. На панели опций щелкните по одной из кнопок выравнивания (рис. 23.87).

Рис. 23.87. Кнопки выравнивания на панели опций инструмента Slice Select

Рис. 23.88. Кнопки распределения ломтиков на панели опций инструмента Slice Select

Равномерное распределение пользовательских ломтиков вдоль одной оси

1. Выберите инструмент Slice Select (Выделение ломтиков) клавиши К или комбинации клавиш Shift+K, затем, нажав клавишу Shift, выделите те ломтики, которые следует распределить.
2. Щелкните по одной из шести кнопок распределения, расположенных на панели опций (рис. 23.88).

Создание карты изображения на основе слоя

Карта изображения (image map) содержит «кнопки» произвольной формы, каждая из которых имеет собственную URL-ссылку (рис. 23.89). Воспользуйтесь этим способом, если области, с которыми необходимо связать URL-адреса, имеют непрямоугольную форму или вы предпочитаете работать с одним файлом изображения вместо нескольких файлов для каждого ломтика.

Программа ImageReady позволяет создавать карты изображений при помощи слоя или инструмента. Карта на основе слоя, включающая в себя все непрозрачные фрагменты слоя, автоматически обновляется каждый раз, когда редактируется слой. Карты, созданные при помощи инструментов, могут быть выровнены по общей границе или распределены вдоль одной оси. Настройки и размеры карты, созданной при помощи инструмента, допускается копировать. Несложно превратить карту, созданную на основе слоя, в карту, созданную при помощи инструмента.

1. На палитре Layers (Слои) выберите слой с прозрачными областями (рис. 23.90). Непрозрачные пикселы станут «горячими» точками карты изображения.
2. Воспользуйтесь командой Layer > New Layer Based Image Map Area (Слой > Создать новую область карты изображения на основе слоя). Прямоугольная карта изображения окружит непрозрачные области слоя.
3. Из всплывающего меню Shape (Фигура) палитры Image Map (Карта изображения) выберите форму «кнопки»:

Рис. 23.89. Изображение с несколькими перекрывающимися элементами, подходящее для создания карты изображения с помощью палитры Layer Options

Рис. 23.90. Создание карты изображения на основе слоя

Рис. 23.91. Выбор формы кнопки и ввод URL-адреса на палитре Image Map

Можно изменить форму фигуры на карте изображения с помощью инструмента Image Map Select (Выделение карты изображения), клавиша Р (комбинация клавиш Shift+ Р). Активизировав этот инструмент, выберите форму фигуры из всплывающего меню Shape (Форма), расположенного на палитре Image Map (Карта изображения).

При использовании опции Polygon (Многоугольник) в поле Quality (Качество) или с помощью ползунка можно задать точность, с которой карта изображения должна повторять очертания изображения.

Программа ImageReady может кодировать карту изображения в HTML либо для клиента, либо для сервера. Для того чтобы выбрать одну из этих опций, щелкните по кнопке Output Settings (Настройки вывода) в диалоговом окне Save Optimized (Сохранить с оптимизацией), а затем выберите тип карты из всплывающего меню Туре (Тип) в разделе Image Maps (Карты изображения).

Rectangle (Прямоугольник), Circle (Круг) или Polygon (Многоугольник) (рис. 23.91).

4. Введите URL-адрес (включая префикс http://) - см. рис. 23.91. Введенный адрес появится под именем слоя на палитре Layers (Слои), как показано на рис. 23.90.
5. По желанию. В поле Target (Цель) содержится информация о том, в какой HTML-фрейм будет загружаться содержимое ссылки, а какие HTML-фреймы следует сохранить. Это поле становится доступным только после того, как был введен URL-адрес.
6. По желанию. В поле Alt (Альтернатива) введите слово или слова, которые станут появляться, если браузер пользователя не будет отображать соответствующую картинку (рис. 23.91).
7. Повторите шаги 1-6 для других слоев изображения.

Создание карты изображения с помощью инструмента

1. Выберите один из инструментов: Rectangle Image Map (Прямоугольная карта изображения), Circle Image Map (Круглая карта изображения) или Polygon Image Map (Полигональная карта изображения), нажимая клавишу Р или комбинацию клавиш Shift+P.
2. Нарисуйте прямоугольник или окружность вокруг какой-либо области в окне изображения. Нажав клавишу Shift, можно нарисовать квадрат. При нажатии клавиши Alt прямоугольник или окружность будут рисоваться относительно выбранного центра. Есть и другой способ. Постройте многоугольник: щелкнув в окне изображения, укажите начальную точку фигуры, затем щелчком мыши отмечайте каждую следующую точку, пока не окружите желаемую область ломаной. Дважды щелкните в любом месте, чтобы автоматически замкнуть выделение (рис. 23.92).
3. Введите URL-адрес (включая префикс http://) на палитре Image Map.
4. По желанию. Поле Target (Цель) на палитре Image Map (Карта ссылок) определяет, в какой HTML-фрейм будет загружено содержимое ссылки и какие HTML-фреймы будут сохранены (см. раздел «Связывание ссылок с ломтиками изображения»). Данное поле доступно только тогда, когда в поле URL введен адрес.

Рис. 23.92. Многоугольник, построенный с помощью инструмента Polygon Image Map

Рис. 23.93. Ввод точных размеров фигуры на панели опций

Рис. 23.94. Поля, определяющие размеры карты, на палитре Image Map

Рис. 23.95. Перемещение границы карты

5. По желанию. В поле Alt (Альтернатива) на палитре Image Map введите слово или слова, которые появятся, если браузер пользователя не будет отображать соответствующую картинку.
6. Повторите шаги 1-6, чтобы создать другие карты изображения.

Для того чтобы указать точные размеры прямоугольника или окружности, прежде чем нарисовать эти фигуры, на панели опций установите флажок Fixed Size (Фиксированный размер) и введите значения в поля Width (Ширина) и Height (Высота) - см. рис. 23.93.

Для того чтобы с большой точностью переместить или изменить размеры прямоугольника или окружности после того, как вы уже нарисовали эти фигуры, воспользуйтесь полями X и Y или W (Width - ширина) и Н (Height - высота) на палитре Image Map (рис. 23.94). Либо активизируйте инструмент Image Map Select (Выделение карты изображения) с помощью пиктограммы, щелкните по одному из манипуляторов карты и переместите его (рис. 23.95).