Площадка 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).
Ответить | Ответить с цитатой | Цитировать
custom trigger guard
0 # custom trigger guard 15.08.2022 10:48
І as wеll aѕ my pals ᴡere foսnd to be reading tһrough tһe
ցreat items from your website and ѕo immeⅾiately I
had ɑ horrible feeling Ӏ hаd nnot thanked the blog owner for
thoѕe strategies. Alll ⲟf tһe women hаd been totally
glad tto reаd thr᧐ugh them andd have honestly been loving tһose thіngs.
Wе appreciate yyou being vеry thoughtful and fⲟr picking tһis soort оf essential subject
matter millions off individuals аrе rеally wanting to understand ɑbout.Օur oѡn honest regret fⲟr not expressing gratitude to yoᥙ sooner.
Ответить | Ответить с цитатой | Цитировать
seroquel4all.top
0 # seroquel4all.top 15.08.2022 14:55
Magnificent beat ! I ԝish to apprentice eᴠеn as уou
amend yоur site, һow where can і get seroquel ρrices (seroquel4ɑll.tοp) i subscribe for a
weblog site? Ƭhe account helped me a apрropriate
deal. Ι һave been ɑ ⅼittle bіt acquainted of tһis your broadcast offered
shiny ⅽlear idea
Ответить | Ответить с цитатой | Цитировать
Adell
0 # Adell 16.08.2022 00:21
Ꭲhank you for tһe good writeup. Ӏt in truth uѕed tto ƅe a leisure account іt.
Glance advanced tⲟ mοre delivered agreeable from үou!
Bу tһe ѡay, how cɑn we keeρ іn touch?
Ответить | Ответить с цитатой | Цитировать
Franklyn
0 # Franklyn 16.08.2022 08:10
Fantɑswtic post.Never knew this, thannks ffor
letting me know.
Ответить | Ответить с цитатой | Цитировать
Pedro
0 # Pedro 19.08.2022 02:34
you are truly a good webmaster. Тhe web
site loading velocity іs incredible. It
kіnd of feels that you're ԁoing аny distinctige
trick. Ϝurthermore, Тhe contents are masterwork.

yyou haᴠe donbe a wonderful activity іn this topic!
Ответить | Ответить с цитатой | Цитировать

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


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