Как ускорить гифку в фотошопе

Обновлено: 03.07.2024

Формат GIF предназначен для сжатия изображений с большими областями сплошного цвета и чёткими элементами, вроде рисунков, логотипов или текста. Будучи форматом изображения 8 битовой глубины он давно бы исчез с просторов Интернета после введения форматов JPEG и PNG, GIF, но несмотря на это он по прежнему является излюбленным форматом среди веб-разработчиков благодаря своей функции покадровой анимации.

Кстати, если вам часто приходится работать с анимированными GIF файлами, то возможно вам будет интересно просмотреть автоматизированное решение – Photoshop экшен « Gift Export », доступный на Envato, который берёт несколько изображений, автоматически загружает их в Photoshop и экспортирует в формат GIF.

1. Обрезка анимации

Для начала откройте видео-файл в Photoshop. Большая часть видео для всей последовательности GIF анимации нам не нужна, поэтому можете обрезать её, прибегнув к помощи панели Timeline (Временная шкала). Просмотрите видео и найдите подходящий фрагмент, а остальное удалите.

2. Уменьшение размера изображения

Вы можете уменьшить размер изображения с помощью меню Image (Изображение), либо сделать это чуть позже в диалоговом окне Save for Web (Сохранить для Web). Лично я предпочитаю уменьшать изображение в начале работы в диалоговом окне Image Size (Размер изображение), потому как вы сэкономите время, нежели будете делать это в конце при сохранении. При изменении размера изображения, видео-слой необходимо преобразовать в смарт-объект, но не стоит беспокоиться, это никак не повлияет на рабочий процесс.

3. Save for Web (Сохранить для Web)

Что я люблю в этом процессе, так это то, что вам не нужно делать каких-либо преобразований на панели Timeline (Временная шкала) для сохранения покадровой анимации, так как диалоговое окно Save for Web (Сохранить для Web) сделает всю работу за вас, как только при выходе вы выберите формат GIF. Посмотрите, в правом нижнем углу диалогового окна появились параметры анимации. Если вы захотите уменьшить размер изображения, то сделать это можно в данном окне.

4. Уменьшение количества кадров

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

5. Количество цветов

6. Алгоритм сокращения цветов

Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, отдавая предпочтение тем тонам, которые чётко распознаёт глаз человека.
Selective (Селективный) создаёт таблицу цветов, аналогичную Перцепционной таблице, но созданную на ключевых оттенках изображения. В этом алгоритме предпочтение отдаётся web-цветам. В Photoshop он установлен по умолчанию.
Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов спектра, преобладающих в изображении. К примеру, для изображения, в котором больше всего преобладает синих и зелёных цветов, будет создана таблица из синих и зелёных оттенков. Большинство оттенков изображения собирается в определённой области спектра.
Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216 безопасных web-цветов. Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет менее чем 216 цветов, то неиспользуемые цвета удалятся из таблицы.
Custom (Заказная) палитра цветов выбранных пользователем.

7. Dithering (Дизеринг)

Так как GIF-файлы содержат ограниченное количество цветов, вы можете имитировать недостающие цвета доступными при помощи сглаживания. Для этого в меню Dithering (Дизеринг) необходимо выбрать один из алгоритмов. Метод Diffusion (Случайный) предназначен для регулирования количества смешения. Методы Pattern (Регулярный) и Noise (Шум) не предназначены для этого. Чем больше сглаживание на изображении, тем больше будет размер файла. Смешение добавляет разноцветные пиксели вблизи друг от друга для имитации вторичных цветов или гладких градаций в цвете. Чтобы получился хороший результат, некоторые изображения должны содержать сглаживание. Но если вы хотите сохранить маленький размер файла, то сглаживание нужно использовать как можно меньше.

8. Другие опции

Web Snap (Web-оснастка) помогает предотвратить размытие в браузере. Делается это путём привязки некоторых цветов к безопасным web-цветам. Чем больше web-цветов, находящихся в GIF, тем меньше браузером будет использоваться сглаживание. При значении 0% цвета будут не затронуты, а при значении 100% все цвета в изображении изменятся для Web-безопасности.
Lossy (Потери) – данная опция контролирует степень потерь визуальной информации, которая способна уменьшать размер файла.
Если в изображении содержится прозрачность, то поставьте галочку возле опции Transparency (Непрозрачность) для сохранения прозрачных пикселей. Убрав галочку, тем самым частично или в полной мере прозрачные пиксели заполнятся матовым цветом.
При активной опции Interlaced (Чересстрочно) файлы формата GIF в браузере будут загружаться в несколько проходов.

