Archive for the ‘Adobe Photoshop CS2’ Category

Организация ссылок

Организация ссылок
Теперь, когда изображение разрезано на требуемое количество фрагментов, их надо ассоциировать с соответствующими документами. Для этого предназначена специальная палитра Slice (Фрагмент). Если ее нет на экране, то выберите команду Show Slice (Показать Фрагмент) из меню Window (Окно).
Содержимое палитры Slice (Фрагмент) относится только к текущему выделенному фрагменту и изменяется при выделении другого. Верхний левый угол палитры занимает окно просмотра, в котором демонстрируется выделенный фрагмент. В области Dimensions (Размеры) приводятся точные координаты левого верхнего угла фрагмента (X и Y), его ширина (W) и высота (Н). Ввод в эти поля численных значений в пикселах позволяет идеально точно определить размер и положение фрагмента. далее…

Тестирование карты ссылок

Тестирование карты ссылок
Теперь, когда карта ссылок создана, настало время проверить ее в работе. Нажмите кнопку Preview in Default Browser (Просмотр в браузере по умолчанию) на панели инструментов. Image Ready создаст временный HTML-файл, содержащий ссылку на изображение и описание карты ссылок, ассоциированной с ним. Временный файл будет загружен в браузер, установленный в операционной системе по умолчанию. Для проверки программа использует возможность браузера самостоятельно, без помощи сервера, обрабатывать карты ссылок.
Подводите курсор к различным участкам изображения, и наблюдайте в строке состояния браузера адрес ссылки. Если вы вводили в палитре Image Map (Карта ссылок) альтернативный текст, то он должен появиться как всплывающая подсказка. Щелчок на любой из зон карты ссылок приведет к ошибке 404, ведь страниц, которые вы указывали в поле URL, не существует. Тем не менее, по содержимому строки адреса в браузере вы можете оценить, что карта ссылок сработала, и сработала верно!
Выравнивание зон карты ссылок
Точное размещение зон карты ссылок может оказаться довольно трудоемким делом. далее…

Карты ссылок

Карты ссылок
Создадим изображение в Photoshop на основе карты Европы, с которой мы работали в главе 4. На карте цветом выделены несколько стран, куда некая фирма организует туры. Изображение после размещения на сайте этой фирмы будет служить картой ссылок на страницы с подробной информацией о каждом туре. Иными словами, щелчок курсором мыши на территории любой страны в этой карте должен приводить к отдельной Web-странице.
Инструменты определения зон
ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на зоны, выполненной пользователем. далее…

Оптимизация формата GIF

Оптимизация формата GIF
В результате оптимизации формата JPEG мы получили весьма существенный (97%) выигрыш в размере файла, сохранив приемлемое качество изображения. Но наилучшим ли способом проведена оптимизация? Может быть предпочтительнее использовать формат GIF?
1. Перейдите на вкладку 2-Up (2 варианта) в окне документа. Перед вами одновременно оригинал (слева) и оптимизированное изображение (справа).
2. Щелкните курсором мыши в пределах левой половины окна документа. Это сделает активным оригинал изображения.
3. В списке Settings (Установки) палитры Optimize (Оптимизация) выберите вариант GIF 64 Dithered. далее…

Интерфейс ImageReady

Интерфейс ImageReady
Главное окно ImageReady в первый момент легко перепутать с Photoshop, настолько похожи они внешне: та же панель инструментов, знакомые палитры. Как мы уже отмечали, такое сходство не случайно. Более внимательный взгляд отметит и множество особенностей. В первую очередь это несколько специальных инструментов на панели инструментов.

  • Инструмент (Прямоугольное выделение со скругленными углами) предназначен для создания выделенных областей в форме прямоугольника со скругленными углами. Палитра свойств (Параметры) для этого инструмента содержит поле (Радиус), в котором задается радиус скругления в пикселах.
  • Инструменты (Прямоугольная карта ссылок), (Круглая карта ссылок), (Многоугольная карта ссылок) и (Выделение карты ссылок) служат для создания карт ссылок. Первые три используются для определения прямоугольных, круглых и многоугольных областей карты, а последний — для их выделения в документе.

    Инструмент Slice (Фрагмент) предназначен для разрезания изображений на прямоугольные фрагменты, a Select Slice (Выделение фрагмента) — для выделения таких фрагментов. Оба эти инструмента присутствуют и в Photoshop, но мы их до сих пор не рассматривали. Впрочем, в этом нет необходимости, поскольку разрезание изображений в обеих программах пакета реализовано одинаково.

