Формат GIF (Graphics Interchange Format)

GIF - второй допустимый формат для Web-графики. Вы можете работать с изображениями, которые планируете сохранить в формате GIF, в цветовом режиме RGB, однако перед сохранением придется преобразовать их в режим Индексированные цвета (Indexed Color). Чтобы вспомнить подробности о режимах, обратитесь вновь к главе "цветовые режимы и модели".
Формат GIF позволяет сохранять файлы с прозрачным фоном, что крайне полезно при создании графических образов кнопок и подобных элементов интерфейса. Программа Photoshop допускает только квадратный или прямоугольный холст документа. Поэтому если вы не сохраните графический образ кнопки в виде файла формата GIF с прозрачным фоном, то при помещении изображения кнопки на страницу Web-узла она будет окружена белым квадратом фоновой заливки.
Давайте попробуем создать изображение для Web-страницы с прозрачным фоном.

1. Откройте файл.

Рис. 14.4. Изображение цветка

2. Дважды щелкните на кнопке инструмента Лассо (Lasso). В палитре Лассо (Lasso Tool Options) установите параметр Растушевка (Feather) равным 5 пикселям, а затем аккуратно постройте границу выделенной области вокруг цветка, как показано на рис. 14.5.

Рис. 14.5. Цветок выделен с помощью инструмента Лассо (Lasso)

3. Выберите команду меню Редактирование - Скопировать (Edit - Copy), чтобы скопировать изображение цветка в буфер обмена.
4. Теперь выберите команду Файл - Новый (File - New), чтобы создать новый документ. Не забудьте установить переключатель Прозрачная основа (Transparent) в разделе Содержимое (Contents) окна диалога Новый (New), показанного на рис. 14.6.

Рис. 14.6. Не забудьте сделать фон прозрачным

5. Выберите команду меню Редактирование - Вклеить (Edit - Paste). Результат показан на рис. 14.7.

Рис. 14.7. Цветок на прозрачном фоне

Теперь, чтобы окончательно завершить работу над этим изображением, давайте проделаем следующее: изменим цветовой режим на Индексированные цвета (Indexed Color) и сохраним результат в виде файла с чересстрочной разверткой.

1. Выберите команду меню Изображение - Режим - Индексированные цвета (Image - Mode - Indexed Color).
2. Щелкните на кнопке Да (OK) в окне сообщения Выполнить сведение? (Flatten Layers?).
3. В появившемся вслед за этим окне диалога, показанном на рис. 14.8, выберите вариант Сетевая (Web) в раскрывающемся списке Палитра (Palette).

Рис. 14.8. Выбор сетевой палитры

4. Щелкните на кнопке Да (OK).
5. Выберите команду меню Файл - Сохранить копию (File - Save a copy).
6. Проследите за тем, чтобы в раскрывающемся списке Сохранить (Save as) был выбран тип CompuServe GIF.

Рис. 14.9. Выбран тип файлов CompuServe GIF

7. Задайте файлу имя и щелкните на кнопке Да (OK).
8. В появившемся окне диалога установите переключатель Порядок записи (Raw Order) в положение Чересстрочный (Interlaced). Этот режим аналогичен варианту Прогрессивный (Progressive), относящемуся к формату JPEG. В режиме чересстрочного отображения броузер пользователя, обратившегося к вашему Web-узлу, получает возможность быстро загрузить прореженную версию изображения, а затем улучшить ее качество за счет прорисовки ранее пропущенных строк по мере их подгрузки.

Пока оставьте изображение открытым. Вы вернетесь к нему через пару минут. Поскольку вы использовали команду Сохранить копию (Save a copy), оригинал остался нетронутым.
Теперь давайте попробуем открыть только что созданный файл в броузере.

1. Запустите свой любимый броузер, например Netscape Navigator или Internet Explorer.
2. В меню броузера выберите команду Файл - Открыть (File - Open File).
3. Найдите и откройте только что созданный файл. Результат показан на рис. 14.10, из которого следует, что желаемый эффект не достигнут.

Рис. 14.10. Фон, окружающий изображение из файла формата GIF, совершенно непрозрачен

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

1. Вернитесь к изображению цветка, оставленному в активном окне документа программы Photoshop несколькими шагами ранее.
2. На этот раз вместо команды Сохранить копию (Save a copy) выберите команду Файл - Экспорт - GIF89a (File - Export - GIF89a). Появится окно диалога, показанное на рис. 14.11.

Рис. 14.11. Окно диалога GIF89a Export. Параметры (GIF89a Export Options)

3. Щелкните на кнопке инструмента Пипетка (Eyedropper).
4. Щелкните на части изображения, окрашенной в белый цвет. Белый цвет изменится на серый.
5. Щелкните на кнопке Да (OK). Назовите файл каким-то именем и сохраните его в формате CompuServe GIF, как в предыдущем упражнении.
6. Снова запустите броузер.
7. В меню броузера выберите команду Файл - Открыть (File - Open File).
8. Найдите только что сохраненный файл и откройте его. Вы должны увидеть примерно то, что изображено на рис. 14.12.

Рис. 14.12. Изображение в формате GIF с прозрачным задним планом на фоне белого цвета. Остались еще кое-какие огрехи, но в целом результат удовлетворительный

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

Подготовка фона страницы

Признаюсь, у меня смешанное отношение к фоновым рисункам Web-страниц. Оригинальный фон действительно может придать индивидуальность вашей домашней странице, но он же способен сильно затруднить чтение текста, размещенного поверх фона, вызывая раздражение у посетителей узла. Цитируя Web-дизайнера Дэвида Сигела (David Siegel), "Это тот случай, когда упаковка портит содержимое". В то же время, если использовать изображения заднего плана разумно, они могут внести свою лепту в оформление Web-узла и повысить его привлекательность.

Мозаичный фон

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

1. Выберите команду меню Файл - Новый (File - New).
2. Создайте новый документ с квадратным холстом размером в 72 пикселя по каждой из сторон, используя прозрачное заполнение, как показано на рис. 14.13.

Рис. 14.13. Параметры для создания образца узора

3. Чтобы иметь уверенность, что в дальнейшем не возникнет никаких сюрпризов с цветом, выберите команду меню Изображение - Режим - Индексированные цвета (Image - Mode - Indexed Color).
4. Выберите в качестве палитры вариант Сетевая, как показано на рис. 14.14.

Рис. 14.14. Окно диалога Индексированный цвет (Indexed Color)

5. Выберите инструмент Аэрограф (Airbrush) и очень тонкую кисть.
6. Дважды щелкните на кнопке инструмента Аэрограф (Airbrush), чтобы вызвать палитру параметров.
7. Выберите в качестве режима наложения пикселей вариант Растворение (Dissolve).
8. Нарисуйте тонкую линию в пределах холста, примерно так, как показано на рис. 14.15.

Рис. 14.15. Образец узора

9. Сохраните файл в формате GIF (при необходимости вернитесь к предыдущему разделу этой главы, чтобы освежить в памяти сведения о GIF).

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

Рис. 14.16. Фон в виде повторяющегося узора в окне броузера Netscape

Фон с полями

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

Рис. 14.17. Домашняя страница с боковыми полями

Чтобы создать фон с полями, выполните следующие действия:

1. Выберите команду меню Файл - Новый (File - New).
2. Большинство пользователей работает с разрешением экрана 640 на 480 пикселей. Чтобы с гарантией вместиться в окно броузера по ширине, установите ширину нового документа равной 640 пикселям.
3. Задайте параметр Высота (Height) равным 1 пикселю, как показано на рис. 14.18. Это поможет вам сохранить минимальный размер файла.

Рис. 14.18. Настройка параметров нового документа

4. Проследите, чтобы в качестве заливки был выбран белый цвет.
5. Теперь нам потребуется изменить цветовой режим с RGB на Индексированные цвета (Indexed Color). Выберите команду меню Изображение - Режим - Индексированные цвета (Image - Mode - Indexed Color).
6. Выберите палитру Сетевая, как показано на рис. 14.19.

Рис. 14.19. Выбор палитры типа Сетевая

7. Щелкните на кнопке инструмента Масштаб (Zoom) и увеличьте левую часть нового документа.
8. Щелкните на поле нужного цветового образца в палитре Каталог (Swatches), чтобы выбрать основной цвет. Я остановился на темно-синем цвете, однако вы можете выбрать оттенок на свое усмотрение.
9. Выберите инструмент Кисть (Paintbrush). Откройте палитру Кисти (Brushes) и выберите кисть размером немного больше 1 пикселя, как показано на рис. 14.20.

Рис. 14.20. Новый документ при большом увеличении

10. Теперь, используя Кисть (Paintbrush) или любой другой инструмент рисования, начинайте раскрашивание. Окрасьте примерно четверть полосы, начиная с левого края. Возможно, вам потребуется еще раз уменьшить масштаб изображения, чтобы убедиться, что окрашена требуемая часть полосы. Впрочем, нет необходимости добиваться, чтобы она составляла точно четверть изображения.
11. Получив удовлетворительный результат, сохраните файл в формате CompuServe GIF. Размер файла должен составлять около одного килобайта, что совсем немного.

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

Рис. 14.21. Фон с боковой полосой контрастного цвета

Как видно из рисунка, часть текста плохо читается. Это вызвано слишком темным цветом, выбранным для боковой полосы, а также тем, что язык HTML не позволяет создавать надписи с достаточно элегантным или интересным в визуальном плане оформлением. (Если только не иметь в виду таблицы стилей, рассмотрение которых выходит за рамки данной книги.)
Имеется, однако, способ обойти данное ограничение за счет использования программы Photoshop для создания надписей.