Photoshop 4-5 - учебный курс
         

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


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

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

Давайте попробуем создать изображение для Web-страницы с прозрачным фоном.

  • Откройте файл 14file01.jpg, находящийся на сопроводительном компакт-диске (см. рис. 14.4).


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

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


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

  • Выберите команду меню Редактирование - Скопировать (Edit - Copy), чтобы скопировать изображение цветка в буфер обмена.

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


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

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


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



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


  • Выберите команду меню Изображение - Режим - Индексированные цвета (Image - Mode - Indexed Color).


  • Щелкните на кнопке Да (OK) в окне сообщения Выполнить сведение? (Flatten Layers?).


  • В появившемся вслед за этим окне диалога, показанном на рис. 14.8, выберите вариант Сетевая (Web) в раскрывающемся списке Палитра (Palette).




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

  • Щелкните на кнопке Да (OK).


  • Выберите команду меню Файл - Сохранить копию (File - Save a copy).


  • Проследите за тем, чтобы в раскрывающемся списке Сохранить (Save as) был выбран тип CompuServe GIF.




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

  • Задайте файлу имя и щелкните на кнопке Да (OK).


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


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

    Теперь давайте попробуем открыть только что созданный файл в броузере.

  • Запустите свой любимый броузер, например Netscape Navigator или Internet Explorer.


  • В меню броузера выберите команду Файл - Открыть (File - Open File).


  • Найдите и откройте только что созданный файл. Результат показан на рис. 14.10, из которого следует, что желаемый эффект не достигнут.




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

    ЗАМЕЧАНИЕ Те из вас, кто стоит на переднем крае технического прогресса и использует Netscape версии 4.0, не увидят белого прямоугольника заднего плана вокруг изображения цветка, потому что в версии 4.0 броузера белый цвет по умолчанию используется в качестве фонового. Это значит, что в данном упражнении вы будете избавлены от неприятностей, но если вам потребуется удалить фон иного цвета, то последовательность действий будет аналогична описываемой ниже.



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

  • Вернитесь к изображению цветка, оставленному в активном окне документа программы Photoshop несколькими шагами ранее.


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




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

  • Щелкните на кнопке инструмента Пипетка (Eyedropper).


  • Щелкните на части изображения, окрашенной в белый цвет. Белый цвет изменится на серый.


  • Щелкните на кнопке Да (OK). Назовите файл каким-то именем и сохраните его в формате CompuServe GIF, как в предыдущем упражнении.


  • Снова запустите броузер.


  • В меню броузера выберите команду Файл - Открыть (File - Open File).


  • Найдите только что сохраненный файл и откройте его. Вы должны увидеть примерно то, что изображено на рис. 14.12.




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

    ЗАМЕЧАНИЕ Хороший способ выбора подходящего формата - это посещение Web-узлов, на которых есть графика, подобная той, какую вы хотите опубликовать. Чтобы определить тип формата, в котором хранится Web-графика, просто щелкните на интересующем вас изображении. На компьютере типа Macintosh следует щелкнуть и удерживать кнопку мыши нажатой, пока не появится окно диалога. На компьютере с операционной системой Windows щелкните на изображении правой кнопкой мыши.

    В окне диалога выберите команду сохранения изображения. Когда появится запрос о том, где вы хотите сохранить файл изображения, обратите внимание на расширение имени файла: в системе Windows .jpg соответствует формату JPEG, .gif - формату GIF. Щелкните на кнопке Да (OK), чтобы сохранить файл, или на кнопке Отмена (Cancel), если вы только хотели узнать тип файла.

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

    Ну а теперь обратимся к вопросу подготовки оригинального фона нашей Web-страницы.


    Содержание раздела