1. еволюція сінемаграфіі
2. Сінемаграфія в інтернеті
3. особливості сінемаграфіі
4. Створення «ожилих» фотографій
5. Формат і секрет сінемаграфа для веб-дизайну
6. висновок

Рухомі картинки, «жива» фотографія або сінемаграфія, легка анімація - у даного красивого ефекту є безліч назв, але принцип один - рух елемента на статичному фоні. У веб-дизайні цей тренд використовують не рідко і часто складно відразу сказати: відео чи розміщено на сторінці або сінемаграф. І причина тому - якість відеоряду і сюжет.

У той же час, сінемаграф це і не відео, і не фотографія, якими ми їх звикли бачити, створювати, редагувати, оскільки анімація в даному випадку навряд помітна, але володіє великим впливом на людину . Ефект «ожила» фотографії часто веб-дизайнери і не тільки називають магією, бо це - відмінний спосіб привернути увагу глядачів до образам. І, незважаючи на те, що такі анімаційні картинки використовують в веб-дизайні, їх досить часто можна побачити в соціальних мережах.

Ми ж приділимо увагу використанню «живих» фотографій в веб-дизайні і як їх можна створити в 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 .

Створювати сінемаграф не так і складно, головне - підібрати вихідний матеріал, знайти відео тій анімації, що потрібно. Можна створювати шари і кадри самостійно. Наприклад, все той же пар від кави над чашкою або дим з труб цілком реально намалювати пензликом і розмножити, додаючи проміжні шари на шкалі часу.

висновок

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

Хитрість ж сінемаграфіі в тому, що виглядати вона повинна реалістичною. Якщо додати анімації в звичайну фотографію, яка просто розміщується під логотипом, то це може виявитися дуже дурним. Подивіться уважно на приклади проектів, представлені вище. Вся анімація має сенс і пов'язана з тематикою ресурсу. Тобто, вона або спонукає до дії, або акцентує увагу на деталях і зникає. Легка, таємнича, ненав'язлива, магічна. Це і є ключ до ефективності веб-дизайну і сінемаграфа, спосіб впливу на емоції.