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

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

       

Переход от карты изображения на основе слоя к карте, созданной при помощи инструмента

  1. Активизируйте инструмент Image Map Select (Выделение карты изображения) клавиши Р (комбинации клавиш Shift+P) и щелкните по карте, созданной на основе слоя, которую следует преобразовать.
  2. В меню палитры Image Map (Карта изображения) выберите пункт Promote Layer Based Image Map Area (Преобразовать область карты, созданной на основе слоя).

Как спрятать или показать карту изображения

Щелкните на панели инструментов по кнопке Image Map (Карта изображения) либо нажмите клавишу А, чтобы спрятать/показать карту (рис. 23.96) или воспользуйтесь командами View > Show > Image Maps (Вид > Показать > Карты изображения).

ImageReadyВ программе ImageReady можно корректировать вид карты изображения (цвет, видимость линий и габаритной рамки). Для этого предназначено диалоговое окно (рис. 23.97), которое открывается при помощи команд Edit > Preferences > Image Maps (Правка > Установки > Карты изображения).

Выделение карты изображения

  1. Убедитесь, что карты изображения видны, и выберите инструмент Image Map Select (Выделение карты изображения), нажав клавишу Р или комбинацию клавиш Shift+P.

Кнопка переключения режима видимости карты изображения на 
  панели инструментов

Рис. 23.96. Кнопка переключения режима видимости карты изображения на панели инструментов

Корректировка вида карты изображения

Рис. 23.97. Корректировка вида карты изображения

  1. Щелкните по карте в окне изображения (нажав клавишу Shift, можно выделить несколько карт).

Удаление карты изображения

Выделите карту изображения и нажмите клавишу Enter или в меню палитры Image Map (Карта изображения) выберите пункт Delete Image Map Area (Удалить область карты изображения).

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

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

  1. Активизируйте инструмент Image Map Select (Выделение карты изображения) клавиши Р (сочетания клавиш Shift+P). Нажав клавишу Shift, щелкните по картам, которые следует выровнять.
  2. Щелкните по одной из кнопок выравнивания на панели опций.

Равномерное распределение карт изображения, созданных при помощи инструментов, вдоль одной оси

  1. Активизируйте инструмент Image Map Select (Выделение карты изображения) с помощью клавиши Р (сочетания клавиш Shift+P). Нажав клавишу Shift, щелкните по картам, которые необходимо равномерно распределить.
  2. Щелкните по одной из шести кнопок распределения, расположенных на панели опций (рис. 23.98).

Оптимизация отдельного ломтика изображения

Если вы работаете с гибридным изображением, которое содержит элементы с четко определенными границами (например, текст или штриховой рисунок) и элементы с плавным переходом цвета, то постарайтесь создать отдельный ломтик для каждой зоны. Затем можно будет произвести различную оптимизацию ломтиков в зависимости от их типа. Например, показанный на рис. 23.99 элемент с плавным переходом цвета (рубанок) должен быть преобразован в формат JPEG, в то время как векторный элемент (горящая лампочка) - в формат GIF.

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

Кнопки распределения карт

Рис. 23.98. Кнопки распределения карт, расположенные на панели опций

Рис. 23.99. Гибридное изображение

Копирование настроек оптимизации

Рис. 23.100. Копирование настроек оптимизации путем перетаскивания пиктограммы дроплета с палитры Optimize (внизу) на ломтик изображения (вверху)

  1. Выберите настройки оптимизации в соответствующей палитре. Для четко очерченных областей воспользуйтесь форматом GIF, а для областей с плавным переходом цвета - JPEG.

ImageReadyЕсли выбрать несколько ломтиков с различными настройками оптимизации, то в палитре Optimize (Оптимизация) будут отображаться только те настройки, которые у этих ломтиков совпадают. Однако при изменении доступных для модификации значений они будут применены ко всем выделенным ломтикам.

ImageReadyЕсли вы впоследствии решите, что следует применить однотипную оптимизацию ко всем ломтикам, то активизируйте инструмент Slice Select (Выделение ломтика), выполните команду меню Select > All Slices (Выделить > Все ломтики) и затем установите необходимые значения параметров на палитре Optimize (Оптимизация). Если выполнить команду Select > Deselect Slices (Выделить > Отменить выделение ломтиков), то палитра Optimize станет пустой.

