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

анимация для сайта

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

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

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

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

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

пример 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 и смотрите, как практически все делается. Кстати может кто-то знает другой способ создания анимированных изображений. Пишите.

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


ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ БЛОГА
и получай новые материалы на почту!
 

ПОДПИСАТЬСЯ НА НОВОСТИ
 

100% гарантия конфиденциальности.
В любой момент Вы сможете отписаться.

 
30 комментариев на Как сделать анимированное пояснение в статью на сайте
  1. Мне понравилась статья. Интересно, актуально, современно.

    • admin:

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

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

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

    • admin:

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

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

        • admin:

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

  4. наталья:

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

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

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

    • admin:

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

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

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

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

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

    • admin:

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

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

    • admin:

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

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

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

    • admin:

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

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

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

    • admin:

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

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

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

Отправляя комментарий Вы даете свое СОГЛАСИЕ на обработку персональных данных, необходимых для нормального функционирования сайта
Друзья! Не удивляйтесь, что Вы сразу не видите свои комментарии.
Они обязательно появятся после модерации.