Пример пиксельной анимации — уроки фотошоп

Пиксель-арт во флеше

С недавних пор замечаю, в статистике заходов на сайт по поисковым фразам  появился чудо-запрос: как рисовать во флеше квадратиками:)  Даже не сразу поняла смысл, но скорее всего имели ввиду пиксель-арт. Решила написать пост на тему рисования квадратиками. А другими словами — создание пиксель-арта во флеше.

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

Во флеше нет инструментов для рисования пиксель-арта. Можно это сделать, клонируя обычный квадратик, но это очень долго и  неудобно. Гораздо проще скачать плагин для флеша, который так и называется – Pixel Tools v2.0.

Итак, качаем плагин. Чтобы успешно установить его себе на компьютер, нужно попросить у адоба Extension Manager для установки плагинов. Он полностью бесплатный, как впрочем и сам Pixel Tools.

Итак, установив менеджер, устанавливаем сам плагин, кликая по нему. Вот и все, теперь он в списке.

Перезапустим флеш, и осталось добавить на панели иструментов наш новый набор для пиксельного художника (наверное, правильнее будет сказать  — специалиста по пиксель-арту:)

Где его искать – заходим Customize Tools Panel:

В списке доступных инструментов (available tools) видим 4 новых с черной шахматкой внизу – это они и есть.

Осталось лишь добавить их на панель инструментов. Для этого удалим какой-то не особо нужный нам инструмент, например руку, или инструменты 3д (я ими никогда не пользуюсь).

Добавляем, кликая на кнопку Add:

Видим их на главной на панели инструментов. Вот и все,  можно рисовать.

Коротко о самих инструментах – их всего 4:

1)      линия

2)      эллипс

3)      произвольная линия

4)      ластик

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

Повторная переустановка плагина не помогла, но это не сильно испортило настроение,  можно обойтись и инструментом «произвольная линии». Для удобства рисования можно настроить сетку.

Кликаем правой и выбираем: Grid Show Grid. Сетку во флеше  можно отредактировать на свое усмотрение: Grid — Edit Grid.

— цвет – для удобного восприятия

— выбрать расположение относительно объектов (поверх или за)

— включить привязку к сетке

— изменить размер сетки.

Стоит отметить, что толщину линии легко регулировать на панели Properties. А это значит, что можно рисовать как пикселями, так и крупными квадратиками (вобщем, рисовать квадратиками:)

Если плагин после установки у вас не отображается во флеше, то скорее всего вы работаете в русской версии виндовс. Во всяком случае, у меня такая проблема была и решила ее таким образом: заходим сюда C:Users****AppDataLocalAdobeFlash CS5 (****- ваше имя в системе)

Там лежат 2 папки — «en_US» и  «ru_RU». Чтобы плагин отображался во флеше, нужно информацию из  папки ru скопировать в  папку en.

отсюда — C:Users****AppDataLocalAdobeFlash CS5
u_RUConfiguration

сюда —  C:Users****AppDataLocalAdobeFlash CS5en_US

Плюсы создания пиксель-арта в векторе:

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

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

Минусы создания пиксель-арта в  векторе:

Не слышала о таких:)

Пиксельная анимация во флеше.

К сожалению, ничего конкретного не могу сказать по теме, но думаю, она существует:)

Знаю многих, кто не согласен, что пиксель-арт – это стильно, модно, молодежно:) А ведь пиксель-арт – не только Супер-Марио, но и:

— снежный человек

— Стив Джобс

-ботаник Петя

Ну и, естественно, бессмертный Супер-Марио, как же без него:)

А так же:

— замечательные иконки для игр и веб:

-и паттерны (примеры с colorlovers.com):

И что радует – все это можно нарисовать во флеше в векторе.

Приятной работы:)

Источник: http://flash-animated.com/piksel-art-vo-fleshe

Основы создания анимации в Фотошоп

Анимация прочно вписалась в компьютерную графику. Её применяют в баннерах и просто заставках на рабочий слой. Фотографии с анимацией выглядят фантастически. В общем, без анимации никуда. Рассмотрим основы того, как сделать анимационную фигуру.

Создаем новый файл любого размера, в уроке это 800*800 пикселей.
Создаем два новых слоя. На нижнем из них инструментом «Овальная область» обводим круг и инструментом «Заливка» заливаем его, предварительно установив на панели инструментов в верхнем квадрате цвет.

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

Во вкладке «Просмотр» нажимаем «Вспомогательные элементы» и «Овальной областью» выделяем полосы на втором круге и нажимаем клавишу Delete.

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

Становимся на верхний слой, отключаем видимость с фона (глазик возле миниатюры слоя) и инструментом «Прямоугольная область» обводим все изображение.

Заходим во вкладку «Редактирование» — «Скопировать совмещенные данные» — «Вставить». У нас получится новый слой с шаром на прозрачном фоне. Создаем четыре копии этого слоя.

Отключаем видимость с верхних слоев с шаром и заходим во вкладку «Редактирование» — «Трансформирование» — «Деформация».

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

Выбираем «Рыбий глаз». Не вносим в этот слой больше никаких изменений.

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

Возвращаем видимость еще одному из верхних слоев с шаром и снова вызываем «Рыбий глаз». На это раз сдвигаем в центр ещё больше, чем в прошлый раз.

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

Для ещё одного слоя «Рыбий глаз» делаем более сдвинутым в центр.

Если остался лишний слой с шаром, то можно его удалить. Теперь переходим к созданию анимации. Заходим во вкладку «Окно» — «Анимация» («Шкала времени»). Внизу рабочего поля будет раскадровка. На примере показана уже готовая раскадровка для удобства. Каждому кадру соответствует слой. К примеру, первый кадр – слой с шаром, где только начинается трансформация.

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

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

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

На самом глубоком втяжении слоя у кадра будет время 0,5 секунд, во всех остальных 0,3 секунды.

Для кадров №№ 4,6,8,10 будет видимым предпоследний слой.

Для кадров №№ 5,7,9 будет видимым последний слой.

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

Для того чтобы сохранить анимацию – нужно зайти во вкладку «Файл» — «Сохранить для WEB и устройств».

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

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

Анимация фигуры готова.

  • ТЕГИ
  • анимация фотошоп
  • уроки фотошоп

Источник: http://www.fotokomok.ru/osnovy-sozdaniya-animacii-v-fotoshop/

Создаем в Фотошоп анимированного персонажа в стиле пиксель-арт

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

Пройдите этот урок, в котором я научу вас созданию милого кролика с зацикленной анимацией бега.

Если вам сложно рисовать в стиле пиксель-арт, то воспользуйтесь готовыми спрайтами.

1. Дизайн персонажа

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

Шаг 1

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

Я нарисовал несколько набросков головы и выбрал наиболее подходящий по стилю.

Шаг 2

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

Если вы никогда не занимались пиксель-артом, то создаем новый файл не очень большого размера, например, 400 х 400 пикселей. Мы много будем работать с увеличением масштаба (до 700%) и использовать инструмент Pencil Tool(P) (Карандаш) для рисования отдельных пикселей.

Я советую вам открыть дополнительное окно с рабочим документом, в котором масштаб будет 100-200%, чтобы вы могли сразу в реальном размере видеть свою работу без необходимости на одном документе туда-сюда переключаться с большого масштаба на маленький.

Таким образом, у вас будет открыто два документа: на одном масштаб до 700% (рабочий), а на другом – 100-200%.

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Уши нарисованы максимально узкими с внутренней частью шириной 1 пиксель и таким же контуром.

Шаг 7

Одно ухо рисуем свисающим вниз.

Шаг 8

Рисуем второе ухо.

Шаг 9

Рисуем большие пухлые щеки и заканчиваем голову.

Шаг 10

Теперь мы можем нарисовать тело. У кролика будет человекоподобная фигура. Рисуем туловище в форме капли.

Шаг 11

Ноги кролика будут короткими с большой стопой. Пока рисуем только одну ногу.

Шаг 12

Рисуем вторую ногу, но сдвигаем ее слегка вправо, чтобы она не перекрывалась первой.

Шаг 13

