Хотите себе такую же? Тогда начинаем.


Начать нужно с простого - добыть видео. Если вы уже нашли какой-то прикольный кусочек из любимого видео, то нужно его загрузить на компьютер. Если у вас уже на компе - дело сделано. Но если вы нашли ролик на ТыТрубе, то дёрнуть видео можно на сервисе http://www.videosaver.ru/ . Просто копируете из адресной строки ЮТуба адрес с вашим роликом и вставляете в форму на приведённом выше сайте. Сохраняете на комп.

Следующая проблема: как достать кадры из видео? С помощью вашего видеоплейера. Лично я пользуюсь BS Player, на сегодняшний день он если не самый, то один из самых лучших проигрывателей в нете. К тому же, там есть отличная функция создания съёмки кадра. Нужно нажать на кнопку Р (анлгицкую, естесна) и кадр сохранится на компе в виде картинки JPG. А если вы зажмёте кнопку Р и будете удерживать её в течении какого-то времени, то плеер сохранит вам на комп все кадры, а это примерно 10 штук в секунду. Словом, посмотрите, умеет ли ваш видеоплейер сохранять скрины. Если нет - то качайте правильный плеер или ищите иной способ.

Так. мы получили необходимые кадры в виде картинок, теперь открываем папку, в случае с BS Player-ом по дефолту это папка C:\Program Files\Webteh\BSplayer Там просматриваем всё, что нам нужно. Дело в том, что использовать абсолютно все кадры не имеет смысла, потому что уверен, что будет много повторяющихся, а зачем ставить одинаковые кадры, когда можно вставить один и продлить его на временной линейке? Вот именно, что незачем. Выбираем самые необходимые с зажатой кнопкой Ctrl и перетаскиваем в Фотошоп. Нужно отметить, что когда плеер создаёт картинки, они их пронумеровывает, таким образом они у нас изначально упорядочены.

Когда перетащили файлы в ФШ, то у нас есть примерно такая картина:

Наша следующая задача - сделать ОДНУ картинку, на которой есть много слоёв с нашей будущей анимацией. Поэтому берём самую последнюю картинку за основу, выделяем инструмент Move Tool (V) и перетаскиваем по очереди все остальные картинки на основную, создавая новый слой. Тут вы пойдте в обратном порядке, перетаскиваете картинку и тут же закрываете её. В итоге у нас будет один файл с множеством слоёв: 

Потом нужно выровнять слои. Выделяем все слои в панели слоёв, кликая на каждом с зажатой кнопкой Ctrl, и выравниваем все слои. Для этого откроем Layer>Left Edges, тем самым выравним слои по вертикали, потом Layer>Top Edges и выравним по горизонтали.

Итак, у нас есть выровненные слои. Теперь пора взяться за анимацию. Если у вас она ещё не открыта, то открываем её:

Если у вас панель открылась в режиме Таймлайна, то переключитесь на фреймы (на картинке ниже кнопка указана красным нижним кружком). Потом нужно вставить все слои в анимацию. Нажимаете на кнопку свойств анимации (на картинке ниже кнопка указана красным верхним кружком) и выбираете Make Frames From Layers

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

Далее. По дефолту время на каждый кадр даётся 0 с. Этого маловато, поэтому выделяем все кадры разом:

... и на каком-нить одном кадре выбираете время 0,1 с.

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

Ну дальше смотрите сами - какие-то кадры подлиннее, какие-то покороче, какие-то повторить, продублировать.... И в самом конце вы сохраните как обычную ГИФку в меню File - Save For Web & Devices, где можно проконтролировать и вес будущей гифки, и её цвет и всё остальное...

Я взял вот такое фото    

Дублируем слой, нажимая комбинацию клавиш Сtrl+J

К слою "задний план" применяем такие параметры. 
Заходим меню Изображение - Уровни (Ctrl + L)

Серый ползунок передвигаем влево до значения 2,37

Далее переходим на верхний слой, снова нажимаем Ctrl + L, там двигаем серый ползунок вправо на 0,42

Переходим в меню Окно и открываем палитру Анимация.

Прячем слой1.

В окне анимации дублируем фрейм.

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

В окне анимация устанавливаем цикл "Всегда".
Нажимаем на кнопку Play и смотрим, как проигрывается анимация. 

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

Затем переходим в меню Файл - Сохранить для web 
Устанавливаем формат GIF, 256 цветов.

И у нас готова анимация!

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

2. На данном этапе нам нужно оживить статичное изображение. Для этого выполним следующие действия: File (файл)->Import (импорт)->Folder is Frames (папка как кадры). Указываем папку, в которую мы сохранили два своих изображения. В результате в программе появляется линия «Анимация». В принципе на этом процесс «оживления» и заканчивается. Остается только сохранить получившийся результат.

По желанию вы можете доработать свое творение. Для этого задается нужный размер аватары: Image (изображение)->ImageSize(размер изображения)и изменяется частота смены анимации. По умолчанию, она равна 0 и в движении все это смотрится крайне неприятно. Лучшим вариантом будет установление частоты смены кадров в районе от 0,5 до 1 сек. Кроме того, если изображений несколько, вы можете задавать скорость анимации для каждого из них.

Получившийся результат можно просмотреть, нажав кнопку проигрывания анимации. Большое значение имеет сохранение получившейся движущейся картинки. Правильные действия таковы: переходим на вкладку Optimized (Оптимизация) и выполняем следующие команды File (Файл) –> SaveOptimized as…(сохранить оптимизированный как…) и затем сохраняем нашу аватарку.