С въвеждането на панела Timeline в Photoshop CS6, Adobe направи голяма част от новите си възможности за редактиране на видео, които ви позволяват да редактирате, подобрявате и рендирате видеоклипове директно във Photoshop. Въпреки че Adobe го рекламира главно като инструмент за редактиране на видео, това, което наистина е интересно за мен, е възможността да създавам бързи анимирани ужилвания директно от Photoshop, без да е необходимо да превключвам софтуерни пакети.
Тук ще ви покажа как бързо да създадете кратък анимиран начален екран за iPad. За дизайнерите, които са свикнали да работят с Flash или After Effects, тези инструменти може да изглеждат съвсем елементарни, но за всеки дизайнер, който желае да забърка графики в движение, те осигуряват бързо и лесно въведение в понятието за времева линия и ключови кадри. Разбира се, крайният изход не трябва да е за начален екран на iPad, така че сте ограничени само от въображението си за това, за което се използва крайният изход.
01 Започнете, като настроите нов документ с желаната от вас резолюция на iPad от падащото меню Mobile & Devices. Напълнете фона с цвят по ваш избор (в този случай сив), създайте бял квадрат в центъра на нов слой, след това създайте две черни точки и ги щракнете към два противоположни ъгъла, отново на отделни слоеве. Етикетирайте всичко по подходящ начин, за да улесните живота по-късно.
02 В панела Timeline натиснете Create Video Timeline и всичките ви слоеве ще се покажат в хронологията. Задайте го на 00:00, изберете Spot 01 и разгънете слоя, като използвате иконата на триъгълника. Сега натиснете раздела Позиция, за да създадете ключова рамка. Преместете хронологията на 01:00 и създайте друг ключов кадър за позиция. Сега преместете мястото в долния ляв ъгъл на квадрата и повторете процеса за второто място, като използвате точно същите тайминги. Повтаряйте процеса с петна на интервали от една секунда до маркировката от три секунди, като създавате ключови кадри, докато вървите.
03 Върнете се в 00:00 и на нов слой точно над фона създайте диагонална селекция и я запълнете с цвят. Искаме тази форма да се плъзга навътре и навън. Създайте ключов кадър за позиция в 00:00 и, задържайки Shift, преместете формата от платното. В 01:00 създайте друг ключов кадър и върнете фигурата обратно в първоначалното си положение. Възпроизведете го и изглежда, че плъзнете вътре. Можете да видите как ключовите кадри съвпадат с тези на петната.
04 Сега преместете времевата линия по още 10 кадъра в 01:10 и преместете фигурата обратно в позиция точно в границите на документа. Върнете хронологията обратно до 01:00, където фигурата е в пълен изглед, изберете всички и копирайте слоя. На квадратния слой натиснете Cmd / Ctrl + A, за да направите селекция и след това отидете на Edit> Paste Into, за да поставите фигурата в квадрата на нов слой. Напълнете го с черно, маркирайте го по подходящ начин и го преместете над оригиналния квадратен слой.
05 Сега искаме черната вътрешна форма да плъзне вътре с жълтата форма. Преместете слоя обратно на времевата линия до 00:00 и повторете процеса от предишната жълта фигура, като настроите първия ключов кадър в 00:00, като фигурата е напълно извадена от платното и в 01:00, като я видите изцяло, но след това не добавяйте повече ключови кадри, за да изглежда, че плъзга вътре с жълтия слой, но остава на място.