Бизнес блог Александра Быкадорова

Как создать gif анимацию. Инструкция как для кухарки

Создать анимацию

Сегодня мы с Вами будем создавать gif анимацию. Итак, для начала давайте я расскажу что такое gif презентация и для чего она вообще нужна.

Доброго времени суток, посетители моего блога Alexandrbykadorov.ru

Как создать gif анимацию?

В данной статье есть мини конкурс — читайте до конца и Вы узнаете о чем идет речь

Ну прежде всего необходимо знать, что gif — ничто иное, как обычное расширение для графического файла. GIF — довольно популярный формат графического файла, он думаю, уступает по популярности, разве что расширению .jpeg.

Хотя кто знает…

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

Как это происходит? Берутся несколько простых картинок и они «накладываются» одна на другую.

Скромненько, я описал о том, что же из себя представляет данное разрешение. Ну что же -идем дальше.

Теперь давайте поговорим о том, за чем необходимо использовать данное разрешение и вообще, зачем использовать анимированные картинки?

Кстати, в статье своего блога «Изменить размер GIF: легче не бывает» я рассказывал, как можно легко и просто изменить размер файла данного разрешения.

Если нужно это делать — данная статья Вам в помощь.

Так вот — вернемся к теме поста. Анимированные картинки намного информативнее, красивее. Их охотно используют в рекламе, в качестве рекламных баннеров. Если расширение .jpeg используют повсеместно (фото, интернет и прочее), то «гифу» досталась участь файлов, которые «живут» в основном в интернете, в частности реклама.

Причем есть интересная особенность. GIF файл, «живущий» вне сети — «мертвый» файл. Что это значит?

Если Вы забьете в поисковике вот такой запрос: «gif анимация» и нажмете вкладку «Картинки» (Для Яндекса) — то он Вам найдет целую гору разных графических файлов, которые имеют данное разрешение. И если нажать на любой из них, Вы увидите, что они ожили.

Сохранив же их на свой ПК, они «умрут», т.е. будут полностью статичны. Это происходит из за того, что Ваш браузер имеет специальный набор кодеков, которые могут раскрывать в динамике данные файлы.

Ладно, думаю это Вы знали и без меня.
Давайте теперь приступим непосредственно к тому, для чего и собственно предназначался данный пост.

Способов создания анимации существует много способов. Я расскажу об одном из них, который для меня является новым.

Итак, эти способы (далеко не весь список):

программа Photoshop

онлайн сервис http://www.picasion.com

онлайн сервис http://gifovina.ru

Первый способ — основной. Им и пользуются все профи в создании gif анимаций. И если Вы в будущем хотите создавать красивые анимации, есть смысл разобраться как создавать их в Фотошопе. Суть там в следующем: рисуются картинки и накладываются в анимацию.

Второй способ — это онлайн сервис. О нем я рассказывать в данном посту не буду. Захотите разобраться — заходите по ссылке. Сложного ничего нет.

А вот о третьем способе и пойдет речь. Он, по сути, точно такой же как и второй, но как то ближе к «телу»…

Идем по ссылке: http://gifovina.ru

Нашему взору открывается весьма немудреный интерфейс данного сервиса. Ну что еще нужно для полного счастья и для плодотворного творчества?

Первое, что нам понадобится — это исходные файлы. Где их взять, должны решить Вы сами. Можно их купить на специальных биржах фото, можно просто скачать бесплатно из сети. Скачанный файлы можно доработать в Фотошопе, сделать красивые надписи.
Во общем полет для творчества есть.

Как создать анимацию

В данном меню можно выбрать загрузку с Вашего компьютера, по ссылке и с камеры.
Тут сложного ничего нет.

Я же, в качестве примера, взял последний вариант и нащелкал себя с камеры ноутбука. Сделал аж целых 7 кадров. Самое сложно это было не крутить головой во время фото сессии )))

Все форматируемые фото находятся вверху.

Как создать gif анимацию?

Если щелкнуть по данным фото вверху мышкой, оно появляется в центре окна и доступно для редактирования.
Первое, что можно сделать с данным фото — это добавить фигуры. Выбора тут хватает.

Создаем gif аннимацию

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

Идем дальше. Правое меню.

Как создать gif анимацию

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

Если же фото разные — не заморачивайтесь  и не переделывайте их внешней программой. Данному сервису это под силу.

Далее у нас есть чекбокс, в котором можно выбрать режим подгонки: «Вписать», «Обрезать». Это как раз и есть данная функция.

Ниже распложен ползунок «Длительность кадров». Перемещая его или просто забив необходимое число, Вы таким образом можете регулировать длительность отображения каждого кадра для всей анимации. Удобно, если у Вас нет каких либо разграничений для отображения отдельно взятого кадра (картинки, фото).

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

Кстати, все материалы, которые я рекомендую от лица, так сказать своего блога, смотрите в разделе «Рекомендую».

Вот этот банер, который я делал сам в Фотошопе и в котором есть акценты на разные кадры:

