Серия уроков по созданию плоской анимации в Photoshop CS3 (1): Обзор.
Принцип формирования анимации заключается в том, что человеческий глаз обладает свойством постоянства зрения. Так называемая постоянство зрения означает, что после просмотра объекта, даже если объект быстро исчезнет, он все равно оставит в глазах непрерывное изображение. определенный период времени. Это верно, когда объект относительно яркий. Это особенно очевидно в случае . Чаще всего при съемке ночью используется вспышка. Хотя вспышка уже давно погасла, ореол все еще остается в глазах объекта съемки и сохраняется в течение некоторого времени.
Самое раннее применение этой функции, возможно, было сделано нами, когда мы учились в начальной школе. Это заключалось в том, чтобы нарисовать движения многих персонажей в нижнем колонтитуле учебника, а затем быстро пролистать его, чтобы добиться непрерывного изображения в глазах. это анимация. Следует отметить, что анимация здесь не относится к мультипликационной анимации. Хотя принципы создания мультипликационной анимации одинаковы, здесь анимация обычно относится ко всем непрерывным изображениям.
Подводя итог, так называемая анимация заключается в использовании нескольких неподвижных изображений для непрерывного воспроизведения и использовании постоянства зрения для формирования непрерывного изображения. Например, в традиционных фильмах используются длинные серии фильмов для непрерывной записи отдельных кадров и проецирования их на экран с последовательным освещением с определенной скоростью. Здесь есть требование к скорости. Представьте, что если мы медленно пролистнем учебник, мы увидим только несколько неподвижных изображений вместо непрерывных изображений. То же самое относится и к воспроизведению фильмов. Если скорость слишком низкая, то, что видит аудитория, эквивалентно вращающемуся слайд-шоу. Чтобы зрители могли видеть непрерывные изображения, фильм воспроизводится со скоростью 24 кадра в секунду, то есть за одну секунду на экране непрерывно проецируются 24 неподвижных изображения. Единицей скорости воспроизведения анимации является fps, где f — английское слово Frame (картинка, кадр), p — Per (за), а s — Second (секунда). По-китайски это означает сколько кадров в секунду или сколько кадров в секунду. Видео снято с частотой 24 кадра в секунду, что часто называют 24 кадрами.
Другие устройства, которые могут создавать изображения в реальной жизни, также используют концепцию частоты кадров, например, телевизионные сигналы. Формат PAL, используемый в Китае и Европе, составляет 25 кадров, а формат NTSC, используемый в Японии и Америке, составляет 29,97 кадров. Если анимация воспроизводится на мониторе компьютера, то за 15 кадров можно добиться эффекта непрерывного изображения. Таким образом, когда вы будете снимать видео в будущем, вам придется думать о том, на каком устройстве их публиковать, и устанавливать разную частоту кадров.
Точность распознавания человеческого глаза на самом деле намного выше, чем указанная выше частота кадров, поскольку зрительная система, состоящая из человеческого глаза и мозга, очень развита. Он просто имеет разные уровни чувствительности в зависимости от окружающей среды. Например, в темноте время сохранения изображения более ярких источников света больше, поэтому для фильма требуется всего 24 кадра. Кстати, лишь немногие животные имеют глаза, которые в некоторых аспектах превосходят человеческие, но все они серьезно отстают в других аспектах. Например, орел, «король деталей», не различает цветов, а у совы, «короля ночного видения», глаза фиксированы, и ей приходится поворачивать голову, чтобы наблюдать за происходящим вокруг.
В уроках по дизайну Photoshop, которые мы смотрели в Tianji Design Online, Photoshop в основном используется для создания статичных изображений, таких как плакаты и печатные рукописи. Мы упоминали, что он способен создавать анимацию. Теперь мы собираемся создать анимацию, состоящую из нескольких кадров, в Photoshop. Разверните один экран на несколько экранов. И создайте своего рода непрерывность изображения между этими многочисленными сценами, чтобы придать форму анимации.
В настоящее время многие анимации, созданные с использованием Flash, могут сопровождаться дубляжом и интерактивностью, что делает всю анимацию более яркой. Анимацию, созданную в Photoshop, можно назвать только простой анимацией, главным образом потому, что она содержит только изображения и не может добавлять звук, и зрители могут смотреть ее только в фиксированном режиме. Но простота не означает грубость. Хотя первый вариант предоставляет больше методов создания и выражения, последний все же имеет свои уникальные преимущества. Например, анимация в стиле слоя позволяет легко создавать красивые вещи, которых трудно достичь с помощью других деталей анимации. Более того, так же, как рисование на бумаге — очень простое занятие, разные люди рисуют по-разному. Поэтому отличная анимация не обязательно требует сложной техники, важен отличный креатив.
Независимо от того, какое это программное обеспечение, принципы его создания одинаковы, как и цветовой режим RGB, который мы так тщательно изучали, его можно применять повсюду. Итак, наша текущая задача — использовать базовые знания Photoshop, которые мы изучили, распространить их на производство анимации и изучить общие навыки и методы создания анимации. Эти знания можно будет применить и к другим аспектам позже. А также мы покажем, как конвертировать анимацию Photoshop в видео и добавлять к ним звук.
Помимо различий в производстве, существуют также различия в использовании. Анимации часто размещаются в определенной области веб-страницы, чтобы подчеркнуть определенный контент, например рекламную анимацию. Этот вид анимации обычно имеет соответствующие фиксированные размеры в зависимости от места размещения, например 468x60, 140x60, 90x180 и т. д. Анимацию также можно применить к MMS мобильного телефона (служба мультимедийных текстовых сообщений, которая может отправлять изображения, звуки и видео). Каждое из этих применений имеет свои особенности, и помимо размера следует учитывать и другие факторы. Например, ограничение на количество байтов, время пребывания кадра и т. д. Мы объясним это шаг за шагом в уроке.
Примечание. Прежде чем приступить к этой серии руководств, мы требуем, чтобы читатели изучили основы Photoshop, поняли и освоили концепции и операции, такие как корректирующие слои, стили слоев и т. д., например, «Как создать корректирующий слой кривой» и т. д. Далее будет дано лишь краткое введение в операцию, а принципы не будут подробно объяснены. Поэтому новым читателям рекомендуется сначала изучить основы.
Кроме того, только версия Photoshop CS3 Extended (расширенная) имеет функцию создания анимации, которой нет в обычной версии. Версия CS2 поставляется с функциями создания действий, а работа аналогична CS3 Extended. CS и более ранние версии требуют прилагаемого программного обеспечения ImageReady для создания анимации. Рекомендуется использовать ту же расширенную версию CS3, что и в руководстве.
Поскольку это называется анимацией, это означает перемещение изображений на экране. Давайте теперь нарисуем и создадим «простую и грубую» анимацию.
Создайте новое пустое изображение размером 150×150, создайте новый слой и нарисуйте прямоугольник, примерно как показано слева внизу, и палитру слоев, как показано справа. Из этого видно, что это обычный слой решетки. В реальных операциях следует как можно чаще использовать векторные слои. На это мы также обратим внимание в следующих уроках.
Откройте палитру анимации через [Window_Animation], как показано на левом рисунке ниже. На данный момент в палитре слоев также есть еще несколько опций, как показано красной стрелкой на правом рисунке ниже. Если вы закроете палитру «Анимация», она вернется в исходное состояние. Не беспокойтесь об этом пока. Кроме того, палитра анимации часто объединяется с палитрой записи измерений. Последняя не имеет никакого отношения к нашему текущему контенту и ее можно отключить.
Открыв палитру анимации, мы можем приступить к созданию анимации. Нажмите кнопку «Копировать выбранный кадр» у красной стрелки на палитре анимации. 
, вы увидите добавленный новый кадр. Как показано ниже. Согласно нашим предыдущим привычкам, этот значок должен обозначать новый, например, новый слой и т. д. Хотя буквальное объяснение здесь — копирование, на самом деле это новый, но новый добавленный кадр на самом деле такой же, как и предыдущий кадр. . То же содержание. Соответственно, каждый должен иметь возможность представить себе 
Функция кнопки – удаление кадра.
Убедитесь, что скопированный второй кадр в данный момент выбран в палитре анимации, а затем с помощью инструмента перемещения переместите квадрат в слое на определенное расстояние, примерно как показано на левом рисунке ниже. На данный момент палитра анимации такая, как показано на среднем рисунке ниже. Видно, что хотя положение блока в кадре 2 изменилось, положение блока в кадре 1 осталось неизменным. Это очень важная особенность.
Повторите эту операцию по копированию кадра, а затем перемещению блока несколько раз, и в итоге вы получите что-то вроде картинки справа внизу (похожее на это). Теперь у нас есть 7 кадров, и в каждом кадре блоки находятся в разных положениях. Обратите внимание на предложение «Положение квадратов в каждом кадре разное», а затем посмотрите на палитру слоев. Очевидно, что существует только один слой (фоновый слой пока не учитывается), что приводит к. особенность: для одного слоя, скажем, его положение (или координаты) можно указывать индивидуально в разных кадрах. Благодаря этой функции мы можем анимировать движение объектов, используя всего один слой.
Теперь вы можете нажать кнопку воспроизведения в палитре анимации. 
, вы можете увидеть эффект перемещения рамки в окне изображения, но она движется очень быстро. Это связано с тем, что время задержки кадра не установлено. Обратите внимание, что под каждым кадром в палитре анимации теперь указано «0 секунд». Это время задержки кадра (или время задержки). Время задержки кадра указывает, как долго кадр отображается во время анимации. Например, если задержка определенного кадра установлена на 2 секунды, то при воспроизведении этого кадра она будет сохраняться в течение 2 секунд, прежде чем продолжить воспроизведение следующего кадра. По умолчанию задержка равна 0 секундам. Задержку можно установить независимо для каждого кадра.
Чтобы установить задержку кадра, нажмите на время под кадром и выберите соответствующее время во всплывающем списке. Как показано на левом рисунке ниже, установите для кадра 7 значение 0,5 секунды. «Без задержки» в списке составляет 0 секунд. Если нет времени, которое вы хотите установить, вы можете выбрать «Другое» и ввести значение самостоятельно (в секундах). Вы также можете изменить задержку равномерно после выбора нескольких кадров. Метод выбора нескольких кадров аналогичен выбору нескольких слоев. Сначала щелкните кадр 1 в палитре анимации, чтобы выбрать его, затем, удерживая клавишу SHIFT, щелкните кадр 6. . Просто выберите кадры с 1 по 6. Затем установите часовой пояс любого кадра, как показано на правом рисунке ниже, на 0,1 секунды. Это более часто используемое время задержки.
Запустите анимацию еще раз, и вы увидите, что блок движется медленнее и дольше остается в конце движения. Очевидно, это связано с большой задержкой, на которую он был установлен. Эта длительная задержка на самом деле играет важную роль, и эту функцию можно использовать для выделения определенной темы в реальном производстве. В последующих уроках мы также найдём время, чтобы познакомить вас с некоторыми техниками выражения.
Помимо времени задержки, еще одной особенностью анимации является возможность установки количества циклов воспроизведения. Обратите внимание, что под первым кадром палитры анимации стоит надпись «навсегда», обозначающая количество циклов. После нажатия вы можете выбрать «один раз» или «навсегда», либо установить количество циклов самостоятельно. Затем снова воспроизведите анимацию, чтобы увидеть эффект от настройки номера цикла.
Хотя в большинстве случаев анимация зацикливается непрерывно (то есть вечно), в некоторых местах также используются одиночные или несколько (2-3 раза) циклы, в основном при использовании анимации для создания веб-компонентов. Например, анимируйте имя столбца с нуля, чтобы оно появлялось постепенно, чтобы при полном отображении имени оно фиксировалось и не могло снова исчезнуть, а затем снова появиться. В это время необходимо использовать настройку цикла «один раз».
Нажмите 〖CTRL+S〗[Файл>Сохранить], чтобы сохранить настройки анимации. Формат файла — PSD. Этот формат файла является собственностью Photoshop и может записывать всю необходимую информацию. Всем рекомендуется сохранять свои работы в этом формате, чтобы облегчить будущие изменения. Если вам нужен независимый файл анимации, который можно использовать на веб-страницах, вам нужно использовать [CTRL+ALT+SHIFT+S] [Файл>Сохранить для Интернета и устройств], и появится большое окно, как показано слева ниже. . Это большое окно может многое закрыть. Но теперь вам нужно лишь обратиться к настройкам в области красной стрелки.
В то же время в области зеленой стрелки в правом нижнем углу окна появится кнопка воспроизведения и параметры цикла. Изменение количества циклов здесь также изменит настройки в исходном файле. Обратите внимание: если в области красной стрелки не выбран GIF-файл, кнопка воспроизведения недоступна. Это связано с тем, что только формат GIF поддерживает анимацию. Если вы принудительно сохраните его в других форматах, таких как JPG или PNG, сгенерированное изображение будет иметь только первый кадр.
Во время процесса сохранения может появиться предупреждающее сообщение, показанное справа ниже. Не игнорируйте его, а просто подтвердите. Вы также можете снова сделать его невидимым. Однако всем следует обращать внимание на использование половинной ширины английского языка или цифр при именовании файлов и не использовать полноширинные символы или китайские символы. Это должно быть более широко совместимо с браузерами на разных языках.
В этой главе каждому необходимо освоить два атрибута анимации, а именно время задержки кадра и количество циклов. Кроме того, вам необходимо освоить методы создания простых анимаций смещения объектов, таких как «копирование кадров и перемещение слоев». И используйте этот метод для создания анимации со смещением двух объектов одновременно. Эффект аналогичен изображенному ниже.
В следующем разделе мы представляем вторую часть: характеристики распространения первого кадра.