Синемаграфия как сделать в фотошопе
Синемаграфия – это файл в gif-формате, который сочетает в себе статичную картинку и анимированную деталь. Идея создания этой техники принадлежит фотографам Джейми Бек и Кевину Баргу, которые использовали ее для обработки своих фоторабот в сфере моды и журналистики. В итоге получалась живая картинка, привлекающая пользователей сайтов больше, чем статичное изображение.
Как сделать синемаграфию в фотошопе?
Уроков, как сделать синемаграфию в Adobe Photoshop, есть много, но они все разнятся между собой, и ни один целиком не подошел мне для реализации. Я покажу самый простой и оптимальный способ, который выбрала для себя. Работа велась в фотошопе версии СС 2015.
Последовательность работы:
- Итак, первое – выбираем для начала несложное видео, где можно вырезать кусочек без резких перемещений главного объекта и обилия подвижных дополнительных. Это условие нужно потому, что мы будем работать не над каждым кадром, а в группе. Закачать его с Youtube можно благодаря Savefrom или аналогичным приложениям.
- Открываем фотошоп. Выбираем рабочую среду – Движение и отмечаем в разделе меню Окно пункт Шкала времени, если он не отмечен. На панели нажимаем кнопку в виде ленты – Добавить объект.
- Вырезаем из видео небольшой кусок (оптимально – 10-30 кадров, то есть достаточным будет фрагмент продолжительностью в 1 секунду).
- Сохраним его для себя: Файл-Экспортировать-Сохранить для WEB.
- Теперь заново открываем его в Adobe. На панели Шкала времени вы сразу же его увидите по кадрам, как и в слоях. “Слой 1” оставляем не тронутым, а остальные группируем (Зажимаем CTRL и выбираем объекты, а затем CTRL+G).
- Сразу же для этой группы применяем маску: Слои-Слой-маска-Скрыть все.
- Объект, который будет подвижным выделяем белым с помощью Кисти (непрозрачность 100%).
- Вверху на вкладке Слои нажимаем клавишу «Унифицировать видимость», в сплывающем окне подтверждаем – «Синхронизировать».
- Теперь, когда мы нажмем на панели Шкала времени клавишу Проиграть, то увидим эффект синемаграфии. Можно сохранять файл для WEB.
Дополнительно
Если нас что-то не устраивает в получившемся синемаграфе, то можете на панели Шкала времени продублировать кадры, сделать их в обратном порядке или задать время продолжительности для каждого кадра. При сохранении файла можно также изменить размер изображения и задать постоянное повторение анимации. Надеюсь, что у вас получилось и вы поняли принцип работы синемаграфии!:)
1. Скачайте тренировочные изображения. Откройте файл Video.mp4 в Photoshop и переименуйте слой по умолчанию Layer 1 в Coffee Video.
2. Чтобы удалить слой с видео из группы по умолчанию Video Group 1, перетащите слой Coffee Video над Video Group 1. Когда вы увидите две голубые линии над группой, это будет означать, что вы перетащили слой.
Подсказка. При открытии видео в Photoshop создается группа по умолчанию Video Group 1, а внутри нее — слой по умолчанию Layer 1. Также Photoshop автоматически открывает панель Шкала времени под видео.
3. Теперь, когда группа Video Group 1 пуста, удалите ее, перетащив в корзину.
4. Перетащите слой Coffee Video на значок Новый слой в нижней части панели Слои, чтобы создать копию слоя с видео.
5. Перемещайте курсор между видео и панелью Шкала времени, пока он не превратится в двунаправленную стрелку, с помощью которой можно увеличить панель Шкала времени.
6. Используйте ползунок Управление масштабом просмотра шкалы времени, чтобы увеличить размер слоев видео в рабочей области, и перетащите указатель воспроизведения на 2:12.
Создание статичной части синемаграфа
7. Правой кнопкой мыши щелкните слой Coffee Video copy и выберите Растрировать слой во всплывающем меню.
8. В главном меню нажмите Выделение, а затем Выделение и маска.
9. На панели Свойства в выпадающем меню Режим просмотра выберите пункт Наложение.
Подсказка. В этом режиме просмотра все невидимые (замаскированные) части слоя будут закрашены красным цветом. В дальнейшем это позволит точно контролировать созданные видимые области.
10. Выберите инструмент Кисть на панели инструментов и проведите им по области, в которой будет создано движение. Задайте для размера кисти значение 50 пикселей.
Подсказка. Если вы снова захотите уменьшить видимую область, просто нажмите значок «минус» и закрасьте те области, на которых не должно быть движения.
11. На панели Свойства нажмите Инверсия в параметрах вывода и установите значение Слой-маска. Затем нажмите кнопку ОК, чтобы выйти из режима Выделение и маска.
Создание движущейся части синемаграфа
12. Установите начальную и конечную точки на шкале времени, чтобы задать область непрерывного воспроизведения для синемаграфа. Установите начальную точку на значении 00:10, а конечную — на значении 02:09.
Подсказка. Чтобы точно установить ползунок на определенной точке, перетаскивайте его.
14. Сохраните синемаграф, нажав Файл > Экспортировать > Сохранить для Web (старая версия). В диалоговом окне Сохранить для Web выберите следующие параметры: GIF, 256 цветов, дизеринг 100%. При необходимости настройте размер изображения и убедитесь, что для опции Параметры повторов установлено значение Постоянно.
Сегодня я хочу вернуться к теме анимации в Photoshop. И речь пойдет о создании живого, анимированного фото для Инстаграм и не только. Эта тема достаточно актуальна, так как в настоящее время, наличием просто качественной фотографии или всевозможными фильтрами, наложенными на нее – не удивишь. Статика уже не привлекает столько внимания, как раньше. И на смену ей приходит анимация. Я люблю создавать анимацию в среде Photoshop и дальше буду продолжать публиковать уроки на эту тему, ну а в конце данной статьи вас ждет приятный бонус — исходный файл работы в формате PSD, куда вы сможете вставить свое фото.
Создание анимированного анаглиф эффекта в Photoshop
Я уже писала о живых фотографиях, называемых синемаграфией и описывала, как создать свой синемаграфичный эффект . Но тогда речь шла об использовании видео. Сегодня же мы создадим стильный эффект анаглифа для фотографии и заанимируем его. Получится живое фото для Instagram или любого другого ресурса, так как результирующий файл будет сохранен в формате gif.
Такой эффект обработки фото отлично подойдет для стиля киберпанк
Шаг 1.
Создайте документ в Photoshop размером 1080 на 1080 px. Разрешение 300 px на дюйм. Цвета RGB– 8 бит . И разместите в нем свое фото. Назовите слой Фото .
Шаг 2.
Преобразуйте слой фото в Смарт объект . Щелкните по нему правой клавишей мыши и выберите Преобразовать в смарт-объект.
Это нужно для того, чтобы в исходном файле можно было заменить слой с фотографией на любое другое фото. Как это сделать, я покажу в конце урока.
Шаг 3.
Продублируйте слой Фото. Назовите новый слой Фото1 . И поместите его в самый верх. Щелкните по нему правой клавишей мыши и выберите Параметры наложения.
В пункте Параметры наложения отключите зеленый канал изображения, сняв галочку на букве G.
Непрозрачность поставьте в 85%
Сдвиньте изображение со слоя Фото1 влево до тех пор, пока результат вас не устроит. У меня 20 пикселей.
Шаг 4.
Продублируйте слой Фото. Новый слой назовите Фото2 и поместите его в самый верх. Щелкните по нему правой клавишей мыши и выберите Параметры наложения.
В пункте Параметры наложения отключите красный канал изображения, сняв галочку на букве R.
Непрозрачность поставьте в 85%
Сдвиньте изображение со слоя Фото2 влево до тех пор, пока результат вас не устроит. У меня 20 пикселей.
Собственно сам эффект анаглиф для нашего будущего живого фото для Instagram готов.
Теперь приступим к анимации. Я уже писала статью о том, как сделать анимированный баннер в Photoshop . В данном уроке будем пользоваться теми же принципами. Работать мы будем с имеющимися тремя слоями.
Шаг 5.
Выберите пункт меню Окно – Шкала времени. Внизу появится панель в центре которой будет кнопка Создать шкалу времени для видео. Нажмите на нее. Появится шкала с нашими тремя слоями:
Время, зарезервированное под анимацию 5 сек. Оставим его таким.
Шаг 6.
Сначала будем работать со слоем Фото1. Установите указатель времени на время 00: 00. Щелкните по слою Фото1 на шкале времени. Откроется список доступных действий ( Перспектива, Непрозрачность, Стиль ). Щелкните левой клавишей мыши на значок с часами слева от действия Перспектива. Появится желтый ромбик, означающий ключевой кадр. Под название Фото1 так же появится желтый ромбик на времени 00: 00.
Шаг 7.
Переместите указатель времени на 02:00 и щелкните по ромбику слева от действия Перспектива. Под слоем Фото1 на времени 02:00 появится ключевой кадр. (Далее я буду просто писать, создайте ключевой кадр на таком-то времени). Переместите слой Фото1 на 20 пикселей вправо – просто 20 раз щелкните на стрелочку Вправо на клавиатуре.
Шаг 8.
Теперь повторите действия шагов 6 и 7 для слоя Фото2 . Только слой сдвигайте на 20 пикселей влево!
По сути мы имитировали действие, когда человек одевает стерео очки и смотрит на наше фото.
Теперь добавим немного «помех» в анимацию.
Шаг 9.
Работаем со слоем Фото1 . Переместите указатель времени на значение 2:15. Создайте ключевой кадр Перспектива . Со слоем пока ничего не делаем.
Переместите указатель времени на значение 2:16. Создайте ключевой кадр Перспектива. Сдвиньте слой Фото1 на 30 пикселей влево.
Шаг 10.
Переместите указатель времени на значение 2:20 . Создайте первичный ключевой кадр напротив действия Непрозрачность, щелкнув слева от этого слова на значке с часами. Слева появится ромбик, а так же под слоем Фото1 на строчке Непрозрачность появится ромбик, означающий создание первичного ключевого кадра.
Переместите указатель времени на значение 2:21, создайте ключевой кадр для действия Непрозрачность и на панели слоев измените непрозрачность слоя Фото1 на 0%
Шаг 11
Переместите указатель времени на значение 2:25. На шкале времени для слоя Фото2 создайте ключевой кадр напротив действия Перспектива.
Переместите указатель времени на значение 2:26. На шкале времени для слоя Фото2 создайте ключевой кадр напротив действия Перспектива. Переместите слой Фото2 на 25 пикселей вправо и на 5 пикселей вверх.
Шаг 12
Повторите действия с изменением непрозрачности для слоя Фото2 так же как и в шаге 10, со значениями времени – 3:00 и 3:01
Шаг 13
Переместите указатель времени на значение 3:10. Для слоя Фото2 с оздайте ключевой кадр на действии Непрозрачность. И на действии Перспектива. Затем переместите указатель времени на значение 3:11 и создайте ключевой кадр на действии Непрозрачность и на действии Перспектива. Измените непрозрачность на панели слоев до значения 50%. И опустите слой вниз на 5 пикселей и сдвиньте влево на 5 пикселей.
Переместите указатель времени на значение 3:16 и создайте ключевой кадр на действии Непрозрачность. Измените значение непрозрачности на 0
Можно проиграть то, что у нас получилось и сохранить результат: Файл – Экспортировать – Сохранить для Web (в новых версиях) или просто Файл – Сохранить для Web (в старых версиях). Пока я сохраню живое фото для Instagram так, чтобы анимация проигрывалась зациклено, для большей наглядности. Вы же можете сохранять так как вам хочется ( с повторением или однократно).
А теперь я вам покажу, как можно заменить фото в исходном файле.
Щелкните правой клавишей мыши по слою Фото. Выберите пункт Редактировать содержимое.
Откроется окно с исходной фотографией. Поместите в документ новое фото на слой, стоящий выше исходного фото. Закройте этот документ, сохранив при этом изменения. Получилась анимация с новым фото. По сути у нас есть шаблон для создания живого фото для Instagram эффектом анаглиф в Photoshop.
Бесплатный анимированный анаглиф эффект
И теперь обещанный бонус! Тот самый исходный файл-шаблон!
ВНИМАНИЕ! Ознакомьтесь с правилами использования эффекта Live-photo-for-Instagram-Photoshop-Anaglyph.psd
Все права на Live-photo-for-Instagram-Photoshop-Anaglyph принадлежат его разработчику — Дмитриевой Анне.
Вы можете использовать данный эффект в коммерческих и некоммерческих целях, кроме случаев предусмотренных следующими пунктами:
С помощью описанного урока ваша фотография в Instagram станет живой и уникальной!
Подписывайтесь на обновления блога «Дизайн в жизни»
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков и материалов!
Всем привет. В текущей статье я покажу вам, как можно сделать gif баннер средствами Photoshop. Вообще, я привыкла делать баннеры и анимацию в Adobe Flash и Adobe Animate . Естественно, Photoshop не сравнится с данным пакетом по функционалу для анимации. Но все же достаточно простые и интересные баннеры в Photoshop делать можно, ведь в его новых версиях, начиная с CS5, насколько я знаю, появились возможности создавать анимацию прозрачности, масштабирования, перспективы и т.д. Рассмотрим процесс создания gif баннера в Photoshop на примере работы, расположенной в заголовке статьи. Если вас заинтересовал такой вариант баннеров и вы не можете сделать его самостоятельно, закажите у меня создание такой анимации — заполняйте форму обратной связи и я вам обязательно отвечу
Примеры анимированных баннеров в Photoshop
Примеры баннеров, которые можно сделать в Photoshop:
Создание анимированного баннера в Photoshop — инструкция
Создадим новый документ размером 600 на 200 px.
Для начала соберем баннер в статичном виде. Расположим на слое нашего главного персонажа – рыбу, где можно взять бесплатные ресурсы для своих работ я писала в статье « ТОП 8 сайтов с бесплатными ресурсами для дизайнера »:
С помощью инструмента «Произвольная фигура» расположим на слое выноску с диалогом.
Напомню, что отредактировать фигуру (векторный объект) можно с помощью инструмента «Выделение узла».
Так я и сделала – удалила ненужные элементы в слое с первой фигурой и добавила еще 3 Эллипса, чтобы сделать так, как-будто это облако диалога идет изо рта рыбы.
Теперь поместим текст на слоях документа, в порядке, в котором он будет появляться.
Так как текст у нас будет появляться поочередно, то, естественно, что в статичном варианте слои будут налезать друг на друга.
Я покажу все слои с отключенным последним текстовым слоем.
И обратите внимание, что текстовые слои у нас должны быть кадрированы по размерам слоя с фигурой диалогового облака, чтобы оно служило рамкой, из-за которой текст уже не будет видно.
Итак, все слои у нас готовы. Расположены в порядке их появления (снизу вверх). Можем приступать к анимации.
Выберите пункт Окно – Шкала времени .
В появившейся панели выберите кнопку Создать шкалу времени для видео.
В результате создастся временная шкала, со всеми нашими слоями, которые мы уже можем двигать и анимировать.
Так как слой Фон у нас с замочком, то отображаться он не будет на временной шкале, он будет присутствовать всегда неизменно.
Если вы хотите анимировать фон, то снимите блокировку на его слое, щелкнув 2 раза левой клавишей мыши.
Для каждого слоя на временной шкале предусмотрены атрибуты для анимации.
Их можно увидеть, если раскрыть список слева от названия слоя. Мы можем изменять позицию, непрозрачность, стиль.
Так же, если щелкнуть правой клавишей мыши по самому названию слоя на дорожке временной шкалы, откроется список дополнительных анимационных действий.
Активировать создание ключевых кадров для конкретной дорожки со слоем, можно, нажав на значок с часами напротив названия атрибута анимации.
Желтый ромб (пиктограмма ключевого кадра) появится там, где стоит временной указатель на шкале времени. Например, в начале.
Вы можете изменить значение атрибута объекта, например, позиции и ее значение будет сохранено для данного ключевого кадра.
Затем, чтобы задать новое значение и новый ключевой кадр, нужно переместить указатель времени на новое место.
Щелкнуть по значку с ромбом напротив названия атрибута (на временной шкале появится новая пиктограмма ключевого кадра) и задать новое значение атрибута.
Например, переместить объект в новое место.
Теперь попробуем применить полученные знания.
Наша рыба должна появиться слева направо и ее прозрачность должна поменяться с 0 до 100%. Так будет выглядеть шкала времени в данном случае.
После того, как рыба появилась, появится диалоговое облако по частям.
Сначала эллипсы, потом сама фигура.
Дорожки каждого слоя мы можем двигать на временной шкале, поэтому распределим их позиции так, чтобы они появлялись с нужным временным интервалом и зададим анимацию параметру Непрозрачность для каждого слоя.
Для фигуры применим те же действия.
Теперь создадим анимацию для текста, используя тот же алгоритм.
Только у текста будет параметр не Позиция, а Перспектива, при этом мы сможем не только изменять позицию, но и изменять масштаб от меньшего к большему, при начале движения текста.
Для этого используется стандартный инструмент трансформации объекта (Ctrl +T).
Так как изначально слои с текстом у нас кадрированы по форме фигуры, то они будут видимы только в ее пределах.
У второго текста я так же изменила стиль. Добавила градиент в параметрах наложения слоя.
Теперь сравняем все края дорожек в конце.
Для этого нужно потянуть за правый край каждой дорожки и подогнать все под одно время. Чтобы резко не пропадали все объекты.
Для каждой дорожки можно задать изменение непрозрачности в 0. Проиграть то, что получилось, можно нажав на клавишу пробел .
Чтобы сохранить результат, необходимо выбрать Файл – Сохранить для Web.
Выбрать формат Gif и указать, чтобы анимация повторялась постоянно.
Хоть Photoshop и не создан для какой-то сложной анимации (и это резонно), но с помощью вот таких нехитрых действий можно добиться достойного результата при создании gif баннера.
Особенно если вы чувствуете себя в Photoshop, как рыба в воде, нежели при работе во Flash.
Уверена, моя статья раскрыла вам завесу тайны того, как можно создавать анимированные баннеры в Photoshop, а не только использовать покадровую анимацию готового видео, например, при создании живого синемаграфичного эффекта .
Подписывайтесь на обновления блога «Дизайн в жизни»
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и новые уроки Photoshop.
Синемаграфия – это как эффект оживших фото в “Гарри Поттере”. И у вас есть возможность создавать их при помощи разных инструментов: Photoshop, After Effects и даже с помощью смартфона. Вот яркие примеры таких фото:
Также уже существуют приложения для телефонов, позволяющие создать подобный эффект: Cinemagraph Pro для iOs и Loopsie для Android
Благодаря техническому развитию камер и способов обработки фотографий и видео, у нас появилась возможность объединить в единое целое фотоснимок и видео.
Независимо от того, пытаетесь ли вы создать графический моушн, сделать графический дизайн или нарезать новый ролик, создание синемаграфии может дать вашей работе дополнительный импульс творчества и оригинальности, который принесет вам будущие продажи. Давайте посмотрим на этот потрясающий короткометражный фильм, а также на то, как самим создавать такие изображения.
Эрик Флорес Гарнело снял этот короткий фильм с Canon 5D Mk III с Magic Lantern. Он нарезал кадры в Final Cut Pro X и наложил эффект кинопленки в After Effects. Рабочий процесс для их создания в After Effects довольно прост, даже если вы не знакомы с программой. Чудо синемаграфических “картинок” заключается в том, что процесс их создания идеально подходит как для фотографов, так и для видеографов. Проект является потрясающим примером того, насколько универсальным и безграничным рассказом может быть синемаграфия, а также он может изменить наше отношение к фотографии и видео.
Фильм дает нам как потрясающие образы, так и улучшает ваше композиционное чутье, доказывая важность планирования снимков и композиций. Выбор того, какой объект или свойство вы хотите анимировать в кадре, может рассказать аудитории о чем-то другом в сюжете или об общем тоне, который вы пытаетесь передать. Если вы доберетесь до редактора и обнаружите, что финальное изображение не так круто, как вам хотелось бы, вы всегда сможете сменить анимацию любых объектов.
Как создать синемаграфию в Adobe After Effects
Использование After Effects – это не единственный способ создания синемаграфии. Питер Маккиннон показывает нам, как и почему вы должны создавать ее с помощью Photoshop. Маккиннон – яркий пример того, как ваш упорный труд и размещение работ в социальных сетях поможет вам стать знаменитым. Чем более профессиональный контент вы показываете людям, тем больше вероятность, что нужные люди его заметят.
Существует множество способов использования синемаграфии для вашего бренда или клиента; маркетинг стал одной из основных причин роста данного типа изображения. Эта новая тенденция стала популярной в продвижении новых фильмов и создании первоклассных он-лайн реклам. Этот уникальный тип контента также является отличным способом выделиться из толпы.
Читайте также: