Интернет. Программы. Игры. Операционные системы. Антивирусы

Сохранение гиф анимации в фотошопе cs6. Анимированный GIF в Photoshop сохраняется только в виде HTML-файла

Тип сжатия

Выбирает компрессор видеосигнала (кодек) для сжатия видео.

Кадров в секунду

Задает число отдельных изображений, отображающихся за одну секунду. Стандартный видеоформат NTSC имеет частоту кадров 29,97 кадр/сек. Европейский видеоформат PAL имеет частоту кадров 25 кадр/сек. Стандарт для кинофильмов - 24 кадр/сек. Фильм QuickTime иногда создается с более низкой частотой кадров, чтобы снизить пропускную способность и нагрузку на процессор.

Фильмы с более высокой частотой кадров лучше передают движение, но имеют большой размер файла. Если выбрать частоту кадров меньше текущей, кадры удаляются. Если выбрать частоту кадров больше текущей, существующие кадры дублируются (не рекомендуется, поскольку в этом случае увеличивается размер файла без повышения качества). В большинстве случаев ваш ролик будет выглядеть лучше, если вы выберете число, на которое его частота кадров делится без остатка. Например, если частота источника составляет 30 кадров в секунду, необходимо выбрать частоту кадров 10 или 15. Не следует выбирать частоту, превышающую частоту исходного материала.

Частота ключевых кадров

Указывает частоту ключевых кадров. Увеличение частоты ключевых кадров (меньшее число) улучшает качество видео, но увеличивает размер файла. Некоторые кодеки автоматически вставляют дополнительные ключевые кадры, если изображение слишком сильно изменилось по сравнению с предыдущим кадром. Обычно достаточно одного ключевого кадра на каждые 5 секунд (умножьте количество кадров в секунду на 5). Если создается файл для потоковой передачи данных по протоколу RTSP, и возникают сомнения по поводу надежности связи, можно увеличить частоту ключевых кадров до одного ключевого кадра на каждую секунду или две секунды.

Ограничить скорость передачи данных до

Задает значение скорости передачи данных при воспроизведении (в килобитах в секунду). Большее значение скорости передачи данных обеспечивает более высокое качество воспроизведения, однако не рекомендуется превышать значение предельной пропускной способности.

Глубина

Задает количество цветов в экспортируемом видео. Это меню недоступно, если выбранный кодек поддерживает только одну глубину цвета.

Качество

Если параметр доступен, перетащите ползунок или введите значение, чтобы настроить качество экспортируемого видео, и, соответственно, размер файла. При использовании одного и того же кодека для захвата и экспорта и при наличии отрендеренной последовательности (для предварительного просмотра) можно сократить время рендеринга. Для этого настройки качества экспорта и исходные настройки качества захвата должны совпадать. Если качество превышает исходный уровень качества записи, то качество создаваемого видеоряда не улучшится, а время обработки может увеличиться.

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

Как сохранить в формате GIF

Примечание: формат gif доступен только, если изображения в 8 бит/канал. (гиф поддерживает исключительно 8 битный/канал имейте это виду).

Для преобразования изображения в 8 бит/канал зайдите во вкладку Изображение -> Режим -> 8 бит/канал.

Для сохранения анимации выберите Файл -> Сохранить для web -> Формат оптимизированного файла (GIF).

Обязательно установите галочку рядом с Преобразовать в sRGB, это позволит сохранить именно те цвета которые вы использовали, для отображения в браузере.

Примечание: в большинстве случаев (90%) устанавливают "постоянно".

Перед нами большое диалоговое окно. Давайте некоторые из параметров рассмотрим подробнее.

Цвета