Копирование настроек оптимизации от одного ломтика к другому

Предлагаемый способ копирования настроек оптимизации является довольно быстрым и эффективным.

  1. Активизируйте инструмент Slice Select (Выделение ломтика), нажав клавишу К или комбинацию клавиш Shift+K.
  2. Щелкните по ломтику, параметры оптимизации которого следует скопировать.
  3. Перетащите значок дроплета с палитры Optimize (Оптимизация) на любой невыделенный ломтик, в результате чего к нему будут применены настройки из палитры (рис. 23.100).

Связывание ломтиков

Если связать пользовательские ломтики, то они автоматически будут использовать одни и те же настройки оптимизации. Связанные ломтики в формате GIF будут также использовать одну таблицу цветов и один шаблон размытия, что поможет скрыть резкие переходы от одного фрагмента к другому.

  1. Активизируйте инструмент Slice Select (Выделение ломтика) с помощью клавиши К (комбинации клавиш Shift+K).
  2. Щелкните по какому-нибудь ломтику. Нажав клавишу Shift, можно выделить несколько ломтиков (рис. 23.101).
  3. Выполните команду Slices > Link Slices (Ломтики > Связать ломтики). Теперь метки связанных ломтиков будут иметь одинаковый цвет (рис. 23.102).

ImageReadyДля того чтобы к уже связанным ломтикам добавить еще один, выделите его, а также все связанные ломтики, а затем воспользуйтесь командой Slices > Linked Slices (Ломтики > Связанные ломтики).

Выделение ломтиков

Рис. 23.101. Выделение трех ломтиков

Метки связанных ломтиков, окрашенные одним цветом

Рис. 23.102. Метки связанных ломтиков, окрашенные одним цветом

Разъединение ломтиков

Для того чтобы отсоединить один ломтик от совокупности связанных ломтиков, щелкните по нему мышью, предварительно активизировав инструмент Slice Select (Выделение ломтика), которому соответствует клавиша К (сочетание клавиш Shift+K), и выполните команду Slices > Unlink Slice (Ломтики > Отсоединить ломтик).

Чтобы отсоединить набор ломтиков, щелкните по одному элементу из этого набора с помощью инструмента Slice Select (Выделение ломтика) и воспользуйтесь командой Slices > Unlink Set (Ломтики > Отсоединить набор).

Если вы хотите разъединить все ломтики изображения, воспользуйтесь командой Slices > Unlink All (Ломтики > Отсоединить все).

Автоматически создаваемые программой ImageReady ломтики уже связаны между собой. Если отсоединить такой ломтик от остальных, то он превратится в пользовательский.

Прикрепление тега Alt к какому-либо ломтику или целому изображению

В старых версиях неграфических Web-браузеров (или в любых браузерах, в которых выключена опция Show Pictures (Отображать рисунки)) будет отображаться текст, но не графика. Чтобы в таких браузерах изображение появлялось в виде однотипного значка с текстом, Web-дизайнеры прикрепляют к каждому графическому объекту уникальный тег Alt (Альтернатива). Такие теги позволяют пользователям с ослабленным зрением работать с текстовыми браузерами, которые озвучивают ссылки.

Ввод текста

Рис. 23.103. Ввод текста в поле Alt

Далее рассказано, как добавить тег Alt в программе ImageReady.

  1. Откройте палитру Slice (Ломтик). Если палитра не отображается в развернутом виде, то дважды щелкните по ее заголовку.
  2. По желанию. Щелкните мышью по ломтику, предварительно активизировав инструмент Slice Select (Выделение ломтика).
  3. В поле Туре палитры Slice введите слово или слова, которые при необходимости будут заменять изображение (рис. 23.103).

ImageReadyДаже если вместо изображения в окне браузера показывается текст (тег Alt), все URL-ссылки будут связывать пользователя с указанным сайтом.

 

 

 

Top.Mail.Ru
Top.Mail.Ru