Дополнительное задание

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

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

1 Вернитесь к файлу 12Working.psd.

2 На палитре Layers (Слои) щелкните на значке треугольника для группы слоев Menu Color Bkgds, чтобы отобразить ее слои.

3 Пощелкайте на столбце Show/Hide Visibility (Отобразить/Скрыть слой) для группы слоев Menu Color Bkgds, чтобы включать и отключать видимость слоев этой группы - начиная со слоя cell_1 и заканчивая слоем cell_5. Теперь обрати­те внимание на то, что происходит со срезами кнопок навигации: при выделе­нии кнопка приобретает темносерую окраску. Именно так будут выглядеть кнопки при наведении на них указателя мыши.

4 Включив отображение всех слоев группы Menu Color Bkgds, выберите коман­ду меню File ♦ Save For web and Devices (Файл ♦ Сохранить для web).

5 В области просмотра изображения диалога Save For web and Devices (Сохра­нить для web и устройств), используя инструмент Slice Select (Выделение фрагмента) и удерживая нажатой клавишу Shift, выделите все пять кно­пок навигации.

6 Убедитесь, что в качестве формата оптимизированного файла в диалоге Save For web and Devices (Сохранить для web и устройств) выбран формат GIF. Щелкните на кнопке Save (Сохранить).

7 В открывшемся диалоге Save Optimized As (Сохранить оптимизированный как) откройте папку Lesson 12 и создайте новую папку с именем Over States, щелкнув мышью на значке Create New Folder (Создать новую папку). В откры­вающемся списке Format (Тип файла) выберите значение Images Only (Только изображения). Для параметра Settings (Настройки) оставьте значение Default Settings (Настройки по умолчанию), используемое по умолчанию, а в открыва­ющемся списке Slices (Срезы) выберите значение All Slices (Все фрагменты). Щелкните на кнопке Save (Сохранить).

8 Откройте любое из экспортированных изображений, которые находятся в созданной папке Over States.

Если бы вы создавали настоящую web-страницу, вы бы импортировали эти файлы в редактор HTML-файлов, например, в программу Adobe® Dreamweaver® CS3.

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

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

9 В окне программы Bridge дважды щелкните на эскизе папки Lesson 12 в облас­ти предварительного просмотра, затем дважды щелкните на папке 12End, и, наконец, дважды щелкните на папке site, чтобы открыть ее.

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

Итоги

Обзорные вопросы

1 Что такое срезы? Как создаются срезы?

2 Что такое ролловер? Что обозначает состояние ролловера Over (Курсор на­веден)?

3 Опишите простой способ создания анимации.

4 Какие форматы файлов можно использовать для создания анимаций?

5 Что такое оптимизация изображения и как осуществляется оптимизация изображений для web?

Ответы на обзорные вопросы

1 Срезы представляют собой прямоугольные области изображения, которые можно определять для индивидуальной web-оптимизации и к которым в даль­нейшем можно добавлять анимированные GIF-файлы, гиперссылки с адреса­ми URL и ролловеры. Срезы можно создать при помощи инструмента Slice (Раскройка) или путем преобразования слоев в срезы, используя команды ме­ню палитры Layers (Слои).

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

3 Простой способ создания анимации заключается том, чтобы начать с много­слойного файла Photoshop. Используйте кнопку Duplicates selected frame (Создать дубликат выделенного кадра) на палитре Animation (Анимация), что­бы создать новый кадр, и затем используйте палитру Layers (Слои), чтобы из­менить положение, непрозрачность или эффекты одного из выделенных кадров. Затем создайте промежуточные кадры между выделением и новым кадром либо вручную, используя кнопку Duplicates selected frame (Создать дубликат выделенного кадра), либо автоматически, используя команду Tween (Создать промежуточные кадры).

4 Файлы для анимации должны сохраняться в формате GIF или как фильмы QuickTime. Вы не можете создавать анимационные файлы в формате JPEG или PNG.

5 Оптимизация - это процедура выбора формата, разрешения и параметров ка­чества для изображений, которые планируется опубликовывать в Интернете. При оптимизации изображения важно сохранять баланс между небольшим размером графического файла и допустимым качеством его экранного представления, полезностью и визуальной привлекательностью Многоцветные изображения, как правило, оптимизируются в формате JPEG изображения, состоящие из чистых цветов или часто повторяющихся цветов - в формате GIF. Для оптимизации изображений используется команда File ♦ Save For Web And Devices (Файл ♦ Сохранить для web).