Как сделать анимацию в фотошопе — уроки фотошоп

Покадровая анимация в Фотошопе

Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок — Создание анимации в Photoshop CC.

Я довольно-таки давно интересуюсь покадровой анимацией, хотя и изучила мало материалов. Все книги, которые я начинала читать, довольно длинные, трудные и «сухие».

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

Многие советовали мне переходить на другие программы (например, TVP Animation Pro), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.

А этот урок я написала специально для тех, кто не понимал технологию создания покадровых анимаций конкретно в Фотошопе. Кто не хотел чуть-чуть покопаться и понять, что к чему.

Я затрону две темы: короткие анимации и длинные. Не стоит пролистывать неинтересный вам тип анимаций: там может быть информация, которая вам пригодится для анимаций нужного вам типа.

Короткие анимации – это анимированные аватарки, смайлики и т.д.

Длинные анимации – это мультфильмы, видео и т.п.

Сначала я расскажу теорию, а затем мы создадим анимацию на практике.

Важное дополнение

Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро, потому что вы нарисовали мало кадров.

Ваш персонаж/объект двигается медленно, потому что вы нарисовали много кадров.

Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.

Запомните: в одной секунде 24 кадра!

Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.

Короткие анимации

Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e, но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко.

С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15—30 кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320 кадров!).

Что вы должны помнить и знать?

Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:

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

Примерно так это показано на схеме:

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

И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.

Далее мы можем посмотреть все три типа анимаций:

Слабый ветер:

Средний ветер:

Сильный ветер:

Всё то же самое относится к ткани и одежде — они будут вести себя примерно так же, как и волосы.

А теперь, например, вы захотели нарисовать анимацию с движением своего персонажаобъекта. значит:

Во-вторых, любое действие с чего-то начинается. Вы никогда не замечали, что, например, чтобы встать со стула, вы его сначала чуть-чуть отодвигаете, и немного наклоняетесь вперёд, а только потом уже встаёте? или, что захотев сделать удар ракеткой вы сначала её отводите и поворачиваетесь корпусом вместе с ней, а только потом делаете удар?

Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:

Чтобы не попасть впросак с этими движениями перед действиями (ДПД), чаще анализируйте и наблюдайте за движениями людей или животных.

Небольшое дополнение

В общем, никогда не забывайте о физике. Вес объектов, материалы, из которых они сделаны (упругость, мягкость, жёсткость и т.п.), всё это нужно.

Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!

Лучше поработайте над ней и никогда не спешите.

Длинные анимации

Ооо, вот тут-то и начинается всё самое интересное!

Частенько ли вы, смотря мультики или аниме, восхищались анимацией и завидовали тем, кто умеет их делать? Все эти прекрасные сцены, пластика движений и мн. др.? Я честно признаюсь — да. Каждый раз, когда я что-то смотрю, я пытаюсь понять, как же аниматоры с этим работали? Как они всё это создавали?

Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.

И знаете, я ведь нахожу ответы на все свои вопросы!

Но давайте будем разбирать всё по порядку.

Процесс создания длинной анимации

1. Изначально нам нужна ИДЕЯ

Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.

Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.

Но в начале своего пути аниматора лучше ограничиться одной-двумя.

2. Теперь вам необходимо составить раскадровку по сценам (РПС)

Что это такое, и с чем её едят?

Представьте себе фильм. Теперь представьте кол-во различных видов из разных камер. Крупный план, пейзаж, камера, следующая за персонажем…

Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30 штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.

В ней они изображают сцены.

Только одни рисуют в каждом отсеке таблицы одну сцену, потом другую, третью и т.д., а другие рисуют в каждом отсеке таблицы изображения через несколько секунд (извиняюсь, если непонятно объяснила).

Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь — что это я тут изобразила?

Так что берём себе на заметку такую раскадровку по сценам и пользуемся такими книжечками.
Можно даже не делать книжку, а просто создать большой файл в Фотошопе и там все сцены отрисовывать.

3. Теперь вам нужно придумать фон, концепт персонажей и движения