Ноги выглядят слегка смещенными, поэтому я передвинул их на один пиксель левее. Также я объединил ногу с животом, удалив пиксель между ними.

Шаг 14

В положении стоя видна только одна рука. Рука имеет форму капли и немного перекрывает туловище.

Шаг 15

Удаляем лишние линии на руке.

Базовый контур нашего персонажа готов.

2. Цвет

На данном этапе мы превратим персонажа в законченный статичный спрайт.

Шаг 1

Выбираем цвет.

Каким цветом вы хотели бы закрасить кролика? Я выбрал желтовато-коричневый цвет и заполнил им все, кроме носа. Для заливки используем Paint Bucket Tool(G) (Заливка).

Шаг 2

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

Шаг 3

Теперь нанесем тени: более темным оттенком базового цвета шерсти добавляем тени в тех местах, куда меньше всего попадает свет. Также этим цветом можно добавить текстурности на щеках.

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

Шаг 4

Затеняем живот. Я добавил светло-серую тень с легкой голубоватой тонировкой.

Шаг 5

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

Также темно-коричневым цветом я добавил больше деталей на щеках, чтобы акцентировать на них внимание.

Персонаж в положении стоя готов.

3. Рисуем кадры бега

Теперь мы можем добавить кролику немного движения.

Читайте также:  Кисти в стиле рисунка карандашом - уроки фотошоп

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

Шаг 1

Давайте пока уберем конечности.

Голова и туловище не будут сильно меняться во время бега, поэтому на всех кадрах эти элементы будут находиться в одном положении.

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

Шаг 2

Берем Rectangular Marquee Tool(M) (Прямоугольное выделение), выделяем голову и верхнюю часть туловища и сдвигаем выделенную область на один пиксель (для этого активируем инструмент Move Tool(V) (Перемещение) и используем клавиши со стрелками).

Затем передвигаем голову на два пикселя правее.

Шаг 3

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

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

Шаг 4

Мы немного упростим себе задачу и будем работать только с ногами на переднем плане, так как для заднего плана они будут идентичны.

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

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

Шаг 5

Далее мы будем работать на всех шести кадрах.

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

Шаг 6

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

Для начала синий цвет закрашиваем цветом шерсти (для этого можете воспользоваться инструментом Paint Bucket Tool(G) (Заливка) с выключенным параметром Contiguous (Смежные пиксели)) и, вместо рисования контура вокруг ног, выделяем пустую область за пределами ног с помощью Magic Wand Tool(W) (Волшебная палочка) и сжимаем выделение Select – Modify – Contract (Выделение – Модификация – Сжать) на 1 пиксель. Затем инвертируем выделение Select – Inverse (Выделение – Инвертировать) и далее инструментом Paint Bucket Tool(G) (Заливка) (Contiguous (Смежные пиксели) отключаем) заливаем выделенную область цветом контура.

Шаг 7

Ноги еще не закончены, но давайте добавим на некоторых кадрах положение в прыжке.

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

Кадры с прыжком отмечены ниже фиолетовыми линиями. Для других линий уменьшаем непрозрачность (Opacity) до 20%, это будет тень. В играх-платформерах такая тень не всегда нужна, но в нашем случае она сделает анимацию интереснее.

Шаг 8

Чтобы закончить ноги, делаем стопу более пухлой, соединяем ногу с телом и немного затеняем ее.

Оставшиеся две фиолетовые линии закрашиваем черным и также уменьшаем непрозрачность до 20%.

Шаг 9

Закончив с ногами, копируем их и перемещаем копии на несколько пикселей вправо.

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

Шаг 10

Чтобы создать анимацию бега, ноги должны двигаться в противоположных направлениях, когда одна нога вытянута вперед, вторая – отведена назад.

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

Слои с копиями должны находиться под слоем с туловищем кролика.

Шаг 11

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

Так выглядит готовая анимация ног. Пока не думайте о самом процессе анимации. Сперва мы закончим подготовку кадров, а потом займемся сведением их в зацикленный бег.

[33.gif] — в исходном уроке анимация

Шаг 12

Теперь пора добавить руки.

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

Шаг 13

