Размещено на http://www.allbest.ru/

Оптимизация изображений для WEB

Содержание урока

– Оптимизация JPEG и GIF - файлов для наилучшего соотношения между размером файла и качеством изображения.

– Настройка опции Dithering.

– Создание прозрачной основы.

– Создание карты изображения в гипертексте.

– Пакетная автоматизированная обработка оптимизируемых файлов.

Оптимизация изображений c помощью Photoshop или Image Ready

Указанные программы позволяют сжимать размеры файлов, в то же время оптимизируя качество изображения. Опции сжатия меняются в зависимости от того, в каком графическом формате будет сохранено изображение. Формат JPEG позволяет сохранить широкий цветовой диапазон (миллионы цветов) и тонкие оттенки яркости изображений с непрерывными цветами (как фотографии или изображения с градиентными заливками). Формат GIF эффективен при сжатии изображений с ровным цветом или повторяющимися цветами линий, типа графики или логотипов. Он использует палитру из 256 цветов и поддерживает прозрачные подложки. Формат PNG эффективен при сжатии изображений с ровным цветом и резкими деталями. Формат PNG-8 использует палитру из 256 цветов. PNG-24 поддерживает 24-битный цвет (миллионы цветов). Однако многие WEB-браузеры прошлых лет формат PNG не поддерживают.

В этом уроке мы создадим виртуальный зоопарк. Воспользуемся командами File>Open (Browse) или просто кликнем по закладке File Browser, чтобы его открыть. Зайдем в папку Lesson14. Там находится несколько файлов, в названиях которых присутствуют слова Start и End. Выберем файл 14Start1.psd. файл изображение dithering гипертекст

На левой панели браузера сразу появится миниатюра изображения и текстовая информация о файле. Если нужно, можно увеличить эту панель браузера, чтобы увеличить миниатюру. Эта картинка - модифицированная карта зоопарка, которую мы будем использовать далее в этом уроке. Эта версия карты дополнена фотографиями животных, которые обработаны в Photoshop. В левой нижней панели браузера обратите внимание на размеры файла: они довольно велики. Теперь щелкнем по миниатюре файла 14End1.psd. Видим, что его размер значительно меньше, чем у 14Start1.psd, хотя обе картинки выглядят одинаково. Так, одну за другой, просмотрим все изображения, имеющие в названиях слова Start и End. Наконец, дважды щелкнем по миниатюре 14Start1.psd, чтобы открыть этот файл в Photoshop. Можно и просто перетащить миниатюру из правой панели на рабочий стол Photoshop.

Оптимизация JPEG-изображений

В этом уроке мы будем оптимизировать файлы форматов JPEG и GIF с помощью Photoshop или Image Ready. Поскольку 14Start1.psd файл слишком велик для размещения на Web-страничке, сопоставим разные форматы сжатия, чтобы решить, какой из них дает наилучшее сжатие без сильного ущерба качеству изображения. Здесь удобно использовать диалоговое окно Save For Web (сохранить для сети). Оно имеет те же оптимизационные возможности, что и Image Ready, позволяя сравнить несколько версий обрабатываемого файла по критерию «объем - качество изображения». Выполним для уже открытого файла 14Start1.psd команду File>Save For Web. В открывшемся диалоговом окне щелкнем закладку «4-Up», чтобы увидеть 4 версии обработанного изображения. Программа автоматически генерирует три различных варианта оптимизации и помещает информацию об этом под миниатюрами, включая даже время скачивания. Первая панель показывает первоначальный файл. Вторая, третья и четвертая показывают различные установки параметров оптимизации, включая формат (GIF или JPEG) и алгоритм обработки цвета - Selective, Perceptual или Web. В нижнем левом углу диалогового окна Save for Web выберите увеличение не ниже 200%, чтобы рассмотреть детали, а затем кликните Preview справа вверху, чтобы деактивировать опцию zoom.

Сравните все варианты.

Затем нажмите пробел (указатель мыши принимает форму руки) и перетаскивайте картинку так, чтобы текст Tropical Rainforest посредине был виден во всех четырех окнах. Снова внимательно оцените различия между всеми оптимизированными вариантами изображения.

Сравнение оптимизированных GIF, JPEG и PNG изображений

Вы можете применить пользовательские настройки к любому из вариантов, показанных в диалоговом окне Save for Web.

Для этого выберите одно из окон предварительного просмотра оптимизированных изображений, а затем поэкспериментируйте с установками с правой стороны диалогового окна. Прежде, чем начать, убедитесь, что в правом верхнем углу выбрана опция оптимизированного предварительного просмотра Optimized Preview. Во всплывающем меню установок с правой стороны диалогового окна Save for Web выберите GIF 128 dithered. Обратите внимание на темную группу пикселей вокруг текста и клюва. Сравните изображение с двумя нижними вариантами в форматах JPEG и PNG. Активизируйте щелчком мыши изображение внизу слева, а затем во всплывающем меню установок попробуйте настройки JPEG Low (детали изображения и текст низкого качества) и JPEG High (качество получше, но размеры файла велики). Пожалуй, наилучшим выбором будет промежуточный вариант JPEG Medium. Изображение при этом имеет удовлетворительное качество, а размеры файла меньше, чем у JPEG High или GIF.

Теперь выберем изображение в правом нижнем углу и поэкспериментируем с форматом PNG-8 128 Dithered. Хотя размеры полученного при этом файла и меньше первоначальных, но они все-таки больше, а качество изображения похуже, чем у формата JPEG Medium. К тому же, многие браузеры «не понимают» формат PNG. Для совместимости со старыми браузерами нужно использовать JPEG Medium (левый нижний угол диалогового окна). Если при этом активизировать опцию Progressive, то загрузка картинки будет осуществляться в несколько этапов, на каждом из которых качество будет улучшаться (см. рис. внизу). Теперь сохраним файл под названием 14Start1.jpg и закроем исходный файл, не сохраняя изменений.

Оптимизация GIF-изображений

Для этого воспользуемся программой Image Ready, хотя можно использовать и Photoshop. Отметим, что некоторые виды работ можно выполнить или только в Photoshop, или только в Image Ready. Для этого предусмотрена возможность быстрого перехода из одной программы в другую.

Организация рабочего пространства в Image Ready.

Щелкнем кнопку Jump to Image Ready (Перепрыгнуть в Image Ready) в нижней части инструментального ящика. В Image Ready восстановите умалчиваемое положение всех палитр командой Window>WorkSpace>Reset Palette Locations. Вытащите закладки следующих палитр из соответствующих групп, чтобы разместить их отдельно на рабочем столе: Info palette из группы палитр Optimize; Color Table Palette из группы палитр Rollovers. Затем спрячьте группы палитр Color (закладки Color, Swatches, Styles), Info и Rollovers (закладки Rollovers и Layer Options). Расположите группы палитр Optimize, Color Table и Layers, изменив их размеры, чтобы освободить пространство на рабочем столе. Затем выполним команду сохранения рабочего пространства: Window>Workspace>Save Workspace. Присвоим рабочему пространству название Optimize_14 и нажмем ОК. Теперь его можно вызывать по необходимости.

Выбор базовых установок для оптимизации в Image Ready

B Photoshop установки для оптимизации изображений находятся в диалоговом окне Save For Web (сохранить для сети). В Image Ready эти же настройки собраны в палитре Optimize. В Image Ready выполним команду File>Open>14Start2.psd. Это изображение содержит большие области ровного однотонного цвета. Затем щелкнем закладку 2-Up в окне изображений. Оптимизированная версия изображения теперь активна в правой стороне окна. Во всплывающем меню Settings (установки) палитры Optimize выберем вариант Gif 128 No Dither. В качестве алгоритма обработки цвета (Color Reduction Algorithm) выберем Perceptual.

Выбор алгоритма обработки цвета

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

Web использует стандартную 8-битную цветовую таблицу из 256 цветов - такую же, как Windows. Это является гарантией того, что при использовании 8-битного цвета имитация недостающих цветов с помощью опции Dithering (когда отсутствующий цвет имитируется мелкими точками разного цвета, как на струйных принтерах) не понадобится. Если изображение состоит из меньшего числа цветов по сравнению с тем, которое содержится в таблице, то лишние цвета удаляются. Custom - сохраняет текущую цветовую таблицу в качестве фиксированной палитры, не изменяемой даже если изменяется изображение.

