Часть вторая. Создание анимации.

Перейти в панель анимации.
Если панели анимации нет на экране, то вызвать ее, выполнив команды меню Окно → Анимация.

Первый кадр создается по умолчанию.
В данный момент должен быть виден слой "7". Отключить в палитре слоев видимость слоя "7".
Включить видимость слоя "1". Видимый слой будет отображаться в кадре.

2.1. Нажать на панели анимации иконку нового листа. Появится второй кадр:

Отключить видимость слоя "1", включить видимость слоя "2".

2.2. Снова создать кадр, отключить видимость слоя "2", включить видимость слоя "3".

2.3. Создать кадр (кадр под номером 4), убрать видимость слоя "3", включить видимость слоя "4".

2.4. Теперь в обратном направлении:
Создать кадр (кадр под номером 5), убрать видимость слоя "4", включить видимость слоя "3".
Создать кадр (кадр под номером 6), убрать видимость слоя "3", включить видимость слоя "2".
Создать кадр (кадр под номером 7), убрать видимость слоя "2", включить видимость слоя "1".
Панель анимации на данный момент должна принять вид:

2.5. Осталось немного.
Создать кадр (кадр под номером 8), убрать видимость слоя "1", включить видимость слоя "5". Создать кадр (кадр под номером 9), убрать видимость слоя "5", включить видимость слоя "6". Создать кадр (кадр под номером 10), убрать видимость слоя "6", включить видимость слоя "7". ". Создать кадр (кадр под номером 11), убрать видимость слоя "7", включить видимость слоя "6". ". Создать кадр (кадр под номером 12), убрать видимость слоя "6", включить видимость слоя "5".

Анимация готова. Воспроизвести ее можно, нажав кнопку Запуск воспроизведения анимации
в панели анимации.

2.6. Сохранение анимации.

Последовательно выполнить команды Главного меню
Файл. → Сохранить для Web….
Не забыть проверить расширение: *.gif

Практическая работа №2. "Создание баннера"

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

1. Создать изображение размером 300x50 px
(фон – белый). Используя Инструмент Текст, создать какую-нибудь надпись.

2. В палитре Слои выделить текстовый слой и щелкнуть правой кнопкой мыши.

В контекстном меню выбрать. Растрировать текст.

3. Продублировать слой три раза.
Сделать самый верхний слой активным и выполнить команды Главного меню:
Фильтр → Размытие. → Размытие в движении…

с параметрами:
Угол: 0
Смещение: 120.

4. Для второго (сверху) слоя применить тот же эффект, но со значением параметра Смещение, равным 60. Для третьего (сверху) слоя – Смещение: 30.
Последний слой оставить без изменений.

5. В окне Анимация установить задержку 0,5 секунд и оставить видимым только слой с фоном.

6. Создать новый кадр с задержкой 0 секунд. Сделать видимыми только верхний слой и фон.

7. Создать ещё кадр и сделать видимыми только второй слой с текстом и фон.

8. Создать ещё кадр. Сделать видимыми третий слой с текстом и фоновый слой.

9. Последний кадр. Задержка - 1 секунда. Видимые слои - нижний слой с текстом и фон.

Можно поэкспериментировать, применяя другой фильтр.

Практическая работа №3. "Анимация текста"

1. Создать новый документ, чёрного цвета.

2. Ввести текст серого цвета.

3. Создать новый слой и обвести тонкой кисточкой белого (красного, синего…) цвета первую букву кода.

4. Изменить в панели слоев режим наложения этого слоя на Перекрытие.

Получилось:

5. Далее – аналогично. Создать новый слой, обвести вторую букву. Изменить режим слоя на Перекрытие.

и т.д. для каждой буквы.

7. Если панель анимации отсутствует, то выполнить команды Главного меню Окно → Анимация.

8. На первом кадре анимации убрать все слои, кроме фона и текстового слоя.

Панель анимации должна принять вид:

9. Сделать дубликат первого кадра, нажав на панели анимации кнопку

10. Добавить видимость слоя "освещения" первой буквы.

11. Выделить первый и второй кадры, используя на клавиатуре клавишу Ctrl.

Создать промежуточные кадры с помощью кнопки на панели анимации.
Настройки:

12. Используя кнопку в панели анимации, продублировать последний кадр, убрать на нем видимость

первого слоя и включить видимость следующего.