Движения рисуем в книжечке РПС.

Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь — фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.

Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации».

К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров.

Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24—72-кадровой анимации.

Что ж, начнём!

1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.

2. Теперь, если у вас нет внизу слева окна «Анимация», смотрим наверх, открываем вкладку «Окно» — «Анимация».*

* — В примерах используется русифицированная версия Photoshop CS2.

Примечание: в новых версиях анимация создается в панели Window — Timeline (Окно — Шкала времени). Процесс создания анимации на примере Photoshop CC вы можете посмотреть в уроке — «Создание анимации в Photoshop CC».

На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:

Всегда/однажды — выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная — где показан принцип ДПД, воспроизводимая один раз — где показана смена сцен).

Выберите первый кадр — возвращает нас к самому началу.

Выбирает предыдущий кадр — не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию — Play/Stop.

Выбирает следующие кадры — следующий кадр. Ваш Кэп!

Tweens кадры анимации — с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.

Дублирует выбранные кадры — не совсем верное название… Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры — корзина.

3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).

4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.

Создаём новый кадр, и… Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).

Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.

Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.

5. Сидим, рисуем кадров 10—15…

6. И смотрим, что получилось.

Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.

Смотрите сами:

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

Почти конец

Выше я оговорилась об инструменте Free Transform (Редактирование — Свободное трансформирование / Сочетание клавиш «Ctrl+T»).

Пользоваться им стоит тогда, когда вы например, хотите отдалить камеру, приблизить её, повернуть и т.д. (Если вам нужно только переместить фон, воспользуйтесь видео-редакторами, вам же будет легче).

Не стоит пользоваться искажением, наклоном и другими инструментами трансформации без надобности.

Инструментом Liquify (Фильтр — Пластика) вообще не стоит пользоваться, если ваш рисунок нарисован в стиле аниме, т.е. с контурами. Всё жутко деформируется и станет ужасным.

«Tweens кадры анимации». Вот смотрите: у вас есть два кадра — на одном белый фон, а на другом, например чёрный. И вам нужно сделать так, чтобы белый плавно переходил в чёрный.

Тогда вам необходимо выбрать первый кадр, с белым фоном, нажать на кнопку «Tweens кадры анимации» и указать кол-во кадров, которые вы хотите вставить между этими имеющимися двумя.

Теперь смотрим, и О, ЧУДО! — белый плавненько переходит в чёрный. (Попробуйте сами!)

Ещё совсем чуть-чуть!

Отрисовав все сцены, всю анимацию, вы, вероятно, захотите воссоединить их в клип.
В единстве сила!

Но, перед тем, как их соединять, давайте правильно сохраним нашу анимашку.
Для этого тыкаем «Файл» — «Сохранить для Web» — «Save».
И, если вдруг выскочит какое-нибудь окошко, в котором говорится про название, смело закрывайте его своим Ok!

Примечание: Photoshop CC (2014) File — Save for Web (Файл — Сохранить для Web / Alt+Shift+Ctrl+S);

На этом этапе можно остановиться, если вам нужна gif-анимация. Если нужен клип, идём далее…

Вот теперь-то нам и понадобятся некоторые другие программы, например Ulead GIF Animator и Киностудия Windows Live. (Вы, конечно, можете пользоваться любым другим видео-редактором, но для новичков сойдёт и он. К тому же, там всё понятно).

Ulead GIF Animator

Открыв одну из своих анимаций, вы будете должны проверить её их сохранить как видео файл. Проверили. Всё нормально. Идём дальше:

Нажимаем «Файл» — «Сохранить как» — «Видео файл» и «Сохранить».

(Тык — откроется картинка размером в 1680*1013 px)

И, после того, как мы сохранили нашу gif-анимацию как видео файл формата .avi, например, можно смело идти в Киностудию Windows Live.
Там уже делайте с вашим клипом всё, что душе угодно.

А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.

Вуаля!

Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения…

Но, надеюсь, вы почерпнули для себя что-то новое и интересное!

Как создать анимацию в фотошопе? Как сохранить анимацию в фотошопе..