Размещаем руки на новом слое над телом и заполняем их основнім цветом кролика, как мы делали с ногами.

Шаг 14

Добавляем объем.

Шаг 15

И, наконец, затеняем, чтобы добавить больше объема.

Шаг 16

Далее дублируем руки и размещаем копию слоя за туловищем.

Шаг 17

Затеняем копии рук и меняем их местами, чтобы обе руки были направлены в противоположные стороны.

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

Вот так выглядит анимация рук.

[40.gif] — в исходном уроке анимация

Шаг 18

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

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

Шаг 19

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

Шаг 20

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

Вот так выглядит готовый вариант.

[44.gif] — в исходном уроке анимация

Шаг 21

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

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

Шаг 22

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

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

Шаг 23

Заполняем хвост цветом, наносим тени и обводку.

Шаг 24

На первом кадре, когда передняя рука отводится назад, кончик хвоста перекрывается.

Шаг 25

Чтобы закончить хвост, перемещаем слой на задний план и при необходимости корректируем тени/детали.

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

[50.gif] — в исходном уроке анимация

Далее мы займемся созданием зацикленной анимации.

4. Создаем анимацию

У нас есть 6 кадров с зацикленной анимацией бега. Теперь нам осталось склеить их вместе.

Шаг 1

Копируем все кадры на новый файл.

Вам нужно копировать по одному кадру в правильной последовательности (слева направо). Чтобы скопировать все слои одновременно, вам нужно перейти в меню Edit – Copy Merged (Редактирование – Скопировать совмещенные данные). Перед копированием убедитесь, что фон прозрачный и не залит цветом.

Размер нового файла должен быть чуть больше кролика.

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

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

Шаг 2

Чтобы начать создавать анимацию в Фотошоп, нам нужно открыть временную шкалу Window – Timeline (Окно – Шкала времени).

На шкале находится кнопка Create Frame Animation (Создать покадровую анимацию).

Вместо нее может быть кнопка Create Video Timeline (Создать временную шкалу для видео), чтобы переключиться на анимацию, нажмите кнопку в виде стрелки и в появившемся выпадающем меню выберите нужный режим.

Шаг 3

Нажимаем кнопку Create Frame Animation (Создать покадровую анимацию), затем кликаем по кнопке вызова параметров в правом верхнем углу шкалы…

…и выбираем Make Frames From Layers (Сделать кадры из слоев).

Шаг 4

И, наконец, выделяем все кадры и при необходимости меняем задержку (я выбрал 0.1 секунды), устанавливаем режим повторения на Forever (Всегда).

И получаем вот такого забавного кролика с анимацией бега!

Теперь вы можете использовать этот спрайт в игре или экспортировать его в GIF.

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

Этот урок должен дать вам понимание принципов создания дизайна и анимации спрайтов. Теперь вы можете нарисовать своего собственного персонажа или использовать для игры готового кролика!

Источник: https://Photoshop-master.ru/lessons/animation/sozdaem_v_fotoshop_animirovannogo_personazha_v_stile_piksel-art.html

Создание продвинутой анимации в Photoshop: Изучаем новые методы

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

Использование слоя шаблона с анимацией смарт-объектов

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

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

С помощью смарт-объектов мы можем использовать слои — шаблоны и упростить весь процесс.

Давайте рассмотрим, как это делается:

Красная точка движется по кругу

В приведенной ниже сцене я создал два слоя: один с красной точкой (“Dot”), и второй с большим серым кругом (“Template Shape”). Я добавил к большому серому кругу метки-разделители, чтобы нагляднее продемонстрировать эффект перемещения:

Шаг 1: Сцена, состоящая из двух слоев: красной точки и большого серого круга. (Увеличенная версия)

Сначала я выделяю оба слоя и преобразую их в смарт-объект, кликнув правой кнопкой по одному из выделенных слоев и выбрав из контекстного меню пункт «Преобразовать в смарт-объект»:

Шаг 2: Преобразование слоев в смарт-объект. (Увеличенная версия)

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

Шаг 3: Оба слоя вращаются как одно целое

