С появлением панели «Таймлайн» в Photoshop CS6 Adobe реализовала большую часть своих новых возможностей редактирования видео, которые позволяют редактировать, улучшать и визуализировать видео непосредственно в Photoshop. Хотя Adobe рекламирует его в основном как инструмент для редактирования видео, для меня действительно интересна возможность создавать быстрые анимированные кадры прямо из Photoshop без необходимости переключения программных пакетов.
Здесь я покажу вам, как быстро создать короткий анимированный экран-заставку для iPad. Для дизайнеров, которые привыкли работать с Flash или After Effects, эти инструменты могут показаться довольно простыми, но для любого дизайнера, желающего заняться анимированной графикой, они обеспечивают быстрое и легкое введение в понятие временной шкалы и ключевых кадров. Конечно, конечный результат не обязательно должен быть заставкой iPad, поэтому вы ограничены только вашим воображением в том, для чего будет использоваться ваш конечный результат.
01 Начните с настройки нового документа с желаемым разрешением iPad в раскрывающемся меню «Мобильные устройства и устройства». Залейте фон выбранным вами цветом (в данном случае серым), создайте белый квадрат в центре на новом слое, затем создайте две черные точки и привяжите их к двум противоположным углам, снова на отдельных слоях. Обозначьте все соответствующим образом, чтобы впоследствии облегчить жизнь.
02 На панели «Временная шкала» нажмите «Создать временную шкалу видео», и все ваши слои появятся на временной шкале. Установите 00:00, выберите Пятно 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 с полностью видимой фигурой, но затем не добавляйте больше ключевых кадров, чтобы казалось, что он сливается с желтым слоем, но остается на месте.