Обратите внимание на данный параметр (максимальное количество цветов в цветовой таблице, по умолчанию он установлено 64. Данное число считается средним (типо золотая середина) значением, и отлично подходит практически для всего.

Например для черно-белой анимации я считаю значение 64 излишни большое. Для ч/б анимации устанавливаю значение 16, мне кажется оно идеальным. А для анимации например каких либо web элементов (кнопок, баннеров, аватаров и пр.) среднее значение бывает слишком мало, что приводить к неприятным разводам. давайте рассмотрим на примере:

| Вы увидели хоть малейшую разницу?

Единственное что хочу заметить, на больших анимациях варьируется размер исходного файла.

А теперь следующий пример, на web кнопке

Сохранено gif со значением цвета 64 (размер 18,9 kb)

Сохранено gif со значением цвета 256 (размер 37,9 kb)

Чувствуется разница правда? и в качестве и размере. Всегда приходится чем то жертвовать, в моем случае я отдаю приоритеты "Качеству" лишние 19 кб меня так не пугают, в отличии от качества.

Чересстрочно

Данный параметр не менее важен как и все остальные. Если сохранить анимацию с активной галочкой Чересстрочно, в браузере анимация будет идти вместе с загрузкой изображения. А если сохранять не используя данный параметр, анимация будет показана только после полной загрузки изображения. Использование данного параметра сокращает время загрузки, однако значительно влияет на размер исходного файла.

Как правило чересстрочно активна по умолчанию, использовать ее или нет решайте сами.

Давайте повторим основные моменты сохранения gif анимации в фотошопе:
  • Выберите Файл -> Сохранить для web -> GIF
  • Установить галочку возле sRGB
  • Установить параметры повторов (постоянно, однократно, другое)
  • Нажать кнопку "Сохранить"

Есть пара вопросов:

  1. Вы используете "Чересстрочно" ?
  2. Для вас важнее качество или размер?

После того как мы сделали анимацию в Фотошоп, возникает вопрос - как эту красоту сохранить?

Если Вы работаете в PhotoshopCS3 1. Заходим Файл - Сохранить для Web и устройств... (или Ctrl+Shift+Alt+S)

2. В появившемся окне устанавливаем нужное количество цветов используемых в изображении (самое большее 256), здесь - же устанавливаем формат изображения Gif. В этом - же окне Вы можете еще раз просмотреть свою анимацию (убедится, что все работает нормально).

3. После того как все параметры установлены, нажимаем кнопку Сохранить. У нас появится другое окно "Сохранить оптимизированный как". В строке Папка указываем путь к месту куда будем сохранять нашу анимацию. В строке Имя файла соответствено присваем имя анимации. В строке Тип файла выбираем "Только изображения (*.gif)" в случае если Вам нужна только анимированная картинка, и "HTML и изображения(*.html)" - если Вам нужна не только картинка, но и HTML код (к примеру для вставки на сайт).

Если Вы сохраняете анимацию через Image Ready

1. После того как Вы создали анимацию в Photoshop, нажмите на кнопку "Перейти в Image Ready", которая находится в самом низу панели инструментов. У нас откроется программа Image Ready.

2. В правой части рабочего окна находится палитра Оптимизация, на этой палитре устанавливаем нужное количество цветов используемых в изображении (самое большее 256), здесь - же устанавливаем формат изображения Gif. У меня английская версия, поэтому картинки будут с английскими надписями, но думаю все равно будет понятно.

3. После того как установлены нужные параметры на палитре Оптимизация идем в меню Файл - Сохранить оптимизированный как...(или Ctrl+Shift+Alt+S).

4. Появится одноименное окно "Сохранить оптимизированный как". В строке Папка указываем путь к месту куда будем сохранять нашу анимацию. В строке Имя файла соответствено присваем имя анимации. В строке Тип файла выбираем "Только изображения (*.gif)" в случае если Вам нужна только анимированная картинка, и "HTML и изображения(*.html)" - если Вам нужна не только картинка, но и HTML код (к примеру для вставки на сайт).

Я создал анимированный баннер в Photoshop CC и должен сохранить его в формате GIF.

Я использовал Timeline / Motion. Когда я "Сохранить для Интернета", во втором поле сверху установлен "GIF".

И да, у меня установлен цикл "Навсегда".

Не могли бы вы сделать скриншот настроек сохранения? Когда я сохраняю как HTML и изображения, я получаю HTML-страницу и папку с изображениями, которая содержит один анимированный GIF цикл навсегда.

мужественный

Похоже, что вы можете что-то настраивать неправильно, это определенно поможет увидеть, какие настройки вы используете. Я только что создал циклический GIF-файл, сохраненный как «Только изображения», и он отлично работает для меня. Один единственный файл.gif, который при открытии в моем браузере зацикливается.

Ответы

джастин

Чтобы ответить на ваш главный вопрос: да, вы можете сохранить анимацию в виде картинки из Photoshop CC. Вам не нужно будет перестраивать его во Flash.

Похоже на то, что у вас могут быть какие-то неверно сконфигурированные настройки, или ваша анимация построена неправильно. Размещение более подробной информации поможет. Я пытался воспроизвести вашу проблему и не могу придумать то, что вы описали. А пока вот процесс создания GIF из Photoshop CC:

Сначала настройте анимацию вашего кадра или временной шкалы (любой тип анимации должен работать, хотя я предпочитаю управление кадрами при создании GIF). Затем выберите « File > « Export > « Save for Web (Legacy)…

Выберите Save и выберите параметры сохранения. Нет необходимости выбирать любой из параметров HTML, если вы просто экспортируете анимацию в GIF.

Поскольку создание анимации и ее экспорт в виде файла.gif с помощью Photoshop включает несколько различных этапов, важно проверить воспроизведение анимации на протяжении всего процесса.

Непрерывное тестирование не только гарантирует, что вы получите желаемые результаты в окончательном файле, но также поможет вам узнать, какую часть процесса следует устранить, если что-то не так.

Нехил Васувал

Сохраните это как есть. Он будет выводить активы, одним из которых будет GIF. Просто проверьте, где файлы сохраняются.

Kurt

И почему и как это можно доказать? Для правильного ответа ваш комментарий слишком короткий! Пожалуйста, объясните лучше и добро пожаловать в GD.SE!

Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация — это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.

Существует достаточно большое количество сайтов, на которых можно найти уже готовые гифки на самые различные тематики. Но ничто не сравнится с GIF анимацией, которая сделана своими собственными руками. Думаете, что это сложный процесс? Вы ошибаетесь, это довольно просто. Быстро создать GIF анимацию можно в графическом редакторе Photoshop, конвертируя уже существующее видео, либо используя серию статических изображений. Давайте рассмотрим подробнее, как это делается.

Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.

Как создать GIF анимацию из видео

Для начала необходимо запустить Photoshop, перейти в «Файл» > «Импортировать» > «Кадры видео в слои» и выбрать необходимую видеозапись.

В открывшемся диалоговом окне можно будет выполнить импорт всей видеозаписи, либо выбрать только её определённую часть. Если вы выберете второй вариант, перетащите ручки под окном предварительного просмотра, чтобы установить начальную и конечную точки. Часть видеозаписи, находящаяся между этими ручками, будет импортирована.

Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) — это простой способ уменьшить размер, не слишком сильно влияя на качество.

