Создание изображения внутри изображения, страница 2

9  Снова откройте в Web-браузере страницу Organic Food, наведите указатель мы­ши на изображение спаржи («asparagus») в правой части страницы. Обратите внимание, что стрелка указателя мыши сменилась значком кисти руки с вытянутым указательным пальцем (sft), который свидетельствует, что объект явля­ется ссылкой. Перемещайте указатель мыши по изображению и подмечайте, когда курсор принимает вид стрелки, а когда - кисти руки.

10Откройте новую страницу, щелкнув мышью на изображении пучка спаржи. За­тем закройте эту страницу и вернитесь на страницу Organic Food. Вы можете попробовать открыть и другие ссылки этой страницы.

11После просмотра страницы Organic Food закройте все окна Web-браузера и пе­рейдите к диалогу программы Bridge.

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

Срезами называются прямоугольные области изображения, которые определяет­ся на основе слоев, направляющих или точного выделения участков изображе­ния, а также при помощи инструмента Slice (Раскройка). При создании в изобра­жении срезов программа Photoshop создает HTML-таблицы или каскадные таблицы стилей, описывающие расположение срезов. При желании вы можете создать и предварительно просмотреть HTML-документ, который содержит разрезанное изображение наряду с HTML-таблицей или каскадной таблицей стилей.

Карта ссылок тоже является областью изображения, к которой привязаны гипе­рссылки. В карте ссылок различные участки изображения (горячие зоны) связы­ваются с различными файлами. Таким образом, посетитель сайта может перейти на новую страницу, щелкнув мышью на связанной с ней областью изображения, либо переходить на другие страницы, также щелкая на связанных с ними участках изображения. В отличие от срезов, которые бывают только прямоугольными, карты ссылок могут обладать произвольными формами. Средства создания карт ссылок предусмотрены только в программе Adobe ImageReady, поэтому для выпол­нения этой работы вы перейдете в ImageReady, когда наступит время.

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

13.3 Создание срезов изображения в программе Photoshop

Основным способом определения среза в программе Photoshop является выбор инструмента Slice (Раскройка) и перетаскивание его указателя по поверхности той части изображения, которая должна стать срезом. Срезы можно создавать и в программе ImageReady, но для простоты в этом упражнении мы будем использо­вать лишь приложение Photoshop.


О создании Web-страниц в программах Photoshop и ImageReady

Проектируя Web-страницы с помощью программ Adobe Photoshop и Adobe ImageReady, помните об инструментах и средствах, доступных в каждом прило­жении:

•  Программа Photoshop предоставляет инструменты для создания и манипули­рования статическими изображениями, предназначенными для использова­ния в Web. Вы можете разделить изображение на срезы, добавить в срезы ги­пертекстовые ссылки и текст HTML, оптимизировать срезы и сохранить изображение как Web-страницу;

•  Программа ImageReady предоставляет множество тех же самых инструментов редактирования изображения, что и программа Photoshop. Кроме того, она содержит инструменты и палитры для расширенной Web-обработки и созда­ния динамических Web-изображений, таких, как анимации и ролловеры.

13.3.1 Подготовка к созданию срезов

Как обычно, перед началом работы настройте рабочие параметры.

1      Перейдите в окне программы Bridge на один уровень вверх к папке Lesson 13. Дважды щелкните мышью на эскизе файла 13Start.psd, чтобы открыть его в приложении Photoshop.

Если появи тся диалог, предлагающий преобразовать текстовые слои в векторную графику, выберите Update(Обновить).

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

2      Убедитесь, что в меню View(Просмотр) выбраны (помечены галочкой) следую­щие команды, или выберите их сейчас:

•  ViewShowGuides(Просмотр ♦ Показать Направляющие);

•  ViewShow ♦ Slices (Просмотр ♦ Показать ♦ Фрагменты);
+ViewSnap(Просмотр ♦ Привязка);

•  ViewSnapToGuides(Просмотр Привязать к ♦ Направляющим)

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