Теперь, когда наша анимация работает, нужно удалить фигуру шаблона. Для этого дважды кликните по миниатюре смарт-объекта в палитре слоев. Открыв смарт-объект, мы можем скрыть слой “Template Shape”:

Шаг 4: Скройте слой » Template Shape». (Увеличенная версия)

До того, как сделать анимированный баннер в Фотошопе полностью, нам осталось лишь сохранить документ смарт-объекта и вернуться к исходному документу. Мы увидим, что красная точка движется по кругу без серой фигуры:

Красная точка движется по кругу

Вложение анимации в смарт-объекты

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

Анимация подпрыгивающей точки создана с использованием нескольких наборов ключевых кадров

В приведенной ниже сцене я уже создал простую анимацию желтой точки, вращающейся на синем фоне:

Шаг 1: Желтая точка, вращающаяся на холсте

Далее я перехожу к палитре слоев, кликаю правой кнопкой мыши по слою «Dot» и выбираю пункт «Преобразовать в смарт-объект»:

Шаг 2: Преобразование слоя желтой точки в смарт-объект. (Увеличенная версия)

У нас есть новый слой смарт-объекта, и мы можем добавить в него новый набор кадров. В приведенной ниже сцене я добавил набор для создания анимации перемещения смарт-объекта вверх и вниз. В ней мы можем видеть в действии оба набора ключевых кадров, которые создают эффект подпрыгивания:

Шаг 3: Новые ключевые кадры создают эффект подпрыгивания

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

Шаг 4: Преобразование анимации. (Увеличенная версия)

Теперь при воспроизведении анимации будет отображаться трансформация смарт-объекта. Это один из основных способов того, как сделать анимированную картинку в Фотошопе:

Воспроизведение анимации с трансформацией

Анимация фильтров

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

В приведенной ниже сцене я уже создал простую анимацию точки (внутри смарт-объекта), движущуюся на красном фоне:

Читайте также:  Иконки для хеллоуина или просто тыквы - уроки фотошоп

Шаг 1: Анимация смарт-объекта, желтая точка, движущаяся на красном фоне

Так как наша анимация уже находится внутри смарт-объекта, я могу добавить фильтр непосредственно к нему. Я перехожу в Фильтр> Искажение> Скручивание:

Шаг 2: Применение фильтра «Скручивание» к анимации смарт-объекта. (Увеличенная версия)

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

Анимация фильтра «Скручивание»

Добавление стилей слоя к анимации смарт-объекта

В приведенной ниже сцене у меня уже есть смарт-объект, который содержит простую анимацию точки движущейся на белом фоне:

Шаг 1: Простая анимация смарт-объекта

Я хочу применить к этой точке стиль слоя «Тиснение». Но если я сейчас попытаюсь применить стиль слоя к смарт-объекту, это повлияет на все его содержимое:

Шаг 2: Стили слоя, примененные к изображению в целом

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

Пока между слоями существует выразительный контраст тонов, мы можем использовать для удаления фона параметр «Наложить если». Дважды кликните по слою смарт-объекта, чтобы открыть панель стилей слоя, и переместите ползунок параметра «Наложение, если», по фон не исчезнет:

Шаг 3: Настройка слайдера «Наложение, если». (Увеличенная версия)

После этого кликните правой кнопкой мыши по слою в палитре слоев и выберите пункт «Преобразовать в смарт-объект». Мы получим новый смарт-объект, который сохранит внесенные нами изменения:

Шаг 4: Преобразование в смарт-объект. (Увеличенная версия)

Когда мы добавим к анимации набор стилей слоя, эффект будет применяться только к этому объекту:

Стили слоя, добавленные к анимации смарт-объекта

Изменение анимации с помощью корректирующих слоев

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

В приведенной ниже сцене я создал простую анимацию с двумя точками, одна из которых движется мимо другой:

Шаг 1: Анимации из двух точек

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

Шаг 2: Настройки для корректирующего слоя «Карта градиента» (Увеличенная версия)

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

Анимация была раскрашена с помощью корректирующего слоя

Создание естественных эффектов с помощью корректирующих слоев

Теперь, когда мы изучили несколько методов создания анимации в Фотошопе, я хочу объединить некоторые из них, чтобы создать естественный эффект, приведенный ниже:

Естественный эффект анимации

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

Шаг 1: Анимация с двумя размытыми точками

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

Шаг 2: Измените корректирующий слой «Уровни». (Увеличенная версия)

При воспроизведении анимации вы увидите уникальный естественный эффект:

Естественный эффект анимации

Благодарим Вас за то, что уделили внимание этой статье.

Перевод статьи «Creating Advanced Animations In Photoshop Learning Some New Techniques» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: http://www.internet-technologies.ru/articles/sozdanie-prodvinutoy-animacii-v-photoshop-izuchaem-novye-metody.html

Создание усовершенствованной анимации в Photoshop

В то время как анимация в Photoshop – не новая концепция, она, безусловно, прошла долгий путь за последние несколько лет: панель Timeline была пересмотрена, представлены видео слои и возможность создавать keyframe анимацию. Эти дополнения действительно улучшили Photoshop.

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

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

Мы также изучим роль корректирующих слоев, фильтров и смарт-объектов в анимации (и как объединить их для достижения удивительных эффектов).

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

Обзор панели Timeline

Открытие панели Timeline (“Window” → “Timeline”) позволяет выбрать между двумя типами timeline: video и frame. Frame timeline – для покадровой анимации, и может очень ограничивать. Он, как правило, преобразовывает слои в панели Layers в отдельные кадры. Я не буду вдаваться в подробности по этому timeline; я хочу сосредоточиться на video timeline.

Выбор timeline в Photoshop
 

Video Timeline

Video Timeline позволяет создание keyframe анимации – процесс анимации, в котором вы определяете ключевые моменты анимации в timeline, и Photoshop интерпретирует промежуточные кадры, чтобы создать анимацию. Давайте создадим очень простую анимацию, чтобы увидеть, как это работает.

Панель video timeline показывает слой (1) со свойствами слоя (2). Timeline показывает индикатор текущего времени (3) и существующие ключевые точки (4).
 

Как вы, наверное, заметили на картинке выше, video timeline показывает слои в панели Layers. Каждый слой в timeline имеет выпадающую панель, которая представляет свойства слоя (это те свойства, которые могут быть анимированы). Чтобы анимировать свойство слоя, просто нажмите на значок секундомера. Обратите внимание, что keyframe автоматически помещается в индикатор текущего времени.

Значок секундомера выбран для свойства “Position”. Keyframe автоматически добавляется в timeline.
 

Переместите индикатор текущего времени к другой точке в timeline и переместите слой. Опять же, еще один keyframe автоматически будет добавлен к timeline.

Перемещение слоя автоматически добавляет keyframe в место, где находится индикатор текущего времени в timeline.
 

Воспроизведение анимации показывает, как объект на холсте переходит от одной позиции к другой.

Photoshop автоматически создает анимацию между ключевыми кадрами.

Типы слоев

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

Стандартный (пиксельный) слой представляет собой слой, который содержит информацию о пикселях. Это наиболее распространенный (и самый основной) слой в Photoshop. Свойства слоя включают в себя:

  • положение,
  • непрозрачность,
  • стили.

p1-06-layer-standard-opt Стандартный слой в timeline со свойствами слоя.

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

  • слой или положение векторной маски
  • слой или векторная маска

p1-07-layer-mask-opt Слой с маской слоя в timeline.

p1-08-layer_vector-mask-opt Слой с векторной маской в ​​timeline.

Shape layer содержит форму (одного из инструментов формы или Pen tool) или отрезок. Так как формы и отрезки создаются с информацией векторной маски, эти свойства маски появятся в дополнение к другим свойствам слоя. Свойства слоя включают в себя:

  • положение,
  • непрозрачность,
  • стили,
  • положение векторной маски,
  • векторную маску.

Shape layer в timeline со свойствами слоя.
 

Text layer содержит редактируемый текст. Если текст был растрирован, то слой перестанет быть текстовым слоем, а будет представлять собой стандартный слой с пиксельной информацией. Свойства слоя включают в себя:

  • преобразование,
  • непрозрачность,
  • стили,
  • деформация текста.

