engine9
@engine9
Разрабатываю интерфейсы и трехмерные презентации.

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

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

0fb11acf43ed48c484d735296bd35043.gif

Если взглянуть на работы мастеров, то там все супер: https://dribbble.com/shots/905215-COVERT-INBOX
  • Вопрос задан
  • 19040 просмотров
Решения вопроса 1
engine9
@engine9 Автор вопроса
Разрабатываю интерфейсы и трехмерные презентации.
После долгих изысканий сам нашел решение.

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

3553cfa059cb4b1292f43969d7aed5cf.jpg921566705a314645ae4261537f971cf5.gif
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
@Terlenko
Попробуй взять поновее просто фотошоп и там работать
Ответ написан
Комментировать
1)Пытайся сделать размер gif'ки меньше. Меньше объем.
2)Добавляй немного смазанности движения, если элемент очень быстро двигается. Довольно часто это делает анимацию более живой.
3)Обязательно задавай интервал между кадрами. Минимальны интервал в фотошопе 0.1сек, так что частоты 10кадров/сек более чем бостаточно.
4)Избегай лишний кадров. Повторяющийся кадр - лишний кадр- лишний вес.
5)Используй минимальное количество цветов. Меньше цветов - меньше объем.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Ну значит плохо пытаетесь, в PS ее и делают.
Ответ написан
@vialka
веб-мастер
Agmioli
@Agmioli
Тестировщик и ииллюстратор
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", и нажимаем на "Сохранить".
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы