Как переделать анимированную gif – картинку?

полезное / photoshop 24 июня 2008 83 784   

Думаю, ни у одной меня время от времени появлялось желание переделать / доделать / немного изменить найденную gif – картинку.

Наверняка, многим знакомы ситуации типа:
- вроде и симпатичный готовый анимированный аватарчик, но вот чуть бы его замедлить…
- вот бы написать на анимированной картинке что-нибудь…
- хорошо бы размер gif – картинки поменьше сделать…
- и т.д. и т.п.

Вот мы и разберем эти вопросы сегодня.

В прошлый раз мы создавали анимированный гиф, сегодня же мы будем видоизменять готовый анимированный гиф под свои нужды.

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

Итак, вы имеете готовую анимированную картинку. Рассмотрим 3 варианта её видоизменения (по мне так – самые востребованные случаи):
1._Замедлим анимацию.
2._Что-нибудь напишем на картинке.
3._Изменим размер картинки.


Изменяем скорость анимации на гиф – картинке.
(меняем быстроту мелькания картинок)

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

Как переделать анимированную gif – картинку?
Открываем интересующий нас файл формата gif в Adobe ImageReady: File (Файл) – Open (Открыть) - …


Теперь смотрим на панельку Анимации (Animation) в левом нижнем углу окна программы (по-умолчанию она там появляется).


Как переделать анимированную gif – картинку?

Если её там нет, то надо этот «свиток»(панельку) достать: в меню Window выбираем Animation.
Как переделать анимированную gif – картинку?


Внимательно смотрим на этот свиток и видим, что под каждым «кадром» есть время (в данном случае установлено 0,17 секунд).
Как переделать анимированную gif – картинку?

Вот этот показатель нам и надо поменять жмем на галочку и появляется выпадающий список, где мы можем установить нужную нам продолжительность показа каждого кадра по отдельности (или все разом, выделив все кадры зажав клавишу Shift на клавиатуре).
Как переделать анимированную gif – картинку?

Здесь же и сразу же мы можем просмотреть, что получилось – ещё чуть ниже есть кнопочки плеера – анимацию смотрим в основном окне открытого файла (а не в этом свитке).
Как переделать анимированную gif – картинку?

Если вас все устраивает, то сохраняем полученный результат: File - Save Optimized As…- И смотрите, что получилось.
Как переделать анимированную gif – картинку?

ОК
Как переделать анимированную gif – картинку?

ОК

Если нет – продолжайте менять длительность показа кадров, пока не получите желаемого.
Как переделать анимированную gif – картинку?Как переделать анимированную gif – картинку?

Вот и все!

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


На анимированном аватаре (картинке) пишем слова.


Как переделать анимированную gif – картинку?

Открываем в Adobe ImageReady анимированный аватар: File (Файл) – Open (Открыть) - …

Данный гиф имеет всего 2 кадра (и 2 слоя). И нам надо-то всего добавить надпись. Делается это очень быстро.


Как переделать анимированную gif – картинку?Как переделать анимированную gif – картинку?

Пишем на картинке «нужные слова» в нужном месте при помощи инструмента Text (как в Фотошопе) при этом новый слой в списке слоев создается автоматически.
Как переделать анимированную gif – картинку?Как переделать анимированную gif – картинку?

Сделаем из текста растровую картинку: в меню Layer – правой кнопкой мыши жмем на слое с текстом и в выпадающем списке выбираем Rasterize Layer - и вот текст перестал быть текстом, теперь это просто графический элемент, имеющий один (!) цвет, что очень важно для веса файла.
Как переделать анимированную gif – картинку?

Теперь смотрим на панельку Анимации (Animation) в левом нижнем углу окна программы (по-умолчанию она там появляется). Если её там нет, то надо этот «свиток»(панельку) достать: в меню Window выбираем Animation.
Как переделать анимированную gif – картинку?

Коль кадра всего два мы их лучше создадим заново:
Как переделать анимированную gif – картинку?

Откроем выпадающий список свитка Animation и выберем Delete Frame (Удалить кадр).

Вот у нас остался всего один их кадров. «Настроим» его – мы хотим видеть первую картинку ( Layer 1) и надпись – оставляем их включенными (глазик рядом со слоем включен), а «ненужный» пока слой отключаем (нажать левой кнопкой мыши).
Как переделать анимированную gif – картинку?

Первый кадр готов.

Создаем его копию (выбрав Copy Frame в выпадающем списке или соответствующую кнопочку справа от «проигрывателя»).
Как переделать анимированную gif – картинку?

Появился второй кадр – настраиваем его:
- надпись включена
- Layer 1 выключен
- Layer 2 включен
Как переделать анимированную gif – картинку?

Ну вот, в общем-то, и все. Запустите проигрыватель и увидите, что теперь на вашем анимированном аватаре появилась надпись.
Как переделать анимированную gif – картинку?

Если вас все устраивает, то сохраняем полученный результат: File - SaveOptimizedAs…
Как переделать анимированную gif – картинку?


Можно выключать на втором кадре слово – тогда «мерцать» будет и оно.
Как переделать анимированную gif – картинку?


А если я хочу, чтоб при «мерцании» картинки постепенно добавлялись буквы слова?

Разрезаем слово на отдельные буковки (копируем слой со словом и на каждом последующем слое стираем на одну букву меньше – первый слой – оставлена от слова первая буква, второй слой – 2 буквы и т.д. по полного слоя). Для этого хватаем слой со словом и тащим его на иконку внизу списка слоев – слой копируется и появляется в списке.
Как переделать анимированную gif – картинку?

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

Теперь осталось создавать новые кадры и на каждом последующем включать слой с добавленной буквой. При этом попеременно вкл/выкл Layer 1 и Layer 2 (чтоб менялось не только слово, но и картинка).
Как переделать анимированную gif – картинку?

Вот, что у нас вышло:
Как переделать анимированную gif – картинку?


Можно было и побуквенно разрезать слово (слой – одна буква), тогда вы могли бы «включать» буквы в любой последовательности.
Ну, например, во так:
Как переделать анимированную gif – картинку? или так Как переделать анимированную gif – картинку?



Изменяем размер gif – картинки.


Делается это также очень быстро и всё в той же программе Adobe ImageReady.

Открываем в Adobe ImageReady желаемый гиф-файл: File (Файл) – Open (Открыть) - …
Как переделать анимированную gif – картинку?

Далее заходим в меню ImageImage size…
Как переделать анимированную gif – картинку?

Появляется табличка Image size, где мы и изменяем размер картинки
Как переделать анимированную gif – картинку?Как переделать анимированную gif – картинку?

Вот и изменился размер картинки включая все входящие в нее кадры
Как переделать анимированную gif – картинку?

Если Вы больше ничего менять не собираетесь – сохраним ее: File – Save Optimized As…
Как переделать анимированную gif – картинку?

ОК
Как переделать анимированную gif – картинку?

ОК

Вот мы и получили тот же гиф только размера не 440, а 100 пикселей по ширине.
Как переделать анимированную gif – картинку?
  • Оцените публикацию
    • +47
Реклама на сайте

Похожие публикации

Закажи фотокниги любых форматов

Еще из полезное / photoshop

Поздравляю с 8 марта!
Поздравляю с 8 марта!

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

Гадание по книге перемен (продолжение)
Гадание по книге перемен (продолжение)

И-Цзин Книга Перемен Древнее китайское гадание на монетах. Классическая китайская Книга перемен ("И-Цзинь" или "Чжоу и") относится к числу величайших и одновременно наиболее загадочных творений человека. С точки зрения породившей ее китайской культуры (древнейшей из ныне существующих на земле) она

Почтовый клиент для Mail.ru на основе Google Chrome
Почтовый клиент для Mail.ru на основе

Есть множество противников самого массового почтового сервиса в России (я говорю о компании Mail.ru), хотя никакие злопыхатели не могут оспорить тот факт, что Почта-Мейл.РУ самая известная среди обычных пользователей рунета. Большенство привыкло к классическому почтовому интерфейсу (с кучей

Перевод часов на зимнее время
Перевод часов на зимнее время

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

Кпк-версия сайта и новостные виджеты
Кпк-версия сайта и новостные виджеты

Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том, для чего это сделано и какую пользу может принести именно вам пойдет речь ниже. Все чаще можно встретить людей, активно использующих свой мобильный телефон для доступа в Интернет, обычно для

Когда переводим часы на зимнее время в 2014 году?
Когда переводим часы на зимнее время в

Три с половиной года назад мы, казалось бы, в последний раз перевели часы стрелок на летнее время и вздохнули с облегчением, несмотря на то, что «остановка» была весьма странной – мы стали жить на два часа вперёд относительно природных часов. Но радоваться было чему : теперь не будем испытывать

Убережем домашних любимцев: пироплазмоз у собак
Убережем домашних любимцев: пироплазмоз

Если Ваш четвероногий друг стал отказываться от пищи, у него замедлились реакции и дыхание стало тяжелым, проверьте: не пожелтели ли белки глаз, не повысилась ли температура тела, а моча не потемнела ли? Если да, то срочно везите его к ветеринару! Больше двух дней таких симптомов, и Вы можете

День матери
День матери

В России с 1998 года отмечается День матери в последнее ноябрьское воскресенье. Для 2008 года – это последний день месяца – 30 ноября. Пусть праздник не так известен и популярен, как 8 марта, но не стоит упускать случая и вновь поздравить своих мам. Мама является самым дорогим и близким человеком.

Перевод часов на летнее время в 2013 году
Перевод часов на летнее время в 2013

Раньше мы переводили часы на летнее время в последнее воскресенье марта - в 2 часа по московскому времени, т.е. в ночь с субботы на воскресенье. В 2013 году стрелки часов на один час вперед переводили бы в ночь с 30 на 31 марта. Но перехода на летнее время в России в 2013 году НЕ БУДЕТ! Сколько уже

Обсуждения

Вы не авторизованы!

Обратите внимание, если вы не авторизуетесь, то Ваш комментарий перед публикацией обязательно будет отправлен на модерацию.
Рекомендуем вам войти под своим логином
Или используйте авторизацию через соц.сети
Вконтакте
@
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Вопрос:

Едва повеяло зимой, Они теперь всегда с тобой. Согреют две сестрички, Зовут их…

Ответ: *

Кликните на изображение чтобы обновить код, если он неразборчив

имя
Strekoza 24 июня 2008 10:29
Вот здорово- моя аватарка в примере! lol
Я поменяла свой аватарчик fellow - изменила время, убрала подпись на картинке и вставила свою wink Прикольно! и главное быстро!!! Ура! Ура! Ура! Я умею это делать! bully
  • 0
имя
Talik 27 июня 2008 12:59
на примере последней картинки видно как делаються хентай аватарки :))

мне понравилась bully
  • 0
имя
Ana 27 июня 2008 13:02
Talik, отчего-то я даже не сомневалась, что ты ЭТО напишешь am
а это всего лишь кадры из обычного аниме: девочка, между прочим, просто рассказывает свою грустную историю...
  • 0
имя
Звездочет 20 сентября 2008 07:01
Ура!!!!
наконец-то нашел wink wink wink
Большое спасибо))))
  • 0
имя
ajrene 23 сентября 2008 23:38
извините, а как в гиф добавить рамку неанимированную? нигде не могу найти про это, а сама не догоняю(
  • 0
имя
Ana 24 сентября 2008 10:31
ajrene, если вы в Adobe ImageReady открываете гиф-картинку, то там видите из скольких слоев она состоит. Вам надо создать еще один слой с вашей неанимированной рамкой. Теперь, когда вы будете заново делать анимацию по кадрам просто оставляйте вашу рамку всегда включенной (слой видимым). Картинки анимации будут мелькать, а рамка статичная будет присутствовать в каждом "кадре". Вот и все. Незабудте сохранить "как гиф".

Если подробнее в примере, то читайте выше, там , где описывается "как вставить надпись в анимированную картинку", "замените" надпись на рамку - все остальное абсолютно тоже самое.
  • 0
имя
дима)))))) 11 ноября 2008 00:57
спасибо!!!
  • 0
имя
PiSSoFF 14 января 2009 13:32
Надпись на аватарке с двумя слоями, это просто, а если много слоев, запутаться ж можно, что оставлять видимым, что не видимым и в какой последовательности?
  • 0
имя
Ana 14 января 2009 13:45
PiSSoFF, надо просто быть внимательным и аккуратным, вот в примере, где на аватарке Strekoz - ы , буквы её ника появляются поштучно - 8 слоёв с буквами (по одной на слое) + 2 слоя с фоном.
Когда представляешь конечный результат - всё становится понятным и запутаться сложно - ещё важный момент : надо совершенно однозначно и понятно подписывать слои в Фотошопе, если надо, делить на группы, раскрашивать слои разным цветом и располагать их в необходимой последовательности. Тогда вся дальнейшая работа будет - раз плюнуть fellow
  • 0
имя
Юленька 22 февраля 2009 23:11
супер"спасибо за помощь! wink
  • 0
имя
Лада 7 апреля 2009 16:39
smile Спасибо! Так доступно и легко рассказали и показали! Вот здорово! Уже попробовала, – получилось!Урра! Удачи Вам!
  • 0
имя
Fierlight 23 июня 2009 17:03
Всё получается, только почему-то картнка сохраняется только в формате .psd
:(
  • 0
имя
Ana 23 июня 2009 17:08
Fierlight, в Adobe ImageReady не File - Save As… , а File – Save Optimized As…
  • 0
имя
андрей 6 августа 2009 19:48
привет можешь зделать мне анимированый юзербар
что было
паника
паника
паника
TheVoid идёт
и чтоб паника появлялась в разных местах пожалуста зделай
  • 0
имя
Ana 7 августа 2009 09:50
андрей,

  • 0
имя
Пижама 10 августа 2009 18:59
Привет. Кто сможет мне переделать текст в гифах (4 шт) и сколько это будет стоить ?????
  • 0
имя
Ana 10 августа 2009 19:04
Цитата: Пижама
Привет. Кто сможет мне переделать текст в гифах (4 шт)


Неужели совсем не знакомы с Фотошопом или в статье что-то непонятно?

Цитата: Пижама
и сколько это будет стоить ?????


Думаю, что это можно сказать только увидев гиф-ки и пожелания: что с ними сделать.
  • 0
имя
Виталий 18 августа 2009 18:53
Здравствуйте! А где можно скачать эту программу Adobe ImageReady
  • 0
имя
Ana 18 августа 2009 21:06
Цитата: Виталий
Здравствуйте! А где можно скачать эту программу Adobe ImageReady


... Photoshop–а и прилагающегося к нему Adobe ImageReady (специально его устанавливать не пришлось – похоже он устанавливается автоматически вместе с Фотошопом)...
  • 0
имя
StarYO 21 августа 2009 11:02
Ana спасибо большое - за проделаную работу.
Все доступно понятно, деже ждля простых пользователей!
  • 0
имя
Ana 21 августа 2009 11:04
StarYO, пожалуйста! smile
  • 0
имя
sususus 25 августа 2009 13:00
а каким образом можно добавить на gif врезку из другой картинки? грубо говоря, движется человек на gif, а очень уж хочется, чтобы заместо лица на этой картинке была другая картинка bully поможите чем можите)
  • 0
имя
Ana 25 августа 2009 13:18
sususus, открываете гиф в Adobe ImageReady - там увидите слои, смена которых во времени и позволяет получить движение объекта. Заменяете объект на нужный в каждом слое, сохраняете как анимацию Save Optimized As….
  • 0
имя
sususus 25 августа 2009 13:55
спасибо)
  • 0
имя
Strekoza 29 августа 2009 18:24
Цитата: Виталий
Здравствуйте! А где можно скачать эту программу Adobe ImageReady

Одной из интересных особенностей Adobe Photoshop CS, начиная с третьей версии, стало исчезновение ImageReady - программы для создания веб-графики, чаще всего использовавшейся для анимации gif’ов. Теперь тому, кто захочет редактировать анимированный файл в формате gif, предлагается пользоваться программой Fireworks.
Но Фотошоп можно и обмануть, читаем ЗДЕСЬ как это сделать
  • 0
имя
ттт 13 сентября 2009 17:16
я нечайно удалила ту фигню кажется было их 3 штуки как их вернуть обратно?? no
  • 0
имя
Mion 11 ноября 2009 20:52
Всё получилось, только гифка получается не такая чёткая, как в оригинале... Как сделать чтоб она сохранилась как в оригинале?
  • 0
имя
Ana 11 ноября 2009 21:11
Цитата: Mion
Всё получилось, только гифка получается не такая чёткая, как в оригинале... Как сделать чтоб она сохранилась как в оригинале?


вы уменьшали гиф-ку и четкость "потерялась"? тогда вам следует уменьшить кадры по отдельности в специально предназначенных для этого (уменьшения картинок без потери качества) программках - поищите в интернете: таких найдется немало, я пользуюсь xat.com
  • 0
имя
Игорь 21 декабря 2009 04:39
Урок шикарный! Спасибо! Вот только не пойму,почему не отображается при налаживании шрифта цветной текст? Как правило,вне зависимости от выбранного цвета в большинстве случаев в итоге на гифе черный цвет...
  • 0
имя
Valery 23 декабря 2009 23:55
Спасибо за великолепное и четкое описание smile

У меня одна большая проблема - нет Adobe Image Ready :(

Что делать, чем можно заменить? Есть ли еще способы изменения файла типа .gif

Заранее благодарю )))
  • 0