Эта статья будет посвящена анимации, реализуемой при помощи PhotoShop. Вопрос этот не настолько простой, как может показаться сначала, поэтому, вопреки уже сложившейся в этой серии статей традиции, уделим повышенное внимание теоретическим вопросам. Иллюзия движения, достигаемая стремительной сменой изображений на экране, называется анимацией. Любая компьютерная анимация выполняется обычно следующим образом: вносятся изменения в изображение на экране со скоростью, достаточной для того, чтобы последовательно сменяющиеся изображения казались движущейся картинкой. По научным данным, для того, чтобы успеть увидеть и осознать содержание изображения, человеческому мозгу необходимо не менее четверти секунды. Когда вы смотрите фильм в кинотеатре, вы видите 24 различных изображений, или кадров каждую секунду. Следовательно, каждый кадр показывается в течение 1/24 секунды. Ваш ум не успевает осознать отдельно взятый кадр, но он воспринимает движущуюся картинку. Компьютерная анимация работает по тем же принципам. Однако, важное отличие состоит в том, что далеко не везде есть возможность использовать 24 кадра в секунду, да и вряд ли есть в этом необходимость, особенно в нашем случае.
В основе создания анимации при помощи PhotoShop лежит формат gif89a (compuserve gif). Появился он в 1989 году как способ увеличить скорость передачи графических изображений в сетях compuserve. Его можно считать одним из самых удачных графических форматов. Основная причина тому - небольшие занимаемые размеры, правда, из этого вытекает и недостаток - максимум вы можете использовать 256 цветов, много это или мало - решайте сами. Так вот, после создания, gif прожил несколько лет просто форматом для хранения картинок, пока один программист (не пинайте ногами, никак не могу вспомнить его фамилию) не обнаружил в нем скрытую возможность - сохранять в одном файле несколько изображений, которые при вызове файла сменяют друг друга с заданным интервалом. Это его открытие первоначально всех удивило, потом на некоторое время об этом забыли (не было коммерческой надобности), но пришел год этак девяносто пятый, а вместе с ним тотальное развитие Интернета. Наступает золотое время формата gif. Правда, создание страничек, прежде всего, ограничено одним условием - размеры продукта. Не имеет смысла создавать такие документы, загрузка которых займет большое время - пользователь просто-напросто уйдет на другой ресурс. Поэтому существует два графических формата, действительно распространенных во всемирной паутине - gif и jpeg. Сравнение и советы, где их применять, оставим для авторов, пишущих про web-дизайн. Нас интересуют только анимационные возможности gif.
Рассуждая о вопросе "как?", стоит прежде всего задуматься над вопросом "зачем?", ибо он даст нам ответ и на первый. Действительно, зачем? Даже упорно подумав, я не вижу ни одной области применения данного вида анимаций, кроме Интернет. Но зато в сети данный продукт имеет небольшие размеры файлов и относительно приличный вид. Кроме того, не стоит пренебрегать возможностью делать часть изображения прозрачной. То есть, делаем вывод - если и создавать gif-анимацию, то исключительно для Интернет. Из этого следует, что каждый файл должен быть небольшим по размеру. Учтите, что каждый ваш кадр со своей массой суммируется к общей массе файла. Поэтому никак применять 24 кадра в секунду не стоит. В основном идет 1-2 смены в секунду, иногда один кадр не меняется очень долго (к счастью, есть возможность задать, сколько та или иная часть анимации должна быть видимой, по своему усмотрению). Второе - длинные анимации по времени применить также не получится. Поэтому сюжет должен быть в той или иной степени зациклен (идеальный пример - развевающийся по ветру флаг). Однако, не везде это применимо (баннерная реклама, как правило, не зациклена с точки зрения сюжета). Однако, прежде чем приступить непосредственно к описанию процесса создания анимации, стоит сделать несколько замечаний. По своей идее, анимация должна украшать сайты, улучшать их дизайн. Однако, как правило, это имеет обратный эффект. Практически никто не может сделать хороший дизайн с анимацией, не говоря уже о том, что она не везде полезна, а в некоторых случаях даже вредна (например, деловые сайты). Я не смогу назвать и двух десятков ресурсов, приятных визуально, профессионально сделанных и с анимированными gif-ами на своих страницах. Однако, совсем отказываться от этой возможности тоже не стоит.
Разумеется, сам PhotoShop 5.5 анимационные файлы не создает. Пока. В шестой версии этого тоже не предусмотрено, но, надеюсь, в седьмой все эти вопросы будут проработаны. Однако мы и сейчас имеем мощнейший инструмент, специально созданный для этой операции. Что это? А это поставляемый в комплекте с PhotoShop 5.5 ImageReady 2.0. Я действительно считаю эту программу лучшей в области адаптации графики под всемирную сеть, gif анимации и некоторых других задач. Она великолепно дополняет PhotoShop благодаря своей теснейшей с ним интеграции.
Прежде, чем приступить непосредственно к анимации, необходимо заготовить кадры. Каждый кадр в первозданнном своем виде представляет отдельный GIF файл. Сколько их необходимо? Вообще, чем меньше можно взять для приемлемого результата, тем лучше. Пример мы возьмем самый примитивный, который даже смешон своей примитивностью. Разумеется, иллюстрации не будет, какой смысл на статичной фотографии в газете показывать анимацию? Итак, сюжет нашего примера - на кадре по букве появляется надпись "Газета". Эффект печатной машинки в очень простом варианте. Я выбрала этот пример только потому, что в нем не нужно рисовать и можно полностью окунуться в изучение анимации (либо, как ее иногда называют, "псевдоанимаций").
Итак, создадим новый файл с прозрачной основой (в корне создания нового файла вам будет предложен выбор фона). Сразу же стоит перевести файл в режим "индексированные цвета" - изображение=>режим=>инд. цвета (так как сохранять будем в GIF). Хотя, учитывая возможности PhotoShop, этого можно не делать (почему - дальше). Первым кадром сохраним пустое изображение: появление букв сразу - это как-то неестественно. Для того чтобы это сделать, вы можете воспользоваться одним из трех нижеописанных способов.
1) Если файл у вас - изображение уже в индексированных цветах, то достаточно нажать ctrl+s (сохранить), либо alt+ctrl+s (сохранить как копию), выбрав из раскрывшегося меню необходимый формат.
2) Если изображение у вас в RGB системе, то можно воспользоваться импортом. Для этого нажмите File=>Import=>Gif89a.
3) И наиболее приемлемый вариант, появившийся только в версии 5.5, - сохранить оптимизированным для web (alt+ctrl+shift+c). Нажав это сочетание клавиш, вы увидите окно сохранения.
Обратите внимание на следующее: вы можете выбрать формат файла, поэтому исходное изображение не обязательно должно быть в indexed color. При использовании gif вы сами можете выбрать количество цветов, в которых сохранять. Разумеется, чем меньше их, тем лучше. В данном случае достаточно двух - фона и цвета букв. Поэтому количество цветов возьмите за 2. Можно также удалять ненужные руками - щелкаете в color table по квадратику с лишним цветом и жмете del.
Сразу создайте директорию, в которой будут лежать будущие кадры. Зачем это нужно, поймете потом. Файлы необходимо называть по их очередности - это, во-первых, удобно, а во-вторых, облегчит работу в дальнейшем.
Затем на изображении, которое у вас есть в PhotoShop (обратите внимание, alt+ctrl+shift+c не закрывает файл), пишем первую букву и сохраняем аналогично под именем "2". Точно так же делаются все остальные кадры.
Работа в PhotoShop закончена, переходим непосредственно к созданию анимации в Image Ready. Опытные читатели могут возразить, что кадры с большим выигрышем времени мы могли сделать и в ImageReady непосредственно. Отвечу. В данном примитивном примере - да. Но обычно - нет (если вы работаете со сложными объектами). А смысл того, что мы делаем, - описать общий механизм создания псевдоанимации при помощи Adobe PhotoShop.
Итак, запустим программу. Я не ставлю себе в этой статье целью описать ImageReady - на это необходимо несколько статей, посвященных ему непосредственно. Поэтому не стоит упрекать меня, если я не укажу что-либо об этой программе, важное с вашей точки зрения. В этой статье будут описаны лишь инструменты анимации, и то достаточно поверхностно.
Раньше приходилось указывать все кадры программе по очереди. Но с появлением ImageReady все стало значительно легче. Теперь можно открыть целую папку, в которой лежат кадры. Именно поэтому я просила вас сохранять все в новой папке и нумеровать по порядку - дело в том, что программа сортирует периодичность кадров сама. И в основу порядка идут цифры. То есть, в правильном порядке станут не только 1.gif, 2.gif, 3.gif, но и image1.gif, image2.gif... Все удобство данной опции вы сможете понять только тогда, когда будете делать анимацию кадров из 20. Для того чтобы выполнить описанную операцию, нажмите file=>import=>folder as frames. Да, кстати, эта программа открывает видео avi файлы, так что кадров для какого-нибудь изображения можно натягать и оттуда.
В этой статье мы будем работать только с одной панелью ImageReady - animation. Сразу после открытия папки вы увидите появившиеся там кадры. Первым делом проверьте, в правильном ли они порядке идут. Если нет, исправьте положение простым перетаскиванием. Вы уже можете просмотреть свою анимацию. Для этого достаточно нажать "play" в нижней части панели. Скорее всего, вас сразу не устроит скорость. Как это исправить? Очень просто. Под каждым кадром у вас есть цифры. По умолчанию это 0.00. Это значит, что задержки на кадре не происходит. Для исправления ситуации нажмите на этой цифре и в появившемся меню выберите другое значение. Я лично остановилась на 0.2 секунды. Ну, уже гораздо приличнее. Однако, что-то еще не то? Надо установить задержку на последнем кадре. Для этого просто поставьте там значение равное четырем секундам.
Так же вы можете указать "проигрывание файла все время" не останавливаясь, один или указанное число раз. Для этого кликните по надписи "forever" (по умолчанию стоит значение всегда), а затем выберите то, что вам нужно. Теперь осталось только сохранить файл, а далее использовать по назначению. Обратите внимание на вес итогового файла, он должен быть достаточно маленьким (у меня - 1.1 kb).
Письма читателей.
Вообще, я получаю достаточно большое количество писем с вопросами. Но вот со своими примерами получила только одно. Но зато первый блин был никак не комом, и поэтому я вставляю его целиком и даже с иллюстрацией :). Такое вот выражение благодарности автору письма за старание.
Письмо от Xangel:
Хочу лично поблагодарить вас за все ваши старания. Я уже давно почитываю вашу рубрику и иногда нахожу в ней что-то, чего я не знал, чем не пользовался.
А пишу вам потому, что хочу пополнить библиотеку приемов работы с Photoshop наших белорусских дизайнеров и РС-художников. Так вот, рассказать вам хотел об одном весьма, на мой взгляд, привлекательном эффекте, который я получил в Photoshop'е: эффекте жидкости.
Прежде всего, хочу заметить, что пользуюсь только английской версией Photoshop (и вам советую;-)), и поэтому названия фильтров, соответственно, на родном Photoshop языке. Итак, чтобы создать жидкую поверхность, а точнее объемную жидкость, выполняем следующие действия.
Для начала создадим новый файл и в нем новый слой. Затем, к только что созданному слою применим фильтр /Filter/Render/Clouds (обратите внимание: цвет созданных облаков соответствует текущему цвету, установленному в панели Tools). Теперь применяем /Filter/Sketch/Chrome (там можно настроить подходящие параметры, хотя результат будет довольно схожим во всех случаях).
Теперь, для того чтобы жидкость была не металлического цвета, изменим цвет с помощью /Image/Adjust/Color Balance, в моем случае я делал воду и применял голубовато-синий цвет. Вот и все - основная часть готова!
После этого можно применять другие фильтры, например, для эффекта водоворота можно использовать /Filter/Distort/Twirl. Но для создания эффекта объема жидкости нужно еще кое-что изменить: задаем значение прозрачности нашего слоя (я использовал 70%), переходим на нижний слой и там создаем такую же поверхность, только при выборе цвета выбираем цвет темнее предыдущего. |  | Проделав эти действия, можно вставить фотографию, рисунок или текст на нижний слой. После чего для реалистичности добавить следующие фильтры: /Filter/Distort/Wave (я использовал: Number of Generators=12 Type=Triangle Wavelength (Min/ Max)=55/60 Amplitude=1/4 Scale (Horiz/Vert)=30/70). И, наконец, можно еще применить фильтр /Filter/Distort/Ocean Ripple с параметрами Ripple Size -> побольше, Ripple Magnitude -> поменьше.
Вот и все! Дальше можете экспериментировать сами - делать текст под водой объемным, вместо воды можно сделать красивую раскаленную лаву и т.д.
Еще раз спасибо за такую полезную рубрику!
P.S.: Пользуйтесь Gimp'ом!;-)
С уважением, Xangel.
От себя хочу отметить, что описанный нашим читателем эффект действительно интересен и неочевиден. Спасибо от имени всех остальных ваших коллег-читателей. Было бы крайне неплохо, если бы и другие присылали свои интересные находки в качестве помощи ближним :).
В этой статье не было опубликовано ни одного описания нестандартного фильтра, но я обязательно вернусь к данной традиции в следующем номере.
На сим позвольте сегодня попрощаться. |
