Работа с фрагментами

Одним из методов оптимизации изображений для размещения на Web-сайтах является разбиение изображения на фрагменты (slices). Это позволя­ет уменьшать объем отдельных графических единиц, пересылаемых по сети и загружаемых на Web-страницы, и присваивать этим фрагментам дополни­тельные функции. В частности, Adobe Illustrator позволяет задавать различ­ные фоновые цвета для каждого из фрагментов, превратить любой фрагмент в кнопку, присвоив ему адрес URL, ввести текст для отображения в строке статуса при подведении курсора к фрагменту, а также ввести альтернатив­ный текст, отображаемый во время загрузки изображения. В Adobe Illustrator для работы с фрагментами служат два инструмента, кото­рые находятся в левой части палитры инструментов над инструментом Hand Tool (Прокрутка):

• инструмент Slice Tool (Фрагмент) служит для разделения изображения на фрагменты;

• инструмент Slice Selection Tool (Выделение фрагмента) применяется для выделения фрагментов.

Также для работы с фрагментами используются подкоманды команды Slice Tool (Фрагмент) из меню Object (Объект).

Экспортирование изображений для Web-страниц

Для экспортирования изображений, предназначенных для публикации на Web-сайтах в используемые для этой цели форматы, а также для их оптими­зации предназначена команда Save for Web (Сохранить для Web) из меню File (Файл).

Для экспорта документов и отдельных объектов, созданных в Adobe Illustrator, в изображения, предполагаемые для размещения на Web-страницах, можно использовать и обычные команды экспорта, и функцию растрирования вектор­ной графики. При подготовке таких изображений нужно не забывать использовать только цвета специальной Web-безопасной палитры.

Диалоговое окно Save for Web (Сохранить для Web) изображено на рис. 7.55. Оно практически полностью повторяет подобное диалоговое окно программы Adobe Photoshop.

Рис. 7.55. Диалоговое окно Save for Web

В этом диалоговом окне можно выбрать один из семи форматов, исполь­зуемых для представления изображений на Web-страницах:

• растровый формат GIF (Graphic Interchange Format) — один из основных форматов для представления графических данных в Web. Позволяет со­хранять изображения с индексированными цветами (не более 256). Ис­пользует алгоритм сжатия без потерь. Поддерживает прозрачность. Ис­пользуется для сохранения простых графических изображений с ограни­ченным количеством цветов — надписей, схем, логотипов и т. п.;

• растровый формат JPEG (Joint Photographic Experts Group) — один из основных форматов для представления графических данных в Web. По­зволяет сохранять полноцветные изображения (фотографии, иллюстра­ции с цветовыми растяжками и т. д.). Использует алгоритм сжатия с по­терями, не поддерживает прозрачность;

• растровый формат PNG-8 (Portable Network Graphics) представляет собой улучшенный формат GIF, но PNG-8 не нашел широкого распростране­ния в сети, и многие старые версии браузеров его не поддерживают;

• растровый формат PNG-24 (Portable Network Graphics) поддерживает полноцветные изображения с градиентной прозрачностью, использует алгоритм сжатия без потерь. Но, так же, как и PNG-8, не нашел широ­кого распространения в сети, и многие старые версии браузеров его не поддерживают;

• векторный формат SWF — формат программы Macromedia Flash. Пред­назначен для создания компактной масштабируемой анимированной графики. Не поддерживает прозрачность. Для просмотра изображений в этом формате во многих браузерах необходимо дополнительное про­граммное обеспечение;

• векторный формат SWG (Scalable Vector Graphics) — предназначен для создания и отображения масштабируемой векторной графики. Основан на технологиях XML и JavaScript. Пока широко не распространен;

• растровый формат WBMP — формат, появившийся в этом диалоговом окне только в последней версии Adobe Illustrator 11 и представляющий собой разновидность формата BMP (BitMap) для сохранения монохром­ного (1-битового) изображения.

Выбрав формат, можно настроить его функции и оптимизировать количест­во цветов, степень сжатия и т. д., уменьшив тем самым размер файла. Мож­но изменить размер изображения.

Результатом сохранения изображения с помощью диалогового окна Save for Web (Сохранить для Web) является экспортирование его оптимизированных фрагментов в набор графических файлов и получение готового HTML-кода.

Практическая работа "Упаковка"

Работа по созданию упаковки является итоговой работой для закрепления всех знаний и умений, полученных в результате работы с учебником.

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

Условия выполнения

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

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

На упаковке обязательно должна присутствовать иллюстрация. Это может быть любое загруженное извне растровое или векторное изображение. В качестве какого-либо смыслового элемента (логотипа, элемента оформле­ния и т. п.) на упаковке желательно разместить объект, созданный на осно­ве кривых. И наконец, все элементы работы должны находиться на каком-либо фоне.

Под макетом упаковки часто понимают развертку упаковки. Мы в своих работах ограничимся разработкой макета лишь одной из ее плоскостных частей.