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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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