Как сделать водяной знак after effects

Обновлено: 07.07.2024

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

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

В Photoshop

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

Откройте нужное фото в Photoshop, а затем добавьте текстовый штамп или перетащите в окно программы свой логотип в PNG. При желании слегка поверните, воспользовавшись стрелкой у границы рамки масштабирования.

Расположите водяные знаки по диагонали: слева внизу и справа вверху.

Отключите фоновый слой, кликнув по глазу слева от его названия, перейдите в меню «Редактирование» → «Определить узор» и присвойте паттерну какое‑нибудь имя. После этого слои с водяными знаками больше не понадобятся: их нужно скрыть или удалить.

Теперь включите фоновый слой, разблокируйте его нажатием на замок и дважды кликните по названию, чтобы открыть окно «Стиль слоя». Поставьте галочку «Наложение узора», выберите созданный ранее паттерн, а затем настройте с помощью ползунков непрозрачность и масштабирование. Кликните OK.

Останется перейти в меню «Файл» → «Экспортировать» → «Экспортировать как…» и сохранить фото с водяным знаком в нужном формате. Позже, когда понадобится защитить другие снимки, достаточно будет открыть их в Photoshop и повторить предыдущий пункт.

В Lightroom

Если вы пользуетесь в работе со снимками эти инструментом от Adobe, быстро поставить метку можно прямо здесь. Для этого перейдите в меню «Редактировать» → «Редактировать водяные знаки» в Windows или Lightroom → «Редактировать водяные знаки» в macOS.

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

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

Как сделать водяной знак на фото на смартфоне

Вас выручит мобильное приложение eZy Watermark Photos, которое доступно на iOS и Android.

Хотите добавить водяной знак на видео, чтобы защитить свои авторские права? В программе ВидеоМОНТАЖ это можно сделать буквально за пару минут. Читайте дальше и узнайте как сделать метку в виде текста или картинки.

Зачем это нужно

Водяной знак в видео — это полупрозрачная метка (надпись или эмблема, а также логотип компании), нанесенная на видеоряд / фотографию поверх оригинального кадра. Она выполняет две важные функции:

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

К знаку предъявляются следующие требования:

он должен быть черно-белым и полупрозрачным;
он не должен перекрывать значимую часть изображения и перетягивать на себя внимание.

А теперь разберемся, как поставить водяной знак на видео в программе ВидеоМОНТАЖ.

Как добавить надпись

Откройте видеоредактор и выберите пункт «Новый проект». Далее перетащите на таймлайн нужный видеоролик, который хотите отредактировать и перейдите во вкладку «Текст» (на панели слева).

Также в программе можно работать с фото- и аудио-файлами Также в программе можно работать с фото- и аудио-файлами

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

ВидеоМОНТАЖ предлагает большое разнообразие шрифтов ВидеоМОНТАЖ предлагает большое разнообразие шрифтов

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

В этом же меню вы можете подобрать другой стиль шрифта, настроить параметры тени и контура или вовсе отключить эти опции. Зажмите надпись и перетащите в любое место видеоролика. Метки располагают в углу, чтобы не мешали просмотру.

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

Итак, вы узнали как наложить водяной знак на видео в виде надписи, теперь попробуем проделать то же самое с картинкой.

Как добавить изображение

Водяной знак — это не всегда текстовый фрагмент. Зачастую клеймо выглядит как логотип, по которому пользовательская аудитория узнает тот или иной канал, магазин или известного блогера. Вы тоже можете придумать себе «фирменную бирку».

Такие значки имеют одну особенность — они обязательно должны располагаться на прозрачном фоне. Обычно их сохраняют в формате PNG. Разберем, как вставить водяной знак в видео подобного плана. Это будет статичный элемент, присутствующий на экране в ходе показа только части контента.

Откройте ролик в программе для монтажа видео . На знакомой уже нам боковой панели перейдите в раздел «Картинки», а после выберите подраздел «Рисунки» или «Стикеры» (неважно). Загрузите лого при помощи кнопки «Добавить свой файл».

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

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

Подготовка к просмотру

Когда результат готов, нажмите на кнопку «Сохранить видео». Вы можете выбрать удобный для вас формат конвертации AVI, MKV, MP4 или другой, адаптировать файл для удобного просмотра на телефоне или сохранить для публикации в интернете.

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

Дополнительные функции ВидеоМОНТАЖа

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

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

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

Программа для обработки видео содержит большое количество заготовок: тематических титров, которые будут уместно смотреться в заголовке фильма и видеофонов, которые также можно использовать в качестве монтажной перебивки. Благодаря функции «Конструктор видео» вы смонтируете ролик за пару кликов. Просто добавьте все необходимые файлы в программу: видео, фото, музыку, укажите редактору понравившийся эффект для стилизации кадра, переходы, и софт самостоятельно сгенерирует клип. Затем создайте водяной знак для видео, разместите поверх работы, и проект готов!

Заключение

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

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

Вот гайд по созданию анимаций с советами и замечаниями, которые улучшат вид вашего дизайна.

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

Оживление иллюстраций

Иногда можно использовать простые анимации для оживления иллюстраций, на это не уйдет много времени, но приведёт к положительным результатам. Анимированные иллюстрации, даже самые маленькие, действительно отыгрывают большую роль, не стоит ими пренебрегать.

Упрощение реализации

Моушн-дизайн помогает быстрее реализовать ваш проект. Как?

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

Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.

Улучшите свое портфолио

Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.

Если вы занимаетесь моушн-дизайном, вы можете создавать множество классных анимаций: поиграйте с эффектом параллакса, включите 3D-анимацию в пользовательский интерфейс, поиграйте с эффектами искажения на фотографиях, анимируйте иллюстрации и т.д.

Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.

Импорт из Sketch

Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.

Организуйте все в группы и дайте правильные названия всем слоям

2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).

Импорт из Figma

Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).

1. Убедитесь, что вы скачали шрифты, используемые в дизайне.

2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.

3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.

4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.

Precompose подразумевает под собой новую композицию с анимацией, которую вы решили по какой-то причине сделать отдельно. Чаще всего это делается, чтобы отделить одну логически законченную работу от других.

Как мы знаем, есть два типа людей:

Любят precompose и используют их все время;
Предпочитают не использовать precompose.

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

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

Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).

Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.

Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.

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

Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.

Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.

Основные бесплатные плагины для упрощения вашей работы

Motion Tools

Мы не можем представить себе даже день анимации без этого плагина. Он помогает оптимизировать рабочий процесс и сэкономить много времени.Все инструкции о том, как его использовать, вы найдете в этом видео.

Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!

Bodymovin и Lottie Files

Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.

Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?

В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.

Для их анимации используются стандартные свойства: положение, непрозрачность, масштаб и поворот.

Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.

Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
Создайте ключевые кадры для начальной и конечной точек;
Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
Отрегулируйте кривую, как на изображении.
Вернитесь к временной шкале и при необходимости отрегулируйте время.

Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.

Как оживить раскрытие?

Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
Переместитесь на 20 кадров вперед и создайте ключевые кадры;
Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
Создайте динамику, как показано на графике ниже.

Просмотрите анимацию и вы заметите, что теперь все движения выглядят более плавными.

Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.

Что из себя представляет «Смещение»?

Это означает, что анимация не одновременна. Например, анимация каждого следующего слоя начнётся на 2 кадра позже, чем анимация предыдущего слоя.

Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!

Когда вы освоили базовую анимацию, пришло время проявить больше творчества.

Раскрытие фото

Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.

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

Фотоэффекты

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

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

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

Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.

Посмотрите, как такой вид анимации может помочь в создании впечатляющего видео.

Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.

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

Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.

Когда вы закончите создание анимаций, проверьте пару вещей:

1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.

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

3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.

Советы по публикации и рендерингу в социальных сетях

Если вы новичок в анимации, у нас есть для вас несколько советов.

Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.

В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».

Иногда вам нужно оптимизировать видео, чтобы оно весило меньше. Для этого мы рекомендуем приложение HandBrake. Пользоваться им очень просто и интуитивно понятно. Здесь вы можете уменьшить размер файла видео, оптимизировать, изменить размер, битрейт или частоту кадров.

Советы по социальным сетям

Первое и самое главное — миниатюры. Самая распространённая ошибка — забывать о хороших миниатюрах. В результате у вас может быть пустой или непривлекательный эскиз, который испортит впечатление обо всей проделанной вами работе.

Второе, над чем нужно работать — зацикленная анимация. Это тот пункт, который делает анимацию красивее и плавнее.

Автоматизация процесса - добавление водяных знаков

Всем привет и всех с прошедшими праздниками!

