Как нарисовать анимацию в фотошопе cs6. Создание GIF-анимации из видео в Photoshop

Доброго вечера, дорогие подписчики и просто читатели моего блога! Готовы ли Вы узнать о том, как “оживить” свою картинку? И не с помощью магии, а с помощью всего на всего нашего любимого фотошопа! Как же долго я откладывал этот урок, сам не понимая почему. Ведь это основы фотошопа! Но теперь я решился исправиться.

И исправиться настолько, что в конце видео Ваш ждет еще и видео урок о том, как делать анимацию в фотошопе .

Я долго не писал уроки по фотошопу, и у меня были на то причины. Ведь я заканчивал свой рассказ “ ”. Милости прошу прочитать его, и высказать свое мнение прямо в комментариях!

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

У нас есть Чиполлино, и нам нужно сделать так, чтобы он махал нам ручкой.

Шаг 1. Для начала нужно “включить” анимацию в фотошопе. Для этого заходим “Окно”->”Анимация” . Может еще быть написано “Шкала времени” .

Шаг 2. Для того чтобы рука шевелилась, нам нужно вырезать её и ставить в разные положения. Для вырезания руки я, лично, использую “Магнитное лассо” . Делаем копию основного (Ctrl+J ) и работаем с копией. Оригинал не трогаем.

Выделяем аккуратно руку и вырезаем её!

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

Шаг 4. Этот шаг необязательный, но лучше используя инструмент “Ластик” немного подправить руку, сделав её более природной. Тяжело это объяснить, конечно на словах. Если поняли для чего мы используем ластик, то выполняйте этот шаг, если все же не поймете, можете пропустить. Это не принципиально, так как нам самое главное научиться создавать простую анимацию!

Шаг 5. Теперь работаем с кадрами. В каждом кадре включаем только те слои, которые нам нужны. Например, в 1 кадре нам нужен наш оригинал, а в нашем случаи “Слой 0” .

Теперь создаем новый кадр:

И уже в новом кадре включаем другие слои. То есть, наш “Слой 0 копия” и “Слой 1” , то есть, другое положение руки. Надеюсь, алгоритм понятен Вам, дорогие читатели.

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

Шаг 7. Сохраняем нашу . Не зря я включил этот шаг в свой урок, так как сохранение гиф-анимации происходит немного по-другому, чем просто изображение.

Выбираем формат (по дефолту стоит GIF) и сохраняем.

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

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

Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.

Для начала необходимо запустить Photoshop, перейти в “Файл” > “Импортировать” > “Кадры видео в слои” и выбрать необходимую видеозапись.

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

Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) – это простой способ уменьшить размер, не слишком сильно влияя на качество.

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

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

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

В итоге должно получиться что-то вроде этого:

Создание GIF анимации из серии статических изображений

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

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

1. Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
2. Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение – это часть будущей анимации.

Теперь вы готовы начать создавать анимацию.

Анимирование статических изображений

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

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

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

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

Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.

Завершение

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

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

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

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

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

Усовершенствование анимации путём добавления промежуточных кадров

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

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

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

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

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

В этой статье будет рассказано, как сделать анимацию в Фотошопе CS6.

Создается анимация на Шкале времени , расположенной в нижней части интерфейса программы.

Если у Вас шкала отсутствует, то вызвать ее можно при помощи меню «Окно» .

Сворачивается шкала правым кликом по шапке окна и выбором соответствующего пункта контекстного меню.

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

Для анимации я подготовил вот такое изображение:

Это логотип нашего сайта и надпись, расположенные на разных слоях. К слоям применены стили, но это к уроку не относится.

Открываем шкалу времени и нажимаем кнопку с надписью «Создать временную шкалу для видео» , которая находится в центре.

Видим следующее:

Это оба наши слоя (кроме фона), которые помещены на Шкалу времени.

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

Займемся логотипом.

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

Затем кликаем по секундомеру возле слова «Непозр.» . На шкале появится ключевой кадр или просто «ключ».

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

Снова идем в палитру слоев и на этот раз поднимаем непрозрачность до 100%.

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

С лого мы разобрались.

Для появления текста слева направо придется немного схитрить.

Создаем новый слой в палитре слоев и заливаем его белым цветом.

Затем инструментом «Перемещение» сдвигаем слой так, чтобы левый его край приходился на начало текста.

Дорожку с белым слоем перемещаем в начало шкалы.

Затем передвигаем ползунок на шкале к последнему ключевому кадру, а затем еще немного вправо.

Открываем свойства дорожки с белым слоем (треугольник).

Кликаем по секундомеру рядом со словом «Позиция» , создавая ключ. Это будет начальная позиция слоя.

Затем передвигаем ползунок вправо и создаем еще один ключ.

Теперь берем инструмент «Перемещение» и двигаем слой вправо до тех пор, пока не откроется весь текст.

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

Для того чтобы сделать гифку в Фотошопе требуется совершить еще один шаг – обрезку клипа.

Идем в самый конец дорожек, беремся за край одной из них и тянем влево.

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

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

Если скорость анимации не устраивает, то можно поперемещать ключи и увеличить длину дорожек. Моя шкала:

Идем в меню «Файл» и находим пункт «Сохранить для Web» .

В настройках выбираем GIF и в параметрах повторов выставляем «Постоянно» .

Файлы GIF воспроизводятся только в браузерах или специализированных программах. Стандартные средства просмотра изображений анимации не воспроизводят.

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

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

Я решил показать вам как можно сделать приятный сюрприз вашим любимым в уроке «Анимация в фотошопе CS6: хрустальный шар». Мы в очередной раз посмотрим как работает анимация в фотошопе, делать мы будем хрустальный шар с вашей любимой фотографией.

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

Приступаем к выполнению урока

