4. Подготовка графического материала для web-страницы в редакторе Image Ready

4.1. Средства оптимизация web-графики

Графическая информация передается медленнее текстовой и время загрузки изображений пропорционально размеру их графических файлов. Оптимизация графических изображений (уменьшение размера) способствует более быстрой загрузке Web-страниц. Рекомендуемый объем графики для web-страницы 30 кб.

Приемы оптимизации графики на Web-странице

• использование сжатых и специальных форматов файлов;

• уменьшение количества цветов в графических изображениях;

• оптимизации параметров сжатия для отдельных фрагментов изображения.

Наиболее распространенные форматы графических файлов

PSD (Adobe Photoshop) (.psd) – внутренний формат Photoshop, устанавливается по умолчанию для всех видов вновь создаваемых документов, отличается от большинства растровых форматов возможностью хранения слоев (layers).

BMP (Windows Device Independent Bitmap) (.bmp) – стандартный формат графических файлов, используемый в Windows.

PCX (Soft Publisher's Paintbrush) (.pcx) – разработан фирмой Z-Soft специально для графического редактора PC PaintBrush под операционную систему MS-DOS, обладает примерно такими же возможностями, как BMP. Изображения в формате PCX можно посмотреть большинством программ под DOS.

GIF (Graphics Interchange Format) (.gif) – самый популярный формат в интернет, использует режим индексированных, имеет небольшие размеры файлов изображений, возможность режима interleaved (постепенного проявления изображения, в этом режиме строки изображения выводятся на экран не подряд, а в определенном порядке: сначала каждая 8-я, затем - 4-я и т.д.), возможность реализации эффекта прозрачности и возможности хранить в одном файле несколько картинок с указанием времени показа каждой (анимированный GIF).

JEPG (Joint Photographic Experts Group) (.jpg) – популярный формат для хранения фотографических изображений JPEG (или JPG), может хранить только 24-битовые полноцветные изображения, сжатие фотографий происходит с потерями качества, не рекомендуется использовать формат JPEG для хранения изображений, подлежащих последующей обработке, не поддерживает анимацию и прозрачный цвет.

TIFF (Tag Image File Format) (.tif) – универсальный формат для изображений с цветовыми каналами, является переносимым на разные платформы (Windows и Macintosh), используется в издательских системах, поддерживает множество типов изображений и полноцветные изображения.

 Запустите редактор Photoshop. Для загрузки приложения Photoshop выполните Пуск, Программы, Adobe, Photoshop. Описание основных инструментов и элементов интерфейса Photoshop приведено в Приложении 2.

Откройте графический файл (Файл-> Открыть), можно также использовать сканированные фотографии или картинки, скопировать фотографии из Интернет и т.д.

 Сохраните изображение как файлы с расширениями .psd, .gif, .jpg, .bmp, .tif

Для сохранения документа выполните Файл->Сохранить как… В диалоговом окне Сохранить как…введите имя документа и укажите тип файла.

 Сохраните изображение с оптимизацией для Web. Выполните Файл, Сохранить для Web.

 Сравните размеры полученных файлов.

Для загрузки приложения ImageReady выполните Пуск, Программы, Adobe, ImageReady или загрузите редактор Photoshop выполните Файл, Перейти к Adobe ImageReady.

Программа позволяет выполнять предварительный просмотр изображения при сохранении для Web в нескольких окнах: оригинальное изображение, оптимизированное, 2-Up (2 варианта)  одновременный просмотр оригинала и оптимизированного изображения в соответствии с заданными настройками, 4-Up (4 варианта)  отображение исходного изображения и 3-х версий оптимизированного: первая создается на основе значений палитры Optimize, две другие  варианты текущих настроек оптимизации.

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

Например, большое изображение (графические шапки для Web-страниц, фоны и др.) можно разрезать на отдельные фрагменты  слайсы и устанавливать для каждого из них индивидуальные настройки оптимизации, для достижения оптимального соотношения «качество/размер». Разрезание больших изображений, размещенных на Web-страницах, на несколько фрагментов обеспечивает более динамичную загрузку страниц, а установка различных форматов сжатия для отдельных фрагментов изображения дает возможность уменьшить общий объем графики.

Часто в Web-документах отдельные фрагменты графических изображений связаны гиперссылками конкретными файлами. Например, создание навигационных панелей (с rollover-эффектами), больших графических изображений (карты-изображения – ImageMap). Программа ImageReady позволяет при определении некоторых параметров нарезки создавать фрагменты изображения, создавать HTML-код, и JavaScript.

Инструменты для работы со слайсами в ImageReady

Slice Tool (Нож для нарезки)  для разрезания исходного изображения.

Slice Select Tool (Выделение фрагментов)  выделение текущего фрагмента (выбранный слайс выделяется контрастным цветом).

Hide Auto Slices/Show Auto Slices (Скрыть границы слайсов/Показать границы слайсов)  переключатель, который включает и выключает показ границ фрагментов (Вид-> Создание остальными фрагментами).

Для редактирования параметров фрагментов в ImageReady имеется специальное меню Window, Slice (Окно , Слайсы):

• можно определить гиперссылку фрагмента;

• указать, в каком окне должна открываться ссылка;

• ввести имя файла для сохранения фрагмента и т.п.

Каждым фрагментом нарезанного изображения можно управлять: перемещать, изменять размеры, разрезать на более мелкие части, склеивать отдельные части.

Для применения к изображению описанных действий выполните:

Slices, Divide Slices (Слайсы, Разрезание слайсов);

Slices, Combine Slices (Слайсы, Склеивание слайсов);

Slices, Duplicate Slices (Слайсы, Дублирование слайсов).

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

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

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

Направляющие  невыводимые на печать линии, которые могут быть помещены в любом месте изображения, обеспечивают нарезание изображения на части так, чтобы полученные фрагменты оказались точно состыкованными друг с другом, их можно перемещать, выключать или фиксировать. При создании слайсов направляющие предварительно помещаются в местах разрезания изображения на отдельные фрагменты.

Установка направляющих в редакторе Photoshop выполняется командой: Вид, Направляющие (View, New Guide), в ImageReady направляющих). Для активного изображения используют команду необходимое число раз, указывая точное положение направляющей.

Затем для создания слайсов в программе ImageReady применяют команду Slices, Create Slices from Guides (Слайсы, Создать слайсы по направляющим).

Часто наряду с нужными слайсами создаются и дополнительные, которые затем приходится объединять. Для сцепления слайсов выделите их инструментом Slice Select Tool (Выделение фрагментов) при нажатой клавише Shift, щелкните на выделенной области правой кнопкой мыши и выберите команду Combine Slices (Склеивание слайсов).

Определение параметров слайсов

Для каждого слайса необходимо определить: обязательный параметр тип и не обязательные  имя и ссылка.

Как правило, чаще всего используются следующие варианты:

• тип – Image и имя  для графического слайса без ссылки;

• тип – Image, имя и ссылка - для навигационной кнопки;

• тип – No Image и текст (возможно, на некотором фоне  для текста).

Далее для каждого из слайсов определяют вариант оптимизации в окне Optimize:

• формат сжатия файлов;

• количество используемых цветов и др.

Иногда для разных слайсов целесообразно установить разные параметры оптимизации. Каждый фрагмент можно сохранять в соответствующем формате сжатия: GIF, JPG, PNG, устанавливая нужную степень сжатия и количество цветов. Изображения с небольшим количеством цветов лучше сохранять в формате GIF (т.к. наименьший объем), фотографии и цветонасыщенную графику – JPG.

Сохранение слайсов: File, Save Optimized (Файл, Сохранить с оптимизацией).

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

Помимо сохранения с оптимизацией следует обязательно сохранить исходный файл командой File, Save As, для того чтобы при изменении дизайна не проделать всю работу еще раз. В итоге будут получены файл и серия графических изображений в папке Images.

 Создайте в редакторе Photoshop изображение или загрузите готовый графический файл, в местах предполагаемых разрезов проставьте направляющие и переключитесь в ImageReady и выполните последовательно.

• Slices, Create Slices from Guides (Слайсы, Создать слайсы по направляющим;

• Slices, Create Slices from Guides (Слайсы, Создать слайсы по направляющим;

• установите параметры оптимизации;

• сохраните документ.

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

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

Автоматизировать этот процесс можно с помощью Droplets (droplet - англ. капелька; англ. applet (аплет, маленькая программа) и drop (как часть сочетания drag-and-drop), которые обеспечивают пакетную обработку данных и представляют собой небольшие по размеру приложения (файлы *. exe), которые содержат заданную последовательность команд ImageReady и применяются к изображению или группе изображений.

 Создание Droplets:

• активизируйте палитру Actions (Действия) и выполните New Action (Новое действие). В палитре Actions появится новое действие, задайте имя для данного действия, например Resize;

• выполните набор операций по обработке изображения, который планируется повторять в отношении множества других изображений (например, уменьшать их размер: Image, Image Size  Изображение, Размер изображения). Все выполняемые вами команды будут отражаться в палитре Actions;

• активизируйте в палитре действие Resize, щелкните правой кнопкой, выберите из контекстного меню команду Create Droplet и сохраните созданный макрос в папке, где находятся изображения, к которым вы хотите применить записанный набор действий.

Откройте папку с изображениями в окне Проводника. Для изменения набора изображений выделите их значки и с помощью мыши перетащите их на значок Resize.exe  размер всех изображений изменится нужным образом, а сами изображения сохранятся в той же папке под другими именами (к прежнему имени добавляется номер).

• Создайте несколько файлов *.exe для пакетной обработки изображений:

• изменение размеров цифровых фотографий для размещения в фотогалерее на web-странице;

• последовательное применение нескольких фильтров для получения изображений определенного вида;

• примените полученные макросы к изображениям.