Банер для примера

Если же и Вам понадобится сделать что то подобное, то необходимо поработать с верхним окошком, где расположены наши исходники.

На данном слайде, я все расписал (фото кликабельно — тыкайте мышкой для увеличения)

Как создать gif аннимацию

После того, как Вы все сделали, настало время нажать на жирную зеленую кнопку, расположенную внизу «Готово» и насладится плодами работы.

Тут также есть несколько вариантов это сделать.
«Поделиться» —  сервис формирует ссылки для вставки анимации на сайт, либо же просто дает ссылку, где размещена  данная анимация. Сколько долго она будет хранится на данном сервисе — я не знаю. Да по сути, это мне и не надо. Сделали анимацию — скачали — установили и полный порядок!

А это то, что у меня получилось в итоге, после моей фото сессии. Не мега круто, но для первого раза сойдет — как думаете?

Как создать giа анимацию

Причем, что мне реально нравится в gif — так это то, сколько места занимает данные файлы.
Вот что собственно я и хотел рассказать Вам в данном посту.
Теперь вопрос, как создать gif анимацию Вас не должен мучать.

Оставляйте свои комментарии, с большим желанием отвечу на вопросы и приму советы.

Внимание! Микроконкурс! — найдите ошибку в тексте (не грамматическую) и я вышлю нашедшему на телефон 50 рублей !

Понравился блог?
Получайте статьи на ПОЧТУ!

О авторе Смотреть все статьи Сайт автора

Александр Быкадоров

Большое спасибо, что читаете мои статьи и оставляете комментарии к ним. Активные комментаторы заносятся на доску почета.
Подробности здесь.
 
Хотите быть первым в курсе новостей, конкурсов на моем блоге?
Подпишитесь на канал RSS для получения новостей, нажав тут.

Комментариев: 36Оставить комментарий