Готовим основу

Открываем фото хрустального шара — нажимаем Ctrl+O, выбираем место на компьютере, где находится картинка, нажимаем «Открыть».

Заходим в палитру слоев — клавиша F7.

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

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

На панели инструментов слева выбираем инструмент перо Pen Tool(P).

Обводим хрустальную часть нашего шара по контуру, при этом, не отпуская мыши, вытягивайте направляющие для каждой опорной точки, чтобы в дальнейшем было удобнее редактировать контур. Если сразу не получилось создать идеальный контур, выберите инструмент Direct Selection Tool (А)(светлая стрелка), выделяйте по одной точки, которые хотите поправить и регулируйте положение контура с помощью касательных.

После того, как закончите создавать контур, щелкните правой кнопкой по выделению и выберите в выпадающем меню «Make Selection «(Образовать выделенную область), радиус ставим 0. После этого контур превратится в мерцающий пунктир, это значит что мы выделили часть изображения и можем теперь работать с выделением.

Теперь выберите на панели инструментов любой инструмент выделения, например, Lasso Tool(L) или Rectangular Marquee Tool(M).

Щелкните правой кнопкой по выделению, в появившемся меню выберите «Layer via cut»(Вырезать на новый слой).

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

Добавляем фотографию

Теперь открываем нашу фотографию — Ctrl+O -»Открыть».

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

На самом верху панели инструментов выбираем черную стрелку Move Tool (V).

Делаем активным окно с фотографией, щелкнув по нему. Перетягиваем фотографию в окно с хрустальным шаром.

Сейчас фотография перекрывает картинку с шаром.

Чтобы аккуратно вписать фото в хрустальный шар, поместим курсор в палитре слоев между слоем с фото(3слой) и слоем с верхушкой шара(2слой), зажимаем Alt, курсор поменяет вид, щелкаем мышкой между слоями.

Если вы все сделали правильно, верхушка шара станет маской для вашей фотографии, при этом фото не будет выходить за пределы слоя, который является для него маской. Немного уменьшим непрозрачность слоя с фото, установив значение Opacity в верху палитры слоев на 80%.

Берем инструмент ластик Eraser Tool(E), выбираем стандартную круглую кисть с размытыми краями большого диаметра, чтобы было удобно работать (я взял 70px), немного проходимся по краю фото, чтобы органичнее вписать фото в шар.

Рисуем снег

Создаем новый слой — Ctrl+Shift+N, либо щелкаем по иконке нового слоя внизу панели слоев.

На новом слое рисуем белым цветом снег специальной Brush Tool(B).

Если на лицах или каких-то значимых элементах окажется слишком много снега, пройдитесь ластиком Eraser Tool(E), такой же кистью в этих местах. Также пройдитесь ластиком по краям шара.

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

Сделайте дубликат слоя со снегом — Ctrl+J, примените к дубликату слоя маску — зажмите Alt и кликните между слоями.

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

Нажимаем Ctrl+T, приближаем мышку к угловому маркеру, когда стрелка примет круглый двухсторонний вид, поверните немного снег в любую сторону.

После того, как повернете снег, возможно, он опять попадет на лица, тогда просто сотрите ластиком (E) лишнее.

Все готово.

Анимируем снег

Теперь приступаем непосредственно к анимации в фотошопе CS6.

Открываем окно анимации — заходим в меню «Window» - «Timeline» (Окно — Шкала времени).

Сейчас на временной шкале есть один кадр, он содержит все видимые в данный момент слои.

Давайте временно выключим видимость последнего слоя с дубликатом снега (щелкните по глазу слева от миниатюры слоя в палитре слоев «Layers»).

Таким образом, в первом кадре у нас будут:

1 слой — основа шара,

2 слой -верхушка шара,

3-слой — фото,

и 4 слой -снег.

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

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

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

Схематично это будет выглядеть так: А Б А Б, где А — кадр со снегом, Б — кадр с дубликатом снега, повернутый.

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

Выделяем теперь второй кадр, создаем его дубликат, щелкнув по иконке нового кадра(А Б Б А). Переносим только что созданный кадр на последнее, 4 место. Теперь кадры у нас чередуются.

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

Выделяем первый кадр на шкале, зажимаем Shift, щелкаем по последнему кадру — выделятся все кадры.

Ставим продолжительность каждого кадра 0.2сек, количество повторов анимации — «Постоянно»(Forever).

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

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

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

Вот что получилось в результате урока:

Выбираем формат файла для сохранения GIF, нажимаем «Сохранить…», выбираем директорию, куда будем сохранять, жмем опять «Сохранить».

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

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

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

Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects.

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

C чего начать

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

Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который затем я анимировал.

Шкала времени

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

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

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

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

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

Промежуточные кадры

В Photoshop элемент можно анимировать несколькими способами:

• Нарисовать несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
• Вставить промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Необходимые кадры между этими состояниями добавит сам Photoshop. Этот способ подойдет, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.

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

Поэтому я добавлю еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

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

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же - сдвигаю влево, пока он не исчезнет.

Во втором кадре возвращаю текст назад.

Отлично. Теперь вставим промежуточные кадры между ключевыми.

Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».

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

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

Первая часть анимации готова. Теперь ее можно воспроизвести и посмотреть, что получилось.

Нажимаю на кнопку воспроизведения на «Шкале времени».

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

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

Покадровая анимация вручную

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

Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».

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

Теперь можно запустить анимацию и посмотреть результат.

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

Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.

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

Сохранение и экспорт

В окне предпросмотра можно еще раз просмотреть анимацию и изменить настройки сохранения.

По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.

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

Заключение

В Photoshop просто создавать короткие интерактивные баннеры и презентации, анимировать отдельные элементы. Удобно экспериментировать с результатом.