УРОК 12.

Подготовка файлов для web

Обзор урока

В этом уроке вы узнаете, как делать следующее:

• Создавать срезы изображения с помощью инструмента Slice (Раскройка).

• Отличать пользовательские срезы от автосрезов.

• Создавать для пользовательских срезов ссылки на HTML-документы или дру­гие ресурсы.

• Определять состояния ролловеров для реагирования на действия мыши.

• Просматривать эффекты ролловеров.

• Использовать многослойные файлы формата GIF в качестве основы анимации.

• Использовать палитры Layers (Слои) и Animation (Анимация) для создания анимационных последовательностей.

• Создавать анимации на основе изменения положения, видимости слоев и эффектов слоев.

• Вносить изменения в одиночные кадры, во множество кадров и во всю ани­мацию.

• Использовать команду Tween (Создать промежуточные кадры) для создания плавных переходов между кадрами с различными настройками непрозрачно­сти и положения слоев;

• Просматривать анимации в web-браузере.

• Оптимизировать анимацию изображения для web и выбирать оптимальные параметры сжатия.

• Понимать отличия между оптимизациями в форматах GIF и JPEG.

• Экспортировать файлы большого размера с высоким разрешением, размеры изображений которых превышают размеры экрана, для изменения масштаба отображения и панорамирования.

Работа над этим уроком займет около 90 минут. Папку предыдущего урока можно удалить с жесткого диска и скопировать вместо нее папку Lessons/Lesson 12. По мере работы над уроком начальные файлы будут перезаписаны. Если вам по­надобится восстановить исходные файлы, скопируйте их с компакт-диска, прила-гоемого к книге «Adobe Photoshop CS3. Официальный учебный курс».

Кроме того, для выполнения заданий урока вам потребуется использовать какой-нибудь web-браузер: Netscape, Internet Explorer или Safari, однако при этом устанавливать соединение с Интернетом не понадобится.

Начало работы

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

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

Давайте сначала просмотрим готовую HTML-страницу, которую вам предстоит соз­дать. Некоторые области рисунка реагируют на действия мыши. Например, изоб­ражение меняет вид, когда указатель мыши «перекатывается» над некоторыми об­ластями рисунка или когда пользователь щелкает мышью на этих областях.

1 Запустите программу Adobe Photoshop и немедленно нажмите комбинацию кла­виш Ctrl+Alt+Shift (Windows) или Command+Option+Shift (Mac OS), чтобы вос­становить стандартные настройки программы. (Подробности можно найти во введении к книге.)

2 В появившемся окне сообщения щелкните мышью на кнопке Yes (Да), чтобы подтвердить намерение переустановить настройки. Затем закройте диалог Welcome Screen (Начальный экран) щелчком мыши на кнопке Close (Закрыть).

3 На панели параметров инструмента щелкните мышью на кнопке Go to Bridge (Перейти к Bridge), чтобы открыть окно программы Adobe Bridge.

4 На палитре Favorites (Избранное), расположенной в левом верхнем углу окна программы Bridge, щелкните на папке Lessons (Уроки), после этого дважды щелк­ните на эскизе папки Lesson 12 в области предварительного просмотра, затем дважды щелкните на папке 12End и, наконец, дважды щелкните на папке site.

5 Щелкните правой кнопкой мыши (Windows) или, зажав клавишу Ctrl щелкни­те мышью (Mac OS) на эскизе файла home.html и в появившемся контекстном меню выберите команду Open With (Открыть с помощью). Выберите web-брау­зер, с помощью которого будет открыт файл формата HTML.

6 Обратите внимание на анимированный логотип в левом верхнем углу страни цы. Анимация логотипа воспроизводится один раз при открытии страницы браузере.

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

7 Переместите указатель мыши над названиями разделов в левой части web-стра­ницы и над изображениями в центральной части. Обратите внимание на изме­нение внешнего вида указателя, когда изображение стрелки заменяется изоб­ражением руки с вытянутым указательным пальцем.

8 Щелкните на изображении ангела на центральном рисунке внизу страницы, чтобы открыть окно программы просмотра изображений Zoomify. Пощелкай­те на элементах управления программы Zoomify, чтобы познакомиться с воз­можностями программы по увеличению и уменьшению масштаба отображения.

9 Чтобы вернуться на домашнюю страницу сайта, закройте окно программы Zoomify.

10 Щелкните на любом другом изображении, чтобы просмотреть его в отдельном окне браузера. Завершив просмотр изображения, закройте окно браузера.

11 На домашней странице пощелкайте на названиях разделов, чтобы перейти на связанные страницы. Чтобы вернуться на домашнюю страницу, щелкните на названии «Museo Arte», расположенном прямо под логотипом в левом верх­нем углу страницы.

12 Завершив просмотр домашней страницы, закройте все окна web-браузера и пе­рейдите к окну программы Bridge.

Во время просмотра вы увидели два разных типа ссылок: срезы (названия разде­лов в левой части страницы) и карты ссылок (изображения мальчика, буклета Spanish Masters и ангела).

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

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

Настройка рабочей области web Design (web-дизайн)

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

1 В окне программы Bridge щелкните два раза на кнопке Go Up (Вверх на один уровень), чтобы перейти на два уровня вверх, и дважды щелкните на пап­ке 12Start. Дважды щелкните мышью на эскизе файла 12Start.psd, чтобы отк­рыть его в приложении Photoshop.

Сейчас вы настроите рабочую область и превратите открытый файл в функцио пирующую web-страницу.

2 Выберите команду меню Window ♦ Workspace ♦ web Design (Окно ♦ Рабоча} область ♦ web-дизайн). Когда на экране появится предупреждение о том, чтс будут изменены меню и комбинации клавиш, щелкните на кнопке Yes (Да).

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

4 Выберите команду меню File ♦ Save As (Файл ♦ Сохранить как) и сохраните открытый файл иод именем 12Working.psd, чтобы сохранить установленную рабочую облапь. В появившемся диалоге убедитесь, что установлен флажок Maximize Compatibility (Максимизировать совместимость), и щелкните на кнопке ОК.

Создание срезов

Когда прямоугольная область изображения определяется в качестве среза, про грамма Photoshop создает HTML-таблицу, которая содержит этот срез и осуществ ляет его выравнивание. Создав срезы, вы можете превратить их в кнопки, а затем запрограммировать эти кнопки, чтобы создать функционирующую web-страницу

Вы не можете создать только один срез, если только вы не создаете сиециальнс срез, включающий все изображение - бесполезная вещь, надо сказать, особеннс учитывая, что они создаются автоматически. Каждый новый срез в области изображения (так называемый пользовательский срез («user slice»)), приводит ь автоматическому созданию других срезов - автосрезов («auto slices») - которые занимают все оставшуюся область изображения.