Все, что нужно знать о gif-анимации и о том, как ее создавать. Tutorial для чайников.

Итак, начнем с того, что объяснять я не умею, но постараюсь. Всему училась долго, муторно, вам того не желаю, поэтому сейчас постараюсь в один пост собрать всю необходимую информацию. Я надеюсь, НАДЕЮСЬ, что кому-то этот пост будет полезен!

Не пугайтесь, пост будет большой, но лишь из-за того, что я стараюсь затронуть все и сразу, и самое главное - ПОДРОБНО. Сделать gif самому - не так уж и сложно ^^

Что нужно знать о формате gif?

Graphics Interchange Format - дословно, формат для обмена графикой

Палитра поддерживает не более 256 цветов (из-за чего из анимации частенько получается бяка >< ;), но при этом один из цветов может быть объявлен прозрачным, что, в свою очередь, иногда очень приятно ;)

И самое главное, GIF поддерживает анимационные изображения, за что мы так нуждаемся в нем!

Шаг 1. Скачать и подготовить видео. - самый длительный этап.

Вариант 1 . У вас есть на компьютере готовое видео/фильм.

Теперь внимание на формат. Для дальнейшей работы нам понадобится. mov,. avi,. mpg,. mpeg или. mp4

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

Рекомендую использовать Any Video Converter. Он абсолютно бесплатный, очень удобный, ну и, в общем, лучший в своем роде :D

1. Открываем программу.

2. Перетаскиваем нужный нам файл мышкой в окно программы.

3. Теперь выбираем нужные параметры.

Думаю, понятно, что параметры конвертированного. avi должны совпадать (более менее) с исходными. Будьте готовы. Конвертирование - процесс длительный. Если не готовы ждать, сделайте разрешение поменьше.

Вариант 2 . Скачать с youtube.

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

1. Открываем страницу своего видео.

2. Добавляем 'ss' к адресу как на картинке:

3. Enter

4. Вуаля! Выбираем формат и разрешение из предложенных справа и скачиваем!

Теперь нужно вырезать из видео нужный кусок. Я делаю это быстро при помощи VirtualDub. Здесь все достаточно просто - опять перетаскиваем видео-файл мышкой в окно программы. Стрелочками на клавиатуре выбираем начальный кадр, кликаем , так же выбираем конечный кадр и кликаем . Не увлекайтесь, отрезок не должен быть слишком длинным! Я обычно делаю не более 3х секунд.

После того, как с отрезком определились и обозначили его, идем в File -> Save as AVI…

Шаг 2. Создание простейшей анимации в Adobe Photoshop CS5.

Далее процедура стандартная. File -> Import -> Video Frames to Layers…

В диалоговом окне выбираем свой файл, жмем Load.

Далее ставим нужные галочки и жмем ОК.

Видим, что у нас появился. psd файл с хреновой тучей слоев, если вы пожадничали, и выбрали большой отрезок. У меня их 38. Не так уж и много, но все равно придется удалить кое-какие :)

Далее Window -> Animation. Внизу появляется окошко анимации.

Если не знаете в чем суть анимации, объясняю - поликайте на кадры в окошке анимации и обратите внимание на прыгающий глазик в окошке слоев. Т.е. в каждом кадре виден только один слой, помеченный глазом. "Помечать" таким образом можно любые слои в любом кадре, главное, чтобы вышло в итоге красиво ;)

Идем дальше. Размер моего видео был 1280х720. Естественно, мне такая большая анимация не нужна. Также мне не нужна Эми Адамс, по моей задумке в кадре только Ли Пейс. Поэтому берем Crop Tool . Я люблю заранее задавать размер будущему изображению, поэтому в настройках выставляю то, что мне нужно. Чтобы сделать правильный кроп, есть определенные нюансы, но нам пока не нужно забивать голову этой информацией.

Выделяем нужную область изображения - и, вуаля, вот он! Единственный и неповторимый за роялем ^^ (в последствии картинка немного изменится, потому что я изменю кроп)

Разбираемся с лишними кадрами - Зажатый Ctrl + клики на ненужных кадрах (КАДРАХ, не слоях). Жмем кнопочку с мусорным ведром и все, мы почистили картинку от ненужных вещей. Я удалила первые 8 кадров, поэтому удалю и 8 первых теперь уже не нужных слоев.

Далее выбираем все кадры Select All Frames:

И идем выставлять время между кадрами, для этого кликаем внизу любого кадра, в месте с цифрами и стрелочкой. Выбираем Other.. И ставим, что нам нравится. Я обычно выбираю 0,1. Я люблю это время, вам может понравиться другое, но не забывайте, что это все же не видео и нам не нужен нулевой промежуток - анимация будет слишком быстрой. Большинство предпочитает все же более медленный вариант, а не "шоу Бенни Хилла". Так как в начале при импорте видео мы убрали каждый второй кадр, щелкнув на галочку Limit to every 2 frames, то с промежутком в 0,1 секунду анимация о скорости будет примерно совпадать с видео. Если действие в видео слишком быстрое, надо промежуток поставить побольше, чтобы можно было успеть разглядеть происходящее. В моем случае в видео Ли поет, никаого быстрого действия нет, поэтому я ставлю 0,1.

Итак, простейшая анимация готова, но вот почему-то она выглядит неаппетитно.

Шаг 3. Наводим красоту.

Для начала, нужно добавить резкости. Конечно, можно обрабатывать каждый кадр, но это муторно. Также можно просто добавлять резкость через Filters. Но там придется комбинировать действия. Для того, чтобы делать несколько одинаовых действий над картинкой за 1 раз, существуют фотошоп-экшны. Скачиваем вот этот action, сделанный какой-то очень доброй девушкойй xD

Перетаскием этот файл в окно фш. Открываем вкладку actions. Находим папку со скачанным нами экшном. Убедились, что нужная нам папка на месте. В ней 3 экшна, мне больше нравится 3-ий.

Далее небольшая манипуляция с изображением. Как раньше, выбираем все кадры анимации. Затем кликаем на маленькую кнопочку . Убедились, что что-то поменялось и все слои помечены глазками. Далее щелкаем правой кнопкой на любом слое - Select similar layers. Все слои выделились.

Filter -> Convert for smart filters, ОК.

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

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

(Сама картинка немного изменилась, но это потому, что я кроп немного поменяла в процессе)

В окне анимации нажимаем на Play (убедиться, что все двигается). Будьте готовы к тому, что кадры будут сменяться медленнее, чем в итоге.

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

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

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

Ура, Ли стал ярче, колоритней, контрастней!

Дальше можно добавить текст. Тамблеровцы обычно используют Calibri Bold Italic с небольшой тенью и обрамлением.

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

Итак, File -> Save for Web & Devices. В открывшемся окне делаем настройки точь-в-точь, как у меня. И упась Бог вам забыть про Loop - forever ! Про то, что нужно установить 256 цветов - я даже не упоминала, это естественно.

Сохраняем и смотрим результат!

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

И кстати, да, я допустила ошибку в тексте анимации >< Иногда кажется, что у меня дислексия.

Здесь я не очень много писала про кроп, колоризации и наложение текста. Если будет желание, напишу позже :)