Убедитесь, что установлена галочка в окошке «Создать покадровую анимацию», затем нажмите «OK». Начнется процесс импортирования видеозаписи. Это может занять некоторое время, в зависимости от размера клипа. После завершения импорта откроется рабочая область, в которой каждый кадр видеозаписи будет размещен на собственном слое.

В нижней части экрана находится палитра шкала времени. Она показывает все кадры, из которых будет состоять ваша GIF анимация.

Вы можете добавлять и удалять кадры по своему усмотрению, или редактировать любой из существующих слоев так же, как редактируете слои на любом другом изображении. Для предварительного просмотра вашей GIF-анимации просто нажмите кнопку «Воспроизвести» внизу шкалы времени.

В итоге должно получиться что-то вроде этого:

Создание GIF анимации из серии статических изображений

Если у вас нет видеозаписи для использования её в качестве основы для вашей GIF анимации, вы сможете создать её вручную из серии статических изображений. Это немного сложнее, особенно если вы хотите сделать что-то крутое, но основной процесс прост.

Вы создаёте свой GIF из одного файла изображения, содержащего несколько слоев. Каждый слой – это отдельный кадр вашей будущей анимации. Существует два способа начать работу:

  1. Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
  2. Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение — это часть будущей анимации.

Теперь вы готовы начать создавать анимацию.

