Глава 8

Введение в графику

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

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

Так как еще достаточно много людей используют модемы на 14 400 бод, многие разработчики сайтов накладывают ограничения на размер своих страниц. Как правило, страница вашего сайта, включая любые изображения на ней, не должна превышать 35-40 Кб. Скажите об этом любому дизайнеру-графику; догадайтесь, что вы услышите в ответ? С такими требованиями, казалось бы, не стоит даже и начинать; и все же, следуя некоторым полезным советам по оптимизации ваших изображений, вы будете удивлены, насколько много можно сделать.

В этой главе будут затронуты четыре аспекта использования изображений в ваших сайтах:

- Типы графических форматов, используемых при разработке сайта Всемирной Паутины

- Оптимизация этих форматов путем управления цветом для достижения быстрой загрузки изображений без потери их качества

- Использование Frontpage для работы с изображениями: размещение их на страницах, создание изображений-карт и создание прозрачных файлов формата GIF непосредственно в Редакторе Frontpage

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

Графические форматы

Вы, наверное, уже знаете, что графические форматы часто упоминаются в виде акронима или расширения файла, связанного с форматом, что приводит к определенной путанице. Это касается таких форматов, как BMP, GIF, EPS, TIF, JPEG, WMF и многих других. Однако при работе над вашим сайтом во Frontpage вы будете иметь дело прежде всего с двумя типами изображений: JPEG и GIF. Оба они являются графическими форматами со сжатием и наиболее часто используются при разработке сайтов Internet. Но что, если у вас есть графика в форматах, отличных от JPEG или GIF, и вы хотите использовать ее в вашей странице? Здесь вам повезло, потому что Frontpage может импортировать многие графические форматы, а именно:

При сохранении страницы, которая содержит вставленные и не сохраненные изображения, Frontpage запросит сохранить каждое изображение для текущего сайта. По умолчанию Frontpage сохраняет файлы форматов, отличных от GIF и JPEG, в формате GIF. Если вы хотите сохранять изображения в формате JPEG, то перед сохранением страницы укажите это в диалоговом окне Image Properties (Свойства Изображения).

Формат JPEG (Joint Photographic Experts Group, Объединенная экспертная группа по фотографии) — это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Для изображения в электронной форме не является необычным некоторая потеря четкости, особенно при преобразовании из одного формата в другой. Исходя из того что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды Web-сайта, в которой изображения часто масштабируются, преобразовываются или изменяются иным образом. Формат JPEG наиболее подходит для фотографий или изображений с количеством цветов более 256. В сетевой графике большое значение имеет число битов, используемых для представления каждого цвета изображения, известное также как глубина цвета или битовая глубина (bit depth) файла. Изображения с восьмью битами цветовой информации на пиксел позволяют обеспечить 256 различных цветов. Большее количество бит означает большее количество поддерживаемых цветов.

Формат GIF (Graphics Interchange Format, Формат обмена графическими данными) — это упакованный формат для изображений, содержащих 256 или менее цветов. Формат GIF обычно используется для изображений, содержащих в основном ровные цвета, например, таких, как иллюстрации. Формат GIF также поддерживает прозрачность и чересстрочное отображение.

Рис. 8.1. Различные битовые глубины и соответствующее количество цветов

Благодаря Frontpage вы получите замечательную свободу манипуляций с файлами в формате GIF. Одним щелчком мыши вы можете сделать один из цветов вашего рисунка прозрачным; вы можете прямо поверх изображения напечатать текст любого цвета, шрифта и размера. Все это будет описано ниже в этой главе.

Управление цветом

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

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

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

- Обычно формат JPEG хорошо подходит для фотографических изображений, а формат GIF — для изображений, содержащих ровные цвета, таких, как иллюстрации и штриховая графика

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

- Если вы создаете изображение, которое содержит только черный и белый цвета, то сохраните его как черно-белое, это поможет сократить размер его файла. В Microsoft Image Composer вы можете сделать это, установив при сохранении цветовой формат Black and White

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

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

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

- Если вы работаете с Adobe Photoshop и хотите сохранить изображение в формате GIF, то измените цветовой режим RGB на Indexed Color (Индексированные цвета) и выберите сетевую палитру (опция Palette: Safety, она включена в Photoshop версии 4; если вы работаете с предыдущими версиями, то вам придется поискать эту палитру в Internet) без диффузии (опция Dither: none)

- Если вы используете Photoshop и сохраняете изображения как GIF, и при этом вы знаете, что в изображении менее 256 цветов, то попробуйте использовать точную палитру (Palette: Exact). Точные палитры содержат ровно столько цветов, сколько есть в изображении, тем самым уменьшая размер файла