Строка состояния в нижней части рабочего окна программы показывает масштаб, размер оптимизированного файла и время его загрузки (А), а также размеры исходного и оптимизированного файлов (В). Вы можете изменять по желанию информацию в этой строке с помощью раскрывающегося меню. Например, можно показывать в строке состояния размер изображения в пикселях (image dimensions), что особенно полезно при планировании и создании web-страниц.

Исследование цветовой таблицы

Палитра цветовой таблицы (color table palette) отображает цвета, которые используются выбранным алгоритмом оптимизации для текущего файла. В нашем случае это цвета, используемые опцией Perceptual для изображения карты зоопарка. Цвета в палитре расположены случайным образом.

Общее количество цветов показано в нижней части палитры. Можно изменить размер палитры или использовать полосу прокрутки для просмотра всех цветов. Можно также изменить расположение цветов в палитре. Например, чтобы расположить цвета по оттенкам (hue), щелкнем по кнопке раскрывающегося меню в правом верхнем углу палитры и выберем строчку sort by hue. Некоторые цвета в палитре имеют в центре маленький ромб. Это так называемые web-safe (безопасные для всемирной паутины) цвета. В палитре оптимизации выберем web в меню алгоритма уменьшения числа цветов (Color reduction algorithm).Видим, что при этом изменились цвета на изображении и в палитре цветовой таблицы, которая теперь отражает web-палитру. Поэкспериментируйте с различными опциями оптимизации, наблюдая, как меняются цвета изображения и вид цветовой таблицы. После этого вернитесь к прежним установкам: GIF 128, No Dither, Perceptual. Сортировку цветов можно оставить произвольной - по оттенку, яркости или популярности.

Шестнадцатеричные значения цветов в палитре Info

В программе Photoshop шестнадцатеричные значения цветов отображаются в палитре Info, если выбрать Web Color Mode. В программе Image Ready шестнадцатеричные значения цветов отображаются автоматически в палитре Info, правее цветов RGB. Чтобы увидеть шестнадцатеричные значения цветов в Photoshop, щелкните по закладке палитры Info и сделайте ее видимой. В меню этой палитры выберите Palette options. В разделе First color readout, second color readout или в обоих выберите Web color из меню Mode. Щелкните ОК. Теперь вместо значений цветов RGB в палитре Info выводятся их шестнадцатеричные эквиваленты.

Уменьшение количества цветов в палитре

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

Теперь, удерживая нажатой клавишу пробела, перетащите картинку таким образом, чтобы хотя бы часть слов Tropical rainforest и часть голубого пространства Northern Wilderness были видны. Затем в разделе Color option палитры оптимизации напечатайте или выберите 32 в падающем меню. Обратите внимание на сильное уменьшение размеров файла и также сильное снижение качества изображения. Некоторые детали вообще исчезли.

«Запирание» цветов для сохранения деталей изображения

В предыдущем разделе мы видели, что уменьшение количества цветов с 128 до 32 приводит к сильному снижению качества изображения. Поэтому бывает нужно «запирать» определенные цвета, чтобы они не исчезали при уменьшении палитры. Теперь установим увеличение картинки 100% и вернемся к предыдущему состоянию (128 цветов) в палитре оптимизации. Кликнем пипеткой тёмно-коричневый силуэт верблюда, чтобы поместить образец этого цвета в таблицу. Теперь кликнем кнопку «замок» в нижней части цветовой таблицы. Квадратик, появившийся в нижнем правом уголке образца цвета, говорит о том, что данный цвет «заперт». Чтобы «отпереть» выбранный цвет, щелкните снова по кнопке «замок». Описанным выше способом «заприте» цвет на силуэте медведя в области Northern Wilderness. Снова уменьшим число цветов до 32 в палитре оптимизации. Теперь, хотя запертые цвета сохранены, появилась новая проблема: след в области Northern Wilderness сливается с цветом задника, а тропические животные в Tropical rainforest теперь не тёмно-зеленые, а коричневые. Вернемся опять к состоянию 128 цветов. «Запрем» цвета попугая, следов и заднего плана. Всего получилось 5 запертых цветов. Опять установим число цветов - 32. Сохраним файл. Отметим, что при числе цветов менее 32 практически невозможно избежать сильной деградации изображения. Естественно, для наилучшего сжатия GIF-файла используйте наименьшее количество цветов, при котором еще сохраняется приемлемое качество изображения.

