Живой фотошоп: Живой Photoshop / Хабр |

Содержание

Синемаграфия. Как создать живое фото в Adobe Photoshop

Обновлено: 13.02.2022

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

Содержание

Что такое синемаграфия
Как создать синемаграфию в Adobe Photoshop
- Поиск и подготовка видео для синемаграфии
- Обработка видео в Photoshop

Что такое синемаграфия

Синемаграфия — это новая концепция фотографии, которая объединяет в себе видео и фото, что следует из самого названия. Впервые, как упоминалось ранее, синемаграфия появилась в 2011 году. Она была придумана американскими фотографами Джейми Бек и Кевином Баргом, которые использовали эту технику, чтобы оживить свои фотографии моды и новостей. Синемаграфия стала новой эрой в развитии фотографии.

Живое фото с горящими свечами

Синемаграфичный эффект получается из видео, в котором определенные части кадра оставляют статичными, а у других сохраняют движение.

Естественно, что такие работы могут быть востребованы только в интернет изданиях и самой благодарной нишей их использования конечно же является реклама. Что лучше может привлечь внимание потенциального покупателя чем завораживающее живое фото. Исходным форматом такого живого фото является «старый», «добрый» GIF, не требующий дополнительных плагинов и ресурсов.

Пример синемаграфии

Эффект синемаграфии может быть создан в таких программах как:

Adobe Photoshop
After Effects
Cinemagr.am для iPhone
Fotodanz для Android
Онлайн редактор Canva и другие

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

синемаграфия с мужчиной у реки

Синемаграфия — это искусство и достаточно сложное искусство.

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

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

А могут быть и такие забавные примеры.

Пример синемаграфии с напитком

Пример синемаграфии

как сделать живую картинку в фотошопе

Синемаграфия – это файл в gif-формате, который сочетает в себе статичную картинку и анимированную деталь. Идея создания этой техники принадлежит фотографам Джейми Бек и Кевину Баргу, которые использовали ее для обработки своих фоторабот в сфере моды и журналистики. В итоге получалась живая картинка, привлекающая пользователей сайтов больше, чем статичное изображение.

Как сделать синемаграфию в фотошопе?

Уроков, как сделать синемаграфию в Adobe Photoshop, есть много, но они все разнятся между собой, и ни один целиком не подошел мне для реализации. Я покажу самый простой и оптимальный способ, который выбрала для себя. Работа велась в фотошопе версии СС 2015.

Последовательность работы:

Итак, первое – выбираем для начала несложное видео, где можно вырезать кусочек без резких перемещений главного объекта и обилия подвижных дополнительных. Это условие нужно потому, что мы будем работать не над каждым кадром, а в группе. Закачать его с Youtube можно благодаря Savefrom или аналогичным приложениям.

Открываем фотошоп. Выбираем рабочую среду – Движение и отмечаем в разделе меню Окно пункт Шкала времени, если он не отмечен. На панели нажимаем кнопку в виде ленты – Добавить объект.

Вырезаем из видео небольшой кусок (оптимально – 10-30 кадров, то есть достаточным будет фрагмент продолжительностью в 1 секунду).

Сохраним его для себя: Файл-Экспортировать-Сохранить для WEB.

Теперь заново открываем его в Adobe. На панели Шкала времени вы сразу же его увидите по кадрам, как и в слоях. “Слой 1” оставляем не тронутым, а остальные группируем (Зажимаем CTRL и выбираем объекты, а затем CTRL+G).

Сразу же для этой группы применяем маску: Слои-Слой-маска-Скрыть все.
Объект, который будет подвижным выделяем белым с помощью Кисти (непрозрачность 100%).

Вверху на вкладке Слои нажимаем клавишу «Унифицировать видимость», в сплывающем окне подтверждаем – «Синхронизировать».

Теперь, когда мы нажмем на панели Шкала времени клавишу Проиграть, то увидим эффект синемаграфии. Можно сохранять файл для WEB.

Дополнительно

Если нас что-то не устраивает в получившемся синемаграфе, то можете на панели Шкала времени продублировать кадры, сделать их в обратном порядке или задать время продолжительности для каждого кадра. При сохранении файла можно также изменить размер изображения и задать постоянное повторение анимации. Надеюсь, что у вас получилось и вы поняли принцип работы синемаграфии!:)

Читайте также:

10 распространенных ошибок при работе в Photoshop

