Площадка Ogri - ogri.me | Редактирование анимированных GIF-имиджей в Photoshop CS3 Не будучи дизайнером, все же использую Photoshop для несложных операций с изображениями. Когда понадобилось обрезать анимированный GIF, не стал искать специализированный софт для обработки анимированной графики (типа того же Fireworks), а попытался выяснить, можно ли сделать это силами самого фотошопа. Оказалось - вполне можно, хоть и не очевидно без соответствующих инструкций.

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

Создавать анимированные GIF-файлы в Photoshop CS3 возможно, а вот редактировать существующие без исходного PSD файла стандартным путем - нет. Если вы попытаетесь открыть анимированный рисунок через File → Open... или перетаскиванием в окно программы, то получите сообщение типа: "Это анимированный GIF. Вы можете просматривать только один кадр. Сохранение файла приведет к потере информации". К счастью, есть менее стандартный, но отлично работающий метод.

Что нужно иметь:

  • Photoshop CS3.
  • Установленный QuickTime. Без него не сработает.
  • Голову и руки. Без них вообще ничего не работает.

1. Импорт существующего GIF-изображения

В главном меню кликаем на File → Import → Video Frames To Layers... Открывается диалоговое окно Load. В списке Files of Type имеется единственный тип QuickTime Movie, включающий несколько форматов видео; GIF отсутствует как класс. Вводим в окошко File name "*.*" или даже "*.gif" (без кавычек, естественно) и жмем кнопку Load. Теперь в списке появляются интересующие нас GIF-файлы. Выбираем нужный, снова жмем Load. В открывшемся диалоге Import Video To Layers убеждаемся, что выбрана опция From Beginning To End и отмечен чекбокс Make Frame Animation.

Теперь через пункт Window главного меню откроем окна Animation и Layers, если они не открыты уже. Если в окне Animation есть другие вкладки кроме Animation (Frames) - убедимся, что мы на этой вкладке. Как нетрудно догадаться, каждый кадр в окне анимации соответствует слою в окне слоев. Клик на кадре делает активным соответствующий ему слой.

2. Изменение скорости анимации

Если вы хотите изменить скорость всей анимации, кликните на первый кадр в окне анимации, нажмите и удерживайте Shift, а затем кликните на последнем кадре, чтобы выбрать все кадры. Нажмите на значок "стрелка вниз" в нижней части любого кадра в окне анимации и выберите скорость. Имейте в виду, что скорость анимации в Photoshop не будет точно соответствовать реальной скорости анимации в вашем браузере. Фактическая скорость варьируется от браузера к браузеру. К примеру, как подметил народ, в FireFox анимация быстрее, чем в IE.

3. Изменение размера и обрезание

Тут уже все стандартно. В главном меню открываем пункт Image → Image Size... и редактируем размеры как для обычного статического имиджа. Обрезать анимированную картинку можно через Image → Crop или используя Crop Tool на панели инструментов. Изменения распространятся на все кадры анимации, поскольку они практически являются слоями нашего документа.

4. Удаление кадров

Облегчить размер и ускорить загрузку анимации можно выборочным удалением кадров. Как обычно, нажав и удерживая Ctrl или Shift можно отметить соответственно отдельные кадры или их последовательность в окне анимации и затем перетащить в корзину в нижней части этого окна. Делать это, конечно, надо по-умному, чтобы не порушить мультик. После удаления кадров можно также подредактировать скорость анимации.

5. Финальная оптимизация и сохранение

Если попробовать сохранить результат через меню File → Save, на выходе получится обычный статический GIF. Чтобы не потерять анимацию, нужно воспользоваться меню File → Save for Web Devices... Появляется одноименное диалоговое окно. Здесь можно изменить количество цветов, а также использовать различные настройки для оптимизации нашей анимированной картинки в зависимости от условий поставленной задачи; например, если есть лимит на размер файла, его можно подогнать под него. Если же устраивает все как есть после предыдущих изменений - кликаем на вариант Original.

Жмем на Save, даем файлу имя - имеем результат. Можно перетаскивать его в разные браузеры чтобы потестировать поведение.

P. S. Сам не тестил, но утверждают, что в CS4 все работает точно так же.

Комментарии  

Фаня
0 # Фаня 28.01.2013 07:04
СПА СИ БО!!! Огромное за информацию. Все так просто оказалось. А то я так зае***сь с этим gif -ОМ))
Ответить | Ответить с цитатой | Цитировать
abaza
+1 # abaza 28.07.2013 13:50
большое спасибо,отличная статья
Ответить | Ответить с цитатой | Цитировать
Ogri
+1 # Ogri 29.07.2013 14:51
Стараюсь. Скоро будет еще статья по Фотошопу - как обрабатывать фотографии картин, чтобы получались как у меня в галерее. Возможно, тоже будет полезно. Подписывайтесь на обновления.
Ответить | Ответить с цитатой | Цитировать
Оксана
0 # Оксана 07.01.2017 15:19
Добрый день. Статья хорошая, но я не смогла открыть файл - пишет файл не найден. Думала, думала...и нашла самый простой путь. Наводите мышку на нужный вам гиф-файл и правой кнопкой выбираете: открыть с помощью "Фотошоп" = готово.
Ответить | Ответить с цитатой | Цитировать
Антон
0 # Антон 24.02.2014 05:59
Спасибо за статью,помогла очень сильно. Почаще пишите полезные статьи.
Ответить | Ответить с цитатой | Цитировать
Bitvisitor
+1 # Bitvisitor 20.06.2015 17:28
При добавлении по инструкции гифка не влазит ошибка что то не то
Команда Видео в слои не может быть выполнена так как неудалось открыть файл
Ответить | Ответить с цитатой | Цитировать
Ogri
-4 # Ogri 20.06.2015 18:20
Вы написали этот бред, чтобы засветить свой ресурс еще где-то? Другого объяснения я не могу найти.
Ответить | Ответить с цитатой | Цитировать
Я
-1 # Я 29.08.2015 07:57
+
полезно
Ответить | Ответить с цитатой | Цитировать
Vlad
0 # Vlad 07.12.2016 03:48
А что по русски не как нельзя?
Ответить | Ответить с цитатой | Цитировать
Ogri
-1 # Ogri 07.12.2016 13:03
"Пользующиеся русской версией легко найдут соответствующие элементы в интерфейсах своих фотошопов." Я и сейчас так думаю.
Ответить | Ответить с цитатой | Цитировать
Оксана
0 # Оксана 07.01.2017 15:22
При попытке открыть - пишет файл не найден. И после раздумий я нашла самый простой способ: навести на нужный гиф файл мышку и правой кнопкой выбрать: открыть с помощью "Фотошоп" = готово!
Ответить | Ответить с цитатой | Цитировать
Оксана
0 # Оксана 07.01.2017 15:23
Правда потом и по вашему методу тоже смогла открыть!
Ответить | Ответить с цитатой | Цитировать
Оксана
0 # Оксана 07.01.2017 15:41
Помогите сохранить отредактированный файл - не получается!!
Ответить | Ответить с цитатой | Цитировать
Ogri
+1 # Ogri 07.01.2017 16:11
В новых версиях Фотошопа Save for Web теперь в меню File > Export. Также его можно открыть сочетанием клавиш ctrl + alt + shift + s (win) или cmd + opt + shift + s (Mac).
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Работая с этим сайтом, вы даете свое согласие на использование файлов cookie, необходимых для сохранения выбранных вами настроек, а также для нормального функционирования сервисов Google.