13. Выделить последний и предпоследний кадры.

Повторно создать промежуточные кадры, используя кнопку панели анимации.

14. Аналогично повторить действия для каждой буквы.

15. Сохранить анимацию. Выполнить команды Главного меню Файл. → Сохранить для Web … .
Выбрать вкладку Оптимизация
Установить расширение файла: *.gif

Практическая работа №4. "Создание анимированного баннера"

1. Создать новый файл нужного размера и залить его каким-нибудь цветом.
С помощью инструмента Текст создать надпись.

2. Создать новый слой. На этом слое выделить прямоугольник с помощью инструмента прямоугольная область и залить его.

3. Вставить в этот прямоугольник изображение.

4. Повторяя пп.2-4, создать еще несколько изображений в "рамках".

5. Создать новый слой. На этом слое выделить прямоугольник с помощью инструмента прямоугольная область и залить его.

6. С помощью инструмента Горизонтальный текст создать надпись или вставить в этот прямоугольник изображение.
Можно повернуть этот прямоугольник, используя трансформацию, предварительно объединив слои, на которых расположены прямоугольник и надпись (изображение) на нем.

7. Если панель анимации отсутствует, то выполнить команды Главного меню Окно → Анимация.
В первом кадре скрыть все слои, кроме слоев, показанных на рисунке.

8. Продублировать кадр. На втором слое открыть следующий (снизу) слой (с прямоугольником).

9. Продолжать дублировать кадры, последовательно открывая слои.

10. Сохранить анимацию. Выполнить команды Главного меню Файл. → Сохранить для Web …

Выбрать вкладку Оптимизация.
Установить расширение файла: *.gif

11. Просмотреть сохраненный файл с помощью Internet Explorer.
При необходимости внести изменения.

Практическая работа №5. "Баннер. Анимированный текст"

1. Создать новый файл. С помощью инструмента Горизонтальный текст создать надпись.

2. Растеризовать слой.
Для этого в палитре Слои выделить текстовый слой и щелкнуть правой кнопкой мыши. В контекстном меню выбрать. Растрировать текст.

3. Продублировать этот слой. Отключить видимость "нижнего" текстового слоя.

4. Перейти на слой, являющийся "копией" текстового слоя.

5. С помощью инструмента Ластик стереть ту часть текста, которая при "письме от руки" появилась бы на бумаге в последнюю очередь.

6. Повторять пп.3-5 (в п.5 стирать "следующую" часть текста) до тех пор, пока не будет стерт весь текст.

7. Анимировать текст.

8. Сохранить анимацию. Выполнить команды Главного меню Файл. → Сохранить для Web … .
Выбрать вкладку Оптимизация.
Установить расширение файла: *.gif

Практическая работа №6. "Создание графического анимированного баннера"

1. Открыть рисунок, например, такой (изображение находится в буфере обмена):

2. Создать новый слой (Слой 1) и залить его белым цветом.

3. Сгруппировать Слой 1 с нижним слоем, выполнив команды Слой. ® Сгруппировать слои

Палитра Слои: Палитра История:

4. Дублировать Слой 1.

5. Сделать Слой 1 невидимым. Активизировать Слой 1 (копия).

Палитра Слои:

6. Активизировать инструмент Ластик.

Выбрать из списка кисть, изображённую на рисунке (или похожую).

7. Провести ластиком примерно так, как показано на рисунке.

8. Дублировать Слой 1 (копия).
Сделать Слой 1 (копия) невидимым. Активизировать Слой 1 (копия) 2.

Палитра Слои:

9. Ластиком (настройки инструмента оставить без изменений) провести следующий штрих.

До: После:

10. Дублировать Слой 1 (копия) 2.

11. Сделать Слой 1 (копия) 2 невидимым. Активизировать Слой 1 (копия) 3.

12. Сделать ластиком следующий штрих.

13. Аналогично дублировать слои и выполнять штрихи ластиком

до тех пор, пока не откроется нужная часть изображения.

14. Сделать видимым только два слоя: Слой 0 и Слой 1.

15. Открыть панель анимации.

16. Создать второй кадр, сделав видимыми только Слой 0 и Слой 1 (копия).

17. Создать третий кадр, сделав видимыми только Слой 0 и Слой 1 (копия) 2.

18. Аналогично создать все остальные кадры анимации.

19. Сохранить анимацию. Выполнить команды Главного меню Файл. → Сохранить для Web … .

Выбрать вкладку Оптимизация.
Установить расширение файла: *.gif

Практическая работа №7. "Создание мерцающей анимации"

Этот урок посвящен тому, как сделать медленное мигание отдельных фрагментов рисунка.
Есть два способа сделать это, здесь описывается самый простой:

1. Открыть изображение.

2. Аккуратно выделить нужный фрагмент, например, с помощью лассо.

3. Нажать Ctrl+J, чтобы продублировать этот фрагмент изображения на новом слое, т.е. создать новый слой через копирование этого фрагмента.

В палитре слоев появился новый слой:

4. Дальше работаем с уровнями.

Сделать новый слой активным и выполнить команды Главного меню
Изображение → Коррекция → Уровни…

Выставить параметры (на свое усмотрение), делая изображение светлее или темнее.

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

Выставить прозрачность слоев с фрагментом изображения.
На первый дубликат, например, 35%.

На второй - около 60%:

На третий - 85%.

На четвертом – 100%.
Можно выставить и другие значения прозрачности.

7. Перейти в панель анимации.
Если панели анимации нет на экране, то вызвать ее, выполнив команды меню Окно → Анимация.

§ Создать в окне анимации кадры, нажимая на иконку создания кадра (создать кадров в два раза больше, чем число слоев).

§ На первом кадре оставить видимым только нижний слой.
Остальные слои должны быть невидимы (убрать у них иконку глаза).

§ На втором кадре сделать видимыми два нижних слоя.

§ На следующем кадре сделать для него видимым самый нижний слой и следующий слой-дубликат, расположенный выше и т.д.

§ Затем (после середины) то же самое, только в обратном порядке.
То есть, если середина - самый яркий свет, то дальше он должен быть тусклее и тусклее.

§ Выставить нужное время, например, 0,1 секунды.

8. Последовательно выполнить команды Главного меню
Файл. → Сохранить для Web….
9. Не забыть проверить расширение: *.gif

Практическая работа №8. "Создание анимации движения"

1. Открыть изображение.

2. Выделить фрагмент рисунка

и скопировать этот фрагмент на новый слой, выполнив команды
Слой. ®Новый.®Скопировать на новый слой.

3. Увеличить фрагмент изображения на созданном слое (с помощью трансформации), сохранив пропорции.

4. Дублировать этот слой и еще немного увеличить размер фрагмента изображения.

Перейти в панель анимации.

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

6. На втором кадре видимыми должны быть два нижних слоя,

на третьем кадре – самый нижний и третий снизу слой,

далее – в обратном порядке.

7. Установить временную задержку на свое усмотрение.

8. Последовательно выполнить команды Главного меню
Файл. → Сохранить для Web….

9. Не забыть проверить расширение: *.gif

Список литературы

1. Гурский Ю. А. Photoshop CS3. Трюки и эффекты (+CD) / Ю. А. Гурский, И. В. Гурская. – СПб. : Питер, 2007. – 512 с.

2. Гурский Ю. Компьютерная графика: Photoshop CS3, Corel-DRAW X3/Illustretor CS3 : трюки и эффекты (+ DVD с видеокурсом) / Ю. Гурский, И. Гурская, А. Жвалевский. – СПб. : Питер, 2008. – 992 с.. 1

3. Топорков С. Adobe PHOTOSHOP CS в примерах / С. Топорков. – СПб. : БХВ-Петербург, 2005. – 384 с.: ил.

4. Принг Р. Энциклопедия шрифтовых эффектов в Photoshop . М.: Изд. дом «Вильямс», 2004. – 368c.

Интернет источники

5. Вебсайт: http://www.digital-photo.ru/.

Для заметок

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Данилькевич А.В.

Мультимедийные технологии

Методические рекомендации по выполнению практических работ

Часть 1. «Разработка баннеров»

Ответственный за издание – главный методист Камынина Т.В.

Нач. редакционно-издательского отдела – Черницын А.Ю.

Корректор – Козырева Л.Н.

Подписано в печать 21.11.11 г. Формат 140х210 1/16

PragmaticaC . Бумага офсетная.

Усл. печ. 1,6 .л. Тираж 100 Заказ 403

ФГБОУ СПО «Волгоградский технологический колледж»

Редакционно-издательский отдел