Кроме того, на панели инструментов имеются кнопки режимов:

  • Toggle Slices Visibility (Переключение видимости фрагментов). Если кнопка нажата, то границы фрагментов, на которые разрезано изображение, видны на экране, в противном случае — нет. Переключателю на панели инструментов соответствует команда-переключатель Slices (Фрагменты), находящаяся в списке Show (Демонстрация) меню View (Вид).

    Примечание
    Если выбрать инструмент Slice (Фрагмент) или Select Slice (Выделение фрагментов), режим показа фрагментов включается автоматически.

  • Toggle Image Maps Visibility (Переключение видимости карты ссылок). При нажатой кнопке ImageReady отображает границы областей карты ссылок. Переключателю на панели инструментов соответствует команда-переключатель Image Maps (Карты ссылок), находящаяся в списке Show (Демонстрация) меню View (Вид).
  • Rollover Preview (Просмотр ролловеров). При нажатой кнопке, в режиме просмотра ролловеров, можно проверить их работу прямо в окне документа. Редактирование ролловеров в этом режиме невозможно.
  • Preview in Default Browser (Просмотр в браузере по умолчанию). Нажатие кнопки открывает текущее изображение в браузере, принятом в системе по умолчанию. Это окончательный режим проверки карт ссылок, ролловеров и анимации. Только он обеспечивает полностью адекватное отображение этих элементов страницы. Изображение в браузере сопровождается дополнительной информацией о нем и текстом, необходимым для работы динамических элементов.

    Редактор ImageReady имеет и несколько особых палитр:

  • Optimize (Оптимизация). Содержит параметры оптимизации изображений для экспорта в выбранный формат. Вид оптимизированного изображения демонстрируется прямо в окне каждого документа ImageReady. В строке состояния окна документа указываются текущие параметры оптимизации или иная информация, которая выбирается в списке, открывающемся щелчком на треугольной стрелке. В этом же списке задается предполагаемая скорость модема, позволяющая оценить время загрузки изображения в браузере пользователя. Color Table (Цветовая таблица). Показывает текущую палитру изображения, если задан режим оптимизации в индексированный формат (GIF или PNG-8). Она также имеет свой аналог в модуле Save For Web Photoshop и работа с ней тоже аналогична.
  • Layers (Слои). Единственное отличие этой палитры от палитры Layers (Слои) в Photoshop заключается в том, что в нижнем ряду кнопок есть стрелки перехода между слоями и добавления эффектов. Поскольку при создании анимации ее фазы размещаются на отдельных слоях, кнопки перехода к предыдущему или следующему слою используются для перемотки кадров.

Layer Options/Effects (Параметры слоя/Эффекты). Используется совместно с палитрой Layers (Слои) и позволяет задавать параметры слоя и ассоциированных с ним эффектов. Если в палитре Layers (Слои) выделена строка эффекта, то в палитре Layer Options/Effects (Параметры слоя/Эффекты) оказываются настройки этого эффекта. Если же выделен слой, то в этой палитре вы найдете параметры слоя . Styles (Стили). далее…

Разрезание изображений

Разрезание изображений
Множество разнородных графических элементов Web-страницы могут потребовать для оптимизации различных параметров, или даже форматов. В таких случаях большое изображение можно разрезать на фрагменты и задать для каждого фрагмента индивидуальные параметры. Сборка фрагментов в единое изображение осуществляется HTML-кодом страницы. Разрезание изображения также удобно для организации ссылок и необходимо при создании ролловеров (см. ниже).
На приведен пример заголовка Web-страницы, где разрезание приводит к существенному выигрышу в размере и качестве. Основная часть заголовка полноцветная, и займет наименьшее место при сохранении в формате JPEG. В кнопках-ролловерах использованы всего два цвета. далее…