31 Январь 2014      Vlad Lemishko      Главная страница » Уроки Фотошоп

Здравствуйте, читатели моего блога!

Вот как и обещал, уроки фотошоп продолжаются!

Сегодня мы обсудим такой вопрос: «Как создать анимацию в фотошопе?».  Я попробуй дать вам подробную инструкцию по созданию анимации. А в конце предоставлю небольшой видеоурок…

Как сделать анимацию в фотошопе: что она под собой подразумевает и сложно ли это?

Делать анимацию в фотошопе довольно просто, если знать как ее делать=) Но а если честно, то попробовав один раз, вы все будете делать с закрытыми глазами… Именно в этой статье, под моим четким руководством вы научитесь делать анимацию без каких либо проблем!

Анимация, мы станем настоящими аниматорами?

Наша анимация — это плавное появление надписи, которое мы будем делать с помощью инструмента Анимация в фотошопе, именно этим мы и займемся. Сегодня вы сможете побывать в роли начинающего аниматора=)

Ну что начнем?

Для начала определимся, что нам нужно! А нужен нам фотошоп: не важно какая версия. Можете воспользоваться версией, которой пользуюсь я, скачать можете тут!

Открываем программу фотошоп и выводим вкладку анимация на рабочую среду: Окно — Анимация. В моей версии программы эта вкладка называется Шкала времени, поэтому я делаю так (ставим галочку):

В итоге у вас появится вот такая панель внизу:

P.S. Я ее немного обрезал…

Ну а теперь с помощью вкладок Файл — Создать…, или нажатием на клавиши CTRL+N — создаем новый файл. Выставляем размеры, жмем ок и пишем наш текст, с которого будем делать анимацию. У меня вот что получилось:

P.S. Это я немного с деформацией поигрался=)

Этот кадр автоматом стает в нашу Шкалу времени, ставим его на скорость 0,1 сек и с помощью Создание копии выделенных кадров создаем еще 10 (это зависит от того как вы будете выставлять прозрачность — дальше посмотрите и все поймете):

P.S. Это уже готовая картинка.

На первом кадре отключаем картинку (нажмите на вторую картинку и в слоях отключите видимость слоя — надпись, и данную картинку перетяните на первое место). В итоге, у меня 10 кадров со скоростью по 0,1 сек, а последний (11 кадр) — 1 сек.

На второй картинке текст должен быть включен, меняем только прозрачность: в слоях правой кнопкой мыши делаем клик по слою с надписью, выбираем вкладку — Параметры наложения…

В Основные параметры — Непрозр. ставим 10%. Такие действия повторяем с каждым кадром, увеличивая прозрачность: второй — 20 %, третий — 30% и т.д., пока не дойдем до 100% — финальный кадр (именно из-за того как вы будете использовать прозрачность зависит количество кадров).

Также, в Параметрах наложения можете попробовать использовать дополнительные фишки (просто нужно поставить галочку и результат перед вами).

Остальные кнопки Шкалы времени я не объясняю: думаю, кнопка play и другие вам знакомы… (чтобы просмотреть, что за кнопка перед вами — просто наведите курсором мыши на нее и у вас перед глазами появится надпись с обозначением)

Вот и все, осталось только сохранить наш небольшой проект под кодовым названием «Анимация в фотошопе«!

Как сохранить анимацию в фотошопе?

Для того чтобы сохранить нашу анимацию открываем меню Файл — Сохранить для Web… (Alt+Shift+Ctrl+S):

Выбираем формат Gif (он там уже автоматом стоит) и жмем Сохранить… (выбираем путь сохранения, к примеру — рабочий стол), Все анимация сохранилась=)

P.S. С анимации можно убрать фон — удалив слой «Фон» (но у меня он сливается с шаблоном)

Я думаю, тут и без видеоурока все понятно… Но все равно, как и обещал, вот смотрите:

 На сегодня все, пока!

С уважением, ваш любознательный Ежик!

Графика / Как сделать Gif-анимацию в Фотошопе?

Как сделать GIF анимацию в Фотошопе?