Цифровая живопись: текстурные кисти в Adobe Photoshop

Скачайте бесплатную книгу «Photoshop Tips and Tricks»

adobe photoshopgifвеб-дизайнгифкасинемаграфия

Предыдущая статьяКак правильно кадрировать при съёмке портретов

Следующая статья Почему с творческими людьми иногда бывает сложно

Про автора

Прямая трансляция вашей работы с помощью Photoshop на iPad

Руководство пользователя
Отмена

Поиск

Последнее обновление:
27 апреля 2021 г. 07:27:56 GMT

Руководство пользователя Photoshop
Знакомство с Photoshop
1. Мечтай. Сделай это.
2. Что нового в Photoshop
3. Отредактируйте свою первую фотографию
4. Создание документов
5. Фотошоп | Общие вопросы
6. Системные требования Photoshop
7. Перенос предустановок, действий и настроек
8. Знакомство с Photoshop
Photoshop и другие продукты и услуги Adobe
1. Работа с иллюстрациями Illustrator в Photoshop
2. Работа с файлами Photoshop в InDesign
3. Материалы Substance 3D для Photoshop
4. Photoshop и Adobe Stock
5. Используйте встроенное расширение Capture в Photoshop
6. Библиотеки Creative Cloud
7. Библиотеки Creative Cloud в Photoshop
8. Используйте сенсорную панель с Photoshop
9. Сетка и направляющие
10. Создание действий
11. Отмена и история
Photoshop на iPad
1. Photoshop на iPad | Общие вопросы
2. Знакомство с рабочим пространством
3. Системные требования | Фотошоп на iPad
4. Создание, открытие и экспорт документов
5. Добавить фото
6. Работа со слоями
7. Рисовать и раскрашивать кистями
8. Сделайте выделение и добавьте маски
9. Ретушь ваших композитов
10. Работа с корректирующими слоями
11. Отрегулируйте тональность композиции с помощью Кривых
12. Применение операций преобразования
13. Обрезка и поворот композитов
14. Поворот, панорамирование, масштабирование и сброс холста
15. Работа с текстовыми слоями
16. Работа с Photoshop и Lightroom
17. Получить отсутствующие шрифты в Photoshop на iPad
18. Японский текст в Photoshop на iPad
19. Управление настройками приложения
20. Сенсорные клавиши и жесты
21. Сочетания клавиш
22. Измените размер изображения
23. Прямая трансляция во время создания в Photoshop на iPad
24. Исправление недостатков с помощью Восстанавливающей кисти
25. Создание кистей в Capture и использование их в Photoshop
26. Работа с файлами Camera Raw
27. Создание смарт-объектов и работа с ними
28. Отрегулируйте экспозицию ваших изображений с помощью Dodge and Burn
Photoshop в Интернете, бета-версия
1. Общие вопросы | Photoshop в Интернете, бета-версия
2. Введение в рабочее пространство
3. Системные требования | Photoshop в Интернете, бета-версия
4. Сочетания клавиш | Photoshop в Интернете, бета-версия
5. Поддерживаемые типы файлов | Photoshop в Интернете, бета-версия
6. Открытие и работа с облачными документами
7. Сотрудничать с заинтересованными сторонами
8. Применение ограниченных правок к вашим облачным документам
Облачные документы
1. Облачные документы Photoshop | Общие вопросы
2. Облачные документы Photoshop | Вопросы по рабочему процессу
3. Управление и работа с облачными документами в Photoshop
4. Обновление облачного хранилища для Photoshop
5. Невозможно создать или сохранить облачный документ
6. Устранение ошибок облачного документа Photoshop
7. Сбор журналов синхронизации облачных документов
8. Делитесь доступом и редактируйте свои облачные документы
9. Делитесь файлами и комментируйте в приложении
Рабочее пространство
1. Основы рабочего пространства
2. Настройки
3. Учитесь быстрее с помощью панели Photoshop Discover
4. Создание документов
5. Разместить файлы
6. Сочетания клавиш по умолчанию
7. Настройка сочетаний клавиш
8. Инструментальные галереи
9. Параметры производительности
10. Использовать инструменты
11. Предустановки
12. Сетка и направляющие
13. Сенсорные жесты
14. Используйте сенсорную панель с Photoshop
15. Сенсорные возможности и настраиваемые рабочие пространства
16. Превью технологий
17. Метаданные и примечания
18. Сенсорные возможности и настраиваемые рабочие пространства
19. Поместите изображения Photoshop в другие приложения
20. Правители
21. Показать или скрыть непечатаемые дополнения
22. Укажите столбцы для изображения
23. Отмена и история
24. Панели и меню
25. Позиционные элементы с привязкой
26. Положение с помощью инструмента «Линейка»
Веб-дизайн, экранный дизайн и дизайн приложений
1. Photoshop для дизайна
2. Артборды
3. Предварительный просмотр устройства
4. Копировать CSS из слоев
5. Разделение веб-страниц
6. Опции HTML для фрагментов
7. Изменить расположение фрагментов
8. Работа с веб-графикой
9. Создание фотогалерей в Интернете
Основы изображения и цвета
1. Как изменить размер изображения
2. Работа с растровыми и векторными изображениями
3. Размер и разрешение изображения
4. Получение изображений с камер и сканеров
5. Создание, открытие и импорт изображений
6. Просмотр изображений
7. Недопустимая ошибка маркера JPEG | Открытие изображений
8. Просмотр нескольких изображений
9. Настройка палитр цветов и образцов
10. Изображения с высоким динамическим диапазоном
11. Сопоставьте цвета на изображении
12. Преобразование между цветовыми режимами
13. Цветовые режимы
14. Стереть части изображения
15. Режимы наложения
16. Выберите цвет
17. Настройка индексированных таблиц цветов
18. Информация об изображении
19. Фильтры искажения недоступны
20. О цвете
21. Настройка цвета и монохрома с использованием каналов
22. Выбор цветов на панелях «Цвет» и «Образцы»
23. Образец
24. Цветовой режим или режим изображения
25. Цветной оттенок
26. Добавить условное изменение режима к действию
27. Добавить образцы из HTML CSS и SVG
28. Битовая глубина и настройки
Слои
1. Основы слоев
2. Неразрушающий монтаж
3. Создание и управление слоями и группами
4. Выбрать, сгруппировать и связать слои
5. Поместите изображения в рамки
6. Непрозрачность слоя и смешивание
7. Слои маски
8. Применение смарт-фильтров
9. Композиции слоев
10. Переместить, сложить и заблокировать слои
11. Слои маски с векторными масками
12. Управление слоями и группами
13. Эффекты слоя и стили
14. Редактировать маски слоя
15. Извлечение активов
16. Показать слои с обтравочными масками
17. Создание ресурсов изображения из слоев
18. Работа со смарт-объектами
19. Режимы наложения
20. Объединение нескольких изображений в групповой портрет
21. Объединение изображений с помощью Auto-Blend Layers
22. Выравнивание и распределение слоев
23. Копировать CSS из слоев
24. Загрузить выделение из границ слоя или маски слоя
25. Knockout для отображения содержимого других слоев
26. Слой
27. Выпрямление
28. Композитный
29. Фон
Выборки
1. Рабочая область выбора и маски
2. Сделать быстрый выбор
3. Начало работы с выборками
4. Выберите с помощью инструментов выделения
5. Выберите с помощью инструментов лассо
6. Выберите диапазон цветов в изображении
7. Настройка выбора пикселей
8. Преобразование между путями и границами выделения
9. Основы канала
10. Перемещение, копирование и удаление выбранных пикселей
11. Создать временную быструю маску
12. Сохранить выделение и маски альфа-канала
13. Выберите области изображения в фокусе
14. Дублировать, разделять и объединять каналы
15. Вычисления каналов
16. Выбор
17. Ограничительная рамка
Настройки изображения
1. Деформация перспективы
2. Уменьшить размытие изображения при дрожании камеры
3. Примеры восстанавливающих кистей
4. Экспорт таблиц поиска цветов
5. Настройка резкости и размытия изображения
6. Понимание настроек цвета
7. Применение регулировки яркости/контрастности
8. Настройка деталей теней и светлых участков
9. Регулировка уровней
10. Настройка оттенка и насыщенности
11. Настройка вибрации
12. Настройка насыщенности цвета в областях изображения
13. Быстрая настройка тона
14. Применение специальных цветовых эффектов к изображениям
15. Улучшите изображение с помощью регулировки цветового баланса
16. Изображения с высоким динамическим диапазоном
17. Просмотр гистограмм и значений пикселей
18. Сопоставьте цвета на изображении
19. Как обрезать и выпрямить фотографии
20. Преобразование цветного изображения в черно-белое
21. Корректирующие слои и слои-заливки
22. Настройка кривых
23. Режимы наложения
24. Целевые изображения для прессы
25. Настройка цвета и тона с помощью пипеток «Уровни» и «Кривые»
26. Настройка экспозиции и тонирования HDR
27. Фильтр
28. Размытие
29. Осветлить или затемнить области изображения
30. Выборочная настройка цвета
31. Заменить цвета объектов
Adobe Camera Raw
1. Системные требования Camera Raw
2. Что нового в Camera Raw
3. Введение в Camera Raw
4. Создание панорам
5. Поддерживаемые объективы
6. Эффекты виньетирования, зернистости и удаления дымки в Camera Raw
7. Сочетания клавиш по умолчанию
8. Автоматическая коррекция перспективы в Camera Raw
9. Как сделать неразрушающее редактирование в Camera Raw
10. Радиальный фильтр в Camera Raw
11. Управление настройками Camera Raw
12. Открытие, обработка и сохранение изображений в Camera Raw
13. Исправление изображений с помощью инструмента Enhanced Spot Removal Tool в Camera Raw
14. Поворот, обрезка и настройка изображений
15. Настройка цветопередачи в Camera Raw
16. Обзор функций | Adobe Camera Raw | 2018 выпусков
17. Обзор новых возможностей
18. Версии процесса в Camera Raw
19. Внесение локальных корректировок в Camera Raw
Исправление и восстановление изображений
1. Удаление объектов с фотографий с помощью Content-Aware Fill
2. Content-Aware Patch and Move
3. Ретушь и исправление фотографий
4. Исправить искажение изображения и шум
5. Основные действия по устранению неполадок для решения большинства проблем
Преобразование изображений
1. Преобразование объектов
2. Настройка кадрирования, поворота и размера холста
3. Как обрезать и выпрямить фотографии
4. Создание и редактирование панорамных изображений
5. Деформация изображений, форм и путей
6. Точка схода
7. Используйте фильтр «Пластика»
8. Контентно-зависимое масштабирование
9. Преобразование изображений, форм и контуров
10. Деформация
11. Трансформация
12. Панорама
Рисунок и живопись
1. Симметричные узоры красками
2. Рисование прямоугольников и изменение параметров обводки
3. О чертеже
4. Рисование и редактирование фигур
5. Малярные инструменты
6. Создание и изменение кистей
7. Режимы наложения
8. Добавить цвет к путям
9. Редактировать пути
10. Краска с помощью кисти-миксера
11. Наборы кистей
12. Градиенты
13. Градиентная интерполяция
14. Выбор заливки и обводки, слоев и контуров
15. Рисование с помощью инструментов «Перо»
16. Создание шаблонов
17. Создание узора с помощью Pattern Maker
18. Управление путями
19. Управление библиотеками шаблонов и пресетами
20. Рисуйте или раскрашивайте на графическом планшете
21. Создание текстурированных кистей
22. Добавление динамических элементов к кистям
23. Градиент
24. Нарисуйте стилизованные мазки с помощью Art History Brush
25. Краска с рисунком
26. Синхронизация пресетов на нескольких устройствах
Текст
1. Добавить и отредактировать текст
2. Единый текстовый движок
3. Работа со шрифтами OpenType SVG
4. Символы формата
5. Формат абзацев
6. Как создавать текстовые эффекты
7. Редактировать текст
8. Интервал между строками и символами
9. Арабский и еврейский шрифт
10. Шрифты
11. Устранение неполадок со шрифтами
12. Азиатский тип
13. Создать тип
14. Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Windows 8
Видео и анимация
1. Видеомонтаж в Photoshop
2. Редактировать слои видео и анимации
3. Обзор видео и анимации
4. Предварительный просмотр видео и анимации
5. Отрисовка кадров в слоях видео
6. Импорт видеофайлов и последовательностей изображений
7. Создать анимацию кадра
8. Creative Cloud 3D-анимация (предварительная версия)
9. Создание анимации временной шкалы
10. Создание изображений для видео
Фильтры и эффекты
1. Использование фильтра «Пластика»
2. Используйте галерею размытия
3. Основы фильтра
4. Ссылка на эффекты фильтра
5. Добавить световые эффекты
6. Используйте адаптивный широкоугольный фильтр
7. Используйте фильтр масляной краски
8. Эффекты слоя и стили
9. Применить определенные фильтры
10. Размазать области изображения
Сохранение и экспорт
1. Сохранение файлов в Photoshop
2. Экспорт файлов в Photoshop
3. Поддерживаемые форматы файлов
4. Сохранение файлов в графических форматах
5. Перемещение дизайнов между Photoshop и Illustrator
6. Сохранение и экспорт видео и анимации
7. Сохранение файлов PDF
8. Защита авторских прав Digimarc
Печать
1. Печать 3D-объектов
2. Печать из Photoshop
3. Печать с управлением цветом
4. Контактные листы и презентации в формате PDF
5. Печать фотографий в макете пакета изображений
6. Плашечные цвета для печати
7. Дуотоны
8. Печать изображений на коммерческой типографии
9. Улучшение цветных отпечатков из Photoshop
10. Устранение проблем с печатью | Фотошоп
Автоматизация
1. Создание действий
2. Создание графики, управляемой данными
3. Сценарии
4. Обработка пакета файлов
5. Играть и управлять действиями
6. Добавить условные действия
7. О действиях и панели действий
8. Инструменты записи в действиях
9. Добавить условное изменение режима к действию
10. Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
Управление цветом
1. Понимание управления цветом
2. Поддержание согласованности цветов
3. Настройки цвета
4. Работа с цветовыми профилями
5. Документы с управлением цветом для онлайн-просмотра
6. Управление цветом документов при печати
7. Импортированные изображения с управлением цветом
8. Пробные цвета
Подлинность контента
1. Узнайте об учетных данных контента
2. Идентичность и происхождение для NFT
3. Подключить учетные записи для атрибуции креативов
3D и техническое изображение
1. Photoshop 3D | Общие вопросы о снятых с производства 3D-функциях
2. Creative Cloud 3D-анимация (предварительная версия)
3. Печать 3D-объектов
4. 3D живопись
5. Усовершенствования 3D-панели | Фотошоп
6. Основные концепции и инструменты 3D
7. 3D-рендеринг и сохранение
8. Создание 3D-объектов и анимации
9. Стопки изображений
10. Рабочий процесс 3D
11. Измерение
12. DICOM-файлы
13. Photoshop и MATLAB
14. Подсчет объектов на изображении
15. Объединение и преобразование 3D-объектов
16. Редактирование 3D-текстур
17. Настройка экспозиции и тонирования HDR
18. Настройки панели 3D

