Разрезание изображений на фрагменты

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

• откройте изображение, которое вы собираетесь разделить на ломтики;
• включите режим отображения кусочков нажатием кнопки Slice Tool (Раскройка) на палитре инструментов. Даже если вы не трогали этим инструментом изображение, то все равно появляется специальная метка о том, что теперь изображение разрезано на один "кусок" Об этом говорит окаймляющая его рамка с порядковым номером фрагмента 01 и специальной пиктограммой фрагмента;
• нажмите на левую кнопку мыши и инструментом Slice (Раскройка) обведите, как рамкой, левые часы, затем отпустите кнопку мыши. Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла) - рис. 7.4;

Рис. 7.4. Процесс разрезания изображения на ломтики

Примечание

Фрагменты, созданные пользователем (пользовательский - 01) и автоматические (02), имеют разные свойства. Программа не может изменить расположение и размер тех фрагментов, которые создал пользователь. За размером и размещением автоматических фрагментов следит сама программа. Если вы измените размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" (перекрывания областей). Автоматические фрагменты имеют в левом верхнем пиктограммы серого цвета, а пользовательские - других цветов, то есть автоматические фрагменты отображаются более приглушенными цветами, чем пользовательские. Границы между автоматическими фрагментами отображаются линией с маркерами, а между пользовательскими - сплошной линией.

Давайте продолжим пример и углубим наши сведения о работой над ломтиками на практике:

• выберите на палитре инструментов инструмент Slice Select Tool (Выделение фрагмента). Он используется для уточнения размеров и положения фрагментов (ломтиков);
• щелкните курсором мыши в пределах созданного вами фрагмента 01. Этот фрагмент будет выделен. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь маркеров-манипуляторов, которые используются для масштабирования;
• перетащите правый боковой манипулятор рамки немного вправо. Пользовательский ломтик при этом увеличиться по горизонтали, а автоматический ломтик справа станет уже. Верните пользовательскому ломтику исходный размер. Автоматические ломтики скорректирует сама программа;
• щелкните курсором мыши в пределах правого автоматического ломтика. Изображение внутри ломтика станет ярким, ломтик будет выделен. Обратите внимание, что рамка автоматического ломтика не имеет манипуляторов, поскольку его размер устанавливается программой;

автоматический ломтик можно преобразовать в пользовательский. Выделите автоматический ломтик 02 и из контекстного меню, открывающегося щелчком курсором с помощью правой кнопки мыши выберите команду Promote to User Slice (Преобразовать в пользовательский). Фрагмент приобретет манипуляторы масштабирования (маркеры), и пиктограммы в его левом верхнем углу перекрасились в синий цвет, а это говорит о том, что автоматический ломтик стал пользовательским.

Организация гиперссылок

Когда изображение разрезано на требуемое количество фрагментов, их надо ассоциировать с соответствующими документами. Для этого предназначена специальная палитра Slice Options (Параметры фрагмента), вызываемая двойным щелчком кнопки мыши на пользовательском ломтике - рис. 7.5. Содержимое палитры Slice относится только к текущему выделенному ломтику и изменяется при выделении другого ломтика.

Рис. 7.5. Вид палитры Slice Options (Параметры фрагмента)

Список Type (Тип) задает тип фрагмента. В большинстве случаев это тип Image (Изображение), но возможен и альтернативный вариант No Image (Без изображения), который предполагает отсутствие изображения на месте выбранного фрагмента. Такое "пустое" место (в HTML-коде это пустая ячейка таблицы) может быть заполнено произвольным текстом на фоне со сплошной заливкой. Цвет заливки определяется списком Фон в левом нижнем углу палитры. Для типа Image (Изображение) цвет, выбранный в списке Фон, используется для заполнения прозрачных областей фрагмента.

В поле Name (Имя) вводится имя выделенного фрагмента. Поскольку придумывание индивидуальных имен фрагментам в большинстве случаев не имеет смысла, то можно оставить то имя, которое фрагменту назначила сама программа.

