Анимация.
Всем всегда нравилось подвижные картинки, это приятно и забавно и одновременно сложно, по крайне мере если прорисовывать.
Вот и я столкнулась с довольно сложной задачей. Появилось желание анимировать свой аватар, захотелось сделать новый скин для квипа и смайлики к нему, и так далее и тому подобное. В конце концов – это занимательно и весело.
Большинству удобно пользоваться Adobe Image Ready, но в том то вся фишка, в новых и распрекрасных Adobe Photoshop CS3 его нет... А точнее... его Влили в фотошоп.
Примечание редактора: Для анимации лучше всего использовать Фотошоп 7.
И так, перед нами восстаёт великая задача – банально достать нужную панель и хитренько создать гиф анимацию и не менее хитро сохранить...
Об этой великой хитрости меня просветила одна статья, все лавры этому человечищу)
Материал взят отсюда.
В этом уроке я расскажу, как создается анимация в программе Adobe Photoshop CS3. На самом деле процесс создания не изменился, он такой же, как в прошлых версиях и отличается лишь тем, что нам больше не понадобятся сопутствующие программы. Теперь все можно сделать, используя исключительно Adobe Photoshop.
Я покажу принцип создания анимации на примере простейшего баннера. Сразу хочу отметить, что в Photoshop’e анимацию можно создать только в формате gif, а его качество оставляет желать лучшего. Но не всегда, разумеется. В качестве примера приведу вот эти две картинки:
и
Они обе в формате gif, обе сделаны в одной и той же версии Photoshop. Кнопочка выглядит достаточно хорошо, а вот баннер не очень. Проблема в том, что я попытался нарисовать баннер, используя большое количество полутонов, которые gif попросту не поддерживает. Для того, чтобы сделать красивый анимированный баннер применяются уже flash-технологии. Но это уже другая история. Да и вообще, тема создания баннеров весьма обширна и требует отдельной публикации.
Я же не буду отвлекаться и вернусь к изначально поставленной задаче – расскажу, как делать анимацию в Adobe Photoshop CS3.
1. Я придумал изначальный «сюжет» анимации. Не знаю, почему я вдруг вспомнил фильм «Карты, деньги и два ствола», но коль это произошло, то, используя это название, и создадим анимацию. Она будет достаточно простой и состоять из трех кадров. А суть заключается в том, что будет меняться надпись и «подсвечиваться» одна из картинок. Когда надпись «карты», то и картинка с картами станет четче и т.д.
2. Теперь приступим к рисованию самого баннера. Откроем Photoshop и создадим новый файл размерами 468х60 – это стандартные размеры большого баннера.
3.Что и как рисовалось, я расписывать не буду по двум причинам.
Во-первых: я не придумывал тут ничего нового, а использовал старые, давно раскрытые приемы.
Во-вторых: у Вас все равно будут свои задумки, которые будут реализовываться совершенно по-другому (но, если вдруг кому-то что-то понадобится, то спрашивайте, расскажу, как и что делал).
4. Итак, у меня есть заготовка, элементы которой можно соединить в один слой, дабы потом не путаться. Они нас не интересуют, так как, по сути, являются фоном.
Считайте, что это сцена, по которой будут перемещаться наши актеры.
5. Теперь добавим три картинки, которые будут «подсвечиваться» в нужный момент. Я изменил Непрозрачность (Opacity) до 60% и добавил тень в стиле слоя (layer stile – drop shadow).
Обратите внимание, что три картинки – это разные актеры, у каждого своя независимая роль, а это значит, что каждая из них должна находиться на отдельном слое. 6. Следующее, что нужно сделать – это написать три слова: «карты», «деньги», «2 ствола». Каждое на отдельном слое. И разместить их аккуратно друг под другом, дабы, когда они будут меняться, не происходило скачков. Выглядеть это должно следующим образом
7.Все актеры на своих местах. Теперь нам нужно заставить их «поплясать». Для этого переключим Photoshop в режим «Video and Film». Осуществляется это при помощи кнопки «Workspace», которая находится в правом верхнем углу программы.
После этой операции внизу экрана появилась новая менюшка, которая имеет такой вид
Стрелочкой показана кнопочка, с помощью которой создается новый кадр анимации. Рядом, в виде урны, кнопка, которой эти кадры удаляются.
8. Теперь я дублировал слой с картинкой карт и, используя настройки стилей слоя, придал продублированной картинке такой вид, в какой она должна преобразиться, когда появится соответствующая ей надпись. То есть, во время анимации это должно выглядеть так:
Для того, чтобы скрыть ненужные пока надписи-слои, необходимо «выколоть глазик», который находится напротив слоя.
Делается это просто – одним кликом правой клавишей мыши.
9. Все актеры расположены так, что у нас создался первый кадр анимации. Теперь создаем новый кадр. Отключаем надпись-слой «карты» и включаем «деньги». Ищем дубликат слоя с картинкой карт. Нам нужно скопировать ее стиль слоя и передать его картинке с деньгами. Для этого кликаем левой клавишей мыши по слою с картами. В выпавшем меню находим Копировать Стиль Слоя (Copy Layer Style) и передаем его слою с деньгами – такая же операция, только в выпавшем меню находим Вставить Стиль Слоя (Paste Layer Style). Отключаем слой с копией карт. Получаем следующий результат:
10.
Создаем новый (он же у нас и последний) кадр. Проделываем операцию, описанную в пункте 9, но на этот раз с актерами из труппы «2 ствола». 11. Чтобы посмотреть, что у нас получилось, нажмем на воспроизведение.
А кликнув, как указано на рисунке ниже, можно задать интервал показа кадра.
12. Вот наша анимация и готова. Осталось ее Сохранить для Веб (Save for Web), в формате gif и с гордостью заявить – Работа Выполнена!
Но таки для этого надо иметь:
- Adobe Photoshop CS3
- QuickTime -плеер для без ошибочной загрузки и обработки.
Примечание редактора: QuickTime совершенно необязателен, так как гиф-анимацию можно вполне удобно проигрывать в утилите просмотра изображений виндоуса по умолчанию.
По-скольку сохранять-то придется не в Гиф-фармате, а в Web. Эту хитрость опять таки можно прочитать в статье Найкриса
Примечание редактора: Веб-формат сохраняет легче и качество его можно настроить вручную. В формате для Web можно сохранять: BMP, gif, jpg (jpeg). Так же Web не является отдельным форматом (и вообще, практически, форматом не является), он лишь сжимает и оптимизирует картинку для вывода в интернет.
Я же опишу достатки и недостатки...
Все хорошо когда ты делаешь все сразу.
А таки да, в фотошопе сделать просто, даже без проблем я бы сказала, но вот переделывать – это целое веселье, как белый фон, или даже белая полоса вокруг рисунка.
Примечание редактора: По-этому лучше делать анимацию сразу в фотошопе и сохранять в формате для Web, выбирая в настройках сохранения галочку "прозрачный фон" или сразу рисуя с прозрачным фоном.
Что делают и другие гиф аниматоры как Easy GIF Animator, который по умолчанию ставит белый фон, даже если вы такие маньяки как я, прорисовывали до 4-х картинок с прозрачным фоном вручную (каждую относительно отдельно) и сливали в анимации… у вас выйдет… хм…:
Первый кадр прозрачный а остальные белые или вообще белый фон...
К плюсам относиться его более менее удобность в нарисовке, при том что у фотошопа довольно простые кисти и привыкнуть к нему можно побыстрее.
И простата открытия закрытия слоев и доработка в процессе создания, в отличие от других-которые просто склеивают картинки...
Примечание редактора: Для открытия уже готовой анимации в формате .gif без потери фона нужно использовать Photoshop 7.0, а точнее его приложение - ImageReady.
Есть и множество других программок которые позволят вам творить и властвовать над анимацией, как отдельный продукт Fireworks CS3.
Доступно только для пользователей
Ими я не пробовала работать, но говорят намного удобней и при добытие этого, обязательно отпишусь.
Не думаю что сильно познавательно, но все-таки полезно.
[blink]НО[/blink] одно я точно вам посоветую, создавая анимацию в фотошопе, не забывайте делать копию уже готовых слоев в PSD, да в PDD, так вам будет проще переделать те недочеты что вы сделаете при сохранении и закрытии вашей работы... сама же я с этим борюсь)
Редактор: Пума_Дракорог Статью писала: Lunar
Добавлено (08.04.2009, 20:51)
---------------------------------------------
а так новый минус- Больше 13 кадров вы не сделаете.. огромный минус