Узнайте, как легко делиться своей работой в режиме реального времени с помощью прямой трансляции из Photoshop на iPad 9. 0003

С помощью прямой трансляции в Photoshop на iPad вы теперь можете записывать свои творческие рабочие сессии и одновременно транслировать в режиме реального времени своим подписчикам и сообществу Behance прямо из приложения.

Чтобы создать прямую трансляцию, выполните следующие действия:

Откройте документ Photoshop на iPad.
Коснитесь значка «Поделиться» () в правом верхнем углу, а затем выберите «Прямая трансляция». При первом выборе Livestream вам нужно будет разрешить Photoshop на вашем iPad доступ к камере и микрофону на вашем устройстве, а также разрешить запись экрана. Вы можете отключить эти параметры позже.
Транслируйте свою творческую работу в режиме реального времени с помощью Photoshop на iPad
В открывшемся диалоговом окне «Добавить заголовок к прямой трансляции» добавьте название и, чтобы помочь людям найти вашу прямую трансляцию на Behance, добавьте необязательное описание.
Нажмите «Далее», чтобы сохранить изменения и перейти в режим прямой трансляции. В режиме прямой трансляции вы можете настроить параметры микрофона и камеры. Микрофон и камера включены по умолчанию. Вы можете отключить микрофон для прямой трансляции без звука. Вы также можете отключить камеру, если хотите показывать экран только во время работы.
Коснитесь значка с тремя точками, чтобы получить доступ к дополнительным параметрам:
- Поделиться прямой трансляцией: Когда вы начнете прямую трансляцию, вы можете нажать эту опцию, чтобы поделиться своей прямой трансляцией на социальных платформах и в других приложениях.
- Текстовая ссылка на чат: коснитесь этого параметра, чтобы включить чат на мобильном устройстве с помощью Behance.
- Включить чат: включите, чтобы включить панель чата, просматривать комментарии и вопросы от зрителей во время прямой трансляции и общаться со своей аудиторией.
- Общедоступно на Behance : Используйте этот параметр, чтобы сделать свою прямую трансляцию общедоступной на Behance.
Нажмите Начать трансляцию, чтобы начать. После 5-секундного обратного отсчета начнется ваша прямая трансляция. Нажмите красную кнопку со знаком X, чтобы завершить прямую трансляцию. Вы можете удалить запись или сохранить ее в своем профиле Behance, чтобы любой мог просмотреть запись.

Записанные вами прямые трансляции можно найти на вкладке «Обнаружение» в Photoshop на главном экране iPad. Вы также можете найти свои записи прямых трансляций на вкладке Видео на странице вашего профиля в Behance.

Получите вдохновение, узнавая о новых проектах, учебных пособиях и других творческих тенденциях, которые транслируются в прямом эфире в Adobe Live и Behance от других пользователей в Photoshop на iPad.

Чтобы смотреть последние прямые трансляции и другой интересный контент, просто коснитесь вкладки «Обнаружение» на главном экране в Photoshop на iPad и прокрутите галерею «Обнаружение».

Найдите вдохновляющий контент и свои прямые трансляции на вкладке «Обнаружение»

Больше похоже на это

Знакомство с рабочим пространством

Войти в свою учетную запись

Войти

Управление учетной записью

Как создавать живые изображения — Синемаграфы в Photoshop

Привет, это видео посвящено созданию синемаграфов в Photoshop. Вы можете видеть, как движется вода, но все остальное неподвижно. Давайте выключим маленькую маску, вы можете видеть, что все изображение зацикливается, но с крутой маленькой маской вы можете заставить это происходить совсем чуть-чуть. А с небольшой зацикленностью слоев он может играть вечно. Мы сделаем пару вариантов, этот тоже, кофейные зерна, просто продолжайте бесконечно. Затем мы рассмотрим возможность экспорта их в формате GIF, чтобы вы могли загружать их на веб-сайты и в социальные сети и получать одно из таких живых изображений из газет о Гарри Поттере. Давайте узнаем, как это сделать сейчас в Photoshop.