Опция Dither

Возможно, вы заметили, что некоторые участки изображения выглядят пятнистыми после оптимизации. Это объясняется специальной технологией, именуемой dithering и используемой для имитации цветов, отсутствующих в палитре. Например, голубой и желтый цвет, наложенные в виде мозаики (dithering), дают иллюзию отсутствующего в палитре зеленого цвета. Используя dithering, следует различать две разновидности dithering. Application dither, когда Photoshop или Image Ready пытаются имитировать цвета, которые есть в первоначальном изображении, но отсутствуют в выбранной палитре и browser dither, когда браузер, использующий 8-битный цвет (256 оттенков), имитирует цвета, имеющиеся в цветовой палитре оптимизированного изображения, но отсутствующие в системной палитре браузера. Вы можете контролировать эту разновидность dither, заменяя выбранные цвета безопасными цветами (web-safe) в палитре цветовой таблицы. В диалоговом окне Save for web (Photoshop) и в Image Ready вы можете видеть application dither непосредственно на оптимизированном изображении. Можно также увидеть browser dither, появляющийся в окончательном изображении, если открыть его в браузере с 8-битным цветом.

Управление величиной Application dither

Dithering создает иллюзию большего числа цветов и деталей, но может увеличивать размер файла. Опция dither контролирует число цветов, которые имитируются в Image Ready. Для оптимизации размеров файла рекомендуется использовать наименьший процент величины Application Dither, еще дающий нужные вам цветные детали. Откройте файл 14start2.psd и установите увеличение (zoom in) 200%. Убедитесь, что выбрана оптимизированная версия изображения и что в палитре оптимизации выбран формат GIF и опции perceptual и 32 colors. Обратите внимание на как бы состоящую из кирпичиков тень, падающую позади текста. В палитре оптимизации активизируйте следующие опции. Установите Diffusion в качестве алгоритма для Dithering (вместо No Dither). Установите ползунком или непосредственно впечатайте в окно Dither value (величина) 100%. Используя комбинацию различных цветов, Image Ready пытается «симулировать» цвета и тона первоначального изображения, но уже не в 32-цветной палитре. Обратите внимание на крапчатый растр, заменивший тень от текста. Это тоже не идеал, но уже значительно лучше и в целом приемлемо. Однако результат применения опции Dithering для заднего зеленого плана Tropical Rainforest всё еще плох. Перетащим процент Dither на 50%, а затем поэкспериментируем и с другими значениями. К сожалению, это не позволяет улучшить зеленый цвет заднего плана, не повредив падающую тень. Поэтому вернем процент Dither назад на 100% и установим число цветов 128. С помощью пипетки выберем зеленый цвет задника Tropical Rainforest и запрём этот цвет кнопкой в цветовой палитре. Теперь в палитре оптимизации снова установим 32 цвета. В окне изображения установим увеличение 100%. Хотя разница на первый взгляд трудноуловима, теперь изображение вполне приемлемо.

Уменьшение величины Browser Dither

В ImageReady можно увидеть, как выглядит оптимизированное изображение в web-браузере при наличии browser dither.

Чтобы предохранить цвет от возникновения browser dither, следует конвертировать отсутствующий в Web-safe палитре цвет картинки в его ближайший эквивалент в web-safe палитре. Отметим, что цвета Web-Палитры воспроизводятся одинаково на платформах Windows и Mac OS и не нуждаются в имитации посредством опции Dithering.

Откроем оптимизированный файл 14Start2.psd и выберем опцию View > Preview > Browser Dither. Обратите внимание на появление Browser Dither на коричневом фоне позади надписи African Savannah. Теперь применим сдвиг (web-shift) цвета для снижения величины Browser Dither. Если вы не замечаете эффекта Dithering, увеличьте изображение сильнее или выключите, а затем включите опцию dither preview сочетанием клавиш Ctrl+Shift+Y. Теперь ткните пипеткой в крапчатый (dithered) коричневый фон African Savannah. Его цвет сразу появится в цветовой палитре. Щелкнем кнопку Web-shift в нижней части палитры. Образец цвета изменит свое положение в палитре, а в его центре появится ромб, указывающий, что цвет смещен до ближайшего эквивалентного в палитре Web.

