Обещанного три года ждут или как сделать gif-анимацию

Feb 21, 2011 20:14

Давно обещала, исправляюсь.

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


*я честно поставила тут гифку, но потом пожалела ваши ленты и трафики))

Под катом четыре гифки и некоторое количество текста с картинками про то, как их сделать.
Рассчитано на тех, кто делает в первый раз, поэтому тем, кто умеет, под катом будет не интересно :)







Ну а теперь по пунктам:

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

2.
Делаем с ними необходимые операции в фотошопе, в данном случае я сконвертировала 4 кадра с электричкой в Adob Сamera Raw, затонировала и сохранила под web.

3.
Открываем все кадры в фотошопе, выбираем первую картинку, а три оставшиеся копируем на нее.
Я много работаю с горячими клавишами, поэтому мне привычнее сделать это так:
Ctrl + A - выделяем,
Ctrl + С - копируем, переключаемся на окошко с первой фотографией и
Ctrl + V - вставляем новый слой.

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

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


6.
Легким движением руки отключаем все слои, кроме нижнего, делается это нажатием на значок "глаза".


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



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

9.
В панели анимации у нас стоят все четыре слоя.
Теперь нам нужно запустить анимацию, а для начала задать время для каждого кадра.
Удерживая клавишу Ctrl, выделяем все 4 кадра. И нажимаем на маленькую черную стрелочку рядом с 0 sec. Задаем для начала 0.3, если окажется слишком быстро, можно поставить время побольше.


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


11.
Осталось сохранить нашу gif-анимацию: Alt + Shift + Ctrl + S или File --> Save for web, дальше выбираем формат гиф, жмем на Save и указываем путь.


12.
Вот что получилось.


Вот как-то так, сама не верю, что наконец сделала это, надеюсь, кто-то что-то понял))

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

Не знаю, какой тег прикрутить к таким постам, м?

Фотографии, tutorial, gif

Previous post Next post
Up