Text layer в timeline со свойствами слоя.
 

Смарт-объект может содержать любой один или сочетание указанных выше типов слоев. Смарт-объект действует как wrapper для любого слоя, сохраняя первоначальный слой при использовании нового набора свойств. Эти свойства включают в себя:

  • преобразование,
  • непрозрачность,
  • стили.

Text layer в timeline со свойствами слоя.
 

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

Сейчас я хочу отметить два других типа слоев – video layer и 3D layer. Оба этих слоя очень отличаются от других упомянутых типов слоев.

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

Сейчас я не буду вдаваться в подробности этих уникальных слоев. Вы можете увидеть, как оба слоя представлены в timeline ниже:

Группа video layer в timeline со свойствами слоя.
 

3D layer в timeline со свойствами слоя.

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

Свойства слоя

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

Свойство Position позволяет двигаться по осям X и Y. Меняйте положение объекта с помощью Move Tool.

Свойство объекта Position было кадрировано для того, чтобы перемещать мяч вперед и назад вдоль оси х.

Opacity позволяет кадрировать непрозрачность слоя. Opacity можно найти в панели Layers.

Opacity объекта кадрировано на 100% и 0%, чтобы создать исчезающую анимацию.

Свойство Style позволяет кадрировать стили слоя. Получите доступ к стилям слоя, дважды щелкнув на слой в панели Layers.

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

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

Положение маски кадрируется, снимая один слой, раскрывая фоновый слой.

Также возможно включение или отключение слоя или векторной маски. Чтобы включить или отключить маску слоя, перейдите к “Layer” → “Layer Mask” и выберите “Enable” или “Disable”. Для векторных масок, перейдите к “Layer” → “Vector Mask”. Или “Shift + Click ” в панели Layers.

Маска кадрируется, включается и отключается на короткий промежуток времени, в результате чего создается эффект появления анимации.

Характерное для текстовых слоев, свойство Text Warp позволяет кадрировать текстовую деформацию, примененную к текстовому слою. Вы можете получить доступ к списку эффектов текста основы, перейдя в “Type” → “Деформация текста.”

Flag warp был применен к тексту и кадрирован для того, чтобы создать анимацию деформации.

Свойство Transform позволяет кадрировать преобразование к слою. Различные преобразования (например, вращение и масштаб) можно получить, перейдя в “Edit” → “Transform”, или нажав Ctrl + T, чтобы войти в режим Free Transform.

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

Высоких конверсий!

Источник: https://lpgenerator.ru/blog/2016/03/18/sozdanie-usovershenstvovannoj-animacii-v-photoshop/

Урок 36. Анимация в PhotoShop. Часть 1. Покадровая анимация._

Вы узнаете:

  • Как открыть и закрыть и настроить панель анимации.
  • Как добавлять, удалять и редактировать ключевые и кадры анимации.
  • Для чего нужна кнопка Tween (Создание промежуточных кадров).
  • Как сделать простую анимацию рисования звезды.
  • Как настроить интервалы времени для каждого кадра анимации.
  • Как оптимизировать анимацию для уменьшения размера Gif файла.
  • Как импортировать Gif файлы в программу.
  • Как переключаться с покадровой анимации на временную шкалу.

Что такое анимация

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

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

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

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

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

Читайте также:  Объемный текст - уроки фотошоп

Часть 1. Покадровая анимация

Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.

Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значкувнизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.

На панели инструментов выберите инструмент кистьчерного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию(поставьте точку, нажмите Shift и поставьте следующую точку — линия получится прямой).

Создайте второй слой. Начертите следующую линию. Затем третий слой
и еще одну линиюи т. д. У вас должно получиться шесть слоев, включая фоновый слой.

Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку в правой нижней части панели анимации.

Отключите видимость всех слоев кроме фонового слоя в палитре Layers (Слои), нажав на значокслева от миниатюры слоя. Это будет первый кадр нашей анимации.

Нажмите значоквнизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значоки включите видимость второго слоя.

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

В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.

— преобразование в анимацию по временной шкале.

— Tween(Создание промежуточных кадров).

