Как сделать анимированное пояснение в статью на сайте

Здравствуйте, друзья! Наверняка Вы встречали на некоторых сайтах анимированные пояснительные картинки, так называемые гифки. Я сейчас имею ввиду именно картинки, показывающие в динамике порядок действий в конкретных программах. Если нет, то пример Вы можете посмотреть ниже в тексте, а дочитав статью до конца, Вы сможете с легкостью  делать такие картинки сами.

как поставить гифку на сайт

Есть общепринятое мнение, что наиболее подходящий формат изображений для сайтов – это JPG. Основывается оно на малом весе файлов, влияющем на скорость загрузки web страниц. В принципе все это так, но не всегда!  

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

Однозначно скажу, что общепринятый формат JPG хорош для представления простых изображений,  которые просто идут фоном к Вашей статье. Пояснительные  изображения в формате JPG должны иметь высокий контраст. В противном случае читателю будет сложно считывать информацию с  web страницы.

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

Формат GIF мало чем уступает формату JPG. В чем-то он выигрывает, в чем-то проигрывает.

Формат GIF это единственный формат, который позволяет сделать анимированное изображение (гифку).

Например, вот такое:

пример gif анимации

Весит она всего 72197 байт. Сколько нужно статичных картинок, чтобы показать всю последовательность порядка действий? Их будет, как минимум две-три! И если, допустим, Вы возьмете за основу аналогичную заготовку в формате JPG весом 32768 байт:

пример статичной картинки

то получите в итоге минимум сопоставимый суммарный вес!

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

Устанавливается она без проблем – просто запустите установщик и через минуту все будет готово. Работать с ней одно удовольствие, хотя и нужна определенная сноровка, чтобы итоговый файл имел минимальный вес.

LICEcap интерфейс

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

Для записи действий на экране выбираем частоту кадров 8-12.

После этого нажимаете «Record», выбираете место сохранения итогового  файла и почти сразу после этого начинается запись (смотрите  по шкале времени). Сноровка нужна именно в определении момента начала записи и в самой демонстрации всех действий. После нажатия на «Stop» Ваша гифка практически готова.

Точно также программу можно с успехом использовать для gif-нарезок из видео на Youtube (по большому счету – это лучший вариант). Как правило, такие гифки загружают в свой аккаунт в социальных сетях и при этом не критичен вес итогового файла. Поэтому  в окне FPS можно смело указывать частоту кадров 24-30.

Если нужно внести корректировки в полученный файл, то здесь хорошо помогает Photoshop. C помощью инструмента «Кадрирование» можно одним движением подкорректировать размер.

правка в фотошопе

Если на вкладке «Окно» поставить галочку напротив «Анимация» или «Шкала времени» (в зависимости от версии Вашей программы), то в рабочем пространстве появится шкала раскадровки Вашей gif-картинки.

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

настройка фотошопа для правки

Кстати, данная пояснительная картинка залита на сайт в формате PNG. В данном формате она весит всего  137 КБ против  178,5 в JPG. Это Вам пример, как на вес изображения влияет однородность его содержания. Но давайте вернемся к теме анимированных картинок.

Вот этот вариант гифки я сделал в знакомой большинству моих читателей программе Camtaio Studio.

пример анимации сделанной в Camtazia Studio

В этом случае после записи оставляете только дорожку изображения и, увеличив масштаб, вносите все правки. Результат сохраняете в формате GIF, указывая количество кадров в секунду 6 или 10. Если этого не сделать, то вес гифки будет астрономическим. Работать с Камтазией  хорошо, когда нужно визуально показать клики или допустим вставки.

настройки анимации в Camtazia Studio

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

Впрочем, если у Вас нет своего блога, то с помощью программы LICEcap Вы можете с успехом  делать свои гифки, например, для Одноклассников. Это универсальный инструмент.