С помощью редактора «Adobe Photoshop» вы легко сможете сделать Gif анимацию, используя стандартные инструменты. В этом уроке мы расскажем, как это сделать. Для начала создадим документ размером десять на десять пикселей.

Для этого перейдите на вкладку «Файл» и выберите команду «Создать». В появившемся диалоговом окне «Новый» задайте размеры для нового документа, введя значения, равные десяти пикселям, в поля «Ширина» и «Высота». После ввода размеров изображения нажмите «Ок».

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

Для создания дубликатов зажмите левую кнопку мыши на иконке слоя и перетаскивайте ее на пиктограмму «Создать новый слой», расположенную в нижней части палитры слоев.

Эти четыре слоя будут являться четырьмя кадрами нашей будущей анимации. Теперь самое главное, что нам понадобится для создания «GIF-анимации» — это рабочее пространство с нужными инструментами. Перейдите на вкладку «Окно» и в списке «Рабочая среда» выберите команду «Движение».

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

Выберите инструмент «Карандаш» и на панели атрибутов установите для него размер, равный трем пикселям. Теперь с помощью карандаша нарисуйте квадрат в левом нижнем углу изображения.

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

Таким образом, мы получим четыре кадра для нашей будущей анимации. Теперь перейдем к созданию анимации. Для этого на панели «Анимация» нажмите на кнопку «Преобразовать в покадровую анимацию».

На панели «Анимация» появится один кадр, теперь нажмите на кадре правой кнопкой мыши и в появившемся контекстном меню выберите интервал, равный одной секунде.

Теперь нажмите три раза на кнопку «Создание копии выделенных кадров», расположенную в нижней части этой же панели, чтобы добавить в анимацию еще три кадра. Выделите первый кадр на панели «Анимация» и сделайте видимым и активным только первый слой изображения на палитре слоев.

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

Теперь мы получили анимацию, состоящую из четырех различных кадров.

Чтобы просмотреть получившийся результат нажмите на кнопку «Запуск воспроизведения анимации», расположенную в нижней части панели «Анимация».

Теперь осталось только сохранить созданную анимацию в формате «Gif».

Таким образом, используя инструменты редактора Фотошоп вы легко сможете сделать «Gif-анимацию».

Анимация в фотошопе

Сделаем анимацию в фотошопе

С самого начала дадим определение…

Что такое   гиф анимация?

Это анимированное изображение, т.е. изображение, которое может двигаться. Гиф анимацию можно сделать  из нескольких изображений, либо из видео. Сегодня, возможно, сделать анимацию онлайн. Загрузите  изображения, нажмите создать и будет вам готовая гиф анимация. Так  же можно сделать гиф анимацию из видео.

Сегодня мы займемся созданием гиф анимацией в программе Photoshop.

Как сделать анимацию в фотошопе?

Нам нужны фотографии, изображения, картинки. Я не буду вам рассказывать, как редактировать фотографии! Мы будем заниматься  одним процессом создания анимации!

У меня возникла необходимость сделать гиф анимацию.  Я подумал, почему бы на основе этой анимации не написать страницу посвященной теме создания анимации  в фотошопе!?

Опишем полностью процесс создания анимации!

Открываем фотошоп, на каждое изображение создаем отдельный слой.

Как создать отдельный слой  для анимации?

Я делаю так: загрузили все  изображения в фотошоп, вырезаем нужную часть  изображения и  вставляем эти  куски  в отдельный файл. Отдельный файл нужен для того, чтобы ненароком не испортить какую-то фотографию, у вас на компьютере!

Когда вы вставляете вырезанный кусок в анимацию, то слой создается автоматически!

Смотрим на мои  слои:

Далее идем в окна – анимация.

Если у вас нет пункта меню –«Анимация», то нажмите в выпавшем меню, показать все пункты меню.

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

В моей гиф анимации будет меняться  изображение 9 раз. Если вдруг, количество кадров оказалось больше чем вам нужно, то чуть правее кнопки добавить, есть кнопка удалить.