— Duplicate сurrent frame (Создание копии выделенных кадров).

— Кнопки воспроизведения (Как на любом магнитофоне).

Selects First Frame (Выбратьпервыйкадр);Selects Previews Frame (Выбратьпредыдущийкадр);

Play (Запуск анимации);

SelectsNextFrame(Выбрать следующий кадр).

— Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).

Настройка интервалов.

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

Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).

Настройка периодичности повторов.

Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.

Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.

Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.

При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).

Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.

Анимация стилей.

Перейдите в панель анимации. Нажмите на значокDuplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя. Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.

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

Вернитесь к первому кадру анимации и снимите видимость слоя со звездой

в палитре Layers (Слои).

Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.

Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значокDuplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.

Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.

Снова скопируйте слой и еще немного увеличьте масштаб, а также поменяйте стиль. И добавьте кадр анимации. У вас должна получиться примерно такая раскадровка:<\p>

Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.

Оптимизация анимации.

Нажмите на значокв правой верхней части панели анимации. Появится дополнительное меню.

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

Выберите Optimize Animation…(Оптимизировать анимацию). Отметьте галочками оба пункта.BoundingBox (Ограничительная рамка) — обрезает кадры по измененной области по сравнению с предыдущим кадром.

Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.

Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр «Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:

Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,

Donotdispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,

Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.

Сохранение анимации.

Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).

Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер.

Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах.

Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).

Можно сохранить анимацию в формате PSD для последующей доработки или для импорта в Adobe After Effects (программа для создания спецэффектов).

Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.

В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментовили меню File (Файл)— Edit in ImageReady (Перейти в ImageReady ).

Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web).

А также сохранить можно с помощью команды Меню File (Файл) – Export (Экспортировать) – Render Video (Просмотреть видео). Этот пример сохранения мы рассмотрим в разделе Timeline (Временная шкала).

Tween (Создание промежуточных кадров).

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

Создайте новый документ размером 500 на 250 пикселей. Выберите инструментType (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформациютекста также можно анимировать.

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

Добавим перемещение. Выберите инструментMove (Перемещение) и передвиньте текст вниз, за пределы листа. Перейдите в панель анимация и нажмите кнопкуTween (Создать промежуточные кадры).

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

Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.

Оставьте все настройки по умолчанию. Нажмите ОК.

Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.

Открытие GIF-файлов.

В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:

Обязательно установите QuickTime Pro 7.1 или выше.

В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.

Выберите в меню File (Файл) –Import (Импортировать) — Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.

gif и вставить его в поле имя файла или вручную набрать наименование в этом поле.

Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).

Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.

Кнопки унификации слоев анимации.

Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).

Unify layer position ( Унифицировать положение слоя ).

Unify layer visibility ( Унифицировать видимость слоя ).

Unify layer style ( Унифицировать стиль слоя ).

Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. НажмитеPlay (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопкуUnify layer visibility ( Унифицировать видимость слоя ). Появится окно: .

Нажмите Match (Синхронизировать) и снова запустите анимацию. Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.

В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).

Закрытие панели анимации.

Закрыть панель анимации можно разными способами:

  1. Убрать галочку в меню Window (Окно) — Animation (Анимация).
  2. Нажмите на значокв правой верхней части панели анимации. Выберите Close Palette (Закрыть).
  3. Если щелкнуть правой кнопкой мыши в левой верхней части панели анимации, то появится контекстное меню с дополнительными настройками:

Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).

Вопросы:

  1. Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?

— Выделенный кадр будет удален.

— Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.

— Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.

— Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.

  1. У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
    5 промежуточных кадров между последним и первым кадрами?

— Выбрать первый кадр. Нажать кнопкуTween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).

— Выбрать последний кадр. Нажать кнопкуTween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).

— Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).

  1. Для чего нужна оптимизация анимации?

— Для преобразования в анимацию по временной шкале.

— Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

— Для настройки периодичности повторов анимации.

Домашнее задание:

1)Выполнить покадровую анимацию рисования звезды (по уроку).

2) Выполнить покадровую анимацию текста.

Источник: http://www.fotiy.com/urok-36-animaciya-v-photoshop-chast-1-pokadrovaya-animaciya-_/

Ссылка на основную публикацию