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

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

Думаю, ни у одной меня время от времени появлялось желание переделать / доделать / немного изменить найденную 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

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

Вот уже октябрь подходит к концу, и мы дружненько вспоминаем, что нам опять придется это делать... переводить часы назад! Впрочем, мы уже привыкли из года в год в последнее воскресенье октября в 03:00 ночи по Москве возвращать стрелки часов на час назад. Смотрим на календарь - так-так... октябрь...

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

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

Как отдыхаем на майские праздники в 2012 году
Как отдыхаем на майские праздники в

Каждый год возникает вопрос: как в мае распределят выходные? Когда отдыхаем, а в какие дни работаем? Просьбы россиян о сокращении новогодних каникул в пользу увеличения майских праздников так и не были услышаны, хотя это и понятно – как логично объяснить перенос? Просто так, потому что удобно?

Блюда и закуски к пиву
Блюда и закуски к пиву

Захотелось обновить сувенирные кружки, привезенные из отпуска в Белоруссии – такие бооольшие глиняные кружки. Это либо должен быть квас… либо … ну, конечно, ПИВО! Нет-нет, мы не большие любители пива и, если честно, предпочитаем пиво, которое и пивом-то назвать сложно – Redd’s. Но тут было решено

Что такое RSS и с чем его едят
Что такое RSS и с чем его едят

Я практически уверена в том, что многие слышали об RSS или очень часто видят подобный значок на сайтах. А все ли знают что это такое? И зачем на сайтах его размещают все и каждый? А нужно ли мне, как читателю, это? Как RSS пользоваться? На все эти вопросы мы и попробуем ответить, тем более, что все

Дайджест новостей: уроки Photoshop для невест №2
Дайджест новостей: уроки Photoshop для

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

Opera - многофункциональный интернет-комбайн
Opera - многофункциональный

А каким браузером Вы пользуетесь? Если просматривать статистику моего сайта, то получается, что больше всего посетителей «сидят» на прилагающемся к винде Internet Explorer 6, и лишь затем следует Opera. Далее Firefox и Internet Explorer 7. Когда-то и я пользовалась Internet Explorer – очень удобно

Ёлка из бумаги
Ёлка из бумаги

Что-то потянуло меня на самодельные ёлки... Правда эту ёлочку мы делали в прошлом году, но, боюсь, она "затерялась" среди прошлогодних снежинок, которыми мы завешивали весь офис в предверии Нового года. А получилась ёлка хоть куда! Времени, правда, немало было на неё потрачено и, если сделать части

Picasa – менеджер фотографий от Google
Picasa – менеджер фотографий от Google

Буквально на днях наткнулась на сайте Google на интересную программку по работе с картинками (фотографиями). Вот, что было написано на страничке этой проги: Поиск, организация и публикация фотографий Picasa – бесплатная программа, которую можно загрузить с веб-узла Google. С ее помощью вы можете: -

Обсуждения

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

Обратите внимание, если вы не авторизуетесь, то Ваш комментарий перед публикацией обязательно будет отправлен на модерацию.
Рекомендуем вам войти под своим логином
Или используйте авторизацию через соц.сети
Вконтакте
@
  • 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