Анимирование статических изображений

Вот как это работает. Когда вы вручную создаете кадр анимации, в него включается каждый видимый слой. Слои, которые отключены, не будут участвовать в создаваемом кадре.

Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.

Для начала создания анимации откройте шкалу времени, если она у вас не открылась автоматически. Для этого в верхней панели нажмите «Окно» и в открывшемся меню выберите «Шкала времени». В центре раскрывшейся панели нажмите «Создать анимацию кадра». Это действие приведёт к созданию первого кадра вашей анимации. В палитре «Слои» скройте слои, которые не должны быть частью кадра.

Теперь нажмите кнопку «Новый кадр», которая будет дублировать предыдущий кадр. Еще раз скройте лишние слои, а те, которые должны участвовать в кадре, сделайте видимыми.

Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.

Завершение

В завершение, установите время отображения каждого кадра. Выделите первый кадр, а затем щелкните по последнему с зажатой кнопкой «Shift», для того чтобы выделить их все. Теперь щелкните стрелку вниз под одним из кадров и выберите задержку. Отсутствие задержки означает, что анимация будет работать быстро, в то время как установленное количество секунд заставит кадры оставаться на экране в течение заданного периода времени.

Наконец, установите параметры цикла, которые вы найдете в нижней части панели «Шкала времени». Этот параметр отвечает за то, сколько раз будет воспроизводиться ваша анимация. В большинстве случаев вы будете выбирать вариант «Всегда».

Теперь нажмите кнопку «Воспроизвести» в нижней части экрана, чтобы просмотреть получившуюся анимацию. Вы должны увидеть что-то вроде этого:

Вы можете редактировать кадры, просто выбирая их и меняя видимость слоёв (вы также можете изменить непрозрачность или сделать другие более сложные настройки). Добавьте дополнительные слои, если они вам нужны, или нажмите значок корзины, чтобы удалить их.

Когда вы будете довольны получившимся результатом, можете переходить к разделу «Сохранение анимации», либо читайте дальше, чтобы улучшить получившуюся анимацию.

Усовершенствование анимации путём добавления промежуточных кадров

Photoshop поддерживает мощную анимационную функцию создания промежуточных кадров. Это позволяет создавать более плавные анимации, автоматически генерируя переходные кадры между двумя существующими кадрами. В этом примере я собираюсь обойти все кадры, чтобы придать звездному небу эффект мерцания.

Для начала выберите первый кадр и нажмите кнопку «Создание промежуточных кадров» панели инструментов в нижней части шкалы времени.

В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.

Теперь повторите этот процесс для других исходных кадров, которые вы добавили. Когда доберётесь до последнего, установите «Промежуточные кадры» в значение «Первый кадр». Это поможет создать плавный переход к началу цикла вашей анимации.

Нажмите кнопку воспроизведения, чтобы просмотреть эффект.

Сохранение анимации

Когда вы закончите, сначала сохраните файл в формате «.PSD». Это сохранит всю информацию о слоях и анимации для того, чтобы вы смогли позже отредактировать вашу анимацию, если потребуется. После этого можно переходить непосредственно к сохранению.

Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».

Вы cможете увидеть, размер анимации в левом нижнем углу окна предварительного просмотра. Если он слишком большой, перетащите ползунок «Потери» вправо. Это повлияет на качество, но значительно уменьшит размер файла.