Adobe ImageReady
Adobe Photoshop
Как сделать из фотошоповского рисунка анимацию? Сам Photoshop анимацией не занимается, но в комплекте с ним приходит программа ImageReady, которая этому делу обучена.
На рисунке 1 видно, что ImageReady - это почти то же самое, что Photoshop с некоторыми небольшими отличиями. Самое важное для нас отличие - палитра Animation (анимация) в нижней части окна. Каждый кадр анимации будет представлен на ней отдельным эскизиком.
Рис. 1. ImageReady 7.0
Самый простой способ создать анимацию - превратить слои рисунка в кадры будущего мультика.
Предположим, мы заготовили такой многослойный рисунок, в каждом слое которого находится одна из стадий движения некоего объекта, изменение его раскраски или формы (сам объект может быть неподвижен, но может меняться его вид). Надо преобразовать слои в анимацию.
Щелкнем по круглой кнопке-стрелочке в правом верхнем углу палитры и выберем в меню палитры строку Make Frames From Layers (создать анимацию из слоев). Теперь каждому слою на палитре соответствует собственный кадр (см. рис. 2): самый нижний слой стал первым, самый верхний - последним в цепочке.
Останется только нажать кнопочку Play/Stop animation в самом низу этой панели и просмотреть результат в главном окне программы.
Рис. 2. На панели анимации три кадра
Просто щелкая мышкой по кадрам, мы сможем внимательно рассмотреть, как выглядит каждый из них, нет ли каких изъянов.
Для каждого кадра можно изменить время, на которое он задерживается на экране. Обратите внимание на надпись 0 sec и крошечную стрелочку возле нее. Если по стрелочке щелкнуть, то можно выбрать из списка любое другое время задержки.
Я бы советовал проставить время в каждом кадре (пусть минимальное - 0,1 с). Если оставить здесь нули, то разные модели браузеров начнут прокручивать вашу анимацию с разной скоростью, причем некоторые настолько быстро, что рассмотреть ее станет просто невозможно. Если скорость проставлена, то мультик будет выглядеть одинаково и в Internet Explorer, и в Opera, и в Mozilla, и в каком-нибудь Netscape Navigator.
В самом левом выпадающем списке (на рисунке 2 здесь написано Forever) задаете, сколько раз должна прокручиваться ваша анимация: бесконечно (как раз Forever), один раз (Once) или некоторое фиксированное количество раз (Other). В последнем случае вас еще попросят указать, сколько именно раз она должна проиграться.
Кадры можно перетаскивать по панели, меняя тем самым порядок их следования, а также выкидывать ненужные, утаскивая их в мусорный бачок.
Если что-то было сделано неправильно и требуется все радикально переделать, в меню палитры есть команда Delete Animation, которая удалит все кадры, и вы сможете создать их снова.
Хочу, кстати, обратить ваше внимание на то, как ведет себя панель слоев, когда мы выбираем мышкой созданные таким способом кадры. В каждом кадре глазок стоит ровно в одном слое. (Но это не значит, что мы не можем в это дело вмешаться: какие слои пометим, те и будут показываться - хоть два, хоть пять...)
Отсюда всего один шаг для следующего способа создания анимации - покадрового рисования.
Берете любой файл, создаете в нем новый кадр, щелкая по знакомого вида кнопочке на панели Animations, а также новый слой - такой же точно кнопочкой, только на палитре слоев (можно зайти в меню палитры и поставить галочку в строке Create Layer for Each New Frame, чтобы вместе с кадром всегда создавался и слой). Рисуете в новом слое еще один кадр, потом в следующем и так далее. И в каждом кадре оставляете глазок только в одном из слоев.
Рисовать в ImageReady можно практически так же, как в Фотошопе. Кто-то добавит «так же неудобно». Но ведь никто не помешает вам сделать рисунок в векторном редакторе, вроде CorelDRAW или Adobe Illustrator, а потом просто скопировать рисунок в буфер и вставить в ImageReady.
Причем вы не обязаны вставлять его сразу же в файл с анимацией. Можете сначала вставить его в другой документ, подобрать размеры и местоположение, что-нибудь в нем поправить. А потом просто перетащите рисунок в окошко с анимацией или же сделаете копирование-вставку.
В нашем распоряжении есть также команда Place (поместить) в меню File, которая позволит взять рисунок с диска и положить на новый слой данного файла.
Есть еще один способ создания анимации из заранее заготовленных картинок - импорт в ImageReady целой папки с рисунками. Делается это командой File > Import t Folder As Frames. Надо будет указать программе адрес папки и нажать ОК. Каждый рисунок станет, во-первых, отдельным слоем, а во-вторых - отдельным кадром новой анимации.
Геометрические размеры создаваемого файла, а также разрешение и параметры цвета программа берет у первого из файлов (по алфавиту). Понятно, что наилучшие результаты импорта будут, когда все файлы имеют одинаковые размер и разрешение. А самые удивительные - когда все файлы разные.
Чтобы не пришлось потом перетасовывать кадры анимации, лучше сразу дайте файлам в папке имена в алфавитном порядке. Или даже просто в виде чисел - по возрастанию.
Еще один способ создания анимации - полуавтоматический - применяется, когда у вас есть изображения начальной и конечной точки анимации и вы хотели бы, чтобы программа сама достроила промежуточные кадры.
Скажем, сделан рисунок всего с двумя слоями, как раз и отражающими начальное и конечно положение (или состояние) объекта. Выполнив команду Make Frames From Layer, мы получим всего два кадра, и это мало будет напоминать настоящую анимацию.
Рис. 3. Достраиваем переходы между кадрами
Но теперь приходит время включиться нашему аниматору и заняться своим прямым делом - анимацией. Для этого на панели палитры Animations есть кнопка Tweens animation frame («анимировать кадр с помощью кадров-близнецов»), которая и даст приказ достроить промежуточные кадры. Но придется объяснить программе, что и как она должна сделать.
В диалоговом окне Tween (см. рис. 3) вы должны выбрать, сколько кадров-близнецов должно быть вставлено (список Frames to Add). В списке Tween With -- указать, к какому из имеющихся кадров (следующему Next Frame, предыдущему Previous Frame, первому или последнему) программа должна строить переход. Переход строится всегда между двумя кадрами (причем непременно смежными) - первым и вторым, вторым и третьим, последним и первым.
А в секции Parameters задаете, какие именно характеристики рисунка программа должна
менять при построении близнецов: положение (Position), прозрачность (Opacity), примененные эффекты (Effects). Но если переходы прозрачности выполняются вполне ожидаемым образом (в параметрах обоих слоев.значения непрозрачности Opacity меняются навстречу друг другу), то выстраивать переходы по эффектам и по местоположению объектов на разных слоях программа скорее не умеет, чем умеет. А если так, то и пользоваться ими скорее не надо, чем надо.
Создавая анимацию, которая будет закольцована, позаботьтесь о том, чтобы плавными были не только переходы от первого кадра ко второму, от второго к третьему и т. д., но и от последнего к первому! При покадровом рисовании надо это сделать вручную, а при полуавтоматическом - просто не забыть создать переход от последнего кадра к первому.
Все, о чем мы говорили выше, касается ситуации, когда каждый кадр лежит в отдельном слое. Те, кто пользуется покадровым рисованием, как профессиональные художники-аниматоры, идут на это сознательно, а некоторые рядовые пользователи попадают в эту ситуацию случайно, например, поставив в меню палитры галочку в строке Create Layer for Each New Frame (создавать новый слой для каждого нового кадра) и забыв потом ее снять.
Но у нас есть принципиально иная возможность: мы можем строить анимацию, не создавая новых слоев! Более того, именно в таком режиме программа правильно строит переходы не только по прозрачности, но также по местоположению объектов (Position) и эффектам (Effects).
Итак, имеется рисунок, состоящий из одного-единственного слоя. Создаем новый кадр. При этом новый слой не возникает (см. выше), а если возникает, то немедленно и убивается.
Берем рисунок во втором кадре и тащим куда-нибудь (меняем местоположение) или же создаем на нем эффекты этой кнопочкой:
(правда, в отличие от Фотошопа, настроить параметры эффектов здесь не дают). Потом жмем кнопку Tweens animation frame
и получаем анимацию, в которой у рисуночка постепенно отрастает какая-нибудь там тень, а он при этом более или менее плавно переезжает на другое место.
К сожалению, Image Ready не построит вам близнецов, если вы захотите повернуть, наклонить или уменьшить объект во втором кадре (применив любую из команд трансформации), как-то иначе отредактировать его форму, перекрасить, применить какие-нибудь команды для изменения яркости-контраста или насыщенности. Изменения коснутся не только второго кадра, но и первого, и всех остальных (если они были).
А вот еще один вариант анимации: вы хотите, чтобы некий предмет двигался на неподвижном фоне, вроде как актер на фоне декораций. Как это сделать?
В нижний слой своего файла помещаете рисунок с этими самыми декорациями, а выше кладете изображения предмета (на прозрачном фоне, конечно!) в разных фазах движения. Тогда в каждом кадре вы пометите по два слоя - нижний и один из верхних.
Впрочем, неподвижными могут быть не только «декорации», но и часть самого анимированного объекта. Допустим, мельница стоит, а вертятся только ее крылья. Тогда сам домик можно спокойно опускать на нижний, постоянно видимый слой, а поворачивать одни только крылышки. Из чего следует, что крылья должны быть нарисованы отдельно от здания мельницы и размещены на другом слое, иначе их потом будет не оторвать.
Да и неподвижный предмет тоже не обязан лежать непременно на самом нижнем слое. К примеру, вы хотите изобразить каплю воды, падающую из крана. Создаете три слоя: в первом - раковина и кухня, в третьем - кран, а между ними, во втором слое будет у вас ползать капля. Причем вам не придется делать ее покадровую анимацию, достаточно будет создать серию кадров-близнецов, благодаря чему она будет просто выползать из-под крана.
Готовую анимацию для интернета сохраняют в файлах формата GIF, тогда она будет нормально показана в любых браузерах. Лучше всего воспользоваться для этого командой Save Optimized As. А перед этим обязательно перейти в окне документа на страницу Optimized, 2-Up или 4-Up и с помощью панели Optimize подобрать параметры оптимизации: выбрать тип файла (строка GIF), выбрать количество цветов в нем (цвета, которых в вашем изображении на самом Деле нет, вполне можно будет из палитры файла удалить без потери качества) и кое-что еще по мелочи.
Если же оптимизации не делать, размеры файла могут оказаться слишком большими, чтобы ими можно было пользоваться в интернете.
Кстати, советовал бы вам попробовать, как Image Ready выполняет оптимизацию gif-файлов (и не только анимированных, но и самых обычных). Притом, что настройки все те же, что и в аналогичных фотошоповских окнах и палитрах, результаты зачастую получаются более качественными - файлы выходят поменьше, а выглядят получше.
А вот фотографии анимировать не стоит и пытаться. Фотографии в gif-файлах либо плохо выглядят, либо оказываются слишком большими. Либо и то и другое вместе.
И последний совет. Если вы сделали очень хорошую анимацию (ну просто очень хорошую!), да только, вот беда, файл получается большой (ну просто очень большой!) и никак далее не сжимается без потери качества, попробуйте выкинуть каждый второй кадр и посмотрите, устроит ли вас результат. Чаще всего устраивает.
Средства автоматизации
Adobe Photoshop
На разработку некоторых спецэффектов - например, для имитации стеклянной или металлической поверхности, создания кнопки определенного вида, для хитрой обработки выделения - может потребоваться довольно много времени. Но после того как вы все однажды придумали, выяснили, какие операции и в каком порядке требуется делать, в дальнейшем вся эта операция становится рутинной. Вы всякий раз выполняете одну и ту же последовательность команд, забыв о том, что вы творческая личность, свободный художник и все такое прочее. Пашете.
Средства против такой монотонной пахоты известны - это макрокоманды. Чтобы избавить нас от рутины, программа должна суметь запомнить некоторую последовательность наших действий и при необходимости ее воспроизвести с другим объектом.
Photoshop не глупее Word a и тоже умеет записывать макросы, которые здесь называются действиями (actions). Все они накапливаются в палитре Actions. Заглянув туда, вы найдете изрядный набор макрокоманд, приходящих в комплекте с Фотошопом (см. рис. 4). Щелчок по треугольничку разворачивает список операций, которые выполняет данный «экшн» - можете изучать.
Например, макрос Vignette (виньетка), список которого раскрыт на нашем рисунке, вырежет выделенный вами фрагмент и поставит на белый фон. Но сначала он создаст снимок изображения, чтобы мы смогли все отменить (строка Make snapshot), потом размоет края выделения (Feather), скопирует на новый слой (Layer ViaСору), создаст еще один слой (подложку), зальет его белым и сдвинет вниз, под рисунок.
Рис. 4. Будем выполнять макрос Vignette
Каждая из строк тоже может состоять из некоторого количества действий, которые вы тоже можете рассмотреть, щелкнув по соответствующему треугольничку.
В свою очередь, макросы собираются в наборы (Set), каждый из которых хранится в отельном файле. Так, все макросы, показанные на нашем рисунке, входят в набор Default Actions.atn.
В Интернете на сайтах любителей компьютерной графики можно найти немало макрокоманд для всяких эффектных фокусов. Набор такой надо распаковать (если он был в архиве) и кинуть в папку Program Files\Adobe\Photoshop 7.0 (или 6.0)\Presets\Photoshop Actions. При следующем запуске Фотошопа макрос попадет в общий список.
Чтобы воспроизвести макрокоманду, открываете набор, выбираете в нем нужную строку и жмете эту кнопочку
(Play Selection она называется). Некоторые команды спрашивают разрешения на то или это или же сообщают, что вы что-то не так сделали, отчего выполнение команды невозможно.Важно, кстати, понимать, над каким объектом умеет трудиться тот или иной экшн. Если он создан для работы с выделенным фрагментом, то на рисунке, где ничего не выделено, он работать откажется. В некоторых строках, как можно заметить и на нашем рисунке, написано Selection (значит, макрос работает с выделением) или Туре (должна присутствовать надпись в векторной форме). Если написано Layer, значит, операция выполняется сразу над всем слоем. Встречаются макросы, которые рассчитаны на работу с изображением строго определенного размера... Короче, вариантов полно.
Сделать собственную макрокоманду вы сможете либо в новом наборе (сначала создав набор кнопочкой Create New Set
), либо в одном из существующих. Нажимаете кнопку Create New Action ( 
). Вас попросят (см. рис. 5) ввести имя макроса, задать, если требуется, горячую клавишу и нажать кнопку Record.
Рис. 5. Создаем новую макрокомандуЧерный шарик станет красным (
)- запись началась.Photoshop запоминает любые ваши действия, включая создание новых файлов, обычных и служебных слоев, операции редактирования, выделение Фрагментов, создание масок, применение фильтров, сохранение обычное или с интернетовской оптимизацией. Запоминает вместе со всеми параметрами каждой операции. Когда закончите, нажмите кнопку Stop
. Экшн не обязательно записывать в один прием. Можно встать в какую-нибудь строку записанного ранее макроса, щелкнуть по шарику и продолжить запись.
Специально сохранять макрос на диск не требуется, все делается автоматически. А вот отлаживать - проверять его работоспособность на разных файлах, очень даже требуется.
Любой шаг макроса можно удалить и записать заново. Можно даже не удалять: двойной щелчок по команде в макросе позволит вам снова запустить ее и изменить параметры. Но вы должны создать такую ситуацию, какая в этот момент должна быть для правильного выполнения команды - открыть файл, выделить слой соответствующего типа или что там у вас требуется.
Если же что-то не так, Photoshop не даст поменять параметры, скажет: The command имя команды is not currently available - не могу запустить нужную команду.
Следующий этап автоматизации - применение макрокоманды не к одному файлу, а к целой папке. Скажем, создавая на своем сайте раздел для работ одного очень хорошего художника, я должен был пару сотен tif-файлов большого размера привести к одинаковой ширине в 600 точек (чтобы слайд нормально смотрелся на экране 800x600) и сохранить в формате JPG, предварительно оптимизировав для уменьшения веса.
Рис. 6. Групповая обработка фотографийПервым делом я записал подходящий макрос, дал ему имя 600 и убедился, что он работает. Потом отправился в меню File > Automate, где выбрал команду Batch (см. рис. 6).
Набор макросов берется из списка Set, сам макрос - из списка Action.
Осталось выбрать, откуда брать файлы и куда потом складывать. В списке Source я выбрал слово Folder (папка) и указал программе адрес этой папки (кнопкой Choose - выбрать). Пригодилась и настройка Include All Subfolders (включить все вложенные папки).
Таким же способом я выбрал в качестве места назначения (Destination) папку New, которую заблаговременно создал.
А еще я поставил галочку в строке Override Action "Save As" Command (использовать команду Save As, только если она есть в макросе). Дело в том, что использованная в моем экшне команда Save for Web уже сохраняет оптимизированный файл, a Photoshop хочет сохранить в указанную папку еще и исходник. Так я ему запретил.
Проделав все это и нажав волшебную кнопочку ОК, я отправился выпить чайку. Когда я через полчаса вернулся к компьютеру, Photoshop уже сделал все, на что я, по идее, должен был убить целый вечер.
Вместо папки назначения можно выбрать строку Save and Close (сохранить и закрыть), тогда сохранение будет происходить в ту же папку. Позаботьтесь тогда, чтобы новые файлы не затерли исходные! Об этом стоит подумать и в случае, когда в вашей папке могут оказаться файлы с одинаковыми именами, но разными расширениями, вроде picturel.gif и picturel.tif.
Что делать? Точнее, что сделать?
Да просто изменить имя (список Document Name) или расширение (Extension) - к примеру, попросить нумеровать выходные файлы.