Социальные комментарии Cackle
  • Как всё просто! Спасибо за ссылки на сервисы. С фотошопом я как-то не особо дружу, а тут всё понятно и легко реализуемо.

    Ответ
    • Привет.

      Да, действительно — проще не бывает. Я первый раз, когда делал gif анимацию реально «запарился», ибо делал ее в фотошопе. И лишь позже узнал, что можно сделать это вот так с помощью сервиса, да еще в режиме онлайн.

      Внедряйте. Рад был полезным. Заходите еще )))

      Ответ
  • Здравствуйте, Александр! Интересную тему затронули, спешу применить полученные знания на практике. Спасибо большое за интересный пост :)

    Ответ
    • Доброго дня, Екатерина.
      Всегда пожалуйста. Нет, нет, а понадобятся данные знания. Я несколько раз делал анимацию для баннеров.

      Ответ
      • Вы знаете мою страсть к вирусным открыткам. Потому информация по анимации как нельзя кстати… :)

        Ответ
        • Вирусный маркетинг — отличный способ наращивания подписной базы ! И Вы — действительно любите это дело.
          Отсюда, Екатерина — у меня к Вам вопрос: Вы не планируете что либо организовать в плане совместного мероприятия?
          Может какой нибудь взаимопиар, вирусный флешмоб ))) или что нибудь подобное?
          Хочу испробовать себя в этой стези, в смысле вирусного маркетинга…
          Может что нить замутим?
          Тем более знаете уже кто может сделать флеш анимацию )))

          Ответ
          • Интересное предложение. Собственно говоря, почему бы и нет. надо хорошенечко продумать, как «это дельце» провернуть… :) Сейчас вроде видела на фб что-то подобное проводят… надо понаблюдать, что и как…

            Ответ
            • Вот и я об этом же. Совместные мероприятия, как правило, дают хорошие результаты.

              Ответ
              • ОК, Екатерина.
                Кстати, друзья — может у кого есть наработки по данному вопросу и есть желание принять участие?
                Пишите, буду рад сотрудничеству!

  • Екатерина, тогда от Вас предложение )))
    Я как бы особо и не могу придумать ничего на данную тему…

    Ответ
  • Очень интересно и доступно. Изучу на досуге. Спасибо, Александр! :)

    Ответ
    • Сергей, пожалуйста.
      Я тоже не касался этой темы, пока не припекло. Просто возникла необходимость создать рекламный баннер.

      Ответ
  • Описание прямо для меня! Ведь не зря же «кухарка»! Подробно, понятно, «с огоньком». Осталось на практике поупражняться! Вот и займусь этим на выходных.
    Спасибо, Александр.
    А можно вопрос?
    Рискну…
    Я, оставив первый комментарий, получила от Вас подарок. Обрадовалась, отличная подборка «вкусностей» для сайта. Итак, в подарках есть форма подписки, подобная Вашей, которая расположена в футере. Я пыталась ее установить у себя — не получилось. Честно, добросовестно обратилась за помощью к мужу — не получилось. Есть подозрение, что эта форма не хочет «дружить» с нашей темой сайта.
    Дело в том, что когда муж устанавливал такую форму на прежнюю тему она отлично работала и результаты подписки были выше всех похвал. А сейчас, после того как сменили тему, вот такое дело…
    Может есть подобные варианты,…или специфические фишки, которые помогли бы «помирить» тему и форму подписки. Поделитесь, если у вас есть информация…или скажите рекомендации где можно прочитать информацию на эту тему.
    Спасибо.

    Ответ
    • Я рад, что был полезен, Елена.

      Попробуйте, Елена — там сложного ничего нет. Данный способ намного проще, чем тот, когда используется Фотошоп. Он как раз подходит для не особо замороченных слайдов.

      Вопрос у меня к Вам: Вы спрашиваете про плагин Optincrusher? Я правильно Вас понял?

      Ответ
  • Да, именно этот плагин нам с мужем понравился…даже дело не в простой симпатии…работал что называется на «УРА»!
    За месяц двести человек, для сравнения… стандартная форма подписки в месяц срабатывала на 3 — 5 человек…

    Ответ
    • Доброго дня, Елена. Что в итоге? Настроили его?
      Плагин этот работает хорошо. У меня он «лег» на мою тему отменно, но…
      Как то в Скайп написал один мужчина, у которого тоже были проблемы, судя по вопросам, такие же как и у Вас с установкой.
      Он обратился ко мне за помощью, т.к. темы оформления блогов были одинаковые. Потом он куда то пропал, а позже я у него узнал, как его дела с окошком — сказал все ок…
      Так что если надо — могу узнать у него, что он сделал, что все пошло…

      Ответ
  • Кстати, а кто хочет получить 50 рублей на телефон?
    Неужели никто не нашел ошибки в тексте? )))

    Ответ
  • Думаю нашла, Александр :) Картинка не статистическая, а статическая, отдавайте призы! :)

    Ответ
    • Натала, молодец — Вы самый внимательный мой читатель! Ай да браво, так держать! С удовольствием отдаю призы.
      Пишите в обратную связь, требуйте призы. А то я трудно нахожу номера кошельков.

      Ответ
    • Статичная, точно ! Статическая, это уже из физики )))

      Ответ
  • Спасибо Александр. Думаю дело не только в беглом чтении и неграмотности посетителей. Просто на большинстве страниц интернета эту ошибку допускают почти все и читатели к ней привыкли :) Она перестала резать глаз. Скажу честно, минут 15 вчитывалась, пока обратила внимание. За то изучила как делать баннеры :) Во всем есть положительные моменты.

    Ответ
    • Пожалуйста, Натала.

      Мне очень импонирует Ваши мысли по части замечаний по блогу и в целом. Очень уж у Вас глаз наметан на всякие вещи, на которые я как бы и не замечаю внимание.
      Вот и тут Вы еще раз подтвердили это.
      Все крутилось на языке насчет Вашего участие в конкурсе «Лучший МЛМ блог 2013″, а потом вскрикнул: Е-мае, тематика не ваша же… Жаль. Я бы с удовольствием бы Вам вручил бы какой нибудь подарок.

      Хотя надо еще по старым рассчитаться? Я сколько Вам должен?

      Ответ
  • Да я уже из Вас пол зарплаты вытянула :) Вот еще игрушку отгадать … Если не вездеход, не машина, не вертолет, не танк… Кто их китайцев знает, луноход?

    Ответ
  • Александр! Спасибо Вам, Ваше предложение очень своевременно, ну уж очень нужны инструменты и знания КАК, для создания GIF анимации для создания вирусных открыток, сайтов-воронок и блогов для себя, потому что я решила заняться МЛМ бизнесом профессионально!!!!!

    Ответ
    • Елена, пожалуйста!
      На самом деле сложного ничего в этом нет. Для того, чтобы заниматься МЛМ бизнесом в онлайне, необходимо обладать средним уровнем знаний.
      Для создания профессиональных шаблонов, анимаций, которые понадобятся Вам в будущем — необходимо нанимать фрилансеров.
      Ибо на все нужно время. Вы согласны со мною?
      Если же у Вас возникли уже сейчас вопросы по данной тематике и не только — пишите, я с удовольствием буду публиковать свои посты на данную тему.

      Ответ
    • Елена, а где Ваш Граватар.

      Читайте здесь о том, как его сделать
      Вам пионерское задание — написать комментарий на моем блоге, но уже чтоб я видел Ваш граватарчик.
      Справитесь?

      А то что пишите имя и фамилию в комментариях — молодцы, это Ваш бренд, это Ваше все !

      Ответ
  • Забабахал и себе анимашку только что)) Приятно на блоге смотрится! Спасибо, Саш, за инфу.

    Ответ
    • Кстати, да — отлично смотрится. Получается прикольно: места занимает как одна картинка, а функцию несет, как 10 — ть )))
      Рад был помочь !

      Ответ

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

Ваш email не будет опубликован. Обязательные поля помечены *