Съдържание на урока

В този урок ще :
Ползвате изображение с множество слоеве като база за анимация
Ползвате палитрата Layers заедно с палитрата Animation за създаване на
анимационни поредици
Създавате анимации, базирани на промени в позицията на слоя и ефекти за слоеве
Правите промени в отделни кадри, в няколко кадъра и в цялата анимация
Ползвате командата Tween, за да създавате плавни преходи между различни
настройки за непрозрачността Opacity и позицията на слоеве по протежение на
кадрите
Разглеждате предварително анимации в Adobe Image Ready и в Web браузър
Оптимизирате анимация, ползвайки палитрата Optimize
Този урок ще ви отнеме около час, за да го завършите. Той е разработен за
изпълнение в Adobe Image Ready, не във Photoshop.
Ако е необходимо, премахнете папката за предишния урок от вашия твърд диск
и копирайте папката Lesson15 на него. Когато работите по този урок, ще записвате
върху стартовите файлове (Start). Ако е необходимо да ги възстановите, копирайте ги
от приложения към книгата CD Adobe Photoshop CS2 Classroom in a book.
В допълнение, за този урок се нуждаете от Web браузър – като Internet
Explorer, Moziilla или Opera. Не е необходимо при да имате връзка с Интернет.

Създаване на анимации в Adobe Image Ready

В Adobe Image Ready вие създавате анимации, изхождайки от изображение, като

ползвате анимирани GIF файлове. Анимираното GIF изображение е поредица от
отделни изображения, наричани кадри. Всеки кадър се различава леко от предходния
кадър, което създава илюзия за движение, когато кадрите се възпроизвеждат бързо
един след друг. Можете да създадете анимация по няколко начина:

Като ползвате бутона Dublicate Current Frame (Дублирай текущия кадър) в
1
 палитрата Animation, за да създадете анимационни кадри и палитрата Layers, за
да дефинирате състоянието на изображението, асоциирано с всеки кадър.

Като ползвате функцията Tween (Междинно кадриране) за бързо създаване на
нови междинни кадри (между вече съществуващи), в които например се
изкривява текст или се променя непрозрачността, позицията или действащия
ефект на слоевете, за да се създаде например илюзията, че елемент в кадъра се
движи, появява или изчезва.

Чрез отваряне на многослоен файл на Adobe Photoshop или Adobe Ilustrator за
анимация, като всеки слой става кадър.
При създаване на анимационна поредица е най-добре да се остане в изглед
Original - това предпазва Image Ready от задължението да преоптимизира
изображението всеки път, когато редактирате съдържанието на някой кадър.
Анимационните файлове се извеждат или като GIF файлове, или като филми на Quick
Time. Не можете да създадете JPEG или PNG анимация.
За работата със слоеве в анимации
Работата със слоеве е ключът за създаването на анимации в Image Ready.
Поставянето на всеки елемент от анимацията в негов собствен слой ви позволява да
промените позицията и вида на елемента в течение на поредица от кадри.
Специфични за отделни кадри промени (Frame-specific). Засягат само селекти-
раните (активни) кадри в палитрата Animation . Frame-specific (специфични за кадри)
са промените , които правите в слоя, ползвайки командите и опциите на палитрата
Layers – включително непрозрачността Opacity, режима на смесване, видимостта,
позицията и ефектите.
Глобални промени (Global). Засягат всички кадри в анимацията. Глобални
(Global) са промените, които правите по стойностите на пикселите в слоя, ползвайки
инструменти за рисуване или редактиране, команди за цветови и тонални корекции,
филтри, текстови и други команди за редактиране на изображения. Те засягат всеки
кадър, в който присъства дадения слой.
2
 Всеки нов кадър започва като дубликат иа предходния кадър - вие редактирате
кадъра като настройвате неговите слоеве. Можете да приложите промените в слоя на
един кадър, на група кадри или на цялата анимация.

Да започваме

В този урок ще работите с набор от изображения, разработени за представяне на

Web страница с делфини. Ако имате инсталиран браузър на вашия компютър, можете
да видите предварително завършените анимации.
1. Стартирайте Adobe Bridge и в палитрата Favorites в горния ляв ъгъл на Bridge
щракнете върху фаворита Lessons. След това щракнете двукратно върху папката
Lessons15 в панела за предварителен изглед, за да видите съдържанието й.
2. Щракнете с десния бутон върху файла 15End.html и изберете Open With от
контекстното меню. Изберете желания Web браузър, за да отворите HTML
файла.

Страницата включва три анимирани области: текста „Making Waves" (Правене

на вълни), химическата формула на водата, преместваща се в изображението и един
делфин, плуващ насам-натам и изпускащ мехури, които изскачат във въздуха. (Текстът

3
и бутоните са заместители.)
3. Когато завършите разглеждането на файла, излезте от браузъра.
4. Стартирайте Image Ready като натиснете клавишната комбинация Crtl+Alt+Shift,
за да възстановите преференциите по подразбиране. (Вижте „Възстановяване на
преференциите по подразбиране" в уводната глава.)
5. Ако получите предупредително съобщение, щракнете върху Erase, за да изтриете
преференциите.

Дефиниране на работно пространство за анимационни задачи

Преди да започнете да работите върху файла, ще дефинирате ново работно

пространство специално за анимационна работа. Правилно организираното работно
пространство намалява претрупването на екрана, улеснява вашата работа и я превръща
в нещо приятно.
1. Изберете File -> Open, навигирайте до папката Lessons/ Lessons15 и щракнете
двукратно върху файла Dolphin.psd. (Рисунките за анимацията са подготвена за
вас, така че не е нужно да уголемявате прозореца на изображението или да
увеличавате мащаба на изобразяване за задачите в този урок.)
Забележка: Двукратното щракване върху миниатюра на изобрюкение в Adobe Bridge
отваря файла във Photoshop.
2. Затворете групите палитри Color, Web Content и Slice.
3. В групата палитри Info изберете Layer Comp, за да я направите активна (най-
отпред).
4. Изберете Window -> Animation, за да отворите палитрата Animation. Изтеглете
долния десен ъгъл на палитрата Animation, за да я уголемите така, че да се
възползвате от наличното хоризонтално пространство в работната област.
(Допълнително) Можете да преместите палитрата Animation по-близо до
прозореца на изображението, така че елементите в работната област да са по-близо
един до друг.
4
 5. Изберете Window -> Workspace - > Save Workspace
6. В диалоговия прозорец Save Workspace напишете Animation и щракнете върху
ОК.
Сега можете бързо да зададете тези позиции и размери на палитрите във всеки
момент, като изберете Workspace -> Animation.

Анимиране чрез скриване и показване на слоеве

Може би най-простият начин за създаване на двустъпкова анимация е чрез

превключване на видимостта на два слоя чрез иконата с око в палитрата Layers.

Например може да направите анимиран персонаж чрез зациклена промяна на две
негови изражения или да накарате обект да се движи напред-назад по проста схема.
Изображението Dolphin.psd включва пет слоя, които можете да видите като
разгледате палитрата Layers. Ще направите споменатия вид анимация с два слоя на
изображението Dolphin.

Подготвяне на слоеви композиции

5
 Вие работихте със слоеви композиции във Photoshop по-рано в тази книга (вижте
рок 6 „Основи на слоевете"). Image Ready предлага същите възможности, които
улесняват значително анимирането.

1. В палитрата Layers се уверете, че за иконите с око за слоевете Background и

Dolphin са включени (видими), а полетата за видимостта на останалите три слоя
са празни (в тях няма икони с око).

2. В палитрата Layer Comp щракнете върху бутона Create New Layer Comp .
3. В диалоговия прозорец Layer Comp напишете Dolphin1 и се уверете, че опцията
Visibility (Видимост) е избрана с отметка, след което щракнете върху OK.
Сега в палитрата Layer Comp има нова слоева композиция: Dolphin1

4. В палитрата Layers щракнете, за да скриете иконата с око за слоя Dolphin1 и след

6
 това щракнете, за да включите иконата с око за слоя Dolphin2.

5. Създайте нова слоева композиция – Dolphin2, ползвайки същата техника, и то в

стъпки 2 и 3.
6. Щракнете върху полето вляво от слоевата композиция Dolphin1, за да приложите
условията за видимост към изображението. В полето се появява бадж (badge)

, който показва, че това е текущата слоева композиция.

7. Сега имате две слоеви композиции, които можете да ползвате като отправни
точки за кадрите, които ще създадете в анимацията.

Започване на анимационния процес

Когато започвате, само един кадър - този по подразбиране - се намира в палитра-

7
та Animation. Този кадър показва текущите настройки за видимостта Visibility в
палитрата Layers, като само два слоя са видими: Dolphin1 и Background. Кадърът е
селектиран (очертан с рамка), която показва, че можете да промените съдържанието му
чрез редактиране на изображението.

1. В палитрата Animation щракнете върху бутона Duplicate Current Frame

(Дублирай текущия кадър) , за да създадете кадър 2 (frame 2).

2. В палитрата Layer Comp щракнете върху полето, за да поставите баджа Apply

This Layer Comp badge (Приложи тази слоева композиция) за слоевата

композиция Dolphin2. Забележете, че в палитрата Layers, слоят Dolphin1 сега е
скрит а слоят Dolphin2 е видим.

8
 3. В палитрата Animation изберете кадър 1. В прозореца на изображението
делфинът възстановява първоначалния си вид, като само слоят Dolphin1 е видим.
4. Избирайте последователно кадър 2 и кадър 1, за да анимирате ръчно
изображението.

Навигиране между кадрите и преглеждане на анимацията

Можете да ползвате редица техники за предварителен изглед и преминаване през

кадрите на анимацията. Познаването на управляващите елементи в палитрите
Animation и Layers е важно за усвояването на анимационния процес.
Вие вече се опитвахте да анимирате изображението ръчно чрез последователно и
поредно селектиране на всеки от кадрите. В тази процедура ще пробвате няколко
други начина, с които можете да прегледате предварително анимация в Image Ready.
Ще прегледате анимацията и в Web браузър.
Забележка: За да ползвате командата Preview In, трябва да имате инсталиран
браузър във Вашата система. За повече информация намерете „Previewing an image
in a bpowser" (Преглеждане на изображение в браузьр) в Help на Image Ready.

9
A. Меню за вида на зациклянето. В. Бутон Избери първия кадър.
С. Бутон избери предишния кадър (Назад) D. Бутон Възпроизвеждане/Спиране
на анимацията (Play/Stop) Е. Бутон Избери следващия кадьр
(Напред) F. Бутон Междинно кадриране
(Tween) G. Бутон Дублиране на текущия кадьр
Н. Изтриване (кофа уа боклук) I. Избран кадьр

1. В палитрата Animation се уверете, че в менюто Looping за вида на зациклянето

(в левия край на палитрата) е избрана опция Forever (Завинаги).

2. Щракнете върху бутона Select Previous Frame (Избери предишния кадър) , за

да преминете към другия кадър. (Опитайте да щракате върху бутона в бърза
последователност и наблюдавайте ръчното възпроизвеждане на анимацията в
прозореца на изображението.)

3. В палитрата Layers щракнете върху бутоните Forward (Напред) или Backward

(Назад) в долния ляв ъгъл на палитрата и наблюдавайте резултатите, които са
подобни на предишната стъпка.

A. Бутон Назад в палитрата Layers В. Бутон Напред в палитрата Layers

4. Щракнете върху бутона Р1ау (Възпроизвеждане) (►) в палитрата Animation, за

10
 да прегледате анимацията. Този бутон се превръща в Stop (Стоп) (■), който
можете да щракнете, за да спрете анимацията.

5. Изберете File -> Preview In > и изберете конкретния браузър от подменюто

Preview In. Когато завършите преглеждането на анимацията, затворете прозореца
на браузъра и се върнете Adobe ImageReady.

Можете да изпълните тази стъпка и като натиснете клавишната

комбинация Alt+Ctrl+P, за да стартирате бързо преглеждането в браузъра или
щракнете върху бутона за браузьра в кутията с инструменти.

6. Изберете File -> Save Optimized As.

7. В диалоговия прозорец Save Optimized As отворете папката Lessons/ Lessons15 и

щракнете върху бутона Create New Folder. Напишете Му_Gifs, за да именувате
новата папка и след това я отворете. Намирайки се още в диалоговия прозорец
Save Optimized As, напишете Dolphin.gif като файлово име и щракнете върху
Save.

Подготвяне на копия на слоеве за анимация

11
 Сега ще започнете да анимирате различен елемент от изображението на делфина
като добавяте към съществуващата анимация. При тази процедура ще ползвате същата
основна техника - скриване и показване на слоеве в различните кадри, но този път ще
създадете още слоеве чрез копиране и трансформиране на един слой

Преди да добавите слоеве към изображение, което вече съдържа анимация, е

добра идея да създадете нов кадър. Тази стъпка ще ви помогне да запазите съществу-
ващите кадри от нежелани промени.

1. В палитрата Animation селектирайте кадър 2 и щракнете върху бутона Duplicate

Current Frame , за да създадете нов кадър (3), който е подобен на кадър 2.
Оставете селектиран кадър 3.

2. В палитрата Animation отворете менюто към палитрата и щракнете върху New

Layers Visible in All States/Frames (Новите слоеве са видими при всички състо-
яния/кадри), за да деселектирате тази опция (като премахнете отметката).

3. В палитрата Layers селектирайте слоя Bubble (Мехур) и щракнете върху полето

на иконата с око , за да направите този слой видим. Оставете слоя Bubble

селектиран.

12
 В прозореца на изображението и миниатюрата на кадър 3 забележете мехура
(Bubble), който се появява над дихателния отвор на делфина.

4. Изберете View ->Snap, за да премахнете отметката към тази команда.

5. В кутията с инструменти изберете инструмента Моvе

6. Натиснете клавиша Alt и влачете мехура нагоре и надясно в прозореца на

изображението. Когато отпуснете бутона на мишката, в изображението ще има
два мехура, а в палитрата Layers - нов слой: Bubble сору.

13
 7. Още веднъж натиснете клавишаAlt и влачете мехура нагоре и надясно, за да
създадете трети мехур – малко над и вдясно от втория мехур.

Сега имате 3 слоя с мехури в прозореца на изображението и палитрата Layers:

Bubble, Bubble copy и Bubble copy2.

Забележка: Дубликатните слоеве ще бъдат видими и в трите кадъра от палитрата

Animation, ако в менюто към палиттрата не е отменена командата New Layers
Visible in All States/Frames

Трансформиране на слоеве за анимация

Сега, когато сте подготвили дубликати на слоевете във файла Dolphin.psd, ще

трансформирате (преобразувате геометрично) двете копия така, че мехурът да
изглежда че нараства, изоставайки зад плуващия делфин.

1. Изберете инструмента Move и се уверете, че в лентата с опции за

инструментите е избран вариантът му Layer Select .

2. В прозореца на изображението селектирайте средния мехур - обектът в слоя

14
 Bubble сору.

3. Изберете Edit -> Transform -> Scale (Мащабирай).

В прозореца на изображението се появява трансформираща рамка около слоя

Bubble сору.

4. В лентата с опции за инструментите изберете иконата Constrain Aspect Ration

(Запазвай пропорциите) и напишете 24 рх за широчината Width (W:).
Щракнете някъде извън текстовото поле за широчината и забележете, че
мехурът възприема новия размер, но трансформиращата рамка остава върху
обекта Bubble сору.

5. Натиснете клавиша Enter, за да се възприеме трансформацията.

6. В прозореца на изображението селектирайте третия мехур и повторете стъпки 3-

5, но този път напишете 26 рх като размер по широчина или височина.

7. Ползвайки все още инструмента Моvе и опцията Layer Select, прецизирайте

мястото на трите мехура като ги влачите в прозореца на изображението.

Уверете се, че третият мехур не отива по-нататък от тръбната перка на делфина

и че трите мехура са почти равномерно разпределени. Вижте долната илюстрация за
справка.

15
 8. Изберете File -> Save.

Създаване на едновременни анимации

Сега ще дефинирате анимацията с издигащите се мехури като последователно

скривате и показвате слоевете на файла Dolphin.psd. Ще комбинирате тези издигащи се
мехури с анимацията на плуващия делфин като дублирате кадри и координирате
настройките в палитрите Animation и Layers.

1. В палитрата Animation се уверете, че е селектиран кадър 3 или го селектирайте

сега.

2. В палитрата Layers щракнете върху иконите с око , така че само

Background, Dolphin 1 и оригиналният слой Bubble да са видими. Скрийте
останалите слоеве.

16
Забележка: Когато скриете или и покажете слой в кадър, видимостта на слоя се
променя само за този кадър.

3. В палитрата Animation щракнете върху бутона Duplicate Current Frame , за да

създадете кадър 4. Оставете кадър 4 селектиран в палитрата Animation.

4. В палитрата Layer Comps селектирайте Dolphin 2 като щракнете върху бутона

Apply Layer Comp.. След това в палитрата Layers включете иконата с око за
слоя Bubble сору.

17
 5. Щракнете върху бутона Duplicate Current Frame още два пъти, след това
ползвайте палитрите Layer Comp и Layers както следва:

За кадър 5 приложете слоевата композиция Dolphin 1 и направете видим слоя

Bubble сору 2.

За кадър 6 приложете слоевата композиция Dolphin 2 и направете видим слоя

Рор.

6. Щракнете върху бутона Р1ау (►) в палитрата Animation, за да видите

резултатите предварително. Когато завършите, щракнете върху бутона Stop (■),
за да спрете анимацията.

Когато анимацията се движи от кадър в кадър, опашката на делфина се движи

нагоре-надолу с всяка стъпка. При всеки пълен цикъл, от делфина се появява мехур,
издига се нагоре и се пука в четиристъпкова поредица.

Ако резултатите ви са различни от описаните тук, прегледайте настройките за

видимост в палитрата Layers за всеки последователен кадър и направете необходимите
корекции.

18
Настройване и преглеждане на времедиаграмата

По-рано, когато преглеждахте анимацията в браузъра, вероятно забелязахте, че

честотата, с която делфинът пляска с опашка и плува, е малко нещо френетична.
Можете да забавите и успокоите движението като зададете задържане между всеки
кадър в анимацията. След това ще възпроизведете анимацията отново, за да прегледате
скоростта на протичане на действието.

В своите проекти можете да зададете паузи за всички кадри или различни паузи
за различните отделни кадри в анимацията. За този файл ще приложите едно и също
времезакъснение между всяка двойка кадри в завършената анимация.

1 От менюто към палитрата Animation изберете Select All Frames.

2 Щракнете върху параметъра за времето (0 seconds, по подразбиране) под

един от кадрите, за да отворите падащото меню Frame Delay (Закъснение
/т.е. време за задържане/ на кадъра) и изберете 0.2 секунди.

19
 Новата стойност се появява под миниатюрата на всеки кадър, показвайки че
времезакъснението се отнася за всички кадри в палитрата. (Можете да променяте
времезакъснението за отделни кадри.)

3 Щракнете върху бутона Р1ау (►) в палитрата Animation, за да видите

анимацията, след което щракнете върху бутона Stop (■), когато
пожелаете да спрете анимацията.

4 Изберете File -> Preview In и изберете браузър от подменюто, за да

възпроизведете анимацията при зададеното времезакъснение. Когато
завършите преглеждането се върнете в Image Ready.

5 Изберете File -> Save Optimized As.

6 В диалоговия прозорец Save Optimized As се уверете, че изображението е

именувано Dolphin.gif и мястото е в папката ви Му_Gifs. След това
щракнете върху Save и върху Replace, за да замените съществуващия
файл.

Командата Save Optimized As.съхранява файла в GIF, JPEG или PNG формат за
ползване в Web страниците ви. GIF е единственият формат, който поддържа анимации.

7 Изберете File > С1оsе, за да затворите оригиналното изображение без да

съхранявате промените.

С това завършихте работата си по анимацията на делфина за проекта на Web

страница. Като следваща стъпка ще продължите с работа по други анимирани
елементи за проекта.

Анимиране с позиция и непрозрачност на слоеве

Ще ползвате малко по-различен метод за анимиране на следващия сегмент на

20
проекта. Този път ще анимирате „влитане" в кадъра на текстово лого, ползвайки
иногослойно изображение на Photoshop.

Добрата новина е, че не е необходимо да създавате ръчно повече слоеве за всяка

промяна в позицията, нито уморително да създавате и настройвате всеки отделен
кадър. Веднага след като създадете началния и крайния кадри за поредицата, можете
да се отпуснете и да оставите Image Ready да свърши цялата работа за кадрите между
тях.

Отваряне на файла на изображението и започване на анимационния процес

За да започнете, ще отворите нов файл с изображение и ще прегледате текущите
му настройки.

1. В Image Ready изберете File -> Open и отворете файла H2O.psd от папката
Lessons/Lesson15 на вашия твърд диск.

Логото се състои от четири различни компонента, намиращи се на различни

слоеве. Ще съставите анимационни кадри, при които буквите на логото се появяват и
преместват до крайните си позиции от различни области. Текущото състояние на
изображението отразява крайния вид на анимацията.

2. Уверете се, че палитрите Animation и Layers са видими или изберете Window ->
Workspace -> Animation, за да ги отворите.

3. В палитрата Animation щракнете върху бутона Duplicate Current Frame, за да

създадете нов анимационен кадър.

Сега, когато имате два кадъра, сте отворили пътя си за нова анимация. Следващата ви
21
задача ще бъде да създадете разлики между състоянията на слоевете на двата кадъра.

Задаване на позиции и непрозрачност на слоевете

В тази част на урока ще промените позицията и степента на непрозрачност на

слоеве в изображението, за да създадете началния и крайния кадри на анимационната
поредица. Промяната на реда, по който се появяват кадрите в анимацията е опростено
до преместване на миниатюрите им в палитрата Animation.
1. В палитрата Animation се уверете че кадър 2 е селектиран. След това в палитрата
Layers селектирайте слой Н.

2. Изберете инструмента Моvе , натиснете клавиша Shift; (за да ограничите

движението) и изтеглете „Н" към лявата страна на прозореца на изображението,
така че само част от буквата „Н" да остане видима. Когато само част от „Н"
остане видима, отпуснете бутона на мишката и след това - клавиша Shift.

22
 3. В палитрата Layers селектирайте слоя О, натиснете клавиша Shift и изтеглете
„О" до аналогична позиция в дясната страна на прозореца на изображението,
ползвайки отново клавиша Shift, за да ограничите движението.
Забележка: Внимавайте да не изтеглите буквите изцяио извън прозореца на
изображението върху десктопа, което ще създаде файл на Image Ready.

4. Повторете стъпка 3, но този път селектирайте слой 2 и изтеглете „2" до горната

част от прозореца на изображението. Трите слоя трябва да са аранжирани както е
показано на илюстрацията тук.

5. В палитрата Layers селектирайте слоя Н и преместете плъзгача за

непрозрачността Opacity на 20%. Повторете този процес, за да намалите
непрозрачността на останалите слоеве 2 и О също до 20%.

В палитрата Animation забележете, че кадър 2 се е актуализирал, за да

23
съответства на текущото състояние на изображението. За да направите кадър 2 начално
състояние на анимацията, ще промените реда на двата кадъра.

6. В палитрата Animation изтеглете кадър 2 наляво, като отпуснете бутона на

мишката когато черната лента застане отляво на кадър 1.

Междинно кадриране на позицията и непрозрачността на слоевете

За да завършите анимационната поредица, ще добавите кадри, които

представляват преходни състояния на изображението между двата съществуващи
кадъра Когато променяте позицията, непрозрачността или ефектите за всеки слой
между двата анимационни кадъра, можете да инструктирате Image Ready да направи
междинно кадриране (Tween), тоест да създаде автоматично междинни кадри.

1. В палитрата Animation се уверете че е селектиран кадър 1; след това изберете

Tween от менюто към палитрата.

2. В диалоговия прозорец Tween задайте следните опции (ако още не са избрани):

От падащото меню Tween With изберете Next Frame (/Изпълни междинно

кадриране със/ следващия кадър)

За Frames to Add (Кадри за добавяне) въведете 4

За Layers изберете А11 Layers

За Parameters изберете с отметка Position и Орасity. (Можете освен това да

изберете Effects, за да варирате настройките на ефектите за слоеве
24
 равномерно между началния и крайния кадри. Тук няма да изберете тази
опция, тъй като не сте прилагали ефекти за слоеве.)

3. Щракнете върху ОК, за да затворите диалоговия прозорец.

Image Ready създава четири нови преходни кадъра, въз основа на настройките на
непрозрачността и позицията на слоевете в оригиналните два кадъра.

4. В долната лява част на палитрата Animation отворете падащото меню Looping

(Опции за зацикляне) и изберете Once (Еднократно /т.е. без зацикляне/).

Забележка: В примерния файл 15End.html за . този урок, зациклянето е

конфигурирано малко по-различно, отколкото се изисква тук. Във файла End е
избрана опция Forever (Завинаги), но има и дълго забавяне след крайния кадър на
анимацията, което в тази фаза не е още създадено.

5. В палитрата Animation щракнете върху бутона Р1ау (Възпроизвеждай) (►), за да

видите в предварителен изглед анимацията си в Image Ready.

Междинно кадриране (tweening) на кадри

Вие ползвате командата Tween, за да добавите автоматично или модифицирате

серия от кадри между два съществуващи кадъра - варирайки атрибутите на слоевете
(позиция, непрозрачност или параметри на ефектите) равномерно между новите кадри,
25
създавайки илюзията за движение. Например, ако искате съдържанието на даден слой
да изчезва „в нищото" (fade out), задайте непрозрачността Opacity на слоя в началния
кадър като 100% и след това задайте стойност 0% за непрозрачността на същия слой в
крайния кадър. Когато създавате междинно кадриране между два кадъра,
непрозрачността на слоя намалява равномерно от кадър в кадър в междинната
поредица.

Терминът „tweening" (междинно кадриране) произлиза от “in betweening"

(създаване на междинни кадри) - термин от класическата анимация, ползван за
описване на процеса. Междинното кадриране значително намалява времето за
създаване на анимационни ефекти като Fade in (Оттъмняване /Поява/) и Fade Out
(Затъмняване /Изчезване/) или придвижване на елемент пред кадъра. След като
създадете междинните кадри, можете да ги редактирате индивидуално.

Ако селектирате един кадър в процеса на междинно кадриране, вие избирате

дали да направите междинното кадриране с предходния или със следващия кадър. Ако
изберете два последователни кадъра, новите кадри се добавят между тези два кадъра.
Ако селектирате повече от два кадъра, съществуващите кадри между първия и
последния селектирани кадри се променят от операцията по междинно кадриране. Ако
селектирате първия и последния кадри в анимацията, тези кадри се третират като
последователни и междинните кадри се добавят след последния кадър. (Този метод за
междинно кадриране е полезен когато анимацията се конфигурира с многократно
зацикляне.)

Забележка: Не можете да селектирате непоследователни кадри с цел междинно

кадриране.

Анимиране на стил за слой

Когато в предишната процедура направихте междинно кадриране, за да

26
създадете четирите нови кадъра, вие забелязахте полето за отметка Еffects в
диалоговия прозорец Tween. В тази процедура ще анимирате ефект за слой, наричан
още стил за слой. Крайният резултат ще бъде кратко присветване, което се появява и
след това изчезва зад второто изображение.

1. В палитрата Animation селектирайте кадър 6 и след това щракнете върху бутона

Duplicate Current Frame, за да създадете нов кадър със същите настройки както
кадър 6. Оставете кадър 7 селектиран.

2. В палитрата Layers селектирайте слой 2 и изберете Outer Glow (Сияние навън) от

падащото меню Layer Style в долната част на палитрата.

3. Когато се отвори диалоговият прозорец Layer Style, щракнете върху ОК, за да

приемете настройките по подразбиране.

Забележете лекото светло хало около контурите на второто изображение (слой

2).

27
4. Дублирайте кадър 7 като щракнете върху бутона Duplicate Current Frame в
палитрата Animation.

5. В палитрата Layers щракнете двукратно върху ефекта Outer Glow за слой 2, за да

отворите диалоговия прозорец Layer Style. Уверете се, че опцията Preview e
избрана с отметка и задайте следните настройки:

Blend Mode – Screen

Opacity - 75 %

Noise - 0

Technique - Softer

за Spread изтеглете плъзгача до 20%,

за Size изтеглете плъзгача до 49 рх.

Щракнете върху ОК

6. Изберете File -> Save.

Създаване на междинни кадри за промени в стила на слоеве

Както вече видяхте в този урок, функцията Tween може да ви спести много
време, което иначе бихте изразходвали за скучна и прецизна работа. Ще ползвате
командата Tween отново, за да анимирате промените в стила на слой. Ще
завършите и ефекта със сиянието, като дублирате още един кадър и го преместите в
28
 края на анимацията. Резултатната анимация създава впечатлението за леко
присветване зад изображение 2, когато то се връща на мястото си.

1. В палитрата Animation селектирайте кадър 7.

2. От менюто към палитрата Animation изберете Tween.

3. В диалоговия прозорец Tween задайте следните опции:

За Tween With изберете Next Frame

За Frames to Add напишете 2

За Layers изберете А11 Layers

За Parameters изберете Effects

4. Щракнете върху ОК, за да затворите диалоговия прозорец.

5. В палитрата Animation селектирайте кадър 6 и след това щракнете върху бутона

Duplicate Current Frame , за да създадете нов кадър 7, който ще преномерира
кадрите, следващи 7.

6. Изтеглете новия кадър 7 до края на палитрата Animation, така че да е вдясно

(след) кадър 11.

7. Изберете File -> Save.

Запазване на прозрачността и подготовка за оптимизиране

Сега ще оптимизирате изображението Н2О в GIF формат с прозрачност на фона

и ще прегледате в предварителен изглед вашата анимация в Web браузър. Не
забравяйте, че само GIF форматът поддържа анимирани изображения.

Във файла Н2О.рsd добавихме слой Backdrop, за да виждате по-добре резултата,

29
докато работите. Този слой не е необходим за крайния проект на Web страница, тъй
като вие смятате да оптимизирате файла с прозрачен фон. Поради това, вашата първа
стъпка е да скриете слоя Backdrop.

1. От менюто към палитрата Animation изберете Select All Frames (Селектирай

всички кадри).

2. В палитрата Layers щракнете върху иконата с око за слоя Backdrop, за да го

скриете във всички кадри.

3. В палитратa Optimize задайте следните опции:

За файлов формат изберете GIF

В секция Color Table, от падащото меню за алгоритъма за намаляване на

цветовете Reduction изберете Perceptual, а за броя на цветовете Color
въведете 256

В секция Transparency включете с отметка опцията Transparency (за да се

запази прозрачността на оригиналното изображение)

За Matte изберете бял цвят от падащото меню, ако вече не е избран

Добър подбор на оптимизационни настройки за GIF изображения

Един от най-важните аспекти при създаването на ефективни GIF изображения -

статични или анимирани - е да се намали колкото се може повече файловият им
размер, без да се влошава визуалното качество. В тази връзка, когато оптимизирате
GIF изображения е необходимо да изберете най-подходящия алгоритъм за намаляване
на броя на цветовете в тях, да намалите максимално цветовата палитра и да
контролирате симулативното възпроизвеждане (dither) в програмата и браузъра.

Image Ready (и Photoshop) могат да изчислят кои са най-необходимите цветове,

30
ползвайки някой от наличните алгоритми: Perceptual, Selective, Adaptive, web, Custom и
Windows или Мас ОS. Като правило, вие избирате между Perceptual, Selective и
Adaptive.

Perceptual (По различимост) създава потребителска цветова таблица като дава

приоритет на цветовете, които се появяват по-често в изображението и са по-
въздействащи на човешкото око.

Selective (Селективна) създава цветова таблица подобна на таблицата при

Perceptual, но фаворизира широките области с еднакви цветове и запазването на
гарантираните за Web цветове. Тази палитра обикновено произвежда
изображения с най-голям интегритет (непрекъснатост) на цветовете.

Adaptive (Адаптивна) създава цветова таблица като взема цветове от спектъра,

които се появяват най-често в изображението.

След като сте избрали метода за намаляване на броя на цветовете,

съществуващите във файла цветове се показват в цветовата таблица Color Table.
Можете допълнително да намалите броя на цветовете във файла, ползвайки
падащото меню Color. Това често запазва добро качество на изображението,
намалявайки драстично необходимото пространство за съхраняване на
излишните цветове.

Application dither (Симулативно възпроизвеждане в приложната програма) се

получава, когато Photoshop или Image Ready се опитват да симулират цветове,
които присъстват в оригиналното изображение, но не и в оптимизираната цветова
палитра, която задавате. За да контролирате степента на симулативно
възпроизвеждане от приложната програма, увеличете мащаба на изобразяване и
вижте дали преходните области са плавни или с рез ш яркостни и цветови преходи.
Ако има груби преходи или разслояване на цветни ивици, преместете плъзгача
Dither в палитрата Optimize в посока увеличение - до 100%.
31
 Broweser dither (Симулативно възпроизвеждане в браузъра) се получава когато
Web браузър, работещ в система с 8-битов цвят (256 цвята) симулира цветовете,
които присъстват в цветовата палитра на оригиналното изображение, но не и в
системната палитра, ползване от браузъра. Можете да контролирате степента на
симулативно възпроизвеждане от браузъра, като изместите селектираните цветове
към Web-safe (гарантирани за Web) цветове в палитрата Color Table.

За повече информация по тези и други оптимизационни настройки, вижте Не1р

на Image Ready CS2

4. При всички кадри все още селектирани в палитрата Animation, щракнете с

десния бутон на мишката и щракнете върху един от кадрите, за да се отвори
контекстно-чувстви-телното меню Disposal Method (Метод за отстраняване) и
изберете Restore to Background.

32
 Методът за отстраняване на кадъра (frame disposal) определя дали текущият
кадър ще бъде отстранен преди възпроизвеждането на следващия кадър. Опциите за

отстраняване Restore to Background (Възстанови към фона) ( ) и Automatic

(Автоматично) премахват селектирания кадър преди да се възпроизведе новия кадър,
елиминирайки по този начин опасността от изобразяване на остатъчни пиксели от

предходния кадър. Опцията Do Not Dispose (Не отстранявай) запазва кадрите.

Опцията Automatic е подходяща за повечето анимации. Тази опция избира метода за
разполагане въз основа на наличието или отсъствието на прозрачност в следващия
кадър и отстранява селектирания кадър, ако следващия кадър съдържа прозрачност в
слоя.

5. При всички кадри все още селектирани, ползвайте изскачащото меню Frame
Delay под всяка от миниатюрите на кадрите и изберете 0.1 sec.

6. От менюто към палитрата Animation изберете Optimize Animation.

7. В диалоговия прозорец Optimize Animation се уверете че са включени с отметки

опциите Bounding Box и Redundant Pixel Removal и щракнете върху ОК.

Опцията Bounding Box, указва на Image Ready да изреже всеки кадър с цел да
запази само областите, които са се променили спрямо предходния кадър.
Анимационните файлове, създадени при прилагане на тази опция са по-малки, но са
несъвместими с редакторите на GIF изображения, които не поддържат тази опция.

Опцията Optimize by Redundant Pixel Removal (Оптимизирай чрез отстраняване

на излишните пиксели), прави прозрачни всички пиксели в кадъра, които не са
променени спрямо предходния кадър. Когато изберете опцията Optimize by
Redundant Pixel Removal, методът Disposal Method трябва да е зададен като
Automatic.

В допълнение към оптимизационните задачи, приложени към стандартните GIF

33
 файлове, някои други задачи могат да се изпълнят за анимираните GIF файлове.
Ако оптимизирате анимираното GIF изображение, ползвайки Adaptive, Perceptual,
Selective палитра, Image Ready генерира палитра за файла, базирана на всички кадри
в анимацията. Прилага се специална техника за симулативно възпроизвеждане
(dithering), за да се гарантира, че шарките за симулативно възпроизвеждане са едни
и същи по протежение на всички кадри и това няма да доведе до трепкания при
възпроизвеждането. Освен това кадрите се оптимизират така, че се включват само
областите, които се променят от кадър в кадър. Това намалява значително файловия
размер на анимираното GIF изображение. Като резултат, Image Ready изисква
повече време, за да оптимизира анимирано GIF изображение, отколкото за
стандартно.

За повече информация по оптимизирането на изображения за Web вижте

Help на Photoshop CS2

Разглеждане на оптимизирания GIF файл

Вие почти завършихте работата си по файла Н2О.psd, който ще ползвате за

съхраняване като анимирано GIF изображение.

1. |В прозореца на изображението щракнете върху етикета Optimized

34
 Image Ready преизгражда изображението според опциите, които сте въвели.

2. В прозореца на изображението щракнете върху етикета 2-Up и сравнете

информацията за оригиналната и оптимизираната версии на анимираното
изображение.

3. Изберете File -> Save Optimized As, именувайте изображението H2O.gif

изберете папката Му_Gifs и щракнете върху Save.

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

като щракнете върху бутона Preview In от кутията с инструменти. След това
затворете браузъра.

4 В Image Ready изберете File -> Close, за да затворите оригиналния файл и не

съхранявайте промените.

С това завършихте работата си по влитащото лого.

Ползване на векторни маски за създаване на анимации

Останалата част на този урок се занимава с маски, доколкото те важат и за

анимации. Ще работите върху два отделни проекта с различни типове маски -
първите: векторни маски, а вторите - маски за слоеве. Първо ще създадете ефект на
океанска вълна, надигаща се и спадаща вътре в буквите на думата Waves (Вълни).
Ще направите това като създадете векторна маска за частично блокиране на слоя
Wave така, че океанът да се вижда само вътре в думата, след което ще ползвате
промени в позициите, за да дефинирате различните кадри на анимацията.

1. Изберете File -> Ореn и отворете файла Waves.psd от папката

Lesson/Lesson15.

2. В палитрата Layers се уверете, че всички слоеве са видими. Ако не са,

35
 щракнете върху иконите с око, за да се появят те към всеки слой.

3. В палитрата Layers селектирайте слоя Waves.

4. Натиснете клавиша Alt, позиционирайте показалеца върху плътната линия,

разделяща двата слоя Wave и Техt в палитрата Layers (показалецът се

променя на две застъпващи се кръгчета) Щракнете върху разделителната

линия между слоевете, за да ги свържете.

Забележете, че вълните сега са маскирани от очертанията на текста на логото.

Пред името на слоя Waves се появява сочеща надолу стрелка както и

миниатюра в палитрата Layers, показваща че слоят е групиран със слоя под него.

36
 Анимиране на промени на позицията в слой с векторна маска
Въпреки че слоевете Wave и Техt, са свързани, пак можете да направите промени
в позицията на отделните слоеве.

1. В палитрата Animation щракнете върху бутона Duplicate Current Frame, за да

създадете нов кадър - кадър 2.

2. Ако е необходимо, селектирайте кадър 2 в палитрата Animation. В палитрата

Layers деселектирайте слоя Техt, оставяйки селектиран само слоя Wave.

3. След това изберете инструмента Моvе от кутията с инструменти.

4. Започнете да влачите надолу слоя Wave в прозореца на изображението и след

това натиснете клавиша Shift (за да ограничите движението). Влачете докато
горната част на изображението с вълната застане точно над текста WAVES
(Докато влачите, целият слой Wave посивява, така че можете да видите
позицията на вълната, докато я влачите.)

5. Щракнете върху бутона Р1ау (►), за да проиграете (възпроизведете)

анимацията. Вълната се надига и спада вътре в буквите на логото. Щракнете
върху бутона Stop (■), за да спрете анимацията.

Изглаждане на действието на вълната

За да направите движението на вълната малко по-естествено, ще ползвате вече
познатото ви междинно кадриране, за да добавите още кадри към анимацията.

37
Преди да започнете се уверете, че кадър 2 е селектиран в палитрата

1 От менюто към палитрата Animation изберете Tween, за да отворите

диалоговия прозорец Tween и след това направете следното:

За Frames to Add (Кадри за добавяне) напишете 2.

За Tween With(Изпълни междинно кадриране спрямо), изберете

Previous Frame(Предишния кадър)

За Layers изберете Аll Layers (Всички слоеве)

За Parameters изберете Position (Позиция)

Щракнете върху ОК, за да затворите диалоговия прозорец

2 В палитрата Animation изберете Forever от падащото меню Looping.

38
3 Изберете Select -> Deselect Layers и след това щракнете върху бутона Р1ау
(►) в палитрата Animation, за да видите анимацията в предварителен
изглед. Когато се нагледате достатъчно, щракнете върху Stop (■).

Анимацията все още е по-скоро на пресекулки, отколкото идеална, затова

ще поправите този недостатък, като ползвате същите или подобни техники
като тези, ползвани при предишните две анимации в този урок.

4 Селектирайте кадър 2, натиснете клавиша Shift и щракнете върху кадър 3,

за да селектирате и двата кадъра. След това изберете Сору Frames
(Копирай кадри) от менюто към палитрата Animation.

5 Селектирайте кадър 4 и след това изберете Paste Frames (Вмъкни кадри) от

менюто към палитрата Animation, за да отворите диалоговия прозорец
Paste Frames. В него изберете Paste After Selection (Вмъкни след
селектиране). Щракнете върху ОК.

6 Щракнете върху кадър 5, така че да остане единствения селектиран кадър

39
 и го изтеглете надясно, така че да стане последния кадър в анимацията.

7 При селектиран кадър 6, натиснете клавиша Shift и щракнете върху кадър

1 да селектирате всички кадри, след което изберете 0.2 от изскачащото
меню за продължителността на който и да е от кадрите (Frame Delay).
Накрая изберетe File -> Save.

Преглеждане и съхраняване на анимация с векторна маска

Сега ще подложите анимацията си на тест, като я прегледате, за да видите

дали действието на вълната отговаря на вашите очаквания.

1 В палитрата Animation щракнете върху бутона Р1ау (►). Когато сте

готови, щракнете върху бутона Stop (■), за да спрете анимацията.

2 Ако е необходимо, направете корекция на закъснението Delay

(задържането, продължителността на показване) или реда на кадрите, за да
поправите грешките или донастроите хода на анимацията във времето.

3 Отново прегледайте анимацията и продължете да правите настройки

докато сте напълно удовлетворени от резултатите.
40
4 (Допълнително) Изберете бутона Priviw In в кутията с инструменти, за да
видите анимацията в браузъра по подразбиране или изберете File - > Priviw In
и изберете предпочитания Web браузър. Когато завършите, затворете web
браузъра и се върнете в Image Ready.

5 Изберете File -> Save Optimize As, посочете мястото на папката Му_Gifs и
напишете Waves.gif , за да именувате файла. След това щракнете върху Save.

Image Ready съхранява анимацията като GIF файл, ползвайки текущите

настройки в палитрата Optimize.

6 Изберете File -> С1оsе, за да затворите оригиналния файл и не

съхранявайте файла.

Отново се отпуснете на облегалката на стола си - завършихте всичките три

анимирани елемента в проекта на Web страница.

Ако искате да тествате изображенията си в Web страницата, която видяхте

в началото на този урок, можете да преминете към десктопа и да изтеглите
съдържанието на папката Му_Gifs в папката Lessons/Lesson15, за да се
презапишат GIF файловете в нея. (Щракнете върху Yes когато се появи
запитване, за да потвърдите, че искате да презапишете файловете.) След това
щракнете двукратно върху файла 15End.html. Когато страницата се отвори
във вашия Web браузър по подразбиране, тя ще ползва вашите GIF
изображения вместо примерите, предвидени за този урок.

41
Преговор

Въпроси за преговор

1 Опишете един прост начин за създаване на анимация.

2 В какви случаи можете да направите междинно кадриране между кадри

на анимация? Кога не можете да приложите междинно кадриране?

3 Как оптимизирате анимация?

4 Какво е отстраняване на кадър (frame disposal)? Кой метод за отстраняване

би трябвало да ползвате обикновено?

5 Какви файлови формати можете да ползвате за анимации?

Отговори

1 Един прост начин за създаване на анимация е да започнете с файл на

Photoshop със запазени слоеве. Ползвайте бутона Duplicate Current Frame
в палитрата Animation, за да създадете нов кадър и след това ползвайте
палитрата Layers, за да промените позицията, непрозрачността Opacity
или ефектите на един от селектираните кадри. След това създайте
промеждутъчни кадри между селекцията и новия кадър - ръчно с бутона
Duplicate Current Frame или автоматично, ползвайки командата Tween.

2 Можете да инструктирате Image Ready да извърши междинно кадриране

(tweening) между всеки два кадъра, да промени непрозрачността Opacity
или позицията на слой между два кадъра или да добави нови слоеве към
поредица от кадри. Не можете да направите междинно кадриране между
непоследователни кадри.

42
3 След като ползвате палитрата Optimize изберете File -> Save Optimized
As, за да оптимизирате анимацията. От менюто към палитрата Animation
изберете Optimize Animation, за да изпълните оптимизационни задачи,
специфични за анимационни файлове, включително премахване на
излишните пиксели и изрязване на кадри по селектиращата рамка.

4 Методът за отстраняване на кадъра (frame disposal) определя дали и как

ще бъде премахнат текущият кадър преди възпроизвеждането на
следващия кадър когато анимацията включва фонова прозрачност. Тази
опция определя дали текущият кадър ще се вижда през прозрачните
области на следващия кадър. Обикновено опцията Automatic е най-
подходяща за повечето анимации. Тя избира метода за отстраняване въз
основа на наличието или отсъствието на прозрачност в следващия кадър.
Ако следващият кадър има слоеве с прозрачни области, селектираният
кадър се отстранява.

5 Файловете на анимации трябва да бъдат съхранени в GIF формат или

като филм Quick Time. Не можете да създадете анимации като JPEG или
PNG файлове.

43