Как и в какой программе создать плавную gif-анимацию?

Question

[Андрей Ларин]

Пытаюсь собрать в PS CS6 из кадров анимацию и получются лаги. Во всех браузерах гифка так или иначе дергается.
Пробовал разные параметры сохранения но не пришел к удовлетворительному результату.



Если взглянуть на работы мастеров, то там все супер: https://dribbble.com/shots/905215-COVERT-INBOX

Answer 1

[Андрей Ларин]

После долгих изысканий сам нашел решение.

1) Качаем ставим гимп 2.8
2) Жмём Open as layers выбираем файлы секвенции
3) Делаем экспорт в GIF и выбираем параметры как на скрине. При слишком маленьком значении задержки гимп сам дописывает значение 100 мс не говоря об этом!

Answer 2

[Terlenko]

Попробуй взять поновее просто фотошоп и там работать

Answer 3

[Дмитрий Шалимов]

1)Пытайся сделать размер gif'ки меньше. Меньше объем.
2)Добавляй немного смазанности движения, если элемент очень быстро двигается. Довольно часто это делает анимацию более живой.
3)Обязательно задавай интервал между кадрами. Минимальны интервал в фотошопе 0.1сек, так что частоты 10кадров/сек более чем бостаточно.
4)Избегай лишний кадров. Повторяющийся кадр - лишний кадр- лишний вес.
5)Используй минимальное количество цветов. Меньше цветов - меньше объем.

Comments

[Андрей Ларин]

Гляньте, я ниже собрал гифку из тех же кадров.

[Дмитрий Шалимов]

Смотрим и удивляемся, как в фотошопе была сделана идентичная гифка



Признаю свою ошибку, 10 кадров в секунду не хватает. Ставим промежуток в кадрах 0.4 сек и все плавно.

p.s. так же можно каждые 25 кадров вставлять сообщения : "продай мне свою душу" xD

[Андрей Ларин]

В ФШ дизеринг лучше. Круто получилось.

[Монти Пайтон]

Дмитрий Шалимов:

Смотрим и удивляемся, как в фотошопе была сделана идентичная гифка

в PS CS6?
Как вы так лихо почти в 3 раза уменьшили вес файла?

[Дмитрий Шалимов]

Ostin1, да специально вроде ничего не делал для этого, либо фотошоп постарался, либо сам на рефлексах исхитрился. В основном можно понизить цветность и все ок становится. И версия фотошопа особой роли не играет, сейчас работаю с CC 2017.2 тогда работал тоже с последней, но умеет программа все это делать с CS2-CS3.

Answer 4

[Юрий Лобанов]

Ну значит плохо пытаетесь, в PS ее и делают.

Comments

[Андрей Ларин]

Что значит "плохо пытаетесь?" мне надо руки мылом мыть перед запуском? К чему этот мусорная реплика?

[Юрий Лобанов]

@engine9 не умеете, торопитесь, не хватает терпения. Так понятнее? Не нужно хамить, будьте спокойнее. Мусорным является подобный вопрос, из разряда - вот профи умеют делать, а я нет, видимо это инструмент у меня плохой.

[Андрей Ларин]

Друг, вы опять говорите ерунду, каким образом я усердием (не усердием) могу повлиять на алгоритмы формирования gif файла которые накодили индусы для adobe.

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

[Юрий Лобанов]

@engine9 вот именно потому, что Вы полагаетесь на алгоритмы фотошопа - у Вас gif и лагает. Уверяю Вас, и в cs3 можно сделать плавную анимацию, достаточным количеством кадров и усердием. Вы когда смотрите раскадровку готового gif - у Вас там кадры местами поменяны что ли? При чем тут алгоритмы?

[Андрей Ларин]

В исходной секвенции всё плавно и гладко, я уже об этом упоминал, видео (например mpeg) из этой же секвенции статичных кадров проигрывается идеально.
Вопрос был конкретно четкий, какой инструмент использовать для собирания гифки, потому что фотошоп с ЛЮБЫМИ параметрами выходного файла дает дергания.

[Монти Пайтон]

Юрий Лобанов:

Уверяю Вас, и в cs3 можно сделать плавную анимацию

Не уверяйте, сделайте, покажите как сделали

Answer 5

[vialka]

В AE

Comments

[Дмитрий Шалимов]

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

Answer 6

[Милан Агмиоли]

1. Создаем анимацию в программе Adobe After Effects, в которой можно делать очень плавные анимации.

2. Выбираем в верхнем меню "Composition" - "Add to Render Queue" ,далее в настройках рендеринга вместо формата AVI (стоит по умолчанию), выбираем пункт "Photoshop Sequence".
В появившемся окне указываете, куда сохранить-это должна быть отдельная папка, т.к файлов будет много.
Нажимаем кнопку Render.

3. Открываем Adobe Photoshop. В верхнем меню "Файл" выбираем- "Открыть как". Заходим в папку с сохраненными ранее файлами-кадрами, выбираем самый последний файл(по нумерации в конце названия файла).
Ставим галочку "Последовательность изображений" и нажимаем кнопку "Открыть".

4. В появившемся окне устанавливаем нужную частоту кадров. Можно оставить как было в проекте After Effects.Но можно и немного уменьшить значение частоты кадров.
Чем больше частота кадров, тем плавнее и качественнее будет выглядеть Gif анимация, но она будет и больше весить, а значит- дольше грузиться в веб-браузере.
Нажимаем кнопку "ОК".

5. Переключаем рабочую среду на пункт- "Движение", чтобы проиграть видео, если хотите проверить его.

6. В верхнем меню выбираем пункт -"Файл" - "Экспортировать" - "Сохранить для Web". Далее в появившемся окне выбираем формат "gif", и нажимаем на "Сохранить".