Отметим, что мы можем также быстро выполнить так называемый color mapping, т.е. назначить всем пикселям определенного цвета новый цвет или прозрачность. Подробнее об этом см. online help.

Установление прозрачности фона

Прозрачный фон позволяет поместить непрямоугольный графический объект в формате GIF или PNG на фоне web-страницы. Прозрачные области прямоугольного фона вне произвольных контуров графического объекта делают фон web-страницы видимым.

Чтобы с этим познакомиться, сначала создадим участок прозрачности в нашем изображении. Для этого удалим белый фон вокруг изображения карты. С этой целью конвертируем слой Background в обычный слой. Слой Background не может содержать прозрачности, поскольку по условию ниже него ничего нет. Поэтому если вы примените описанную выше технику к слою background, это вместо появления прозрачности приведет к замене цвета выбранных пикселей на цвет background. Итак, откроем файл 14Start2.psd в ImageReady. Выберем Original tab в верхней части окна изображения. Выберите опцию Fit on Screen в меню Zoom Level в нижнем левом углу окна изображения. В меню палитры слоёв откройте опции слоя (layer options). Не изменяя установок по умолчанию, кликните ОК. Теперь в палитре слоев появился слой Layer 0.

Использование Magic Wand для создания прозрачности

Для быстрого удаления белого фона и создания прозрачности вокруг карты зоопарка используем волшебный ластик (magic eraser). Он удаляет все пиксели выбранного цвета «единым кликом». Однако, белый цвет, присутствующий внутри карты зоопарка, удалять не следует. Поэтому создадим выделение для защиты внутренней области карты зоопарка.

Протащим инструмент прямоугольного выделения , как показано на рисунке, чтоб захватить весь текст и все 5 цветных областей карты зоопарка. Инвертируем выделение командой Select > Inverse. Выберем инструмент Magic Eraser. В опциях инструмента отмените опцию Contiguous (непрерывно), чтобы удалить все белые пиксели в выделении, включая обособленные белые участки внутри листьев. Щелкните белую область вне карты зоопарка. Теперь все белые пиксели исчезли появилась прозрачная область.

Предохранение и предварительный просмотр прозрачных областей

Теперь следует подтвердить, что прозрачные области картинки будут выступать в качестве прозрачных пикселей в оптимизированном GIF-файле. Поскольку в Image Ready функция предварительного просмотра показывает картинку на web-странице с белым фоном, изменим цвет подложки изображения, чтобы увидеть прозрачность. Убедитесь, что в палитре оптимизации в окошке transparency стоит птичка.

Если вы не видите это окошко, выберите команду Show Options в меню палитры Optimize. Выбор прозрачности конвертирует области первоначального изображения с величиной opacity менее 50% в прозрачность фона оптимизированного изображения. Теперь выполните команду Select > Deselect, а затем - File > Save. Щелкните образец цвета подложки (Matte swatch) в палитре Optimize и выберите любой цвет, кроме белого. Затем кликните ОК, чтобы закрыть окно. Выполним команду File>Preview In, чтобы выбрать Web-браузер из подменю. Браузер откроется и покажет оптимизированное изображение в левом верхнем углу окна. Кроме того будут показаны размеры и формат файла, установки для оптимизации изображения и HTML-код, использованный для предварительного просмотра. На последней иллюстрации слева направо показано изображение соответственно с активной и неактивной опцией Transparency. Теперь можно выйти из браузера.

Обрезка лишних областей фона

Обрежем ненужные прозрачные пиксели, чтобы уменьшить размер файла. В Image Ready выполним команду Image>Trim. В открывшемся диалоговом окне выберем Transparent pixels и щелкнем ОК. Теперь обрезка выполнена.

Сохраним файл с помощью команды Save>Optimized As. В открывшемся диалоговом окне оставим имя по умолчанию - 14 Start2.gif и щелкнем Save. Если после этого откроется диалоговое окно Replace Files (заменить файлы) щелкнем Replace (заменить), а после этого - File>Close. Сохранять файл перед закрытием не надо, поскольку он нам в этом уроке больше не понадобится.

Создание прозрачности Dithered Transparency

Создадим dithered transparency для графики, которая будет служить точкой входа с другой Web-страницы на карту зоопарка. Применив Dither от непрозрачной тени к прозрачности, создадим плавный переход от изображения к любому цвету заднего плана на странице. Для этого сначала применим эффект падающей тени к изображению, а затем применим опцию Dithering к этой падающей тени, чтобы она плавно переходила в цвет заднего плана web-страницы. Это можно сделать в Photoshop или в ImageReady, используя те же инструменты, которые просто несколько иначе размещены.

Итак, файл, над которым мы собираемся работать, будет служить кнопкой для входа с портала на web-страницу зоопарка. Добавим к кнопке падающую тень, чтобы изображение «всплыло» над подложкой, подчеркивая, что это интерактивный элемент страницы. Выполним команду File>Open>14Start3.psd. В палитре слоёв щелкнем кнопку Add a Layer Style и выберем эффект Drop Shadow из падающего меню. В диалоговом окне Layer Style (Photoshop) или Drop Shadow Palette (ImageReady) назначим Distance 15, Spread 7%, Size 15. В Photoshop кликнем ОК, чтобы закрыть диалоговое окно Drop Shadow.

Затем сохраним файл: File>Save. Теперь можно добавить Transparency Dithering к падающей тени. Как мы знаем, Dithering - это способ создания градаций цветов с ограниченной цветовой палитрой. Это полезно для Web-графики, так как позволяет имитировать множество цветов при малых размерах файла и высокой скорости его загрузки. Итак, для выбранного файла 14Start3.psd выполним команду File > Save for Web (в ImageReadу это не нужно). В открывшемся диалоговом окне Save for Web (Photoshop) или в окне изображения (ImageReady) выберем Optimized tab. В правой части окна Save For Web (Photoshop) или в палитре Optimize palette (ImageReady) установите Settings - GIF 128 Dithered. Внешний вид этих палитр для Photoshop и ImageReady показан слева. Поставьте птичку в окне Transparency. В ImageReady, если окно Transparency отсутствует, откройте меню палитры Optimize palette и выберите Show Options или щелкнитеe двойные стрелки () на закладке Optimize чтобы развернуть палитру и увидеть все опции. В открывшемся меню ниже окна Transparency назначьте Diffusion Transparency Dither.

Для опции Amount установите 55%. Щелкните образец подложки Matte Swatch, выберите любой цвет, кроме белого (мы выбрали светло-коричневый R=220, G=190, B=150) и щелкните ОК. Для просмотра результатов увеличьте изображение до 400% или более. Видно, что пиксели, ближайшие к контуру зеленой области имеют черный цвет, а остальные пиксели постепенно приближаются по цвету к подложке по мере удаления о контура области. Затем верните масштаб изображения на 100%. В нижней части диалогового окна Save For Web щелкнем кнопку с миниатюрой браузера или кликнем стрелку для выбора браузера из всплывающего меню. В ImageReady используйте кнопку Preview In Default Browser в инструментальном ящике, чтобы открыть файл в браузере. Находясь в браузере, обратите внимание, как тень плавно переходит в цвет подложки. Затем закройте браузер и вернитесь в Photoshop или ImageReady. Щелкните кнопку Save в диалоговом окне Save For Web (или File>Save Optimized в ImageReady). В диалоговом окне Save Optimized As примем установки по умолчанию и сохраним файл.

Работа с картами изображения (image maps) в ImageReady

Image map - это изображение, содержащее многочисленные гипертекстовые связи с другими файлами в сети. Различные области (hotspots) карты изображения связаны с различными файлами. ImageReady создаёт карты изображения для клиента (client-side) и для сервера (server-side). Photoshop позволяет «нарезать на ломтики» (slices) изображение, что по некоторым функциям сходно с картами изображения. Однако создавать карты изображения в Photoshop нельзя. Как нарезать изображение на ломтики (slices) и связать каждый ломтик с определенной web-страницей, будет рассказано в уроке 15.

Создание и просмотр карт изображения в ImageReady

Карты изображения позволяют связать любую часть картинки (image map area) с определенным адресом (URL) в Web. Эта связь может быть установлена с текстовыми файлами, другими изображениями, аудио и видео или мультимедийными файлами, другими страницами сайта или с другими сайтами. Также можно создавать эффект прокрутки в областях карты изображения. Главное отличие между картами изображения (Image Maps) и ломтиками (Slices) при создании связей (links) - в том, как исходное изображение экспортируется в качестве web-страницы. Использование карт изображения сохраняет экспортированное изображение нетронутым как единый файл. Использование ломтиков экспортирует изображения отдельными файлами. Другое отличие состоит в том, что карты изображения позволяют связывать круговые, прямо- и многоугольные области изображения, а ломтики (slices) связывают только прямоугольные области. Чтобы избежать непредсказуемых результатов, не создавайте области карт изображения в ломтиках, которые уже содержат URL-связи. В некоторых браузерах такие связи (image map links или slice links) игнорируются.

Использование слоёв для создания карт изображения

Создадим карту изображения в существующей картинке. Назначим области (hotspots) используя слои или один из инструментов карт изображения. Затем сопоставим каждой области определенный URL, связав с нужным сайтом во Всемирной Паутине (WWW). Будем использовать версию файла с картой зоопарка, где каждый участок определенного цвета находится на своём слое. Преобразуем каждый слой в область (hotspot) карты изображения. Размещение областей на слоях позволяет облегчить задачу. Итак, в ImageReady, choose File > Open, and open the file 14Start4.psd. В меню Settings палитры Optimize выберем GIF 64 Dithered. В палитре слоёв выберем слой African Savannah. Затем выберем Layer > New Layer Based Image Map Area. Появится прямоугольная область, окаймлённая красной линией. В ней находится вся часть изображения African Savannah. Окаймляющая линия показывает hotspot-область, включенную в карту изображения. Потом в группе палитр Animation palette group щелкнем закладку Image Map и выберем Polygon из всплывающего меню Shape. Вы можете также открыть палитру Image Map, выбрав Window >

Show Image Map. Теперь красный контур очерчивает область саванны. Наконец, в опции Qulity (качество) палитры Image Map установите значение 90, чтобы красная линия точнее следовала контурам области savannah. Теперь, когда область hotspot определена, свяжем ее с другим файлом на нашем web-сайте или с другим сайтом в сети. В рамках этого урока создадим связи с фиктивными адресами (URL) для зоопарка. В опции URL палитры Image Map напечатайте вымышленый адрес сайта - http://www.adobe.com/african_savannah.html, в текстовом окне URL. В палитре слоёв появляется миниатюра указательного пальца на слое African Savannah, которая указывает, что здесь находится карта изображения.

Вы можете попрактиковаться и с другими слоями, создавая на них карты изображения и даже связывая с реальными сайтами в www. Не беда, если вы ошиблись, вводя URL. Позже мы рассмотрим редактирование информации в картах изображения. Завершив упражнение, сохраните файл.

Настройка значения гаммы для разных платформ

Прежде чем выполнить заключительные шаги и опубликовать иллюстрацию с картами изображения в сети, следует проверить, совместима ли яркость изображения для мониторов на различных платформах. Обычно в Windows яркость (gamma) средних тонов (midtones) меньше, чем на машинах Macintosh. Перед изучением этого раздела урока нужно откалибровать монитор, как это описано в уроке 17. В инстументальном ящике ImageReady кликнем кнопку Toggle Image Maps Visibility (включить-выключить карты изображения), чтобы скрыть полигональные линии границ карт изображения.

Выберем View > Preview > и далее - команду, для предварительного просмотра, как будет выглядеть наша картинка на другой платформе, не используемой нами. Если мы работаем в Windows, выберем Standard Macintosh Color. После этого выберем Image > Adjustments > Gamma. Далее, если мы работаем в Windows, кликнем Windows to Macintosh, затем - OK. Теперь выберем File>Save Optimized As. В открывшемся диалоговом окне выберем Images Only из меню Format, сохраним имя файла по умолчанию - 14Start4.gif и щелкнем кнопку Save. Чтобы выполнить предварительный просмотр карт изображения в web-браузере, выберем File>Preview In, после чего выберем нужный браузер из подменю. В окне браузера, перемещая указатель по различным областям зоопарка, вы увидите, что эти области содержат гипертекстовые ссылки. Если на компьютере есть модем, и вы подключены к Интернет, а для создания ссылок использованы реальные адреса (URL) сайтов, то вы можете щелкнуть по определенной области (hotspot) зоопарка и перейти к связанной с нею web-страничкe. В заключение выйдем из браузера и вернемся в ImageReady.

Создание HTML файла и редактирование информации в картах изображения

При сохранении карты изображения в HTML файле базовые теги HTML, необходимые для отображения картинки на web-странице, генерируются автоматически. Простейший способ достичь этого - просто выбрать опцию HTML and Images Format перед сохранением оптимизированного изображения. После создания HTML файл можно многократно редактировать для внесения изменений - например, таких как новые или измененные карты изображения или адреса страниц (URL). В ImageReady выберем File > Save Optimized As. В открывшемся диалоговом окне выберем опцию HTML and Images во всплывающем меню Save As Type. Не меняя названия файла (14Start4.html), сохраним его. Если откроется диалоговое окно Replace Files (замена файлов), кликнем Replace (заменить). Отметим, что в Photoshop вы создаете HTML файл в диалоговом окне Save Optimized as, которое появляется после оптимизации изображения и щелчка ОК в диалоговом окне Save For Web.

Когда выбрана опция HTML and Images, страница HTML, содержащая картинку, сохраняется автоматически, в дополнение к графическому файлу. Файл HTML получает то же имя, что и изображение, но с расширением .html. Применим ImageReady для изменения одной из URL-связей и обновления HTML файла. В инструментальном ящике выберем инструмент Image Map Select , спрятанный под миниатюрой . В окне изображения щелкнем, чтобы выбрать карту изображения African Savannah. В палитре Image Map изменим URL на http://www.adobe.com/newafrica.html.

Если вы собираетесь редактировать еще какую-то информацию в картах изображения, снова используйте инструмент выбора карты изображения (Image Map Select tool) и повторите описанные здесь действия. Когда все изменения внесены, выберите File>Update HTML. В открывшемся диалоговом окне выберите 14Start4.html file, и щелкните Open. Затем щелкните Replace (заменить), когда появится диалоговое окно Replace Files, после чего щелкните OK. После этого закроем файл (File>Close), не сохраняя изменений.

Вы можете использовать ваш Web-браузер для открытия и просмотра файла 14Start4.html. Также можно открыть этот файл в текстовом редакторе или редакторе HTML для изменения HTML-кода. Не используйте длинные имена в названиях файлов. Название должно содержать не более 8 символов и иметь расширение .html или .htm. Также нельзя использовать такие символы как вопросительный знак или звездочка, пробелы между буквами в названиях файлов. Если всё же нужно использовать пробелы или др. специальные символы, обратитесь к руководству по HTML. Так, для создания пробела между буквами вместо него следует ввести “%20”.

Пакетная оптимизация файлов

ImageReady поддерживает пакетную обработку с помощью Droplets. Это миниатюры, содержащие действия, которые ImageReady должна выполнить над одним или несколькими файлами. Чтобы создать droplet, вытащите миниатюру droplet из палитры оптимизации на рабочий стол. Чтобы использовать droplet, перетащите файл или папку на иконку droplet на рабочем столе.

В ImageReady выберем File > Open и откроем любой файл в папке Lessons/Lesson14/Photos. Экспериментируйте с различными форматами файлов и др. установками в палитре оптимизации, пока вас не устроит результат. Мы в уроке использовали установки JPEG, High quality (60), и Progressive. Затем перетащите миниатюру droplet из палитры оптимизации на рабочий стол. Возможно, для этого придется изменить размер окна ImageReady, чтобы рабочий стол был виден. Потом закройте файл, не сохраняя его. Затем перетащите с рабочего стола папку Photos из папки Lessons/Lesson14 и поместите ее на дроплет с целью пакетной обработки всех фотографий в папке. ImageReady оптимизирует каждый файл и добавляет web-изображение в папку Photos. Затем откройте любое из web-изображений в папке Photos. Видно, что оно оптимизировано согласно установкам, назначенным при создании дроплета. Теперь можно выйти из программы ImageReady.

Контрольные вопросы

1. В чем преимущество ImageReady перед Photoshop при оптимизации изображений?

2. Что такое цветовая таблица?

3. Когда возникает Browser Dither и как его уменьшить?

4. С какой целью назначают цвет подложки для GIF-изображения?

5. Опишите процедуру создания карты изображения.

Размещено на Allbest.ru