Совет: Для редактирования изображений вы можете использовать программу Microsoft Image Composer, входящую в Frontpage Bonus Pack.

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

И как это ни парадоксально, некоторые люди вообще не желают дожидаться загрузки графики, так что не забудьте использовать в вашей странице альтернативный текстовый вариант (объяснения вы найдете далее в разделе "Альтернативные представления") и подумайте о том, как эти ненавистники графики смогут путешествовать по вашему сайту.

Цвета в HTML

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

Наверное, вы знаете, что ваш монитор для отображения цветов на экране использует цветовую модель RGB (Red, Green, Blue, Красный, зеленый, синий). Однако в HTML для задания цвета используется шестнадцатеричное представление. Вы можете спросить себя: "Зачем, собственно, мне разбираться с этими жуткими числами?" Если вы сами создаете графику и не хотите, чтобы цвета были размыты или если вы просто хотите глубже понять детали представления цвета в HTML, то все нижеследующее, несомненно, будет вам небесполезно. Так как мы уже знаем, что предпочтительно использовать 216-цветную безопасную палитру, то мы остановимся на представлении этой палитры в шестнадцатеричном виде и в RGB.

В коде HTML Web-страниц нередко можно встретить атрибут color. Например, если на странице есть черный текст, то этот код будет выглядеть следующим образом: <font color="#oooooo"> ... </font>. Шестнадцатеричные цвета представляют собой наборы из трех двузначных шестнадцате-ричных чисел. Каждое отдельное число соответствует значениям R, G и В, общее количество символов в наборе равно шести. Например, 000000 соответствует черному, который является отсутствием цвета. Другое крайнее значение — FFFFFF, т. е. максимальная интенсивность всех трех цветов соответствует белому цвету. В системе координат RGB черный цвет представляется последовательностью о, о, о, а белый — 255, 255, 255. Вы можете задать любую комбинацию из шести шестнадцатеричных цифр и придумать произвольный шестнадцатеричный цвет, однако для того, чтобы не выйти за пределы 216-цветной палитры, мы будем использовать комбинации из достаточно ограниченного множества значений.

Настройка фонового рисунка

Ниже приведено несколько советов по ускорению загрузки фоновых изображений без ущерба для их внешнего вида:

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

- Для уменьшения размера файла уменьшите размер плитки фона

- Не размещайте на фоне мелких деталей, помните, что большая часть его будет покрыта текстом

- Поэкспериментируйте с фоновыми изображениями, поставляющимися вместе с Frontpage; большинство из этих рисунков очень малы по размеру. О том, как их вставить в страницу, читайте в следующем разделе. Множество бесплатно распространяемых рисунков вы можете найти при помощи вашей любимой поисковой системы, используя ключевое слово backgroung (фон)

- Не забывайте о возможности использования в качестве фона цвета, а не изображения; это уменьшит время загрузки, в некоторых случаях значительно

Примечание:  Существует простой способ преобразования изображения в фоновый рисунок: откройте его в Image Composer и выберите в меню Tools пункт Warps And Filters (Фильтры и эффекты). На панели инструментов Warps And Filters выберите категорию Color Enhancement (Цветовые эффекты), а затем эффект Wash (Размыть). Регулируя уровень Wash Opacity (Степень размывания) вы можете корректировать интенсивность эффекта размывания. Операция размывания сделает из вашего изображения привлекательный и ненавязчивый рисунок фона для Web-страницы.

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

Теперь, когда вы знаете немного о видах графических форматов и об управлении цветом, настало время выяснить, как разместить изображения на Web-страницах. Для этого в меню Insert Редактора выберите команду Image (изображение) и далее следуйте описанной ниже процедуре:

Рис. 8.2. Выбор команды   Image в меню Insert.

1. В окне Редактора поместите курсор в то место, где вы хотите видеть изображение.
2. В меню Insert выберите Image. Если при этом у вас запущен Проводник, вы увидите показанное на рис. 8.3 диалоговое окно Image.

Рис. 8.3. Диалоговое окно Image

Здесь вы можете выбрать любой файл в открытом сайте, а также просмотреть содержимое его папок. Щелкнув на любом файле, вы увидите его содержимое в правой области диалогового окна. Если вам известен URL файла, то вы можете просто ввести его в текстовом поле; кроме этого, выбрать изображение можно также при помощи браузера — для этого следует нажать кнопку Use your Web Browser to select a page or file справа от текстового поля URL. Наконец, вы можете указать файл, расположенный на вашем компьютере, нажав соседнюю кнопку Select a file on your computer; в этом случае появится описанное далее диалоговое окно Select File.

При автономной работе в Редакторе вы сразу увидите диалоговое окно Select File, показанное на рис. 8.4.

Рис. 8.4. Диалоговое окно Select File

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