Анимация в Adobe Photoshop CS3 |
Анимация в программе Adobe Photoshop CS3.
На самом деле процесс создания не изменился, он такой же, как в прошлых версиях и отличается лишь тем, что нам больше не понадобятся сопутствующие программы. Теперь все можно сделать, используя исключительно Adobe Photoshop.
Принцип создания анимации на примере простейшего баннера. В Photoshop анимацию можно создать только в формате gif.
В качестве примера эти две картинки:
1. Приступим к рисованию самого баннера. Откроем Photoshop и создадим новый файл размерами 468х60 – это стандартные размеры большого баннера.
2.Итак, у меня есть заготовка, элементы которой можно соединить в один слой, дабы потом не путаться. Они нас не интересуют, так как, по сути, являются фоном.
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 и с гордостью заявить – Работа Выполнена!
Рубрики: | Фотошоп |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |