Обучайся бесплатно с WAYUP Premiere сегодня вечером

Движущиеся картинки, «живая» фотография или синемаграфия,  легкая анимация – у данного красивого эффекта есть множество названий, но принцип один – движение элемента на статичном фоне. В веб-дизайне этот тренд используют не редко и зачастую сложно сразу сказать: видео ли размещено на странице или синемаграф. И причина тому – качество видеоряда и сюжет.

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

Мы же уделим внимание использованию «живых» фотографий в веб-дизайне и как их можно создать в Photoshop, если у вас нет нужных фотографий или серии их, нет навыков работы в видеоредакторах. А создавать такую магию в Photoshop вполне возможно.

Эволюция синемаграфии

Сложно точно сказать, когда впервые появились в интернете «живые» фотографии, но определенно известно, что Apple сделала их популярными, когда стала использовать их в iPhone 6S. Но синемаграф – это все же немногим большее по продолжительности и чуть более насыщенное, чем изображение звездного неба. Позже анимационные картинки стали появляться в рекламе на билбордах, представляя образы, которые подмигивают или моргают.

Разумеется, веб-дизайн не остался в стороне, ибо анимационная техника позволяет удержать внимание посетителя на странице и делает сайт чуть интересней, занятней для изучения. По данным компании Flixel (в их блоге на сайте), занимающейся созданием синемаграфов: пользователь дольше на 6-8 секунд находится на странице с «ожившей» фотографией, чем со статичной картинкой.

Синемаграфия в интернете

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

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

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

Иначе используется синемаграфия на сайтах the Lost Thing, the Deep End Design и Studio Marani. Здесь можно увидеть только частичную анимацию: пар над чашкой кофе, дымок из труб, «болтание» ногами или развивающиеся на ветру волосы. Это красиво, ненавязчиво и заинтересовывает.

Веб-дизайнеры сайта water.nature решили использовать «живые» фотографии на всем проекте и представили анимацию облаков, поверхности океана, дождя, падающих капель на лист растения.

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

Особенности синемаграфии

Когда речь заходит о данной тенденции, то главное – простота. Не стоит уподобляться обычным GIF-картинкам, что буквально усыпаны блесками, звёздочками, различными мигающими эффектами. Это раздражает и в веб-дизайне совершенно не уместно. Анимация будет тогда красива, когда станет неожиданностью для человеческого глаза, но естественной в рамках сюжета. Именно поэтому, зачастую лучше использовать готовое видео, чем серию фотографий.

Но и кроме этого рекомендуется:

  • Придерживаться одной тематики и одного элемента анимации на всем сайте. Не стоит на каждой странице «напихивать» GiF-картинки и видеофайлы.
  • Реалистичность. Если берется фотография моря, неба, а корабль  на горизонте приводится в движение, то и тени, и движение, и волны близ корабля должны соответствовать друг другу.
  • Соблюдение законов физики. Собственно относится к предыдущему пункту, а также к падению солнечных лучей, игре свето-тени, силе удара капли о листик цветка и т.д.
  • Сама анимация должна быть небольшой, скромной, но заметной. Это не полноценное видео, это – фотография с элементом анимации. Другой тип изображения.
  • Возможная интерактивность. Анимация может появляться только тогда, когда посетитель проведет по фотографии курсором мышки или одна анимация сменяется на другую при разных действиях (кликах). Например, jules-destrooper или 2ammedia  скриншоты не смогут передать сути, увы, и лучше увидеть своими глазами

Создание «оживших» фотографий

Способов создать синемаграф много. Это и короткие видео, отредактированные, например, в том же Adobe Premiere; файлы GIF и MP4; онлайн-инструменты; заказ у компаний, специализирующихся в данной области; использование общедоступной анимации, например, на cinemagraphs.com или annstreetstudio; мобильных приложений для Android/iOS/WP. Вариаций много и по сложности и кропотливости все они разные.

Но мы посмотрим на Photoshop…

Как ни странно звучало бы, но создать синемаграф в Photoshop можно. Обычно для этого используется серия фотографий, создается слой-маска и затем все слои размещаются на шкале Анимация и при воспроизведении создается движение на 2-3 секунды.  

Что же делать, если серии фотографий нет?

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

Мы воспользуемся готовым видео с портала videezy. Продолжительность видео может быть любой, нужный момент с анимацией можно вырезать отдельно и уже работать непосредственно с ним. Здесь уж как удобнее, можно Adobe Premiere, или иной видеоредактор, или с помощью Photoshop. Открываем приложение и Файл -> импортировать -> Кадры видео в слои. В появившемся окне выбираем видеофайл и настраиваем диапазон или весь видеоряд. Предварительно посмотрите видео и выберите тот кадр или момент, который нужен вам в качестве статичного фона.

Важно: чем дольше по продолжительности видео – тем больше слоев – тем дольше будет идти сохранение (рендер) – тем больше потребуется ресурсов РС. Если у вас при сохранении Photoshop покажет сообщение об ошибке, о нехватке памяти, то сохраните psd, закройте приложение, запустите вновь, спустя пару минут и продолжайте работать.

Мы открыли кусочек видео и получилось у нас 262 слоя (после просмотра готового видео сократили до 83 и уменьшили анимацию). То есть, принцип работы по маске с серией снимков остается неизменным, но вариант нахождения и создания их другой и как правило, он, в большинстве случаев, гораздо проще.

Слой 1 оставляем, а слои 2-262 собираем в группу (CTRL+G), которую необходимо скрыть с экрана и к которой нужно добавить маску. Открываем Слои -> Слой-маска -> Скрыть все. Появилась маска у группы.

Теперь предстоит самая кропотливая часть – выделить ту область, что будет анимироваться. С помощью  магнитного лассо аккуратно выдели часть дороги.

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

После выделения берем кисточку с белым цветом и закрашиваем наше выделение. На миниатюре со слоем-маской будет это видно.

Открываем Окно -> Шкала времени и видим все наши 262 слоя в виде кадров друг за другом, но на прозрачном фоне. То есть, представлена только область со слоем-маской, а фона нет. 

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

Теперь можно нажать Play на шкале анимации и посмотреть, что получилось. «Ожившая» фотография готова. Дополнительно можно «Уточнить край» выделения на слое-маске, растушевать его и сгладить (по маске два раза кликнуть и появится окно свойств); можно на все видео наложить корректирующие слои и изменить цветность; изменить разрешение всего изображения. Одним словом, теперь пришла пора творить и писать картину.

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

Чтобы сохранить в GIF, используем Файл -> Экспортировать ->Сохранить для Web. Выбираем подходящие настройки качества и подбираем размер.  Также иногда удобнее Экспортировать в видео, например, в mp4 и выбрать готовые наборы, кодеки, частоту кадров.

 

Формат и секрет синемаграфа для веб-дизайна

Особенность всего этого в том, что количество цветов в изображении, слоев/кадров в анимации влияет на размер готового файла. Но задача синемаграфа – придать короткую анимацию, которая будет повторяться или проигрываться один раз. Поэтому добиться маленького размера вполне уместно.

Обратите внимание, сама анимация может быть очень короткой, но воспроизводиться быстро (выбор времени на шкале). Человеческий глаз будет улавливать анимацию в целом. Пример проекта The Deep End как раз о том. На анимации движется только два три эффекта пара над чашкой, но создана бесшовность и плавность так, что мы полагаем, что кофе очень-очень-очень горячий. Или анимация собачки в Shiner.

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

Заключение

Независимо от того, что веб-дизайнер называет «живой» фотографией, это именно та тенденция, что достаточно часто появляется на различных сайтах в разных вариантах. Это еще один способ добавить анимацию на сайт без затрат на создание полноценного видео.

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

Как вам материал?