С наступлением Нового Года у меня возникла небольшая проблема - необходимость создания новых заготовок для водяных знаков под разные размеры экспортируемых фото (1200pix, 1400pix, 1920pix, full size). К сожалению LightRoom до сих пор не имеет возможности добавления графических водяных знаков без изменения их размера. Эту проблему я описал тут. До меня это тоже делали, но время идёт, а Adobe так ничего и не делает в этом направлении. В общем я решил ситуацию упростить и добавление водных знаков в их оригинальном размере интегрировать в процесс повышения резкости (на базе подправленного экшена Паши Косенко). Немного подумав, дополнительно сделал отдельные экшены и дроплеты только для добавления водяных знаков без процесса повышения резкости.

Экшен сделан таким образом, что можно добавить графический водяной знак любого размера без изменения его "габаритов" в левую часть фотографии, в цент или вправо. Его вертикальное расположение так же можно "регулировать".

Использования этих Экшенов/Дроплетов подойдёт тем, у кого водяные знаки располагаются постоянно на одном и том же месте, как у меня например (правый нижний угол). Если же расположение водяных знаков постоянно меняется в зависимости от фотографии, то, разумеется, этот "трюк" не поможет.

Примечание : данные Экшены (и Дроплеты) работают как в английской, так и в русской версиях Фотошопа.

Кому интересна эта тема, то можете читать дальше ;-)

1) Шаг 1 - создаём новый файл-заготовку нужного размера и жмём на кнопку добавления слоя, который сверху добавит прозрачный слой.

2) Переходим на новый слой и пишем/рисуем свой водяной знак.

3) Двойное нажатие мышкой на этом слое в панели слоёв Layers откроет окно настроек, где можно понизить "прозрачность" (Opacity) водяного знака (значения от 0 до 255).

4) Далее переходим на нижний слой (Background), жмём Ctrl+A (выделить всё) и удаляем (Del) белый фон, делая картинку полностью прозрачной (бело-серые квадратики - это показатель прозрачности)

5) При добавлении такого водяного знака возникает только одна проблема - прозрачные пиксели вокруг надписи или рисунка Фотошопом будут игнорироваться. Т.е. если создать прозрачную заготовку в размере 100х100 пикселей, где в центре чёрным "закрасить" квадрат размером 20х20 пикселей, то при добавлении такого водяного знака например в нижний правый угол, чёрный квадрат будет располагаться в самом углу фотографии, а не с отступом в 40 пикселей от краёв фото. Что бы отступ был, для этого надо в самом нижнем правом (и/или левом) углу "заготовки" инструментом Карандаш необходимо поставить точку, скажем серым цветом (я поставил красным, что бы было видно). "Видимость" этой точки можно "понизить" краем инструмента Eraser, но не сотрите её полностью.

6) Если есть желание добавлять водяной знак по центру с отступом, скажем 300 пикселей от нижнего края фото, то изменим размер холста:

7) Если нужен полупрозрачный белый прямоугольник вокруг надписи, над слоем Background добавляем новый слой, там сделайте прямоугольное выделение и залейте его белым цветом. Понизьте прозрачность этого слоя на столько, на сколько Вы понизили прозрачность верхнего слоя (или больше/меньше, по вкусу).

8) Что бы водяной знак "появлялся" с отступом от нижнего края на фотографиях, необходимо в самом низу верхнего слоя поставить точку (как было описано в пункте 5).

9) Далее остаётся сохранить все слои в формате .PDN (или .PSD/.TIFF если Вы работаете в Фотошопе) для возможного дальнейшего редактирования (изменения прозрачности например), потом "схлопнуть" все слои и сохранить готовый Watermark в папку C:\Watermark под именем watermark.jpg.

11) Кстати, дроплеты ещё удобны и тем, что на них можно просто "кидать" фотографии (хоть 100 выделенных файлов одновременно).

Водяной знак будет добавлен на все из них автоматически.

12) Если кому-то не нравятся дроплеты, то можно просто пользоваться экшенами. Что бы добавить скаченные экшены в Фотошоп, два раза щёлкните по файлу Sharpen + Watermark.atn и/или Watermarking.atn.

Про работу и редактирование экшенов/дроплетов я пару лет назад писал тут. Там же можно скачать экшен повышения резкости под английский Фотошоп.

Если кому-то нужен только экшен/дроплет для повышения резкости под русский Фотошоп, то их можно получить самостоятельно, удалив часть экшена, которая отвечает за добавления водяного знака:

Если у Вас будут какие-то замечания/пожелания/комментарии - пишите!

Захотите сказать спасибо за файлы, жмите на смайлик:
Спасибо уже сказали раз.

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