9. Сравнение оригинала и оптимизированных версий

В результате добавления множества пользовательских изменений можно сравнить разницу в качестве и размере файла при помощи режима 2-Up (Два варианта).

10. Просмотр, сохранение настроек и оптимизация размера файла

Если в результате оптимизации GIF файла вы довольны окончательными настройками с возможностью предварительного просмотра в браузере, то не забудьте сохранить их в как пресет. Кроме того, вы можете указать ограничение на размер GIF файла при помощи дополнительной настройки Optimize to File Size (Оптимизация по размеру файла). После того, как вы её примените, программа Photoshop автоматически попытается подогнать размер с наилучшим качеством изображения.

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

Сразу скажу, что урок ориентирован на новичков. Гуру фотошопа могут постоять, покурить и посмотреть мельком (а вдруг пропустили чего интересного =))

Часть 1. Создание юзербара

Для начала необходимо создать заготовку для создания анимации.

Шаг 1. Создание документа

Создаем новый документ. Я взял размеры 350х20.

Шаг 2. Градиент.

Берем Gradient Tool (G) и заливаем градиентом наш будущий юзербар.

Результат:

Шаг 3. Текстура

Далее я решил добавить нашему юзербару текстуру.

Рисуем текстуру карбона

Для этого нарисуем текстуру карбона которую мы сможем использовать в дальнейшем.
Создаем новый документ размером 8х8 пикселей и закрашиваем его следующим образом. Можно брать произвольные оттенки серого. Главное здесь — порядок.

Далее идем в Bleding Options слоя с юзербаром.

Результат:

Шаг 4. Текст.

Осталось добавить текст. Для этого нам понадобится шрифт Visitor.
Берем Visitor TT1 BRK устанавливаем размер в 10 пунктов. Я написал “Adobe Photoshop CS4 User”.

Шаг 5. Рамка.

Добавим рамку. Для этого выделим весь юзербар с помощью Rectangular Marquee Tool. Заходим в Edit -> Stroke и ставим там:

Результат:

Часть 2. Анимация юзербара в фотошопе

Шаг 1. Добавление иконки к анимации.

Теперь добавим иконку и перейдем к анимации.

Я добавил классическую иконку четвертого фотошопа и провел масштабирование.

Шаг 2. Разбираемся с палитрой анимации.

Заставим ее двигаться.
Для это настроим сначала наше рабочее место выбрав Window > Workspace > Video или просто включив палитру Animation.
Перейдем в режим покадровой анимации.

Разберемся с палитрой анимации.

Шаг 3. Анимируем юзербар.

Что дальше? Теперь я выделяю слой с иконкой и двигаю ее немного вверх, после этого создаю новый кадр (смотри шаг 2). И повторяю пока не прокрутится вся иконка. Это основной принцип создания анимации в фотошопе.

При ошибках вы можете удалить не понравившийся кадр кнопкой удаления (корзина).
Также выставим нужную задержку. Я поставил 0,1 секунду на все кадры кроме последнего. У него стоит задержка 2 секунды.

Шаг 4. Сохранение в Gif – анимацию.

Когда анимация готова мы должны сохранить ее. Выбираем File > Save for Web & Devices… (Alt+Shift+Ctrl+S). Выбираем формат файла GIF.

Заключение

Итак, мы создали стильный юзербар. Затем на основе него мы создали gif – анимацию. И все это средствами великого и могучего фотошопа. Не правда ли круто?

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

Я задался целью узнать, как же видеоредакторы проделывают эти маленькие трюки.

Я открыл три разных видеоклипа в Adobe Photoshop. Они находятся на отдельных слоях, то есть не входят в одну группу. Это не имеет огромного значения. Взгляните на мою панель Timeline (Шкала времени).

Нажав кнопку Play (Воспроизведение), видеоклипы воспроизведутся с нормальной скоростью. Если нажать на маленькую кнопку со стрелкой на конце, например, второго клипа, то можно настроить скорость его воспроизведения. Не всех трёх, а только одного.

На приведённом выше скриншоте, для скорости я установил 400%. После этого клип стал намного короче. Обратите внимание на скриншот ниже.

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

Вот вам ответ на вопрос. Как ускорить или замедлить часть только одного видеоклипа, в то время как остальная часть будет воспроизводиться с нормальной скоростью. По-моему это достаточно легко понять. Рассмотрим другой пример с одним видео.

На панели «Шкала времени» слева от видео есть значок ножниц «Разделить в точке указателя воспроизведения». Допустим, вы определились в какой части видео хотите изменить скорость. Переместите туда точку воспроизведения и нажмите на значок ножниц. Видеоклип разделится на две части.

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

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

Чтобы создать анимацию вам понадобится:

Данный метод хорошо работает для создания покадровой анимации, используя серию снимков, сделанных с помощью DSLR, компактной камеры или мобильного устройства. В этом примере мы будем использовать серию снимков, сделанных в режиме серийной съёмки с iPhone. Скачайте и разархивируйте серию изображений (смотрите ссылку в начале урока). Так же вы можете использовать собственную серию фотографий.

Совет: данный метод можно также использовать для создания GIF анимации из короткого видео. Давайте приступим!

Импортируем серию фотографий

Откройте Photoshop и перейдите в меню File > Scripts > Load Files into Stack (Файл – Сценарии – Загрузить файлы в стек).

Кликните по кнопке Browse (Обзор) и найдите фотографии, с которыми будете работать. Удерживая нажатой клавишу Shift, выберите все файлы и нажмите Open (Открыть).

Кликните OK, чтобы импортировать выбранные фотографии в один многослойный файл.

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

Как импортировать видео (необязательно)

Если вы начинаете с короткого видео, то вам сначала следует преобразовать кадры видео в отдельные слои. Для этого перейдите во вкладку File > Import > Video Frames to Layers (Файл – Импортировать – Кадры видео в слои).

Найдите и выберите видеофайл, который хотите использовать, и нажмите «Открыть».

Кликните OK, чтобы преобразовать видеофрагменты в один многослойный файл.

Примечание: возможно, Photoshop не сможет импортировать слишком длинное видео. Используйте опцию в окне импорта, чтобы ограничить количество импортированных кадров. Вы можете импортировать всё видео или какую-нибудь часть. Помимо этого, можно ограничить количество импортируемых кадров в заданный интервал, например, каждые 2 кадра.

Открываем шкалу времени

Перейдите в меню Window > Timeline (Окно – Шкала времени).

В середине панели шкалы появится кнопка, нажмите на стрелку справа от кнопки и выберите Create Frame Animation (Создать анимацию кадра). Затем кликните по кнопке, чтобы создать новую анимацию кадра.

Преобразование слоёв в кадры

В правом верхнем углу панели «Шкала времени» кликните по значку меню. Из выпадающего списка выберите Make Frames From Layers (Создать кадры из слоёв). В результате все слои преобразуются в отдельные кадры для анимации.

Примечание: если ваша анимация воспроизводится в обратном порядке, снова кликните по значку меню на панели «Шкала времени» и выберите Reverse Frames (Обратный порядок кадров).

Устанавливаем цикл для анимации

В нижней части панели «Шкала времени» имеется меню повтора, кликните по маленькой стрелочке, чтобы раскрыть список, и выберите Forever (Постоянно). Этим мы создадим циклическую анимацию.

Экспортируем анимацию как GIF

Перейдите в File > Export > Save for Web (Legacy). (Файл – Экспортировать – Сохранить для Web (Старая версия) …).

В параметре Preset (Набор ) выберите GIF 128 Dithered (Gif 128 с дизерингом).
Для Colors (Цвета) установите 256.
Если вы используете GIF для web или хотите ограничить размер файла анимации, внесите изменения в поля Width (Ширина) и Height (Высота) в разделе «Размер изображения».
Чуть ниже в разделе «Анимация» для опции Looping Options (Параметры повторов) установите Forever (Постоянно).

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

Нажмите Save (Сохранить) и выберите место для анимированного GIF-файла.

Мои поздравления! Вы только что создали свой анимированный GIF-файл. Разместите его в интернете, чтобы показать всему миру. Обращаю ваше внимание на то, что вы так же можете использовать эту технику для любого многослойного файла Photoshop.

Читайте также: