RUbloggers — собрание русскоязычных блоггеров

Автор: Найкрис

Опубликовано: 07.11.09

Рубрики: Дизайн и Креатив

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

Собственно, опираясь на этот не замысловатый принцип, я и выбрал именно этот пост для сегодняшней публикации.

Опубликовав у себя на блоге пост под названием «Анимация в Adobe Photoshop CS3», я получил колоссальный прилив посетителей с поисковых систем. Казалось бы, это давно раскрытая тема, но, наверное, мне удалось удачно и понятно ее раскрыть в очередной раз, т.к. на этот урок часто ссылаются в Сети.

Это безоговорочный хит по просмотрам на моем блоге, который ушел в значительный отрыв от ближайших соперников.

Хочется верить, что эта заметка повлияет на развитие Русскоязычных Блоггеров и приведет сюда десятки тысяч посетителей

В этом уроке я расскажу, как создается анимация в программе 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 и с гордостью заявить – Работа Выполнена!