Чтобы создать наш Cinemagraph, мы собираемся перейти в «Файл», «Открыть». В вашем файле «13 Video» давайте откроем «Cinemagraph 1». Теперь этот конкретный эффект работает в основном потому, что я нашел видео, в котором что-то движется, вода — хорошее. Это легко подделать и выдумать. И этот парень не слишком много двигается. Он делает это на протяжении всего курса, но я просто собираюсь использовать небольшой фрагмент в начале, где он не очень много двигается. Если много движения или камера на самом деле панорамирует и движется, это просто не работает. Такой статичный, передний план, фон, и просто что-то внутри него движется. Это может быть водопад, это могут быть выливающиеся вещи, развевающиеся на ветру волосы. Если вы погуглите «лучшие синемаграфические анимации» на YouTube, это даст вам некоторые идеи о том, что вы могли бы сделать.

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

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

Теперь давайте посмотрим, «пробел», просто чтобы увидеть, как он зацикливается. Я хочу, чтобы вода петляла, но не он, может быть, немного дольше. Проблема в том, что там есть движение, но я рискну. Обрежьте начало, нужно сделать это, обрежьте конец, вам не нужно делать эту часть, но она слишком длинная, я хочу короткую петлю. Выделив слой, давайте продублируем его, скопируем и вставим. Я просто нажимаю «Command C», «Command V» или «Ctrl C», «Ctrl V» на ПК. Итак, теперь есть два слоя. Теперь, чтобы это сработало, оно не может быть в этой маленькой группе, поэтому просто возьмите «Слой 2». И просто перетащите его, просто перетащите куда-нибудь сюда. Теперь они могут работать бок о бок. Левая часть Слоя 2 перетаскивается полностью туда, а правая часть перетаскивается так, чтобы она совпадала со Слоем 1. Этого вы никогда не запомните. Я сделаю это снова после этого немного быстрее. Итак, если вы смотрите это и следите за этим, посмотрите это, тогда мы сделаем это вместе немного быстрее, и вы сможете сделать паузу и сделать свою собственную версию.

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

Итак, теперь, когда они оба включены, надеюсь, теперь у нас есть петля. Происходит какое-то затухание. Я не слишком беспокоюсь об этом, потому что он двигается, потому что я собираюсь замаскировать его, мне просто нужна вода. Так что давайте не будем об этом слишком сильно беспокоиться, мы можем настроить их позже, но давайте сделаем нашу маску. Чтобы создать маску, нам нужно сделать кадр всего этого. Так что поместите ваш playhead там, где вы хотите еще. Так что я собираюсь иметь мой только в начале здесь. Затем, выбрав оба из них, нажмите на эти два. Есть классный маленький ярлык «Command-Option-Shift-E», который есть на Mac. «Ctrl-Alt-Shift-E» на ПК. Дает вам кадр всех этих слоев и создает свой собственный маленький дубликат сверху. Или вы можете свести его, скопировать, затем отменить и вставить обратно.

Таким образом, у вас есть этот вариант на вершине здесь. Так что это охватывает все. Если я сейчас нажму «Воспроизвести», на самом деле нет, вот моя анимация, вот этот парень. Ему нужно убедиться, что он находится на вершине, выше всего. Я притащу его сюда, чтобы он освещал мое видео. Я собираюсь немного уменьшить масштаб. Так что он покрывает все, мы ничего не видим. Вот и все, мы собираемся проткнуть это отверстие маской, чтобы показать только воду. Итак, с выбранным слоем, давайте перейдем к «Маске слоя», давайте возьмем наш «Инструмент кисти», найдем подходящий размер кисти. Затем нарисуйте здесь отверстие. Это немного сложно сделать, вам придется настроить его. Так что я не хочу слишком много этой бутылки, отменить. Я не хочу слишком много его лица, отменить. Попрактикуйтесь, нажмите «пробел», как видите, на самом деле это довольно хорошо. И вы видите, помните ту нечеткость, которая у нас была? Не беспокойтесь об этом сейчас, потому что вода довольно снисходительна.

Его лицо, сколько этого я хочу? Так что, если я немного подрисую его лицо, это вроде как сработает, за исключением того, что его лицо… потому что этот парень все время двигается, что как бы портит его, так что я собираюсь закрасить его белым. , поэтому его лицо не двигается. И это наш эффект, друзья. Уменьшить. Это круто, да. Если бы он не двигался через все это, у меня возникло бы искушение сделать это и с вещами, стекающими по его лицу, но поскольку он как бы наклоняется вперед во время анимации, мы не можем. Я сохраню это, просто сохраню на рабочий стол. Через секунду мы экспортируем его в формате GIF, я просто хочу показать вам, как только вы войдете в ритм или хотя бы отработаете шаги, вместо того, чтобы все объяснять, я просто пройдусь по нему достаточно быстро. Это будет тот, который вы можете пересмотреть. Перейдите к этому фрагменту, где это красиво и быстро, и я не пытаюсь объяснять вещи по ходу дела.

Итак, я собираюсь перейти к «Файл», «Открыть», и мы собираемся сделать это с «13 Video», «Cinemagraph 2». Вот этот, бобы насыпают в миску. Я хочу, чтобы это казалось чем-то вроде того, что оно постоянно заполняется навсегда. Так какую часть я хочу? Я, наверное, хочу то, что… это немного сложно, когда видишь дно чаши, я тренировался. Легче, когда нет дырки, так что я просто хочу кусок, вот такой большой. Так что помните правило, перетащите. Вы должны перетащить эту левую сторону вправо. Сколько? Вам решать. Пока есть немного, а потом сколько петли, да, это достаточно долго. Нажмите «пробел», чтобы просто проверить. Да, это достаточно долго.

Итак, вот где происходит волшебство, с этим выбранным, скопированным, вставленным. Убедитесь, что этот парень не в той же группе. Перетащите этот путь сюда. Вы можете пройти весь путь до самого начала. Мы можем пройти примерно половину пути, пока есть хорошее перекрытие. Затем перетащите сюда правую сторону. Теперь, когда этот слой выбран, нам нужно добавить пару ключевых кадров непрозрачности. Во-первых, вы ничего не делаете, во-вторых, вы уменьшаете непрозрачность до 0. Нажмите «пробел», и теперь это должно зацикливаться навсегда. Это бит. Вы можете видеть, что есть небольшое затухание, но это довольно хорошо, не так ли? Вы можете решить, что вам не… как будто это не должно быть чем-то еще, кроме этого. Потому что смесь действительно хороша. Это синемаграф без маски. Когда я практиковал это, это никогда не выходило так хорошо.

Итак, скажем, да, я хочу, чтобы они вливались, но не подпрыгивали. Так что помните, выберите оба из них, зажмите все клавиши и E. «Command-Option-Shift-E» или «Ctrl-Alt-Shift-E» на ПК. Перетащите его наверх, вот и все. Убедитесь, что он перекрывается. И добавляем к нему слой-маску. «Слой-маска», немного краски. И я просто хочу, чтобы эти части были такими. Убедитесь, что черный цвет является вашим основным цветом. Я собираюсь нажать «пробел». Это то, что мы пытаемся сделать. Я собираюсь поработать над некоторыми из них, я хочу, чтобы ты был там. Сколько нижней части я хочу? Это своего рода это. И это сделает довольно крутой Синемаграф. Теперь мы превратим его в анимированный gif. Надеюсь, после небольшой практики вы сможете сделать много таких синемаграфов. Протестируйте его на разных вещах, но давайте теперь посмотрим на экспорт в виде gif.

Чтобы экспортировать его, перейдите в «Файл» и перейдите к, вы должны использовать «Экспорт», «Сохранить для Интернета (устаревшие)», вы должны использовать эту старую версию, потому что в ней есть некоторые специальные трюки с GIF. Подождите, пока он загрузится, это будет немного напряжно для вашей машины. Возможно Photoshop не очень любит делать видео и анимацию. Итак, вам нужно выбрать пресет. Не имеет значения, лишь бы это была гифка. Чем выше число, тем больше цветов и тем лучше он будет выглядеть, но размер файла будет больше. Вам не нужно ничего менять, кроме вот здесь, где написано Looping Options. Вы хотите сказать цикл «Навсегда», а не просто играть один раз. Кроме того, это очень большой, например, в формате Full HD, это будет очень большая гифка. Если это выходит через социальные сети, вы, вероятно, хотите, чтобы это было очень мало. Я собираюсь сделать мой как 20% от исходного размера. Это около 300 пикселей в поперечнике, а затем нажмите на эту опцию, которая говорит «Сохранить». Я положу свой на «Рабочий стол», нажмите «Сохранить». Я собираюсь заменить его, потому что я уже практиковался. И затем, надеюсь, на моем рабочем столе есть моя гифка, она меньше половины мегабайта, и это хорошо. И у него есть крутая вещь с петлей. Потрясающе, да?

Делаем второй вариант. Давайте оставим это, оно в полном разрешении, просто чтобы вы могли увидеть разницу. Итак, «Файл», «Экспорт», «Сохранить для Интернета». Он не должен быть слишком большим, как полностью анимированный gif, потому что есть только небольшая часть, которая на самом деле меняет цвета. Так что помните, зацикливайте «Навсегда», убедитесь, что это «gif». Нажмите «Сохранить». Повешу на рабочий стол. Проверь, где ты? На Mac вы можете просто нажать «пробел», и он просто воспроизводится. Вы можете видеть, что все цвета объединены полосами и прочее. Просто потому, что в этом пресете разрешено только 128 цветов. Если вам нужно больше цветов, скажем, вы хотите, чтобы изображение было как можно более фотореалистичным, вы можете выбрать «Экспорт», «Экспорт», «Сохранить для Интернета». Извините, это «Файл», «Экспорт», «Сохранить для Интернета». И хотя значения по умолчанию доходят только до 128, вы можете, здесь дойти до 256, вы можете добавить к нему еще несколько цветов. Это будет выглядеть красиво, у него все еще будут полосы, в GIF разрешено только 256 цветов, тогда как на самом деле у нас их миллионы и миллионы. Обычно это RGB или типичный JPG. Бедные старые гифки имеют всего несколько цветов, поэтому, если вы получите полосы, вы мало что можете с этим поделать. Раскрутите его до 256 цветов.

Другая вещь, которую вы могли бы сделать, это сделать эту вещь монохромной. Тогда это выглядело бы красиво, было бы меньше полос и много оттенков серого, 256 оттенков серого. Давайте посмотрим на это, все еще немного полосатости. Выживаемость. Теперь, помните, на моем Mac я могу просто нажать пробел, и он начнет играть. Если вы на нашем ПК, и вы не можете заставить его работать, даже на Mac вы не можете заставить его работать, просто откройте браузер, может быть Chrome, это может быть Safari, Firefox, Microsoft Edge, Microsoft Исследователь. Я чувствовал, что это проверка того, сколько браузеров я знаю. В любом случае, так что, как только вы его получите, возьмите их, чтобы вы могли как бы увидеть их обоих.