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

полезное / photoshop 24 июня 2008 80 354   

Думаю, ни у одной меня время от времени появлялось желание переделать / доделать / немного изменить найденную 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 – картинку?
  • Оцените публикацию
    • +48
Реклама на сайте

сюда можно поставить код контекстной рекламы.

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

Как сделать анимированный гиф (gif)
Как сделать анимированный гиф (gif)

Буквально на днях озадачилась вопросом «как быстро и безболезненно сделать анимированный гиф?». Оформляя очередную новость на сайте, сделала в Photoshop -е на основе одной фотографии 2 разных картинки и подумала, что желаемый и полный эффект от содеянного был бы в виде анимированного гифа. Никогда

Готовый календарь на 2008 год
Готовый календарь на 2008 год

Согласно Восточному гороскопу, 2008 год - это год Коричневой (Земной) Крысы. Вот я и решила сделать календарь по теме: новый год и крыска. Создавать Новогодний календарь оказалось очень интересно и вовсе не долго. Сегодня я расскажу, как я его делала (в Photoshop и CorelDraw). А так же можно будет

Создаем календарь на 2008 год
Создаем календарь на 2008 год

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

Обсуждения

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

Обратите внимание, если вы не авторизуетесь, то Ваш комментарий перед публикацией обязательно будет отправлен на модерацию.
Рекомендуем вам войти под своим логином
Или используйте авторизацию через соц.сети
Вконтакте
@
  • 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
Ноябрь 1942 — в Алжире высажен англо-американский десант . В наступлении на Тунис на стороне... Добрый день! Очень просим вас удалить ссылку на nastyarai.ru в комментарии по адресу:... Да... многое изменилось за 10 лет с момента написания этой новости.... Вход 350 рублей!! За такие деньги каждому по бокалу шампанского минимум и каждому прощальный... хорошо, когда отпуск. вот только 2 раза по 2 недели в году это не так хорошо, как жить постоянно... эх... сейчас бы на теплое море... пальцы зеленые, теплый бассейн и все дела...... Заплатили говнюкам 1000 р. Ранее можно было войти бесплатно, все осмотреть и не слушать всяких... Отлично! Что-то схожее есть:*... любое черезмерное употребление чего-угодно приводит к проблемам. Природа сама позаботилась: нет... При этом, Не заббывайте: пиво содержит вещество- хмель, которое УБИВАЕТ ПОТЕНЦИЮ, меняет характер...
Цветовая схема