Падающая листва

(образец листопад.gif)

1. Создайте новый документ размером 400х400 пикселей.

2. Выберите инструмент Кисть в виде кленового листа

3. На палитре Слои создайте новый слой, назовите его Лист 1 и один раз щелкните мышью на рабочем листе — появится изображение листа.

4. Теперь создайте еще один слой, назовите его Лист 2 и нарисуйте еще один кленовый лист. Таким же образом создайте еще парочку листиков, только помните, что каждый листок нужно создавать на отдельном слое, причем листья должны быть разных цветов и оттенков.

5. Теперь создадим анимацию. Вызовите палитру Анимация, выполнив команду Окно — Анимация. На экране появится палитра. Есть два режима работы с этой палитрой: в режиме кадров и в режиме шкалы времени. Для переключения режимов предназначена кнопка, находящаяся в правом нижнем углу палитры. Будите работать в двух режимах и использовать возможности каждого.

6. Для начала переключитесь в режим шкалы времени. В режиме шкалы времени в левой части палитры вы увидите список только что созданных вами слоев, а справа — непосредственно саму шкалу времени.

7. Щелкните на треугольнике рядом со слоем Лист 1 — вам станут доступны настройки анимации данного слоя: Позиция, Непрозрачность и Стиль.

8. Щелкните на изображении часиков в области Позиция, и на шкале времени появится индикатор первого ключевого кадра.

9. Затем захватите мышью индикатор времени и перетащите его на несколько секунд вправо.

10. Здесь вам нужно будет установить еще один ключевой кадр. Для этого в строке Позиция щелкните на изображении ромбика — он сразу же появится на шкале времени.

11. Теперь выберите на панели инструментов инструмент Перемещение и переместите вниз кленовый листок, расположенный на активном слое.

12. То же самое проделайте с остальными слоями — перемещайте листья по той траектории, по которой предполагаете их падение в вашем ролике.

13. Когда основная часть работы закончена, просмотрите результат. Для этого верните индикатор времени в начальное положение (то есть на первый кадр) и нажмите кнопку Воспроизведение.

14. Осталось указать более точную продолжительность каждого кадра и количество повторений анимационного ролика. Это проще всего сделать в режиме покадровой анимации, поэтому смените режим нажатием уже знакомой вам кнопки.

15. Если вы хотите, чтобы ролик проигрывался постоянно, в левой части палитры из раскрывающегося списка выберите пункт Постоянно. Чтобы задать определенное количество повторений, выберите из того же списка пункт Другое и в появившемся диалоговом окне введите желаемое количество повторений.

16. Чтобы отрегулировать продолжительность проигрывания каждого кадра, щелкните на треугольнике на эскизе кадра и из списка выберите подходящее значение.

17. Осталось только сохранить созданный ролик. Для этого достаточно выполнить команду Сохранить для интернета и устройств. В появившемся окне нажмите кнопку Сохранить и сохраните файл в формате.gif.

Эффект мерцания текста

Рассмотрим еще один пример выполнения анимации в программе Photoshop.

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

2. Вызовите палитру анимации и перейдите в режим шкалы времени. Будем работать с одним текстовым слоем.

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

4. Щелкните мышью на ромбике в строке Непрозрачность, и на шкале времени появится первый ключевой кадр.

5. Сместите индикатор времени вправо и установите второй ключевой кадр.

6. В этом месте надпись должна исчезнуть, поэтому на палитре Слои уменьшите значение параметра Непрозрачность до 0%.

7. Снова сместите индикатор времени вправо и установите еще один ключевой кадр.

8. Затем вернитесь на палитру Слои и установите значение Непрозрачность равным 100%.

9. Верните индикатор времени в самое начало и проиграйте созданную анимацию с помощью кнопки Воспроизведение.

10. Вы увидите, что все вроде бы и неплохо, но эффект мигания не получился. Вместо этого надпись плавно исчезает, а затем плавно появляется. Исправим это.

11. С помощью мыши выделите на шкале времени все ключевые кадры.

12. Затем щелкните правой кнопкой мыши на любом из кадров и из появившегося контекстного меню выберите пункт Приостановить интерполяцию — ромбики изменятся на квадратики. Снова просмотрите результат. После выбора режима Приостановить интерполяцию кадры будут сменять друг друга без задержки.

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

Создание баннера

Баннеры - рекламные картинки, по которым осуществляется переход по ссылке на рекламируемый сайт. Баннеры существуют различных размеров и технологий исполнения.

При создании баннеров дизайнеры используют различные способы для привлечения внимания посетителей сайта к их баннеру:

· в большинстве баннеров используются яркие цвета

· как правило, баннеры анимированы (в них используется gif или flash-анимация)

· рисунок или анимация на баннере должны побуждать посетителя сайта щелкнуть мышкой по баннеру.

Главное при создании баннера — грамотно разработать идею. Просмотрите готовые примеры на сетевом ресурсе.

Создайте баннер для своего сайта. Для этого достаточно будет создать 3-4 кадра.

Примерный алгоритм создания баннера:

a. создать лист с заданными размерами;

b. добавить готовую графику или нарисовать свой рисунок;

c. добавить текст и эффекты;

d. изображение анимировать и оптимизировать.

1. Создайте новый документ размером 100х100 пикселей (стандартный квадратный баннер).

2. На палитре Слои создайте новый слой и оформите первый кадр баннера (каждый слой будет отдельным кадром).

3. Создайте еще один слой и оформите второй кадр, а затем третий и, если надо, четвертый.

4. Техника выполнения анимации в данном случае будет следующей. Слой с первым кадром должен находиться выше остальных на палитре Слои. Как только будет подходить время появления второго кадра, прозрачность первого кадра нужно будет уменьшить до 0%, а когда второй кадр будет сменяться третьим, прозрачность второго кадра должна также быть снижена до 0%, и т.д.

5. Вызовите палитру Анимация и щелкните на ней мышью на слое с первым кадром.

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

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

8. Переместите индикатор времени в положение, где предполагается конец первого кадра, и снова установите еще один ключевой кадр.

9. Теперь обратитесь к палитре Слои и измените для данного слоя параметр Непрозрачность до значения 0%.

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

11. Теперь, если вы хотите, чтобы кадры плавно перетекали друг в друга, оставьте все как есть, а если вам нужно, чтобы кадры резко сменялись, то выделите все ромбики на шкале времени, щелкните на любом из них правой кнопкой мыши и из контекстного меню выберите уже знакомую вам команду — Приостановить интерполяцию.

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