Далее выбираем первый кадр, оставляем тот слой видимым, который хотим, чтобы показывался первым.

Далее берем второй кадр, выбираем слой, оставляем его видимым и  так проделываем со всеми кадрами!

Как  задать время показа каждого кадра в анимации?

Нам потребуется показывать каждый кадр разное время. Для того, чтобы отредактировать время показа, нажимаем по  маленькой строчке – треугольнику.

В выпавшем меню выбираем нужное время показа каждого кадра. Если вам нужно другое время показа кадра, то выбираем  другое и устанавливаем требуемое время.

Как сохранить гиф анимацию?

Идем в файл – сохранить  для Web устройств…

Нажимаем save – сохранить!

Смотрим, что у нас получилось!

Пример готовой гиф анимации

Как создать анимацию в фотошопе? Анимированный баннер

Привет друзья! Сегодня мне пришла мысль рассказать о том, как создать анимацию или анимированный баннер в фотошопе. Для чего это вам нужно? Если вы зарабатываете на своем блоге с помощью партнерких программ, то обычно это происходит с помощью баннеров.

Большинство инфо-бизнесменов предоставляют своим партнерам уже готовые баннеры, как анимированные, так и в виде простой картинки с вашей партнерской ссылкой. Остается только скопировать код и установить его на своем блоге.

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

Думаю, многие согласятся со мной, что внимание посетителей блога лучше привлекают именно анимированные картинки, чем обычная ссылка. Тем самым увеличивая конверсию переходов и продаж.

Давайте приступим, и начнем создавать анимацию из картинок в программе фотошоп. В итоге, у нас получится баннер, который будет менять свое содержимое, то есть станет анимированной.

И так, запускаем программу фотошоп. Надеюсь, что она у вас установлена.

У меня установлен русифицированная версия фотошопа (CS6), поэтому я буду делать свою анимацию, и рассказывать, как это делается именно в ней.

В меню выбираем «Файл — Создать», для того, чтобы создать новый документ.

В открывшемся окне устанавливаем наши настройки будущего анимированного баннера. Рекомендую, размеры (высота, ширина) устанавливать не наугад, а выбрать стандартные. Я, для примера, выберу один из стандартных размеров баннера, это 468 на 60 пикселей. Нажимаем «ОК».

У нас создается чистый документ, в котором мы уже будем делать анимацию.

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

И так, в меню с инструментами фотошоп, я выбираю инструмент «Текст». Пишу нужный мне текст на созданном нами документе, и нажимаем галочку вверху окошка. Наш текст создается на новом слое. Как выбирать и настраивать шрифт, цвет шрифта, я надеюсь, вы знаете.

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

Теперь у нас три слоя. Первый слой это фон, который вы можете залить любым цветом, и два слоя с текстом.

Наши слои для создания анимации (анимированного баннера) готовы. Теперь перейдем к созданию сомой анимации, и оживим наш баннер.

В меню заходим по вкладке «Окно» и ставим галочку рядом с пунктом «Шкала времени».

В нижней части окна фотошоп должна появиться дополнительное окно инструмента «Шкала времени». На нем уже имеется первый кадр нашей анимации. Так как моя анимация будет состоять всего из двух кадров, то я создаю еще один кадр. Для этого надо нажать на иконку «Созданий копий выделенных кадров» (смотрите рисунок).

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

Сделайте клик на первом кадре, тем самым мы его выделяем. Теперь открываем окно с нашими слоями, и оставляем иконки глазика только рядом с теми, которые должны быть на кадре. В моем случае это надпись «Делаем анимированный баннер» и слой с фоном.

Далее выделяем второй кадр, кликнув по нему. Опять переходим в слои, и включаем те слои, которые должны быть на втором кадре. Лишние выключаем. В моем случае это опять фоновый слой и вторая надпись «В программе фотошоп». Слой  «Делаем анимированный баннер» я отключаю, так как на втором кадре его недолжно быть.

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

Нам надо время показа каждого кадра изменить. Для этого нажимаем на треугольник, рядом со счетчиком времени