Мне интересно, что Вы думаете по этому поводу, была ли полезна для Вас статья. Пишите в комментариях. Вполне возможно, что кому то остался непонятным сам процесс работы в вышеописанных программах. Не расстраивайтесь! Просто заходите завтра к вечеру на мой канал на Youtube и смотрите, как практически все делается.

Кстати может кто-то знает другой способ создания анимированных изображений? Пишите.

С уважением, Сергей Почечуев

Оцените статью
Добавить комментарий

  1. Наталия Р.

    Мне понравилась статья. Интересно, актуально, современно.

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

      Ответить
  2. GALANT

    Добрый день, Сергей. Ваша информация для меня как нельзя кстати. Сейчас пишу ряд статей (Шпаргалок) по работе в WORD 2016 и просто «тону» в ворохе скриншотов. Думаю, гифки будут для меня хорошим выходом из «интересного» положения.

    Ответить
    1. Однозначно помогут!

      Ответить
  3. Любовь Зубарева

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

    Ответить
    1. Любовь, иногда действительно гифка очень сильно выручает. Если честно, то я давно встречал такой прием, но вот как его сделать грамотно натренировался только этим летом.

      Ответить
      1. Любовь Зубарева

        А я наоборот пока не встречала статьи с гифками)

        Ответить
        1. Любовь, я их тоже сейчас не встречаю в новых статьях на сайтах. А вот в контенте 2-3-х годичной давности они не редкость. Просто это нужно немного «пошаманить», чтобы получилось, как надо. Наверное потому их и не так много в наше время.

          Ответить
  4. наталья

    Сергей, очень полезная статья! Много что узнала для себя нового! Спасибо большое за столь полезную информацию!

    Ответить
    1. Спасибо!

      Ответить
  5. Екатерина

    очень полезная статья. спасибо

    Ответить
    1. Екатерина, спасибо!

      Ответить
  6. Геннадий

    Хорошая статья!А главное полезная

    Ответить
    1. Да, иногда анимация выразительнее, чем все остальные способы самовыражения в виде скриншотов. Лично для меня это еще и выигрыш в скорости.

      Ответить
  7. Анастасия

    Интересно, продуктивно, наглядно. Спасибо!

    Ответить
    1. Собственно для чего и было написано 🙂

      Ответить
  8. Геннадий

    Сначало немного не мог разобраться, но теперь понял! Спасибо Сергей за статью!

    Ответить
    1. И Вам спасибо за отзыв

      Ответить
  9. Юлиана

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

    Ответить
    1. Я тоже так думаю!

      Ответить
  10. Антонина

    Здорово!
    Спасибо, Сергей, буду применять!

    Ответить
    1. Антонина, конечно надо, особенно, когда сопутствует обстановка (сюжет статьи)

      Ответить
  11. Валерий

    Статья очень полезная. Давно присматривался к теме гифок, но ничего толком понять не мог. Спасибо за рекомендацию и пояснение!

    Ответить
    1. Такие гифки можно не только на блоге использовать, но и в социальных аккаунтах.

      Ответить
  12. Валерий

    ага, только недавно с контактом плотнее познакомился, хотя аккаунту же много лет

    Ответить
    1. Валерий, Вы наверное хотели оставить комментарий к другой статье?

      Ответить
  13. Ирина

    Сергей, интересная подсказка по поводу, создания анимированных изображений в программе Camtaio Studio. Нужно попробовать 🙂 Спасибо!

    Ответить
    1. Ирина, конечно попробуйте. Но в ней нужно немного потренироваться для хорошего результата. Желаю Вам успехов в этом деле. В принципе это все несложно!

      Ответить
  14. Александр

    Как классно получилось.. первый раз вижу такой подход к показу изображений!

    Спасибо большое, сайтик в закладку!!

    Ответить
    1. Согласен с Вами, Александр. Жаль, что способ не всегда применим, но в отдельных случаях хорошо может выручить.

      Ответить
Примечание

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