Урок 19. Анимация и ссылки для Web

1. Откройте файл Start из папки 1. Создание ссылок. Вам предстоит встроить несколько гипертекстовых ссылок в сложное изображение. Загрузите новую рабочую среду Web-дизайн. Инструментом раскройка (К) выделяйте фрагменты, которые должны быть активными: Why organic, products, shop online, contact, help. Инструментов выделение фрагмента (для перетаскивания среза) поправьте получившиеся выделения. Увеличивайте масштаб, когда работаете с мелкими фрагментами. Теперь щелкайте по номерам срезов и в диалоговом окне Параметры фрагмента вводите информацию: имя, адрес и цель. Например, имя Why_button, адрес pages/why.html, в поле Цель введите: _blank. Обязательно введите знак нижнего подчеркивания перед буквой b. Далее по той же схеме действуйте с другими срезами. Затем выделите фигуру Herbs, щелкнув по слою и удерживая Ctrl. Задавайте команду Слой – Новый фрагмент из слоя. Вокруг фрукта появляется прямоугольная рамка. В палитре Параметры фрагмента задайте координаты имя, адрес и цель. Стоя на фоновом слое, выделите любыми инструментами (волшебной палочкой, пером, лассо) изображения Herbs и Papaya, скопируйте на новый слой, создайте Новые фрагменты слоя и задайте им координаты. После того как вы создали все необходимые срезы, сохраните файл в html-формате в папку MyPage. В ней же находится папка Pages, на которую вы делали ссылки. Сверьте результат с папкой End.

2. Откройте урок «Веселое привидение», достаньте Окно –> Анимация, если его нет. Изучите настройки анимации: выбор кадра, запуск анимации, создание промежуточных кадров, создание копии выделенных кадров, удаление выделенных кадров. Посмотрите на время кадрирования, его можно менять: на поворотах стоит по 0,2 сек. Обратите внимание на слои, их три: 1) фон, 2) фигура слева, 3) фигура справа.

Удалите кадры анимации и создайте их самостоятельно. Создайте первый кадр, в котором видимыми будут два слоя – фон и левое привидение. Продублируйте этот кадр и передвиньте фигуру вправо к краю холста, удерживая Ctrl+Shift для горизонтального перемещения. Встаньте на первый кадр анимации и нажмите на кнопку Создание промежуточных кадров и укажите в нем 5. Далее создайте копию последнего кадра и замените на нем слой с левым привидением на слой с правым. Создайте копию этого кадра и сдвиньте на нем фигуру влево к краю. Задайте 5 промежуточных кадров. Можете поставить по 0,2 секунды в угловых кадрах. Нажмите просмотр анимации. Нажмите Ctrl+Alt+Shift+S, чтобы сохранить как GIF.

В файле с дельфином задайте 5 промежуточных кадров для движения пузырька до исчезновения. В файле с волнами установите 4 промежуточных кадра вниз и еще 4 назад – вверх. Для файла Н₂О задайте второй кадр со сдвинутыми буквами Н и О к краю холста, цифру два уведите наверх, снизьте всем слоям непрозрачность до 20%. Передвиньте его на первое место и добавьте 4 промежуточных кадра, поставив галочки в появившемся окне «все слои», «положение» и «непрозрачность». Для свечения цифры два добавьте 2 промежуточных кадра, в появившейся вкладке выберите «все слои» и «эффекты». Установите задержку последнему кадру 1 секунда.

Инструменты

Выделение – выделяет прямоугольные и эллиптические области

Перемещение – перемещает выделения, слои и направляющие линии

Лассо – создает произвольные, многоугольные, магнитные выделения

Волшебная палочка – выделяет одинаково окрашенные области

Кисть – рисует мазками кисти

Карандаш – рисует четкие контуры

Штамп – рисует образцом изображения

Узорный штамп – рисует узор с помощью части изображения

Рамка (Crop) – служит для обрезки изображения

Раскройка (Slice) – создает срезы изображения

Выделение фрагмента (Slice Select) – выделяет срезы изображения

Восстанавливающая кисть – закрашивает для восстановления поврежденного участка изображения

Архивная кисть (History Brush) копирует выбранное состояние изображения в окно текущего изображения

Архивная художественная кисть – рисует стилизованными мазками, имитируя различные стили рисования и используя выбранное состояние изображения

Ластик – стирает пикселы и восстанавливает части изображения до сохраненного ранее состояния

Волшебный ластик – одним щелчком мыши стирает до прозрачности однотонные области изображения

Точечная восстанавливающая кисть (Spot Healing Brush) – устраняет пятна и дефекты с фотографий, обладающих однообразным фоном

Красные глаза – удаляет эффект красных глаз

Заплатка (Patch) – чинит повреждения в выделенной области изображения с помощью выбранного образца

Замена цвета (Color Replacement) – заменяет один цвет в изображении на другой цвет

Фоновый ластик (Background Eraser) – стирает области до прозрачности при перемещении инструмента с нажатой левой кнопкой мыши

Градиент – создает линейный, радиальный, угловой, отраженный и ромбовидный переходы между цветами

Заливка (Paint Bucket) – заливает одинаково окрашенные области цветом переднего плана

Размытие (Blur) – размывает резкие края изображения

Резкость (Sharpen) – делает размытые края изображения более резкими

Палец (Smudge) – размывает изображение

Осветлитель (Dodge) – осветляет области изображения

Затемнитель (Burn) – затемняет области изображения

Линейка (Measure) – измеряет расстояния, расположения и углы

Цветовой эталон (Color Sampler) – отбирает в изображении до четырех образцов цвета

Рука – перемещает изображение в пределах окна

Масштаб (Zoom) – увеличивает или уменьшает масштаб изображения

Губка (Sponge) – изменяет цветовое насыщение области изображения