Для каждого фрагмента может быть определена единственная гипертекстовая ссылка, которая вводится в поле URL палитры Slice Options (Параметры фрагмента).

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

В нашем случае для выделенного ломтика с именем (номером) 989.02 в поле URL мы ввели адрес гиперссылки www.adobe.come. Это будет имя документа, который откроется в браузере по щелчку на этом фрагменте.

В поле Message (Текст сообщения) вводится текстовое сообщение, которое будет отображаться в строке состояния браузера, когда курсор мыши окажется на выбранном фрагменте. Одновременно с этим на экране ПК будет показан текст "Сайт фирмы Adobe", введенный в поле Alt Tag (Альтернативный текст).

Для того, чтобы увидеть результат наших действий в браузере, выполните команду ОК, затем команду File (Файл) | Save for web (Сохранить для Web), далее откройте сохраненный документ (у нас это файл 989.html) в браузере - рис. 7.6.

Рис. 7.6. Предпросмотр ломтика 2.01 в Internet Explorer

Как видим, программа сама сгенерировала HTML-код и превратила выделенное нами изображение в гиперкнопку.

Оптимизация ломтиков

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

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

Рис. 7.7. Изображение разрезано на четыре фрагмента

Выполните команду Файл | Сохранить для Web и перейдите на вкладку Optimize (Оптимизация) в окне документа. В палитре Optimize (Оптимизация) выберите формат GIF, в списке ниже - палитру Selective (Выбор), режим сглаживания Diffusion (Диффузия) и степень размытия (Dither) равной 88%, количество цветов равным 128 - рис. 7.8.

Рис. 7.8. Настройки палитры Optimize

Удерживая нажатой клавишу Shift, выделите мышкой все фрагменты изображения (01-04).

Спрячьте границы фрагментов нажатием клавиши <Q> на клавиатуре и посмотрите на результат оптимизации. Функция Preview in Default Browser позволяет протестировать сборку изображения и гиперссылки на нем еще до экспорта вашей работы в HTML-код. При предварительном просмотре ссылок изображений в браузере границ фрагментов не должно быть видно. Ниже изображения вы увидите HTML-код, сгенерированный программой Adobe Photoshop.

Когда изображение разрезано и ссылки назначены, можно сохранить его фрагменты в отдельные оптимизированные файлы и получить HTML-код для сборки ломтиков в браузере командой Save (Сохранить) - рис. 7.9.

Рис. 7.9. Окно сохранения результатов нашей работы

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

Список Settings (Установки) оставьте с установками по умолчанию.

В списке Slices (Ломтики) вы можете выбрать для сохранения все ломтики или только выделенные (Selected Slices). При этом необходимо предварительно выделить с помощью инструмента Slice Select те фрагменты, которые вы хотите сохранить.

Нажмите на кнопку Сохранить (Save) - программа сохранит HTML-документ в выбранную папку под именем, которое было введено в поле File name (Имя файла) диалогового окна Save Optimized As.

Карта ссылок

Изображения на Web-страницах, созданные описанным выше образом, часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных адресов страниц (URL). Однако, для создания карт ссылок обычно используют не Photoshop, а Image Ready. Когда карта ссылок определена, функция Preview in (Предварительный просмотр) позволяет протестировать карту ссылок еще до ее экспорта HTML-кода и самого изображения на локальный диск. После того, как карта ссылок оттестирована и найдены параметры оптимизации изображения, можно выполнить команду File (Файл) | Save Optimized As (Сохранить оптимизированное как). После выбора параметров сохранения карты ссылок и нажатия кнопки Сохранить (Save), файлы графических фрагментов и HTML-код будут сохранены на диск.

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

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

Что такое GIF - анимация?

Выше мы познакомились с графическим форматом GIF (Graphics Interchange Format), который является собственностью известной компании CompuServe Inc., имеющей исключительное право на переопределение, видоизменение или модификацию этого формата. Одной из особенностей формата GIF является то, что он позволяет создавать простую анимацию - чередующиеся кадры. Конечно, это не сравнимо с полноценными форматами хранения анимации (такими как AVI), но зато даёт возможность создать компактный симпатичный ролик - например, для баннера.

Широкое распространение анимированный GIF получил в Интернет: стоит только набрать любой адрес, и вашему взору предстанет ряд рекламных баннеров, заставок, логотипов и других "двигающихся" изображений, выполненных в формате GIF. Они, безусловно, вносят определенное разнообразие и оживление в Web-страницы, но многие, увлекшись созданием анимированных изображений, к сожалению, забывают следить за их размерами. Если размер файла окажется слишком велик, это может вызвать раздражение у посетителя вашей страницы, работающего через телефонную линию (модем), которому просто надоест ждать, пока ваша анимация загрузится.

Для создания анимаций на основе GIF-файлов существует немало специальных редакторов, называемых GIF-аниматорами. Бесплатные пробные (или бета-версии) этих аниматоров, а также других подобных им редакторов можно найти по следующим адресам в Интернет: www.freeware.ru, www.listsoft.ru, www.winfiles.com, www.tucows.com, www.nonags.com, www.thefreesite.com, www.mediabuilder.com, www.fileworld.com.

В предыдущих версиях в Photoshop входила программа ImageReady, которая представляла собой мощный WISIWYG-редактор для создания сайтов. Эти два продукта были объединены вместе еще в пятой версии Photoshop. В ImageReady возможно:

• cоздание анимационных GIF-изображений;
• cоздание интерактивных элементов навигации: кнопок и панелей;
• оптимизация изображений при экспорте в форматы, принятые в Internet;
• создание карт ссылок и ролловеров на основе изображений;
• многое другое.

Итак, в прежних версиях Photoshop приложение ImageReady, ориентированное на веб-дизайн, поставлялось вместе с Фотошопом. В последней версии Photoshop убрана клавиша быстрого перехода между этими программами и большинство возможностей ImageReady импортированы в Photoshop CS3. В частности, это касается и анимации изображений. Ранее она выполнялась в ImageReady, а теперь ее можно сделать непосредственно в Photoshop CS3.

Примечание

Говоря об особенностях Photoshop CS3 для www, следует отметить, что в прежних версиях программы существовала команда File (Файл) | Automate (Автоматизация) | Web Photo gallery (Фотогалерея Web). Команда автоматически создавала галерею изображений для Интернет. Для веб-мастеров, поддерживающих и обновляющих большие галереи (например, на фотосайтах), вопрос автоматизации обработки и подготовки фотографий является одним из важнейших. К сожалению, в Photoshop CS3 теперь такой возможности по непонятным причинам теперь нет.

Пример 7.2. Создание анимации для Интернет

Шаг 1. Подготовка изображений для анимации

Предварительная работа по подготовке изображений заключается в их кадрировании, настройке по тону, цвету и прочим параметрам. Фотографии могут быть из разных источников и их необходимо сделать примерно одного размера. Обычно все фотографии приводятся к единому типоразмеру по одной стороне (обычно по высоте). Часто в левый верхний угол снимка помещают водяные знаки или надписи. Завершает этот шаг уже знакомая нам команда оптимизацией для веба (Save for Web & Devices…).

В нашем примере мы поступим следующим образом. Возьмем несколько фотоснимков цветов и поместим их в папку Flowers. Затем загрузим все изображения в Photoshop и командой File (Файл) | Automate (Автоматизация) | Fit Image (Изменить размерность) приведем фотографии к размеру 800 x 600 пикселей (рис. 7.10).

Рис. 7.10. Окно команды Fit Image (Изменить размерность)

Далее все изображения конвертируем из формата JPEG в формат GIF. Это можно сделать по-разному, например, командой File (Файл) | Save for Web & Devises (Сохранить для веб и девайсов) - рис. 7.11.

Рис. 7.11. Окно Save for Web & Devises (Сохранить для веб и девайсов), вкладка Optimized (Оптимизировать)