Пятница, 20.10.2017, 20:50
Приветствую Вас Путник | RSS
[ Обмен файлами | Статьи | Банк ссылок | Гостевая книга ]
[ Граффити | Обратная связь | FAQ ]
[ Новые сообщения · Участники · Правила форума ]
[ Поиск · Мини-Чат · RSS ]

Чат

Страница 1 из 11
Модератор форума: Пума_Дракорог 
Форум » ▪ АРТ » Учебники » Анимация (в Adobe Photoshop CS3)
Анимация
LunarДата: Среда, 08.04.2009, 20:51 | Сообщение # 1
Страж Заката
Группа: Участники
Сообщений: 547
Статус: Offline
Награды:
Анимация.

Всем всегда нравилось подвижные картинки, это приятно и забавно и одновременно сложно, по крайне мере если прорисовывать.
Вот и я столкнулась с довольно сложной задачей. Появилось желание анимировать свой аватар, захотелось сделать новый скин для квипа и смайлики к нему, и так далее и тому подобное. В конце концов – это занимательно и весело.

Большинству удобно пользоваться 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, так вам будет проще переделать те недочеты что вы сделаете при сохранении и закрытии вашей работы... сама же я с этим борюсь)
happy

Редактор: Пума_Дракорог

Статью писала: Lunar

Добавлено (08.04.2009, 20:51)
---------------------------------------------
а так новый минус- Больше 13 кадров вы не сделаете.. огромный минус
dry


Неверующие всегда оказываются неправы, причем самым ужасным, отвратительным и болезненным способом. Лучше верить.

Сообщение отредактировал Lunar - Вторник, 07.04.2009, 17:04
 
Пума_ДракорогДата: Среда, 08.04.2009, 23:49 | Сообщение # 2
Жемчужина рассветА
Группа: Хранящие свет
Сообщений: 1344
Статус: Offline
Награды:
Lunar, я делала 54 кадра в Фотошопе 7.

Настоящее рисование = Фантазия + Техника · Оригинальность.
Настоящая живопись = Техника + Оригинальность · Видение формы натуры
Настоящее хамство = Плагиат + Неумение · Наглость²


И... НАСТОЯЩИЙ БУВОЛДЫР!!!!!!! ©
 
KiДата: Четверг, 09.04.2009, 09:56 | Сообщение # 3
=солнышко=
Группа: Стражи Света
Сообщений: 181
Статус: Offline
Награды:
Надо мне будет скачать эту 7 версию. )) Я создавала гифтик в пэинте - несколько кадров (много было, не помню сколько, замучаласб wacko но было интересным это занатие), а потом складывала в Atani 4.4rus biggrin
*пошла искать фотошоп 7*


Не знаю как у Ангелов, но у людей крылья вырастают от страха
 
Форум » ▪ АРТ » Учебники » Анимация (в Adobe Photoshop CS3)
Страница 1 из 11
Поиск:


Статистика сайта и форума
Последние новости Самые активные темы Последние сообщения
ТУТ 05.08.2014
Ну хорошо, хорош... 18.03.2010
Итак, скоро сайт... 13.03.2010
Уважаемые пользо... 26.02.2010
Портал заработал... 16.01.2010
Ассоциации 1829
Флудилка 478
Арт Lunar 439
О чем ты сейчас дума... 329
Что гудит в калонках... 326
Тема Автор Время ответа Ответов
Какому направлению Metal Music Вы отдаете пре... zen 14.12.2010, 17:46| 33
Арт Lunar zen 12.06.2010, 17:27| 439
Ассоциации Lunar 19.03.2010, 15:49| 1829
Рисуем вместе комикс! Lunar 18.03.2010, 23:43| 241
Флудилка Ki 13.03.2010, 22:23| 478
Здесь можно сказать "Здравствуйте"! PUTNIK 06.03.2010, 14:30| 85
Тема. Noise. toX 20.02.2010, 16:54| 9
Поздравлялка Киотсукинай 18.02.2010, 16:19| 108
Помогите, пожалуйста с аватаром Киотсукинай 11.02.2010, 21:19| 10
Лепнина Корпсы Corpse_dragon 08.02.2010, 22:09| 5
Новые пользователи Новые статьи
on0igsnv7 18.03.2017
WalterFewyg 12.03.2017
WalterFewcw 12.03.2017
WalterFewsm 12.03.2017
amieux4 12.03.2017
Как рисовать облака? 24.07.2009
Принцип построения т... 14.05.2009
Профессиональное фот... 13.05.2009
Рисуем пейзаж акваре... 12.05.2009
Рисуем пион (техника... 12.05.2009

MetalDragons © 2008 - 2017
Все права защищены. Копирование любых элементов запрещено.
Дизайн сайта © Пума_Дракорог (Pearl_Dragoness), тех. вёрстка © Chaos_Knight.
Все материалы принадлежат их авторам. Любая их публикация или использование допускается только с разрешения владельца и при условии указания ссылки на сайт и имени автора материала.



Rambler's Top100